Seu aplicativo viverá e morrerá pelo seu design.

Acredite ou não, o design do aplicativo desempenha um grande papel em manter seus usuários por perto. Não importa necessariamente se é difícil de usar ou simplesmente feio, as pessoas decidirão que não vale o tempo ou esforço delas. Então, como você cria um design de aplicativo que seja atraente para seus usuários? Vamos nos aprofundar.

Entendendo o design de aplicativos

Um bom design de aplicativo leva em consideração uma variedade de fatores, mas deve sempre ser feito com uma abordagem "primeiro o usuário" – e definitivamente não pode ser seu último pensamento ao fazer um aplicativo. Também é importante manter em mente os princípios gerais de design e como eles se traduzirão para o espaço digital.

UI vs. UX

Interface do usuário (UI) e experiência do usuário (UX) são frequentemente confundidas como a mesma coisa. Embora andem de mãos dadas, são diferentes conceitualmente e na execução.

Design de interface do usuário é a aparência e a sensação do seu aplicativo, incluindo sua apresentação e interatividade.

Design de experiência do usuário é a parte técnica do seu aplicativo, ou a usabilidade e funcionalidade técnica.

Pense no seu aplicativo como um projeto de construção. Um designer de UX é como o arquiteto responsável pela estrutura e seus planos, que são semelhantes a wireframes. Um designer de UI é o designer de interiores da casa, escolhendo papel de parede e móveis como cores e fontes.

(Imagem cortesia do Medium)

UI/UX é semelhante à diferença entre desenvolvimento front-end e back-end. Esses dois componentes de design de aplicativos precisam trabalhar juntos para criar algo que pareça bom e funcione bem. Se a experiência do usuário não corresponder ao design, torna-se mais difícil para os usuários navegarem no seu aplicativo. Em resumo, você não quer que o caminho menos percorrido seja o caminho que você pretendia que seus usuários seguissem.

Sistemas de design de aplicativos

Existem dois principais sistemas de design: Diretrizes de Interface Humana no iOS e Material no Android. Estas são diretrizes de design específicas para cada sistema operacional que contêm princípios e padrões para elementos comumente usados, como cabeçalhos, folhas inferiores, cartões, etc. Utilizar um sistema de design pode tornar o processo de atualização do seu aplicativo um pouco mais suave.

Embora o software de design de aplicativos garanta desempenho, eles também podem ser flexíveis. Eles são tipicamente ligeiramente ajustados, ou em alguns casos totalmente personalizados, pelo designer. Essas diretrizes permitem que as equipes trabalhem de forma mais inteligente, mesmo entre departamentos.

(Imagem cortesia do Airbnb)

O Airbnb usa um sistema de linguagem de design para se comunicar melhor de forma cruzada, usando um vocabulário compartilhado entre design, engenharia e outros departamentos. É essencialmente o dicionário de design do seu aplicativo, além de imagens.

5 dicas de design de aplicativos

Para tornar seu aplicativo mais amigável, seus designs de UI e UX precisam trabalhar juntos perfeitamente.

1. Não drene a bateria

Se o seu aplicativo consome muita bateria, seus usuários são menos propensos a abri-lo. O brilho da tela e a cor da tela são os maiores fatores no consumo de bateria móvel, juntamente com serviços em segundo plano como localização.

O Google realmente admite estar errado. Diga isso de novo? A iniciativa Material Design do Google incentiva os designers a usarem branco como sua cor principal para aplicativos.

(Imagem cortesia do Google)

Aplicativos que exigem muito tempo de tela, como o YouTube, começaram a lançar o "modo escuro" para reduzir o uso da bateria. Segundo o Google, quando usado no brilho máximo em seu smartphone Pixel, o YouTube no modo escuro usou 43% menos energia do que o normal.

2. Navegação simples vence sempre

Você não deve tentar reinventar a roda. Tente usar sequências padrão para seu menu de navegação, como a barra de abas do iOS ou a gaveta de navegação do Android. Os usuários estão familiarizados com esses padrões comuns, então seu aplicativo será mais intuitivo para eles.

