Labels no topo<\/h2>\n
Para fornecer uma experi\u00eancia r\u00e1pida e f\u00e1cil para seus usu\u00e1rios considere usar os labels acima dos campos do seu formul\u00e1rio<\/strong>. Isso melhora a experi\u00eancia dos usu\u00e1rios, principalmente para usu\u00e1rios mobile. Al\u00e9m disso, voc\u00ea vai evitar muitos problemas futuros, entre eles:<\/p>\n Observe a imagem abaixo e note que \u00e9 mais f\u00e1cil, e principalmente natural para n\u00f3s, mover nossos olhos de cima para baixo do que na diagonal. Colocar o label dentro do campo ficou mais f\u00e1cil com HTML 5 usando o atributo placeholder no input, dessa forma retiramos o label de fora do campo e colocamos para dentro do input.<\/p>\n Muitos designers alegam que usar o label acima dos campos<\/strong> faz com que ocupe uma linha s\u00f3 para o label, logo preferem utilizar o atributo placeholder. Entretanto, mesmo que seu formul\u00e1rio tenha os campos b\u00e1sicos (nome, e-mail, mensagem, bot\u00e3o enviar…) \u00e9 certo que o scroll vai aparecer.<\/p>\n Para minimizar o problema podemos reduzir o tamanho da fonte dos labels e diminuir os espa\u00e7os em branco entre os campos do formul\u00e1rio.<\/p>\n O Atributo da HTML 5 placeholder tem alguns problemas de usabilidade. Assim que come\u00e7amos preencher o campo do formul\u00e1rio n\u00e3o temos mais acesso ao texto do label. Se no meio do campo o usu\u00e1rio esquecer o que deve ser preenchido ou como deve ser preenchido, ele ter\u00e1 que apagar o que foi digitado para ver o texto do label.<\/p>\n Al\u00e9m desses problemas de usabilidade h\u00e1 tamb\u00e9m uma dificuldade relacionada \u00e0 acessibilidade. O placeholder n\u00e3o tem valor sem\u00e2ntico<\/a> de um label para leitores de tela.<\/p>\n Atributo placeholder pode ser usado em formul\u00e1rios de login, por exemplo. Nesses formul\u00e1rios temos normalmente dois campos: login e senha. Para formul\u00e1rios acima de tr\u00eas campos prefira usar label acima dos campos do formul\u00e1rio<\/strong>.<\/p>\n O HTML 5 trouxe novos types para os inputs, entre eles Fica de responsabilidade do navegador interpretar o tipo de dado que deve ser inserido e disponibilizar um teclado mais apropriado, ou seja, o sistema muda o formato do teclado de acordo com o tipo de dado informado no atributo type melhorando a usabilidade do formul\u00e1rio<\/strong>.<\/p>\n Veja alguns exemplos: Nos exemplos conseguimos ver uma diferen\u00e7a sutil mas essencial para melhorar a usabilidade<\/strong> do nosso formul\u00e1rio. Perceba que no type com tel o teclado muda completamente, facilitando a digita\u00e7\u00e3o H\u00e1 v\u00e1rias vantagens al\u00e9m de melhorar a usabilidade em dispositivos mobile: o type dos inputs deixa uma sem\u00e2ntica mais definida, o navegador consegue validar os dados digitados no formul\u00e1rio<\/a>, s\u00e3o alguns exemplos…<\/p>\n Uma grande melhora na usabilidade do seu formul\u00e1rio<\/strong> \u00e9 evitar que o usu\u00e1rio digite datas na m\u00e3o, principalmente em telas touch. Use o type date. Fazer com que o textarea aumente sua altura automaticamente \u00e9 comum de encontrarmos em Apps, mas n\u00e3o muito comum em sites responsivos. Isso \u00e9 mais uma t\u00e9cnica que pode melhorar a usabilidade<\/strong> dos seus formul\u00e1rios mobile. Esse recurso pode ser implementado facilmente com JavaScript.<\/p>\n No exemplo abaixo o textarea aumenta at\u00e9 uma altura de 500px;<\/p>\n Link do exemplo: http:\/\/jsfiddle.net\/eXM5z\/2\/<\/a><\/p>\n Oriente seus usu\u00e1rios quando algo der errado, digitar no teclado do celular \u00e9 uma tarefa complicada e quase sempre digitamos uma letra a mais ou a menos. Uma biblioteca JS chamada Mailcheck.js<\/strong> (https:\/\/github.com\/Kicksend\/mailcheck<\/a>) oferece algumas sugest\u00f5es para campos de e-mail com os erros mais comuns, por exemplo trocar gnail por gmail, hotnail por hotmail…<\/p>\n Outro ponto relacionado a erros, \u00e9 acontecer alguma falha no navegador, a p\u00e1gina travar, o usu\u00e1rio fechar a p\u00e1gina do formul\u00e1rio sem querer, etc, etc. Caso isso aconte\u00e7a o usu\u00e1rio perder\u00e1 tudo o que foi digitado. Uma solu\u00e7\u00e3o \u00e9 usar o Armazenamento de dados no navegador (Local Storage)<\/a> do usu\u00e1rio e caso algo d\u00ea errado \u00e9 s\u00f3 recuperar os dados digitados.<\/p>\n Ao preencher um formul\u00e1rio no celular, o teclado costuma dar algumas sugest\u00f5es de palavras para facilitar a digita\u00e7\u00e3o. Entretanto, em alguns casos podemos n\u00e3o querer essa sugest\u00e3o fornecida pelo sistema. Para isso podemos utilizar dois atributos: O atributo Esses mesmos atributos podem ser utilizados para facilitar o preenchimento de campos<\/strong>, como preencher automaticamente os campos com informa\u00e7\u00f5es do hist\u00f3rico do navegador.<\/p>\n Para aplicar essa funcionalidade, basta usar os atributos Em dispositivos m\u00f3veis a coisa mais f\u00e1cil \u00e9 saber a localidade do usu\u00e1rio, e por alguma raz\u00e3o voc\u00ea deseja solicitar o endere\u00e7o, cidade, estado… do seu usu\u00e1rio. Bom, se eu consigo pegar a localiza\u00e7\u00e3o do usu\u00e1rio \u00e9 interessante eu fazer com que o usu\u00e1rio n\u00e3o precise digitar esse tipo de informa\u00e7\u00e3o.<\/p>\n Utilizando HTML 5 \u00e9 f\u00e1cil pegar as coordenadas de latitude e longitude do GPS do usu\u00e1rio<\/strong>. Para isso voc\u00ea vai precisar da API Geolocation<\/a> e poucas linhas de JavaScript.<\/p>\n Depois de conseguir a latitude e longitude do usu\u00e1rio \u00e9 s\u00f3 utilizar algum servi\u00e7o que transforme isso em um endere\u00e7o real. V\u00e1rias APIs de mapas disponibilizam esse recurso, como o Google Maps<\/a>. Um servi\u00e7o gratuito \u00e9 o OpenStreetMap<\/a>. Informamos as coordenadas e ele devolve um JSONP bem simples:<\/p>\n Esse recurso permite a possibilidades de tornar o preenchimento de dados mais simples e r\u00e1pido<\/strong> melhorando a usabilidade e experi\u00eancia do usu\u00e1rio.<\/p>\n Curta a p\u00e1gina do blog kadunew<\/a> no Facebook. Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":" Um formul\u00e1rio pequeno com poucos campos \u00e9 mais f\u00e1cil e r\u00e1pido de preencher, escolher corretamente os tipos de campos tamb\u00e9m ajuda bastante, mas saiba que h\u00e1 outras t\u00e9cnicas que podemos utilizar para melhorar ainda mais a usabilidade dos nossos formul\u00e1rios. Voc\u00ea sabia que a maneira que alinha seus labels pode afetar a facilidade de preencher […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-3340","post","type-post","status-publish","format-standard","hentry","category-acessibilidade"],"yoast_head":"\n\n
\n![\"Usabilidade](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/03\/formulario-mobile.png\")
\nDiferen\u00e7a do movimento dos olhos ao preencher um formul\u00e1rio
<\/figcaption><\/figure><\/p>\nPlaceholders no lugar de labels<\/h2>\n
\r\n<input type="text" placeholder="Seu nome">\r\n<\/pre>\n
inputs type do HTML 5 e usabilidade<\/h2>\n
search<\/code>, email<\/code>, tel<\/code>, etc. Para usu\u00e1rios que acessam seu formul\u00e1rio no desktop n\u00e3o h\u00e1 tanta diferen\u00e7a, entretanto para quem acessa com telas touch<\/strong> h\u00e1 diferen\u00e7a.<\/p>\n
\n![\"Exemplo](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/03\/exemplo-input-email-iphone.png\")
<input type=”email”><\/figcaption><\/figure><\/p>\n![\"Exemplo](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/03\/exemplo-input-tel-iphone.png\")
<input type=”tel”><\/figcaption><\/figure>\n
\nde n\u00fameros e separadores.<\/p>\n
\n![\"Exemplo](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/03\/exemplo-input-date-iphone.png\")
<input type=”date”><\/figcaption><\/figure><\/p>\nAltura autom\u00e1tica de textareas<\/h2>\n
\r\n$("textarea").bind("input", function(e) {\r\n while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")) &&\r\n $(this).height() < 500\r\n ) {\r\n $(this).height($(this).height()+1);\r\n };\r\n});\r\n<\/pre>\nTratando erros<\/h2>\n
![\"Biblioteca](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/03\/exemplo-Mailcheck..png\")
<\/p>\nSugest\u00f5es e corre\u00e7\u00f5es<\/h2>\n
autocomplete<\/code> evita o preenchimento autom\u00e1tico de sugest\u00f5es e os atributos e os atributos autocorrecte<\/code> e spellcheck<\/code> para evitar corre\u00e7\u00f5es com base no dicion\u00e1rio.<\/p>\n\r\n<input type="email" name="email" autocomplete="off" autocorrect="off" spellcheck="false" \/>\r\n<\/pre>\n
name<\/code> e autocomplete<\/code> iguais.<\/p>\n\r\n<input type="text" name="name" autocomplete="name" \/>\r\n<input type="email" name="email" autocomplete="email" \/>\r\n<\/pre>\n
Geolocation para o endere\u00e7o<\/h2>\n