Os 7 Pecados Mortais do Design de Produtos (E Como Evitá-los)

Nesta fase da nossa linha temporal, não há absolutamente nenhuma desculpa para um design de produto deficiente. No mundo sempre competitivo dos produtos de software, acertar no design da UI e da UX é inegociável. Mesmo que tenha uma excelente tecnologia capaz de resolver os problemas dos seus utilizadores, uma UX deficiente fará com que os utilizadores abandonem o seu produto — seja porque não conseguiram perceber como utilizá-lo ou, francamente, porque o detestam.

Prepare-se; estou prestes a dar-lhe uma dose de «amor duro» sobre como não fazer UX, enumerando os sete pecados mortais do design de produto e expondo alguns dos piores infratores.

Pecado n.º 1: «A Árvore de Natal»

Uma das minhas memórias de infância mais agradáveis é a época em que a minha irmã e eu decorávamos a árvore de Natal. Assim que terminávamos, ficávamos a admirá-la, pois para nós era algo absolutamente magnífico. Bem, pelo menos era assim que a víamos. Como é que ela era na realidade? Mais ou menos assim.

Suponho que saiba onde quero chegar. Ao contrário da árvore de Natal que quer mesmo que os seus filhos decorem como o coração lhes ditar, a sua UI e UX não devem parecer uma enorme confusão de elementos e cores espalhados por todo o lado.

Agora, vejamos um produto real que parece uma «árvore de Natal».

Olhe para isto por um momento e tente explicar-me em que consiste este produto. Tenho a certeza de que também se perdeu na UI e não conseguiu perceber o que se passava durante algum tempo. Há simplesmente demasiadas coisas a acontecer neste ecrã; é basicamente impossível compreender onde se está e o que se deve fazer.

Os problemas que vejo nesta interface incluem:

• Uso excessivo da cor: A cor é uma ferramenta poderosa nas mãos de designers de produto talentosos, uma vez que pode orientar os utilizadores na direção certa. No entanto, se tiver demasiadas cores na sua UI, esse poder enfraquece e cada elemento colorido começa a competir pela atenção.
• Excesso de CTAs: Qual é a coisa mais importante em que devo clicar agora? Sinceramente, não faço ideia — há botões por todo o lado.
• Disposição confusa: Portanto, basicamente, o ecrã está dividido em três colunas, sendo que a central tem dois separadores e existe também uma grande secção de linha temporal na parte inferior. Os designers tentaram incluir o maior número possível de elementos num único ecrã.

Faça isto em vez disso

Este é um caso de tentativa de abordagem da UX através da criação de uma espécie de ordem a partir de uma enorme quantidade de informação. Em vez disso, pense na sua UX como um mapa para o comportamento que pretende obter dos seus utilizadores. É design de produto 101 que a cor, as CTAs e a disposição devem funcionar em conjunto para orientar o utilizador para os passos seguintes corretos.

Pecado n.º 2: Má hierarquia visual

A hierarquia visual refere-se à organização dos elementos na sua UI de forma a transmitir claramente a relação hierárquica entre eles.

O artigo que está a ler agora, por exemplo, tem uma hierarquia visual clara, uma vez que o título está em letras grandes no topo, os subtítulos têm letras mais pequenas do que o título, mas são muito mais fortes do que os parágrafos, e assim por diante.

Em ambos os casos, destacamos os títulos tornando-os maiores ou mais fortes — indicando claramente que os parágrafos dizem respeito aos temas mencionados em cada subtítulo correspondente.

A hierarquia visual é uma excelente forma de organizar a sua UI e facilitar a navegação. A sua ausência, contudo, é uma excelente forma de fazer com que os seus utilizadores tenham dificuldade em encontrar o caminho através da sua interface.

Uma das falhas mais evidentes de hierarquia visual que me incomoda diariamente é a secção de respostas do Quora.

Para incentivar as pessoas a consultar outras perguntas e a permanecer mais tempo no seu site, o Quora também incluiu perguntas e respostas relacionadas com a pergunta que está atualmente a consultar.

Não me incomoda. É um comportamento existente dos utilizadores e o Quora encontrou uma forma orgânica de tirar partido dele.

O que me incomoda, no entanto, é a forma como conceberam estas perguntas/respostas relacionadas. São quase idênticas às respostas reais da página e não têm hierarquia visual. Olhe para a captura de ecrã acima e diga-me qual é uma resposta e qual é uma pergunta relacionada. É mesmo necessário ler devagar para perceber.

Faça isto em vez disso

Idealmente, as perguntas relacionadas seriam menos proeminentes na interface e ficariam abaixo das respostas principais em termos da sua hierarquia visual (por exemplo, teriam um fundo acinzentado em vez de branco).

Pecado n.º 3: Uma interface saída diretamente dos anos 2000

