O que é uma user interface?

Uma user interface (UI) é a parte visível e in­te­ra­tiva de um sistema de software ou hardware. Ela nor­mal­mente inclui elementos como botões, menus e ícones. No entanto, também existem in­ter­fa­ces al­ter­na­ti­vas que podem ser con­tro­la­das por texto, voz ou até mesmo pela atividade cerebral.

O que é uma UI (user interface)?

Uma user interface (UI) é o ponto de interação entre humanos e máquinas. Ela permite operar um com­pu­ta­dor, fazer um pedido em uma loja on-line ou usar um app no seu smartphone. A user interface inclui todos os elementos visíveis e in­te­ra­ti­vos, desde simples linhas de comando em texto até complexas graphical user in­ter­fa­ces.

O design de uma user interface tem um grande impacto em quão fácil e con­for­tá­vel é usar um software ou um site. Hoje, o foco não está apenas na fun­ci­o­na­li­dade, mas também no apelo visual e na usa­bi­li­dade. A user ex­pe­ri­ence (UX) tornou-se, portanto, um aspecto central do UI Design. O objetivo é criar in­ter­fa­ces in­tui­ti­vas que apoiem uma jornada do usuário fluida e eficiente. Embora as graphical user in­ter­fa­ces ainda sejam a abordagem mais comum, novos e ino­va­do­res tipos de UI estão moldando cada vez mais a forma como as pessoas interagem com sistemas digitais.

Quais são os tipos de UI que existem?

Desde a invenção dos com­pu­ta­do­res, os métodos de interação humano–máquina vêm evoluindo de forma contínua. Hoje, existe uma grande variedade de tipos de user interface. Os primeiros sistemas dependiam de simples command-line in­ter­fa­ces (CLI), enquanto inovações pos­te­ri­o­res, como as natural user in­ter­fa­ces (NUI), tornaram a interação mais intuitiva e direta. A tabela a seguir oferece uma visão geral dos tipos de UI mais im­por­tan­tes, antes de serem ex­pli­ca­dos em mais detalhes.

Command Line In­ter­fa­ces (CLI)

Nos primeiros tempos, as user in­ter­fa­ces eram tão mínimas quanto os próprios primeiros sistemas de com­pu­ta­dor. As telas nor­mal­mente exibiam nada além de uma linha de comando e um prompt indicando a posição atual ou aguar­dando entrada, como visto nas primeiras máquinas com MS-DOS. Os usuários in­te­ra­giam com o sistema digitando comandos por meio de uma command-line interface. O com­pu­ta­dor então pro­ces­sava a entrada e retornava o resultado em forma de texto.

Embora esse tipo de interface seja hoje con­si­de­rado ul­tra­pas­sado, ele ainda é usado em fer­ra­men­tas como o cmd.exe em sistemas Windows, onde a sintaxe em grande parte segue suas origens no DOS. A interação em uma CLI é feita to­tal­mente por meio do teclado, sem o uso de mouse.

Em resumo:

✓ A CLI é o primeiro método para operar a user interface. ✓ Com uma user interface baseada em texto, a interação é con­tro­lada por meio da entrada via teclado. ✓ As entradas são digitadas e exe­cu­ta­das em uma linha de comando (orientada por linha).

Text User Interface (TUI)

As text user in­ter­fa­ces são mais fáceis de usar do que as command-line in­ter­fa­ces, embora a interação ainda ocorra to­tal­mente via teclado. Elas re­pre­sen­tam uma fase de transição entre as pure command-line in­ter­fa­ces e as graphical user in­ter­fa­ces. O termo “TUI” foi in­tro­du­zido após a ampla adoção das GUIs para dis­tin­guir cla­ra­mente as in­ter­fa­ces baseadas em texto tanto das CLIs quanto dos sistemas gráficos.

