“O design não é apenas a aparência e a sensação. O design é assim que funciona. ”- Steve Jobs

Os protótipos têm se mostrado inestimáveis ​​para tomar melhores decisões de design. Como artefatos, os protótipos são um dos principais entregáveis em design e prototipagem UX, e como uma atividade, estão no cerne da processo de design centrado no usuário . Um protótipo é um amálgama de todo o trabalho de design de UX anterior fundido 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 o certo A ferramenta de prototipagem 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 entraram em cena recentemente. Existem ferramentas apenas online, por exemplo, Figma , InVision , UXPin , Framer , Maravilha , Princípio , Origami e alguns são softwares de desktop tradicionais, como Esboço 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 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, Axure é digno de outro olhar. A Axure já existe há algum tempo, anos antes do nascimento das ferramentas recém-cunhadas mencionadas acima, e muitos designers considere-o o avô das ferramentas de wireframing e prototipagem dotadas de recursos profundos.

Por que usar o Axure?

Hoje em dia, na maioria das vezes, os designers usam ferramentas de prototipagem baseadas em pontos de acesso 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 complementam a experiência geral do usuário durante o teste. Em contraste, Axure pode lidar facilmente com os detalhes sutis e micro-interações que dão vida a um protótipo.

Para explorar mais profundamente como as pessoas interagiriam com um design 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 fazem o protótipo parecer 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 representa um problema de ineficiência. O fluxo de trabalho de design típico envolve um designer criando UIs em Esboço e prototipagem em outra ferramenta, como InVision ou Maravilha . Depois disso, o design é entregue aos desenvolvedores usando mais uma ferramenta, como Zeplin .

Axure é um aplicativo totalmente integrado que elimina a necessidade de usar diferentes ferramentas de design. Por exemplo, depois de criar fluxos de usuários, mapas de jornadas do cliente, personas, storyboards, mapas de sites, arquitetura de informação e wireframes, designers pode facilmente continuar até protótipos complexos - dentro do 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 obstáculo para fornecer produtos e serviços bem projetados é a falta de compreensão sobre nossos usuários. Jared Spool, UIE (Engenharia de Interface do Usuário)

Semelhante a outras ferramentas de design, o Axure pode ser escolhido 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. Designers que desejam ir mais fundo e investir tempo para aprender o aplicativo podem construir sites e aplicativos complexos e realistas com interações intrincadas.

Exemplos de prototipagem Axure da vida real

Os designers estão sempre com pouco tempo e precisam demonstrar como os fluxos de usuários específicos funcionariam em análises e testar designs de produtos com os usuários desde o início. Os recursos básicos do Axure podem brilhar nesses cenários porque designers pode 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 de OmniGraffle como PNGs. As imagens foram cortadas, mascaradas e colocadas em camadas no Axure. Em seguida, pontos de acesso e componentes interativos foram adicionados a partir da biblioteca de widgets Axure, como menus suspensos e campos de formulário, para criar um ambiente rico e funcional protótipo . Os recursos e funcionalidades do produto foram então testados usando controle remoto e moderado teste de usuário , o que levou a iterações de design rápidas com base no feedback do usuário.

Em outro exemplo, as equipes de design e engenharia foram capazes de 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 aumentaria a usabilidade e também seria tecnicamente viável.

Neste cenário, imagens de diferentes estados foram exportadas do Sketch e interações rápidas foram adicionadas e animadas no Axure. Componentes da IU 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 outro ferramentas de prototipagem , esse esforço pode ter demorado muito mais.

Recursos e benefícios do Axure

Recentemente, trabalhei em uma empresa que só usava protótipos tela a tela básicos criados com InVision e nunca tinha feito muitos testes de usuário. Para testar um recurso importante do próximo produto, fui encarregado de criar um protótipo de produto detalhado. Muita coisa estava acontecendo com esse novo recurso, e as partes interessadas queriam fazer isso da maneira certa.

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

Ao testar, pudemos ver Onde os usuários lutaram com o design e porque , o que não teria sido possível com um protótipo menos detalhado construído com telas estáticas. Como resultado, conseguimos resolver rapidamente os problemas que encontramos.

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

Quando os desenvolvedores front-end conseguiram colocar as mãos no protótipo, suas vidas também ficaram muito mais fáceis. Até mesmo os desenvolvedores de back-end apreciaram o protótipo porque puderam ver como o produto final deveria funcionar.

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

