Forms101

50 %
50 %
Information about Forms101
Technology

Published on November 24, 2008

Author: pecus

Source: slideshare.net

Description

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/

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 ;)

Add a comment

Related presentations

Related pages

Reporting Forms - FFIEC 101 - FFIEC Home Page

Reporting Forms - FFIEC 101 Regulatory Capital Reporting for Institutions Subject to the Advanced Capital Adequacy Framework
Read more

AT&T Mobile Forms101: The Basics

AT&T Mobile Forms101: The Basics . AT&T Mobile Forms 101: THE BASICS ...
Read more

clariuslabs/XamarinForms101 · GitHub

XamarinForms101 - Xamarin Forms Samples ... Something went wrong with that request. Please try again.
Read more

Employee Data Forms of Missouri, LLC - products

Employee Data Forms of Missouri, LLC, provides inexpensive , easy to use forms for keeping track of employee schedules. We specialize in sick leave and ...
Read more

Form 101-GS Page 1 National Pension System (NPS ...

Form 101-GS Page 1 National Pension System (NPS) Withdrawal Form for Claim of Accumulated Pension Wealth on Superannuation for ...
Read more

Occult rituals and game titles: Sony Playstation s blood ...

Occult rituals and game titles: Sony Playstation s blood sacrifice - National Worldview and Science
Read more

www.ffiec.gov

http://www.ffiec.gov/forms101.htm), thereby making it publicly available. Background
Read more

Standard AAR Forms-101 - Real Estate

» Standard AAR Forms-101 | Arizona Real Estate Online School
Read more