TEXTO 1

UI e UX – Entendendo suas diferenças e

convergências
PorMarketing EJCM 11 de novembro de 2021

Com a disseminação das tecnologias houve o surgimento de novas áreas no design.

Entre elas, estão o UI e o UX. Por serem ramos que surgiram em um mesmo período
pode haver uma confusão entre os termos, mas no post de hoje vamos esclarecer tudo
sobre UI e UX, onde estes se divergem ou convergem. Antes de tudo vamos entender o
que cada um deles significa:

1. Definições
Vamos começar por User Interface, o famoso UI que pode ser traduzido
como interface do usuário — Esta é a parte tangível de um projeto, a interface de um
aplicativo ou sistema, seja ele mobile ou web. A interface é aquilo que o usuário, como
consumidor final, irá interagir.

E o UX, User Experience ou experiência do usuário é como ele vai interagir com

determinado produto ou solução. UX envolve usabilidade, acessibilidade e o quão
agradável é a relação entre o usuário e seu produto. Aqui, o designer tem como
responsabilidade entender e propor soluções focadas na experiência do usuário, para
esta ser tão satisfatória ao ponto de se fidelizar como cliente.

“Não importa quão bom seja um produto se, no final, ninguém o usar” — Don Norman
2. Diferenças
O UI tende mais para o lado emocional e criativo, se assemelhando com o design
gráfico, fazendo escolhas acerca da parte visual do projeto, com a tipografia, as cores e
o layout, que significa basicamente um modo de disposição e arranjo de elementos
gráficos num espaço.

Já o UX é a área mais racional, que elabora a parte conceitual e realiza as pesquisas, a

fim de criar soluções que sejam eficazes. Das funções designadas a um designer UX,
algumas são:

 A elaboração de protótipos e wireframes (que são versões mais primitivas de

protótipos);

 O estudo sobre a persona;

 Criação de cenários e pesquisa com o usuário.

3. Onde se encontram
Então, porque essas áreas ainda são confundidas?

Vamos dar como exemplo um aplicativo. Ao olhar para este, tudo o que vemos é UI e
tudo o que fazemos é UX, e por serem tão complementares acabam se confundindo em
uma coisa só.

Para entendermos melhor como eles estão interligados vamos fazer uma analogia com
esses três bolos. Suas interfaces de usuário são diferentes (cobertura, formato e
decoração), ou seja, a apresentação, visual e até as dicas de como se interagir com eles,
como, por exemplo, em um deles há cinco cerejas distribuídas uniformemente em seu
topo, indicando que aquele é um bolo de 5 fatias.

Já o UX é como se cortássemos o bolo e olhássemos a fatia e o que há dentro dele, o

centro da experiência. Só assim podemos saber se ele está completamente assado, qual é
o recheio, se os ingredientes são de qualidade e se o sabor é agradável.
Ambos formam um único bolo e são inseparáveis, pois um bolo sem cobertura parece
inacabado e uma cobertura sem recheio perde seu propósito. E justamente por isso que
os termos acabam sendo confundidos e unificados, pois apesar de serem coisas
diferentes um complementa o outro.

2
TEXTO 2
UX e UI: conheça as semelhanças e
diferenças entre ambos
Alura30/05/2017

Boa parte dos designers mais experientes ainda confunde esses dois
conceitos. Inclusive há muitas vagas por aí que pedem "designer UX
/ UI", o que leva a crer que é a mesma coisa.

E isso te dá um ótimo motivo para ler este texto: sabendo o que cada
uma dessas coisas significa, você vai estar à frente de muitos
profissionais antigos no mercado de design, pelo menos nesse quesito.

Pronto para acabar com essa dúvida de uma vez por todas? Então confira
o que UX e UI têm de parecido e de diferente, entenda a aplicação dos
conceitos e como atingir bons resultados em cada um, nos seus futuros
jobs de design! Vamos lá!

Os significados de UX e UI
A confusão já começa pelo nome. São duas siglas parecidas, e isso, por
si só, já induz ao erro. Vamos esclarecer o significado em inglês, sua
tradução e as interpretações corretas:

User Experience (UX)

UX significa user experience ou, em bom português, “experiência do

usuário”. A palavra “usuário” aqui é muito importante, e pode ser a
chave para que você nunca mais confunda os dois termos.
Quando falamos de experiência do usuário, estamos falando de algo
subjetivo.

