Como projetar interfaces móveis amigáveis ​​

Sep 11, 2025
Como

Alguns projetos móveis sofrem de um problema: eles podem ficar ótimos na superfície, mas começar a usá-los e você logo descobrirá que um fator bastante importante foi negligenciado: a ergonomia. A arte nobre de criar projetos que se encaixam no corpo humano (em vez do contrário) é um dos verdadeiros heróis desconhecidos do mundo de design.

A ergonomia sempre foi muito importante para os designers industriais, mas também está se tornando cada vez mais importante para os designers digitais também. Porque? Porque smartphones e tablets estão mudando a maneira como interagimos com desenhos digitais. Nós não apenas usamos apenas um teclado incômodo e um mouse para contar aos nossos amigos digitais o que fazer. Agora é mais direto, mais físico. Nós mantemos nossos dispositivos. Nós os tocamos. Nós beliscamos eles. Nós olhamos amorosamente eles.

Essa ligação cada vez mais física com nossos amados dispositivos móveis força os designers a não apenas pensar em como um design parece e sente, mas também os aspectos físicos de usá-lo. Força os designers a pensar em como os usuários seguram e interagem com seus smartphones e tablets; Quanto da tela eles podem chegar confortavelmente e como um design se sentirá na mão. Força os designers a pensar sobre a ergonomia de um design móvel.

Então, como você vai criar um design móvel que é ergonômico e, portanto, confortável de usar?

01. Saia do escritório

Mesmo antes de começar a pensar em possíveis projetos, saia do escritório para realizar algumas observações em primeira mão. Passe uma manhã ou tarde olhando onde, quando, como e por que as pessoas estão usando seus dispositivos móveis.

Anote como as pessoas estão segurando e interagindo com o dispositivo, o que podem estar fazendo na época e os tipos de desafios e distrações que poderiam ter que enfrentar. Esta informação ajudará a informar a ergonomia do design e significa que, quando se trata de testar um projeto, você pode testar os cenários que você conhece realmente acontece no mundo real.

02. Projeto para vários mantes

The three main holds used for a smartphone, and the frequency which they’re typically used

Os três principais detentores usados ​​para um smartphone e a frequência que eles são normalmente usadas

Se você observar pessoas usando dispositivos móveis, você verá que eles usam um variedade de valores diferentes . A variedade de valores usados ​​e a frequência com a qual os usuários mudam sua espera significa que é importante projetar com várias detentores em mente.

Por exemplo, inicie um design de smartphone com uso de uma mão em mente (como este é o mais desafiador), mas sempre projeta desenhos através de uma variedade de espera para ver como cada um deles é confortável.

03. Coloque os controles populares no alcance

Green areas are easy to reach, amber takes more effort and red areas are hard to reach

Áreas verdes são fáceis de alcançar, Amber requer mais esforço e áreas vermelhas são difíceis de alcançar

Coloque os controles usados ​​com freqüência, como botões e links, onde podem ser facilmente alcançados por dedos ou polegares. O meio e a parte inferior da tela são boas áreas para usar, embora cantos inferiores possam ser complicados para tocar quando um dispositivo está sendo mantido em apenas uma mão (leia mais aqui ).

Ainda é a convenção para colocar menus no topo da tela. No entanto, isso pode ser uma área difícil de alcançar, por isso é uma boa ideia também suportar uma ação de furto para trazer o menu.

04. Coloque o conteúdo acima dos controles

The BBC iPlayer iPad app places controls in easy to reach areas and below content

O aplicativo BBC iPlayer ipad coloca controles em áreas fáceis de alcançar e abaixo do conteúdo

Você não quer o dedo ou polegar de alguém obscurecendo o conteúdo à medida que eles tocam na tela, então coloque o conteúdo acima dos controles. Também assegure-se de que a informação chave não esteja em uma área da tela onde ela pode ser facilmente obscurecida por um dedo ou polegar - como os cantos inferiores, que são freqüentemente cobertos quando um smartphone é mantido em uma mão.

05. Design com modo de retrato em mente

Enquanto a espera usada pode mudar, uma coisa que é muito mais consistente para os smartphones e tablets é a tendência para as pessoas mantê-las verticalmente para a maioria do tempo. Uma espera horizontal é frequentemente usada para tarefas específicas, como visualizar vídeos ou fotos, mas esta é a exceção, não a norma.

Claro que um design móvel deve idealmente suportar os modos de retrato (vertical) e paisagem (horizontal), mas a menos que você esteja projetando um site ou aplicativo foto-pesado ou foto, design com modo de retrato em mente.

06. Projeto para os polegares

The Spotify app is designed to be thumb-friendly, with large tap targets

O aplicativo Spotify é projetado para ser amigável ao polegar, com grandes alvos de toque

Os polegares dirigem a maioria de todas as interações de smartphones. Isso ocorre porque os polegares são usados ​​exclusivamente quando um celular é mantido em uma mão e fortemente usado quando é mantido em duas mãos.

Os polegares são ligeiramente maiores que os dedos e, portanto, precisam de um alvo maior de toque. Tente fazer estes alvos de toque pelo menos 44 x 44 pontos (16 x 16 mm), com pelo menos 7 pontos (2,5 mm) entre eles. Os alvos de torneira maiores são sempre melhores e você certamente não deve ir menor que 44 x 30 pontos (16 x 11mm).

Mesmo se você estiver projetando para tablets, ainda design para os polegares porque um projeto deve suportar o método menos preciso de toque que ele vai encontrar. Um grande alvo de toque não é bom para os polegares, é ótimo para os dedos também.

07. Design para grandes gestos

Talvez os alvos de torneira maiores são melhores. Qual alvo de torneira maior do que a tela inteira? Tente projetar com grandes gestos em mente, como permitir que os usuários deslize para avançar para frente ou para trás em uma galeria de fotos ou para trazer um menu.

Lembre-se que os usuários podem não perceber que um gesto é suportado, por isso é sempre uma boa ideia fornecer uma maneira secundária de fazer algo, como tocar um ícone de seta para trazer a próxima foto.

08. Rise para o desafio

Em ergonomia, você às vezes ouve a conversa de projetar para se adequar a pelo menos 95% dos usuários, criando um design confortável do 2,5º para o percentual de 97.5. Sempre haverá usuários extremos que são muito difíceis de acomodar - como todos sabemos que você não pode agradar a todos o tempo todo, mas se você puder criar um design que os usuários mais desafiadores podem usar com conforto, ele também deve funcionar para todos aqueles no meio.

É por isso que é uma boa ideia projetar com usuários desafiadores e cenários em mente. Por exemplo, pense em uma viagem movimentada andando pela rua com café em uma mão e celular no outro, ou alguém com artrite.

09. Mantenha as interações para um mínimo

Você sabe qual a interação mais confortável do dispositivo móvel é? Não é uma torneira, ou um furto ou uma prensa. Não é interação. Quanto menos interação seu design móvel requer, menos você precisa se preocupar com a ergonomia. Eu sempre tento manter as interações no mínimo. Implacantemente cortou formas móveis, use o AutoSugugests e restringe as notificações apenas para as coisas que um usuário realmente precisa ser notificado.

10. Projetos de Prototype

Você simplesmente não pode julgar a ergonomia de um design móvel até que você possa segurá-lo fisicamente em suas mãos e experimentar diferentes garras. É por isso que eu prototipo um design o mais rápido possível. Nós gostamos Axure , mas há muitos outros Grandes ferramentas de prototipagem .

Para um teste rápido, você pode até mesmo executar testes básicos de usuário com protótipos de papel simples. Um esboço ou impressão de papel preso em um dispositivo móvel lhe dirá uma quantidade surpreendente sobre a ergonomia.

11. Teste, teste e, em seguida, teste mais

Quer saber a maneira garantida de criar desenhos móveis ergonômicos? É para testar projetos, então iterar e testar, iterar e testar ... e continuar até ter um monte de pessoas diferentes, cobrindo um monte de diferentes dispositivos, todos relatam que o design é confortável de usar. É simples assim.

Dispositivos móveis são, é claro, projetados para ser 'móvel', então saia do escritório para testar projetos nos ambientes e situações que provavelmente serão usados. Cafeterias são sempre um bom lugar para testar. Projetos de teste com Muitas pessoas quanto possível (pelo menos cinco ou seis) e concentram-se em cenários mais desafiadores, como o uso de um smartphone uma mão. Se o design funcionar bem quando as interações do usuário estiverem mais restritas, com certeza é o restante do resto do tempo. É principalmente testando e iterating continuamente que você pode criar desenhos móveis verdadeiramente ergonômicos.

Este artigo originalmente apareceu na revista Net. Inscreva-se aqui.

Artigos relacionados:

  • 16 contas do Instagram UX / UI você deve seguir
  • 20 melhores ferramentas de wireframe
  • As 5 maiores tendências de design UX para 2018

Como - Artigos mais populares

Como classificar no Google

Como Sep 11, 2025

(Crédito da imagem: Buzzfeed) Então, você quer saber como se classificar no Google. A boa notícia é que você n�..

Krita Tutoriais: Aprenda os fundamentos do software de arte digital

Como Sep 11, 2025

Pagina 1 de 2: Tutorial Krita: Encontre o seu caminho Tutorial Krita: Encontre o seu caminho Tutorial ..

Tudo que você precisa saber sobre o código JavaScript Splitting

Como Sep 11, 2025

Sites modernos muitas vezes combinam todo o seu Javascript em um único, grande main.js. roteiro. Isso contém reg..

Como implementar modos leves ou escuros no CSS

Como Sep 11, 2025

A especificação CSS é sempre evoluindo. O processo de implementação de novos recursos no CSS é complicado, mas a versão si..

Como fazer um Mandelbulb

Como Sep 11, 2025

Um mandelbulb é um fractal tridimensional que está se tornando cada vez mais popular em Arte 3D. e vfx. Neste ar..

Criar paisagens impressionantes em Houdini

Como Sep 11, 2025

Ao usar uma abordagem processual baseada em nó, o software 3D Houdini de SideFX fornece artistas digitais com um nível notável..

Criar um efeito portal em Maya

Como Sep 11, 2025

Esse efeito de portal no Dr. Strange foi muito especial. Foi praticamente o único efeito no filme que não se inclinou mais para..

Como codificar um marcador de realidade aumentada

Como Sep 11, 2025

Pagina 1 de 2: Página 1 Página 1 Pági..

Categorias