UX Design

Vantagens e desvantagens de labels flutuantes em formulários

Olá, Web Developers!

Há um bom tempo que temos visto formulários com labels flutuantes em vários lugares. A ideia era de trazer algo diferente e melhorar a experiência do usuário. Será que melhorou mesmo?

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

Nesse artigo eu vou listar as vantagens e as desvantagens que considero pertinentes.

Vantagens

Algumas das vantagens de utilizá-los:

Os formulários ficam menores:

Nós enxergamos os elementos no navegador por blocos.
Na imagem abaixo, enxergamos quatro blocos: dois labels e dois inputs.

Já na imagem abaixo, percebemos apenas dois blocos. Isso passa a impressão de um formulário menor.

Já foram realizados testes com esses estilos de formulários e, no segundo estilo, os usuários realmente pensaram estar preenchendo um formulário com metade do número de campos.

Sem problemas com alinhamento:

Essa não é uma vantagem tão grande. Qualquer CSS bem feito resolve.

Mas, realmente, não precisamos ficar nos preocupando com o alinhamento dos elementos e labels, o que já dá uma pequena facilitada.

Separação entre campos:

Quando temos campos como os da imagem abaixo, precisamos dar um espaço em branco ou separar com uma linha para que o usuário saiba qual campo determinado label pertence.

Nesta imagem sabemos que senha pertence ao campo de baixo porque temos apenas dois campos. Agora, já imaginou um formulário maior? É preciso deixar um espaço bom para podermos perceber melhor a separação e agrupamento de elementos.

Já na imagem abaixo, não precisamos nos preocupar com separação e agrupamento. Mesmo que a gente diminua os espaços entre os inputs, saberemos qual input cada label pertence.

Leitura mais rápida:

Como o label estará dentro dos inputs, e também poderemos diminuir os espaços em branco, como visto no item anterior, a leitura será mais rápida. Isso porque os olhos do usuário precisam passar pelas linhas em branco e pensar na ligação entre elementos quando eles estão separados.

Desvantagens

Agora eu listarei algumas desvantagens.

Nada de labels compridos!

Você tem que pensar bem no que escrever no label para que ele seja bem curto e direto. Do contrário, seu texto pode acabar sendo cortado em dispositivos com telas menores.

No exemplo acima, ao invés de Há quanto tempo trabalha com desenvolvimento?, poderíamos escrever algo como Tempo de experiência, mas nem sempre vamos conseguir deixar claro o que queremos.

Campos preenchidos podem dificultar a leitura:

Quando preenchemos um campo, o label diminui de tamanho, dando espaço ao valor preenchido.

Dependendo do novo tamanho da fonte do label, pode dificultar a leitura, caso o usuário queira revisar os campos do formulário. Lembre-se que podemos ter usuário com problemas de visão usando dispositivos com telas pequenas.

Desenvolvedor PHP Júnior
Formação: Desenvolvedor PHP Júnior
Nesta formação você aprenderá todos os fundamentos necessário para iniciar do modo correto com a linguagem PHP, uma das mais utilizadas no mercado. Além dos conceitos de base, você também conhecerá as características e a sintaxe da linguagem de forma prática.
CONHEÇA A FORMAÇÃO

Labels dentro do input podem ser confundidos com campos preenchidos:

Sim, isso é um problema que também pode acontecer com placeholders. O usuário pode simplesmente passar o olho e pensar que aquele campo já está preenchido.

Mesmo que a gente os deixe com uma cor diferente, é sempre bom considerar essa possibilidade, ademais, diferentes usuários, diferentes formas de visualizar e entender o contexto.

Sem consistência de localização:

Não temos uma consistência de localização dos labels quando precisamos de campos que não sejam de texto, como combo boxes, radio buttons e checkboxes.

Concluindo

E você? Usa em seus formulários? É a favor ou contra?
Compartilhe com a gente aí nos comentários! 🙂

Você sabe como combinar cores?

Olá, Web Developers!

Vamos falar de um assunto que assusta muitos programadores: combinação de cores. Alguns até “fogem” quando o assunto é criatividade, quando falamos da criação de um layout ou simplesmente quando se tem a necessidade de pensar em combinar cores.

Eu já vi casos em que o próprio programador teve que planejar o esquema de cores. Naturalmente o pessoal de front-end costuma ter uma noção melhor em relação aos de back-end nessa matéria, por terem mais contato com designers e arquitetos de informação.

