Como redesenhar um site para parecer incrível no celular
Publicados: 2016-01-24[ Proto .io é uma ferramenta de prototipagem de aplicativos móveis usada por empreendedores e startups para criar protótipos realistas totalmente interativos que parecem aplicativos reais.]
Quinze anos atrás, passar por uma reformulação do site era um esforço muito mais simples – você simplesmente decidia como seria sua experiência no desktop, organizava seu conteúdo de acordo e criava o site. Inacreditavelmente, alguns sites ainda carecem de uma verdadeira experiência móvel, seja um redesenho de site separado ou um design responsivo bem planejado.
Às vezes, o design pode parecer um jogo interminável de recuperação, mas esses especialistas em aplicativos para dispositivos móveis podem ajudar a orientá-lo no processo de redesenhar sua experiência na Web para que fique ótima em qualquer dispositivo, desktop ou celular.
Como redesenhar um site para uma experiência móvel bonita
Handsome (@HandsomeMade) é uma empresa de design e tecnologia cujos valores fundamentais incluem “pensamento centrado no ser humano em todos os níveis” e “software propositadamente bonito e delicioso”. O diretor criativo Brandon Termini e o diretor técnico Alex Zub explicam como eles aplicam esses princípios ao redesenho de sites para dispositivos móveis:
Segundo Termini, a chave para o redesenho de um site Handsome é adotar uma “abordagem de design mobile-first”, tornando a experiência do usuário o mais elegante e fácil de usar possível. “Uma maneira de aplicarmos o design mobile-first é começar com tamanhos de tela menores, o que nos obriga a simplificar a interface o máximo possível e colocar apenas o que realmente importa na tela.”
Zub acrescenta: “Utilizar tecnologias e melhores práticas – como design responsivo e design adaptável, com sua implementação técnica compatível – é a chave. Para muitos produtos, faz sentido manter sistemas de grade responsivos, o que simplifica o esforço necessário para construí-lo, mantendo a ótima aparência em todos os tipos de telas.”
Como redesenhar um site para ficar bonito no celular
Pedimos a Termini para compartilhar algumas de suas práticas recomendadas de design visual. “Existem centenas de coisas a fazer e não fazer que compilamos ao longo dos anos”, diz ele. Estas são as três melhores práticas que ele coloca em prática no Beautiful:
- Pense cuidadosamente em sua hierarquia de layout. “Um layout bem-sucedido significa que um usuário deve ser capaz de orientá-lo sobre o que vê/leu na ordem pretendida. O bom uso do espaço em branco, teoria das cores, tipografia, etc., todos desempenham um papel fundamental nisso.”
- Use a cor apropriadamente. “Escolha as cores apropriadas para a sua marca e certifique-se de que elas se harmonizam bem entre si. Use uma cor de herói que você associa a elementos importantes da interface do usuário, como botões de chamada para ação. Certifique-se de usar cores com moderação nos lugares certos para que seu usuário flua pela interface e não fique preso.”
- A tipografia deve ser agradável aos olhos. “Certifique-se de que sua tipografia seja apropriada para a marca e legível nos dispositivos para os quais você está projetando e use tipos ornamentais com moderação.”
Testando o redesenho do seu site para dispositivos móveis
É claro que, depois de criar o site para dispositivos móveis, você precisa colocá-lo em prática para garantir uma ótima experiência do usuário. Diz Termini, “Testar frequentemente e ajustar é fundamental. Comece a testar assim que mostrar os primeiros esboços desenhados à mão com usuários em potencial e continue testando durante todo o processo, até os sistemas projetados totalmente construídos. Estar preparado para ouvir, sintetizar e interagir com o feedback é muito importante para o sucesso de qualquer produto.”
Recomendado para você:
O que significa a provisão antilucratividade para startups indianas?
Como as startups de Edtech estão ajudando a qualificação da força de trabalho da Índia e se preparando para o futuro
Ações de tecnologia da nova era esta semana: os problemas do Zomato continuam, EaseMyTrip publica...
Startups indianas pegam atalhos em busca de financiamento
Plataforma de marketing digital Logicserve Bags Financiamento de INR 80 Cr, renomeia como LS Dig...
Relatório adverte sobre o escrutínio regulatório renovado no espaço Lendingtech
Zub acrescenta: “A garantia de qualidade é uma parte essencial da construção de um produto que é usado em diferentes tipos de dispositivos. E como é praticamente impossível ter todos os dispositivos possíveis no escritório, fazemos uso de serviços online que fornecem acesso a dezenas de dispositivos 'virtuais' na nuvem, automatizando-o ao máximo. Com investimentos adequados em automação, é fácil e rápido realizar testes em vários dispositivos no futuro.”
Queríamos aprender ainda mais sobre como testar e fazer o controle de qualidade de uma reformulação de um site para dispositivos móveis. Para isso, ouvimos Simon Papineau, CEO da Crowdsourced Testing(@crowdsourcingqa). Papineau criou o Crowdsourced Testing para resolver alguns dos pontos problemáticos que ele encontrou em sua experiência testando vários aplicativos móveis, sites, jogos e muito mais.
O que funciona no desktop nem sempre funciona no celular – e vice-versa
Diz Papineau, “A única coisa que os desenvolvedores tendem a esquecer é que você não precisa da mesma profundidade ou do mesmo conteúdo em seu site para celular que você exibiria em seu site para computador. A intenção, a mentalidade e o objetivo do usuário móvel são completamente diferentes. Os visitantes não passarão 20 minutos no telefone lendo sobre a história da sua empresa e suas letras miúdas.
Em vez disso, dê a eles o que eles querem da maneira mais direta e rápida possível. Se for sua informação de contato, coloque-a diretamente na página inicial sem qualquer detalhe adicional.”
Um dos desafios, diz Papineau, é garantir que o redesenho do seu site móvel tenha uma boa aparência e bom desempenho em vários dispositivos: “Testar para ver se os sites são responsivos pode ser muito demorado e caro. A melhor coisa que uma empresa pode fazer é se concentrar nos 15 a 20 principais dispositivos que representam a maioria de suas visitas. Sempre haverá um dispositivo móvel no qual o site não parece perfeito. Mas se esse dispositivo representa 0,05% de seus visitantes, provavelmente não vale a pena o esforço extra de desenvolvimento.”
Como redesenhar um site usando design responsivo
Bob Bentz é presidente da ATS Mobile (@atsMobile), uma agência de marketing móvel de serviço completo que supervisiona o redesenho de sites para clientes em vários setores. A Bentz é apaixonada por garantir que a experiência de um site seja tão boa em um dispositivo móvel quanto em um monitor de desktop de alta resolução, e uma das principais maneiras pela qual a ATS Mobile consegue isso para seus clientes é usando um design responsivo.
Por que Design Responsivo? Um iniciador
“Responsive web design (RWD), mais comumente projetado com HTML5, será a escolha provável em quase todas as novas versões da web móvel”, diz Bentz. “Também pode ser projetado usando CSS3 e Javascript. O design responsivo tem a vantagem impressionante de ser altamente flexível, pois muda de forma fluida para acomodar qualquer dispositivo. O RWD funciona enviando o mesmo código, independentemente do dispositivo, e reorganizando-o no lado do cliente, permitindo que a mesma página da Web seja exibida em qualquer dispositivo.”
Para ver o design responsivo em ação, abra esta postagem do blog em uma tela de desktop, caso ainda não tenha feito isso (aguardaremos!). Você notará que existem vários tamanhos de janela nos quais a interface do usuário “quebra” e se reorganiza, de modo que a página pareça diferente com base no dispositivo que você usa (e no tamanho da janela dentro desse dispositivo).
Então, como exatamente o design responsivo funciona – e por que você deve usá-lo para o redesenho do seu site? “Um redesenho de site responsivo serve o mesmo código HTML no mesmo URL, independentemente de o dispositivo do usuário ser um desktop, tablet, phablet, smartphone, feature phone ou wearable (como o Apple Watch)”, diz Bentz. “Ele também pode responder de maneira diferente com base no tamanho da tela do site. Os desenvolvedores podem decidir quais gráficos e conteúdo serão usados para usuários de celulares e tablets. Texto e imagens podem ser ajustados com base em qualquer navegador ou tamanho de tela.”
Com design responsivo, você garante que não fará uma nova atualização sempre que algo mudar no status quo do dispositivo móvel. “Quando um novo dispositivo chega ao mercado e acessa seu site, não há necessidade de programação adicional se o site for construído em design responsivo”, diz Bentz. “Mais importante, porém, o design responsivo é a melhor prática de design recomendada pelo Google. Para muitos sites, o RWD alcança um equilíbrio razoável entre compatibilidade com dispositivos móveis e facilidade de implementação.”
Melhores práticas em design visual responsivo
De acordo com Bentz, levar em consideração as seguintes práticas recomendadas ajudará a melhorar a aparência e o funcionamento do redesenho do seu site responsivo:
- Um cabeçalho simples e marcante. “O cabeçalho e o mastro devem ser simples para não prejudicar os principais pontos de venda. O logotipo é a imagem chave da marca; um logotipo excessivamente horizontal pode não ficar bem em telas verticais menores.”
- Navegação fácil de usar. “A navegação é muito mais complicada em uma tela pequena. Muitas vezes, os designers usam um botão de navegação mostrado por três linhas horizontais, geralmente no canto superior direito do site. Isso é chamado de “menu de hambúrguer”, porque parece um hambúrguer cercado pelo pão. Alguns sites usam uma navegação do lado esquerdo que pode se expandir para cobrir a maior parte da tela.”
- Muitas imagens. “É difícil incluir muitas imagens na tela do celular, mas as palavras podem sobrecarregar rapidamente a interface do usuário. Portanto, os designers costumam usar carrosséis de imagens que permitem que os usuários passem por várias imagens de produtos em vez de sobrecarregar a tela com cópia.”
- Uso inteligente do rodapé. “Os consumidores estão acostumados a usar o rodapé como uma ferramenta de navegação, e ele não ocupa um espaço tão valioso quanto o cabeçalho acima da dobra. Também deve incluir o importante link 'Fale Conosco'.”
Um lindo redesenho de site começa com um lindo protótipo
Aprender a reprojetar um site para celular não é tarefa fácil, mas ter uma poderosa ferramenta de prototipagem rápida para ajudá-lo a testar a experiência faz a maior diferença. Depois de cortar a cópia, reduzir elementos e descobrir seu esquema de navegação, você pode obter rapidamente feedback dos usuários sobre se o redesenho do seu site móvel ainda é utilizável e intuitivo. Então, como Termini sugeriu, continue iterando até ter um protótipo do qual realmente se orgulhe.