Como projetar uma interface de usuário simples quando você tem uma solução complexa

Este artigo foi gentilmente apoiado por nossos queridos amigos da Flatfile, que criam belas experiências centradas no ser humano para remover as barreiras entre pessoas e dados. Obrigado!

O que é que eles dizem? Problemas complexos exigem soluções complexas? Isso certamente é verdade ao desenvolver aplicativos e software.

Mas como você garante que o back-end complexo não chegue ao front-end?

Uma interface de usuário complexa, em geral, é motivo mais que suficiente para muitas pessoas abandonarem um site ou aplicativo móvel. No entanto, quando se trata de usuários pagantes ou assinantes, não espere que nenhum deles se conforme com a interface complicada do seu software.

Não importa o quão incrível é o seu produto. Se a aparência externa deixa seus usuários loucos, você pode esperar grandes quantidades de rotatividade de usuários em troca.

A equipe do Flatfile está muito familiarizada com esse problema, tendo construído um importador de dados bem-sucedido, que é uma tecnologia que muitos designers lutaram para construir por conta própria. Abaixo, veremos algumas das dicas que os ajudaram a superar esse desafio de design de interface do usuário e podem ajudar você também.

Como projetar uma interface de usuário simples para uma solução complexa

Seu objetivo ao projetar o frontend de sua solução é apresentar uma interface muito simples e intuitiva para o usuário (e às vezes para seus usuários finais também).

Então, como o Flatfile conseguiu fazer isso? O processo de integração de dados por si só pode ser complicado – ter que pegar dados de uma variedade de fontes, tipos de arquivos e usuários e depois traduzi-los em dados utilizáveis ​​dentro do aplicativo. Fazer com que os usuários preparem, validem e higienizem seus dados no frontend também não é tarefa fácil.

Além do processo de design de software padrão, o Flatfile tomou medidas adicionais para garantir que os usuários nunca percebessem o quão complexo seu produto realmente era. Veja o que eles aprenderam:

1. Descubra os objetivos de seus usuários para que você possa criar uma interface do usuário que prioriza o usuário

Para construir um produto que os usuários achem útil, você precisa projetar para os objetivos deles e da perspectiva deles. Se você perder de vista isso, poderá acabar com uma interface do usuário que prioriza seus objetivos e prioridades, o que permite que as complexidades dos bastidores brilhem.

Vejamos como esse passo em falso pode ter sérias ramificações para seu aplicativo ou software.

O Instagram atualizou recentemente o cabeçalho e o rodapé de sua interface de longa data. Veja como era o cabeçalho antes e depois de novembro de 2020:

O design anterior contém dois símbolos/ações:

• O ícone da câmera para tirar ou fazer upload de fotos.
• O ícone do Messenger para conversar com conexões.

O design mais recente girou todos os ícones para a direita. Existem três deles agora:

• O símbolo de mais para criar postagens, histórias, bobinas e vidas do Instagram.
• O símbolo do coração para visualizar a atividade (ou seja, engajamento de postagens, novos seguidores etc.).
• O ícone do Messenger mantém o mesmo design e posicionamento.

Olhando para o cabeçalho, você pode pensar que não há muito errado aqui. No entanto, o Instagram provavelmente não redesenhou sua navegação para melhorar a estética ou a usabilidade. O novo rodapé é a prova disso:

Olhe para os ícones do meio e penúltimo. Após novembro, os ícones de adição e coração foram movidos para o canto superior direito do aplicativo e substituídos pelo seguinte:

• Um link para os rolos do Instagram, um recurso que funciona de maneira semelhante ao TikTok (e aumenta a dependência da plataforma).
• Um link para compras no Instagram, um recurso que permite aos usuários comprar em lojas populares (não aquelas que seguem ativamente).

A interface do usuário não incentiva mais (principalmente) os usuários a selecionar o conteúdo de suas contas favoritas ou a fazer conexões orgânicas com outros usuários. Em vez disso, a interface do usuário prioriza os novos aspectos pay-to-play da plataforma, favorecendo marcas e influenciadores que gastam dinheiro com isso.

