Dicas essenciais para converter um site de área de trabalho em dispositivos móveis
Como os dispositivos móveis já superaram a área de trabalho em popularidade, é necessário que os projetistas projetem com dispositivos móveis em mente. O mobile-first é popular como uma técnica porque é mais fácil escalar o mobile, do que escalar o desktop.
No entanto, às vezes a escolha é tirada de suas mãos. Geralmente os designers se encontram adaptando os designs de desktops existentes para dispositivos móveis. E como alguns elementos não se traduzem bem, é essencial que os designers entendam quais ajustes específicos devem ser feitos ao projetar para a tela pequena. Veja como…
Abrace o minimalismo
Minimalismo tem sido popular em web design há anos, simplesmente porque muitas vezes ajuda a usabilidade e parece bom também. Quando se trata de dispositivos móveis, no entanto, o minimalismo é menos uma escolha estética, pois é baseado apenas na usabilidade.
De acordo com o Nielsen Norman Group, características de corte é uma necessidade no design móvel. Então, o que isso significa para os designers que tentam construir um site para dispositivos móveis a partir de um desktop já estabelecido?
Significa acabar com o que não é essencial para a experiência do usuário móvel. Por exemplo, se você estiver fazendo a transição de uma loja de comércio eletrônico de computador para dispositivo móvel, mantenha a mesma quantidade de produtos exibidos no site para dispositivos móveis. só faz sentido, porque os compradores querem encontrar tudo o que uma loja online tem a oferecer, assim como a loja online quer mostrar tudo o que tem para vender aos visitantes do site. No entanto, um grande carrossel de anúncios para as ofertas mais recentes pode ser razoavelmente reduzido um pouco.
Ocultar navegação
Uma das características mais comuns em telas móveis é o menu de hambúrguer, que quase onipresente pequeno ícone com três segmentos de linha horizontais empilhados em cima uns dos outros. Este é outro caso perfeito em que o menor tamanho de tela do dispositivo móvel força os projetistas a mudar em torno de elementos que devem ter uma determinada aparência nos desktops.
Apesar da opinião dividida sobre a presença do menu de hambúrgueres, é praticamente onipresente nas telas de dispositivos móveis, simplesmente porque essa é a melhor solução que os designers encontraram para reduzir o menu de navegação de desktops para dispositivos móveis.
Confira o famoso site do chef Bobby Flay no seu restaurante em cadeia chamado Bobby's Burger Palace. Como esperado, o menu de navegação é colocado horizontalmente na parte superior da página inicial, mas quando você vai para a versão móvel do site, o menu horizontal desaparece. Em seu lugar está o menu de hambúrguer limpo e arrumado, bem no mesmo lugar da tela, onde o menu horizontal mais longo estaria na versão desktop.
O Walmart também faz uso do menu de hambúrguer em sua transição de design de desktop para móvel.
Em seu site para computador, o Walmart exibe a navegação suspensa “Todos os departamentos”, que abre uma segunda camada de opções de navegação na mesma página. No site móvel, no entanto, esse recurso não é possível devido ao pequeno tamanho da tela, de modo que uma substituição foi projetada: a segunda camada de opções de navegação está no menu do hambúrguer e elas abrem cada vez mais opções de navegação a cada seleção Quase como folhear as páginas de um livro da esquerda para a direita.
Mudar para uma coluna única
Mantendo o fato de que quanto mais simples é melhor quando se trata de design para dispositivos móveis, você se sairá bem para seus clientes se lembrar que um layout de coluna única é mais limpo e mais fácil para os usuários operarem em uma tela menor. O grande benefício de um layout de coluna única é que você acaba com a rolagem horizontal, como se tivesse muito texto em uma página e quisesse que seus leitores passassem a tela da esquerda para a direita, para continuar lendo.
Quando você introduz um layout de coluna única, você simplifica a experiência do usuário, incentivando os usuários a simplesmente rolar para baixo para ler ou clicar em um link que desejam ver em uma nova página. Isso é melhor para forçar a passagem da esquerda para a direita, o que é mais difícil de fazer do que simplesmente rolar para baixo, especialmente quando você considera a posição do polegar do usuário em relação ao modo como ele segura um dispositivo móvel.
O site da área de trabalho do jornal The New York Times apresenta várias colunas. Isso é fácil de usar em uma área de trabalho, quando os usuários do seu cliente podem simplesmente mover o cursor da esquerda para a direita sem problemas em um trackpad ou mouse.
É claro que o site móvel do The New York Times entende como as coisas precisam mudar em telas menores, por isso introduz um design de coluna simples limpo e eficiente que aumenta a experiência do usuário, pois os leitores podem rolar sem esforço para obter mais conteúdo com seus polegares. .
Considerações sobre dispositivos móveis
Por causa da influência dos dispositivos móveis nos usuários atualmente, os designers precisam sempre projetar para dispositivos móveis. Não é bom o suficiente simplesmente projetar um site para celular junto com o site para desktop e chamar esse design para celular, embora!
Projetar para dispositivos móveis significa realmente ter em consideração os ajustes específicos que você terá que fazer para o site do seu cliente ao projetar para a tela pequena. Isso inclui tudo o que conversamos acima, desde o minimalismo no design até a ocultação da barra de navegação e a mudança para um layout de coluna única.
Ao adotar essas práticas recomendadas em seu conjunto de habilidades, você criará sites que sejam perfeitos para dispositivos móveis.