Isto é, por mais que um designer ou web designer se esforce, ele não tem
100% de controle sobre aquilo que as pessoas vão sentir quando
experimentarem um produto que projetou.

Uma parte da opinião das pessoas vai ser sempre emocional,

momentânea e até impulsiva, em alguns casos. Isso significa um certo
grau de imprevisibilidade na aceitação desse produto.

User Interface (UI)

Já a sigla UI significa user interface, o que, traduzido para o português,

ficaria “interface do usuário”. Neste caso, estamos falando de algo bem
mais objetivo e controlável.

O UI Designer cuida daquela parte em que o usuário interage com um

site (no caso do web design), layout ou produto.

Os botões de ligar e desligar de um celular são visíveis? O layout e as

cores de um trabalho gráfico deixam à mostra todas as informações que
o público deve visualizar? O software é intuitivo? A ordem dos
comandos se mantém na memória do usuário entre uma utilização e
outra?

Todos esses detalhes fazem parte do UI Design.

Como esses dois conceitos são aplicados

UX e UI são utilizados juntos para melhorar os efeitos do design sobre
quem tem contato com ele. Assim, uma forma didática de encarar
suas diferenças seria pensando que você melhora a interface do
usuário (UI) e, com isso, tenta criar uma melhor experiência do
usuário (UX).

Não custa repetir: você nunca mais vai fazer confusão se pensar que
pode controlar a interface de um produto ou site, mas não pode ter total
certeza de quais efeitos isso vai causar em quem está do outro lado.

Melhor dizendo, você não tem certeza antecipadamente desses efeitos.

Mas, uma vez que um produto é colocado em circulação, é interessante
recolher feedbacks de quem o utiliza e, a partir deles, entender o nível de
experiência do usuário do seu produto.

Se essa experiência não estiver no nível esperado, você faz novas

alterações ou cria uma nova interface, coloca essa nova interface em
circulação e mede os resultados dela na experiência mais uma vez.

Se for possível repetir esse processo várias vezes, é certo que o nível de
experiência do usuário do seu produto vai subir consideravelmente.

Esse é um processo bem simples e que faz parte da rotina de qualquer

designer. Automóveis, sapatos, roupas, artigos esportivos e qualquer
outra coisa em que as técnicas de interface do usuário podem ser
aplicadas seguem essa lógica.

Até mesmo o design gráfico e o web design, com seus layouts de blogs
e sites, material gráfico impresso ou para divulgação na internet.

Como fazer uso de UX e UI para uma experiência

completa do usuário
Se você parar para pensar, um produto com bom nível de experiência do
usuário tem enormes chances de se tornar um sucesso.

Por outro lado, ainda que obedeça a diversos critérios técnicos — isto é,
técnicas de UI como consistência, bons feedbacks, atalhos claros e
mensagens de erros compreensíveis —  dificilmente ele vai emplacar se
as pessoas não se envolverem emocionalmente com ele.

Alguns exemplos mostram como essa relação é curiosa. Se pensar em

uma plataforma de armazenamento em nuvem, como o Dropbox ou o
Google Drive, você vai ver que eles não alcançaram lugar de destaque
entre a concorrência apenas por requisitos técnicos. Foi preciso um algo
mais para cativar seus usuários. Já viu como foi o MVP do Dropbox?

Muita coisa da experiência do usuário, por exemplo, não tem a ver tanto
com as funcionalidades.

O site da MailChimp é bem funcional, mas tem um aspecto do seu

design — como as interações com o chimpanzé, mascote da empresa —
que transformam o envolvimento com a marca em algo absolutamente
emocional.
Essa plataforma, que oferece um software de e-mail marketing, brinca
com as expectativas das pessoas ao disparar e-mails. Por exemplo, ela
exibe animações bem-humoradas que suavizam o medo de que haja um
erro num e-mail antes de um disparo para milhares de pessoas.

Quem a utiliza tende a perceber essas brincadeiras como uma

descontração em um momento de tensão. Ou seja, a plataforma é vista
como amigável e humana, o que vai muito além do quanto seus botões
ou layout são práticos.

É possível, aliás, que haja produtos com boa interface, mas uma
experiência do usuário pobre.

E vice-versa: um produto tecnicamente ruim pode ter boa aceitação e

experiência do usuário porque as pessoas o acham bonito ou porque ele é
uma reedição de algo que foi lançado quando elas eram crianças, por
exemplo.

Mas tenha em mente que, embora subjetivo, o UX Design não é