Eu sei, eu sei, a Craigslist tem uma interface terrivelmente desatualizada e continua a funcionar perfeitamente bem. Mas é uma exceção à regra e não deve pensar que, em 2023, continua a ser perfeitamente aceitável ter algo assim.

O problema é que, ao contrário da Craigslist, o seu produto não será extremamente popular e não terá uma marca universalmente reconhecida. Por isso, se as pessoas vissem algo desatualizado ao visitar o seu site ou ao utilizar a sua aplicação, simplesmente não o levariam a sério. No entanto, terá sempre a oportunidade de ser reconhecido através do seu design do logótipo e da sua identidade de marca.

Infelizmente, por vezes são precisamente as organizações mais “sérias” que são culpadas de cometer este pecado.

Tive a oportunidade de colaborar com o Banco Central da Arménia há alguns anos. Têm alguns dos analistas financeiros e especialistas em política monetária mais talentosos que existem. Além disso, o presidente desta instituição (licenciado por Harvard) foi meu professor e é, sem dúvida, a pessoa mais inteligente que conheci na vida.

O site do Banco Central, no entanto, tem um aspeto tão mau que será difícil acreditar que se trata de uma organização de grande destaque, com uma equipa extremamente talentosa.

Pecado n.º 4: Padrões obscuros (ou utilizar a UX contra os seus utilizadores)

No mundo da UX, os “padrões obscuros” são percursos do utilizador e elementos da interface que induzem o utilizador em erro e o levam a realizar uma ação de que não tem consciência.

Existe uma determinada loja de comércio eletrónico com um logótipo em forma de seta cor de laranja que é especialmente “famosa” por implementar padrões obscuros. São culpados disso ao ponto de existirem queixas e investigações em curso contra eles por não cumprirem as regras da FCC.

Uma das experiências de utilizador mais famosas que se enquadram nesta categoria é a forma como se deve cancelar uma subscrição Prime.

Para ser justo, penso que continua a ser boa ideia pedir feedback aos utilizadores quando cancelam a sua subscrição paga ou até oferecer-lhes um desconto de “por favor, não vá embora”. Mas é necessário respeitar o tempo e a paciência dos utilizadores.

Tenha em consideração que as pessoas que querem cancelar a sua subscrição estão, muito provavelmente, irritadas ou insatisfeitas consigo. Por isso, dificultar-lhes o cancelamento irá deixá-las ainda mais zangadas (e pode esquecer a possibilidade de as recuperar um dia no futuro).

Se tentar cancelar a sua subscrição Prime, por exemplo, a Amazon pedir-lhe-á que reconsidere.

Não tenho nada contra este ecrã, toda a gente faz isso.

No entanto, não aceito que seja necessário confirmar a sua seleção mais duas(!) vezes para cancelar (estão a gozar comigo, certo?). Além disso, o texto e as cores utilizados nos seus apelos à ação foram concebidos para dificultar a localização da opção que cancela a subscrição, em vez de a manter.

Faça isto em vez disso

Não tente induzir os seus utilizadores a realizar uma ação contrária à sua intenção, nem tente “cansá-los” tornando o cancelamento excessivamente difícil. As pessoas são suficientemente inteligentes para perceber que o está a fazer de propósito, e isso fará apenas com que os seus concorrentes pareçam mais atrativos. Em vez disso, faça um breve inquérito sobre o motivo pelo qual estão a deixá-lo e torne o processo eficiente, mantendo a porta aberta para que regressem.

Pecado n.º 5: Não seguir as melhores práticas para formulários

Os formulários são um dos elementos fundamentais dos sites e uma das primeiras coisas que os programadores aprendem a criar e que os designers aprendem a, bem, conceber.

Criar uma excelente experiência de utilizador para formulários é provavelmente um dos temas mais debatidos entre designers, e é possível encontrar boas práticas, guias e lições sobre o assunto praticamente em todo o lado.

Author's Tip

Nota: Para mais informações sobre este tema, recomendo vivamente o livro “Conceção de UX: Formulários”, de Jessica Enders

Considerando a prevalência de materiais educativos sobre formulários e a importância de os criar corretamente (afinal, isso terá um impacto direto na aquisição e noutras métricas fundamentais), diria que não seguir as melhores práticas de UX estabelecidas para formulários é um pecado.

Agora, deixe-me dar-lhe um exemplo de mau design de produto para formulários.

Nem consigo olhar para esta página sem me arderem os olhos. Há simplesmente tantas coisas erradas aqui. Para mencionar apenas algumas:

Utilização inadequada do espaço em branco: Porque é que precisa de colocar os nomes dos campos tão afastados dos próprios campos? Porque está a utilizar um bloco inteiro para colocar dois pequenos botões de alternância para recolha e entrega? Pode criar um formulário que contenha toda a informação apresentada aqui, pelo menos 4 vezes mais pequeno e muito mais fácil de analisar.

