Design & UX

27 nov, 2018

5 passos para o design UX além de interfaces elegantes

Publicidade

Enquanto você lê isto, o framework AMARO UX está mudando. Não porque mudamos de opinião, mas muito provavelmente porque descobrimos algo novo, o negócio mudou, a empresa entendeu e nos adaptamos a ele ou alguém de outra área fez uma boa sugestão. O framework está aberto a toda a empresa e todos podem contribuir para sua evolução.

Este texto foi escrito primeiramente com base nos conceitos de “The Elements of User Experience”, de Jesse James Garrett, depois de eu passar cerca de duas semanas conversando com todos e visitando todos os departamentos da AMARO. Isso é importante ressaltar porque acredito que um framework de design deve refletir a cultura de sua empresa.

Como ainda estou aprendendo e a empresa continua mudando, o framework também está em constante evolução. Na verdade, devido ao nosso modelo de negócios (a AMARO é uma marca nativa digital direta para o consumidor), temos uma noção mais forte de experiência do usuário do que o normal, então o framework precisa refletir isso.

É um momento empolgante para trabalhar com UX, sendo que a maioria das empresas que têm presença digital entende que não pode competir em preço ou função sozinha porque, no final das contas, a experiência do usuário é o maior indicador de valor que você oferece aos seus clientes. Quando você agrega valor, é mais provável que você receba esse valor de volta dos clientes.

“Bom design se torna invisível”

Não tenho certeza de quem escreveu isso, mas eu concordo. Vamos falar agora sobre nossos cinco estágios de framework. O que basicamente queremos fazer com essa prática, processo e resultado é criar experiências que minimizem o esforço cognitivo, simplifiquem os passos para a conclusão de uma tarefa, forneçam feedback imediato e minimizem o erro do usuário.

As pessoas tendem a pensar no designer de UX como o cara que cria telas. Outras áreas da empresa podem vir até nós com um problema em que a única coisa que temos que fazer é desenhar interfaces ou adicionar um botão.

Francamente, é a coisa mais fácil que eu poderia fazer, mas, se eu quiser construir uma experiência que agregue valor ao usuário, preciso entender muito mais sobre as expectativas dos usuários e as metas de negócios.

Portanto, temos que ter cuidado para não desistir da boa experiência do usuário, na qual deve haver pesquisa, viés cognitivo, estratégia e compreensão por trás de uma interface útil.

É por isso que você verá muito mais informações nos estágios antes do design de interface. É importante entender que as boas interfaces são construídas apenas sobre pilares estratégicos fortes e estruturados.

1 – Ideação

Nesta etapa, o mais importante é descobrir um ponto de convergência entre as expectativas do usuário e os objetivos do negócio. É aí que encontraremos um produto ou recurso com mais chances de gerar ótimos resultados.

Também é importante pesquisar seu mercado para entender o contexto em que a marca ou o produto está, bem como o que os concorrentes estão fazendo.

Para isso, usamos um conjunto de técnicas, como reviews de produtos existentes, entrevistas com usuários e stakeholders, benchmarks, testes A/B, testes de usabilidade e pesquisa remota, até termos informações suficientes para criar uma solução criativa. Ou pelo menos para descobrir um recurso que já existe, mas ainda não o conhecíamos.

É importante mencionar que não utilizamos uma abordagem estritamente científica para toda essa pesquisa, mas uma abordagem mais enxuta, de guerrilha, “insight o mais rápido possível”.

Algo que você pode fazer quase sozinho, por duas razões: primeiro, se você terceirizar sua pesquisa, você terá uma camada extra de interpretação dos resultados e isso o afastará de seus usuários e, em segundo lugar, você terá que ser rápido, então é importante que você tenha quase todo o processo em suas mãos.

Uma coisa que você deve terceirizar, como o Lean UX recomenda, é recrutar. É muito trabalho, na maioria dos casos, para o designer lidar.

Cada entrevista de usuário e toda a sua pesquisa precisa ser cuidadosamente interpretada, porque o que os usuários dizem que gostam pode não ser necessariamente o que eles realmente precisam. Mas esse pode ser o primeiro passo, com base em suas descobertas, para descobrir o que eles nem sabem que querem.

