Design & UX

7 fev, 2017

Olá, 2017! Tendências para o design de interfaces no ano

Publicidade

Esse artigo parece meio atrasado, afinal estamos no começo de fevereiro já. Mas levando em consideração que ainda temos 11 meses pela frente, acho que é válido!

Bom, depois de ler vários artigos, vou destacar as tendências que achei mais interessantes e enriquecedoras para os nossos processos de UI.

1. Micro-interações, GIFs e outras animações

Não mais ou menos importante, eu quis começar com esse tópico porque ele abre discussão para um outro tema importante e relevante que é a ampliação do trabalho colaborativo entre designers e desenvolvedores.

As micro interações são pequenas animações ou transições divertidas que estão relacionadas a uma ação do usuário. Elas ajudam a entender o que aconteceu ou o que vai acontecer quando ele interage com a interface.

Fonte: webdesignerdepot.com

Para projetar esse tipo de animação de forma bacana, duas expertises precisam entrar em campo e trabalhar em conjunto: designers e desenvolvedores front-end.

Desde o início do projeto, eles vão planejar as estratégias e experimentar essas micro animações de modo que fique natural e agradável, comunicando ao usuário o status ou resultado de uma ação ou auxiliando-o a manipular algo.

2. Interfaces conversacionais

No Brasil ainda parece novidade, mas lá fora as interfaces conversacionais já estão na roda há algum tempo e continuam em alta.

Como bem explica o Fabrício Teixeira, do uxdesign.cc Brasil:

“Em linhas gerais, uma interface conversacional é aquela que acontece em forma de conversa entre um humano e uma máquina. Há quem argumente dizendo que toda interface é, na verdade, uma conversa — mas, nesse caso, a interface também tem a aparência de uma conversa, dessas que você tem com um amigo em um aplicativo como o Whatsapp, Facebook Messenger ou Hangouts”.

Novamente, o desafio aqui é alcançar uma naturalidade na interação: de modo que pareça que o usuário realmente está conversando com a máquina.

Fonte: Pinterest

Em alguns casos, a comunicação é oral inclusive, como acontece com a Siri (Apple) e o Google Assistant (Google).

Como mostra o relatório da pesquisa Digital in 2016, da “We are social”, o WhatsApp já é a 2ª plataforma social mais utilizada no Brasil. Em escala mundial, então, a intensificação de uso desse tipo de aplicativo é ainda mais acelerada. Na China, por exemplo, dá pra fazer quase tudo através do weChat: pedir comida, chamar um táxi, agendar consultas etc.

O crescimento do uso dessas plataformas claramente tendem a influenciar, cada vez mais, as interfaces e interações que serão projetadas. A tecnologia já caminha a passos largos para isso: o avanço das redes neurais, que processam linguagem, estão deixando os chatbots mais inteligentes, por exemplo.

3. Vídeos: full-screen e imersivos

Sim, ele continua sendo o tipo de conteúdo preferido. Afinal, nada chama mais (e prende) a atenção do que um vídeo. Isso porque ele é dinâmico e envolve o usuário de maneira rápida, dando o tom da comunicação de forma mais efetiva.

Fonte: https://www.google.com/maps/about/behind-the-scenes/streetview/treks/yosemite/

Além de ter belas imagens ocupando a tela inteira, o vídeo que contenha uma boa narrativa é um poderoso recurso de engajamento e uma ótima opção para contar uma história, quer seja de uma empresa ou do início de um negócio.

O recurso é bem versátil. Veja o projeto Snow Fall, do NY Times: nele, a técnica foi muito bem empregada para explicar de forma tridimensional a geografia de um local. Aliás, esse é um bom exemplo de uso de Parallax Scrolling, que vamos falar mais abaixo.

4. Tipografia realmente grande

A crescente oferta de serviços de fontes para web a baixo custo ou mesmo gratuitas, como, por exemplo, o Google Fonts, vem impulsionando a criação de uma variedade de fontes interessantes e originais.