Consequentemente, a usabilidade do aplicativo foi comprometida, pois os botões de notificação e criação saíram da zona do polegar e foram para um canto do aplicativo. Isso não apenas torna o aplicativo mais desafiador de usar, mas também chama a atenção para o que está acontecendo nos bastidores. Se os usuários do Instagram não estavam pensando nos algoritmos complexos e nas decisões de negócios no trabalho, a interface do usuário agora chama a atenção para eles.

Antes de fazer qualquer outra coisa, descubra o que seus usuários desejam realizar e como eles esperam que isso aconteça. Em seguida, resuma os objetivos de seus usuários de maneira semelhante a Randy Wiafe, chefe de produto da Flatfile:

“O objetivo dos usuários do Flatfile é importar facilmente os dados de seus clientes. Os usuários do Flatfile precisam mover dados de um produto de software para outro e esse processo precisa ser o mais fácil possível porque é uma das primeiras experiências de produto que um novo cliente terá — importar seus dados.”

Você não pode se dar ao luxo de perder isso de vista. Porque se você não estiver projetando uma interface de usuário alinhada com os objetivos de seus usuários e sua jornada preferida, provavelmente revelará um pouco da complexidade que acontece nos bastidores.

2. Avalie os produtos da concorrência para criar seu MVP

Um produto mínimo viável é absolutamente necessário sempre que você cria um aplicativo. Você não apenas economiza tempo e dinheiro desenvolvendo apenas a versão mais simples do produto para começar, mas uma versão beta ativa e funcional oferece algo para coletar feedback real do usuário à medida que você itera.

Isso é o que Flatfile fez. Wiafe explica o valor do MVP:

“A versão beta realmente abriu nossos olhos em termos de como os clientes e seus usuários finais interagem com o produto. Ser capaz de entender por que e como os usuários estavam sendo bloqueados nos ajudou a melhorar consideravelmente a experiência.”

Dito isto, como você sabe o quão mínimo deve ser a interface do usuário do seu MVP? Porque há uma enorme diferença entre mínimo e inutilizável.

Em vez de iniciar o processo de design do zero, recomendo passar um tempo dentro do software de seus concorrentes.

Obviamente, não estou defendendo que você roube os designs de outra pessoa. O que estou sugerindo, no entanto, é que você tenha alguma experiência em primeira mão com eles.

Para começar, isso permitirá que você identifique tendências nas interfaces do usuário – tendências de design com as quais seus clientes em potencial já estão confortáveis ​​e confiantes em se envolver. Em segundo lugar, você pode usar essas demos para reduzir seu MPV ao mínimo absoluto necessário.

Vamos fingir que você está construindo um software de gateway de pagamento. Você pode começar com o Stripe:

E 2Checkout:

Eu retirei todos os dados desses painéis e deixei apenas os componentes principais, navegação e rótulos. Quais são os tópicos comuns que vemos entre as duas UIs?

• Uma barra de pesquisa perto do centro do cabeçalho,
• Um link para as configurações do usuário ou informações da conta no canto superior direito,
• Um painel de controle alinhado à esquerda que ocupa entre ⅙ ou ⅕ da página,
• Dados apresentados em blocos independentes,
• Fontes sem serifa neutras usadas para rotulagem,
• O contraste de cores é mínimo e existe apenas no painel para indicar guias selecionadas ou para distinguir conjuntos de dados.

Isso é apenas uma análise básica, mas você entendeu. Ao eliminar os detalhes e transformar efetivamente os produtos de seus concorrentes em wireframes, você pode identificar os detalhes de design que os usuários se sentiriam confortáveis ​​e confiantes em ver em seu software.

Você também pode usar esse tempo gasto em seus produtos para descobrir onde sua complexidade está aparecendo. A hierarquia dos dados apresentados é ilógica? Existem elementos incluídos que complicam demais as coisas porque aparecem nas telas erradas? Você está pedindo aos usuários que deem muitos passos para alcançar seu objetivo principal?

