Ter as ferramentas de UX certas à mão pode ser a diferença crucial entre ter um fluxo de trabalho de design colaborativo, contínuo e altamente eficaz em geral e um fluxo de trabalho lento, improdutivo e inexplicável.

É importante se manter atualizado com as ferramentas e tecnologias mais recentes e aprender sobre as maneiras interessantes designers pode usá-los para criar e colaborar com mais eficiência. Algumas ferramentas são mais eficazes do que outras, dependendo do tamanho da equipe, do estágio no processo de design e de quaisquer outras ferramentas que já façam parte do fluxo de trabalho.

Vamos dar uma olhada nas principais ferramentas de UX, de wireframing e prototipagem a pesquisas e análises de UX, que estão ajudando as equipes a fazer coisas incríveis em 2018.

Ferramentas de Design + Prototipagem + Design Handoff

InVision / InVision Studio

Plataforma: web (integra-se com Sketch e Photoshop) e macOS
Preço: a partir de $ 13 / mês para indivíduos ou $ 89 / mês para equipes de cinco

Nota: O preço se aplica ao aplicativo da web InVision principal, não ao InVision Studio, que é gratuito.

InVision é indiscutivelmente a ferramenta de UX mais poderosa até o momento. Permite Esboço e Designers de Photoshop para importar suas telas estáticas e transformá-las em protótipos dinâmicos e partes interessadas para oferecer feedback construtivo que pode então ser convertido em tarefas acionáveis ​​e gerenciáveis. Combine isso com seus testes de usuário e tecnologia de quadro branco colaborativo, e o aplicativo da web InVision se torna uma ferramenta inestimável e impressionante.

Em 2017, a InVision lançou novos recursos de transferência de design, e agora em 2018, a InVision se tornou uma solução completa e multifuncional ao apresentar sua própria ferramenta de design UX, Estúdio , que é gratuito e inclui recursos avançados de animação e prototipagem.

Para equipes que desejam uma caixa de ferramentas totalmente abastecida com uma assinatura, o InVision está aqui.

Framer / Estúdio Framer

Plataforma: macOS
Preço: US $ 12 / mês para usuários individuais ou US $ 250 / mês para equipes de três

Em termos de oferta, Framer é a ferramenta que mais se assemelha ao InVision, já que ambos combinam uma interface da web madura com uma ferramenta de design UX totalmente nova. Tudo se resume à preferência pessoal com esses dois, mas onde Framer é um pouco mais barato para indivíduos, InVision é claramente o irmão mais velho quando se trata de colaboração de design.

Figma

Plataforma: web, macOS e Windows
Preço: grátis para equipes iniciantes ou US $ 12 / mês

Figma se destacou do resto no início de seu desenvolvimento como a ferramenta líder para design multiplayer, permitindo que vários designers trabalhassem no mesmo arquivo de design ao mesmo tempo. Com a capacidade de criar designs responsivos e adicionar recursos de transferência, é impressionante como eles ofereceram esses recursos na web, macOS, e Versões do produto para Windows.

Se você gosta de um fluxo de trabalho de design energético e colaborativo, o Figma é para você.

Adobe XD

Plataforma: Windows e macOS
Preço: grátis para 1 protótipo ou $ 20,99 / mês para protótipos ilimitados

Quando o Sketch se tornou a ferramenta nº 1 para wireframing e design de interface, a Adobe quase não teve escolha a não ser admitir que o Photoshop nunca poderia ser a ferramenta de design de IU que os designers precisavam. A Adobe decidiu disponibilizar o Adobe XD para usuários do Windows onde o Sketch não fez, e também incorporou a capacidade de criar protótipos de fluxos de usuários e inspecionar projetos, ajudando designers veteranos familiarizados com o ecossistema da Adobe a seguir um fluxo de trabalho familiar.

UXPin

Plataforma: web
Preço: a partir de US $ 8,10 / mês para um usuário, com outras opções para equipes

UXPin é uma plataforma completa de design de produto que oferece tudo, desde design, wireframing, prototipagem, colaboração, teste de usuário e transferência, tudo em um único aplicativo da web. A desvantagem é que UXPin é uma das ferramentas mais difíceis de usar devido ao número de recursos, interface desordenada e (às vezes) atraso de desempenho que geralmente assombra aplicativos da web volumosos. No entanto, as equipes empresariais que precisam de recursos impressionantes, como sistemas de design e a capacidade de tirar proveito de estruturas e tecnologias da web, como Bootstrap e Google Fonts, não devem ignorar isso muito rapidamente.

Ferramentas de Design + Prototipagem

Esboço

