tl; dr 90% dos smartphones modernos têm uma diagonal de ecrã de mais de cinco polegadas. O surgimento de tais telas apresentou um problema fundamentalmente novo para desenvolvedores e designers de aplicativos. Vamos ver como resolvê-los.

Após a apresentação da Apple em janeiro de 2007, o mundo inteiro encolheu para o tamanho de nossas mãos. A empresa combinou o iPod, telefone e navegador em um único dispositivo. A Apple introduziu no mercado de massa uma nova classe de dispositivos que hoje conhecemos como "smartphones". Esses aparelhos funcionavam sem teclado (como BlackBerry) ou caneta (como Palm).

O iPhone foi projetado para operação conveniente com apenas uma mão, com movimentos suaves do polegar na tela.

Steve Jobs disse uma vez que 3,5 polegadas é "o tamanho perfeito para os consumidores", e telas maiores são estúpidas.

No entanto, na virada da década, os phablets com telas grandes se tornaram populares no mercado. Hoje, menos de 1% dos dispositivos são vendidos com telas de menos de 10 cm, enquanto 90% têm uma diagonal de mais de 15 cm.

Essa corrida com um aumento constante na tela forneceu novas oportunidades para desenvolvedores e designers de aplicativos usarem o espaço extra na tela para fornecer mais conteúdo e mais recursos.

Por exemplo, o aplicativo da CNN foi um dos poucos a obter acesso antecipado ao iPhone 5, lançado em 2012. Os desenvolvedores não apenas o transformaram esteticamente, mas também melhoraram a legibilidade, destacando os títulos.

Apple 2012

Embora as telas grandes sejam ótimas para exibir muito conteúdo, a principal consideração de Steve Jobs para telefones de 3,5 polegadas é prejudicada - o uso com uma mão .

Em seu estudo de dois meses - em aeroportos, ruas, cafés, ônibus e trens - Stephen Huber examinou três maneiras pelas quais os usuários seguram seus telefones.

Verificou-se que 49% dos usuários seguram seus telefones com uma mão, especialmente em movimento. Em geral, essa é a aderência padrão do smartphone.

Fornecendo argumentos convincentes a favor do desenvolvimento de aplicativos para uso com uma mão, Stephen também descobriu que os usuários geralmente mudam de aderência dependendo da conveniência e da situação.

Por que o design com uma mão deve ser uma prioridade

Costumamos usar telefones quando ocupados ou com pressa. Isso afeta muito a maneira como seguramos o telefone e como usamos os aplicativos. Na prática, essa aderência é muito mais comum do que nos 49% mencionados acima.

Estudos mostram que o usuário médio verifica seu telefone 58 vezes por dia, com 70% das interações móveis durando menos de dois minutos. As pessoas costumam usar telefones em "breves períodos de tempo com atenção distraída".

Imagem: Tempo de resgate

Um grupo de pesquisadores da Simform observou esses impulsos esporádicos de usar um telefone em vários cenários:

Exemplos de uso de um smartphone em intervalos curtos

O diretor de produtos do Google, Luke Wroblesci, chama esses pequenos impulsos de uso móvel de "um dedo, um olhar" (um polegar, um globo ocular). Isso reflete como um ambiente perturbador deixa um smartphone com intervalos curtos de atenção parcial de uma pessoa. Ele também acrescenta que o tipo mais ideal de uso de smartphone com uma mão é aquele em que a interação rápida é suportada por uma funcionalidade conveniente .

Como projetar um design para intervalos tão curtos com um dedo?

A resposta é muito simples. Realize continuamente testes de usabilidade e saiba como seus usuários seguram seus telefones em várias situações.

Se os usuários costumam usar o aplicativo em cenários de distração, você deve se concentrar no desenvolvimento de modelos destinados à acessibilidade e usar com uma mão.

Para ter uma idéia do problema, vejamos a evolução da interface do Spotify:

Navegação antiga do Spotify - um hambúrguer do Spotify

usava um menu semelhante ao hambúrguer no canto superior esquerdo que ocultava as funções do aplicativo e configurava os usuários para procurá-los. Com o advento das telas grandes, outro problema de design foi adicionado à lista: acessibilidade .

Os usuários do Spotify experimentaram um certo nível de dificuldade e desconforto

Isso forçou a equipe do Spotify a fechar o menu de hambúrgueres em 2016 e colocar suas principais funções - Página inicial, Navegar, Pesquisa, Rádio e Biblioteca - na parte inferior, o que levou a um aumento no número de cliques em 9% em geral e em 30% nos itens de menu .

Use modelos UX padrão para casos de uso típicos.

Por que reinventar a roda se você pode usar modelos UX eficazes comprovados. Muitos designers já elaboraram cenários para usar o aplicativo com uma mão.

Passamos por centenas de aplicativos e milhares de modelos para encontrar os melhores truques e métodos para esse uso. Vamos ver quais funcionam melhor, quais problemas eles resolvem e quais benefícios você obtém disso.

Dividimos os padrões de comportamento do usuário e os modelos de UX mais comuns em seis categorias:

Navegação
Por exemplo, barras de menu, guias e gestos para facilitar o movimento entre as seções mais importantes do aplicativo.
Ações
Crie, edite, coloque, adicione, exclua e outras ações que usem a funcionalidade básica do aplicativo.
,
, , .
, , , , , , — .
, , , .

1.

A base de um ótimo aplicativo é uma boa navegação. Ajuda a encontrar rapidamente as funções necessárias e o que é importante para os usuários.

Em 70% dos casos, os usuários encontram novas funções e recursos do aplicativo navegando nele, e não pesquisando ou de outras maneiras. Painéis de navegação, menus, gestos, links, guias etc. são os modelos UX mais comuns.

Uma boa navegação deve demonstrar imediatamente todas as seções importantes e ser facilmente acessível.

Problemas

Os modelos de navegação convencionais, como a barra de guias Apple e o menu de furto do Android, têm limitações. Apenas um número limitado de funções é colocado na barra de guias e o acesso a todos os elementos do menu de furto não é fácil.

Os usuários não precisam se esforçar para alcançar uma parte importante do aplicativo; eles não precisam chegar com o dedo na parte superior da tela. Isso é apenas desconfortável. Em particular, se uma pessoa estiver em movimento e usar o aplicativo muito rapidamente.

Decisão

O Facebook e muitos outros aplicativos resolvem o problema colocando itens sob o botão chamado "Menu" ou "Mais", de onde os usuários podem acessar funções e seções adicionais do aplicativo. No entanto, isso não é ideal quando usado com uma mão.

Para acessibilidade e posicionamento de mais de cinco itens, não uma página inteira, mas um menu pop-up é mais adequado.
Barra de guias estendida se houver mais conteúdo.
Barra de guias personalizada para usuários avançados.
Gestos para que os usuários desenvolvam hábitos de acesso conveniente e rápido.
Retornar e fechar a página deve ser tão fácil.
Salto rápido para seções específicas do aplicativo.

Por exemplo, o Facebook oculta muitos recursos no menu hambúrguer, que fecha a tela principal. Embora pareça bonito e lógico, os usuários sofrem ao trabalhar com uma mão .

1.1 Qual é o principal problema com o menu de hambúrguer?

Use um pop-up em vez de um menu de página inteira

Felizmente, temos uma maneira de resolver o problema.

Os menus de página inteira geralmente podem ser substituídos por menus pop-up. Como o nome indica, eles "aparecem" por baixo. Isso facilita o acesso às opções com apenas uma mão.

1.2 Modelos de menu pop-up. Vídeo: Joox

Estenda a barra de guias se houver muito conteúdo

As Diretrizes da interface humana da Apple recomendam colocar no máximo cinco funções na barra de navegação inferior. É aqui que a opção "Mais" é útil (três pontos). Localizado no painel inferior, ele pode ocultar outras funções e abri-las com um clique.

1.3 Design do menu de navegação inferior com painel de opções adicionais

Barra de guias personalizada para usuários avançados

Cada usuário é individual, e uma função que é importante para um pode não ser do interesse do outro. Para tirar o máximo proveito do design, você pode permitir que os usuários personalizem painéis de guias com funções usadas com freqüência.

1.4 Barra de guia inferior personalizada para acesso rápido aos recursos

Gesticula para que os usuários desenvolvam hábitos de acesso conveniente e rápido

A popular navegação por gestos do Tinder é uma ótima maneira de facilitar a navegação com uma mão.

1.5 Navegação baseada em gestos para acessar os recursos do aplicativo

Retornar e fechar a página deve ser tão fácil.

A navegação não é apenas o acesso à tela ou seção de um aplicativo. É importante considerar o método de retornar, fechar a tela ou passar para uma seção específica da página! Vamos ver como os aplicativos usam gestos e modelos de UX para essas coisas.

1.6 Usando gestos para navegar em várias telas (vídeo: Zenly )

Salto rápido para seções específicas do aplicativo

Aplicativos com muitas categorias, subcategorias e seções, como livros, wikis, menus de restaurantes, catálogos de produtos, precisam de uma organização bem organizada para que os usuários não tenham problemas para encontrar conteúdo.

Os aplicativos podem ser organizados hierarquicamente e usar modelos UX personalizados para aumentar a acessibilidade e a facilidade de uso.

1.7 Painéis de guias flutuantes e gestos para mover-se entre seções

2. Ações com uma mão

O que é isso

Os usuários gastam cerca de 50% de seu tempo móvel realizando atividades em seus smartphones. São interações sociais, compras, auto-expressão, gestão financeira, de saúde e produtividade, além de planejar os próximos eventos. Todos esses modelos incluem ações como criar mensagens sociais, editar documentos e outras.