Muitos acham que isso vem de um dom, uma habilidade especial quase que mutante nas pessoas que trabalham com isso. Mas acredite: qualquer coisa pode ser aprendida, e listarei aqui as técnicas utilizadas para se combinar cores. Depois disso você verá que é muito fácil.

Motion 5 - Criação de Templates, Efeitos e Transições para FCPX
Curso de Motion 5 - Criação de Templates, Efeitos e Transições para FCPX
CONHEÇA O CURSO

Roda de cores

Roda de cores

Esta é a roda de cores ou círculo cromático, e vocês agora serão amigos! Ela é quem vai te ajudar a saber se uma cor combina com outra ou não.

Agora, tudo o que precisamos para selecionar cores é de certas formas geométricas. Sim, nós veremos como a matemática está relacionada com a harmonia na combinação das cores.

Há várias formas de se combinar cores, e tudo vai depender do que você precisa. Então vamos lá!

Monocromáticas

Roda de Cores

Essa é a mais fácil, pois a gente apenas seleciona uma única cor e alteramos seus tons. Mesmo sendo a regra mais fácil, é uma das mais difíceis de se trabalhar. Como é uma única cor, se não utilizada corretamente pode acabar cansando facilmente.

Por isso é mais recomendada para telas passageiras.

Roda de Cores

Análogas

Roda de Cores

São selecionadas três cores, uma ao lado da outra. Possui pouco contraste, já que são cores muito próximas. Podemos selecionar quatro cores, e então chamaremos de análogas compostas.

As cores análogas são frequentemente encontradas na natureza, o que nos passa uma sensação de harmonia quando encontramos sites com cores baseadas nessa regra.

Roda de Cores

Complementares

Roda de Cores

Cores complementares são aquelas que estão de lados opostos. Por causa disso, causam um grande contraste, já que teremos uma cor quente e uma fria.

Roda de Cores

Tríades ou trio harmônico

Roda de Cores

São cores que formam um triângulo equilátero. Você também pode utilizar outros tipos de triângulos e até mesmo retângulos, mas aí já deixa de se chamar tríade.

As cores dessa regra possuem uma harmonia bem contrastante e é sempre recomendado dar destaque a apenas uma das cores selecionadas, mantendo as demais apenas como cores secundárias.

Roda de Cores

Concluindo

Vimos então que há técnicas para se combinar cores. Não pense que é um dom que apenas algumas pessoas possuem.

Os exemplos mostrados apenas ilustram a combinação das cores. Na maioria das vezes as cores selecionadas serão usadas apenas como referência, como você pode notar nas fotos de exemplos. Apenas selecionamos as cores, mas as utilizadas possuem variações na saturação, matiz e sombra.

Há muitas outras formas de se combinar cores. As listadas acima são as mais comuns. E, claro, é importante também saber a teoria das cores para não sair criando paletas de cores que não fazem sentido para determinado cenário, por exemplo: uma festa infantil só com tons de cinza ou uma casa de repouso com vermelhos bem vivos.

Caso queira criar combinações, recomendo o Adobe Color.

Ele roda no navegador e não precisa de login. Lá você poderá escolher a regra de cores entre Análogo, Monocromático, Tríade, Complementar, Composto, Sombras e Personalizado.

Também há a possibilidade de você salvar a sua paleta de cores e navegar pelas criadas pelos outros usuários. Outra funcionalidade legal é a criação de uma paleta a partir de uma imagem.

E aí, o que achou? Já sabia combinar cores? Se não sabia, achou fácil? Compartilhe com a gente aí nos comentários!

Blender 3D V2.78 - Primeiros Passos
Curso de Blender 3D V2.78 - Primeiros Passos
CONHEÇA O CURSO

Avaliação Heurística: O que é e como conduzir

A Avaliação Heurística (originalmente proposta por Nielsen e Molich em 1990) é uma técnica de inspeção que ajuda a identificar problemas de usabilidade em uma interface. Em outras palavras, uma avaliação heurística pode ser definida como uma revisão da sua interface, levando em consideração os aspectos da experiência do usuário.

Nessa inspeção, especialistas em usabilidade examinam e julgam se cada elemento da interface está de acordo com os princípios de usabilidade (heurísticas).

Vantagens e desvantagens da Avaliação Heurística

