[E-book] User Experience Interface de Usuário

Prévia do material em texto

USER EXPERIENCE 
INTERFACE DE USUÁRIO 
Mundo Tech
SUMÁRIO
Fundamentos de interface de usuário ....................................................................3
Interface do Usuário (User Interface – UI) ...................................................................8
Design atômico de Brad Frost .......................................................................................9
Tipos de componentização de interfaces ..................................................................11
Referências ................................................................................................................18
3
FUNDAMENTOS DE INTERFACE DE USUÁRIO
Durante seus estudos, você perceberá que a interface do usuário (UI – User 
Interface) é o ponto de interação e de comunicação humano-computador em 
um dispositivo. Isso pode incluir telas de exibição, teclados, mouse e a aparência 
de uma área de trabalho. Em complemento, você conhecerá o trabalho de 
Brad Frost, que é um web designer comprometido com a criação de sistemas 
de design e guias de estilo que permitem que as interfaces de usuários sejam 
consistentes. Por fim, você terá contato com diversos tipos de componentes de 
interfaces. Os elementos da interface do usuário são as partes usadas para criar 
aplicativos ou sites. Eles adicionam interatividade a uma interface de usuário, 
fornecendo pontos de contato (botões, barras de rolagem, itens de menu e 
caixas de seleção) para o usuário enquanto navega. 
Este estudo se concentra em conceitos interessantes e muito populares 
na área de design: IHC, UX, UI e IxD. Neste sentido, a Interação Homem-
Computador (IHC, do inglês HCI – Human-Computer Interaction) é um campo 
científico responsável por estudar o design e o uso da tecnologia digital. IHC se 
concentra em interfaces e em como projetar, avaliar e implementar sistemas 
de computador interativos, que satisfaçam as necessidades dos usuários. No 
geral, a IHC passou por mudanças que a levaram ao advento da Experiência do 
Usuário (do inglês UX – User Experience) (INTERACTION DESIGN, 2021). Confira, 
a seguir, um infográfico que descreve a importância da experiência do usuário 
para os negócios.
4
5
Figura 1 - Infográfico: O que é User Experience Design e como isso pode ser útil no seu negócio
Fonte: Catarinas design (2022)
6
O termo UX engloba a concepção tradicional de Interação Homem-Computador 
e a expande ao abordar todas as peculiaridades das interações do usuário com 
as organizações e seus serviços/produtos. Desta forma, a experiência do usuário 
é a prioridade do ser humano no design do produto. A experiência do usuário 
está, portanto, ligada às tarefas de otimização do produto para uso satisfatório 
e à Interface do Usuário (do inglês UI – User Interface), que complementa a 
aparência, a exibição e a interatividade do produto.
Curiosidade
Na UX Conference, em San Francisco, Don Norman 
esclareceu em uma entrevista que o termo UX está 
relacionado a toda a experiência que o usuário tem com 
o produto, com a empresa e os serviços. Tudo, desde 
a forma como o atendimento ao cliente é realizada até 
a facilidade com que o produto é retirado por ele da 
embalagem. Se quiser estudar mais sobre o assunto, 
clique no link ou aproxime seu celular do QR Code a 
seguir. 
https://youtu.be/9BdtGjoIN4E
As terminologias UX e UI são partes importantes do produto e funcionam de 
forma complementar. No entanto, apesar de seus relacionamentos profissionais, 
suas funções são muito diferentes e cobrem tópicos diferenciados e que estão 
relacionados aos projetos de desenvolvimento de produtos e ao campo do 
design. O design da interface de usuário é o processo de transformar, por 
exemplo, wireframes em uma interface gráfica sofisticada. Isso melhora a 
usabilidade de um produto e cria uma conexão emocional entre o usuário final e 
o produto.
7
A experiência do usuário visa a aumentar a satisfação do usuário, melhorando 
a facilidade de uso, a acessibilidade e a satisfação resultante da interação 
do usuário com os produtos/serviços oferecidos. Já a interface do usuário se 
concentra na aparência, no leiaute e em como cada elemento do produto é 
desenvolvido, incluindo botões, textos, imagens, caixas de seleção e outros 
elementos em uma interface visual controlada pelo usuário. Acompanhe as 
principais diferenças entre os termos UX e UI, na figura, a seguir.
Figura 2 - Principais diferenças entre UX e UI
Fonte: adaptado de Gonçalves (2019)
Atenção
A arquitetura da informação é a base para um design de interface e de 
experiência do usuário adequado e eficiente para localizar informações. 
A arquitetura da informação, no design, refere-se à estrutura relacionada 
ao conteúdo de sites, aplicações web e aplicativos, por exemplo. Seu 
objetivo é organizar o conteúdo para que os usuários possam se adaptar às 
funcionalidades deste produto e encontrar tudo o que precisam com menos 
complicações.
8
Como complemento, o design de interação (IxD – Interaction Design) se 
concentra em como um usuário interage com elementos específicos do 
software. Os designers de interação respondem a perguntas como: O que 
acontece quando um usuário clica em um botão ou quando um aplicativo móvel 
faz a transição entre as telas? Estes profissionais desenvolvem recursos de 
animações, indicadores de carregamento e transições entre as páginas (PREECE 
et al., 2013).
Dica
Quer saber mais sobre UX, UI, design, pesquisa de 
usuário e outros assuntos? Acesse o link a seguir ou 
aproxime seu celular do QR code e acompanhe uma 
relação de podcasts brasileiros e de outros países que 
abordam estas temáticas e se atualize com as principais 
novidades.
https://brasil.uxdesign.cc/podcasts-ux-81f2b92593bd
Interface do Usuário (User Interface – UI)
É inegável que os clientes preferem sites com aparência impactante e recursos 
cativantes que sejam fáceis de entender e compreender. Os clientes não querem 
apenas bons serviços, mas também esperam uma experiência de usuário 
tranquila do site que visitam. Como já apresentado anteriormente, a interface 
do usuário é o local para interação e comunicação usuário-computador. A 
interface do usuário refere-se às qualidades que tornam um site, um aplicativo 
ou um software facilmente acessível. A interface do usuário é uma combinação 
de atributos e recursos que o site ou software oferece. Uma boa interface de 
usuário é uma combinação de design, boa interação humano-computador, 
gráficos atraentes, leiaute organizado, ajuste de tela adequado e boa tipografia, 
entre outras características (JOÃO, 2017; BARRETO et al., 2019).
Em geral, a interface do usuário é dividida em algumas subcategorias. 
Acompanhe.
 › Um terminal, que é a plataforma que fornece o ambiente de Interface de 
