Mau Design vs. Bom Design: 5 Exemplos Podemos aprender de

Ver exemplos de mau design juntamente com contra-exemplos de bom design não só é divertido como também desenha lições importantes para os designers. Eles destacam armadilhas para os designers evitarem e nos permitem entender como traduzir teorias de design em soluções que funcionam no mundo real. Jared Spool, o escritor, pesquisador e especialista em usabilidade americano, disse certa vez: “O bom design, quando é bem feito, torna-se invisível. Só quando é mal feito é que o notamos”. Então, vamos ver cinco exemplos de designs obviamente ruins, iluminar como o bom design faz funcionar, e destilar algumas lições para que todos nós possamos criar grandes e invisíveis experiências para nossos usuários.

Sobrecarga de informação

O Mau: Sinais de estacionamento em Los Angeles

Sinais de estacionamento em Los Angeles (LA) têm sido o epítome da sobrecarga de informação durante décadas. Sempre foram notoriamente difíceis de entender, porque as regras de trânsito são complexas, resultando na necessidade de transmitir muita informação numa área pequena.

Quão confusos são estes sinais? Tradicionalmente, veja este exemplo dos anos 2010:

Author/Copyright holder: Jorge Gonzalez. Termos de direitos autorais e licença: CC BY-SA 2.0

Como as placas de estacionamento da LA vão, este exemplo já é bastante simples.

Imagine que é um condutor ao longo desta estrada numa manhã de terça-feira às 9 da manhã. Pode estacionar neste local? O que parece ser uma pergunta simples requer muito processamento mental para responder.

Como designers, somos muitas vezes confrontados com situações em que temos de desenhar para que muita informação seja exibida num espaço pequeno. Os sinais de estacionamento em LA podem ser um caso extremo, mas muitas vezes desenhar para aplicações móveis significa enfrentar os mesmos problemas. Existe uma saída para os sinais de estacionamento e designers em geral?

The Good: Nikki Sylianteng’s Parking Signal

Desenhar uma placa para mostrar toda a informação, embora seja fácil de entender, soa como uma tarefa impossível. Mas foi exactamente isso que a designer do Brooklyn Nikki Sylianteng fez.

Author/Copyright holder: Nikki Sylianteng. Termos de direitos autorais e licença: CC BY-NC-SA 4.0

O sinal de estacionamento proposto pela Nikki foi eventualmente usado em LA como parte de um teste.

Parte do porquê do design da Nikki1 funcionar bem é que é centrado no utilizador: Nikki percebeu que os motoristas só querem saber se podem estacionar em um lugar. Sim ou não, é tudo o que os condutores precisam, e é tudo o que o sinal de estacionamento mostra.

O seu design também fez uso de imagens, em vez de texto, para transmitir informações. O resultado é incrivelmente intuitivo: verde para OK, vermelho para No Parking. Foi mesmo desenhado para a cor cega, com riscas para No Parking.

Agora quando olhar para a placa, saberá que na terça-feira às 9 da manhã, o estacionamento não é permitido. Os bares mostram o que é o que num relance-simples.

Lessons Learnt: Melhores Práticas

• Entenda o que os seus utilizadores precisam, depois desenhe com base nisso. Isto ajuda a reduzir a sobrecarga de informação.
• Disponha muita informação para transmitir aos seus utilizadores? Tente usar visuais ao invés de texto. Aprenda mais sobre visualização de dados aqui.

Navegação de mistérios da carne

O Mau: LazorOffice.com

Coined in 1998 by Vincent Flanders of Web Pages That Suck2, the Mystery Meat Navigation (MMN) refere-se a casos em que o destino de um link não é visível até que o usuário clique nele ou aponte o cursor para ele. O termo “carne misteriosa” era uma referência à carne servida em refeitórios de escolas públicas americanas que são tão processadas que seu tipo exato não é mais discernível.

MMN é ruim porque reduz a capacidade de descoberta de elementos de navegação. Isso adiciona carga cognitiva aos usuários, porque eles agora têm que adivinhar como navegar ou o que clicar em algo faz.