Uma avaliação heurística não deve substituir o teste de usabilidade. Embora as heurísticas referem-se a critérios que afetam a usabilidade do seu site, os problemas identificados em uma avaliação heurística são diferentes daqueles encontrados em um teste de usabilidade.

Vantagens
  • Fornece um feedback rápido e é relativamente barato.
  • Pode ser feita em diversas fases do projeto.
  • Pode ser utilizado em conjunto com outras metodologias de testes de usabilidade.
Desvantagens
  • Requer conhecimento e experiência para aplicar a heurística de uma forma eficaz
  • É recomendável utilizar vários especialistas (o número recomendado é de 3 a 5 profissionais) para conduzir a avaliação heurística
  • Problemas de usabilidade mais graves podem passar despercebidos.

Como conduzir?

A realização de uma avaliação heurística pode ser dividida em três fases: planejamento, execução e revisão.

1. Planejamento

Você deve ter um objetivo claro do que você espera com sua avaliação e definir esses objetivos antes de iniciá-la. Nesta fase é importante entender exatamente o que precisa ser avaliado. Também é essencial que você saiba quem são seus usuários, suas necessidades, motivações e comportamentos, e conduzir a avaliação heurística na perspectiva desses usuários.

2. Execução

Defina uma lista de heurísticas para utilizar na avaliação. Existem vários modelos que podem ser seguidos, entre eles, o mais conhecido são as 10 heurísticas de Nielsen e Molich.

Após definir as heurísticas, cada especialista analisa individualmente a interface, indicando em cada problema encontrado a heurística violada, o local do erro e a gravidade do problema. Jeff Sauro elaborou um excelente artigo explicando as classificações de gravidade que podem ser utilizados para priorizar os problemas de usabilidade.

3. Revisão

Nesta fase, cada especialista gera um relatório apresentável da sua avaliação e compartilha com o restante do time. Você pode utilizar screenshots ou gravações de vídeos para que o time analise os problemas levantados sem a necessidade de acessar a aplicação que está sendo avaliada.

Conclusão

Avaliação heurística é uma ótima maneira de identificar problemas de usabilidade em seu produto gastando menos tempo e dinheiro do que realizando testes de usabilidade. Quando bem conduzida e com objetivos claros, os resultados valem a pena.

Uma dica é utilizar o UX Check, uma extensão para o Chrome que facilita identificar os problemas de usabilidade em uma interface de uma forma rápida e fácil. Com ela você seleciona no próprio navegador os elementos que não seguem as heurísticas, cria anotações de cada problema e automaticamente um screenshot é gerado. No final, você pode exportar tudo para um .docx para que você possa compartilhá-lo com sua equipe.

Referências

10 Usability Heuristics for User Interface Design – Nielsen Norman Group
How to Conduct a Heuristic Evaluation – Interaction Design Foundation

Hierarquia visual em aplicações web

Ao desenhar uma interface, é importante priorizar os elementos principais e estabelecer uma hierarquia visual sempre buscando responder as questões iniciais que um usuário possui ao acessar a sua aplicação. Não o faça pensar, tente deixar claro: onde está, o que pode fazer e onde pode ir. Caso contrário, há uma grande possibilidade que esse usuário abandone e deixe de usá-la, aumentando o que chamamos de “taxa de rejeição”.

Por que ela é importante?

Em seu artigo Communicating with Visual Hierarchy, Luke Wroblewski, diretor de produtos da Google, explica que a apresentação visual de uma interface é essencial para:

  • Informar aos usuários – A interface deve guiar o usuário de uma ação para outra e estabelecer relacionamento entre elas.

  • Deixar claro a organização – Manter a consistência dos elementos da sua aplicação

  • Comunicar efetivamente a sua marca para sua audiência – Criando um impacto emocional positivo e fornecendo ao seu usuário uma experiência agradável.

Fatores que influenciam na hierarquia visual