imprevisível. Há formas muito eficazes de compreendê-lo e aplicá-lo
com sucesso. Caso contrário, não haveria especialistas nesse conceito,
como é o caso de Dain Miller. Veja como captar e prever a experiência
do usuário:

 Estudando o gosto do consumidor por meio de pesquisas: sempre

que uma empresa te contratar para desenvolver um produto,
pesquise as preferências das pessoas que vão utilizá-los.
 Mantenha um canal aberto com os usuários, em que eles possam
dar feedbacks constantes. Criadores de software e aplicativos
fazem uso desse recurso há um bom tempo.
 Seja fiel aos resultados da experiência do usuário (UX), mesmo
que elas contrariem algumas regras básicas de praticidade. Como
dissemos há pouco, nem tudo no sucesso de um produto vem do
lado racional do usuário.

Tomara que, depois de ler este texto, a confusão entre essas duas
categorias seja coisa do passado para você. E, que, além de tirar as suas
dúvidas, você tenha se divertido com a leitura!

Ao escrevê-lo, tentamos usar tudo que sabemos de interface do usuário:

organizamos o conteúdo e colocamos as informações numa linguagem
que soasse o mais próxima possível de você.
Será que deu para entender como é possível estender esses conceitos até
para outras áreas fora do design?

Design UX e UI: Do desenvolvimento da

interface a experiência do usuário
Autor

Caio Rodrigues 

Você já parou para pensar sobre o processo de planejamento de uma interface e a

relação com usuário? Pois bem, neste artigo, você entenderá melhor como este processo
funciona.

6 min leitura 4 de Junho, 2020

O design está presente em tudo que vemos. Desde um móvel planejado a uma interface
gráfica. Existem diversas áreas dentro deste segmento, mas hoje vamos falar do design
UX e UI. 

É comum ler ou ouvir coisas relacionadas a experiência do usuário. Ela é sim muito
importante mas para o desenvolvimento de um site, plataforma ou aplicativo a interface
é tão importante quanto a experiência. 

Fonte: Raffcom

Design UX
Fonte: Homem Máquina

UX significa User Experience, ou seja, o UX Design envolve um trabalho que foca

experiência do usuário. 

Imagine assim: Um agricultor precisa comprar um trator novo. Ele entra no site já com
aquela ideia fixa na cabeça. É claro que a loja online irá apresentar outros produtos para
este cliente, isso é básico de vendas, mas se aquele comprador demora a achar o que
realmente quer, a compra se torna difícil e demorada e logo ele desiste. Esta foi uma
experiência ruim. 

Agora, quando este comprador entra na loja virtual, consegue encontrar o que está
procurando e mesmo que seja oferecido outros produtos, ele consegue efetuar a compra
sem problemas. Esta é uma experiência boa.

Planejamento
Um designer UX está por trás dessas experiências. Ele é quem irá traçar a jornada do
consumidor. Aqui o profissional precisa ter seus objetivos claros. Pensando no exemplo
da loja virtual, o objetivo é que o usuário efetue uma compra. A partir daí, é preciso
pensar em formas de fazer com que a meta seja cumprida. 

Então o profissional pensa em como disponibilizar os produtos de forma simples, para

que o comprador não tenha problemas em encontrá-los, aqui ícones de busca ou tags
podem ser muito importante. 

A organização do site é um ponto que merece atenção. Se uma pessoa entra em uma
página de web com um foco e encontra uma página desorganizada e cheia de ícones
soltos, é bem possível que ela saia dali antes mesmo de procurar o que queria desde o
começo. 

É claro que este tipo de planejamento muda de acordo com o ambiente gráfico
oferecido. Imagine que o comprador está buscando um produto através de seu
smartphone. É de extrema importância que esta loja tenha uma versão mobile, e aqui
pode-se pensar que tags são mais interessantes do que campos de busca. 

Os textos precisam ser mais simples e legíveis. A quantidade de botões também pode
ser um problema, enquanto no computador a tela é maior e temos um mouse ou cursor
para dar os comandos, no celular nossas opções ficam reduzidas a canetas próprias para
este uso ou aos dedos das mãos. 

Por fim, aqui a organização é a base de tudo. Sim, nas outras versões é importante ser
organizado, mas quanto menor for a tela mais difícil será a experiência do usuário. 

Por isso este designer está sempre pensando nas emoções e experiências antigas do
usuário, para que as próximas sejam as melhores possíveis. 

No design UX, o objetivo é fazer com que o usuário tenha uma ótima experiência,
baseando-se em emoções e experiências já adquiridas.

