Principais considerações de interface do usuário para o melhor design de PWA

Se você ainda não ouviu falar sobre o PWA, deve mergulhar neste primeiro: “O que é o PWA? Tudo o que você precisa saber sobre Progressive Web Apps” . Em suma, são aplicações web feitas com o intuito de oferecer interfaces de usuário e experiências muito superiores às experiências oferecidas pelas tradicionais.

Neste artigo, sugeriremos as principais preocupações da interface do usuário (interface do usuário) ao projetar um PWA. Continue lendo para descobrir como você pode ter a melhor interface de usuário para seu Progressive Web Application.

Fontes do sistema

Se você deseja que os usuários se sintam confortáveis ​​ao usar seu Progressive Web App (PWA), seu estilo deve ser melhorado um pouco para corresponder ao seu sistema operacional (SO). Antes de implementar diferentes menus e botões por plataforma, basta começar com a fonte preferida do sistema, para iOS, Android, Windows separadamente.

Em outras palavras, deixe que o trabalho árduo da Microsoft (Segoe), Google (Roboto), Apple (San Francisco) ou mesmo Mozilla (Fira Sans) facilite seu trabalho, aprimorando a experiência dos usuários. Como resultado, as fontes do sistema são um item que você nunca deve deixar de fora da sua lista.

 /*iOS*/
família de fontes: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/*Android*/
família de fontes: 'RobotoRegular', 'Droid Sans', sem serifa;

/* Telefone do Windows */
família de fontes: 'Segoe UI', Segoe, Tahoma, Genebra, sans-serif;

Ícones de aplicativos

É verdade que os designers de aplicativos móveis prestam atenção especial ao design de ícones. E como seu PWA (ao adicioná-lo à tela inicial) ficará ao lado do restante dos aplicativos nativos, também deve-se pensar em seu design de ícones.

Há uma boa razão para isso. As primeiras impressões são sempre extremamente importantes, e o ícone de um aplicativo é a primeira impressão que causa no usuário. Para explicar, um usuário pode hesitar em tocar em um ícone que tenha uma aparência diferente entre os ícones de aplicativos nativos em seu telefone.

Para fazer com que seus ícones PWA se misturem com o restante dos aplicativos em seu dispositivo, ele deve ser flexível para caber em diferentes plataformas – como Android, iOS e Windows – e acomodar elementos estilísticos (sua forma, aparência com/sem planos de fundo ou em cores diferentes, etc.). Uma boa maneira de fazer isso é fazer com que o design do ícone do seu PWA corresponda – ou pelo menos se aproxime – do padrão visual dos ícones de aplicativos nativos. Uma fonte de inspiração são as diretrizes de design de materiais do Google, os ícones de materiais do Google.

 Leitura recomendada: PWA vs Native App: Qual combina melhor com você?

Interações de toque

As interações de toque devem ser implementadas muito bem, ou não.

Embora isso não seja realmente impossível, é muito difícil incorporar interações de toque avançadas, como “deslizar para dispensar” ou “puxar para atualizar”. Embora você ache que essas interações vão impressionar os usuários, esse é apenas o caso se elas funcionarem conforme o esperado. Se não, então você está em apuros.

Se seus PWAs precisarem de interações de toque avançadas, verifique se eles funcionam bem em dispositivos reais. Normalmente, isso significa que você encontrou uma implementação desse recurso que foi desenvolvida por outra pessoa com grande esforço, como visualizações brilhantes que podem ser trocadas.

Enquanto isso, você pode evitar totalmente esse problema modificando o design, dessa forma não sugerirá interações avançadas de toque, por exemplo, você pode usar as guias de navegação inferiores no lugar das guias.

Conteúdo compartilhável

No caso de Progressive Web Apps, muitas vezes a URL atual não é facilmente acessível; portanto, você deve garantir que os usuários possam compartilhar facilmente o que estão vendo. Um botão de compartilhamento pode ser integrado, permitindo que os usuários copiem a URL para a área de transferência para que ela possa ser compartilhada em sites de redes sociais proeminentes.

Uma pequena dica para este caso: se você estiver implementando botões de compartilhamento social, certifique-se de atrasar o carregamento do JavaScript de terceiros até que o conteúdo principal da página seja carregado.

Comentários de toque