É importante que o menu de navegação do seu aplicativo esteja sempre visível e não pule enquanto o usuário se move pelo aplicativo. Se você optar por usar ícones na barra de navegação, certifique-se de que seu propósito seja claro para o usuário. Você deve priorizar certos recursos sobre outros em sua navegação. Se necessário, crie um menu primário, secundário e até terciário.

Este conceito usa um menu de navegação reduzido, apenas uma seta para representar um comando "voltar" e uma lupa que significa "pesquisar". Esses dois símbolos nunca se movem enquanto você se move pelo aplicativo.

(Imagem cortesia de A. Salomon)

Este padrão de navegação de aplicativo também aproveita alguns gestos comuns, como deslizar da esquerda para a direita para classificar os vários tópicos de notícias.

3. Escolha cores e fontes sabiamente

As cores são importantes tanto para o design de UX quanto de UI. Você deve sacrificar seu visual branco limpo para economizar bateria? Quantas cores são muitas? Pense na sua identidade de marca ao tomar essas decisões difíceis de design.

Por exemplo, cores de alto contraste podem fazer sua interface de usuário "se destacar" mais do que se você usasse cores semelhantes. Mas há mais na escolha de cores do que apenas a aparência. Pense na legibilidade de fontes e cores.

Você sabia que quase 5% da população global experimenta daltonismo? Você tem que pensar na função das cores ao projetar seu aplicativo.

(Imagem cortesia da Smashing Magazine)

Obviamente, verde significa ir. Mas sem esses símbolos ao lado dos campos de formulário, um usuário daltônico não saberia qual entrada está criando o erro.

4. O peso visual faz a diferença

É necessário que você antecipe as necessidades dos seus usuários sem antecipar suas ações. Dê rapidamente aos seus usuários as informações que eles estão procurando usando pesos variados para diferentes seções. Pense em manchetes e corpo de texto – o peso desses dois elementos deve refletir seu nível de importância.

O principal objetivo do aplicativo Watering Tracker é informar os usuários quando é hora de regar suas plantas. As informações mais vitais têm o maior peso visual.

(Imagem cortesia da Tubik)

O que chama sua atenção? Embora o aplicativo forneça aos usuários uma tonelada de outras informações sobre a saúde da planta, o usuário pode ver rapidamente que ela precisa ser regada amanhã.

5. Consistência é fundamental

O design do seu aplicativo deve ser consistente em toda a propriedade, visual e funcionalmente. Deve parecer e agir da mesma forma em todas as páginas. Note que o design do seu aplicativo Android e iOS será diferente e isso é normal. Apenas seja consistente em cada plataforma e mantenha o visual e a sensação principais do design. Além disso, seu desenvolvedor de aplicativos provavelmente também usará pelo menos um kit de desenvolvimento de software (SDK), como o login de perfil do Facebook, então tente projetar seu aplicativo com isso em mente também.

O design do seu aplicativo também deve se estender ao seu site e a todos os outros materiais de marca. A consistência externa ajudará a construir credibilidade e evitar confusão com seus usuários. 

A marca do Uber é fácil de identificar de longe. Desde o aplicativo móvel focado no passageiro até o site focado no motorista, o Uber é consistente com cores, fontes e o visual moderno geral.

(Imagem cortesia do Uber)

Este formulário parece familiar para você? Isso porque é muito semelhante aos campos que você preencheria se estivesse solicitando uma corrida dentro do aplicativo.

Relacionado: Habilidades de design de aplicativos são cruciais se você está pensando em seguir a engenharia de software como uma carreira em tempo integral. Aprenda o que mais é necessário para ser um desenvolvedor de aplicativos com os especialistas.

Incorporando design de aplicativos no marketing

Estamos todos sobre obter opiniões de especialistas aqui na G2, e é por isso que pedimos a cinco especialistas em design para opinar sobre como eles incorporam o design de UI de um aplicativo em uma estratégia de marketing, e até mesmo além.

1. Quando em dúvida, capture a tela

“Quando você faz marketing para um aplicativo, está dando ao usuário um gostinho do UX/UI e você quer imitar isso muito claramente no seu anúncio. Eu acho que anúncios com capturas de tela e fundos muito limpos (para não distrair da oferta de recursos únicos do aplicativo) têm mais sucesso.

