Livro #1

Designing Web Interfaces: Principles and Patterns for Rich Interactions:  Scott, Bill, Neil, Theresa: 0636920516255: Amazon.com: Books

Resumo – 11 Novembro (Pág. 1-35)

Primeiro princípio – faça de maneira direta

Aplicativos de visualização de fotos são dados como exemplo, no caso de alterar o nome do arquivo, era necessário acessar uma página de edição para fazer essa alteração. No aplicativo Flickr, era possível fazer essa alteração apenas clicando no nome do arquivo no topo da janela de exibição da imagem, integrando várias funcionalidade numa mesma janela, fazendo com que a experiência do usuário seja bem mais flúida e intuitiva.

Necessidade de acessar outra página para fazer alteração no nome do arquivo.
Interface Flickr, possibilidade do usuário alterar o nome do arquivo diretamente no display.

Nas primeiras páginas web, não havia a possibilidade do usuário interagir com o conteúdo, mas isso ocorria por uma limitação tecnológica da época, onde até mesmo o HTML não incluia formulários de input para os usuários submeterem informações.

Vários programas possuem um local para output, e outro para input, em processos separados. O raciocínio do usuário não reconhece a diferença.

Alan Cooper.

Para Cooper, isso é uma regra simples, “Allow input wherever you have output”. Resumindo, devemos desenvolver a interce responder diretamente à interação do usuário.

Capítulo 1 – In-Page Editing

A vantagem da edição em linha (edição do conteúdo diretamente, sem a necessidade de acessar outra página) é o poder do contexto. Por exemplo, ao editar o nome de uma foto sendo possível visualiza-la enquanto editamos, nos dá um contexto e uma ideia do que devemos entitula-la.

Se a edição necessita do contexto da página, implemente a edição em linha.

O jeito mais simples de implementar o single-field inline editing é quando a edição ocorre na própria janela de visualização. Flickr possui 4 estágios que tornam esse processo bastante eficiente:

1. Nesse momento, o título se destaca do resto das informções, tornando mais fácil o usuário reconhecer do que aquilo se trata.
2. Convite para a edição. Ao passar o cursos no mouse, o usuário é convidado a alterar o conteúdo mostrado.
3. Edição. Uma caixa de texto/seleção é mostrada ao usuário
Feedback para o usuário que a alteração foi feita.

Discoverability

O quão visível é para o usuário visualizar a disponibilidade de alteração do conteúdo.

  • Mostrar dica ao usuário da ferramenta “editar”.
  • Destacar o fundo com a área editável em amarelo.
  • Alterar o cursos para cursor de edição.

Acessibilidade

Disponibilizar uma alteranativa ao inline editing, permitindo a edição em outra página pode aumentar a acessbilidade.
  • Em telas com muitas informações, single line editing poder ser contra-intuitivo, tornando a página “edit” fundamental para melhorar acessibilidade e visualização das informações no display.

Readability versus editability

  • Informações legíveis são prioridade em um display, mas a melhor forma de apresentar edição é com um formulário de inputs. Os usuários precisarão de algumas das seguintes funções:
    • Controle de edição
    • Field prompts
    • Texto de ajuda para entrada de dados
    • Gestão de erros
    • Input assistido (pop-up de calendário, seleção com drop-down
    • Profundidade para indicar editabilidade.