Dicas para projetar uma ótima experiência de usuário em dispositivos móveis

experiência de usuário

Com o grande número de dispositivos e tamanhos de tela, o design responsivo tornou-se um protocolo padrão, como mostra a CreativeStorm. É vital que projetemos e testemos nossos websites para garantir uma boa experiência de usuário, para que os mesmos possam navegar e acessar facilmente o conteúdo, independentemente de como eles o acessam.

Como acontece com quase tudo no espaço do web design, existem diferentes filosofias sobre como devemos abordar o design para telas menores em particular. Mas existem alguns princípios de design responsivo que todos devemos ter em mente.

Ao projetar seu próximo site, pense no seguinte conforme você personaliza para dispositivos móveis:

Legibilidade e usabilidade vêm primeiro

Todo mundo quer que seu design fique bonito em todas as telas. Mas há um perigo em tentar ser um pouco chique quando se trata de dispositivos móveis. Um layout ou recurso de alta qualidade que pareça impressionante em um desktop pode não fazer sentido para um telefone.

As coisas precisam ser simplificadas, quando apropriado. Se acontece que um elemento específico está muito desajeitado em uma tela pequena – não há vergonha em removê-lo ou substituí-lo por algo que faça o trabalho com mais eficiência.

Quando se trata de tipografia, tamanho e contraste são tão importantes (se não mais) em um telefone. Olhar para telas móveis de alta qualidade ainda pode ser um pouco tedioso ao ler artigos longos. Certifique-se de que o texto tenha um tamanho decente e que o espaçamento de linha e as margens estejam definidos para ajudar a aumentar a legibilidade.

A conclusão é que o mesmo esforço que vai para a usabilidade dos usuários de desktop também deve ser o de tornar a experiência de usuário no móvel ótima.

Tire proveito do espaço telas disponíveis

Layouts com várias colunas são onipresentes, mas as colunas com texto pesado geralmente não são apropriadas para a menor das telas. Nesse caso, faz sentido simplesmente transformar várias colunas em uma única coluna. No entanto, quando estamos falando de tablets e até mesmo de telefones mantidos na orientação paisagem, as colunas ainda podem ser bastante eficazes.

O ponto é que vale a pena o esforço extra para ver como podemos usar melhor o espaço de tela disponível para nós. Muitas vezes, passamos por essas resoluções intermediárias e nos concentramos em soluções apenas para as menores e maiores estilos de modo de exibição. Um tablet na orientação retrato, por exemplo, deve ser considerado de maneira diferente de um telefone nessa mesma exibição.

Uma das maneiras mais fáceis de implementar esse tipo de estratégia é usando o CSS Flexbox. Configurado corretamente, geralmente é muito bom em fornecer automaticamente o melhor layout para os modos de exibições atuais. Talvez seja necessário fazer alguns ajustes leves por meio de consultas de mídia, mas os resultados valem esse pouco de ajustes.

Tudo não precisa estar no mesmo ponto exato

É fácil cair na armadilha de colocar cada elemento de design no mesmo local relativo para os modos de exibição de dispositivos móveis e de desktop. E, embora o desejo de consistência seja louvável, essa abordagem às vezes pode se voltar contra as telas menores.

Por exemplo, muitos sites colocam itens como formulários de pesquisa ou ícones de mídia social no cabeçalho. Isso funciona maravilhosamente em uma tela maior, mas muitas vezes pode atrapalhar o conteúdo principal de um telefone. Isto acontece especialmente no caso das páginas secundárias, onde os usuários podem apenas querer ler o texto da página e não ter que se preocupar com todo o tipo de coisa envolta.

Há várias opções além de apenas colocar esses tipos de itens de maneira desconfortável no cabeçalho do site. Você pode considerar colocar esses itens em um botão que os exiba a pedido do usuário. Ou podem se tornar parte de qualquer solução de navegação para dispositivos móveis que você tenha implementado.

A mesma coisa também pode se aplicar a recursos como barras laterais. Outros elementos podem estar completamente ocultos. Novamente, consultas de mídia (e talvez algum código condicional) podem colocar esses itens em locais mais apropriados em dispositivos móveis. Use seu melhor julgamento sobre o que deve ir aonde.

Adicionar recursos específicos para celular

Ao pensar sobre sua estratégia de design responsivo, você pode considerar adicionar alguns pequenos toques que trazem um nível mais alto de conveniência aos usuários móveis. Esses itens geralmente não exigem muito esforço extra para implementar. No entanto, eles podem percorrer um longo caminho para melhorar a usabilidade.

Navegar em um dispositivo ativado pelo toque pode trazer alguns desafios com os quais os usuários da área de trabalho não precisam lidar. Por um lado, ter que rolar para cima a partir de uma página longa, a fim de voltar para a navegação principal é um grande ponto de dor no celular. Você pode atenuar isso até certo ponto usando a navegação que é exibida automaticamente quando detecta que o usuário está rolando para cima. Outra opção é ter um bom e velho link “Voltar ao topo” na parte inferior de cada página.

Para empresas que incentivam chamadas telefônicas, um botão clique para ligar pode ser um recurso bem-vindo. Isso pode assumir a forma de um botão tradicional que literalmente diz “ligue para nós agora” ou pelo hyperlink de qualquer menção ao número de telefone em todo o site.

Essencialmente, qualquer coisa que você possa fazer para ajudar os usuários de dispositivos móveis a interagir com sua organização vale a pena ser considerada.

Dispositivos móveis

O design responsivo é uma ferramenta incrivelmente poderosa. Podemos usá-lo para fornecer experiência de usuários da melhor forma possível em praticamente qualquer dispositivo. Mas cabe a nós, designers, aproveitar ao máximo as possibilidades.

Antes de mais nada, trata-se de garantir que os usuários de dispositivos móveis possam navegar e navegar pelo seu site com facilidade. A partir daí, tome as decisões de design mais inteligentes possíveis em relação à aparência e ao funcionamento das coisas. Se você deixar os usuários felizes, eles voltarão mais vezes (e contarão aos amigos).

Para mais artigos traduzidos relacionados ao marketing digital e design, acesse CreativeStorm e YMDA News.

Um pensamento sobre “Dicas para projetar uma ótima experiência de usuário em dispositivos móveis

  1. raincoat disse:

    Right here is the perfect web site for anyone who would like to understand this topic.
    You realize so much its almost tough to argue with you (not that I personally would want to…HaHa).
    You certainly put a fresh spin on a subject that’s been discussed for many years.

    Excellent stuff, just wonderful!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Lista de Espera Nós o informaremos quando o quando o treinamento estiver disponível. Deixe seu email para contato logo abaixo.
Email Nós não compartilharemos seu email com ninguém.
WhatsApp chat