A maneira que processamos as informações é afetada por alguns fatores que contribuem para que priorizemos determinados elementos. Alguns desses fatores incluem:

  • Tamanho – Uma regra simples e direta: quanto maior o elemento, maior a chance de atrair a atenção do usuário.

  • Cor – As cores brilhantes são mais propensas a chamar a atenção do que tons monótonos. Por exemplo, todos nós já utilizamos um marca-texto para destacar pontos importantes de um texto. O amarelo é mais rico e brilhante do que o branco, então ele se destaca. Depois das cores brilhantes, vem as cores escuras, e na parte inferior da hierarquia das cores, os tons de cinza.

  • Contraste – Tão importante quanto as cores, o contraste ajuda a destacar os elementos mais importantes da sua aplicação.

  • Repetição – Repetir estilos pode dar a impressão para o usuário que o conteúdo é relativo. Por exemplo, destacando esta palavra , a forma que o cérebro processa e interpreta a palavra será diferente comparada com o restante do conteúdo.

  • Proximidade – Elementos similares devem estar próximos um do outro. Com referência aos princípios da Gestalt, nosso cérebro tende a agrupar mais fácil as formas que estão próximas entre si.

  • Espaço em branco – Conhecido também como espaço negativo, o uso do espaço em branco ajuda a agrupar diferentes seções de uma aplicação e facilitar a legibilidade do conteúdo.

Alguns padrões utilizados

Existem dois formatos que podemos utilizar quando desenhamos e estruturamos os elementos de uma aplicação web. Os formatos abaixo são baseados nos movimentos dos nossos olhos e podem ser aplicados dentro do contexto da cultura ocidental (leitura da esquerda para direita)

Formato “F”

Com o formato “F”, o usuário começa buscando informações ou palavras-chaves pelo topo, quando é encontrado algo de interesse, começa-se a leitura normalmente, formando uma linha horizontal. O resultado final é algo parecido com a letra “F” ou “E” como visto na imagem acima.

Formato “Z”

É possível ver esse formato aplicado na maioria das aplicações web. O formato “Z” é bastante utilizado para interfaces onde a simplicidade é a prioridade e o call to action a principal tarefa da tela. Para aplicações com conteúdo complexo, pode não funcionar tão bem quanto o formato “F”, por outro lado pode ajudar a aumentar a taxa de conversão da sua Landing Page.

Conclusão

É importante entender como a sua audiência faz a leitura das informações antes de adotar um padrão de hierarquia. Considere também uma mistura dos itens mencionados no post para chegar a uma solução ideal para o seu negócio. Uma boa hierarquia visual irá diminuir o processo cognitivo dos usuários e destacar os pontos mais importantes para que concluam suas tarefas de uma forma mais eficaz.

Referências

Visual Hierarchy – Interaction Design Foundation

Communicating with Visual Hierarchy – Luke Wroblewski

Personas em UX

Personas são personagens fictícios criados para representar os diferentes tipos de usuários que podem usar um site, marca ou produto.

Diferente de Personas de Marketing que são mais focadas em informações demográficas, canais de distribuição e comportamento de compra, User personas ou Personas de Design são focadas em identificar padrões de comportamento e entender por que, como e em qual contexto seus usuários estão interagindo com o seu produto/serviço. O objetivo dela é facilitar na identificação dos usuários e compartilhar essas informações com todos os envolvidos no projeto, e também auxiliar em tomada de decisões quando for implementar uma funcionalidade específica ao seu projeto.

Existem 2 tipos de personas que são úteis quando tratamos de UX:

  • Proto-Persona – é uma persona criada quando não há muitos recursos disponíveis para realizar pesquisa com usuários. Criada simplesmente com as informações que a empresa já possui, ela acaba sendo uma solução temporária, necessitando validar com usuários reais posteriormente.

  • User Persona – é um tipo de persona mais completa, criada através de pesquisas quantitativas/qualitativas e ferramentas de Web Analytics;

Elementos de uma Persona

Crie um ou mais personagens que representem o seu usuário, adicione também uma foto para torná-la mais real. Abaixo, alguns exemplos de informações que são incluídas ao persona:

  • Informações demográficas (idade, educação, etnia, status da família, …)
  • Objetivos e tarefas que estão tentando completar ao utilizar seu produto/serviço.
  • Uma citação que resume o que mais importa para o usuário em relação ao seu produto/serviço.
  • Seu ambiente tecnológico. Quais dispositivos o usuário utiliza no seu dia a dia? Quais softwares e aplicativos?

Como criar?

Há várias maneiras de criar personas, mas um processo bem comum seria:

  • Reúna um grupo de potenciais usuários e faça entrevista ou analise seus comportamentos.
  • Procure padrões de comportamento, respostas, ações e agrupe as pessoas que exibem o mesmo padrão.
  • Construa sua persona baseando-se em estereótipos , mas lembre-se de acrescentar detalhes de contexto, comportamentos, necessidades, etc…
  • Compartilhe a persona criada com a equipe para colher feedback e faça alterações caso necessário.
  • Defina se a persona criada é primária, secundária ou complementar.
  • Sempre que possível, atualize suas personas. O seu usuário de hoje pode não ser o mesmo daqui a algum um tempo.

