Restrições de design de UX móvel, práticas recomendadas e trabalho com desenvolvedores
Publicados: 2022-03-11Podemos obter melhores experiências do usuário seguindo as melhores práticas de design de UX móvel, entendendo as restrições e facilitando um relacionamento de trabalho sólido com os desenvolvedores.
O que é design de UX móvel?
Um artigo recente no TechCrunch apontou que o comércio eletrônico móvel foi responsável por quase um terço de todas as vendas on-line durante o período de feriado do Dia de Ação de Graças de 2018, e a Digital Trends informou em 2017 que 5 bilhões de pessoas em todo o mundo agora têm um dispositivo móvel. O Google também anunciou que a indexação mobile-first agora é usada em mais da metade das páginas da web em seus resultados de pesquisa.
As pessoas dependem de dispositivos móveis todos os dias para comunicações, comércio eletrônico, consumo de conteúdo, trabalho, serviços bancários, direções e cada vez mais como seu único dispositivo de computação. Além disso, eles estão usando uma variedade de dispositivos, como telefones celulares, relógios inteligentes, tablets, phablets, wearables e laptops híbridos.
O design de experiência do usuário móvel (UX) refere-se ao design de experiências positivas durante o uso de dispositivos móveis e wearables, e aplicativos ou serviços executados em tais dispositivos... O design de UX móvel concentra-se fortemente na eficiência e capacidade de descoberta. - Fundação de Design de Interação
Para designers de UX, essas tendências de dispositivos móveis representam desafios e oportunidades. Por um lado, temos que levar em conta a variedade de dispositivos e formas em que eles são usados. Por outro lado, isso abre um conjunto totalmente novo de áreas de foco no design de UX, e isso significa criar experiências positivas para uma geração totalmente nova de usuários.
Práticas recomendadas para design de UX móvel
O design de UX móvel é complicado. Como dito anteriormente, há tantas coisas que devemos considerar, incluindo a crescente lista de dispositivos móveis, as formas como as pessoas interagem com eles e o fato de que as pessoas desejam experiências consistentes e agradáveis em todos os tipos de dispositivos.
25 dicas de design de UX para dispositivos móveis do Google
Em 2015, o Google publicou 25 práticas recomendadas de design de UX móvel com base em pesquisas internas. Essas dicas foram atualizadas recentemente para deixá-las mais atualizadas. O autor também inclui um PDF para download de todas as 25 dicas que é bom ter à mão para qualquer projeto de UX móvel.
Diretrizes de interface humana da Apple
Outro ótimo recurso para manter à mão são as Diretrizes de Interface Humana da Apple para design móvel. Eles são fáceis de ler com um layout bonito e apimentados com as melhores práticas, dicas e a própria opinião da Apple sobre os princípios de design. Para designers de UX móvel, essas diretrizes são um ótimo recurso para fornecer experiências de usuário de alta qualidade.
Práticas recomendadas adicionais de UX para dispositivos móveis
Aqui estão mais algumas práticas recomendadas de design de UX móvel que podem não ser tão conhecidas quanto as do Google, mas são igualmente importantes para os designers móveis levarem em consideração.
- Pesquisa de UX . Em um certo ponto, podemos nos sentir inclinados a entrar diretamente em maquetes ou protótipos, no entanto, fazer uma pesquisa de UX adequada primeiro é algo que não pode ser subestimado. Lembre-se sempre de que “você não é seu usuário” e uma experiência de usuário positiva depende de uma pesquisa completa de UX em todos os casos. Aqui está o guia abrangente da Adobe para métodos de pesquisa de UX para referência adicional.
- Desordem . Todos nós já experimentamos a ansiedade de um desktop desordenado – imagine em um dispositivo móvel! Cada botão adicionado, imagem, conteúdo, etc., torna as coisas muito mais complicadas. É uma boa ideia se livrar de qualquer coisa em uma interface de usuário móvel que não seja absolutamente necessária. Uma ótima dica é buscar o minimalismo, mas sem correr o risco de uma boa usabilidade. Isso geralmente pode ser alcançado priorizando uma ação principal em cada tela.
- Priorize . Há uma tendência de tentar adicionar tantos recursos quanto possível. Achamos que deixar algo de fora de alguma forma criará menos experiência para os usuários. Pelo contrário, mantenha os recursos altamente focados com base nos objetivos principais e refine o design analisando quais recursos são mais usados e, em seguida, esforce-se para tornar esses recursos intuitivos e agradáveis.
- Toque em Alvos . Os usuários podem ficar fisicamente irritados e começar a bater em seus dispositivos móveis quando tocam em algo e ele não responde. Um estudo feito no MIT descobriu que eles estavam tocando em algo que tinha um alvo de toque muito pequeno. Uma prática recomendada é criar controles, botões, links, etc. (qualquer coisa que seja um alvo de toque) de pelo menos 7 a 10 mm, que é a largura média da ponta do dedo. Também é uma boa ideia garantir que haja um amplo espaçamento entre esses elementos da interface do usuário.
- Texto legível . Como muito do que os usuários fazem é baseado no consumo de conteúdo, para fornecer uma experiência consistente em todos os tipos de dispositivos móveis, certifique-se de escolher fontes que funcionem bem em vários tamanhos e pesos. Tamanhos de fonte de pelo menos 11 pontos são recomendados para reduzir o cansaço visual. Tipos de letra limpos e fáceis de ler, como Roboto e Noto, do Google, ou a nova fonte San Francisco, da Apple, são ótimas opções para explorar.
- Comentários da interface do usuário . Aplicativos bem projetados nos mantêm informados à medida que interagimos com eles. A falta de um bom feedback pode confundir os usuários e levá-los a questionar se algo aconteceu, está acontecendo ou por que aconteceu/não aconteceu. Uma prática recomendada é usar diferentes formas de feedback (som, haptics, visualizações), com base no elemento da interface do usuário ou no estado atual do aplicativo.
- Acessibilidade . Este é provavelmente um dos aspectos mais negligenciados do design de experiência do usuário e, especialmente, do design de UX móvel. 15% da população mundial experimenta algum tipo de deficiência. As Diretrizes de Acessibilidade de Conteúdo da Web são um recurso disponível gratuitamente e, para designers digitais, é um “obrigatório” como parte de sua caixa de ferramentas.
Restrições de design de UX móvel
O objetivo da maioria dos designers de UX é fornecer experiências agradáveis e criar ótimos designs que alcancem tanto a descoberta (quais ações são possíveis) quanto a compreensão (como o produto deve ser usado). Com os dispositivos móveis, no entanto, existem algumas restrições introduzidas devido ao tamanho, portabilidade e ambientes em que esses dispositivos são usados.
Restrições de armazenamento
Ao lidar com aplicativos móveis nativos, os designers precisam considerar que alguns usuários podem ter restrições de armazenamento.
Um aplicativo móvel, ao contrário de um aplicativo da web, usa o armazenamento diretamente no dispositivo móvel. Isso tem um impacto no design de UX móvel porque apresenta possíveis limitações na qualidade de vídeo, áudio e imagens que podem ser usadas.
Para aplicativos nativos, queremos designs de UX móvel que levem em consideração as restrições de armazenamento. Quando um usuário se depara com uma limitação de armazenamento, ele precisa tomar decisões difíceis sobre o que manter e o que excluir. Isso cria uma experiência ruim para o usuário quando forçamos os usuários a fazer essas escolhas.
Telas e controles
Outra restrição que enfrentamos com o design de UX móvel é o tamanho da tela e os controles em nossos dispositivos móveis.
As telas dos celulares são menores: ler através de um olho mágico aumenta a carga cognitiva e torna a compreensão duas vezes mais difícil. - Jakob Nielsen, Consultor de Usabilidade Web.
A melhor maneira de lidar com telas e controles é eliminar o máximo de atrito possível. Reestruture as informações, preste atenção às zonas de polegar, diminua os cliques (especialmente com o comércio eletrônico) e preste atenção ao processo de login, que muitas vezes pode ser frustrante.