Ao contrário das CLIs, as TUIs usam a tela inteira em vez de uma única linha, per­mi­tindo layouts mais es­tru­tu­ra­dos. No entanto, elas ainda operam em modo de texto. Nor­mal­mente, há um conjunto fixo de ca­rac­te­res dis­po­ní­vel, que pode ser or­ga­ni­zado para criar menus, janelas ou elementos simples de user interface. As TUIs ainda são usadas hoje, por exemplo, em bo­o­tlo­a­ders ou programas de con­fi­gu­ra­ção da BIOS.

Ao contrário das CLIs, as TUIs usam a tela inteira em vez de uma única linha, per­mi­tindo layouts mais es­tru­tu­ra­dos. No entanto, elas ainda operam em modo de texto. Nor­mal­mente, há um conjunto fixo de ca­rac­te­res dis­po­ní­vel, que pode ser or­ga­ni­zado para criar menus, janelas ou elementos simples de user interface. As TUIs ainda são usadas hoje, por exemplo, em bo­o­tlo­a­ders ou programas de con­fi­gu­ra­ção da BIOS.

✓ As TUIs são text-based user in­ter­fa­ces que usam a tela inteira e suportam layouts mais complexos do que as CLIs.

Se você pode sonhar, nós Podemos criar!

Sem tempo de criar um site? Deixe que a gente tome conta disso! Com o serviço de design MyWebsite, nosso time de es­pe­ci­a­lis­tas em web design vai construir um site com padrão de agência para o seu negócio ou projeto, mas por uma fração do preço.

• Domínio per­ma­nente
• Cer­ti­fi­cado SSL
• Conta de e-mail

Faça o teste

Graphical User In­ter­fa­ces (GUI)

GUIs (Graphical User In­ter­fa­ces), ou seja, in­ter­fa­ces gráficas de usuário, são o padrão es­ta­be­le­cido hoje. Agora, o software é operado por meio de controles e ícones gráficos, muitas vezes vi­su­al­mente ins­pi­ra­dos em objetos do “mundo real”. Os usuários ge­ral­mente interagem usando mouse e teclado, mas telas sensíveis ao toque hoje são igual­mente comuns. As graphical user in­ter­fa­ces in­tro­du­zi­ram elementos fa­mi­li­a­res como a área de trabalho, janelas e a lixeira no ambiente digital. Os usuários podem se­le­ci­o­nar e abrir esses elementos com ações simples, como clicar ou tocar.

O design gráfico ge­ral­mente se baseia no ambiente tra­di­ci­o­nal de es­cri­tó­rio, o que torna os elementos fáceis de re­co­nhe­cer e usar. Como resultado, a interação é mais intuitiva do que trabalhar com a lista de comandos de uma command-line interface. Mesmo ini­ci­an­tes conseguem entender ra­pi­da­mente o que os ícones re­pre­sen­tam, já que símbolos fa­mi­li­a­res, como uma lixeira ou um envelope, exigem pouca ex­pli­ca­ção. Esse tipo de linguagem visual se tornou tão padrão quanto as próprias GUIs, e a maioria dos programas gráficos usa ícones de fer­ra­men­tas que fazem re­fe­rên­cia a objetos do mundo real.

O design gráfico ge­ral­mente se baseia no ambiente tra­di­ci­o­nal de es­cri­tó­rio, o que torna os elementos fáceis de re­co­nhe­cer e usar. Como resultado, a interação é mais intuitiva do que trabalhar com a lista de comandos de uma command-line interface. Mesmo ini­ci­an­tes conseguem entender ra­pi­da­mente o que os ícones re­pre­sen­tam, já que símbolos fa­mi­li­a­res, como uma lixeira ou um envelope, exigem pouca ex­pli­ca­ção. Esse tipo de linguagem visual se tornou tão padrão quanto as próprias GUIs, e a maioria dos programas gráficos usa ícones de fer­ra­men­tas que fazem re­fe­rên­cia a objetos do mundo real.

✓ As GUIs são o padrão atu­al­mente. ✓ GUI descreve uma graphical user interface em que a operação ocorre ao clicar ou tocar em ícones gráficos.

Voice User Interface (VUI)

