Interface auto-explicativa

Eduardo Jaeger
Tendências Digitais
4 min readOct 29, 2017

Você já parou para pensar porque é fácil mexer um aplicativo, site, jogos ou outra interface, que a gente nunca entrou ou mexeu, e com mágica conseguimos fluir entre as páginas ou espaços daquela interação?! Bem, essa certa facilidade é dada graças os usos recorrentes de formas e cores, para representar algo.

Para explicar sobre as formas vou falar um pouco do designer alemão, Dieter Rams. Ele nasceu em 1932 em Wiesbaden. Dieter criou os 10 Princípios do Bom Design, e um desses princípios diz que:

“O bom design esclarece a estrutura do produto. Ou melhor ainda, ele pode fazer o produto falar: design deve ser auto-explicativo.”

Assim como o produto, a interface possui uma série de elementos recorrentes que ajudam os usuários a entender mesmo sem nunca ter usado aquela interface específica.

Agora veja esse produto feito por Dieter Rams, você saberia dizer qual sua função/finalidade?! Repare nos elementos que ele possui:

(TP 1 radio/phono combination, 1959, by Dieter Rams for Braun)

Agora vamos fragmentar algumas partes dele, e analisar com outros modelos de rádio:

Quanto às cores, elas podem trazer diferentes sensações dependendo da maneira que são usadas

Em Matrix, as cores podem representar o caminho que ele escolhera, a vermelha leva a vida real porém terá dor, sangue e sofrimento, e a verde voltará a sua vida normal, “tranquila”. E cada cor traz uma sensação conforme é colocada.

Interfaces Digitais

O uso de cores, juntamente com uma forma e também texto, se bem usados podem forçar um pré-entendimento do que seria aquilo. E o meio digital imita de certa forma o mundo físico, usando das formas e cores para representar algo.

No Flat Design esse uso é um pouco mais complicado de usar, pois esse estilo preza pelo ambiente limpo de informações, com formas e cores agradáveis e a harmonia das cores. Ou seja, menos texto, formas, profundidade e etc…

Para resolver isso, esse estilo usa sombras ou cores mais escuras para criar a impressão de profundidade e que aquilo pode ser “pressionado” pois possui uma volumetria, e dependendo da forma do ícone, nos permite entender que é algo que pode ser pressionado, arrastado e etc..

Falando em Flat Design, outro ponto que ajuda a entender os ícones é o Motion, ele é muito usado em vídeo mas também em interfaces, pois deixa o ambiente mais fluido, com a sensação de movimento e que algo vai acontecer, e por outro lado esse movimento ajuda a entender às funções de cada ícone. Isso ajuda muito em aplicativos de celulares.

Nos meios novos, como o VR (realidade virtual) ou RM (realidade mista)o uso de ícones representam regras para que os usuários possam interagir com o mundo digital. E também outro lado é a capacidade de controlar o mundo físico através de um meio digital, como usar um celular para ligar uma lâmpada, e isso reforça o porquê de usarmos referências físicas em interfaces digitais, pois de certa forma tudo se conecta, como o caso dos ícones do Photoshop, que representam ferramentas às quais existentes no mundo real.

Não somente em aplicativos, desktop, notebooks e VR, mas em todas as interfaces físicas e digitais usam parte de elementos já existentes para fazer algo que possamos usar, pois a finalidade das interfaces é justamente a interação entre máquina/software e pessoas, e quanto mais fluida agradável, melhor. Para isso usa-se regras para que a interação seja feita da melhor maneira possível, e se possível auto-explicativa para otimizar o tempo do usuário dominar a interface.

--

--