Embora a maioria dos MMN sejam encontrados em websites mais antigos, eles são surpreendentemente prevalecentes em websites modernos. Veja Lazor Office, uma empresa de design que cria casas pré-fabricadas, por exemplo.

Author/Copyright holder:Lazor Office, LLC. Termos de direitos autorais e licença: Uso justo

LazorOffice.com tem uma grelha de imagens MMN na sua página inicial. Como você pode ver, este quadro dá preciosas poucas indicações sobre para onde ir. Em vez disso, nove imagens apenas se sentam, deixando alguns de nós a ponderar um enigma em vez de interagir com uma página.

Below the fold of their home page, uma grelha de miniaturas de imagens está à espera. Elas são clicáveis? Bem, sim – se você mover o cursor do mouse sobre uma imagem, ela muda para um ponteiro. Mas o que acontece quando você clica numa imagem?

“Click to find out!” nunca é uma boa solução User Experience (UX). É provável que seus usuários abandonem a navegação e encontrem uma solução alternativa no site de um concorrente.

The Good: Course Cards on Interaction Design Foundation’s website

Felizmente, os problemas MMN são fáceis de resolver. A chave é estar ciente de que você deve rotular claramente os links. A simples adição de “View project” que aparece no mouse hover irá melhorar a usabilidade da página do Lazor Office acima.

Author/Copyright holder: Interaction Design Foundation ApS. Termos de direitos autorais e licença: Uso justo

Os nossos cartões de curso são tão pouco misteriosos como os links.

Para os cartões de curso da Interaction Design Foundation, não só temos “Ver Curso” na parte inferior de cada cartão para indicar a acção que irá acontecer, mas também temos um estado de pausa com o texto “Ir para o curso”. Muitos sites seguem uma convenção semelhante, e você também deveria, para maximizar a usabilidade do seu site.

Lesson Learnt: Best Practice

Always label your links! Você não gostaria de comer carne misteriosa – e da mesma forma, seus usuários não gostariam de clicar em links misteriosos.

Adicionar Atrito às Ações do Usuário

O Mau: iFly50.com

Como designers, devemos adicionar atrito às ações do usuário com extremo cuidado, a menos que o objetivo seja dissuadir os usuários de executar essa ação. Por vezes, no entanto, podemos até involuntariamente adicionar fricção às acções do utilizador (principalmente por razões estéticas ou de novidade) que resultam em prejuízo UX.

Um exemplo é o iFly50.com, criado para o aniversário da revista iFly pela KLM. O iFly 50 é um site de rolagem vertical que mostra 50 destinos de viagem, e em alguns destinos (como o abaixo), um botão perto da parte inferior pede aos usuários para clicar e segurar por alguns segundos para ver mais fotos.

Author/Copyright holder: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Termos de direitos autorais e licença: Uso justo

iFly 50 espera que seus usuários cliquem e esperem por alguns segundos cada vez que quiserem ver mais fotos.

O ato de adicionar alguns segundos de fricção a cada ação pode resultar em UX tremendamente mais pobre. Imagine se, em vez de clicar para carregar uma página instantaneamente, você agora tem que clicar e segurar por dois segundos para cada link que você clicou no seu navegador. Você vai parar de explorar a internet completamente depois de alguns cliques.

Muitas vezes, nós designers tendemos a nos deixar levar pelos mais novos estilos de interação ou ações, mas é fundamental que você sempre tenha cuidado quando seu design pode adicionar fricção às ações do usuário. Na maioria das vezes, convenções experimentadas e testadas (por exemplo, simples cliques ou swipes) funcionam perfeitamente.

The Good: Rolagem Elástica em iOS

Interessantemente, adicionar fricção às ações do usuário pode resultar em um ótimo design. Uma das invenções mais populares da Apple em seu sistema operacional móvel, iOS, é a criação de rolagem elástica, onde em certas situações (como no final de uma página da web) a rolagem se torna cada vez mais difícil.

