Protótipos sofisticados – Por que usar o Axure

Publicados: 2022-03-11

“Design não é apenas o que parece e se sente. Design é como funciona.” - Steve Jobs

Protótipos provaram ser inestimáveis para tomar melhores decisões de design. Como artefatos, os protótipos são uma das principais entregas no design e prototipagem de UX e, como atividade, estão no centro do processo de design centrado no usuário. Um protótipo é uma amálgama de todo o trabalho anterior de design de UX mesclado em um único produto visual e funcional que é usado para validar hipóteses e testar designs.

Parece fácil, mas em um mundo saturado com uma abundância de ferramentas de design, escolher a ferramenta de prototipagem certa não é uma tarefa fácil que requer consideração cuidadosa. Os designers precisam levar em consideração os custos, recursos, integração com outras ferramentas de design, a curva de aprendizado, recursos de colaboração e a plataforma de reprodução para revisão e teste do usuário.

Para complicar as coisas, muitos recém-chegados recentemente entraram em cena. Existem ferramentas apenas online, por exemplo, Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, e algumas são softwares de desktop tradicionais, como Sketch e Adobe XD, com prototipagem integrada como uma extensão de sua funcionalidade. Todos eles têm seus prós e contras, recursos e integrações.

Mas o novo nem sempre é melhor. Ainda existem alguns velhos cavalos de guerra no campo de batalha: Axure é um deles. Quando os designers desejam fornecer protótipos detalhados e ricos em recursos, o Axure é digno de outro visual. O Axure já existe há algum tempo, anos antes do nascimento das ferramentas recém-criadas mencionadas acima, e muitos designers o consideram o avô das ferramentas de wireframing e prototipagem dotadas de recursos profundos.

Axure apresenta a capacidade de criar protótipos de aplicativos móveis — Prototipagem de um aplicativo móvel com Axure RP (fonte).

Por que usar Axure?

Hoje em dia, em sua maioria, os designers usam ferramentas de prototipagem baseadas em hotspots com as quais vinculam telas e talvez adicionem algumas transições de tela. O problema é que esse método não inclui pequenas interações que completam a experiência geral do usuário durante o teste. Por outro lado, o Axure pode lidar facilmente com os detalhes sutis e as microinterações que dão vida a um protótipo.

Para explorar mais profundamente como as pessoas interagem com um projeto específico, os designers podem construir protótipos com lógica de condição, várias entradas do usuário e animações dinâmicas que tornam o protótipo mais realista. É uma excelente maneira de obter informações valiosas sobre o que funciona e o que não funciona.

Ter que pular muitos aplicativos de design não integrados também apresenta um problema de ineficiência. O fluxo de trabalho de design típico envolve um designer criando UIs no Sketch e prototipando em outra ferramenta, como InVision ou Marvel. Depois disso, o design é entregue aos desenvolvedores usando mais uma ferramenta, como o Zeplin.

Axure é um aplicativo totalmente integrado que elimina a necessidade de usar diferentes ferramentas de design. Por exemplo, depois de criar fluxos de usuário, mapas de jornada do cliente, personas, storyboards, mapas de site, arquitetura de informações e wireframes, os designers podem facilmente continuar com protótipos complexos — diretamente no Axure. Quando os designers entregam projetos aos desenvolvedores, eles podem ter uma noção melhor de como algo deve ser implementado e podem trabalhar de forma mais eficaz com os gerentes de produto para estimar o escopo e avaliar a viabilidade técnica.

O maior impedimento para entregar produtos e serviços bem projetados é a falta de entendimento sobre nossos usuários. Jared Spool, UIE (Engenharia de Interface do Usuário)

Semelhante a outras ferramentas de design, o Axure pode ser adquirido rapidamente e colocado em uso rapidamente. Widgets integrados com os quais construir interações dinâmicas que até mesmo não programadores podem entender podem ser usados imediatamente para interações impressionantes. Os designers que desejam se aprofundar e investir tempo para aprender o aplicativo podem criar sites e aplicativos complexos e realistas com interações complexas.

Exemplos de prototipagem Axure da vida real

Os designers sempre têm pouco tempo e precisam demonstrar como os fluxos de usuários específicos funcionariam nas revisões e testar projetos de produtos antecipadamente com os usuários. Os recursos básicos do Axure podem brilhar nesses cenários porque os designers podem transformar rapidamente imagens de outras ferramentas de design em protótipos interativos.