Esta é a fase mais demorada e, para piorar as coisas, não temos muitas entregas para compartilhar durante o processo. Então, este seria o momento para controlar sua ansiedade e conversar com as pessoas sobre por que você está dedicando esse tempo para descobrir coisas que não se relacionam tão diretamente com as interfaces que todos estão esperando.

Um bom argumento é que, como os números mostram, uma estratégia desleixada é responsável por produtos digitais que não funcionam; uma má decisão tomada durante esta fase pode levar uma empresa a investir recursos para desenvolver um produto ou recurso que não seja relevante para os usuários ou que não resolva seus problemas.

No processo de criação de ideias (ideação), é importante envolver outros membros da equipe, especialmente desenvolvedores, para que possamos prever possibilidades e limitações. Uma equipe colaborativa é essencial aqui, e você pode usar algumas técnicas como Design Thinking para criar uma solução em que a maioria da equipe acredita.

Entregas: no final desta fase, você [esperançosamente] terá um documento com coisas interessantes para analisar – reviews existentes de produtos, benchmarks, melhores práticas, planilhas de recursos – e, se o seu projeto envolve a criação de um novo produto ou recurso, você terá a ideia conceitual baseada em dados para alinhar e validar com a empresa.

2 – Medida

É aqui que definiremos o escopo e os recursos do projeto, criaremos o plano de evolução do produto e definiremos quais KPIs nos ajudarão a entender o desempenho do nosso novo produto e, no final das contas, cumprir seus objetivos.

Para definir o escopo do projeto, temos que pensar nos cenários do usuário para que possamos descobrir o conteúdo e os requisitos do sistema. No plano de evolução do projeto, é importante distribuir os recursos considerando o quão importante e viável eles são, em um plano que pode trazer valor antecipadamente e continuar surpreendendo o usuário ao longo do caminho.

Traga os desenvolvedores a bordo aqui. Eles também precisam acreditar no projeto, porque escolherão quais tecnologias usar e poderão começar a trabalhar nele.

É hora de garantir que todos os envolvidos compartilhem a mesma visão do produto, especialmente o departamento comercial ou o cliente, caso você esteja trabalhando em uma agência ou consultoria. Normalmente, temos diferentes visões em diferentes departamentos sobre o produto, assim como a parábola Blind Man and The Elephant.

Por isso, é recomendável documentar esse escopo para evitar mal-entendidos durante o processo de desenvolvimento. A quantidade de documentação dependerá de sua equipe e de quão alinhada e colaborativa ela é.

Uma vez que o escopo esteja fechado, atenha-se a ele e evite dizer sim para cada nova sugestão. Tente agendar novos recursos para futuros sprints.

Algumas compensações podem acontecer para o melhor (acrescentar resultado aqui?) durante o desenvolvimento, mas definimos um escopo para que ele não se transforme em um inferno de desenvolvimento.

Entregas: Documento de escopo com cenários de usuário, planejamento de versão e KPIs.

3 – Estrutura

As coisas estão começando a ficar mais concretas agora. Neste estágio, farmeos o design da arquitetura de informações a fim de oferecer suporte para esse novo produto ou funcionalidade. O foco é organizar informações com lógica consistente para ter acesso intuitivo ao conteúdo do aplicativo.

Afinidade, relevância e frequência de pesquisa são os principais critérios para a localização, juntamente com a rotulação consistente das áreas.

Tente criar uma arquitetura que seja capaz de crescer ao longo do tempo sem precisar reorganizar tudo. Além disso, existem muitos modelos como hierarquia, ninho, hub, visão filtrada, painel ou abas que podem ser usados dependendo do produto que você está criando e para quem você está projetando.

Começamos a pensar sobre design de interação aqui. É assim que o seu sistema responderá a todas as entradas do usuário, como uma conversa. Nesse caso, quanto mais previsível você for, mais intuitivo será o seu sistema e mais confortável se sentirá o usuário ao navegar. Assim, seguir padrões de design pode ajudá-lo a criar uma experiência mais agradável, consistente e acessível.

