Os 10 produtos de UX que os principais designers usam

Ouça a versão em áudio deste artigo

O trabalho de um designer de UX acontece em muitos ambientes diferentes – desde startups enxutas e ambientes ágeis onde as equipes trabalham com pouca documentação, até compromissos de consultoria para terceiros ou grandes empresas e entidades governamentais com requisitos rigorosos de documentação. Independentemente da natureza do engajamento ou do ambiente (e a única coisa que une tudo isso), é a necessidade de profissionais de UX comunicarem efetivamente suas ideias de design, resultados de pesquisas e o contexto de projetos para uma variedade de públicos.

Durante o processo de design de UX, os designers produzirão uma ampla variedade de “artefatos” e entregas do projeto como parte de sua metodologia de design de UX. Eles podem assumir várias formas: as entregas ajudam os designers de UX a se comunicarem com várias partes interessadas e equipes, documentar o trabalho e fornecer artefatos para reuniões e sessões de ideação. Eles também ajudam a criar a “fonte única da verdade” – guias e especificações para implementação e referência.

Aqui estão as 10 entregas de UX que um designer de UX normalmente produz durante um engajamento. (Esta lista não é de forma alguma abrangente e pode ser potencialmente mais longa, dependendo da natureza do trabalho.)

1. Objetivos de Negócios e Especificações Técnicas

Este é um passo fundamental. Para um profissional de UX, tudo começa com a compreensão da visão do produto, ou seja, a razão da existência do produto do ponto de vista do negócio. Escrito em termos simples, a declaração deve incluir o problema que está sendo abordado, a solução proposta e uma descrição geral do mercado-alvo. Deve também descrever as plataformas de entrega e tocar levemente nos meios técnicos pelos quais o produto será entregue.

Não precisa ter mais de uma página, mas deve descrever o núcleo do O quê, Por que e Como. Aqui está um exemplo: “A Fantastic App Co. identificou uma lacuna nos aplicativos de presentear em plataformas móveis para o mercado Millennial (iOS e Android). Um grande número de Millennials tem dificuldade em lembrar datas especiais, identificar o melhor presente, encontrar e comprar esses presentes. Nossa solução foi projetada para aliviar esse estresse. Empregando design antecipado e as mais recentes tecnologias de IA, o aplicativo oferece uma experiência de usuário útil e quase mágica.”

2. Relatório de Análise Competitiva

Para quem está começando a projetar um novo produto, é vital garantir que ele seja adequado ao mercado. Crucialmente, como parte de uma estratégia de UX, o produto também deve ter uma vantagem competitiva atraente e um UX superior a outros no mercado.

Análise competitiva significa: “Identificar seus concorrentes e avaliar suas estratégias para determinar seus pontos fortes e fracos em relação aos de seu próprio produto ou serviço ”.

Uma das tarefas iniciais de um designer de UX é pesquisar quais produtos ou serviços os clientes-alvo estão usando atualmente para resolver o problema. Existe um produto ou serviço equivalente lá fora? Existe uma solução alternativa que as pessoas estão usando que seja boa o suficiente, mas não perfeita? Um band-aid — uma vitamina, mas não um analgésico? Como uma UX melhor pode fazer a diferença?

Um componente da pesquisa de experiência do usuário, um relatório de análise competitiva identifica os cinco principais concorrentes e examina o que eles estão fazendo certo, bem como o que estão fazendo de errado. Esta etapa ajudará a definir uma direção de design onde objetivos claros são definidos e os elementos a serem focados em detalhes.

3. Relatórios de Pesquisa de Personas e UX

Os designers de UX precisam garantir que as partes interessadas entendam as necessidades dos clientes do produto. Criar personas para encapsular e comunicar padrões de comportamento do usuário e conduzir pesquisas de usuários são maneiras testadas e comprovadas de fazer isso. As personas são representativas dos usuários típicos de um produto – ao incorporar seus objetivos, necessidades e interesses, elas ajudam a equipe que trabalha no projeto a desenvolver empatia com o usuário.

