8 maneiras de otimizar seu site para celular
Quando o mundo mudou de computadores desktop para dispositivos móveis, os designers se tornaram ainda mais focados em UX. Embora a interface do usuário desempenhe um papel importante na criação de projetos compatíveis com dispositivos móveis, a experiência do usuário agora se tornou igualmente importante, especialmente porque agora temos mais dispositivos para focar e a experiência do usuário é diferente do tipo de dispositivo.
UX é algo que ultrapassa os limites dos gráficos e da estética. Assim como Rahul Varshney, o co-criador do foster.fm diz:
Uma interface do usuário sem UX é como um pintor dando um tapa na tela sem pensar.
Rahul estava certo com essa analogia. Você pode ter a versão desktop mais atraente, fácil de usar, única e funcional do seu site, mas se não estiver levando em consideração a experiência móvel, estará apenas pintando sem pensar.
Então, o que separa uma boa experiência móvel de uma ruim? Não é muito difícil separar os principais componentes que compõem um design altamente eficaz, otimizado e focado no usuário. Mas aqui estão algumas práticas recomendadas que devem orientá-lo ao longo do caminho:
1) Não descarte primeiro o celular
Se seu website for voltado para a experiência do usuário em dispositivos móveis, convém quebrar a tradição seguindo a estratégia "primeiro para dispositivos móveis". Não há nenhum mal em adotar essa técnica quando você tem certeza de que a maioria dos usuários acessará seu website por meio de um dispositivo móvel. Assim como codemyviews sugere que o design da web para dispositivos móveis não é um nicho, na verdade, existem “1,2 bilhão de usuários da web móvel em todo o mundo” e o número não parece estar caindo tão cedo (é provável que aumente no futuro próximo). Isso pode ser um pouco desafiador no começo; mas se você estiver disposto a colocar seu usuário em primeiro lugar, vale a pena tentar.
Só porque você tem como objetivo projetar um site simples, limpo ou com foco em dispositivos móveis, não significa que não deva ser sofisticado. Karimrashid.com é um exemplo perfeito de como simplicidade e sofisticação podem ser combinadas para criar um design limpo e responsivo, mas elegante.
2) Crie layouts de fluido
Simplesmente existem muitos tamanhos de tela possíveis para escolher quais escolherão. Você precisará criar um layout que se adapte o mais perfeitamente possível a todos eles. Felizmente, layouts fluidos estão aqui para salvar o dia!
Com base em porcentagens, em vez de medidas definidas, como pixels, os layouts de fluido se tornaram o padrão entre os profissionais da Web. Eles podem ser complicados, mas garantir que o máximo de pessoas possível possa realmente usar seu site vale o esforço.
3) Apontar para a funcionalidade
O que é funcionalidade? É o que você oferece aos seus visitantes para que as coisas sejam feitas e feitas rapidamente. Com base no objetivo de seu website, todas as ferramentas, como locais de lojas mais próximos, pesquisa de produtos, análises de produtos ou conversores de moeda, devem ajudar os usuários a executar as "funções" pretendidas e atingir as metas com muito mais rapidez.
Purina , um fornecedor de alimentos para animais de estimação, é um exemplo perfeito de como tornar as “funções” mais fáceis em uma página da web. A home page tem uma caixa de pesquisa onde você pode procurar a coisa que você está procurando. Abaixo estão duas colunas separadas para o tipo de alimento animal que eles se especializam. Todo o site é fácil de navegar com coluna, botões, ferramentas e elementos de design que fazem a decisão sobre o melhor tipo de pet food - e depois compra - uma brisa.
4) Identifique seus usuários
Não tente se tornar um especialista em todos os negócios, porque pode custar-lhe um usuário típico, e ninguém quer isso. Primeiro, descubra quem são seus usuários. Em seguida, descubra seu comportamento típico de navegação na web. Uma vez que é reservado, descubra o que os faz funcionar. Usuários modernos são de dois tipos principais: aqueles que estão navegando sem um objetivo em mente e aqueles que estão procurando realizar uma tarefa. Cada um desses grupos exigiria diferentes “funções” com base em suas necessidades.
Não é difícil adivinhar a demografia dos usuários do site The Body Shop, uma vez que deixa dicas em toda a página. Como o The Body Shop é altamente focado em “ingredientes naturais” e ativismo social, as variações verdes monocromáticas, um controle deslizante de ingredientes naturais, escolha de imagens “verdes”, bem como relatórios sobre comércios, promessas e outros eventos sociais são uma compreensível conceito de design bem desenvolvido.
5) Sempre procure as bibliotecas e diretrizes do desenvolvedor
Com base na plataforma que você usará, é essencial dar uma olhada nas diretrizes da interface do usuário. Algumas plataformas permitem mais flexibilidade que outras. Seja qual for o caso, alguns componentes-chave da marca ou “assinaturas” devem permanecer.
Um desenvolvedor de aplicativos da Apple deve dar uma olhada Diretrizes da interface humana do iOS e siga os padrões da Apple quando se trata de projetar conceitos básicos, estratégias de design, elementos de UI, Icon / image design, etc. O desenvolvedor Android, por outro lado, deve aprender tudo sobre os componentes, estilo, usabilidade e layout de aplicativos Android típicos com a ajuda do Guia de desenvolvedores do Android .
6) Disponibilizar todo o conteúdo para todos os usuários
Alguns designers, em vez de fazer todo o seu conteúdo funcionar em layouts fluidos, simplesmente optam por ocultar parte dele de usuários móveis. Às vezes é porque o layout é complicado ou eles sentem que há muito conteúdo para um layout móvel. Esta é a abordagem errada.
Dar aos usuários uma versão simplificada do seu site ou aplicativo não é apenas injusto para os usuários de dispositivos móveis, mas pode ser um tiro pela culatra e perder clientes. Você pode ter que simplificar o layout ao máximo, mover algum conteúdo para outras telas para reduzir a desordem ou apenas tentar organizar tudo melhor; mas precisa estar lá .
Compare a versão de desktop do Site da BBC para a versão móvel. Embora mais simples do que costumava ser, ainda coloca todo tipo de informação por toda a tela. A versão móvel, em contraste, deixa algumas das imagens (que ainda estão disponíveis nos próprios artigos), mas mantém todas as manchetes, simplificando dramaticamente a experiência em uma tela do tamanho de um telefone.
7) Design para toque
Também é útil ter em mente o fato de que um usuário de dispositivo móvel estará usando dedos em vez de ponteiros de mouse compatíveis com precisão. Seu design deve ser fácil de navegar com dedos de todos os tamanhos e formas, considerando que todos os dispositivos móveis agora são sensíveis ao toque. Um usuário não deve precisar beliscar muito ou ampliar para tocar em algo ou preencher um formulário ou tocar em um botão. Tornos imprecisos também são muito comuns em pequenos dispositivos, que devem ser considerados no projeto com entradas ou gestos de toque suficientemente grandes para realizar o trabalho.
Aqui está um mesa de toque de Peter-Paul Koch isso pode ajudar. Observe como os eventos de toque (e outras ações) podem variar dependendo da compatibilidade do navegador e do dispositivo.
8) Use ferramentas de compressão
A quantidade de ferramentas disponíveis atualmente para tornar o trabalho de um designer menos oneroso é insondável. Você encontrará compressores de script como Compressor HTML ou Gzip compactação que removerá automaticamente comentários desnecessários, espaço em branco ou código. Miniforme CSS e Compressor CSS e mais algumas ferramentas que permitem concatenar código CSS e melhorar o desempenho. A compactação de imagem também é igualmente importante; alguns que reduzirão o tamanho de seus arquivos .jpeg e .png, mantendo a qualidade intacta incluem EWWW Image Optimizer , smush.it , optiPNG e jpegtran .
Aqui está um exemplo de um design de portfólio altamente responsivo RyJohnson . O site está cheio de imagens espetaculares não diferentes da versão para desktop. O segredo para o carregamento rápido aqui é, sem dúvida, a otimização de imagem.