Design UI

Fonte: Creative Concept

Este é o design de interface. Aqui o foco é na aparência que a interface gráfica terá,
integrando todas as ferramentas de vendas e opções que o site ou ambiente gráfico tem. 

Quando se pensa em interface, logo a referência que vem a mente é layout ou aparência.
Em um site a interface traz ao usuário tudo que foi desenvolvido de forma lógica e
codificada, de uma forma simples e clara. 

Para o comprador de uma loja online, pouco importa o processo de back end e front end.
O que lhe interessa, é o que é visualmente exposto.

Semiótica
Há tempos a psicologia estuda a relação das cores com as emoções humanas. No básico,
cada cor primária possui um significado e as cores que se originam dessas, seguem a
mesma linha.

 Vermelho – Amor, paixão, ambição e energia.

  Azul – Responsabilidade, paz, integridade e confiança.
 Amarelo – Energia, otimismo, diversão e lógica

Fonte: Host Internet

Outro estudo que pode ser útil aqui são os de Gestalt de 1920. São basicamente
princípios que indicam como o ser humano vê imagens, simplificando as que são mais
complexas, agrupando elementos semelhantes e reconhecendo padrões. 

Os princípios de Gestalt são: Continuação, fechamento, similaridade, simetria e ordem,

unificação e proximidade. 

Além disso outro elemento muito utilizado por designers é a espiral de Fibonacci. Ela é
basicamente uma sequência numérica que ilustra o movimento que os olhos humanos
fazem até chegar a um objetivo. Estudando mais a fundo é possível aplicar esta
sequência em elementos naturais e fisiológicos como plantas, animais e conchas.
Também está presente em várias obras como a Monalisa, O Homem Vitruviano e Moça
com brinco de pérola.
Fonte: Mega Curioso

Outro ponto importante do design UI, é a construção de signos e significados. Falando

de forma simples, os signos são objetos que carregam um significado em si. Por
exemplo, um logotipo é um signo mas que representa uma empresa. Este por sua vez
pode ser um desenho, um texto ou misto com os dois elementos. 

A semiótica, isto é, a construção de signos e significados dentro do design, pode ser

uma ferramenta aliada do desenvolvimento de interface, pois é necessário fazer a
escolha entre cores, ícones, fontes e diagramação, a fim de obter posicionamento digital,
identidade visual, layout e finalização artística.  

Resumindo, o designer ui, precisa desenvolver toda a parte estética e visual da interface.
É aqui que se decide a posição de cada ícone, as cores que ficarão melhores
visualmente, o que terá mais destaque e o que pode ficar em segundo plano.

UX + UI

Fonte: Graffersid

Agora que você já consegue diferenciar o UX e o UI, deve ter percebido que os dois se
complementam. Isso mesmo, tecnologicamente falando, um precisa do outro. Isso
porque um designer UI não pode desenvolver uma interface gráfica sem pensar na
experiência do usuário. Já o designer UX precisa da interface visual para aplicar o que
foi arquitetado. 
Imagine que o designer UX planejou o passo a passo do usuário para que este tivesse a
melhor experiência possível, mesmo assim ele ainda precisa da ajuda de elementos
estéticos para colocar ícones em evidência e sobrepor outros pontos. Da mesma forma o
desenvolvimento UI não pode simplesmente colocar ícones e cores que ficam bonitos
visualmente, sem pensar em como o usuário irá reagir.

Para alcançar o público ideal para a sua empresa, é preciso oferecer o produto de
maneira escalável e com uma experiência única. O Product Design é uma maneira
estratégica de inovar o seu negócio de maneira eficiente. Conheça essa técnica aqui.

TEXTO 3
Elementos da interface do usuário – UI
Design elements
Por David Arty
Aprenda sobre UI Design elements e conheça os principais
elementos da interface do usuário

Neste artigo vamos falar sobre os elementos da interface do usuário, ou

simplesmente, UI Design elements.

Quando falamos de UI Design, podemos, para estudo e compreensão, destrinchar os

elementos de um interface digital, porque sabemos que devemos escolher os elementos
apropriados para cada função.

Isto posto, vamos seguir com o conteúdo sobre UI Design elements. A seguir veremos
os principais elementos visuais dentro de uma interface digital.
O que é Elementos da interface do usuário – UI Design
elements?
Toda interface é composta por um conjunto de elementos. Esses elementos são criados e
alocados dentro do layout para cumprir uma função determinada dentro da interface.
Essa função pode ser tanto permitir ao usuário realizar uma ação, quanto informá-lo
sobre algo.

