Ícones em Interfaces Mobile: Guiando interações a partir de representações visuais
O uso das representações visuais para exemplificar tarefas e ações já está presente em nosso cotidiano desde muito tempo. Utilizamos símbolos em quase todos os lugares para facilitar a comunicação, como por exemplo: placas com setas e sinais em aeroportos, em supermercados, placas de trânsito e muitas outras. Essa forma de transmitir mensagens através de desenhos e símbolos é muito poderosa, pois se for feita da maneira certa, pode fazer com que as pessoas entendam exatamente o que aquele símbolo significa só de olhar pra ele.
Uma representação visual que está muito presente no nosso dia a dia e que está sempre nos guiando nas interfaces que usamos são os ícones, principalmente em interfaces mobiles. Devido o espaço reduzido da tela dos celulares em relação as telas de outros dispositivos, é muito comum vermos mais ícones do que copy(labels e textos) nessas interfaces. Existem inúmeros símbolos que são utilizados por meio de diversos estilos de ícones para facilitar a nossa interação com a interface, mas para isso, é preciso utilizar a representação deles corretamente para não acabar confundindo os usuários e prejudicar sua experiência com o app.
Percepção Visual
Uma das formas mais rápidas de passar a informação para o cérebro é por meio da percepção visual. Ao ver uma imagem, o nosso cérebro procura imagens previamente vistas que são parecidas com aquela para conseguir identificar do que se trata. Isso deve ser levado em consideração quando estamos utilizando ícones para passar uma mensagem. Por mais que existam ícones que possam ser identificados em todas as partes do mundo, quando desenvolvemos um produto para um público-alvo específico devemos estudar a cultura na qual ele está inserido para entender melhor os tipos de símbolos que ele está habituado.
Em interfaces de aplicativos, temos pouco espaço para passar informações e criar interações. Utilizamos a representação visual dos ícones para melhorar a experiência do usuário e guiá-lo pela interface de uma forma que facilite o entendimento e a execução das ações.
Todo ícone utilizado para criar uma interação, deve contribuir para guiar o usuário facilitando o reconhecimento de funções e opções. Durante o processo de desenvolvimento de uma interface, precisamos ter em mente a jornada do usuário ao utilizar o produto e as interações que ele poderá realizar na interface. Com isso, é possível mapear juntamente com seu perfil, idade e conceitos culturais, maneiras para facilitar essas interações por meio dos símbolos.
Consistência
Ao fazer uma viagem para um local diferente, seja outra cidade ou país, podemos nos deparar com uma cultura totalmente diferente da qual estamos acostumados. Como turistas, é normal nessas situações procurarmos placas ou sinais para nos guiarmos ao locais, ou ao atravessar a rua. Tanto em mapas quanto em aeroportos, essas sinalizações fazem a diferença. Quando visitamos o mesmo país ou cidade mais de uma vez, se já tivermos entendido a forma de comunicação da cultura local, podemos conseguir encontrar as coisas mais facilmente. Isso se dá devido a consistência da comunicação por meio dos sinais. Uma vez que seu cérebro entende o que um sinal significa, quando ele for usado em outros lugares, você vai conseguir entender seu significado rapidamente.
Esse é um fator muito importante na construção de um ícone, pois o significado de um símbolo usado em uma tela do app deve ser o mesmo em todas as interfaces que ele for usado. Isso melhora a experiência do usuário diminuindo o tempo de processamento que o cérebro leva para entender aquele ícone.
Ações e Representações
A maneira mais comum na qual vemos a utilização de ícones é para representar objetos do mundo real e passar um sentido através do que está sendo visto. Como por exemplo, a utilização do símbolo do sino para representar notificações. Eles também são usados para representar ações, como por exemplo, os ícones que representam o gesto de dar like em algo nas redes sociais.
Quando for escolher o tipo de ícone nesse quesito para acrescentar na interface, leve em consideração que os ícones que representam ações podem vir a ocupar mais espaço que os ícones que representam visualmente algo. Por isso, estude o espaço que esse ícone vai ocupar e também qual estilo melhor representa aquela interação específica sem causar conflitos para o usuário.
Estilos de ícones
Existem vários estilos de ícones e os mais comumente utilizados são o inline e o flat. O estilo inline é caracterizado por representar os objetos ou ações só por meio de contornos, normalmente sem o preenchimento da forma. Isso facilita a percepção do ícone e de sua mensagem, pois ele retrata símbolos usados mundialmente. O contraste entre o ícone e o plano de fundo também deve ser levado em conta, pois o estilo inline não possui muito preenchimento, o que pode deixá-lo sem muito destaque dependendo da cor de fundo escolhida.
Já o estilo flat utiliza espaços mais abertos, cores brilhantes, preenchimento dos elementos e apresentam imagens mais complexas. Eles também estão focados em metáforas visuais simples e reconhecíveis, passando rapidamente para o usuário o significado necessário. Esse estilo permite que os designers sejam mais flexíveis na aplicação do poder expressivo das cores e formas, não perdendo a legibilidade dos itens apresentados. São bastante utilizados em aplicativos que tem o sistema de gameficação.
Ícones Interativos
Esse estilo de ícone está envolvido no processo de interação entre o usuário e o app e são mais usados para auxiliar na navegação. Eles podem ser tocados e ao realizar essa ação, o ícone representa por meio de uma animação a ação simbolizada por ele. Seu objetivo é informar aos usuários sobre as funções ou recursos por trás dos botões e elementos de interação, e podem ser utilizados em botões de menus.
Ícones Decorativos
Os ícones desse tipo são utilizados mais para acrescentar à estética do app do que às suas funcionalidades. Por serem ícones mais detalhados, são um aspecto significativo e que precisa ser considerado, já que o estilo e a aparência correspondem às preferências e expectativas do público-alvo e estabelecem um terreno sólido para a alta conveniência. São comumente usados em cards de onboarding e também para temas sazonais em apps.
Ícones Personalizados
Em muitos projetos, precisamos utilizar ícones diferentes dos que já são disponibilizados pelas bibliotecas de desenvolvimento, pois cada aplicativo pode ter os mais diversos estilos e isso o ajuda a se diferenciar no mercado. Mas esses ícones por serem diferentes do padrão, devem ser desenhados com mais cuidado. Dependendo da cultura do usuário, a percepção que ele tem sobre um objeto ou ação pode ser totalmente diferente da qual estamos acostumados, e isso pode afetar sua experiência com o aplicativo, caso ele não entenda o que os símbolos significam.
Alguns ícones personalizados também fogem muito da forma real do objeto ou ação que está representando. Para torna-los diferentes, muitos designers adicionam elementos a mais nos ícones que acabam dificultando sua percepção. Isso prejudica a experiência com um aplicativo a partir do momento que ícones decorativos demais são utilizados como ícones de navegação ou ícones importantes para a interação do usuário.
Como já estamos acostumados a uma certa variedade de ícones para realizar interações em apps, é importante manter a forma real de ícones que já conhecemos para facilitar seu reconhecimento. Um exemplo disso seria a lupa, que é bastante usada para simbolizar a ação de pesquisar em apps e segue um formato próprio e de fácil reconhecimento.
Ícones Semelhantes
Cada ícone na interface usado para guiar uma interação entre ela e o usuário deve ser bem pensado para o reconhecimento rápido e único. Ícones iguais ou semelhantes utilizados para representar funções diferentes gera um problema na experiência do usuário, pois são confundidos facilmente. Pelo fato da ação do usuário ao clicar em um item ser muito rápida, as representações gráficas usadas para simplificar as interações precisam ser claras e evitar confundir o usuário para não apertar em um lugar onde ele não queria ir.
Por ter experiência com outros produtos digitais, os usuários não vão perder tempo pensando o que aquele ícone deve representar ou para onde ele leva. Sempre utilize ícones que possam ser diferenciados ao olhar para eles e que representem bem a função ou item que foram desenhados para representar.
Ícones & Copy
A característica mais importante de uma boa interface é a clareza. Mesmo utilizando um ícone padrão, geralmente é mais seguro incluir uma copy para aquele item, principalmente caso o ícone em questão tenha sido alterado para um design diferente. Ícones e copy trabalhando juntos podem melhorar significativamente a experiência quando bem utilizados.
Ao acessar um app novo, os usuários podem não se sentir totalmente familiarizados com a interface, e por isso é importante passar a certeza do que os ícones representam. Isso também constrói confiança entre o app e seus usuários, além de facilitar a navegação intuitiva.
Testes Com Ícones
Quando testamos interfaces com usuários, é preciso lembrar que toda a experiência está sendo testada, e isso também inclui os ícones. Por isso, é sempre bom perguntar durante sessões de testes se o usuário compreende a linguagem gráfica utilizada pelo app. Caso tenha algum ícone que não esteja passando a informação corretamente ou de uma maneira intuitiva, com os testes é possível fazer essa validação em pouco tempo para evitar ajustes maiores no futuro.
Conclusão
Ícones são bastante usados em interfaces, por isso devemos ter um cuidado maior quando estamos desenvolvendo para produtos específicos, levando em conta alguns fatores como:
- Internacionalização
- Público alvo
- Estilo próprio do app e etc
Evite ícones com significado conflitante, teste os ícones para reconhecimento e memorização e utilize ícones com o mesmo estilo. Isso ajuda a construir uma experiência melhor para os usuários que vão utilizar seu produto e lembre-se, a linguagem visual é muito importante e sempre pode te ajudar.
Referências