Plataforma: macOS
Preço: $ 99 / ano

O Photoshop entregou a coroa ao Sketch quando se tornou a principal ferramenta de design para wireframes e design de interface em 2015 , e a partir de 2017 eles ainda estão liderando o ataque. A abordagem inovadora do Sketch para o design de tela introduziu recursos inestimáveis, como pranchetas, símbolos e exportações, que inspirariam uma onda de novas ferramentas de design como Adobe XD, Framer Studio e InVision Studio. Esta ferramenta vetorial incrivelmente intuitiva (e leve) ajuda Designers de IU iterar muito mais rápido do que nunca.

No entanto, aqui está o 'mas' (e é um grande mas): Sketch não está disponível para Windows, e sua decisão de implementar ferramentas para designers de prototipagem tão tarde no jogo significa que seus concorrentes rapidamente conquistaram esse mercado, com o InVision sendo indiscutivelmente a ferramenta de prototipagem mais dinâmica disponível hoje. Mesmo que a funcionalidade do Sketch possa ser personalizada com um catálogo impressionante de plugins (incluindo integrações com Flinto, Zeplin, Marvel, Principle e até mesmo o próprio InVision), alguns designers podem favorecer uma experiência mais nativa com esses recursos prontamente disponíveis fora da caixa.

Resumindo, o Sketch é excelente para idealização e wireframing ou aqueles que não se importam em aumentar sua caixa de ferramentas para adicionar melhores ferramentas de prototipagem e colaboração.

Webflow

Plataforma: web
Preço: a variedade de opções destinado a indivíduos de um único local, vários locais e equipes

Webflow é um editor WYSIWYG para o designer moderno que deseja construir sites responsivos sem código, e até mesmo hospedá-los, tudo com uma única assinatura. O Webflow produz um código semântico limpo para que você não precise e oferece recursos robustos que permitem designers da web crie qualquer coisa, de sites estáticos a lojas de comércio eletrônico , onde até mesmo o conteúdo e o inventário são gerenciados no mesmo painel.

Princípio

Plataforma: macOS
Preço: $ 129 / ano

Embora mais uma ferramenta de prototipagem do que uma ferramenta de design, o aplicativo Principle é altamente cotado para designers que se concentram em protótipos de alta fidelidade e usa animação de linha do tempo para ajudar a projetar micro-interações avançadas onde Sketch e Adobe XD não. Se os recursos de design não são sofisticados o suficiente para suas necessidades, Principle integra-se ao Sketch.

Ferramentas de prototipagem (somente)

Flinto

Plataforma: macOS
Preço: $ 99 / ano

Flinto leva as transições e microinterações para o próximo nível com ferramentas de animação avançadas, incluindo molas e easings, rotação 3D, efeitos de rolagem e até permite que designers da moda exportem animações como vídeos, GIFs e fotos Dribbble.

Enquanto Flinto está focado exclusivamente em prototipagem de interações , funciona bem. Emparelhe com o Sketch para obter melhores resultados.

Origami

Plataforma: macOS
Preço: gratuito / código aberto

Origami é uma ferramenta de prototipagem de aplicativo desenvolvida pela equipe de design do Facebook. Embora seja semelhante ao Flinto (sem a etiqueta de preço), não é mantido tão frequentemente quanto ferramentas semelhantes, e sua abordagem baseada em lógica para projetar interações resulta em uma curva de aprendizado mais íngreme.

Para designers com orçamento limitado, o Origami vale bem a pena dar uma olhada.

Prototipagem + Ferramentas de Handoff de Design

Maravilha

Plataforma: web
Preço: $ 0-12 / mês para indivíduos ou $ 42-84 / mês para equipes

As equipes empresariais que requerem SSO e recursos de transferência devem pergunte diretamente .

Marvel é uma ferramenta de prototipagem online conhecida por ser uma das mais fáceis de dominar, no entanto, a desvantagem é que não é tão sofisticada quanto o InVision quando se trata de recursos de prototipagem dinâmica e requer integração com o Sketch para se tornar uma solução completa de design + prototipagem . Dito isso, ele se integra com Olhe para trás , trazendo o teste do usuário para a mesa e inclui recursos de transferência de design.

A Marvel também permite que equipes (mesmo não designers) escolham uma prancheta e ilustrem uma ideia de baixa fidelidade usando formas e texto, tornando-a ideal para design sprints (especialmente porque também permite que os usuários converter protótipos de papel para protótipos da Marvel de baixa fidelidade).

Design Handoff Tools (apenas)

Zeplin

Plataforma: web
Preço: grátis para um projeto, $ 17 / mês e $ 26 / mês para três e 12 projetos, respeitosamente