Dentro dos elementos da interface do usuário, temos quatro grandes divisões que
veremos a seguir.

Quais os tipos de Elementos da interface do usuário?

Basicamente temos quatro grupos de elementos de interface. Eles são distinguidos de
acordo com a sua funcionalidade dentro da interface. Esses quatro grupos são:

Controles de entrada:
São caixas de seleção, botões de opção, listas suspensas, caixas de listagem, botões,
alternâncias, campos de texto, campo de data

Componentes de navegação:
Trata-se do elementos de navegação da interface como breadcrumb, slider, campo de
pesquisa, paginação, slider, tags, ícones.

Componentes informativos:
São elementos que passam instruções importantes para o usuário como dicas de
ferramentas, ícones, barra de progresso, notificações, caixas de mensagem, janelas
modais

Containers:
Acordeão, boxes estruturais, entre outros.

Conteúdo:
Nesse último grupo estamos falando do conteúdo multimídia (imagens, vídeos, etc) e
textos da interface.

A seguir veremos os itens de cada grupo.

Input controls (Controles de entrada )

O grupo de controles de entrada são compostos por elementos que recebem informações
do usuário. Ele (o usuário) escreve, marca e seleciona opções e informações através
desses tipos de controles de entrada. Dentro dessa categoria temos os elementos:

Buttons
Botões são os elementos mais comuns e quiçá os mais importantes dentro de uma
interface. Eles podem estar presentes em call to action (chamadas para ação), menus,
formulários, entre outros. A função, normalmente, sempre é realizar alguma ação
importante como enviar uma mensagem ou realizar uma compra.

https://dribbble.com/shots/4889411-Call-to-action

Icons
Os ícones normalmente tem a função informativa, ajudando no entendimento da
informação, ou de botão/link, sendo utilizado, por exemplo, dentro de um contexto de
menu de navegação.

https://dribbble.com/shots/5464294-Notification-Icons-Adobe-XD
Checkboxes (caixa de seleção)
São elementos que permitem o usuário selecionar mais de um opção ou um conjunto de
opções.
 https://dribbble.com/
shots/4228662-Check-Me-Out

Botões de radio (radio buttons)

Ao contrário do anterior, trata-se de elementos que permitem selecionar apenas uma
opção por vez. Tipo, por ex, as opções de sim ou não dentro no contexto de uma
pergunta.

https://dribbble.com/shots/4937961-Radio-Buttons-Interaction-III  

Slide Bar
Trata-se de um controle deslizante que permite aos usuários definir ou ajustar um valor.
Quando o usuário altera o valor, ele não altera, necessariamente, o formato da interface
ou outras informações na tela.
 https://dribbble.com/shots/
343300-Sliders

Dropdown lists (Listas suspensas)

O dropdown list é semelhante ao anterior, pois só se pode escolher uma opção, porém
mais compacto permitindo, em muitas vezes, inserir textos mais longos.

É um tipo muito utilizado, por exemplo, quando você está selecionando a cidade destino
de viagem em site de passagens áreas.

Button dropdown List

Semelhante ao anterior, porém é acrescido de um botão que ao ser selecionado,
apresenta as opções.
https://dribbble.com/shots/4847809-Dropdown-Menu-Animation  

Toggles
São os botões de ativar ou desativar, parecido com a ação, liga e desliga do interruptor
elétrico.

https://dribbble.com/shots/
3717188-What-type-of-person-are-you

Inputs (campos Inserção de texto)

São os campos de entrada onde se inseri texto. Seria onde você coloca o seu e-mail e
nome, por exemplo, em um formulário de contato.
https://dribbble.com/shots/4908813-Invalid-Email-Erro

Date and time pickers

São os selecionadores que permitem o usuário selecionar datas e ou horas dentro da
interface. Também são muito comuns em sites de passagens áreas, por exemplo.

https://dribbble.com/shots/4616153-Date-Pickers 

Navigational Components (Componentes de navegação)

Uma interface precisa ter uma nova navegabilidade. E isso passa essencialmente pelos
componentes de navegação. Veremos a seguir os mais comuns dentro do UI Design.
Menus
São os itens de navegação mais comuns dentro de uma interface. Podem ser como
navegação global ou específica dentro de uma seção da interface.

Nessa categoria existem vários tipos como menus de ícones, drop-downs lists, menus
bars, buttons menus, entre outros.