Embora as graphical user in­ter­fa­ces sejam hoje am­pla­mente uti­li­za­das, o de­sen­vol­vi­mento de user interface não parou aí. As voice user in­ter­fa­ces tornam possível interagir com máquinas por meio de comandos de voz. A maioria dos sistemas ope­ra­ci­o­nais modernos inclui esse tipo de interface, como a Siri da Apple ou a entrada de voz na Pesquisa Google. Os usuários podem abrir apli­ca­ti­vos falando e ter texto falado trans­crito au­to­ma­ti­ca­mente, o que pode aumentar a efi­ci­ên­cia. O controle por voz também melhora a aces­si­bi­li­dade, tornando a tec­no­lo­gia mais fácil de usar para um número maior de pessoas.

Em resumo:

✓ As VUIs oferecem uma user interface con­tro­lada por voz que permite in­te­ra­ções por meio de comandos falados. ✓ As VUIs con­tri­buem para a aces­si­bi­li­dade.

Natural User Interface (NUI)

A interação com máquinas se torna es­pe­ci­al­mente intuitiva com uma natural user interface. Uma NUI se baseia em in­ter­fa­ces gráficas e de voz ao permitir formas de co­mu­ni­ca­ção mais diretas e naturais. Ela responde a gestos, movimento e fala, e também pode in­cor­po­rar re­co­nhe­ci­mento facial e de objetos. Sensores, câmeras e mi­cro­fo­nes permitem que os usuários interajam com sistemas de diversas maneiras.

Muitos smartpho­nes e tablets modernos dependem cada vez mais de tec­no­lo­gias de NUI, e dis­po­si­ti­vos como o console Wii da Nintendo po­pu­la­ri­za­ram o controle por gestos e movimento de forma intuitiva. Smartwat­ches, bem como apli­ca­ti­vos e dis­po­si­ti­vos baseados em Augmented Reality (AR) e Virtual Reality (VR), também fazem uso extensivo de natural user in­ter­fa­ces. Recursos centrais incluem controle por gestos, re­co­nhe­ci­mento de fala e re­co­nhe­ci­mento facial, todos con­tri­buindo para uma maneira mais intuitiva de interagir com a tec­no­lo­gia. Além disso, as NUIs são cada vez mais apri­mo­ra­das com AI para in­ter­pre­tar entradas faladas e físicas com mais precisão e para conectar melhor os sistemas digitais ao mundo físico, criando uma ex­pe­ri­ên­cia de usuário mais dinâmica.

Muitos smartpho­nes e tablets modernos dependem cada vez mais de tec­no­lo­gias de NUI, e dis­po­si­ti­vos como o console Wii da Nintendo po­pu­la­ri­za­ram o controle por gestos e movimento de forma intuitiva. Smartwat­ches, bem como apli­ca­ti­vos e dis­po­si­ti­vos baseados em Augmented Reality (AR) e Virtual Reality (VR), também fazem uso extensivo de natural user in­ter­fa­ces. Recursos centrais incluem controle por gestos, re­co­nhe­ci­mento de fala e re­co­nhe­ci­mento facial, todos con­tri­buindo para uma maneira mais intuitiva de interagir com a tec­no­lo­gia. Além disso, as NUIs são cada vez mais apri­mo­ra­das com AI para in­ter­pre­tar entradas faladas e físicas com mais precisão e para conectar melhor os sistemas digitais ao mundo físico, criando uma ex­pe­ri­ên­cia de usuário mais dinâmica.

✓ As NUIs permitem uma operação fácil baseada em gestos, mo­vi­men­tos, fala e re­co­nhe­ci­mento de objetos. ✓ As NUIs são fre­quen­te­mente apri­mo­ra­das e oti­mi­za­das com tec­no­lo­gias de IA.

Ge­ne­ra­tive User In­ter­fa­ces (GenUI)