Author/Copyright holder: Interaction Design Foundation ApS. Termos de direitos autorais e licença: Uso justo

Na rolagem elástica do iOS, o atrito é deliberadamente adicionado em algumas situações.

Você pode ver isso em ação acima, onde o atrito aumenta quando o usuário rola até o final da página. O atrito foi adicionado para indicar situações em que a rolagem não é mais permitida: e o efeito é uma experiência intuitiva.

Lesson aprendida: Melhor Prática

Evite adicionar qualquer tipo de fricção às acções do utilizador, tanto quanto possível – e implemente-o cuidadosamente quando não tiver alternativa.

Desenho “inteligente” que ignora a Usabilidade

O Mau: Bolden.nl

Algumas vezes, projetos inteligentes podem ser prejudiciais ao UX. O que torna este erro mais perigoso é que nós designers adoramos designs inteligentes. Eles são pequenas maravilhas gráficas que nos trazem um sorriso na cara. Infelizmente, a maioria dos humanos não são designers. Ainda mais triste, nem todos os designs inteligentes são bons designs, especialmente quando criam problemas de acessibilidade, descoberta ou usabilidade.

Take Dutch strategic design and development studio Bolden’s website, por exemplo:

Author/Copyright holder: Bolden. Termos de direitos autorais e licença: Uso justo

Pode dizer o que a página inicial deles está a tentar dizer? Não? Bem, isso é porque você terá que mover o seu mouse para o canto da página para ver as mensagens corretamente.

Autor/titular dos direitos autorais: Bolden. Termos de direitos autorais e licença: Uso justo

É um design inteligente? Sim, definitivamente. Mas isto é um design mau? Absolutamente!

Este é um grande exemplo de design para o designer, em vez do utilizador: o website reduziu seriamente a legibilidade das suas manchetes na determinação dos seus criadores em entregar um design inovador. Quem desenhou isto também deixou de fora o texto para dizer aos usuários que eles devem mover o mouse para os cantos, o que significa que a descoberta das manchetes depende do acaso. Além disso, mesmo quando a manchete é revelada, o contraste entre o texto e o fundo é pobre devido ao ponto de ainda se poder ver texto sobreposto. Tudo isso se soma para criar um site não amigável ao usuário.

The Good: CultivatedWit.com

Cultivated Wit’s website é um grande contra-exemplo de como o design inteligente não precisa colocar um esforço na usabilidade.

Author/Copyright holder: Cultivado Wit. Termos de direitos autorais e licença: Uso justo

Página inicial do Cultivado Wit mostra uma coruja ilustrada.

Na página inicial do Cultivado Wit, a ilustração da coruja pisca quando o rato se move sobre ela:

Autor/titular dos direitos de autor: Cultivado com o Wit. Termos de direitos autorais e licença: Uso justo

Surpresa! A coruja pisca quando você aponta o cursor para ela. Note também a sábia atribuição de espaço em branco.

A diferença principal aqui é que isto não forma uma parte essencial do site, por isso não diminui a usabilidade mesmo que o utilizador não descubra este elemento de design inteligente.

Outras vezes, eles têm uma seta clara para baixo para sugerir algo que está abaixo da dobra. E quando você rolar para baixo, você verá isto:

Author/Copyright holder: Cultivado com o Wit. Termos de direitos autorais e licença: Fair Use

E os websites podem ser inteligentes sem sacrificar UX.

A cópia (que é legível e tem bom contraste) cria uma sensação de inteligência – não diferente do que o Bolden estava a tentar alcançar – sem diminuir o UX do website. O único pequeno problema é que o texto “Join our email club” deveria ser mais visível, mas tomado como um todo, o site da Cultivated Wit é um grande exemplo de entrega de um design inteligente sem criar um UX.

Lesson Learnt pobre: Best Practice

Designs inteligentes devem ser sempre feitos o mais infalível possível, e/ou testados em usuários reais. Às vezes, designs inteligentes podem ter um efeito contrário e prejudicar a usabilidade.