Para grandes organizações, a opção de US $ 7,65 / usuário / mês oferece permissões de usuário mais avançadas e a capacidade de copiar cores e estilos de texto entre projetos.

Zeplin tem consistentemente superado competidores Sympli e Avocode , onde recentemente adicionou integrações Adobe XD e Figma junto com suas integrações Sketch e Photoshop CC já existentes. Enquanto muitas ferramentas multifuncionais adicionaram transferência de design à sua lista de recursos, o Zeplin preenche o vazio para as ferramentas que ainda não o fizeram (Sketch, Photoshop) e aquelas que ainda estão experimentando recursos de transferência (Adobe XD, Figma).

Ferramentas de wireframing + prototipagem

Axure

Plataforma: Windows e macOS
Preço: $ 29/49/99 / usuário / mês para usuários Pro / Team / Enterprise, respectivamente

Compras únicas do Axure RP 8 também estão disponíveis a partir de $ 495.

O Axure foi desenvolvido especificamente para o design de wireframes e protótipos brutos e vem com recursos que tornam a criação de maquetes orientadas por dados, dinâmicas e adaptáveis ​​tão fácil que você vai esquecer que é uma ferramenta sem recursos de prototipagem UX de alta fidelidade. Para designers que se concentram exclusivamente em wireframes e prototipagem, Axure é a primeira escolha, usado por 87% das empresas Fortune 100.

Justinmind

Plataforma: Windows e macOS
Preço: $ 19 / usuário / mês ou $ 39 / usuário / mês para equipes empresariais

Justinmind não recebe amor o suficiente pelo que oferece, que é prototipagem UX avançada, colaboração, algumas ferramentas básicas de design e também mais de 500 widgets móveis e da web para wireframing. Wireframing não é algo em que muitos aplicativos de prototipagem concorrentes tenham se concentrado, tornando Justinmind uma das poucas ferramentas de UX que o faz.

Ferramentas de wireframing (apenas)

OmniGraffle

Plataforma: macOS
Preço: $ 100 ou $ 200 por um Para licença

OmniGraffle é uma ferramenta de wireframe com recursos de diagramação, útil para aplicativos e sites onde o fluxo do usuário ou a arquitetura de informações podem precisar de mais atenção. Como um aplicativo macOS nativo, a interface é muito amigável, tornando-se uma ferramenta de experiência do usuário fácil de dominar.

OmniGraffle tem um recurso muito útil: “estênceis”, que são componentes de design reutilizáveis ​​de arrastar e soltar prontos para usar em uma “biblioteca de estêncil” que os designers podem usar para construir wireframes, maquetes ou até mesmo designs visuais finais. Os usuários podem criar sua própria biblioteca, e também existem milhares de bibliotecas de stencil disponíveis na web para download, muitas delas gratuitas, economizando tempo e esforço.

Graffletopia é um dos maiores depositários de estêncil da web, contendo uma mistura de bibliotecas gratuitas e pagas. Com mais de 1.100 estênceis, Graffletopia tem estênceis para todos os usos - projetando aplicativos móveis, sites, diagramas de rede, fluxogramas e muito mais.

Balsamiq

Plataforma: web, macOS e Windows
Preço: a partir de US $ 90 / usuário / ano para acesso à nuvem ou US $ 89 para aplicativos de desktop

Balsamiq é o oposto de Justinmind, focando mais em wireframing do que em prototipagem. Seus elementos de interface do usuário integrados usam uma estética visual esboçada para encorajar o brainstorming e é exclusivamente voltada para gerentes de produto e desenvolvedores , bem como designers de wireframes , permitindo que equipes inteiras façam parte do processo de design desde o início.

Ferramentas de pesquisa e teste de UX

Olhe para trás

Plataforma: web
Preço: $ 49 / usuário / mês ou $ 99 / usuário / mês, dependendo dos recursos

Lookback apresenta o teste de usuário moderado ao vivo ao processo de design UX, permitindo que os designers gravem o rosto, a tela e a voz de qualquer pessoa no mundo. Para equipes que usam a Marvel como ferramenta de prototipagem, o Lookback se integra perfeitamente.

UserTesting

Plataforma: web
Preço: $ 49 / teste (mín. 15 testes), com opções empresariais disponíveis

UserTesting é semelhante ao Lookback em termos de recursos. Embora seja uma excelente ferramenta de teste de usuário autônoma com um enorme repertório de testadores de usuários experientes (com a Marvel, você precisa encontrar testadores de usuários por conta própria), o UserTesting se integra perfeitamente ao InVision também.

Eyequant