A pesquisa do usuário também é um componente integral no processo de design de UX. Envolve uma série de técnicas usadas para extrair padrões comportamentais, adicionar contexto e fornecer informações sobre o processo de design. Existem muitos tipos de ferramentas e técnicas de pesquisa de usuários disponíveis – trata-se de escolher a “lente” certa para a situação certa.

Antes de iniciar a pesquisa de usuários, é importante dedicar um tempo para desenvolver um plano de pesquisa . Este é um documento que ajudará a comunicar os objetivos e métodos de pesquisa, bem como obter a adesão das partes interessadas. É também uma ótima ferramenta que pode ser usada para ajudar a manter todos no caminho certo durante o projeto de pesquisa.

Na conclusão da fase de pesquisa do usuário, é gerado um relatório que traduz os resultados da pesquisa em itens acionáveis. A equipe de UX é então definida para projetar o produto em torno desses itens.

4. Mapa do Site e Arquitetura da Informação

Um sitemap é um modelo organizado visualmente de todos os componentes e informações contidas em um produto digital. Ele representa a organização do conteúdo de um aplicativo ou site. Junto com os wireframes, eles são uma das entregas mais fundamentais de UX e raramente são ignorados em um processo de design de UX.

Os Sitemaps ajudam a definir a arquitetura da informação — a arte e a ciência de organizar e rotular os componentes de um produto — para dar suporte à navegação, localização e usabilidade; eles também ajudam a definir a taxonomia e a interface do usuário.

Sitemaps são referências úteis para se ter como recurso e ajustar à medida que o produto evolui com base em prototipagem iterativa e testes de usuário. Durante o fluxo de trabalho do projeto, um sistema de numeração é frequentemente empregado para manter todos na mesma página ao discutir o conteúdo do produto.

5. Mapas de Experiência, Jornadas do Usuário e Fluxos do Usuário

Um mapa de experiência é uma representação visual que ilustra o fluxo de um usuário dentro de um produto ou serviço – seus objetivos, necessidades, tempo gasto, pensamentos, sentimentos, reações, ansiedades, expectativas – ou seja, a experiência geral ao longo de sua interação com um produto. Normalmente, é apresentado em uma linha do tempo linear mostrando os pontos de contato entre o usuário e o produto.

As jornadas do usuário e os fluxos do usuário são mais sobre uma série de etapas que um usuário executa e demonstram a maneira como os usuários interagem atualmente – ou poderiam interagir com um produto. Eles demonstram comportamento, funcionalidade e as principais tarefas que um usuário pode executar. Ao examinar e entender o “fluxo” de várias tarefas que um usuário pode realizar, você pode começar a pensar sobre que tipo de conteúdo e funcionalidades incluir na interface do usuário e que tipo de interface do usuário o usuário precisará para realizá-las.

Muito do UX é sobre resolver problemas para os usuários. Ao elaborar uma jornada do usuário, o designer precisa entender a persona, os objetivos do usuário, motivações, pontos problemáticos atuais e as principais tarefas que deseja realizar.

Qual é a diferença entre a jornada do usuário e o fluxo do usuário ? Pense em um fluxo de usuário como o usuário trabalhando em uma tarefa ou objetivo por meio de seu produto ou serviço, por exemplo, reservando um carro no Lyft; uma jornada do usuário ilustra o quadro maior. Uma jornada do usuário se expande além das tarefas e analisa como uma interação específica com o cliente se encaixa em um contexto maior.

6. Estruturas de UX

Um grampo da metodologia de design UX, os wireframes são ilustrações bidimensionais de “plano” de uma estrutura de design e elementos de interface, e mostram o que vai para onde. Principalmente uma ferramenta de layout, eles ajudam a definir a arquitetura da informação, o espaçamento do conteúdo, as funcionalidades, o design de interação e os comportamentos pretendidos do usuário.