Animações supérfluas

O Mau: PayPal Receipt Concept on Dribbble

Animações são um elemento crucial do design de interação, mas devem sempre servir a um propósito. Elas nunca devem ser feitas para fins de animação. Infelizmente, designers tendem a ter um caso de amor com animações, em parte porque as animações são tão divertidas de criar que podemos não saber quando parar.

Conceito de animação do PayPal para um recibo de e-mail, postado no Dribbble, é um exemplo de animação feita erroneamente:

Autor/Copyright holder: Vladyslav Tyzun. Termos de direitos autorais e licença: Fair Use.

A animação é bonita, mas supérflua. No total, são necessários 3,5 segundos para ver os detalhes da transacção. Um simples “fade-in” do recibo seria mais elegante, e porque leva menos tempo, melhor para o usuário também.

Este problema se torna perigoso quando os designers aparentemente não se cansam de animações. A partir de 2016, as animações de Vladyslav receberiam mais de 500 likes e 8.000 visualizações. Isso mostra uma apreciação equivocada que os designers têm em relação à animação por causa da animação. Ter uma percepção da tendência do designer para preferir epopeias em vez de representações mais directas e apanhar-se a si próprio antes de ceder às animações irá poupar-lhe muito tempo e evitar muitas dores de cabeça. Lembre-se, os usuários vêm a sites com um propósito – queremos mostrar-lhes o que eles procuram em um curto espaço e tempo, não detê-los em um grande tour pela galeria.

The Good: Stripe Checkout’s Animation

Quando fazemos animação propositadamente, no entanto, os resultados podem ser ótimos. Veja a animação do Stripe Checkout quando o usuário recebe um código de verificação:

Autor/Copyright holder: Stripe, Inc. Termos de direitos autorais e licença: Fair Use.

Stripe usa animações para fazer as coisas parecerem mais rápidas do que são: fornece aos usuários atualizações (como “Sent”) mesmo que eles possam não ter recebido o SMS ainda. Isto evita que os utilizadores se sintam frustrados por terem de esperar, e dá a garantia de que um SMS está a caminho neste momento.

Rachel Nabors, um perito convidado em animações web no W3C, sugere cinco princípios a ter em mente ao desenhar animações3:

1. Animar deliberadamente: pense em cada animação antes de a criar.
2. São necessários mais de 12 princípios: Os 12 princípios de animação da Disney funcionam para filmes, mas não necessariamente para sites e aplicações.
3. Útil e necessário, depois bonito: a estética deve ficar no banco de trás para o UX.
4. Ir quatro vezes mais rápido: boas animações são discretas, o que significa que rodam rápido.
5. Instalar um botão de matar: para animações grandes, como efeitos parallex, criar um botão de opção de saída.

Lesson Learnt: Best Practice

Always make your animation purposeful: too much can kill the UX of a product. A beleza tem que puxar o seu peso e ser funcional.

O Take Away

Não é divertido olhar para exemplos de mau design? Felizmente, também é educativo. Aqui estão as principais lições e melhores práticas dos cinco exemplos de bons e maus designs:

1. Entenda o que seus usuários precisam, então forneça essa informação.
2. Se você tem muita informação para transmitir, tente usar visuais ao invés de texto.
3. Etiquete sempre os seus links! Os usuários não gostam de links misteriosos.
4. Evite adicionar qualquer tipo de fricção às ações dos usuários, a menos que eles tenham a intenção de dissuadir a ação.
5. Teste seus designs inteligentes e inclua-os com cuidado.
6. Animação é como praguejar. Se você usá-la em excesso, ela perde todo o seu impacto.4

Da próxima vez que você franzir o sobrolho para uma instância de mau design, pare para pensar: entenda por que o design falhou, encontre exemplos de designs que fizeram as coisas direito, e faça uma nota mental da lição que você aprendeu. E depois partilhe o amor: partilhe a sua lição com outros designers no nosso fórum de discussão!