Uma coisa que Wiafe sugere é não tratar seu MVP estritamente como um wireframe:

“Outra área de foco para nós era como fazer com que essa experiência fosse boa para nossos usuários. Não queríamos que o beta fosse frio e desinteressante. Queríamos causar uma boa primeira impressão e isso significava que precisávamos gastar tempo dando ao software algum caráter antes de lançá-lo.”

Então, sim, você usará o software dos concorrentes para detalhar as especificações de design que manterão a interface do usuário simples. No entanto, seu MVP ainda precisa ser um produto viável que os usuários queiram usar, o que significa projetá-lo para ser atraente.

3. Introduza a complexidade de forma incremental e confirme com o teste do usuário

Você já pediu comida de um restaurante por meio de um aplicativo de entrega e se perguntou por que está demorando tanto?

Você faz seu pedido às 20h. O aplicativo diz que o restaurante confirmou o pedido alguns segundos depois e você terá a comida por volta das 8h45. Às 8h40, você abre o aplicativo para ver onde o entregador está no mapa e se pergunta por que ele não está se movendo. Ou, pior, por que eles estão indo na direção errada. Seu estômago começa a roncar e você se arrepende de não ter pegado o pedido.

Se você não está familiarizado com isso, sorte sua. Mas se você pesquisar no Google “o motorista de entrega foi na direção errada no aplicativo”, verá o que quero dizer:

Este é um novo problema para as pessoas que jantam fora. No passado, tudo o que eles recebiam era uma mensagem de confirmação do pedido e, em seguida, recebiam uma ligação, uma mensagem de texto ou batiam na porta quando a comida chegava.

Mas os aplicativos de entrega mudaram ao longo do último ano, fornecendo visibilidade total não apenas do progresso do restaurante cozinhando sua comida, mas também mostrando o paradeiro exato do motorista de entrega.

Esse foi um recurso absolutamente essencial para o sucesso dos aplicativos de entrega? Se está enfurecendo os usuários a ponto de receberem grandes volumes de reclamações de atendimento ao cliente, reembolsos de pedidos ou rotatividade de usuários, então não, não foi.

É por isso que a complexidade deve ser introduzida ao seu MVP pouco a pouco e só totalmente integrada quando o teste do usuário confirmar que é uma adição que vale a pena.

Como Wiafe explica:

“Dependendo do usuário do produto, a complexidade do produto varia. Com nosso produto Portal, trabalhamos com desenvolvedores com mais frequência, então não foi um problema aumentar a complexidade do importador. No entanto, o Concierge foi desenvolvido para equipes de sucesso e implementação do cliente, que tendem a ter menos mentalidade técnica. Portanto, fomos muito cuidadosos ao adicionar quaisquer recursos ou componentes complexos ao software até testá-los.”

Compreender os objetivos e expectativas de seus usuários é valioso quando você está começando. Mas não presuma entender tudo o que está passando pela mente de seus usuários depois de ter um aplicativo ou software ativo disponível.

A menos que você esteja no lugar de seus usuários, experimentando exatamente como eles são, você realmente não tem ideia do que novas camadas de complexidade farão com a usabilidade como eles a percebem.

Portanto, é incrivelmente importante formular hipóteses de trabalho relacionadas ao que acontecerá quando você introduzir mais complexidade na interface do usuário ou quando remover algo que acredita ser muito complexo. Depois de ter uma ideia baseada em dados, você pode começar a solicitar feedback de seus usuários e refinar seu produto.

Empacotando

Para criar um aplicativo que seus clientes usarão, você precisa realmente dar a eles algo para trabalhar e não algo que exija que eles entrem em contato com o suporte ao cliente para obter ajuda toda semana. Ou isso os faz questionar por que estão usando algo que lhes causa mais estresse e frustração do que antes.

Portanto, tenha cuidado com o quanto da complexidade do back-end você permite infectar o front-end. Se a interface do usuário for muito complicada para navegar ou muito complicada para entender, os usuários se revoltarão e fugirão em massa.