Plataforma: web
Preço: $ 499 / mês para indivíduos, $ 999 / mês para equipes de 10 (+ opções empresariais)

Eyequant usa aprendizado de máquina para ajudar as equipes a tomar melhores decisões de design e melhorar seus esforços de CRO. Seu alto preço pode dissuadir alguns clientes, mas aqueles que investem recebem treinamento sobre como simular usuários, analisar métricas, aproveitar ao máximo seus testes A / B e muito mais.

Hotjar

Plataforma: web
Preço: preço variável dependendo do número de visualizações de página diárias

O Hotjar torna mais fácil para as equipes otimizar as experiências do usuário, combinando o feedback do usuário com análises, mapas de calor, mapas de cliques, mapas de rolagem e gravações de visitantes. Onde mapas de calor e mapas de cliques ilustram onde os usuários estão movendo e clicando com o mouse respectivamente, mapas de rolagem indicam em que ponto os usuários podem estar perdendo o interesse.

Ovo louco

Plataforma: web
Preço: a partir de US $ 29 / mês por 20.000 visualizações de página

Semelhante ao Hotjar, Crazy Egg é usado para otimizar as experiências do usuário e as taxas de conversão por analisando o comportamento do usuário com mapas de calor e gravações de visitantes, embora Além disso inclui ferramentas de teste A / B fáceis de usar para ajudar a decifrar o que está e o que não está funcionando.

Oficina ideal

Plataforma: web
Preço: $ 166 / usuário / mês, com opções gratuitas e empresariais disponíveis

Optimal Workshop é um kit de ferramentas de pesquisa de usuário com foco em classificação de cartões, pesquisas, teste de árvore, teste de primeiro clique e descoberta de dados qualitativos.

Ferramentas analíticas

Google Analytics

Plataforma: web
Preço: livre

Embora o Google Analytics não tenha a interface mais inspiradora ou utilizável, ele fornece uma grande quantidade de dados para uma ferramenta gratuita, tornando-o um ponto de partida adequado para a pesquisa do usuário e aquisição de insights que você pode querer explorar mais em outra ferramenta .

Mixpanel

Plataforma: web
Preço: a partir de US $ 99 por 1 milhão de pontos de dados, com opções gratuitas e empresariais disponíveis

O Mixpanel permite que qualquer pessoa, de executivos a simples colaboradores, use dados para tomar decisões mais estratégicas. Com uma interface mais amigável em comparação com o Google Analytics, os designers podem achar que é mais fácil analisar as jornadas do usuário, aprender como os usuários se envolvem com o produto e decifrar análises comportamentais complexas com o Mixpanel.

Ame

Plataforma: web
Preço: o preço é determinado com base no número de usuários e recursos necessários

Pendo, com uma interface muito mais simples em comparação com a maioria das outras ferramentas de análise, permite que os designers rastreiem o NPS ( pontuação do promotor líquido ), segmentar usuários, otimizar funis e jornadas de usuários e tudo o mais que você esperaria de uma das principais ferramentas de análise de sites. Além disso, os designers podem fornecer anúncios direcionados, ajuda contextual e experiências personalizadas com base nos dados que foram rastreados.

Conclusão

Escolha das ferramentas de UX certas requer consideração cuidadosa. Precisamos levar em consideração os custos, o nível necessário de colaboração com outros designers e partes interessadas, a plataforma e quaisquer outras ferramentas que possamos precisar integrar a fim de manter um fluxo de trabalho contínuo. Depois de restringir suas opções, inscreva-se para as avaliações gratuitas e considere fazer uma avaliação de cinco dias design sprint para testar as águas.

Compreender o básico

O que é InVision Enterprise?

InVision Enterprise é um plano de assinatura que inclui todos os recursos do InVision, além de segurança de nível empresarial, integração SSO (single sign-on) e autenticação de dois fatores, bem como projetos e armazenamento ilimitados e acesso antecipado a novos recursos.

O que é um wireframe em web design?

Um wireframe de web design é uma maquete esquelética, muitas vezes em preto e branco, de um site que é usada para demonstrar o layout que está avançando com o design visual.

O que é o aplicativo Zeplin?

Zeplin é um aplicativo de transferência de design usado para entregar designs concluídos aos desenvolvedores.

O que é InVision?

InVision é uma suíte de design tudo-em-um para equipes de produto que procuram colaborar em protótipos, o que inclui seu aplicativo independente, o InVision Studio.

Para que são usadas as maquetes do Balsamiq?

Maquetes Balsamiq são usadas para demonstrar wireframes para os interessados ​​e receber feedback sobre esses wireframes.