O que compõe uma boa interface gráfica do usuário?

Cedo ou tarde todos os web designers e de­sen­vol­ve­do­res de software se deparam com o termo “interface do usuário” e com as diversas abre­vi­a­ções a ele as­so­ci­a­das: UI, TUI (interface do usuário de base texto) e GUI (interface gráfica do usuário). Esta última é es­pe­ci­al­mente im­por­tante, por ser res­pon­sá­vel por pro­por­ci­o­nar uma boa ex­pe­ri­ên­cia a usuários, seja de sites ou de programas. Aprenda o que significa exa­ta­mente interface do usuário e por que a interface gráfica do usuário é tão im­por­tante para o sucesso das apli­ca­ções. Ainda, conheça elementos presentes em boas UIs e exemplos a serem seguidos.

O que é interface do usuário (UI)?

Interface do usuário, fre­quen­te­mente abreviada como UI, é a interface pela qual pessoas interagem com máquinas. Ela pos­si­bi­lita que você opere seu com­pu­ta­dor, faça um pedido em uma loja on-line ou use um apli­ca­tivo no smartphone. A interface do usuário engloba todos os elementos ope­ra­ci­o­nais que usuários enxergam ou com os quais eles interagem. Ela pode variar desde simples linhas de comando baseadas em texto até ela­bo­ra­das in­ter­fa­ces gráficas. Ao mesmo tempo, a UI permite que máquinas enviem respostas a usuários, para que eles entendam se suas ações foram bem-sucedidas ou não.

É a interface do usuário que determina quão fácil ou difícil é mexer em um software ou site. Hoje em dia, contudo, criar uma interface do usuário des­com­pli­cada não é mais su­fi­ci­ente: aspectos estéticos também estão ganhando im­por­tân­cia. Uma boa UI é essencial para uma boa ex­pe­ri­ên­cia do usuário (UX). Isso quer dizer que uma boa interface do usuário (e prin­ci­pal­mente sua parte gráfica) deve tornar a ex­pe­ri­ên­cia de uso intuitiva e agradável. Por isso web designers e de­sen­vol­ve­do­res focam tanto em UI.

Quais são os di­fe­ren­tes tipos de UI?

Desde que o primeiro com­pu­ta­dor foi lançado, métodos de interação com ele não param de ser in­ven­ta­dos. No início da era com­pu­ta­ci­o­nal, in­ter­fa­ces de linha de comando (CLI) simples eram uti­li­za­das. Contudo, inovações técnicas deixaram a usa­bi­li­dade cada vez mais fácil e direta, po­pu­la­ri­zando in­ter­fa­ces naturais de usuário (NUI). Esta é, todavia, apenas uma entre diversas in­ter­fa­ces de usuário exis­ten­tes. Hoje em dia, até mesmo controlar dis­po­si­ti­vos por ondas cerebrais tornou-se possível. Conheça, abaixo, as UIs mais im­por­tan­tes, assim como suas prin­ci­pais ca­rac­te­rís­ti­cas.

Interface de linha de comando (CLI)

No começo, a UI era solitária e vazia. Por exemplo, usuários do primeiro com­pu­ta­dor MS-DOS tinham que lidar com linhas de comando e prompts em uma tela escura. Inserido o comando, a interface de linha de comando res­pon­sa­bi­li­zava-se em es­ta­be­le­cer a co­mu­ni­ca­ção com o com­pu­ta­dor. Depois que a so­li­ci­ta­ção fosse pro­ces­sada, o resultado era exibido em forma de texto. Hoje, este tipo de interface do usuário é con­si­de­rado obsoleto, mesmo que ainda seja usado pelos sistemas ope­ra­ci­o­nais Windows, em cmd.exe, uma vez que sua sintaxe ainda é am­pla­mente in­flu­en­ci­ada por seu an­te­ces­sor DOS. Controles por CLI podem ser re­a­li­za­dos ex­clu­si­va­mente pelo teclado, dis­pen­sando o uso do mouse.

Interface do usuário de base texto (TUI)

In­ter­fa­ces de usuário de base texto são mais con­ve­ni­en­tes, porém a interação com o com­pu­ta­dor também ocorre por meio do teclado. A TUI marca a transição de in­ter­fa­ces de linha de comando para in­ter­fa­ces gráficas do usuário. Até porque seu conceito foi es­ta­be­le­cido somente depois do de­sen­vol­vi­mento de in­ter­fa­ces gráficas do usuário de fato. Assim sendo, podemos definir in­ter­fa­ces de usuário de base texto tanto como uma CLI como quanto uma interface gráfica do usuário, por ser sua an­te­ces­sora, por assim dizer.

Há, contudo, uma diferença entre TUI e CLI: mais moderna, a interface do usuário de base texto utiliza a tela de forma bi­di­men­si­o­nal, em vez de se orientar por linhas. No entanto, como seu nome já diz, ela continua sendo executada por meio de textos — ge­ral­mente pro­gra­ma­do­res podem utilizar até 256 ca­rac­te­res. TUIs ainda são usadas hoje, por exemplo, por bo­o­tlo­a­ders ou programas de con­fi­gu­ra­ção do BIOS.

Interface gráfica do usuário (GUI)

In­ter­fa­ces gráficas do usuário es­ta­be­le­ce­ram um padrão mais moderno. Hoje, softwares são operados por controles gráficos e símbolos, que costumam ser baseados em objetos do mundo real. É comum que usuários utilizem o mouse e o teclado para controlar dis­po­si­ti­vos, mas telas sensíveis ao toque (tou­chs­creen) também estão se tornando cada vez mais populares. Na interface gráfica do usuário, objetos do dia a dia migraram para o mundo digital, incluindo janelas e lixeiras. Para se­le­ci­o­nar o elemento desejado, o usuário pode usar o mouse ou tocar na tela.

O design de in­ter­fa­ces gráficas do usuário é baseado, prin­ci­pal­mente, em um ambiente de trabalho tra­di­ci­o­nal. Dessa forma, todos os elementos podem ser fa­cil­mente iden­ti­fi­ca­dos, tornando a operação mais intuitiva, prin­ci­pal­mente em com­pa­ra­ção com in­ter­fa­ces de linha de comando. Até mesmo usuários menos ex­pe­ri­en­tes conseguem entender ícones e suas funções ra­pi­da­mente, já que o sig­ni­fi­cado de uma lixeira ou de um envelope (ge­ral­mente si­na­li­zando programas de e-mail ou mensagens) não requer grandes ex­pli­ca­ções. Símbolos como estes tornaram-se padrão em UI e, na­tu­ral­mente, em GUI. Não existem muitos programas gráficos cujos ícones não sim­bo­li­zam objetos reais, como pincéis, canetas e borrachas.

Interface de voz do usuário (VUI)

Mesmo que in­ter­fa­ces gráficas do usuário sejam en­con­tra­das em quase todo lugar, o de­sen­vol­vi­mento de outras in­ter­fa­ces continua a todo vapor. Com a interface de voz do usuário, você também pode interagir com máquinas usando comandos de voz. Os prin­ci­pais sistemas ope­ra­ci­o­nais atuais oferecem este tipo de UI: a Apple tem a Siri, a Microsoft tem a Cortana e o Google tem o “Hey Google/OK Google”. Como apli­ca­ções desta natureza são abertas por comandos de voz e o texto falado é au­to­ma­ti­ca­mente co­di­fi­cado, elas melhoram ainda mais a ex­pe­ri­ên­cia dos usuários. Outra vantagem de VUIs é que comandos de voz promovem aces­si­bi­li­dade.

Interface natural do usuário (NUI)

A co­mu­ni­ca­ção com máquinas se torna ainda mais intuitiva quando uma interface natural do usuário é usada. A NUI é con­si­de­rada a evolução da interface gráfica do usuário e da interface de voz do usuário. In­te­ra­tiva, ela reage a gestos, mo­vi­men­tos e voz. Além disso, a NUI também trabalha com re­co­nhe­ci­mento facial e de objetos, por meio de sensores, câmeras e mi­cro­fo­nes, para es­ta­be­le­cer uma co­mu­ni­ca­ção. Muitos smartpho­nes e tablets contam com tec­no­lo­gia baseada em interface natural do usuário. O console Wii, da Nintendo, é outro exemplo de dis­po­si­tivo que faz uso de recursos de re­co­nhe­ci­mento facial, de gestos e voz.

Em 2011, um projeto apre­sen­tado pela Microsoft ganhou grande re­per­cus­são: tratava-se da tec­no­lo­gia OmniTouch, que pos­si­bi­li­tava projetar telas sensíveis ao toque em qualquer tipo de su­per­fí­cie. Ela era baseada no Kinect, controle por movimento da Microsoft lançado para competir com o Nintendo Wii, e também usava projetor de laser e câmera especial. Essa forma de interface natural do usuário também foi de­sen­vol­vida para ser usada em movimento: o equi­pa­mento era preso ao ombro do usuário.

Outros tipos de UI

Além das UIs mais comuns apre­sen­ta­das acima, existem outros tipos de interface que ainda não chegaram ao mercado de massa, como a interface tangível do usuário (também abreviada como TUI), a interface per­cep­tiva do usuário (PUI) e a interface cérebro-com­pu­ta­dor (BCI).

• Interface tangível do usuário (TUI) é aquela em que é possível tocar. Em outras palavras, a interação com a máquina ocorre por meio da ma­ni­pu­la­ção de objetos físicos, como dados e esferas. Ao ser ma­ni­pu­lada por humanos, seja girando-a ou pres­si­o­nando-a, esta tec­no­lo­gia aciona me­ca­nis­mos que recebem ou trans­mi­tem in­for­ma­ções. In­ter­fa­ces tangíveis do usuário costumam ser usadas por museus e ex­po­si­ções.
• O de­sen­vol­vi­mento da interface per­cep­tiva do usuário (PUI) ainda está en­ga­ti­nhando, mas tem crescido com a evolução da ciência. Esta interface do usuário baseada na percepção é uma mistura de VUI, GUI e re­co­nhe­ci­mento ele­trô­nico de gestos.
• In­ter­fa­ces cérebro-com­pu­ta­dor (BCI) não são mais ex­clu­si­vi­dade de filmes de ficção ci­en­tí­fica. Por meio de eletrodos, ondas cerebrais são medidas e tra­du­zi­das em al­go­rit­mos que, por sua vez, trans­for­mam-se em comandos. Pesquisas neste campo já obtiveram bastante sucesso: entre os casos estão o de uma paciente es­ta­du­ni­dense com paralisia, que conseguiu controlar um braço robótico por pen­sa­mento. Num futuro próximo, BCIs podem re­vo­lu­ci­o­nar a forma como com­pu­ta­do­res e outras máquinas são operados.

Qual é o di­fe­ren­cial de uma boa interface do usuário?

Todo web designer e de­sen­vol­ve­dor de software deve atentar-se à im­por­tân­cia da interface do usuário. Se você quer im­pres­si­o­nar usuários do seu apli­ca­tivo, vi­si­tan­tes do seu site ou ter sucesso em sua loja on-line, é preciso tornar seu projeto o mais intuitivo e fácil de usar possível. Para isso concentre-se, pri­mei­ra­mente, no seu público-alvo: uma boa UI deve ter o design adaptado às pessoas que a utilizam. Ao trabalhar na sua interface gráfica do usuário, foque também em fun­ci­o­na­li­dade, fa­ci­li­dade de uso e estética, critérios es­sen­ci­ais para promover uma boa ex­pe­ri­ên­cia do usuário.

Durante o processo de criação de uma interface gráfica do usuário, sempre leve em con­si­de­ra­ção a usa­bi­li­dade. Se sua aplicação for difícil de usar, a estética deixará de ser im­por­tante. Para otimizar uma aplicação, realize vários testes. Estudos com usuários podem apre­sen­tar re­sul­ta­dos tão úteis quanto leituras técnicas de análises de mapas de calor. O com­por­ta­mento de um usuário pode ser mo­ni­to­rado por meio de cliques, rolagens e ras­tre­a­mento ocular, traduzido em gra­di­en­tes de cores.

Somente depois da usa­bi­li­dade vem a estética. Aqui, vale a máxima: menos é mais! O design de uma aplicação deve destacar as fun­ci­o­na­li­da­des da interface gráfica do usuário de forma es­tru­tu­rada e clara. Isso não significa que um designer não possa ser criativo. Contudo, acima de gostos pessoais, é preciso entender os gostos (e hábitos) do público-alvo, ga­ran­tindo que o design não seja um obstáculo para a fun­ci­o­na­li­dade.

Qual é a im­por­tân­cia de UIs in­tui­ti­vas?

Por que será que a palavra “intuitivo” é tão im­por­tante em se tratando de interface do usuário? Aqui está um exemplo simples: um ícone de borboleta pode ser bonito, mas não faz sentido usá-lo para sim­bo­li­zar o botão que salva arquivos, já que ninguém associa uma borboleta à ação de salvar um documento. Por outro lado, o ícone de disquete deixa bem claro qual é a sua função. Usuários re­co­nhe­cem esse tipo de ícone e costumam procurá-lo, devido à sua fa­mi­li­a­ri­dade. Portanto, lembre-se de in­cor­po­rar símbolos comuns ao seu design e não tente mudar o que já é padrão global. Recorra a símbolos fa­mi­li­a­res para assegurar uma boa ex­pe­ri­ên­cia do usuário e oferecer aos seus vi­si­tan­tes uma interface gráfica intuitiva.

O exemplo acima prova que web designers e de­sen­vol­ve­do­res de software precisam encontrar um equi­lí­brio entre estética e fun­ci­o­na­li­dade para chegar a um produto final in­te­res­sante. Otimizar a UI é um passo im­por­tante para oferecer a melhor ex­pe­ri­ên­cia possível aos usuários, o que resultará em mais con­ver­sões, re­co­men­da­ções ou até mesmo vi­ra­li­za­ção, de­pen­dendo do foco da aplicação.

Também vale a pena integrar in­ter­fa­ces do usuário adi­ci­o­nais à interface gráfica do usuário. Se um apli­ca­tivo puder ser con­tro­lado por voz, ou um notebook operado por touch, esta in­te­gra­ção garantirá maior aces­si­bi­li­dade, me­lho­rando a ex­pe­ri­ên­cia do usuário. Quanto mais al­ter­na­ti­vas de uso um produto oferece, mais flexível ele é e mais públicos ele pode alcançar.

Como a interface gráfica do usuário melhora o SEO?

Uma boa interface gráfica do usuário também tem efeito positivo sobre a oti­mi­za­ção para me­ca­nis­mos de busca (SEO). Se usuários con­se­gui­rem se localizar com fa­ci­li­dade no seu site, eles se sentirão mais con­for­tá­veis e passarão mais tempo navegando. Isso é im­por­tante, já que me­ca­nis­mos de busca re­co­nhe­cem a re­le­vân­cia de uma página baseando-se no tempo de navegação do usuário. Portanto, ao criar a GUI do seu site, coloque-se no lugar de quem o visita pela primeira vez. Caso se sinta perdido, este visitante deixará ra­pi­da­mente suas páginas, à procura de uma al­ter­na­tiva melhor. Por isso, navegação intuitiva é fun­da­men­tal.

Uma forma de facilitar a navegação é inserir links internos re­le­van­tes, que ajudarão vi­si­tan­tes a moverem-se pelas variadas seções — crawlers dos me­ca­nis­mos de busca também seguem estes links. O caminho de cada link deve ser claro e não muito longo. Para isso, eles costumam ser baseados na navegação por bre­ad­crums, que permite que usuários vi­su­a­li­zem o caminho per­cor­rido até aquela página, e volte alguns passos. A técnica deixa a interface do usuário ainda mais intuitiva.

Ge­ral­mente estes caminhos pelo site são exibidos na parte superior da página (observe o caminho do nosso Digital Guide), próximo à barra de menu. Em uma loja de roupas on-line, este caminho pode ser: “Início > Moda feminina > Calças > Jeans”.

Exemplos de in­ter­fa­ces do usuário de sucesso

Como existem diversos tipos de interface do usuário atu­al­mente, e tantas outras em de­sen­vol­vi­mento, apre­sen­tar os melhores exemplos de cada gêneros é uma tarefa im­pos­sí­vel. Assim sendo, listamos abaixo apli­ca­ções que seguem as melhores práticas de UI, apre­sen­tando in­ter­fa­ces in­tui­ti­vas e es­te­ti­ca­mente in­te­res­san­tes, para que você entenda alguns conceitos na prática e se inspire ainda mais.

Evernote

Evernote é um programa de criação de notas que podem ser fa­cil­mente sin­cro­ni­za­das, para que usuários possam acessá-las a qualquer momento, por di­fe­ren­tes dis­po­si­ti­vos. A interface gráfica do usuário da página inicial do site é elegante e exibe recursos, apli­ca­bi­li­dade e vantagens da fer­ra­menta. Todos os elementos são com­bi­na­dos de forma intuitiva, para ajudar usuários a navegar.

O processo de cadastro no Evernote é bastante simples: basta informar seu endereço de e-mail e criar uma senha — o que é muito mais agradável do que preencher longos for­mu­lá­rios de outros sites. Ainda mais prático é o recurso que permite acessar a fer­ra­menta com uma conta do Google, dis­pen­sando o (já des­com­pli­cado) processo de cadastro. Ainda, um dos pontos únicos de venda (unique selling points: USP) da solução é apre­sen­tado ime­di­a­ta­mente aos in­te­res­sa­dos: pos­si­bi­li­dade de acesso por todos os dis­po­si­ti­vos, a qualquer momento. Vídeo no plano de fundo retrata usuários em diversas situações, seja uti­li­zando a aplicação pelo desktop ou pelo notebook. Ele destaca os prin­ci­pais recursos do produto sem afetar a usa­bi­li­dade do site.

O Evernote está dis­po­ní­vel como aplicação nativa em pra­ti­ca­mente todas as pla­ta­for­mas. A interface gráfica do usuário da aplicação web é res­pon­siva e se adapta per­fei­ta­mente a qualquer tamanho de tela. O design da interface gráfica promove uma ex­pe­ri­ên­cia do usuário apri­mo­rada, já que a fer­ra­menta pode ser usada em qualquer lugar, a qualquer momento e por qualquer dis­po­si­tivo.

Google

Todo mundo conhece e usa o Google. Um dos motivos da incrível po­pu­la­ri­dade é que sua interface do usuário é simples, funcional e ainda tem apelo visual. Uma barra de pesquisa com somente duas opções é su­fi­ci­ente para o fun­ci­o­na­mento de uma das tec­no­lo­gias mais re­vo­lu­ci­o­ná­rias da história da com­pu­ta­ção. O plano de fundo branco é simples e não há nenhum design rebuscado ou menu com­pli­cado. Para des­con­trair, a empresa ainda se utiliza de doodles, sem afetar a usa­bi­li­dade do mecanismo de busca.

Os ícones de apli­ca­ções, como YouTube, News e Maps, aparecem com um clique e são fáceis de re­co­nhe­cer. Eles seguem uma lógica e destacam a função principal da res­pec­tiva solução. In­te­gra­ção com uma interface VUI deixa o site ainda mais acessível, ao permitir que usuários realizem pesquisas por voz, quando em dis­po­si­ti­vos móveis. Ao dizer “OK Google” ou “hey Google”, você pode buscar pelo que quiser.

Guia do Dropbox

Manuais de instrução costumam ser monótonos, com­pli­ca­dos e nem sempre úteis. Esta regra não se aplica ao guia de usuários do Dropbox, que venceu, em 2015, o Webby Award na categoria “Melhor interface do usuário”, por escolha popular. Ainda na página inicial, você entende por que ele foi tão aclamado pelo público: suas ins­tru­ções são claras e in­for­ma­ti­vas.

In­de­pen­den­te­mente de escolher o guia geral ou a opção voltada a ad­mi­nis­tra­do­res, você con­se­guirá a in­for­ma­ção que precisa. A navegação pelos guias é 100% clara: quanto mais você clica em ca­te­go­rias e tópicos es­pe­cí­fi­cos, mais a página rola para a direita, como um livro. Setas também permitem navegar para frente e para trás, com fa­ci­li­dade. O índice está sempre a um clique de distância. Esta interface gráfica do usuário combina estética e usa­bi­li­dade, graças a ilus­tra­ções atrativas em tons pastel e a uma navegação prática.