Essas fontes trazem consigo um incentivo criativo às experimentações gráficas nos layouts, contribuindo para atribuir mais personalidade e autenticidade às interfaces.

Fonte: https://mailchimp.com/holiday-tips/

As fontes grandes acompanham muito bem ilustrações, imagens e os vídeos tela-cheia e imersivos ditos no tópico acima.

5. Cores vivas e brilhantes + gradiente

O flat design trouxe mudanças para interfaces há uns anos, propondo remover o excesso de elementos e cores dos layouts. Embora não seja uma filosofia livre de falhas, o flat design tem seu valor até hoje.

Apesar de funcional, ele causou na web um efeito de deixá-la toda muito semelhante, com uma linguagem visual homogeneizada, fraca de variações. Como resposta natural, os designers passaram a experimentar paletas de cores mais fortes e brilhantes, a fim de dar mais personalidade a suas criações.

Fonte: Spotify

Os gradientes também estão de volta, misturando e borrando os matizes mais exuberantes.

Interfaces com mais energia, calor e dinamismo podem ser alcançadas com o uso de uma paleta de cores vibrantes e suas misturas. O momento é de experimentá-las! Tendo sempre o cuidado de ter a linguagem visual em sintonia com o tom do conteúdo do projeto.

6. Longos scrolls: agora sim

Há não muito tempo, páginas com conteúdos muito extensos eram evitadas (para não dizer rejeitadas) pelos especialistas em UX por produzirem um scroll muito longo (ou rolagem). Com a disseminação do uso dos dispositivos móveis, isso começou a mudar (ainda bem!).

A rolagem é uma funcionalidade básica para navegação na web e nos aplicativos. Ela permite que os usuários escaneiem rapidamente grandes volumes de conteúdo, em um único movimento fluido.

Fonte: Creative Bloq

Além disso, é um mecanismo multifacetado: a rolagem longa funciona tanto para mobile como para desktop, servindo bem à simples leitura de um texto, para contar uma história, para Landing pages e outras experiências interativas.

7. Parallax, o efeito hipnótico

O parallax scrolling é uma técnica de web design que vem se tornando bastante popular. Ela nos diz muito sobre como a web a mudou: o usuário hoje quer envolvimento com a interface e pode-se dizer que um pouco de entretenimento também.

A técnica utiliza a rolagem para acionar animações, fazendo com que os elementos do primeiro plano e do fundo se movimentem em velocidades diferentes. O efeito visual basicamente cria a ilusão de profundidade no site.

Fonte: Creative Bloq

O efeito vai bem com layouts menos tradicionais (vai especialmente bem com narrativa que usam linguagem de quadrinhos e ilustrações, como no site Peugeot HYbrid4).

Também é preciso considerar as razões para usá-lo. Se “Ah, porque é bonito” foi a melhor resposta que você encontrou para a pergunta do porquê utilizar o efeito, então é melhor não usá-lo. Lembra daqueles sites feitos em Flash?! Super lentos, ruins de usar, mas que ficou um tempo na moda porque era o que o cliente queria. Pois então!

O parallax pode deixar o carregamento do site mais lento, ele não funciona bem para mobile e você vai precisar de cuidados extras para ter um bom SEO no seu site. O melhor conselho aqui é: aprecie com moderação.

Conclusão

Sejamos corajosos! É tempo de experimentações, de testar novos recursos e soluções. A web fica a cada dia mais interativa. O usuário espera esse contato mais próximo com as interfaces, porém com naturalidade e tendo um certo prazer também.

Tendências são um apanhado de apostas que os melhores observadores da área fazem em busca de um caminho. Algumas podem simplesmente morrer e outras perpetuar por vários anos. Nem todas são relevantes para todos os projetos. Cabe ao profissional de UX conhecê-las e saber aplicá-las de maneira que o produto final aumente o processo de satisfação do usuário e atenda aos objetivos de um projeto.