Conclusão

O tipo de personas que você deve criar depende muito dos objetivos e restrições do projeto. O mais importante é que você dedique tempo para aprender sobre seus usuários. Sem as personas criadas, você corre o risco de tomar decisões baseadas em deduções ou por alguma influência individual da sua equipe de projeto.

Referências

Persona (User Experience) – Wikipédia
Personas – Usability.gov

Três leis para melhorar a usabilidade da sua aplicação

As leis aqui abordadas podem parecer óbvias mas, muitas vezes, esquecemos de aplicá-las durante o processo de design ou simplesmente precisamos justificar nossas decisões de design para todos os envolvidos no projeto.

Existem várias pesquisas para cada lei descrita abaixo mas, para o propósito deste post, daremos uma breve introdução e alguns exemplos de como elas podem ser aplicadas para melhorar a usabilidade do seu produto/serviço.

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

1. Lei de Hick

A lei de Hick tem sido aplicada dentro da área de IHC (Interação Humano-Computador) com a simples ideia de que quanto mais opções de escolha forem apresentadas aos seus usuários, mais tempo levarão para chegarem a uma decisão.

Lei de Hick

Como ela pode ser aplicada?

Categorizando escolhas – Imagine um menu de navegação que oferecesse acesso direto para cada página em seu site, os usuários levariam um bom tempo até encontrarem a opção desejada. Agrupando as escolhas em categorias, você pode ocultar as escolhas e exibi-las apenas quando houver uma interação do usuário. Um elemento de interface bem conhecido que utilizamos para este fim é o Dropdown.

Para aplicações com fluxo de navegação complexo, existe uma técnica chamada Card sorting que pode ser útil para definir melhor a taxonomia (rotulação) das categorias e como elas podem ser agrupadas de acordo com seus usuários.

Redução de complexidade – Se a sua aplicação tem um processo complexo, você pode usar a Lei de Hick a seu favor mostrando-o por etapas, tornando-o mais fácil e amigável para os seus usuários.
Lei de Hick
Em cada etapa, lembre-se de deixar claro para os usuários onde eles estão, onde podem ir e onde já estiveram.

2. Lei de Fitts

Criada pelo psicólogo norte-americano Paul Fitts em 1952, é uma lei que prevê o tempo necessário para mover-se de uma posição inicial até uma posição final com base no tamanho do alvo. Em IHC (Interação Humano-Computador), a lei é normalmente avaliada em interfaces gráficas utilizando um mouse ou outro tipo de ponteiro.

Lei de Fitts

Como ela pode ser aplicada?

Aumentando a área dos botões – Um elemento de interação deve ser visualmente diferente de elementos que não possuem nenhuma interação. E uma das formas de diferenciá-los é através do tamanho. Aumentando a área do botão, irá aumentar o nível de precisão para interagir com o elemento.

Utilizando os cantos da tela – Em desktop, os cantos da tela possuem um limite no qual você não consegue ultrapassar utilizando o mouse. O cursor do mouse “trava” quando você tenta ultrapassar esse limite. Sendo assim, os usuários precisam de menos precisão para interagir sobre essa área, pois eles podem simplesmente arrastar rapidamente o mouse para um dos cantos que o cursor do mouse não irá ultrapassar. É comum encontrarmos os principais elementos de interação de uma aplicação em uma dessas áreas, como é o caso do botão Iniciar do Windows ou o botão fechar dos navegadores.

3. Lei de Miller

Os estudos de George Miller apontam que a maioria das pessoas armazenam 7 (+-2) itens de informação na memória de curto prazo. Ou seja, a nossa memória de curto prazo comporta entre 5 a 9 itens.

Como ela pode ser aplicada?

Se uma tarefa tiver uma sequência definida de passos, você deve guiar o usuário utilizando um passo a passo ou algo semelhante. Não force o usuário a memorizar uma série de comandos ou como navegar várias telas para concluir a tarefa.
Lei de Miller

