UX CALENDAR – 21 DE DEZEMBRO – Userflow, a ferramenta certa para ganhar altura em um produto já maduro.

Durante uma de minhas missões como designer de UX/UI, me encontrei responsável por um perímetro de um aplicativo bancário já maduro. Seja relacionado à funcionalidade ou à interface do usuário, as jornadas eram avançadas e já numerosas.

O design do sistema, suficientemente rico, diversificado e estruturado, permite prototipar rapidamente novos cursos de alta fidelidade sem ter que passar por wireframes Mid-Fi. A implementação de um projeto de sistema permite reduzir os custos de desenvolvimento e manter a consistência geral do produto. Essa consistência tem uma vantagem significativa para o usuário, pois permite que ele se encontre em um terreno familiar e associe facilmente padrões visuais à funcionalidade ou a uma forma de organizar informações.

Só então, como designer (garante da experiência do usuário) rapidamente nos encontramos tendo que criar, gerenciar e atualizar inúmeros protótipos e telas muito semelhantes, mas que respondem a diferentes casos de uso. Navegar pelas telas e projetos em andamento torna-se então um verdadeiro desafio.

Meu objetivo através deste artigo e compartilhar com vocês a ferramenta que me permitiu colocar ordem neste emaranhado de caminhos e manter uma visão global. A implementação de Userflows deu-me a ajuda necessária para a criação, atualização, organização e comunicação dos diferentes percursos dentro das equipas. E aqui está como...

#1 WIREFRAMES / PROTÓTIPOS E SUAS LIMITAÇÕES

A criação de wireframes e a prototipagem têm benefícios importantes e imediatos. Eles nos permitem testar nossas telas rapidamente e bem no início do projeto. O objetivo de um protótipo é tornar tangíveis casos de uso específicos. Assim, possibilitam viver a experiência do usuário, tornam-se um meio de troca durante as fases de teste.

Se você já está em um estágio avançado do seu Design System, criar protótipos de alta fidelidade pode ser extremamente rápido. Eles também são ferramentas essenciais para convencer um cliente, permitindo que ele se projete.

Como vimos acima, os protótipos têm um papel fundamental no design da experiência do usuário. No entanto, eles permitem ter, no momento T, apenas uma visão de tela por tela e dentro da estrutura definida pelo nosso caso de uso. Do ponto de vista organizacional, é difícil entender o lugar de uma determinada tela no meio do fluxo de trabalho geral. Acima de tudo, à medida que nos aprofundamos no desenvolvimento, o produto se torna mais complexo, percebemos que temos que lidar com muitos cenários, não considerados inicialmente.

De fato, os protótipos produzidos geralmente representam casos nominais e muitas vezes o “caminho feliz”, mas e os outros casos?

Como por exemplo :

  • Como devo mostrar que um botão pode se referir a diferentes telas dependendo do status do usuário?
  • Devo prototipar essas duas versões para visualizar e testar a experiência do usuário dessas duas ramificações?
  • Como devo integrar casos de erro em meus protótipos, como perda de conexão, problema no servidor? Devo fazer um protótipo dedicado?
  • Como posso representar os gatilhos para essas mensagens de erro no meu protótipo?
  • Devo criar versões de acordo com o status dos usuários (perfil memorizado / não memorizado / Inscrito / Não inscrito)?
  • Se o usuário já estiver inscrito em um recurso ou se não tiver finalizado seu processo de assinatura, devo pular algumas etapas dependendo da situação do usuário?

O papel de um designer é prever todos esses casos e fornecer soluções ergonômicas. Mas todos esses casos diferentes são cenários alternativos que combinados podem levar a muitas possibilidades. É possível criar protótipos para responder a todos estes cenários? Supondo que o produto tenha um orçamento e o tempo necessário para a declinação de todas essas telas, que problemas os protótipos podem levantar?

  • A dificuldade de manter todas essas variantes de tela atualizadas, especialmente dentro de um design de sistema em rápida evolução.
  • A dificuldade em avaliar os impactos que a modificação de uma tela pode ter no restante dos cursos que possuem essa tela em comum.
  • O tempo alocado para criar telas, organizá-las e compartilhá-las com desenvolvedores/POs.
  • A dificuldade de um alto-falante externo encontrar tantas versões.

Percebemos que usar protótipos como ferramenta de comunicação e gestão não é mais suficiente. Chega a um certo limite se quisermos responder a todos os diferentes casos.

Considerar uma abordagem macro facilitará a navegação nesse labirinto de possibilidades.

#2 O INTERESSE DOS FLUXOS DE USUÁRIO

Como vimos acima, quanto mais complexo um sistema se torna, mais difícil é entender/organizar/manter o produto como um todo apenas com o uso de protótipos. De onde vem a utilidade de acoplar essa ferramenta a um Userflow?