No exemplo de produto B2B abaixo, uma série de telas foram exportadas do OmniGraffle como PNGs. As imagens foram cortadas, mascaradas e colocadas em camadas no Axure. Em seguida, foram adicionados hotspots e componentes interativos da biblioteca de widgets do Axure, como menus suspensos e campos de formulário, para criar um protótipo rico e funcional. Os recursos e funcionalidades do produto foram então testados usando testes de usuário remotos e moderados, o que levou a iterações de design rápidas com base no feedback do usuário.

Axure apresenta interatividade dinâmica que pode ser facilmente criada a partir de imagens importadas

Em outro exemplo, as equipes de design e engenharia conseguiram descobrir a melhor maneira de projetar dois widgets particularmente complicados para um produto B2B complexo. O objetivo era projetar filtros avançados e um seletor de coluna personalizado para uma tabela com muitos dados que aumentasse a usabilidade e também fosse tecnicamente viável.

Nesse cenário, imagens de diferentes estados foram exportadas do Sketch e interações rápidas foram adicionadas e animadas no Axure. Componentes de interface do usuário foram adicionados, como botões e caixas de seleção, para demonstrar as interações e seus efeitos. As equipes passaram por várias iterações que foram revisadas e testadas. Com outras ferramentas de prototipagem, esse esforço pode ter demorado muito mais.

Por que usar Axure. Importação rápida de imagens e interatividade para testar dois widgets de tabela de dados.

Recursos e benefícios do Axure

Recentemente, trabalhei em uma empresa que usava apenas protótipos básicos de tela a tela criados com o InVision e nunca havia feito muitos testes com usuários. Para testar um próximo recurso importante do produto, fui encarregado de criar um protótipo detalhado do produto. Muita coisa estava acontecendo com esse novo recurso, e as partes interessadas queriam acertar.

Levei pouco menos de dois dias para criar um protótipo detalhado no Axure com diferentes estados e muitas microinterações que demonstrassem como o produto se comportaria em diferentes cenários. Como um benefício inesperado, surgiram muitos casos extremos que a equipe de design conseguiu resolver.

Ao testar, pudemos ver onde os usuários lutaram com o design e por quê , o que não seria possível com um protótipo menos detalhado construído com telas estáticas. Como resultado, fomos capazes de resolver rapidamente os problemas encontrados.

Também passei o protótipo para os desenvolvedores para mostrar onde estavam os pontos de interrupção do design responsivo, como os estados de foco ou de erro deveriam parecer e como a pesquisa preditiva deveria funcionar.

Quando os desenvolvedores front-end conseguiram colocar as mãos no protótipo, isso também facilitou muito a vida deles. Até os desenvolvedores de back-end apreciaram o protótipo porque puderam ver como o produto final deveria funcionar.

Esse tipo de prototipagem rápida, teste e implementação de um novo recurso de produto foi muito mais rápido do que qualquer outro desenvolvimento de recurso que eles haviam realizado anteriormente, e menos problemas surgiram na fase de controle de qualidade.

Quando tudo foi dito e feito, todos na equipe mencionaram o quão útil o protótipo detalhado foi e pediram que esse tipo de processo de prototipagem fosse feito com mais frequência. A conclusão é que criar, revisar e testar um protótipo detalhado pode fazer uma enorme diferença. Toda a equipe pôde ver interações essenciais e abrangentes que foram significativas para os usuários.

Axure nos permite testar tudo, mesmo os casos de uso mais complexos. Nossos protótipos parecem e agem como a coisa real. Julie, Laboratório de experiência do usuário

Axure possui widgets integrados e ferramentas de wireframing — Os designers podem facilmente passar de wireframes a protótipos ricos em recursos, tudo no Axure (fonte: UpLabs).

Recursos e pontos fortes do Axure

Os designers não precisam saber codificar para criar protótipos complexos, dinâmicos e ricos em recursos no Axure. Interações sofisticadas e intrincadas podem ser configuradas usando seu painel Interações com declarações diretas “se isso, então aquilo”. Abaixo está uma lista de alguns recursos adicionais do Axure:

Prototipagem Básica e Avançada