https://dribbble.com/shots/5487895-Tab-bar-active-animation  

Search Field (campo de pesquisa)

É o tradicional campo de pesquisa onde você inseri o que deseja encontrar e a interface
te retorna com uma página de resultados.

https://dribbble.com/shots/3915559-Validation-Fiel
https://dribbble.com/shots/717966-Search-Animated

Breadcrumb
Breadcrumbs são os “caminhos de pão”, como no conto de João e Maria. Esse tipo de
sistema permite que os usuários identifiquem sua localização atual dentro da interface,
além de fornecer uma trilha clicável de páginas para continuar navegando.

https://dribbble.com/shots/4911247-Breadcrumb-Exploration-Summit-Budget

Pagination (paginação)
A paginação serve para dividir o conteúdo entre páginas, permitindo que os usuários
pulem entre páginas ou entrem em ordem pelo conteúdo. É muito comum, por exemplo,
em blogs como o Chief of Design ou Designimador.
https://dribbble.com/shots/5088732-Vuesax-Pagination-Component

Slides
Trata-se de um controle deslizante que permite que os usuários naveguem em uma
determinada sessão do site, por exemplo.

https://dribbble.com/shots/5096619-Daily-UI-072-Image-Slider
https://dribbble.com/shots/3298229-Scroll-Bar

Image Carousel
Muito parecido com o anterior, os carrosséis de imagens permitem uma navegação por
um conjunto de itens, sendo possível ainda que selecionem um desses itens.

https://dribbble.com/shots/4911793-Persona-Image-Carousel

Tags
As tags permitem que os usuários encontrem conteúdo na mesma categoria, de um
mesmo assunto. Muito utilizado por anos em blogs, por exemplo, é uma forma de
acesso rápido. Em alguns casos é possível que os usuários criem as suas próprias
marcações.
https://dribbble.com/shots/5116188-Ingredients-Selection

Information Components
Essa categoria de componentes tem a função de informar com clareza ao usuário qual o
status de uma interação, alertá-lo ou atualiza-lo sobre erros e ações importantes dentro
da interface e, dependendo do caso, também dar-lhes opções de interação para solução
daquela questão.

Notifications
Uma notificação é uma sinalização. Trata-se de uma mensagem de atualização que
anuncia algo novo ou importante. Elas podem ser utilizadas para indicar uma tarefa
como concluída ou para mensagens de erro ou aviso.
Progress Bars (barra de progresso)
São item que indicam o status quando o usuário está avançando por uma série de etapas
dentro da interface ou que indicam o progresso de alguma ação do sistema.

https://dribbble.com/shots/901830-Simple-progress-bars
Tool Tips
São caixas com dicas e informações relevantes para que o usuário realize ou entenda
com mais clareza determinadas ações dentro da interface. Em determinados casos eles
podem conter links ou botões para o acesso de outras páginas dentro do sistema.

https://dribbble.com/shots/4872388-Tooltips

Message Boxes (caixa de mensagem)

São caixas de mensagem que surgem em formato de pequenas janelas, fornecendo
informações ao usuários exigindo ou sugerindo que eles realizem uma determinada ação
antes de avançar.
https://dribbble.com/shots/4938673-Hive-Pop-up-tips

Pop-up
Esse você deve conhecer de saber de cór, É aquela janela modal que solicita aos
usuários interagirem com ela antes de retornarem ao sistema. O pop-up apesar de mal
visto por muitos, por ser um pouco invasivo, ainda sim é muito utilizado por campanhas
de marketing digital.
http://www.ebookhtmlcss.com/ 

Containers
São elementos dentro da interface que abrigam um conjunto de itens de um mesmo
assunto.

Accordion (Acordeão)
Trata-se de uma lista vertical empilhada de itens com a funcionalidade mostrar / ocultar,
por exemplo, em FAQ de um site.

https://www.fundamentosdodesign.com.br/

Como você viu, uma interface nada mais é que um conjunto de pequenos itens que
juntos compõem toda a “engrenagem” do sistema.

A tarefa do UI Designer é justamente aplicar itens certos, nos locais certos, com um
visual agradável e um interação fácil e fluida.

Existem muito mais coisas para falar sobre esses itens, principalmente sobre menus e
botões. Em breve trarei conteúdo exclusivos sobre esses itens.

Referências deste ultimo texto.

https://developer.gnome.org/hig/stable/ui-elements.html.en

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html