Quando tudo foi dito e feito, todos na equipe mencionaram como o protótipo detalhado foi útil e pediram que esse tipo de processo de prototipagem fosse feito com mais frequência. A lição é que criar, revisar e testar um protótipo detalhado pode fazer uma grande 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, até os casos de uso mais complexos. Nossos protótipos parecem e agem como reais. Julie, Laboratório de experiência do usuário

Recursos e pontos fortes do Axure

Os designers não precisam saber como codificar para criar protótipos complexos, dinâmicos e ricos em recursos no Axure. Interações sofisticadas e intrincadas podem ser configuradas usando seu Interações painel com afirmaçõ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 wireframes e prototipagem rápidos
• Um ambiente de arrastar e soltar
• Construindo protótipos baseados em navegador sem codificação
• Construindo interações de ativos Sketch
• Emulação de celular e visualização de dispositivo móvel
• Campos de trabalho do formulário que permitem a entrada do usuário
• Adicionar lógica condicional, variáveis ​​e expressões
• Trabalhar com conteúdo dinâmico e visualizações adaptáveis
• Adicionar efeitos de animação
• Visualização de protótipo offline
• Bibliotecas de widgets personalizados
• Integração e plug-ins com Adobe XD
• Compartilhando protótipos em Axure Cloud que pode ser visto 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 para Axure Cloud para redlines automáticos, além de CSS e exportação de imagem.

Documentação e Especificação

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

Mini estudo de caso de prototipagem Axure

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

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

Em uma página de lista 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 lista de produtos, definindo uma faixa de preço.

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

Ilustrando o seguinte fluxo do usuário, 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 microinterações sutis.

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.

Essas interações sutis e transformações da interface do usuário são úteis ao testar os recursos do produto, porque designers e pesquisadores usuários pode conduzir testes de usuário 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 negligenciam 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 versão de 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 de aparência realista. Também existem muitos tutoriais disponíveis para cada tipo de projeto (no YouTube e Site da Axure ) e widgets Axure prontos para uso também estão amplamente disponíveis para download (gratuito e pago).

• • •

Leituras adicionais no ApeeScape Design Blog:

• Aperfeiçoe seu processo de design UX - Um guia para o design de protótipo
• Os 10 produtos de UX que os principais designers usam
• Mitos UX - Prototipagem, Teste do Usuário e Entregáveis ​​UX
• Tutorial do Framer: como criar protótipos interativos impressionantes
• Domine sua arte com essas ferramentas UX de ponta

Compreender o básico

Como funciona o Axure?

O Axure apresenta muitas ferramentas eficientes e os designers costumam perguntar por que usar o Axure. Axure afirma que é a ferramenta de UX mais poderosa. Possui widgets embutidos para wireframing, um ambiente simples de arrastar e soltar, protótipos baseados em navegador sem codificação, transições animadas, campos de formulário que permitem entrada do usuário e muito mais.

Quanto custa o Axure?

Axure tem muitos níveis de preços diferentes e dois modelos: baseado em assinatura e licença perpétua. Para licenças perpétuas, eles têm Axure RP 9 Pro a partir de $ 495, Axure RP 9 Team $ 895 e Axure for Enterprise (dependendo do tamanho da equipe). As assinaturas começam em US $ 29 por mês para Axure Pro 9.

Axure é a melhor ferramenta de prototipagem?

Pode haver muitas novas ferramentas de prototipagem no mercado, mas quando os designers desejam entregar protótipos ricos em recursos, há muitos bons motivos para usar o Axure. Pode ser a ferramenta de prototipagem mais versátil. Axure apresenta interações dinâmicas, lógica condicional, linhas de marcação automatizadas e exportação de código.

Para que é usado o Axure?

Axure apresenta um extenso kit de ferramentas para diagramação, jornadas do cliente, wireframing e prototipagem, usando interações dinâmicas, lógica condicional, efeitos de animação, linhas de marcação automatizadas e exportação de código. Ele também tem Axure Cloud para compartilhar facilmente protótipos e pranchetas Axure RP do Adobe XD e Sketch.

Quem usa Axure?

Os designers de UX / UI usam Axure por causa de sua extensa arquitetura de informações, wireframing e recursos de prototipagem. Também é usado por desenvolvedores para diagramas e protótipos HTML. Axure apresenta interações dinâmicas, lógica condicional, efeitos de animação, linhas de marcação automatizadas e exportação de código.