Meio Ambiente
Com dispositivos móveis, existem fatores ambientais a serem considerados para o design de UX. Os usuários estão sujeitos a ficar offline com muito mais frequência, e essas situações precisam ser consideradas na experiência geral do usuário. Como podemos trazê-los de volta para onde estavam? Como podemos garantir que eles não tenham que começar tudo de novo com o que estavam fazendo?
Outro fator ambiental são as distrações. Quando usamos nossos telefones celulares ou tablets, geralmente estamos em um ambiente barulhento ou lotado que dificulta a concentração. Como podemos garantir uma boa experiência do usuário quando as distrações estão competindo pela atenção do usuário? Existem maneiras de salvar estados e permitir que nossos usuários salvem estados também?
Tamanho de tela pequena, janela única
Outra restrição que os designers enfrentam no design de UX móvel é o tamanho limitado da tela. Por causa disso, as pessoas só podem ver uma janela por vez, e isso coloca uma enorme limitação na experiência do usuário.
Existem esforços para tentar acomodar “multi-tela” e “multitarefa”, mas ainda não são a norma e vêm com seus próprios conjuntos de restrições.
A chave para um melhor UX móvel com essa restrição de janela única é que o design deve ser autossuficiente. Tudo o que precisa ser feito pelo usuário deve ser feito em uma única tela ou janela, ou seja, ele não deve sair do aplicativo para encontrar informações, etc.
Quando os usuários precisam sair de aplicativos ou abrir novas telas, isso aumenta a carga cognitiva geral e significa que as coisas se tornam muito complexas e frustrantes.
Como as pessoas seguram os dispositivos móveis
Há uma última restrição a ser observada: segurar nossos gadgets. Como as pessoas os seguram e o que isso significa para o design de UX móvel?
De acordo com a pesquisa de Steven Hoober e descrita em Design for Fingers, Touch, and People, Part 2, descobriu-se que as pessoas interagem com seus dispositivos de maneira diferente dependendo de como os seguram, o que posteriormente tem um impacto no design de UX móvel.
As pessoas seguram seus dispositivos móveis de várias maneiras e mudam de posição o tempo todo. Isso afeta os dedos que eles usam e como eles interagem com uma interface de usuário móvel (veja abaixo). Acontece que os usuários preferem o centro da tela e não gostam de clicar em itens muito próximos das bordas.
Aqui estão algumas dicas adicionais de UX móvel da pesquisa de Steven:
- Design para todos os usuários e todos os tipos e tamanhos de dispositivos móveis
- Design para todas as várias maneiras pelas quais as pessoas trabalham com seus dispositivos
- Considere que os usuários preferem tocar no centro da tela na maioria dos casos
- Coloque as ações principais na metade do meio a dois terços da tela
- Certifique-se de que os dedos e os polegares não obscureçam o conteúdo
- Os itens selecionáveis devem ser grandes o suficiente para serem tocados confortavelmente
Trabalhando com Desenvolvedores
Esteja trabalhando em um ambiente de UX ágil/lean ou não, são os desenvolvedores que precisam interpretar e implementar os designs que foram criados com tanto cuidado. É uma boa ideia estabelecer algumas práticas recomendadas testadas e comprovadas com os desenvolvedores desde o início para garantir que os projetos sejam implementados conforme o esperado. Aqui estão algumas sugestões e dicas.
Maquetes
Ao preparar e entregar maquetes, tente manter os nomes dos arquivos simples, consistentes e descritivos. Isso economizará muito tempo indo e voltando. Também é uma boa ideia finalizar todos os modelos antes de compartilhá-los com os desenvolvedores para que eles recebam apenas uma versão de cada tela. Outra dica para economizar tempo é testar todas as interações com os protótipos para que funcionem e funcionem. Boas ferramentas para compartilhar maquetes: InVision e Marvel .
Especificações funcionais
A maior parte do trabalho feito como designers de UX envolve desenvolvedores no início do projeto, e uma ótima maneira de facilitar uma compreensão contínua do processo de design e criar uma melhor linha de comunicação é criar e usar um documento de Especificação Funcional ou um “Func -Especificação.”
O documento Func-Spec é semelhante a um blueprint que os arquitetos criam, exceto que é compartilhado com os desenvolvedores ao longo do projeto de design e permite que eles entendam como um aplicativo ou site funcionará (em comparação com a aparência da interface do usuário).
Um bom exemplo de funcionamento do Func-Spec é mostrado abaixo:
cópia de
Geralmente, há muitas cópias que ficam fora de uma maquete que precisa ser comunicada aos desenvolvedores. Aqui está uma ideia que eles definitivamente apreciarão:
Como visto acima, o contexto ajuda o desenvolvedor a entender quando a mensagem deve aparecer ou desaparecer. Ele deve informar ao desenvolvedor o que está acontecendo para que ele não precise adivinhar. A mensagem é a cópia real que aparecerá. Use a cópia real e não sem sentido (ou seja, lorem ipsum). Os desenvolvedores não querem ser redatores e queremos tornar as coisas o mais suaves possível para eles.
Especificações
Esta é uma das partes mais importantes da comunicação de projetos com os desenvolvedores. É aqui que ferramentas como Zeplin e InVision's Inspect realmente brilham porque cuidam da comunicação de especificações como medidas, guias de estilo, fontes, fluxo de experiência do usuário e como cada parte do design funciona.
Comunicação IRL (na vida real)
Designers amam suas ferramentas. Tanto que pode ser muito fácil esquecer de pegar o telefone, iniciar uma chamada de vídeo ou ir até os desenvolvedores e conversar. Muito tempo foi economizado simplesmente reunindo-se com os desenvolvedores depois de entregar uma parte de um design, porque quaisquer dúvidas ou nuances podem ser discutidas no local. Isso geralmente é esquecido, mas se fizer parte do processo normal de transferência, todos apreciarão o tempo que economiza.
Amarrando tudo junto
O celular não vai embora. Em 2016, o número de usuários acessando a web em um dispositivo móvel ultrapassou o uso de desktop pela primeira vez. Para designers de UX, a crescente adoção de dispositivos móveis e a proliferação de vários tipos de dispositivos tornarão o design da experiência do usuário muito mais desafiador.
Por essas razões, aderir a um conjunto de práticas recomendadas, entender as restrições que os dispositivos móveis introduzem e proporcionar uma relação de trabalho tranquila com os desenvolvedores serão fatores-chave para alcançar projetos que criem experiências humanas positivas.
• • •
Leia mais no Blog Toptal Design:
- Os princípios do design e sua importância
- Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
- Explorando os Princípios de Design da Gestalt
- Adobe XD vs. Sketch – Qual ferramenta UX é ideal para você?
- Os 10 produtos de UX que os principais designers usam