Formatação inadequada dos campos: Existe um campo de telefone em que os dígitos introduzidos não aparecem no formato de um número de telefone (por exemplo, +1 (555) 123-1234), para facilitar a leitura. Isto é tão comum que a maioria das ferramentas de design inclui até componentes prontos para esse efeito.

Ausência de texto de marcador: Mal se nota que existe um campo de texto na secção “Instruções adicionais para a entrega”. Além disso, não tenho a certeza do que deve escrever nesse campo. Uma excelente UX de formulários pressupõe sempre a presença de textos de marcador que forneçam uma indicação, como «Deixe a encomenda na varanda da frente».

Faça isto em vez disso

As soluções para cada um destes problemas são bastante evidentes, mas este é um caso em que parece que as únicas pessoas que testaram este formulário foram as que o criaram. Os designers teriam beneficiado bastante se tivessem obtido algum feedback dos utilizadores real sobre esta UX antes de o lançarem.

Pecado n.º 6: Utilizar os elementos de UI errados

O próximo pecado de que quero falar é uma continuação do anterior. Os formulários não são os únicos elementos de UI do seu produto que devem seguir convenções e melhores práticas bem estabelecidas. Existem também outros elementos comuns, como botões de alternância, caixas de seleção e outros.

Na verdade, os utilizadores já têm modelos mentais estabelecidos sobre a forma como cada um destes elementos funciona, e precisa de garantir que os está a utilizar corretamente.

Eis alguns exemplos da finalidade destes elementos e de como não os utilizar corretamente:

Botões de alternância: Este elemento mostra um estado “booleano” (como Ligado/Desligado ou Ativo/Inativo). São excelentes para mostrar aos utilizadores o estado da antena Bluetooth do smartphone e permitir-lhes ligá-la ou desligá-la.

No formulário anterior, porém, existem dois botões de alternância que permitem ao utilizador escolher entre recolha e entrega.

Se pensar nisto por um momento, terá pensado nisso durante mais tempo do que o designer. Estes botões de alternância significam que precisa de DESLIGAR a “recolha” e LIGAR a “entrega” para selecionar a opção “entrega”! Poderiam ter utilizado botões de opção. Sinceramente, pergunto-me o que acontece se um utilizador ligar ambos ao mesmo tempo.

Menus de seleção sem filtragem: Sendo um dos elementos mais antigos a surgir nos sites, os menus de seleção continuam a ser populares e muito fáceis de utilizar quando usados corretamente. 

Faça isto em vez disso

A melhor prática determina que deve utilizar um menu de seleção quando o utilizador precisa de escolher uma única opção de uma lista com 5 a 15 opções. Se houver menos de 5 opções, deve optar por botões de opção.

Caso exista uma lista extensa de opções para selecionar (por exemplo, os 50 estados dos EUA ou cerca de 200 países), terá de adicionar filtragem ao menu de seleção. Caso contrário, o utilizador terá de percorrer essa lista longa para encontrar a opção pretendida.

Pecado n.º 7: Ignorar quem são os seus utilizadores e o que pretendem

Por fim, o maior pecado de todos: criar um novo produto com um design de UX que não se adapta às necessidades e aos interesses dos seus utilizadores. Esta é simplesmente uma receita para o fracasso.

Faça isto em vez disso

Um bom processo de design de produto começa sempre com a pesquisa de utilizadores. A menos que saiba quem são os seus utilizadores e do que precisam, por mais bonita que seja a interface de utilizador que criar, acabará certamente com um produto mal concebido.

Sei que a pesquisa de utilizadores não é uma tarefa fácil. Afinal, foram necessários anos de testes com utilizadores por parte da Apple para alcançar um nível excecional de usabilidade, tanto no design industrial como na experiência de utilizador do seu iPhone. No entanto, acredite em mim: é o trabalho com maior impacto que pode realizar para garantir o sucesso do seu produto.

É realmente fácil evitar cometer erros de design

Se trabalha na criação de websites, parte de uma posição mais vantajosa. Porquê? Porque as ferramentas de design web normalmente disponibilizam modelos que já evitam alguns dos erros aqui apresentados. No entanto, quer seja uma startup a desenvolver produtos digitais ou uma empresa que cria produtos físicos (como teclados ou sensores de movimento), é, na verdade, bastante fácil evitar um design de má qualidade.

Desde que o seu processo de desenvolvimento de produtos se concentre nas necessidades e nos pontos problemáticos dos seus utilizadores e utilize o software de design de produto adequado, conseguirá evitar falhas de design significativas e acabar com um produto mal concebido (este é também um dos muitos benefícios do software de design com IA).

Espero que estes exemplos o tenham feito sentir-se melhor em relação aos seus próprios produtos ou, pelo menos, lhe tenham proporcionado uma boa gargalhada. Para obter mais dicas de UX e outros artigos para profissionais de produto, não deixe de subscrever o nosso boletim informativo!