O Userflow permite ilustrar os movimentos através de um sistema, mostra quais etapas o usuário terá que percorrer para atingir seu objetivo. A seguir estão o nível de detalhes que podemos integrar as decisões do usuário e os caminhos que resultam delas. Também é interessante integrar as restrições técnicas que podem ser decisivas no fluxo do produto. Quando usado no momento certo em projetos, o Userflows pode aumentar a velocidade de formação de iteração e melhorar a comunicação dentro da equipe do produto.

Assim como os Wireframes, os Userflows podem ser apresentados com diferentes níveis de detalhes :

  • Quanto mais rudimentar o Userflow, mais sua abordagem estará focada nas etapas que atenderão as principais necessidades e objetivos dos usuários. Esse nível de detalhe é muito interessante porque dá uma ideia geral das diferentes etapas e do número de telas que terão que ser prototipadas. Isso torna possível retornar à função global sem se deter nos detalhes.
  • Quanto maior o nível de detalhe, mais você pode integrar elementos finitos de interfaces, elementos técnicos ou decisões do usuário. Ao atingir este nível de detalhe poderá então ter uma visão detalhada dos diferentes ramos permitindo-lhe atingir o objetivo do utilizador.

Aqui estão alguns dos principais benefícios de usar o Userflow :

  • A vantagem de usar este meio desde o início do projeto é poder "mapear" as rotas de forma macro, mas acima de tudo poder alterá-las de acordo. Também é interessante ver seu Userflow como uma ferramenta de trabalho viva e em evolução. Ele anda de mãos dadas com restrições técnicas, desenvolvimentos de negócios e necessidades do usuário.
  • Por outro lado, é difícil desenvolver determinadas telas sem o suporte dessa ferramenta porque não percebemos o impacto que isso pode ter em outros casos de uso que tenham essa tela em comum. De fato, ao usá-lo, você poderá visualizar rapidamente as ramificações e, portanto, todas as telas que provavelmente serão afetadas. Isso possibilita, por exemplo, desenvolver essa tela levando em consideração todos os cenários possíveis, evitando duplicidade e reduzindo custos de desenvolvimento. Por outro lado, se o uso for muito diferente do que o usuário ou as demandas do negócio esperam, é possível desviar e criar uma nova versão com pleno conhecimento dos fatos.
  • Em um protótipo, é difícil integrar as restrições técnicas que podem ter um impacto muito forte na experiência do usuário final: Tempo de espera / Chamadas de servidor / Verificações de segurança. Mapear esse tipo de informação já pode dar boas pistas sobre onde potencialmente pode haver erros ou atrasos. Isso possibilita, por exemplo, fornecer “Shimmerings” para fazer o usuário esperar ou preparar casos de erro com mensagens contextuais, humorísticas ou levemente emocionais.
  • Isso também possibilita apresentar os diferentes cursos de forma macro aos diferentes interlocutores do projeto. Por exemplo, é um ativo para a equipe de Dados ter esse tipo de representação. Isso permite que ele visualize as diferentes ramificações e decisões do usuário e seja capaz de desenvolver o "Plano de marcação" de acordo.

#3 Exemplo de ferramenta:

Nesta parte, gostaria de apresentar a ferramenta de criação colaborativa Userflow que eu aprecio particularmente: Whimsical.

Mais :

  • Começar é extremamente simples, mesmo para quem nunca usou ferramentas semelhantes.
  • É muito fácil modificar um Userflow “complexo” existente sem desfazer tudo e gastar muito tempo com isso.
  • As possibilidades de customização não são muito numerosas, mas simples, estéticas e bem feitas para atender todas as principais necessidades sem se perder na complexidade.
  • Quer facilitar o trabalho e o processo de comunicação entre os desenvolvedores e sua equipe de design? Você poderá aproveitar esta ferramenta colaborativa permitindo que várias pessoas trabalhem no mesmo arquivo ao mesmo tempo. Você pode comentar, marcar colaboradores em elementos específicos do documento.
  • Esta ferramenta também permite integrar links e imagens (como interfaces para Userflows). No entanto, é lamentável que seja impossível.
  • Este software também integra outras ferramentas que não são o assunto deste artigo, mas que permanecem ativos reais (Mindmap, Sticky Notes, Wireframe).
  • O preço é razoável: Grátis para revisores e 10€/mês para editores.

O menos :

  • Pena que não podemos ter prévias das pranchetas do Invision, Sketch ou Figma que permitiriam a atualização de um Wireflow real automaticamente.
  • A versão gratuita oferece apenas um plano de trabalho colaborativo.

 

Até amanhã para novas surpresas em nosso calendário do Advento da UX-Republic!

 

Clemente Guillot, Designer UX-UI @UX-Republic

 

 

 

Grande jogo de palavras escondidas!
Uma palavra oculta entrou no texto, mas não tem nada a ver com isso. No entanto, esta palavra é importante para nós. Se, no dia da publicação, você encontrá-lo e postar este artigo no Twitter primeiro com a hashtag #CalendrierUXRepublic e a palavra oculta, você ganha um conjunto de UX-Cards ou um conjunto de cartões de zoneamento. Cuidado, você só pode ganhar uma vez... então você tem que dar uma chance aos outros 😉!