Em primeiro lugar, as áreas tocáveis ​​devem fornecer feedback de toque . Quando um botão ou área tocável é tocado, o usuário não deve ficar imaginando se o toque foi reconhecido.

Procure deixar imediatamente claro que os toques foram reconhecidos. Por exemplo, isso pode ser feito destacando a região tocada em cinza (claro), mostrando uma ondulação do material ou fazendo com que uma transição de página comece imediatamente.

Exemplo de feedback de toque bem feito:

O aplicativo da web Google I/O 2016 fornece um realce cinza imediato quando uma palestra é tocada e a cor de toque azul padrão é desativada (por padrão, alguns navegadores mostram seu próprio realce quando os elementos são tocados. Esse estilo padrão não é atraente e pode entrar em conflito com seu qualidade visual da marca).

Em segundo lugar, tocar em um elemento durante a rolagem não deve acionar o feedback de toque .

Sempre que você implementar o feedback de toque, é importante que ele não seja acionado erroneamente quando o usuário estiver apenas tocando em um elemento para ROLAR a página.

Exemplo de feedback de toque dado na hora errada:

Uma versão inicial da popular biblioteca Material-UI acionava ondulações em elementos tocáveis ​​quando eles eram tocados durante os pergaminhos.

O problema foi corrigido abortando a animação de ondulação se a localização de toque do usuário se movesse mais de 6 pixels em qualquer direção nas primeiras centenas de milissegundos.

Manter a posição de rolagem na página da lista anterior

Pressionar para trás em uma página de detalhes deve manter a posição de rolagem na página da lista anterior

Quando o usuário pressiona de volta a partir de um detalhe, a página deve manter a posição de rolagem na página da lista anterior. À medida que um usuário escolhe itens de uma lista e visualiza seus detalhes, tocar de volta NÃO deve trazê-los para o topo da lista. O objetivo principal é que, enquanto o usuário toca, ele deve ser trazido de volta à página da lista “com a mesma posição de rolagem” em que estava antes de pressionar o item.

Afinal, navegar em uma lista de produtos, artigos ou outros itens fica difícil quando pressionar voltar leva o usuário ao topo da lista novamente.

Obviamente, quando você torna a navegação mais difícil para os usuários, eles tendem a não voltar.

Evite um design excessivamente “semelhante à web”

O web design “clássico” depende muito de links no texto e de elementos estáticos disponíveis em cada página, como cabeçalho e rodapé. Na verdade, esses elementos de design raramente são encontrados em aplicativos nativos, portanto, para corresponder aos modelos mentais do usuário, é recomendável evitá-los e usar um design mais semelhante ao de um aplicativo.

Por exemplo, links devem ser usados ​​com moderação. Você deve colocar os botões ou regiões tocáveis ​​com cuidado.

Além disso, rodapés de páginas estáticas que contenham links de navegação e informações de direitos autorais devem ser evitados. Inspire-se no design do aplicativo nativo para ver como informações semelhantes podem ser movidas para um menu ou não incluídas em todas as páginas.

Tema escuro

Os temas escuros estão aqui para ficar e só vão melhorar.

De acordo com os desenvolvedores do Android, o tema escuro tem muitos benefícios : Pode reduzir o uso de energia em uma quantidade significativa (dependendo da tecnologia de tela do dispositivo). Melhora a visibilidade para usuários com baixa visão e aqueles que são sensíveis à luz brilhante. Torna mais fácil para qualquer pessoa usar um dispositivo em um ambiente com pouca luz.

Aqueles que conseguirem encontrar o equilíbrio entre a acessibilidade da interface escura e a resposta emotiva de cores gritantes estarão no topo no próximo ano. Existe um guia do Google Material que pode te ajudar.

Para concluir

Os Progressive Web Apps são a necessidade do momento, pois permitem que os desenvolvedores forneçam uma experiência intuitiva da Web aos usuários em seus telefones. Simplesmente implementando essas recomendações, você pode fornecer facilmente aos usuários ótimas interfaces e experiências semelhantes a aplicativos enquanto eles usam seu PWA.

O SimiCart está aqui para responder a todas as suas perguntas e necessidades relacionadas ao PWA. E especialmente para comerciantes on-line que procuram uma solução Magento PWA perfeita para sua loja virtual de comércio eletrônico, oferecemos uma solução completa e econômica para você e sua loja.