Uma ge­ne­ra­tive user interface (também chamada com frequên­cia de GenUI) refere-se a um novo tipo de user interface em que a in­te­li­gên­cia ar­ti­fi­cial gera ou adapta di­na­mi­ca­mente partes da interface em tempo real. Isso significa que layouts, com­po­nen­tes ou funções mudam au­to­ma­ti­ca­mente de­pen­dendo do que o usuário está fazendo ou pre­ci­sando no momento. Di­fe­ren­te­mente das UIs estáticas clássicas, que têm a mesma aparência para muitos usuários, uma ge­ne­ra­tive UI pode ser per­so­na­li­zada, sensível ao contexto e adaptada à situação, de modo que, por exemplo, in­for­ma­ções, botões ou visões re­le­van­tes sejam exibidos exa­ta­mente quando são ne­ces­sá­rios.

Uma ge­ne­ra­tive user interface (também chamada com frequên­cia de GenUI) refere-se a um novo tipo de user interface em que a in­te­li­gên­cia ar­ti­fi­cial gera ou adapta di­na­mi­ca­mente partes da interface em tempo real. Isso significa que layouts, com­po­nen­tes ou funções mudam au­to­ma­ti­ca­mente de­pen­dendo do que o usuário está fazendo ou pre­ci­sando no momento. Di­fe­ren­te­mente das UIs estáticas clássicas, que têm a mesma aparência para muitos usuários, uma ge­ne­ra­tive UI pode ser per­so­na­li­zada, sensível ao contexto e adaptada à situação, de modo que, por exemplo, in­for­ma­ções, botões ou visões re­le­van­tes sejam exibidos exa­ta­mente quando são ne­ces­sá­rios.

✓ As GenUIs são user in­ter­fa­ces geradas di­na­mi­ca­mente que funcionam com in­te­li­gên­cia ar­ti­fi­cial. ✓ Elas aprendem com dados e in­te­ra­ções para tornar a user interface sensível ao contexto, in­di­vi­du­a­li­zada e adap­ta­tiva. ✓ As ge­ne­ra­tive UIs deslocam o foco do design fixo para ex­pe­ri­ên­cias per­so­na­li­za­das.

Quais tipos especiais de UIs existem?

Além desses tipos de user interface que são comuns no dia a dia, existem algumas formas “exóticas” e inovações que ainda não chegaram ao mercado de massa. Entre elas estão a Tangible User Interface, também abreviada como TUI, a Per­cep­tual User Interface (PUI) e a Brain Computer Interface (BCI). A tabela a seguir oferece uma visão geral dessas user in­ter­fa­ces antes de serem apre­sen­ta­das in­di­vi­du­al­mente.

Tangible User Interface

Tangible User In­ter­fa­ces (também abre­vi­a­das como TUI, não confundir com Text User Interface) são user in­ter­fa­ces físicas e tangíveis. Isso significa que a interação com a máquina ocorre por meio de objetos físicos. Cubos, esferas ou outros objetos são ma­ni­pu­la­dos pelo usuário (girados, pres­si­o­na­dos etc.), acionando me­ca­nis­mos ou re­cu­pe­rando in­for­ma­ções digitais. Tangible User In­ter­fa­ces são fre­quen­te­mente usadas em museus ou em feiras co­mer­ci­ais.

Per­cep­tual User In­ter­fa­ces

O de­sen­vol­vi­mento de Per­cep­tual User In­ter­fa­ces (PUI) ainda está em sua infância, mas vem sendo cada vez mais im­pul­si­o­nado pela co­mu­ni­dade ci­en­tí­fica. Esse tipo de user interface é orientado pela percepção, o que significa que combina VUI, GUI e re­co­nhe­ci­mento ele­trô­nico de gestos.

Brain Computer In­ter­fa­ces

Brain Computer In­ter­fa­ces (BCIs) já não são mais ficção ci­en­tí­fica. Com o uso de eletrodos, a atividade cerebral pode ser medida e traduzida em comandos de controle por al­go­rit­mos. Pes­qui­sa­do­res já obtiveram primeiros sucessos, como permitir que uma paciente pa­ra­li­sada nos Estados Unidos con­tro­lasse um braço robótico usando seus pen­sa­men­tos. No futuro, as BCIs podem trans­for­mar a interação acessível com com­pu­ta­do­res e outras máquinas.

Como otimizar sua user interface?

Quem trabalha com web design deve prestar muita atenção às user in­ter­fa­ces. Se você quer engajar os usuários do seu app, atrair vi­si­tan­tes para o seu site ou ter sucesso com sua loja on-line, a ex­pe­ri­ên­cia precisa ser o mais intuitiva e simples possível. Um primeiro passo fun­da­men­tal é entender o seu público-alvo para poder adaptar tanto a user interface quanto toda a ex­pe­ri­ên­cia do usuário de acordo com esse perfil. A fun­ci­o­na­li­dade, a fa­ci­li­dade de uso e o apelo visual do seu produto são fatores es­sen­ci­ais para oferecer uma ex­pe­ri­ên­cia do usuário sólida.

Etapa 1: otimize a usa­bi­li­dade

Para melhorar sua UX, comece focando na graphical user interface. A usa­bi­li­dade deve ser sempre uma pri­o­ri­dade, incluindo quão rápida e efi­caz­mente os usuários conseguem interagir com seu produto e quão sa­tis­fei­tos eles se sentem ao fazer isso. Se um app ou site é difícil de navegar, mesmo um design vi­su­al­mente atraente não será su­fi­ci­ente para con­quis­tar os usuários.

A oti­mi­za­ção do seu site ou app nor­mal­mente exige testes apro­fun­da­dos. Pesquisas com usuários, jun­ta­mente com métodos técnicos como a análise de heatmap, podem fornecer insights valiosos. Essas fer­ra­men­tas vi­su­a­li­zam o com­por­ta­mento do usuário ao rastrear cliques, rolagem, mo­vi­men­tos do mouse ou até eye-tracking, exibindo os re­sul­ta­dos por meio de gra­di­en­tes de cores.

Etapa 2: ajustes visuais finos

Quando a fun­ci­o­na­li­dade e a fa­ci­li­dade de uso estiverem ga­ran­ti­das, você pode partir para a estética do seu projeto. Aqui, menos ge­ral­mente é mais. O design deve apoiar a fun­ci­o­na­li­dade da graphical user interface e, portanto, ser claro e bem es­tru­tu­rado. Isso não significa que pro­fis­si­o­nais de UI Design não possam ser criativos. Significa apenas que é preciso entender os hábitos de uso do seu público-alvo e evitar res­trin­gir a fun­ci­o­na­li­dade por meio do design.

A im­por­tân­cia de UI in­tui­ti­vas em web design e de­sen­vol­vi­mento de software

Por que uma user interface intuitiva é tão im­por­tante? Um exemplo simples ilustra isso. Um ícone de borboleta pode parecer atraente, mas a maioria dos usuários não o as­so­ci­a­ria à função “Salvar”. Já o ícone de disquete há muito tempo é ligado ao ato de salvar, embora essa tec­no­lo­gia esteja ul­tra­pas­sada. Os usuários esperam símbolos co­nhe­ci­dos e confiam neles ins­tin­ti­va­mente. Por isso, é im­por­tante seguir as con­ven­ções de ícones já es­ta­be­le­ci­das e só se afastar delas com muito cuidado.

Esse exemplo mostra que o web design sempre envolve equi­li­brar estética e fun­ci­o­na­li­dade. Um design vi­su­al­mente atraente, por si só, não basta se pre­ju­di­car a usa­bi­li­dade. Otimizar a user interface é essencial para oferecer a melhor ex­pe­ri­ên­cia possível ao usuário. De­pen­dendo do objetivo do site ou apli­ca­tivo, isso pode resultar em maiores taxas de conversão ou em mais re­co­men­da­ções por parte dos usuários.

Qual é o papel da graphical user interface em SEO?

Uma graphical user interface boa tem um impacto positivo no seu ranking. Se os usuários conseguem se orientar bem no seu site, eles se sentem à vontade e passam mais tempo ali, um fator im­por­tante, já que os bus­ca­do­res agora usam o tempo no site para de­ter­mi­nar o quão relevante uma página foi para uma de­ter­mi­nada busca. Ao projetar a GUI do seu site, você deve sempre se colocar no lugar dos vi­si­tan­tes que estão acessando seu site pela primeira vez. Se eles não con­se­gui­rem se localizar logo na primeira visita, vão sair ra­pi­da­mente da página e buscar al­ter­na­ti­vas mais fáceis de usar. Assim, o conceito-chave aqui, assim como no de­sen­vol­vi­mento de software, é a navegação intuitiva.

Uma boa estrutura de navegação pode ser alcançada, por exemplo, por meio de links internos re­le­van­tes que os vi­si­tan­tes podem usar para clicar e percorrer o seu site. Os web crawlers dos bus­ca­do­res também seguem esses links. Qualquer caminho deve ser sempre claro e não muito longo. Uma medida útil é a navegação por bre­ad­crumb. Ela torna a user interface muito mais amigável, já que os vi­si­tan­tes podem ver cla­ra­mente onde estão no site e para onde podem navegar de volta, se ne­ces­sá­rio.

Boas práticas de UI Design em web design

Como existem muitos tipos de user interface, seria além do escopo aqui listar boas práticas para cada categoria. No entanto, os exemplos a seguir de web design ilustram di­re­tri­zes fun­da­men­tais para uma user interface intuitiva e mostram como a im­ple­men­ta­ção pode ser feita na prática.

Evernote

Evernote é um apli­ca­tivo de anotações que permite aos usuários sin­cro­ni­zar seu conteúdo entre dis­po­si­ti­vos, tornando as ideias aces­sí­veis a qualquer momento. Sua página inicial usa uma graphical user interface limpa e bem es­tru­tu­rada, que destaca cla­ra­mente recursos, casos de uso e be­ne­fí­cios, fa­ci­li­tando para os usuários começarem a usar o serviço.

O for­mu­lá­rio de cadastro é mantido simples. Ele solicita apenas um endereço de e-mail e, em seguida, você define sua senha. Como al­ter­na­tiva, o Evernote oferece cadastro por meio de uma conta Google ou Apple, o que reduz sig­ni­fi­ca­ti­va­mente o esforço de registro para os usuários.

Evernote está dis­po­ní­vel como apli­ca­tivo nativo em pra­ti­ca­mente todas as pla­ta­for­mas. Sua interface web é to­tal­mente res­pon­siva, adaptando-se per­fei­ta­mente a di­fe­ren­tes tamanhos de tela. Essa abordagem de design melhora a ex­pe­ri­ên­cia geral do usuário, per­mi­tindo acessar e usar o app a qualquer hora, em qualquer lugar e em qualquer dis­po­si­tivo.

Google

Quase todo mundo conhece o Google, e um dos muitos motivos é que a user interface é tão simples quanto funcional e vi­su­al­mente atraente. Uma barra de pesquisa e dois botões sobre um tra­di­ci­o­nal fundo branco são su­fi­ci­en­tes para uma das tec­no­lo­gias mais re­vo­lu­ci­o­ná­rias da história da com­pu­ta­ção. Você não vai encontrar firulas de design des­ne­ces­sá­rias ou menus aninhados. Com os Google Doodles, porém, a empresa ainda demonstra senso de humor e deixa o design mais des­con­traído em ocasiões especiais, claro, sem afetar a usa­bi­li­dade.

Os ícones dos apps do YouTube, Notícias, Mapas e de outros serviços são fáceis de localizar e podem ser abertos com um único clique. Seu design é claro, intuitivo e reflete vi­su­al­mente a função de cada app. Também merece destaque a in­te­gra­ção de uma voice user interface, já que o Google oferece suporte à pesquisa por voz di­re­ta­mente em seu apli­ca­tivo móvel. Com o Voice Match ativado, o As­sis­tente reconhece sua voz e fornece re­sul­ta­dos per­so­na­li­za­dos.