Forms101
Upcoming SlideShare
Loading in...5
×
 

Forms101

on

  • 4,379 views

Os slides da minha apresentação para o CodeBits 2008 (http://codebits.sapo.pt) sobre desenho de formulários web, basedada no livro ‘Web Form Design’ do ...

Os slides da minha apresentação para o CodeBits 2008 (http://codebits.sapo.pt) sobre desenho de formulários web, basedada no livro ‘Web Form Design’ do
Luke Wroblewski.

Luke kindly provided a discount code for anyone interested in buying the book or his recent webinar "Modern Web Form Design", just use the code 'CUSTODIO' -> http://www.rosenfeldmedia.com/

Statistics

Views

Total Views
4,379
Views on SlideShare
4,239
Embed Views
140

Actions

Likes
11
Downloads
40
Comments
0

8 Embeds 140

http://blog.centopeia.com 59
http://codebits.sapo.pt 42
http://codebits.eu 22
http://blog.pedrocustodio.com 12
http://www.soup.io 2
https://www.sharepoint.hu.nl 1
http://static.slideshare.net 1
http://www.agglom.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Forms101 Forms101 Presentation Transcript

  • FORMS 101 Pedro Custódio CodeBits 2008 Lisboa, Portugal
  • Quem sou eu? :) Pedro Custódio http://blog.centopeia.com http://sapo.pt Responsável pela Qualidade e Usabilidade
  • Disclaimer ‘Web Form Design’ by Luke Wroblewski (aka LukeW) http://www.rosenfeldmedia.com/books/webforms/ A maioria das imagens presentes nesta apresentação são extraídas do livro e podem ser consultadas em: http://www.flickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/
  • Formulários, hein?
  • 5 Os formulários são essenciais em quase tudo o que fazemos online: e-commerce comunidades etc.
  • ...no entanto quase todos funcionam como verdadeiras barreiras
  • 7 entre nós e o utilizador photo by http://flickr.com/photos/thetruthabout
  • 8 Desenhar Formulários
  • 9 Quem preenche formulários?
  • Todos odiamos formulários...
  • 11 É preciso estabelecer um diálogo com os utilizadores
  • 12 Num diálogo real, existem alguns aspectos que fazem com que uma conversa seja um sucesso ou insucesso em termos de comunicação: pistas visuais (dadas por cada interlocutor durante uma conversa); atenção aos detalhes (abrir uma caixa apple por exemplo, receber um presente, etc.) no entanto online tudo se resume a um...
  • Formulário...
  • 14 mas então como garantir que obtemos um bom formulário?
  • 15 Testes de Usabilidade + Estudos etnográficos + Atenção no apoio ao cliente + Análise de trafego + Eye tracking + e muito cuidado com convenções WEB. = Um bom formulário!
  • 16
  • 17 A ter sempre em mente! Minimizar desconforto; Indicar o caminho para o sucesso; Ter em conta o contexto; Consistência na comunicação; os utilizadores preocupam-se SEMPRE com o que lhes é perguntado!
  • 18 Organização de formulários
  • 19 Organizar um formulário Criar grupos lógicos para os vários campos; separar grupos visualmente; estruturar o formulário como se de um diálogo se tratasse; considerar adiar algumas perguntas; cuidado com convenções (ex: *); considerar a partição do formulário por páginas/tabs.
  • Organizar um formulário Criar grupos lógicos para os vários campos; separar grupos visualmente; estruturar o formulário como se de um diálogo se tratasse; considerar adiar algumas perguntas;
  • Organizar um formulário cuidado com convenções (ex: *); considerar a partição do formulário por páginas/tabs.
  • 22 Formulação de perguntas ao formular as questões ter sempre em conta os seguintes critérios: cortar manter adiar explicar
  • 23 A caminho do sucesso!
  • Nomes Títulos dos formulários Introdução ao preenchimento/ formulário Títulos dos grupos Nomes/Etiquetas dos campos
  • Página inicial Quando o processo é complexo e demorado e envolve um conjunto não trivial de passos/dados... ... é importante criar uma página de introdução ao formulário onde são indicadas todas as necessidades e restrições aplicáveis ao formulário.
  • 26 Linhas Visuais
  • 27 Linhas Visuais
  • Minimizar Distracções Se o processo é complexo e sujeito a múltiplos problemas, a ideia deve ser de minimizar as distracções do objectivo final
  • 29 Indicador de Progresso
  • Etiquetas
  • 31 Posicionamento topo direita esquerda dentro dos campos
  • 32 Posicionamento topo direita esquerda dentro dos campos
  • 33 Posicionamento topo direita esquerda dentro dos campos
  • 34 Posicionamento topo direita esquerda dentro dos campos
  • 35 Posicionamento topo direita esquerda dentro dos campos
  • 36 Regras para etiquetas serem sucintas, claras e consistentes em termos de escrita se o objectivo é: reduzir tempo de preenchimento -> etiquetas sobre os campos encurtar o formulário -> etiquetas alinhadas à direita varrimento visual do formulário -> etiquetas à esquerda em condições extremas de espaço, usar etiquetas dentro dos próprios campos, com cuidado para não quebrar interacção.
  • 37 Campos
  • 38 Tipos de Campos
  • Tamanho dos Campos
  • Campos Obrigatórios vs Opcionais Evitar sempre que possível a utilização de campos opcionais, e quando tal não for possível, adicionar uma legenda para clarificação da terminologia usada.
  • Desenho estrutural de Campos É importante ter em conta aspectos como a relação entre campos, o seu agrupamento visual e funcional, as suas interdependências...
  • 42 Campos Inteligentes
  • 43 Acções
  • 44 Acções Primárias vs Secundárias
  • 45 Posição/ Formato
  • 46
  • 47
  • 48
  • 49 Formato
  • 50 Progresso
  • 51 Ajuda
  • KIS quanto menos texto melhor... ser conciso!
  • 53 Explicar
  • Inline se necessário usar ‘inline help’ nos pontos onde os utilizadores pareçam ter dúvidas ou incertezas de preenchimento.
  • Validações Inline usar com cautela, de modo a garantir consistência visual e funcional.
  • Extras Em caso de ser necessário uma ‘ajuda’ mais longa/ complexa, criar uma página específica de ajuda ao preenchimento.
  • 57 Mensagens de Erro e Sucesso !
  • 58 Mensagens As mensagens, quer sejam de erros, ou sucessos nunca são fáceis... nem de ler... nem de as escrever! São um elemento crítico na avaliação subjectiva dos utilizadores sobre a experiência de utilização e de usabilidade de um formulário.
  • 59 1º passo... Inventariar todas as possíveis mensagens de um serviço, como e onde estas são usadas e a determinar a quantidade de mensagens permite simplificar, re-utilizar e garantir consistência entre mensagens!
  • 60
  • 61 Tipos de Mensagens conhecer os diferentes tipos de mensagens é adaptá-las às necessidades dos utilizadores: erro sucesso marketing educacionais ...
  • 62 Mensagens de ERRO! só devem surgir quando: 1. o utilizador introduziu algo que o sistema não consegue ‘digerir’ e como tal não é possível continuar! 2. Algo de MUITO errado aconteceu e o utilizador não consegue prosseguir. tudo o resto NÃO são mensagens de erro!
  • 63 Regras para mensagens Utilizar um layout uniforme para mensagens Oferecer mensagens de erro dentro do contexto onde estas podem ser resolvidas Oferecer alternativas perante os problemas Indicar claramente quando algo que depende do utilizador é impeditivo de continuar
  • 64 Regras para mensagens Quando existe mais do que um erro, usar uma mensagem genérica no topo do formulário com uma lista de todos os erros presentes. Indicar visualmente quais os campos que apresentam erros Reservar o texto a vermelho e ícones de alerta para as mensagens de erro Indicar clara e de forma explícita o sucesso de uma acção
  • 65 Regras para mensagens Revelar problemas o mais cedo possível e não somente no final de todo o formulário; Evitar páginas de sucesso/erro sem saídas
  • 66 Envolvimento progressivo!
  • 67 Colocar as questões certas !
  • 68 Um longo namoro...
  • 69 Perguntas?
  • Saber mais? ‘Web Form Design’ by Luke Wroblewski (aka LukeW) Desconto 15% - usar código ‘CUSTODIO’ http://www.rosenfeldmedia.com/books/webforms/ A maioria das imagens presentes nesta apresentação são extraídas do livro e podem ser consultadas em: http://www.flickr.com/photos/rosenfeldmedia/sets/ 72157604272550634/
  • 71
  • 72 Obrigado ;)