Linha de Comando (Command Line Interface – CLI). Este é um tipo de interface 
não gráfica baseada em texto para o sistema do computador, em que o 
usuário digita um comando e o computador o executa.
https://brasil.uxdesign.cc/podcasts-ux-81f2b92593bd
9
 › Interface Gráfica do Usuário (Graphical User Interface – GUI), como os 
sistemas operacionais de desktop e sistemas operacionais móveis que usam 
elementos gráficos em suas interfaces para realizar ações.
 › Assistentes inteligentes de interfaces controladas por voz (Voice User 
Interface – VUI), como Siri, Alexa e o assistente do Google interagem com 
humanos com voz artificial.
 › As interfaces baseadas em gestos, que são o tipo mais recente e incluem 
espaços de design 3D, jogos de realidade virtual etc.
Uma interface de usuário de qualidade cria um ambiente confiável em 
toda a plataforma que os usuários consideram confiável. Os clientes são 
automaticamente atraídos para a plataforma, que é bem projetada, fácil de 
navegar e que fornece as informações corretas. Ter uma boa experiência do 
usuário mantém sua plataforma um passo à frente dos concorrentes e ajuda 
você a se destacar para seu público (JOÃO, 2017; BARRETO et al., 2019).
Como mencionado anteriormente,o design da interface do usuário é uma das 
principais maneiras de aumentar o tráfego do seu site, por exemplo. Um bom 
design de interface do usuário cativa seus visitantes e os convence a permanecer 
mais tempo em seu site. Além disso, uma interface inteligente pode ajudar os 
visitantes a comprar seus produtos e proporcionar uma ótima experiência ao 
usuário (JOÃO, 2017; BARRETO et al., 2019).
A interface do usuário é um aspecto fundamental que desempenha um papel 
importante para garantir que você tenha uma identificação digital única. O 
navegador que você está usando, o software em que está trabalhando seu 
sistema operacional, os sites que você visita e todos os produtos digitais que 
você usa são exemplos sólidos da interface do usuário. A interface e o design do 
usuário tornam o acesso ao mundo digital menos complexo e mais amigável. 
Essa é a razão pela qual as grandes empresas se concentram em melhores 
interfaces de usuário.
Design atômico de Brad Frost
Ao investigar algo complexo, geralmente começa-se dissecando o problema 
nas menores partes possíveis, para depois juntá-las novamente e formar um 
todo. Isso estava passando pela mente do web designer Brad Frost quando ele 
começou a pensar em como os sistemas de design poderiam ser construídos 
de forma mais metódica. Ele se preocupou que os sistemas de design, que se 
concentram em estéticas como cor, tipografia e textura, fossem muito subjetivos. 
Então Frost criou uma metodologia inspirada nos princípios da química, 
especificamente que toda a matéria em seu núcleo é composta de átomos. 
10
Ele testou sua teoria dividindo interfaces inteiras em blocos de construção 
fundamentais, juntando depois os blocos novamente para formar algo funcional 
e reconhecível.
Frost intitulou os menores elementos HTML de átomos e os classificou como os 
blocos básicos de construção da matéria. Aplicados a interfaces web, os átomos 
são as tags HTML, como um rótulo (label) de formulário, uma entrada (input) ou 
um botão (button). Essas unidades atômicas mais básicas se unem para formar 
moléculas, como um rótulo de formulário combinado com um botão de entrada, 
e assim por diante, até que surja uma página reconhecível. O design atômico, 
uma metodologia introduzida por Brad Frost, em 2013, é baseada na ideia de 
que todo sistema de design pode ser definido como uma série de blocos de 
construção que coexistem (FROST, 2016).
Acompanhe, a seguir, uma visão geral dos componentes que fazem parte do 
design atômico, conforme definido por Frost (2016). 
 › Átomos: representam os blocos de construção básicos de um sistema de 