Widgets integrados para wireframing e prototipagem rápidos
Um ambiente de arrastar e soltar
Construindo protótipos baseados em navegador sem codificação
Como criar interações a partir de recursos do Sketch
Emulação móvel e visualização de dispositivos móveis
Campos de formulário de trabalho que permitem a entrada do usuário
Adicionando lógica condicional, variáveis e expressões
Trabalhando com conteúdo dinâmico e visualizações adaptáveis
Adicionando efeitos de animação
Visualização de protótipo offline
Bibliotecas de widgets personalizados
Integração e plug-ins do Adobe XD
Compartilhamento de protótipos no Axure Cloud que podem ser visualizados em um navegador

Coautoria e Colaboração

Axure RP e Axure Cloud permitem que várias pessoas trabalhem no mesmo projeto ao mesmo tempo.

Ativos compartilhados

Crie e compartilhe bibliotecas de componentes interativos e importe ativos do Sketch.

Transferência do desenvolvedor

Publique designs de RP e Sketch no Axure Cloud para redlines automáticas, além de CSS e exportação de imagens.

Documentação e Especificação

Crie fluxos de processo, desmontagens de produtos e especificações visuais.

Mini estudo de caso de prototipagem da Axure

Para mostrar os recursos do Axure que vão além dos protótipos simplistas de tela a tela, criei algumas telas com interações sutis para Zalando - um site de comércio eletrônico existente. Depois de concluídas, todas essas sequências de protótipos foram exportadas para HTML e puderam ser revisadas em um navegador por qualquer pessoa, em qualquer lugar, usando o Axure Cloud.

Primeiro, criei algumas interações no site demonstrando um mega menu, pesquisa, rolagem horizontal pelos produtos, favoritos e inscrição em um boletim informativo.

Interações profundas em protótipos são uma grande razão para usar o Axure

Em uma página de listagem de produtos, criei efeitos de foco nas miniaturas sob a imagem principal do produto para mostrar o produto em cores diferentes (trocando imagens ao passar o mouse). Também adicionei como favorito um produto novamente e um widget suspenso para filtrar a página de listagem de produtos definindo uma faixa de preço.

O Axure apresenta um painel de interações simples com o qual as microinterações podem ser facilmente configuradas

Em seguida, na mesma linha da tela acima, eu queria demonstrar a troca de diferentes imagens de produtos ao passar o mouse sobre as imagens em miniatura em uma página de detalhes do produto. Também adicionei outra funcionalidade de foco para que os compradores pudessem ver a descrição do produto, informações sobre tamanho e ajuste, entrega e comentários. Por fim, incorporei um seletor de tamanho e adicionei o produto ao carrinho de compras.

Protótipo interativo Axure demonstrando interações sofisticadas

Ilustrando o fluxo de usuário a seguir, eu queria mostrar como o gerenciamento de um carrinho de compras funcionaria – por exemplo, remover um produto do carrinho – usando slides sutis, fades e animações de substituição de elementos. Nenhum código foi usado para criar essas micro-interações sutis.

Neste exemplo do Axure, as interações do carrinho de compras são demonstradas

Por último, mas não menos importante, eu queria mostrar transformações sutis da interface do usuário na tela de login quando as pessoas inserem informações de login incorretas e qual mensagem de erro seria exibida.

Protótipo interativo Axure demonstrando uma tela de login

Essas interações sutis e transformações de interface do usuário são úteis ao testar recursos de produtos porque designers e pesquisadores de usuários podem realizar testes de usuários mais detalhados e obter insights mais profundos sobre as reações das pessoas a um site de comércio eletrônico. Eles demonstram uma aparência específica e sofisticada que não seria possível ou pode ser muito difícil de criar com outras ferramentas de prototipagem.

Resumo

Em busca das melhores e mais recentes ferramentas de wireframing e prototipagem, os designers às vezes ignoram ferramentas estabelecidas e capazes que resistiram ao teste do tempo.

Os designers deveriam dar outra olhada no Axure. Devido à sua profundidade, conjunto de recursos e flexibilidade, o Axure é uma ferramenta capaz e robusta em comparação com outras soluções, e a empresa continua a atualizá-lo para manter sua relevância como ferramenta de design.

Uma avaliação gratuita do Axure está disponível para download. Os designers podem exportar UIs do Sketch, importar para o Axure e criar protótipos com aparência realista. Há também muitos tutoriais disponíveis para cada tipo de projeto (no YouTube e no site da Axure), e widgets Axure prontos para uso também estão amplamente disponíveis para download (gratuito e pago).

• • •