Mantenha o texto leve e direto ao ponto. Se você puder criar um gif polido ou um pequeno vídeo que possa fazer uma demonstração rápida dos melhores recursos do aplicativo, é ainda melhor. Você tem cerca de 3-5 segundos para prender seu público antes da rolagem - não negligencie o design do seu anúncio, não importa quão pequeno ele seja! Teste toneladas de imagens de anúncios - cores diferentes, tamanhos de fonte diferentes, capturas de tela diferentes, tamanhos de ativos diferentes.”

– Ciara Hautau, Estrategista de Marketing Digital Líder na Fueled

2. Crie uma frente unida (end)

“Uma maneira de garantir que a aparência e a sensação do UI do seu aplicativo sejam expressas em seus materiais de marketing é pegar certos elementos do design do aplicativo e usá-los como peças de destaque. Por exemplo, se o seu aplicativo tem seções com ilustrações, transfira-as para sua proposta, com o mesmo estilo exato.

Outra dica é prestar atenção ao estilo dos botões e caixas no aplicativo. Se o seu aplicativo usa retângulos como botões, sem cantos arredondados; seu material de marketing deve seguir esse estilo e nunca usar bordas arredondadas em nada. Isso também vale para sombras, tamanhos de fonte, transparência, etc.”

– Jenna Erickson, Gerente de Marketing na Codal

3. Seja consistente com a cor

“Pense em branding consistente. Eu recomendo usar uma paleta de cores muito limitada ao projetar o UI de um aplicativo. Se você levar isso para todo o seu marketing, é muito fácil alcançar consistência e, mais importante, reconhecimento para a marca.

Atualmente estou criando um UI para um aplicativo. Eu peguei a cor vermelha original da marca e a usei como um fundo de lavagem de cor para todos os materiais de marketing. O resultado final é uma marca ousada, muito reconhecível, que as pessoas lembram.”

– Jean H. Paldan, Fundador & CEO da Rare Form New Media

4. Fale a mesma língua

“Incorporamos diretamente elementos do nosso UI em nossas campanhas de marketing para dar ao nosso público uma melhor compreensão de como nosso aplicativo funciona e quais benefícios eles poderiam obter do produto. Nosso aplicativo é uma plataforma pesquisável por palavras-chave para encontrar pessoas com interesses semelhantes nas proximidades. Estamos usando as tags de palavras-chave, exatamente como aparecem no aplicativo, em nossas campanhas no Instagram e Facebook para apresentar os diferentes interesses pelos quais você poderia se conectar. Isso dá ao nosso público um gostinho do nosso produto antes do download.

Isolar os elementos-chave do seu produto. O que o torna único? O que o torna atraente? Então tente, de uma maneira não muito óbvia, incluir esse elemento ao longo. É importante pensar em algo que seja envolvente e possivelmente até participativo, como uma campanha de hashtag.”

– Melanie Aronson, Fundadora da Panion

5. Transmita sua mensagem

“Em todo o nosso material de marketing – nossas páginas de site, em nossos folhetos, dentro de nossos e-mails, em nossos vídeos, etc. – garantimos destacar visualmente nosso UX/UI elegante e realmente demonstrar a facilidade de uso e acessibilidade que nossa interface de aplicativo de um clique fornece.

É importante envolver o público descrevendo como o design do aplicativo melhora a experiência do usuário. Você tem que encontrar uma maneira de transmitir como o UI beneficia seus clientes e como ele atrai potenciais leads. Sua mensagem deve se concentrar em como a interface do usuário cria uma experiência ainda mais simples, suave e facilmente acessível para todos os usuários.”

– Sagi Gidali, Co-Fundador & CPO da Perimeter 81

Um momento de fazer funcionar

OK, sabemos que o design de aplicativos definitivamente afeta o orçamento geral de desenvolvimento. Mas há mais. Descubra como fazer o melhor uso do seu protótipo de aplicativo e responda à pergunta: quanto custa fazer um aplicativo?