Onde está toda a criatividade? Bem, não na navegação ou nas microinterações. Para alterar um padrão, primeiro nos certificamos de que temos um bom motivo e estamos facilitando a vida de nossos usuários.

Entregas: fluxo de produtos e arquitetura de informação.

4 – Superfície

Finalmente é hora de desenhar as interfaces para dar forma à função. O objetivo aqui é começar a testar algumas soluções ou possibilidades na interface, navegação e design de informação antes de ir para o computador de uma forma muito rápida.

Nós desenhamos e redesenhamos algumas interfaces-chave para ter uma ideia de como podemos organizar melhor as ferramentas de navegação e o conteúdo de cada tela. Em alguns casos, podemos até prototipar em baixa resolução.

Depois disso, passamos para uma ferramenta de design de UX para desenhar as interfaces e criar um protótipo de alta fidelidade. Com esse protótipo, podemos validar mais algumas hipóteses e fazer novos ajustes.

Uma vez que acreditamos que temos a experiência que queremos, os desenvolvedores podem começar a codar usando esse protótipo como referência, juntamente com o projeto Zeplin e alguma documentação adicional que, na maioria dos casos, se refere a microinteração, transições ou comportamentos.

Mesmo que seja difícil reunir todos na equipe para discutir todos os aspectos do produto, o ideal é que quanto mais a equipe estiver envolvida e tomar parte nas decisões, menos você terá que documentar seu trabalho.

Alguns princípios que usamos para orientar nosso trabalho nesta fase são:

  • Reduza o número de funções que o usuário tem em cada tela para que possamos ter uma interface mais utilizável;
  • Faça uso consistente de convenções, padrões e nosso próprio sistema de design para que possamos ter uma experiência mais intuitiva;
  • Personalize a experiência o máximo possível (e isso tem que ser considerado de baixo para cima) para que possamos mostrar menos, mas mais conteúdo relevante;
  • Crie uma experiência previsível para que o usuário fique confiante para seguir em frente;
  • Considere todos os princípios que não são específicos do UX, mas que são parte do próprio design, incluindo alinhamento, redundância, contraste, proximidade, sequência narrativa, tipografia, cor e identidade visual;
  • Busque um design visual elegante. Mais do que outros players, a AMARO valoriza interfaces bonitas, e a coisa mais importante a que temos de prestar atenção é garantir que esses visuais mais bonitos sejam intuitivos e fáceis de navegar.

Entregas: Interfaces (finalmente), protótipo hi-rez e resultados de testes de usuários.

5 – Monitoramento

Agora rastreamos e experimentamos para ver como o produto está funcionando e como podemos evoluí-lo. As informações que coletamos aqui podem afetar o planejamento da versão do produto ou até mesmo alterar a direção do negócio.

Seguiremos os KPIs, coletaremos dados, faremos testes A/B, compartilharemos o que aprendemos com a empresa e nos conectaremos novamente à outra fase da ideaçã, no ciclo de melhoria contínua do produto.

Temos pessoas de analytics dedicadas à evolução do produto, e aqui elas não podem apenas criar relatórios, mas criar insights que podem se tornar decisões de design baseadas em dados no futuro.

Entregas: Relatórios de desempenho, nova hipótese de melhoria.

Encerrando

É importante notar que nem todo projeto precisa passar por cada um desses cinco estágios. Em alguns casos, podemos precisar fazer algo mais simples, que não necessite de muita pesquisa ou, em outros, ajustes urgentes surgem e precisamos ser pragmáticos. Nesses casos, provavelmente voltaremos aos problemas depois que tudo se resolver.

Essa foi uma breve explicação do que estamos trabalhando atualmente como o framework AMARO UX. Fique atento para mais atualizações nos próximos meses.

Se você quiser saber mais sobre como o framework AMARO UX está agora, minha sugestão é visitar nossa página e encontrar uma oportunidade de participar da equipe. Estamos sempre em busca de novos talentos.

***

Artigo escrito por Fabrício Kassick e traduzido pela redação iMasters com a permissão da equipe AMARO. O original está em: https://medium.com/amaro-tech/the-amaro-ux-framework-4-1-67ea175ba635