design. Um exemplo é um botão ou um estilo de texto.
 › Moléculas: um grupo de átomos trabalhando juntos como uma unidade. 
As moléculas são elementos tangíveis da interface do usuário. Por exemplo, 
um botão e um campo de texto podem ser agrupados para criar um 
formulário de pesquisa.
 › Organismos: átomos e moléculas trabalhando juntos em uma estrutura 
complexa. Um campo de pesquisa agrupado com uma barra de navegação 
forma um organismo de cabeçalho em um site.
 › Templates (modelos): objetos de nível de página que colocam 
componentes em um leiaute, que define a estrutura do conteúdo. Por 
exemplo, utilizar um organismo de cabeçalho e colocá-lo em um modelo de 
página inicial.
 › Páginas: instâncias de modelos que representam o produto final.
Figura 3 - Elementos do design atômico
Fonte: Guerrato (2013)
11
Usar o design atômico para criar e manter um sistema de design ajudará os 
designers a trabalhar com mais eficiência e a se comunicar melhor com suas 
equipes. Há uma infinidade de ferramentas e métodos para criar e manter 
sistemas de design, mas geralmente as melhores ferramentas são aquelas com 
as quais o designer está mais familiarizado (FROST, 2016).
Tipos de componentização de interfaces
Ao projetar sua interface, tente ser consistente e previsível na escolha dos 
elementos da interface. Quer estejam cientes disso ou não, os usuários se 
familiarizaram com os elementos que agem de uma determinada maneira. 
Portanto, optar por adotar esses elementos quando apropriado ajudará na 
conclusão, eficiência e satisfação da tarefa.
Os elementos da interface do usuário incluem alguns componentes, conforme 
mostrados na figura, a seguir (GARRETT, 2010).
 › Controles de entrada: botões, alternâncias, campos de texto, caixas de 
seleção, botões de opção, listas suspensas, caixas de listagem, campos de 
data e hora.
 › Componentes de navegação: trilha de navegação, paginação, tags, barra 
de opções, controle deslizante, campo de pesquisa, ícones.
 › Componentes informativos: dicas de ferramentas, barra de progresso, 
notificações, caixas de mensagem, janelas modais.
 › Recipientes: acordeão.
