Artigos relacionados
Padrons de desenho de interacçom
Cada vez que se começa um novo sítio web em vez de desenhar
nós mesmos cada soluçom, podemos recorrer aos padrons.
Padrons de desenho e interacçom: exemplo prático
Introduçom
Os padrons de desenho e interacçom oferecem-nos soluçons provadas para problemas comuns na web. Utilizando-os nos nossos desenhos pouparemos trabalho.
Neste exemplo queremos ilustrar o uso de padrons para melhorar um processo. Cumpre salientar que há outros padrons que ajudam a fomentar valores mais abstractos, como a credibilidade.
Temos escolhido a compra de bilhetes em Iberia.es polas nossas experiências na sua web. Isto nom é razom suficiente e cumpriria justificar qualquer mudança com provas de usuário, estudos de estatísticas ou chamadas de atençom ao cliente.
Guiamo-nos polo livro The Design of Sites. Quando encontrarmos padrons similares na web, ligaremo-los. Se nom os encontrarmos, fazemos umha descriçom singela do padrom. Podes ver os
Aplicando padrons ao processo de compra de bilhetes em Ibéria
Estes som alguns dos padrons que poderíamos empregar para umha experiência de usuário mais satisfatória. Entre parênteses indicamos o padrom utilizado (padrons que contém o livro).
1º Sessons de usuário (H5-Persistent customer sessions).
Utilizamos sessons quando precisamos guardar temporalmente dados do usuário (processo de registo ou pagamento, por exemplo) ou oferecer conteúdo especializado.
Em Ibéria inicias umha sessom ao entrar na web, mesmo antes de ter inserido dados que precisem de ser guardados temporalmente.
Problema: se o usuário abandona a web por algum motivo, ao voltar a ela pode encontrar que a sessom caducou e tem de começar de novo, incluso antes de inserir dados confidenciais.
O remate da sessom notifica-se com umha mensagem de erro que nos leva aos seguintes padrons.
2º Mensagens de erro amáveis e explicativas (K13-meaningful error messages), Linguagem Familiar (K11-Familiar language).
A web deve informar dos erros dum jeito claro e pouco alarmante. Deve evitar termos confusos e fazer que o usuário siga adiante dum modo singelo.
Um enorme sinal de atençom, texto amontoado e vários menus desdobráveis nom informam nem tranquilizam o usuário. Ademais, o erro deveria dizer-nos porque é que a nossa sessom caduca e como evitá-lo.
Os menus desdobráveis em diferentes idiomas e diversas opçons por defeito nom ajudam a seguir adiante.
3º Processo em túnel: ajuda o usuário a completar tarefas. The Desigm of Sites (capítulo de exemplo em PDF, 264 KB)
Umha vez começada umha tarefa que precise de vários passos, temos de evitar que umha pessoa abandone o processo por acidente.
Tiramos todas as ligaçons que nom tenham a ver com o processo. As ligaçons de ajuda deveriam abrir numha nova janela, para que o usuário nom saia do contexto.
Cumpre indicar claramente quanto leva feito e quanto lhe resta para rematar. Os botons de acçom som a melhor forma de saber como seguir adiante com o processo.
As pestanas superiores estám presentes enquanto completamos a nossa compra.
Em Ibéria, quando começamos a compra, continuamos tendo à vista todas as ligaçons. Qualquer clique pode levar-nos a outra secçom, com o problema de que, a volta atrás é lenta e às vezes dá problemas pola quantidade de Javascript que se utiliza.
Umha implementaçom impecável de um processo em túnel som as compras em Amazon. Umha vez começamos é quase impossível sair por acidente.
4º Botons de acçom (K4-Actiom Buttons), botons com visibilidade alta (K5-High-visibility action buttons). Podes ver o padrom em Web Desigm Patterns
As ligaçons de texto som ajeitadas para mover-se de umha página a outra. Mas quando o usuário tem de tomar decisons importantes, como confirmar umha compra, convém utilizar botons.
Usar botons de aspecto tridimensional, que se assemelhem a um botom real, e etiquetas com verbos que indiquem a acçom que realizamos quando prememos o botom.
Botom "Tarifa" para seguir adiante com o processo de compra.
Em Iberia.es os botons som planos e às vezes contenhem substantivos no lugar de verbos. Há casos nos quais é preciso aclarar a funçom dos botons com um texto que os acompanha.
Conclusom
Este é um pequeno exemplo de como os padrons poderiam ajudar a umha pessoa a completar umha compra dum jeito mais singelo.
Artigos relacionados
Padrons de desenho e interacçom
Ligaçons
Padrons de desenho Em Grancomo podes encontrar muitas ligaçons de interesse para aprofundar no uso de padrons.
www.welie.com Padrons de interacçom para a Web, aplicaçons móveis e de escritório. Utiliza hipertexto para ligar padrons relacionados.
Implementing a Patterm Library im the Real World: A Yahoo! Case Study Caso prático de como criar umha linguagem comum para a comunicaçom entre membros da companhia.
Bibliografía
The Design of Sites. Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience. Douglas K. Van Duyne, James A. Landay e Jason I, Hong.