fbpx

Como o layout de aplicativos influencia o usuário e por que você deveria testá-lo

O processo de criação e usabilidade de aplicativos para dispositivos móveis envolve muitos desafios. No processo, os detalhes são cruciais: botões de ação com contraste maior, cores, ícones e imagens. Todos os elementos de design são fundamentais se o seu objetivo for (e acreditamos que seja) satisfazer o usuário.

Existem vários elementos que você precisa prestar atenção para seu aplicativo cumprir seu papel e não confundir o consumidor. Um layout de aplicativos mobile ideal é fluido e garante boa usabilidade e experiência ao usuário. Isso significa que a aplicação deve funcionar a qualquer momento, em qualquer dispositivo móvel e para qualquer pessoa.

Os elementos que mais impactam o usuário

Muitos elementos de uma aplicação influenciam a boa ou má experiência do usuário. Abaixo, separamos alguns elementos relacionados ao layout, que irão ajudar seu usuário a se engajar e não dar uma nota negativa para o seu app:

Cores

Cores são fundamentais em qualquer trabalho que envolva design. Você pode usá-las para direcionar e incentivar ações (cores quentes, por exemplo, como vermelho e laranja) ou mesmo se quiser passar uma imagem de classe e qualidade (azul e verde).

Fora isso, as cores são parte importante da experiência do usuário. Se você não sabe muito sobre combinações de cores, pesquise no Adobe Kuler, ferramenta que combina cores automaticamente a partir de uma cor base.

No exemplo abaixo, para o aplicativo de monitoramento de ciclo menstrual, com público-alvo majoritariamente feminino, a empresa fugiu das cores convencionais  e acertou em apostar na mistura de cores quentes e frias.

Layout de Aplicativo CiclosLayout de aplicativos: icones

Ícones

Os ícones são muito importantes porque indicam ações e por isso visam tornar as seções e funções dentro do aplicativo mais claras para os usuários. A medida padrão geralmente é de 11×11 pixels, mas isso varia de acordo com a plataforma para a qual o app será desenvolvido. Por isso, recomendamos sempre testar a medida para saber se é a ideal.

No aplicativo ao lado, os ícones são parte fundamental da página inicial. A propósito, eles formam a “home” da aplicação. Com um clique, o usuário tem acesso à categoria que deseja.

Fontes

Como os smartphones têm as telas bem menores que computadores, verificar se o tamanho das fontes e grafias são de fácil leitura é ainda mais importante. Você precisa encontrar um equilíbrio que possibilite o usuário navegar pelo aplicativo confortavelmente, sem precisar se aproximar muito da tela ou utilizar o zoom.

Ousada, a tipografia do aplicativo se deve a um fator: a persona. O aplicativo é feito para designers, por isso a escolha de fontes fora do convencional foi certeira.

Layout de aplicativos: fontes

Padrões de interação

Arrastar, clicar, rolar e selecionar. Essas ações já são esperadas por usuários, por isso, escolha sempre padrões de interação conhecidos, ou seja, ações às quais ele já está familiarizado. Tente com cuidado algo muito novo ou diferente do usual porque pode confundir o usuário e fazer com que ele abandone seu aplicativo.

Ao utilizar menus laterais, por exemplo, que ocupam apenas uma parte da tela, você pode prever a ação de arrastar, bem conhecida dos usuários. No exemplo abaixo, a rolagem na vertical para uma revista, com matérias destacadas e a disposição das imagens ajudam na navegação.

Interação Natgeo

Outra dica que já aprofundamos aqui no blog é tomar cuidado com o menu de hambúrguer!

Número de cliques

flightAs pessoas querem fazer o que precisam rapidamente. Por isso, até o número de cliques em um aplicativo para chegar a alguma tela é importante. Lembre-se da regra dos 3 cliques: toda ação deve ser feita em, no máximo, três cliques.

O que isso tem a ver com o layout? Subtelas aumentam o número de cliques, por isso você deve pensar em criar novas seções quando o processo se tornar muito trabalhoso. Veja o exemplo abaixo:

O que você espera de um aplicativo para buscar passagens aéreas? Facilidade. O aplicativo cumpre bem a função, exigindo poucos cliques para obter o resultado da busca.

Destaque e posicionamento dos botões de ação

A maioria da população é destra, e por essa razão os botões são dispostos no lado direito da tela. Imagine um botão de ação posicionado na esquerda. Nesse caso, o usuário destro teria que cruzar toda a tela com o polegar. Nada prático, correto? A dica aqui é fazer de tudo para facilitar o uso do smartphone com apenas uma das mãos. Além disso, o contraste do botão também pode ser utilizado para orientar o usuário, criando uma hierarquia de informações.

Botões de ação

Neste exemplo, a tela de início apresenta um botão vermelho enorme com a call to action também destacada. Para completar, a palavra “start” convida o usuário a começar a utilizar o aplicativo no momento em que é aberto.

4 bons exemplos de layout de aplicativosunnamed

#01 Toggl

O Toggl é um aplicativo para medir o tempo da realização de tarefas diversas. Dito isto, repare no posicionamento do tempo na tela e como é simples criar novas tarefas dentro do ambiente. O aplicativo cumpre o que promete e aposta em um design simples mas eficiente.

#02 Crossy Road

Esse aplicativo foi um dos vencedores do Apple Design Awards 2015. A desenvolvedora Hipster Whale conseguiu fazer um jogo que faz jus ao nome hipster mas que é muito viciante. O ambiente é divertido, bastante rápido e de fácil navegação. O trunfo está no uso de um design nada convencional para um jogo e na facilidade de entendimento de como a plataforma funciona.

Layout de game

#03 Taasky

Em meio a tantos aplicativos de organização de tarefas, o Taasky está se superando. A interface é super clean e fácil de usar. Pode fazer com que o aplicativo seja usado com mais frequência, já que tem uma interface intuitiva.

layout taasky

unnamed (2)#04 B&H Photo Audio

O B&H Photo Audio Pro é um dos cases de Material Design para Android. O Material Design é um conjunto de padrões de ícones, cores, animações, tipografia e hierarquias indicados pelo Google. O aplicativo móvel é de um e-commerce, mas se destaca por fotos de alta resolução e carregamento rápido, comentários de profissionais sobre os produtos e claro, muitas informações relevantes sobre o que é vendido.

O layout torna fácil a navegação pelo site, a pesquisa de produtos, o estado do estoque, etc. Certamente, é um ótimo exemplo de layout para aplicativos de e-commerce.

A importância de testar o layout de aplicativos

Se o sucesso do seu produto depende de ações ou envolvimento dos usuários, é sua obrigação prevenir erros ou falhas que dificultem a utilização do mesmo. Por causa disso, testar o layout de aplicativos é imprescindível, já que reduz custos de desenvolvimento e têm um impacto direto na melhoria de usabilidade do aplicativo e da experiência do usuário. Como consequência disso, a taxa de adoção, conversão e retenção também irão aumentar.

Formas de testar o layout

Mesmo que os testes de layout apresentem um custo maior em curto prazo — envolvem recrutamento, tempo, deslocamento, contratação de uma empresa, etc — eles apresentam um retrato mais realista da usabilidade do aplicativo. Se você quer ter um panorama mais realista da usabilidade e layout de aplicativos, para torná-lo mais rápido e dinâmico, há duas formas principais de testá-lo:

Inspeção de interface

Neste teste, um especialista em usabilidade faz uma inspeção da interface completa da aplicação, avaliando-a de acordo com a conformidade e diagnosticando se o fluxo permite atingir os objetivos do projeto sem obstáculos.

Interação com usuário

As interações são testadas em todas as interfaces do sistema. São testadas tarefas distintas que a aplicação se propõe a realizar em contextos específicos. Assim, é possível avaliar se estão funcionando corretamente e atendendo às regras de negócio.

Por fim, testar o layout de aplicativos vai ajudar sua equipe a chegar em um produto final leve, rápido e dinâmico.

Conheça outros módulos de teste de aplicação ou fale com um de nossos especialistas para tirar suas dúvidas.