Os wireframes são pão com manteiga para designers de UX e uma das entregas mais comuns em um projeto. “Mostre-me seus wireframes” provavelmente é ouvido com mais frequência do que qualquer outra coisa durante a entrevista de um designer de UX.

Uma fase importante no processo de design de UX, o wireframing é uma maneira econômica de explorar ideias e gerar conceitos inovadores que atendam aos objetivos do cliente. Eles são ótimas ferramentas para criar ideias rapidamente além do esboço e vêm em muitos sabores diferentes - desde baixa fidelidade (sem estilo, caixas em preto e branco, texto grego) até alta fidelidade (totalmente estilizado, colorido, muito detalhado).

Às vezes chamados de “fios” no local de trabalho, os wireframes podem economizar muito tempo e dinheiro porque são muito flexíveis e rápidos de produzir. Eles servem como uma peça central em torno da qual se pode conversar com as partes interessadas e membros da equipe enquanto se define a direção do design.

Os wireframes são fundamentais e, como tal, são fundamentais para ajudar a definir um design estruturalmente e como um fluxo de usuário funciona por meio de um aplicativo ou site em diferentes cenários de caso de uso. Existem algumas reviravoltas interessantes em wireframes, como “mapas de wireframe” discutidos em um artigo anterior aqui no Toptal Design Blog e “wireflows:” uma entrega de UX para fluxos de trabalho e aplicativos do NNGroup.

7. Protótipos interativos

Outra entrega dominante durante um processo de design centrado no usuário, os protótipos interativos dão vida a um produto. Protótipos rudimentares economizam muito tempo e dinheiro - eles demonstram como as coisas funcionarão em um cenário de caso de uso real e permitem uma rápida iteração de design e testes de usuário. Eles também ajudam um designer a comunicar seu design de forma eficaz em diferentes estágios do processo de design de UX.

A prototipagem pode acontecer em qualquer ponto da jornada de descoberta por meio da iteração. De protótipos de papel a designs altamente polidos, uma revisão interna de um protótipo de produto permite que todos na equipe vejam como as coisas funcionarão quando um usuário real interagir com ele.

Esboços estáticos e wireframes não dão vida a um produto da maneira que um protótipo interativo pode. Quase magicamente, vê-se e sente-se como o produto se comportará – como tudo se conecta. Diferentes designs e recursos podem ser explorados; novas ideias podem surgir. Pontos problemáticos podem ser identificados e interações incômodas podem ser descobertas.

Protótipos interativos ajudam imensamente a testar o usuário. Em vez de guiar as pessoas por páginas estáticas, os usuários em potencial podem testar um produto que parece 100% real, fornecer ideias e fornecer feedback valioso.

Atualmente, as ferramentas de prototipagem para designers vêm em todas as formas e tamanhos. Aqui estão 21 ferramentas interativas de prototipagem para UX design.

8. Design Visual

O design visual é a “camada final de tinta” do produto. No entanto, não é só isso: o design visual pode afetar muito o UX de um produto e, portanto, deve ser abordado com muito cuidado. Felizmente, muitas heurísticas de design de interação e usabilidade foram elaboradas durante as etapas anteriores do processo de design de UX para que os designers possam se concentrar nos visuais. É uma última oportunidade de levar o produto para o próximo nível.

O design visual é a última etapa antes da entrega aos desenvolvedores e a fase em que um guia de estilo e as especificações finais são criados. Não se trata apenas de “tornar as coisas bonitas”, mas uma oportunidade de definir ou implementar um esquema de cores da marca e afetar a usabilidade com o layout, contraste e hierarquia visual.

9. Guia de estilo e especificações para desenvolvedores

A etapa final no fluxo de trabalho de design de UX é reunir especificações e um guia de estilo para desenvolvedores. Os guias de estilo são essenciais para que o design de um produto tenha sucesso a longo prazo.

Um guia de estilo serve para garantir que os designs sejam implementados de forma consistente em toda a marca, estilos visuais, cores, fontes e tipografia. Também é usado para padrões de design, linguagem, regras (como atalhos de teclado e regras de exibição de dados) e especificação de comportamentos de interface do usuário (como tratamento de erros).