Embora as teclas de atalho e linhas de comando muitas vezes poupam nosso tempo, não devemos usá-las como únicos meios de interação, pois eles exigem memorização e aprendizado. Se você deve contar com esses atalhos, forneça um guia de referência ou algum outro tipo de material de ajuda para os usuários.

Referências

Lei de Hick – Wikipédia
Fitts’s Law – Interaction Design Foundation
Miller’s Law – Wikipedia

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

Affordances: Desenhando interfaces intuitivas

A definição de Affordances foi originalmente proposta pelo psicólogo James Gibson em 1977 para denotar a qualidade de um objeto que permite ao indivíduo identificar suas funcionalidades através de seus atributos (forma, tamanho, peso, etc…) de forma intuitiva, sem explicação.

Por exemplo, quando olhamos para uma maçaneta de um carro, sabemos a sua principal funcionalidade sem nem “pensar”, não importando qual o modelo do carro ou se estamos vendo àquele tipo de maçaneta pela primeira vez.

Affordances em interfaces digitais

Não demorou muito para o termo ser utilizado nas disciplinas de IHC (Interação Humano-Computador) e Design de Interação. Em interfaces digitais, quando desenhamos os elementos de uma aplicação, muitas vezes adicionamos sombra, relevo e outros efeitos visuais, geralmente se baseando nos objetos que são utilizados no mundo real. Para entendermos um pouco mais, vamos abordar 4 tipos de affordances que são aplicados em interfaces digitais e o impacto que elas podem causar na usabilidade de uma aplicação.

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

1. Affordance explícito

É quando tornamos um elemento óbvio e claro das suas funcionalidades, indicando exatamente o que precisa ser feito.

Geralmente utilizado quando ainda não há um padrão definido de como podemos interagir com esse elemento.

2. Affordance padrão

São baseadas nas experiências anteriores e que são conhecidas para maioria dos usuários. Um clássico exemplo é o link sublinhado com a cor azul.

Padrões são úteis, pois somos capazes de reduzir a carga cognitiva dos usuários quando interagem com um determinado elemento.

Acessibilidade - Introdução
Curso de Acessibilidade - Introdução
CONHEÇA O CURSO

3. Affordance escondida

Neste tipo, o affordance não está disponível ou claro até que uma ação seja realizada pelo usuário. Por exemplo, um menu dropdown, onde você precisa passar o mouse ou clicar no menu para ver os itens de da lista.

Frequentemente utilizado para diminuir a complexidade visual de um design, exibindo apenas as informações relevantes em um determinado contexto.

4. Affordance metafórica

Utilizamos objetos do mundo real como metáforas em interfaces digitais. Ícones e símbolos são grandes exemplos: carrinho de compra, envelope, telefone, vídeo, câmera, impressora, etc…

Elas podem ajudar a comunicar ideias abstratas sem muitas instruções. Ao utilizá-las, certifique se a sua audiência irá entendê-la.

Concluindo

Entender o conceito de affordances é um dos primeiros passos para desenhar interfaces intuitivas. No seu próximo projeto, após conhecer a sua audiência e entender suas limitações, tente combinar os quatro tipos de affordances descritos acima para criar uma boa experiência do seu produto/serviço aos seus usuários.

Referências

Affordances – Interaction Design Foundation
O Design do Dia a Dia – Donald A. Norman

Prototipagem e suas armadilhas

Após entender os requisitos do negócio e passar por todas as etapas de pesquisa com usuários, chega o grande momento de desenvolver um protótipo.

Seja de baixa, média ou alta fidelidade, o objetivo do protótipo é facilitar o entendimento do produto e suas interações, validar questões técnicas e alinhar as ideias com todos os envolvidos. Contudo, é importante escolher o tipo certo de protótipo para as necessidades atuais do projeto.

Protótipos fazem parte do dia a dia da equipe de design, mas como podemos otimizar e maximizar a sua eficácia?

Neste post, vamos abordar algumas armadilhas que podemos encontrar durante o processo de prototipagem.

Foco na entrega, não no aprendizado

Focar na entrega do resultado final é importante, porém, mais importante do que isso é aprender algo durante esse processo. Ao coletar feedback e validar a ideia com usuários, somos capazes de aprender mais sobre seus respectivos comportamentos e entender melhor sobre o problema que estamos tentando resolver.

Focando no aprendizado, a chance de você criar um bom produto no final é bem maior.

Muita convergência, pouca divergência