Figura 4 - Exemplos de componentes de interface de usuário
Fonte: Steinle (2022)
12
Confira, no quadro, a seguir, os principais componentes de interfaces para 
controles de entrada, exemplificados a partir da ferramenta Balsamiq.
Elemento Descrição Exemplos
Caixas de 
seleção
As caixas de seleção permitem 
que o usuário selecione 
uma ou mais opções de um 
conjunto.
Botões de 
opção rádio
Os botões de opção rádio são 
usados para permitir que os 
usuários selecionem um item 
por vez.
Listas 
suspensas
As listas suspensas permitem 
que os usuários selecionem 
um item por vez, semelhante 
aos botões de opção rádio, 
mas são mais compactas, 
permitindo economizar 
espaço.
Escalonador
Steppers permitem que os 
usuários ajustem um valor. 
No entanto, ao contrário dos 
controles deslizantes, eles 
permitem que os usuários 
alterem o valor apenas em 
incrementos predefinidos.
Caixas de 
listagem
Caixas de listagem, como 
caixas de seleção, permitem 
que os usuários selecionem 
vários itens por vez, mas são 
mais compactas e podem 
suportar uma lista maior de 
opções, se necessário.
Botões
Um botão indica uma ação 
ao toque e normalmente é 
rotulado com texto, um ícone 
ou ambos.
13
Elemento Descrição Exemplos
Botão de 
alternância
Um toggle permite que 
o usuário altere uma 
configuração entre dois 
estados. Eles são mais eficazes 
quando os estados ligado/
desligado são visualmente 
distintos.
Campos de 
texto
Os campos de texto permitem 
que os usuários insiram texto. 
Ele pode permitir uma única 
linha ou várias linhas de texto.
Seletores de 
data/hora
Um seletor de data permite 
que os usuários selecionem 
uma data e/ou hora. Ao usar 
o seletor, as informações 
são formatadas de forma 
consistente e inseridas no 
sistema.
Quadro 1 - Controles de entrada
Fonte: do Autor (2022)
Confira, no quadro, a seguir, os principais componentes de interfaces para 
componentes de navegação, exemplificados a partir da ferramenta Balsamiq.
14
Elemento Descrição Exemplos
Campo de 
pesquisa
Uma caixa de pesquisa 
permite que os usuários 
insiram uma palavra-chave 
ou uma frase (consulta) e 
a enviem para pesquisar 
o índice com a intenção 
de obter de volta os 
resultados mais relevantes. 
Normalmente, os campos de 
pesquisa são caixas de texto 
de linha única e geralmente 
são acompanhados por um 
botão de pesquisa.
Migalhas de 
pão
Breadcrumbs permitem que 
os usuários identifiquem sua 
localização atual dentro do 
sistema, fornecendo uma 
trilha clicável das páginas 
seguintes para navegar.
Tag
As tags permitem que os 
usuários encontrem conteúdo 
na mesma categoria. Alguns 
sistemas de marcação 
também permitem que os 
usuários apliquem suas 
próprias marcas ao conteúdo, 
inserindo-as no sistema.
Controles 
deslizantes
Um controle deslizante, 
também conhecido como 
barra de controle, permite 
que os usuários definam ou 
ajustem um valor.
Ícones
Um ícone é uma imagem 
simplificada que serve como 
um símbolo intuitivo usado 
para ajudar os usuários a 
navegar no sistema.
15
Carrossel de 
imagens
Carrosséis de imagens 
permitem que os usuários 
naveguem por um conjunto 
de elementos e selecionem 
um item, se assim o 
desejarem. Normalmente, as 
imagens são hiperlinks.
Barras de 
guiasAs tabs bars usam itens 
de barra para navegar 
entre painéis de conteúdo 
mutuamente exclusivos na 
mesma exibição.
Menus de 
navegação
Este é um elemento de 
interface do usuário com 
vários valores que o usuário 
pode selecionar. Eles são 
levados para outra área do 
site/aplicativo.
Lista de links
O recurso de lista de links é 
usado para incorporar links 
de acessos a outras páginas 
em um menu existente. Os 
links podem ser internos ou 
externos.
Quadro 2 - Componentes de navegação
Fonte: do autor (2022)
Acompanhe, no quadro, a seguir, os principais componentes de interfaces para 
componentes informativos, exemplificados a partir da ferramenta Balsamiq.
16
Elemento Descrição Exemplos
Barras de 
progresso
Uma barra de progresso 
indica onde um usuário está 
à medida que avança por 
uma série de etapas em um 
processo. Normalmente, as 
barras de progresso não são 
clicáveis.
Dicas de 
ferramentas
Uma tooltip permite que 
um usuário confira dicas ao 
passar o mouse sobre um 
item, indicando o nome ou a 
finalidade do item.
Caixas de 
mensagens
Uma caixa de mensagem 
é uma pequena janela que 
fornece informações aos 
usuários e exige que eles 
executem uma ação antes 
que possam avançar.
Quadro 3 - Componentes informativos
Fonte: do autor (2022)
Confira, no quadro, a seguir, os principais componentes de interfaces para 
recipientes, exemplificados a partir da ferramenta Balsamiq.
17
Elemento Descrição Exemplos
Acordeão
Um acordeão é uma 
lista de itens empilhados 
verticalmente que utiliza a 
funcionalidade de mostrar/
ocultar. Quando um rótulo é 
clicado, ele expande a seção 
que mostra o conteúdo. 
Pode haver um ou mais itens 
sendo exibidos de cada vez e 
podem ter estados padrões 
que revelam uma ou mais 
seções sem que o usuário 
clique.
Quadro 4 - Componentes para recipientes
Fonte: do autor (2022)
Após estudar os fundamentos de interface de usuário, você identificou 
que uma interface permite ao usuário interagir com um aplicativo ou site. A 
crescente dependência de muitas empresas em aplicativos da web e aplicativos 
móveis levou-as a priorizar a interface do usuário em um esforço para melhorar 
a experiência geral do usuário. Posteriormente, foi apresentado a você o design 
atômico de Brad Frost. Esta metodologia é inspirada nos princípios da química, 
especificamente que toda a matéria em seu núcleo é composta de átomos. 
Ele testou sua teoria dividindo interfaces inteiras em blocos de construção 
fundamentais, juntando depois os blocos novamente para formar algo funcional 
e reconhecível. Por fim, você compreendeu que, ao projetar sua interface, você 
deve ser consistente e previsível na escolha dos elementos da interface. Quer 
estejam cientes disso ou não, os usuários se familiarizaram com os elementos e 
agem de uma determinada maneira. Portanto, optar por adotar esses elementos 
quando apropriado ajudará na conclusão, na eficiência e na satisfação de 
determinada tarefa. Estes foram os principais conceitos apresentados. Avance 
em seus estudos e adquira novos conhecimentos! 
Bons estudos!
18
REFERÊNCIAS
BARRETO, Jeanine dos Santos et al. Interface humano-computador. Porto Alegre: 
SAGAH, 2019.
CATARINAS DESIGN. O que é user experience? 2022. Disponível em: http://
catarinasdesign.com.br/infograficos/oque-user-experience/ Acesso em: 30 maio 
2022.
FROST, B. Atomic design. 2016. Disponível em: https://bit.ly/31hgd9y. Acesso em: 
30 maio 2021.
GARRETT, J. J. The elements of user experience: user-centered design for the 
web and beyond. 2. ed. USA: New Riders Publishing, 2010.
GONÇALVES, T. Entendendo de uma vez o que é UI design e UX design. 2019. 
Disponível em: https://videosdeti.com.br/entendendo-de-uma-vez-o-que-e-ui-
design-e-ux-design/. Acesso em: 02 jun. 2021.
GUERRATO, D. O que é Design Atômico? 2013. Disponível em: https://tableless.
com.br/o-que-e-design-atomic/. Acesso em: 02 jun. 2022.
INTERACTION DESIGN. Human-Computer Interaction (HCI). Disponível em: https://
www.interaction-design.org/literature/topics/human-computer-interaction. Acesso 
em: 02 jun. 2021.
JOÃO, B. N. Usabilidade e Interface Homem-Máquina. São Paulo: Editora Pearson, 
2017.
PREECE, J.; ROGERS, Y; SHARP, H. Design de interação: além da interação humano-
computador. Porto Alegre: Bookman, 2013.
STEINLE, F. Componentes de IU (WIP). 2022. Disponível em: https://dribbble.com/
shots/9934658-UI-Components-WIP. Acesso em: 02 jun. 2022.
	Fundamentos de interface de usuário
	Design atômico de Brad Frost
	Tipos de componentização de interfaces
	Referências