Alguns guias de estilo e especificações são montados manualmente e outros são gerados automaticamente. Montar um guia de estilo manualmente é um processo tedioso e muitas vezes pode levar seis meses, então qualquer ferramenta de automação é uma economia de tempo bem-vinda.

As formas automatizadas variam de acordo com a ferramenta utilizada. Eles são uma maneira mais ágil e incremental de entregar designs versus guias de estilo criados há muito tempo. Eles podem ser pensados ​​mais como “bíblias de estilo” na prateleira que todos da equipe podem consultar.

Se você trabalha no Sketch, existem coisas divinas como o Zeplin. Zeplin é uma ferramenta de colaboração para designers de interface do usuário e desenvolvedores front-end. Ele vai além do fluxo de trabalho do design e ajuda as equipes na entrega do design.

Além disso, um guia de estilo de design pode ser gerado em alguns segundos a partir do Sketch com o plug-in Craft, ou medições e CSS extraídos do design gerando um arquivo HTML com o plug-in Marketch, conforme descrito neste artigo.

Aqui estão 50 ótimos exemplos de guias de estilo. Também um da BBC e um da IBM, ambos hospedam seus guias on-line, o que facilita a visualização de todos.

10. Testes de usabilidade e relatórios de análise de uso

O trabalho de um designer de UX nunca termina. Mesmo após o lançamento de um produto, há oportunidades para coletar feedback, coletar dados sobre o uso, refinar, liberar e iniciar o ciclo novamente.

Um teste de usabilidade lhe dirá se seus usuários-alvo podem usar seu produto. Ele ajuda a identificar os problemas que as pessoas estão tendo com uma interface do usuário específica e revela tarefas difíceis de concluir e linguagem confusa.

Os relatórios de teste de usabilidade geralmente são entregues durante a fase de prototipagem, mas não é incomum testar produtos existentes com usuários para ver onde pode haver espaço para melhorias.

Compreender os dados coletados durante os testes de usabilidade – coleta, classificação e geração de relatórios está se tornando uma tarefa cada vez mais comum entre os profissionais de UX – na verdade, está se tornando uma habilidade crítica de UX. Aqui está um modelo de relatório de teste de usabilidade.

Depois que o produto for lançado, outro conjunto de coleta de dados – um método quantitativo – dirá à equipe de design como o produto se comporta com os usuários em grande escala.

Existem inúmeras ferramentas e formas de capturar o comportamento do usuário e analisá-lo. Do rastreamento ocular ao rastreamento de cliques e mapas de calor (que mostram cliques, toques e comportamento de rolagem) à marcação de elementos da interface do usuário que rastreia a pegada digital de cada usuário em dispositivos móveis e da web.

Os relatórios de análise mostram quais recursos os clientes usam, quanto tempo eles gastam em seu aplicativo ou site para dispositivos móveis, tendências ao longo do tempo e agregam resultados em regiões geográficas, contas, usuários e segmentos personalizados. Eles fornecem visibilidade total de como os recursos estão sendo usados ​​e por quem.

As empresas de análise geralmente geram relatórios personalizados sob demanda automaticamente. Esses relatórios são muito úteis e podem fornecer informações surpreendentes sobre o uso do seu produto. Esse recurso incrível que você pensou que conquistaria todos os seus clientes pode acabar sendo quase nunca usado. Por outro lado, uma função pequena e insignificante na interface do usuário pode ser muito usada e você pode decidir que é hora de se concentrar na expansão dessa funcionalidade específica.

A missão de um designer de UX é capacitar as empresas a criar produtos e serviços com base em uma profunda compreensão dos comportamentos, objetivos e motivações humanas. As 10 entregas de UX acima são algumas das mais comuns produzidas por UX Designers, pois criam ótimas experiências para os usuários como parte do “design thinking” e de um processo de design centrado no usuário.

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas