ptenfrdeitrues
quarta, outubro 16, 2019

Teksmart IT Français Teksmart It in English

Você está aqui:Internet & Web»App Design»O Guia para Design de Aplicativos Móveis: Melhores Práticas para 2018 e mais Além
terça, 26 junho 2018 12:32

O Guia para Design de Aplicativos Móveis: Melhores Práticas para 2018 e mais Além Destaque

Escrito por
Classifique este item
(0 votos)

Agora, os aplicativos móveis são comuns - uma maneira popular de fornecer conteúdo e serviços.

Mas de acordo com a Fortune, mais de 75% dos utilizadores abrem um aplicativo uma vez e nunca mais voltam. Hoje, os utilizadores móveis esperam muito do aplicativo - tempo de carregamento rápido, facilidade de uso e prazer durante a interacção. Adaptar-se ao contexto de uso, mantendo os níveis de interação o mais baixos possíveis (limitar o número de acções necessárias para concluir uma tarefa) está rapidamente se tornando um padrão para muitos aplicativos.

Então, o que exactamente pode ser considerado como “boa experiência”? Vamos explorar os seis fundamentos do design de aplicativos para dispositivos móveis.

Minimize a Carga Cognitiva

Quanto menos atrito e confusão os utilizadores tiverem ao interagir com um aplicativo (por exemplo, a carga cognitiva), maior a chance de o aplicativo ficar por perto.

Fluxo de utilizador optimizado

Entender como os utilizadores interagem com um aplicativo é essencial para a optimização. Como designers e desenvolvedores, devemos entender os objectivos do utilizador no contexto de todo o fluxo de utilizadores. Esse conhecimento nos ajudará a identificar os pontos de atrito mais comuns durante a conclusão da tarefa.

Aqui estão algumas maneiras populares de optimizar o fluxo do utilizador:

Aqui estão algumas maneiras populares de optimizar o fluxo do utilizador:

  • Chunking para grandes tarefas. Se uma tarefa contiver muitas etapas e acções necessárias do lado do utilizador, é melhor dividir essa tarefa no número de subtarefas. Um bom exemplo é o fluxo de checkout progressivo em aplicativos de comércio eletrónico. Você pode separar um processo de checkout no número de etapas que cada um deles requer uma acção do utilizador.

Ao limitar o número de acções necessárias do lado do utilizador, você melhora a compreensão. Créditos da imagem: Dribbble

  • Use as informações que você já tem sobre os seus utilizadores. Você provavelmente já tem muitas informações sobre os seus utilizadores - você só precisa usá-las correctamente. Considere a Uber no exemplo abaixo: o aplicativo não pergunta ao utilizador sobre a sua localização, ele detecta automaticamente o local com base em dados geográficos. Nesse ponto, o utilizador só precisa seleccionar uma localização.

  • Forneça um próximo passo natural. Quando a tarefa exige que os utilizadores concluam várias etapas, mantenha o ritmo mostrando claramente o que virá em seguida.


A interface orienta o utilizador, fornecendo o próximo passo após cada interacção. Créditos da imagem: Dribbble

  • Priorize uma acção principal por um écran. Ao seguir esta regra simples, você tornará a interface mais fácil de aprender e mais fácil de usar. Use o peso visual para priorizar elementos importantes (como cores contrastantes para o botão principal de call-to-action).

Airbnb destaca os principais botões de chamada para acção usando cores

Recorte a desordem

O bom design da interface é fornecer informações relevantes (sinal) e evitar informações irrelevantes (ruído).

Ao confundir sua interface, você sobrecarrega os utilizadores com muita informação: cada botão, imagem e ícone adicionados torna o écran mais complicado. A desordem é terrível num computador, mas é ainda pior em dispositivos móveis em que não temos muito espaço livre no écran para actuar.

A barra de abas claras (à direita) é muito melhor que a desordenada (à esquerda). Créditos da imagem: Apple

Dica: Se você deseja reduzir a desordem em uma tela que representa uma parte do fluxo do utilizador - mostre apenas o que é necessário na etapa actual do fluxo. Por exemplo, quando um utilizador está fazendo uma escolha, revele informações suficientes para permitir a escolha e, em seguida, mergulhe nos detalhes da (s) próxima (s) tela (s).

Divulgação progressiva (informações reveladoras passo-a-passo) no aplicativo Duolingo para iOS

Tornar a navegação auto-evidente

Todos os recursos interessantes e o conteúdo actrativo do mundo não importam se as pessoas não conseguirem encontrá-lo.

Aqui estão algumas regras para navegação:

  • Não esconda. Evite a navegação oculta, como por exemplo, o gesto, porque a maioria dos utilizadores terá dificuldade em encontrá-lo.
  • Navegação consistente Os programadores de aplicativos para dispositivos móveis geralmente ocultam menus em páginas individuais. Não faça isso porque pode confundir ou desorientar os seus utilizadores.
  • Comunique a localização actual. Não indicar o local actual é o problema comum para muitos aplicativos móveis. "Onde estou?" É uma das perguntas mais fundamentais que os utilizadores precisam responder para navegar com êxito.

Dica: é melhor usar padrões de navegação padrão, como a barra de guias (para iOS) e a gaveta de navegação (para Android). A maioria dos utilizadores está familiarizada com os dois padrões de navegação. Não há necessidade de ser inteligente se uma solução simples funcionar.

Créditos da imagem: design do Google

Optimizar as interações para o meio

Os telefones celulares não são versões menores dos desktops - eles apresentam suas próprias nuances e restrições.

Elementos projectados devem se parecer como eles se comportam

Uma interface de utilizador móvel precisa comunicar claramente quais elementos são interactivos e quais elementos são estáticos.

Diferentemente da área de trabalho, onde os utilizadores podem usar efeitos de foco automático para entender se algo é interativo ou não, os utilizadores de dispositivos móveis podem verificar a interactividade apenas tocando num elemento. Os utilizadores devem ser capazes de prever correctamente como um elemento de interface se comportará apenas olhando para ele.

Criar alvos de toque favoráveis aos dedos

Quando você está projectando elementos accionáveis em interfaces para dispositivos móveis, é essencial tornar os destinos grandes o suficiente para que eles sejam fáceis de serem acedidos pelos utilizadores. Como regra geral, projecte controles que tenham uma área de toque de 7 a 10 mm para que possam ser tocados com precisão com um dedo. Esse alvo de toque torna as bordas do alvo visíveis para os utilizadores quando eles o tocam. Os utilizadores poderão entender se estão ou não atingindo o alvo com precisão.

Além disso, garanta que os elementos não fiquem muito próximos um do outro. Deve haver uma quantidade adequada de espaçamento entre os pontos de toque para evitar entradas falsas.

Créditos da imagem: Apple

Considere a Zona Thumb(Polegar)

Projectar para os polegares não é apenas tornar os objetivos grandes o suficiente, mas também considerar a maneira como mantemos nossos dispositivos.

Enquanto um polegar pode varrer a maior parte do écran na maioria dos écrans móveis, apenas um terço do écran é um território genuinamente sem esforço. Este território é chamado de zona do polegar natural. Outras zonas exigem o alongamento dos dedos ou até mesmo a mudança de aderência para alcançá-los. Com base no posicionamento da mão (esquerda, direita ou combinada), podemos ver como fica a zona de segurança no dispositivo móvel moderno (veja uma área verde na imagem a seguir).


Créditos da imagem: Smashing Magazine

Quanto maior o écran, mais o écran é menos acessível.

Zonas do polegar para uma pessoa destra, segundo pesquisa de Scott Hurff

Considere todas as zonas diferentes ao projectar para um smartphone:

  • A zona verde é o melhor local para opções de navegação ou acções interactivas frequentes (como o botão de call to action).

O botão "Compartilhar" está localizado na área da zona de polegar verde.

  • A zona vermelha é o melhor lugar para possíveis opções de perigo (como Excluir ou Apagar). Os utilizadores são menos propensos a accionar essa opção acidentalmente.

Coloque acções destrutivas (como excluir e apagar) na zona vermelha difícil de alcançar, porque você não deseja que os utilizadores as acessem acidentalmente.

Design para Interrupção

Nós vivemos num mundo de interrupção. Algo está constantemente tentando nos distrair e direccionar nossa atenção para outro lugar.

Por exemplo, os utilizadores podem usar seu aplicativo enquanto aguardam o comboio. É essencial projectar para a mentalidade móvel. Tornar mais fácil para os utilizadores voltarem a interagir com um aplicativo quando retornarem após a interrupção.

O Twitter é um bom exemplo de design para interrupção. o écran de notificação do aplicativo mostra todas as notificações recentes. Contanto que o utilizador permaneça nesse écran, o aplicativo não actualiza a lista automaticamente. Ele simplesmente mostra um status "X nova notificação" no topo da lista. Isso permite que os utilizadores não percam a sua posição actual quando voltarem a interagir com o aplicativo após um determinado período de tempo.

Esforce-se para criar uma experiência multicanal

Aplicativos móveis não vivem no vácuo.

Por exemplo, os utilizadores de dispositivos móveis geralmente navegam num site de comércio eletrónico no celular e mudam para a área de trabalho para comprar. Essa transição precisa se sentir invisível.

O Spotify permite uma experiência multicanal perfeita. Você pode configurar uma playlist no seu Mac e ela estará disponível instantaneamente no seu iPhone. Quando você alterna entre dispositivos, o aplicativo lembra onde você parou.

Gestos Intuitivos

Use somente gestos mais naturais para o aplicativo da sua categoria.

Porquê? Porque os gestos são controles ocultos.

Como Thomas Joos aponta no seu artigo “Além do Botão: Abraçando a Interface Orientada ao Gesto”, a maior desvantagem de usar gestos numa interface de utilizador é a curva de aprendizado. Toda a vez que um controle visível é substituído por um gesto, a curva de aprendizagem do aplicativo aumenta. Isso acontece porque os gestos têm uma menor capacidade de descoberta - eles estão sempre ocultos e as pessoas precisam ser capazes de identificar essas opções primeiro. Por isso, é essencial usar apenas gestos amplamente aceitos (aqueles que os utilizadores esperam ter no seu aplicativo).

Um bom exemplo de um gesto apropriado para uma categoria é a atracção para actualizar para aplicativos semelhantes a feeds.

Créditos da imagem: Ramotion

Faça o app aparecer rapidamente com écrans de esqueleto

O seu aplicativo deve ser rápido e responsivo, mas você inevitavelmente enfrenta situações em que nem sempre isso é possível.

Por exemplo, a conexão com a internet pode ser muito lenta. Se você não conseguir encurtar a linha, você deve pelo menos tentar tornar a espera mais agradável. Esse pode ser o momento perfeito para écrans de esqueleto (também para containers de informações temporárias).

Um écran de esqueleto é uma versão em branco de uma página na qual a informação é gradualmente carregada. Ao contrário dos spinners de carregamento animados que focalizam a atenção do utilizador no facto do carregamento de dados, os écrans esqueléticos concentram a atenção do utilizador no progresso, em vez de nos tempos de espera.

 

Esqueleto de écran no Slack para iOS

Concentre-se na primeira experiência

Assim como uma pessoa, o seu aplicativo para dispositivos móveis não tem uma segunda hipótese de causar uma boa primeira impressão. Se você não fizer isso, poderá apostar (com 80% de confiança) que eles não voltarão.

Bom onboarding é uma obrigação

Talvez a regra mais importante para criar a integração: não deve ser genérica, deve ser benéfica para as pessoas que usarão o aplicativo.

Os designers devem considerar a integração como uma oportunidade para criar uma rampa de entrada para os utilizadores iniciantes. Ao mesmo tempo, a integração só deve ser empregada se for realmente essencial para o primeiro uso.

Um estado vazio (ou estado zero) é o estado no qual nada ainda ocorreu. Esse estado não deve ser um écran em branco (ouum  beco sem saída, como muitos designers o chamam), deve fornecer orientação e orientação para começar a usar o aplicativo.

Pegue um écran em estado de erro do Spotify como um exemplo. Isso não ajuda os utilizadores a entender o contexto e não os ajuda a encontrar a resposta para a pergunta: "O que posso fazer sobre isto?"

Nada no seu aplicativo deve ser um beco sem saída.

Agora compare-o ao estado vazio da NFL Fantasy. Esse estado zero torna uma mensagem de erro legível e útil. Uma cópia concisa, educada e instrutiva afirma claramente:

  • O que deu errado e possivelmente porque.
  • Qual é o próximo passo que o utilizador deve dar para corrigir o erro.

NFL Fantasy explica por que um utilizador não consegue ver nada e como resolvê-lo. Créditos da imagem: Emptystates

Use animação funcional para melhorar a interação

A animação resolve muitos problemas funcionais dentro das interfaces, ao mesmo tempo em que os faz sentir vivos e genuinamente responsivos.

Mostrar status do sistema

Quando um aplicativo está ocupado fazendo algo, você deve permitir que um utilizador saiba que o aplicativo não está congelado ao exibir o status do sistema. Sinais visuais de progresso dão aos utilizadores uma sensação de controle sobre o aplicativo.

Este aplicativo usa animação para notificar os utilizadores de que está carregando conteúdo agora. Créditos: Ramotion

Transição de navegação

A animação é a melhor ferramenta para descrever as transições de estado. Ele ajuda os utilizadores a compreender a mudança no layout da página, o que provocou a alteração e como iniciar a alteração novamente quando necessário.

Animação funcional pode orientar com eficiência a atenção do usuário e tornar as transições complexas fáceis de entender. Créditos: Jae-seong, Jeong

Feedback Visual

No mundo físico, os objectos respondem às nossas interacções. As pessoas esperam um nível semelhante de capacidade de resposta dos controles da interface do utilizador digital.

Um bom feedback visual torna a interação confortável para os utilizadores. Todos os elementos interactivos (como botões) devem fornecer um feedback visual perfeito.

Um botão está respondendo ao toque do utilizador. Créditos: Shakuro

Humanize a experiência digital

Personalização

A personalização é um dos aspectos mais críticos dos aplicativos móveis actualmente. É uma oportunidade de se conectar com os utilizadores e fornecer as informações de que eles precisam de uma maneira que pareça genuína.

Um bom exemplo é a Starbucks. O aplicativo usa informações fornecidas pelos utilizadores (por exemplo, o tipo de café que geralmente encomendam) para criar ofertas especiais.

Animação Deliciosa

Ao contrário da animação funcional que é usada para melhorar a clareza da interface do utilizador, uma animação deliciosa é usada para fazer a interface parecer humana. Esse tipo de animação deixa claro que as pessoas que criaram o aplicativo se importam com os utilizadores. Usar detalhes deliciosos é uma oportunidade para criar uma conexão emocional com seus utilizadores.

Créditos da imagem: Dribbble

Push The Value

Notificações irritantes são a principal razão pela qual as pessoas desinstalam aplicativos móveis (71% dos entrevistados).

Source: Appiterate Survey

Don’t send push notification just because you can — each notification should be valuable and well-timed. Here are a few things to take into account when design push notifications:

Evite enviar muitas notificações num curto período

Muitas notificações entregues num curto período de tempo podem levar a uma situação conhecida como excesso de notificação - quando um utilizador não pode continuar com as informações e simplesmente ignorá-las. Tente combinar mensagens diferentes para limitar o número total de notificações.

Horário da sua notificação

Não só o que você quer dizer é importante, mas também quando você quer dizer isso. Não envie notificações push em horários estranhos (como no meio da noite). O melhor momento para notificação por push é o horário de pico do uso móvel - das 18h às 22h.

Considere outros canais para entregar sua mensagem

A notificação push não é a única maneira de enviar uma mensagem para seus utilizadores. Use o e-mail, notificações no aplicativo e mensagens do feed de notícias para notificar os utilizadores sobre eventos importantes com base no nível de urgência e no tipo de conteúdo que você gostaria de compartilhar.

Ler 252 vezes Modificado em terça, 26 junho 2018 15:54
José Carlos Palma

José Carlos Palma é um consultor TI, criador, administrador e escritor do site Teksmart IT, cobrindo ferramentas de desenvolvimento e operações de software, aprendizagem de máquina, Network e Telecom, conteinerização e revisões de produtos nessas categorias. Um apaixonado pela sua profissão e pela temática da Informática e pelas Tecnologias de Informação. Gere um universo de informação que coloca ao serviço de todos. Se gosta de Informática, computadores e de Tecnologias de Informação inscreva-se e se desejar escrever artigos diga-nos através do nosso contacto.

Deixe um comentário

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Parceiros tecnológicos

Teksmartit Bitrix24         

Usamos cookies para melhorar nosso site e sua experiência ao usá-lo. Os cookies utilizados para o funcionamento essencial deste site já foram definidos. To find out more about the cookies we use and how to delete them, see our privacy policy.

  I accept cookies from this site.
EU Cookie Directive Module Information