Não raramente, selecionamos a primeira ideia brilhante que vem à mente e começamos a refiná-la. No processo de prototipagem, essa etapa de selecionar e refinar é conhecida como convergência.

Na etapa de divergência, a equipe não se contenta com uma única ideia/solução apresentada. Em vez disso, procuram outras abordagens para resolver o mesmo problema. Passando mais tempo nessa etapa, você entende melhor o problema, faz comparações das opções apresentadas e seleciona a melhor alternativa.

Processo de prototipagem sem iteração

No processo de prototipagem, um ciclo pode ser divido em 4 fases:

  • Planejamento:
    Qual o objetivo e o que queremos aprender com esse protótipo ou protótipos? Como sabemos se estamos chegando perto do design final?

  • Implementação: Desenvolvimento do protótipo ou protótipos.

  • Mensuração: Coletar dados e feedbacks de todos os envolvidos para demonstrar o resultado do protótipo.

  • Aprendizado: Analisar o ciclo e descobrir o que aprendemos de novo e quais questões somos capazes de responder na próxima iteração.

Passar por esse processo de iterar é essencial para sermos capazes de avaliar, propor melhorias e refinar o protótipo até chegar no design final.

O código do protótipo usado para o produto final

Dependendo de como você está desenvolvendo seu protótipo, nem sempre aproveitar o código é a melhor opção.

Quando estamos desenvolvendo um protótipo, geralmente não pensamos na qualidade, segurança e otimização do código. Focamos no que é mais importante naquele momento como a interação das telas, funcionalidades do sistema e na organização do conteúdo.

Aproveitar esse código provavelmente irá demandar mais tempo e esforço para organizar e dar manutenção futuramente. Na maioria dos casos é mais rápido e eficaz desenvolver um novo código para o seu produto final.

Concluindo

Cada protótipo é um novo aprendizado. Evitando algumas das armadilhas descritas acima, irá te ajudar a maximizar os resultados do seu protótipo com menos esforço.

E você? Já vivenciou alguma dessas situações? Conte-nos um pouco da sua experiência?

UX: A importância da experiência do usuário nos projetos

“A experiência do usuário (UX) engloba todos os aspectos da interação do usuário final com a empresa, seus serviços e seus produtos.” – Nielsen Norman Group

Uma definição simples mas que sintetiza todos os aspectos de UX.

UX não é somente interface (website, aplicativo, etc…), e sim toda a experiência que os usuários possuem ao utilizar o seu produto ou serviço. É desde o primeiro contato do usuário com a empresa até a relação pós-venda.

E as empresas cada vez mais estão percebendo que investir em UX pode trazer benefícios e um excelente retorno financeiro (ROI).

Veja abaixo alguns casos que provam a importância da experiência do usuário nos projetos:

  • Scroll infinito pode diminuir as taxas de abandono. O Time.com reduziu a taxa de abandono em 15% depois de implementar o scroll infinito. (Fonte)

  • A ESPN.com aumentou suas receitas em 35% depois de colher sugestões de seus usuários e implementá-las na sua homepage. (Fonte)

  • Escolher um determinado tom de azul resultou em lucro adicional de $80 milhões de dólares para o Bing. (Fonte)

  • Para cada $1 dólar investido em email marketing, a média de retorno é de $44,25. (Fonte)

  • 88% dos usuários alegam menos chance de retornar a um site depois de uma experiência negativa. (Fonte)

  • Sites com problemas de performance causam uma perda de $2.6 bilhões de dólares em vendas cada ano. ( Fonte )

  • O julgamento dos usuários sobre a credibilidade de um site é 75% baseado na sua qualidade estética. (Fonte)

  • As primeiras impressões são 94% relacionadas ao design. (Fonte)

  • 85% dos adultos acreditam que a versão mobile de um site deve ser tão bom ou melhor quanto a versão desktop. (Fonte)

  • 90% das pessoas usam uma variedade de telas sequencialmente. (Fonte)

  • Você tem 279,64% mais chances de escalar o Monte Everest do que clicar em um banner. (Fonte)

Concluindo

Em um mercado competitivo, projetar uma boa experiência acaba sendo fundamental para o sucesso de um produto ou serviço. Não investir em UX ou não considerar os usuários durante as etapas do projeto (Design centrado no usuário), implica em projetar algo com base em achismos, baseando-se somente nas necessidades do negócio.

Referências:

The definition of User Experience

13 mind-blowing statistics on user experience

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200