Front End Unidade 4

Prévia do material em texto

Princípios de User Experience (Ux) 
em Interfaces Web
02Introdução
05Tema 1
Fundamentos da UX
10Tema 2
Utilização da UX em Cenários Reais
15Tema 3
Relação da UX com as Interfaces 
Front-End
20Tema 4
Práticas de Design Utilizando o Fig-
ma ou Ferramenta Similar
25Encerramento
27Referências
Introdução
Olá, estudante! Você já deve ter ouvido falar bastante sobre UX, mas o que exatamen-
te significa e por que é tão importante? Imagine a última vez que você navegou em 
um site ou usou um aplicativo que realmente gostou. Você se sentiu envolvido, achou 
tudo intuitivo e, no final, ficou satisfeito com a experiência. Isso é UX na prática! A UX, 
ou Experiência do Usuário, foca em como os usuários interagem com um produto ou 
serviço e visa tornar essa interação a mais agradável e eficiente possível.
Para começarmos, vamos entender os Fundamentos da UX. Esses fundamentos são 
como a base de uma casa: sem eles, nada fica de pé. Falaremos sobre os princípios que 
guiam o design centrado no usuário, a importância da pesquisa e como as metodolo-
gias de UX ajudam a criar produtos que as pessoas adoram usar.
Depois, exploraremos a utilização da UX em cenários reais. Aqui, você verá exemplos 
práticos de como empresas aplicam os conceitos de UX para resolver problemas do 
dia a dia e melhorar a experiência dos seus clientes. Isso vai te ajudar a visualizar a 
teoria em ação e entender a relevância da UX no mercado atual.
Em seguida, discutiremos a relação da UX com as interfaces Front-End. As interfaces 
são a “cara” dos produtos digitais, e a UX garante que essa cara seja amigável e funcio-
nal. Você aprenderá como o design de interfaces Front-End se beneficia dos princípios 
de UX e como essa integração é vital para o sucesso de qualquer projeto digital.
Por fim, vamos colocar a mão na massa com as Práticas de design utilizando o Figma 
ou ferramenta similar. O Figma é uma das ferramentas mais populares entre os de-
signers atualmente por permitir colaboração em tempo real e prototipação eficiente. 
Veremos como utilizá-lo para aplicar os conceitos de UX que discutimos ao longo do 
curso, transformando teoria em prática.
Prepare-se para uma jornada fascinante pelo mundo da UX! Vamos começar?. 
Objetivos
Conteúdo programático
Esta unidade está organizada de acordo com os seguintes 
temas:
Tema 1 – Fundamentos da UX;
Tema 2 – Utilização da UX em cenários reais;
Tema 3 – Relação da UX com as interfaces Front-End;
Tema 4 – Práticas de design utilizando o Figma ou ferra-
menta similar.
Ao final desta unidade, você deverá ser capaz de:
Compreender os princípios fundamentais de UX e sua 
importância no desenvolvimento de interfaces front-end.
Fonte: Elaborado pelo autor.
Você sabia que a evolução do comportamento do cliente ao longo das décadas tem 
impactado diretamente a experiência do usuário (UX) em interfaces web? Compreen-
der esses princípios é essencial para criar soluções que não apenas satisfaçam as ne-
cessidades dos usuários, mas também proporcionem experiências memoráveis. Estu-
dar UX pode te capacitar a desenvolver interfaces intuitivas e envolventes, tornando 
suas criações mais competitivas e bem-sucedidas.
5
Tema 1
Fundamentos da UX
Como a aplicação antecipada de UX pode reduzir custos com corre-
ções posteriores?
Figura 4.1 - As Fases da Experiência do Usuário
Fonte: VG Stock.
A User Experience (UX), ou Experiência do Usuário, é um conceito central no desen-
volvimento de produtos digitais, englobando todas as interações de um usuário com 
um sistema, produto ou serviço. Conforme destacado por Sommerville (2007), a UX 
é fundamental para garantir que o software não apenas funcione corretamente, mas 
também atenda às expectativas e necessidades dos usuários.
Nesse contexto, uma boa experiência do usuário pode influenciar diretamente a satis-
fação do cliente e a eficácia do produto. Observe a figura abaixo, que ajuda a ilustrar 
as fases da experiência do usuário, reforçando a importância de considerar a UX desde 
o início do desenvolvimento de um produto.
A importância da UX reside na sua capacidade de criar uma ligação emocional positiva 
entre o usuário e o produto. Uma interface bem projetada pode transformar a forma 
como os usuários percebem e utilizam uma aplicação, resultando em uma maior taxa 
de retenção e fidelidade. De acordo com Stati e Sarmento (2021), a experiência do 
6
refere-se à facilidade com que os usuários conseguem utili-
zar a interface. Uma interface bem projetada deve ser intuiti-
va e permitir que os usuários realizem suas tarefas de forma 
eficiente e sem frustrações.
garante que todos os usuários, incluindo aqueles com defi-
ciências, possam acessar e utilizar o produto. Seguir diretri-
zes como as WCAG (Web Content Accessibility Guidelines) é 
essencial para criar interfaces inclusivas.
Acessibilidade:
usuário é o diferencial competitivo que pode determinar o sucesso ou fracasso de um 
produto no mercado digital. Eles destacam que uma interface intuitiva e fácil de usar 
não só atrai novos usuários, mas também incentiva o uso contínuo e gera recomenda-
ções positivas.
Marinho (2016) reforça essa visão ao afirmar que a análise e a modelagem de sistemas 
devem considerar aspectos de usabilidade desde as etapas iniciais do desenvolvimen-
to. A integração de princípios de UX na fase de planejamento e design pode prevenir 
problemas futuros e reduzir custos com correções posteriores. A implementação de 
práticas de UX desde o início do projeto ajuda a identificar e solucionar problemas de 
usabilidade antes que eles se tornem críticos.
A experiência do usuário não deve ser uma consideração tardia, mas sim uma parte 
integral do processo de desenvolvimento. Projetar com o usuário em mente desde o 
início pode melhorar significativamente a eficácia e eficiência do sistema (Dennis et 
al., 2014). Além disso, uma boa UX pode levar a um aumento na produtividade dos 
usuários, uma vez que interfaces intuitivas permitem a realização de tarefas de forma 
mais rápida e com menos erros.
Os princípios básicos da UX incluem usabilidade, acessibilidade e design centrado no 
usuário, Clique no (+) das abas a seguir e conheça cada um deles:
Usabilidade:
7
é uma abordagem de design que coloca as necessidades e 
preferências do usuário no centro do processo de desen-
volvimento. Isso envolve compreender profundamente os 
usuários e criar soluções que atendam às suas expectativas e 
requisitos.
Design Centrado no Usuário:
Fonte: Storyset / Freepik
O processo de design UX (User Experience) é composto por várias etapas fundamen-
tais, cada uma desempenhando um papel crucial na criação de produtos que realmen-
te atendem às necessidades e expectativas dos usuários. Clique nos botões do info-
gráfico a seguir para interagir com o conteúdo, e conheça o processo de design UX 
A experiência do usuário envolve projetar interfaces que atendam tanto iniciantes 
quanto experientes. Usuários novatos valorizam a facilidade de aprendizado, bus-
cando entender rapidamente o sistema. Usuários experientes priorizam a eficiência 
no uso, desejando completar tarefas rapidamente após dominar a interface. Embora 
8
Em vários outros sistemas (por exemplo, sistemas de suporte de 
decisão), a maior parte das pessoas permanecerá como usuários 
ocasionais durante todo o tempo de vida do sistema. Nesse caso, 
pode ser dada maior ênfase à facilidade de aprendizado em vez da 
facilidade de uso.
muitas decisões de design atendam ambos os grupos, às vezes há compensações. Por 
exemplo, iniciantes preferem menus completos para facilitar o aprendizado, enquanto 
especialistas preferem menus simplificados focados nas funções mais usadas (Dennis 
et al., 2014).
 
Os sistemas destinados a serem utilizados por muitas pessoas todos os dias são mais 
propensos a terem a maioria de seus usuários especialistas (por exemplo, sistemas de 
entrada de pedidos). Embora as interfaces devam tentar equilibrar a facilidade de uso 
com a de aprendizado, esses tipos de sistemasdevem colocar mais ênfase na facilida-
de de uso que na de aprendizado. É preciso que os usuários sejam capazes de acessar 
rapidamente as funções mais empregadas, com pouca digitação ou um pequeno nú-
mero de seleções de menu (Dennis et al., 2014).
Embora a facilidade de aprendizado e a facilidade de uso estejam frequentemente 
lado a lado, às vezes isso não ocorre. A pesquisa mostra que os usuários especialistas 
e iniciantes têm requisitos e padrões de comportamento diferentes em alguns casos. 
Por exemplo, os iniciantes praticamente nunca examinam a área inferior de uma tela 
que apresenta as informações de status, mas os especialistas consultam a barra de 
status quando precisam de informações (Dennis et al., 2014). A maioria dos sistemas 
deve ser planejada para dar suporte a usuários assíduos, exceto para os sistemas que 
não serão usados com muita frequência ou aqueles para os quais são esperados mui-
tos usuários novos ou ocasionais (por exemplo, a Web). Da mesma maneira, os siste-
mas que contêm funcionalidades usadas apenas de forma ocasional precisam apresen-
tar uma interface altamente intuitiva ou que contenha uma orientação explícita em 
relação ao seu uso.
“As pessoas têm padrões e anseios ao manipular objetos tecnológicos. São hábi-
tos e costumes que nasceram em diversas esferas de convívio: em casa, na escola, 
entre amigos, enfim, nos ambientes em que o usuário se relaciona. Desde tempos 
remotos, a tecnologia vem alimentando necessidades, das mais básicas até aque-
las consideradas supérfluas. Dessa forma, pode ser que ela atenda às necessida-
des e siga o caminho do sucesso ou, simplesmente, tenha seu interesse diminuído 
e dê espaço para outro artefato” (Stati & Sarmento, 2021, p. 16).
9
Nome: Disruptores de design
Ano: 2016
Comentário: Este documentário oferece uma visão sobre o 
impacto do design de experiência do usuário em algumas das 
empresas de tecnologia mais inovadoras do mundo. Ele destaca 
como as principais empresas utilizam o design para criar produtos 
revolucionários e melhorar a experiência dos usuários.
Para conhecer mais sobre o filme, acesse o trailer disponível em: 
.
Indicação de filme
O impacto de uma boa experiência do usuário vai além da satisfação individual; ela 
pode influenciar a percepção geral de uma marca ou empresa. Produtos que oferecem 
uma experiência positiva são frequentemente associados a empresas inovadoras e 
confiáveis. Sommerville (2007) aponta que a UX é um fator crucial para a competitivi-
dade no mercado atual, onde as opções para os consumidores são vastas e as expec-
tativas estão em constante evolução. Ele enfatiza que “as empresas que investem em 
UX podem obter vantagens competitivas significativas, pois oferecem produtos que 
não apenas atendem, mas superam as expectativas dos usuários”.
Por fim, é importante destacar que a UX é um campo interdisciplinar, envolvendo 
conhecimentos de psicologia, design, ergonomia e engenharia de software. Essa in-
tegração de diferentes áreas do conhecimento permite a criação de produtos digitais 
que são não apenas funcionais, mas também agradáveis e satisfatórios de usar. Stati 
e Sarmento (2021) concluem que a experiência do usuário é um elemento vital na 
criação de produtos digitais bem-sucedidos, que conseguem encantar os usuários e se 
destacar em um mercado competitivo.
https://www.youtube.com/watch?v=P0sRcZNnjeA
10
Tema 2
Utilização da UX em Cenários Reais
Como a adaptação das mensagens de erro afeta a experiência em 
plataformas para pessoas com deficiência física?
A aplicação dos princípios de Experiência do Usuário (UX) é crucial na educação espe-
cial para pessoas com deficiência física, otimizando a interação entre usuário e siste-
ma para uma experiência eficiente, eficaz e satisfatória (STATI; SARMENTO, 2021).
 
A International Organization for Standardization (ISO, 2010) relaciona a UX com a 
interação e satisfação no uso de produtos e serviços. Adaptar recursos tecnológicos 
para facilitar o acesso à educação desses indivíduos mostra-se um campo fértil para a 
aplicação da UX.
A experiência do usuário se inicia com uma necessidade ou problema que motiva 
o uso de um produto, por isso antecede as interações das pessoas com os artefa-
tos. Isso desloca o sentido da experiência, de um olhar restrito à tecnologia ou 
artefato para um entendimento amplo sobre o contexto em que ela ocorre, [...] 
é necessário pensar naquilo que vem antes do desenvolvimento de tais soluções, 
perguntando o que as pessoas estão procurando e o que as motiva a estar ali. 
(GRILO, 2019, p. 14)
A experiência do usuário pode ser avaliada pela usabilidade dos sistemas informatiza-
dos, considerando a qualidade do produto ou serviço em termos de eficácia, eficiência 
e satisfação do usuário (ISO, 2010). Isso implica em facilitar o aprendizado da solução, 
reduzir erros e promover um grau significativo de satisfação.
Os sistemas se comunicam com os usuários por meio de mensagens que informam 
sobre erros e o estado do sistema. A primeira interação do usuário pode ser uma men-
sagem de erro, o que pode ser difícil até para engenheiros de software experientes. 
Para usuários inexperientes, entender essas mensagens pode ser ainda mais desafia-
dor.
Observe o quadro abaixo, que apresenta os fatores a serem levados em consideração 
ao projetar mensagens de sistema, conforme apresentados por Sommerville (2007):
11
Fator Descrição
Contexto
Sempre que possível, as mensagens geradas pelo 
sistema devem refletir o contexto atual do usuário. 
Tanto quanto possível, o sistema deve estar 
consciente do que o usuário está fazendo e deve 
gerar mensagens relevantes a sua atividade atual.
Experiência
À medida que os usuários se tornam familiarizados 
com o sistema, eles ficam irritados com mensagens 
longas e explicativas. Entretanto, os iniciantes 
encontram dificuldades em compreender instruções 
curtas e sucintas de um problema. Você deve 
fornecer ambos os tipos de mensagens para 
permitir que o usuário controle a concisão delas.
Nível de 
habilidade
As mensagens devem ser ajustadas às habilidades 
do usuário, bem como a sua experiência. As 
mensagens para diferentes categorias de usuários 
podem ser expressas de maneiras diferentes, 
dependendo da terminologia familiar ao leitor.
Estilo
As mensagens devem ser positivas, e não negativas. 
Elas devem usar o modo ativo, e não passivo, de 
expressão. Nunca devem ser ofensivas ou engraçadas.
Cultura
Sempre que possível, o projetista de mensagens deve 
estar familiarizado com a cultura do país onde o sistema 
é vendido. Existem diferenças culturais distintas entre 
Europa, Ásia e América. Uma mensagem adequada 
para uma cultura pode ser inaceitável em outra.
Quadro 4.1 - Fatores de projeto na redação de mensagens
Fonte: Sommerville (2007, p. 263), 
A experiência do usuário (UX) é um elemento central para o sucesso de interfaces 
web, influenciando diretamente a satisfação e a fidelidade dos usuários. A aplicação 
de práticas de UX pode transformar significativamente o desempenho de uma plata-
forma digital, como exemplificado pelo caso da Amazon. 
12
Figura 4.2: Fluxograma do processo de pesquisa e avaliação em UX.
Fonte: VG Stock
A Amazon iniciou com uma pesquisa abrangente para entender as necessidades e 
comportamentos de seus usuários, incluindo metodologias quantitativas e qualita-
tivas para obter uma visão detalhada das barreiras que os usuários enfrentavam ao 
utilizar o site (STATI; SARMENTO, 2021). 
Com base nos resultados da pesquisa, a Amazon focou na usabilidade como uma área 
crucial para melhorias. A usabilidade envolve aspectos como heurísticas, hierarquia de 
informações, simplicidade e ergonomia. A Amazon simplificou o processo de checkout 
e otimizou a navegação, garantindo que os usuários pudessem encontrar e comprar 
produtos de maneira mais eficiente.
Além disso, a empresa conduziu testes rigorosos, incluindo testes de usabilidade e 
avaliações heurísticas,que permitiram medir a eficácia das mudanças implementadas. 
As análises de métricas de desempenho, como tempo de tarefa, taxa de erros e satis-
fação do usuário, indicaram melhorias significativas, como uma redução nas taxas de 
abandono de carrinho e um aumento nas taxas de conversão (DENNIS et al., 2014). 
Este caso ilustra como uma abordagem estruturada e iterativa de UX pode resultar 
em melhorias substanciais na experiência do usuário. 
Antes da implementação de um design centrado no usuário, a Amazon enfrentava 
desafios como altas taxas de abandono de carrinho e dificuldades na navegação pelos 
produtos. A empresa decidiu investir em uma abordagem sistemática de UX. Observe 
a figura abaixo que representa os principais componentes e processos envolvidos na 
pesquisa e avaliação em UX.
13
A Amazon conseguiu não apenas otimizar a funcionalidade do seu site, mas também 
proporcionar uma experiência mais agradável e eficiente para seus usuários. Como 
apontam Stati e Sarmento (2021), a experiência do usuário é um diferencial competiti-
vo no mercado digital, capaz de determinar o sucesso ou o fracasso de um produto ou 
serviço.
A avaliação do sucesso das iniciativas de UX é fundamental para garantir que as me-
lhorias implementadas realmente atendam às necessidades dos usuários e promovam 
uma experiência positiva. Existem várias métricas e métodos para medir o impacto das 
mudanças e garantir que os objetivos sejam alcançados.
Net Promoter Score (NPS): Mede a lealda-
de e a probabilidade de recomendação de 
um produto ou serviço. Pergunta-se aos 
usuários: “De 0 a 10, quão provável é que 
você recomende este produto/serviço a 
um amigo?” As respostas classificam os 
usuários como Promotores (9-10), Neutros 
(7-8) e Detratores (0-6). O NPS é calculado 
subtraindo a porcentagem de Detratores 
da de Promotores. Um NPS alto indica uma 
experiência positiva e fidelização. Fonte: VG Stock
Retenção de Usuários: Mede quantos usu-
ários continuam utilizando a plataforma ao 
longo do tempo. Em contextos educacio-
nais, uma alta taxa de retenção sugere sa-
tisfação dos estudantes com a experiência 
e valor contínuo da plataforma. Melhorias 
na usabilidade e na experiência geral, como 
feedback visual e sonoro e personalização 
do conteúdo, podem aumentar a retenção 
de usuários, garantindo uma experiência 
mais envolvente e eficaz. Fonte: VG Stock
Taxa de Conversão: Mede a porcentagem 
de usuários que completam uma ação de-
sejada, como se inscrever em um curso ou 
fazer uma compra. Em plataformas edu-
cacionais para estudantes com deficiência 
física, reflete quantos conseguem utilizar 
a plataforma sem assistência. Melhorias na 
UX que tornam a interface mais acessível e 
intuitiva podem aumentar essa taxa, indi-
cando maior eficácia da plataforma.
Fonte: VG Stock
14
A iteração constante é fundamental no design centrado no usuário. Após melhorias na 
UX, é crucial coletar feedback contínuo dos usuários por meio de entrevistas, surveys, 
testes de usabilidade regulares e análise de dados de uso. 
Isso identifica problemas e oportunidades, garantindo que o design evolua para me-
lhor atender às necessidades dos usuários, tornando a experiência mais eficiente e 
satisfatória, promovendo inclusão e autonomia.
As melhorias nas plataformas educacionais para estudantes com deficiência física 
mostraram impactos positivos significativos. Houve um aumento no tempo de uso 
da plataforma, indicando uma experiência mais envolvente. Mudanças na interface e 
a implementação de feedback visual e sonoro reduziram a frustração e os índices de 
abandono. 
Muitos estudantes passaram a utilizar a plataforma de forma independente, refletin-
do uma melhora na usabilidade. A adaptação de materiais didáticos digitais com ele-
mentos interativos aumentou o engajamento, promovendo uma aprendizagem mais 
eficaz e inclusiva.
A aplicação dos princípios de UX na educação especial para pessoas com deficiência 
física demonstrou ser uma estratégia eficaz para melhorar a usabilidade, a eficiência e 
a satisfação dos usuários. 
As metodologias de pesquisa e as ferramentas de design desempenham um papel 
crucial nesse processo, permitindo uma compreensão profunda das necessidades dos 
usuários e a criação de soluções que realmente fazem a diferença.
 A medição contínua dos resultados e a iteração baseada em feedback garantem que 
as melhorias sejam sustentáveis e que a experiência do usuário evolua para atender 
melhor às suas necessidades.
Você sabia que, como designer iniciante, é possível criar projetos reais 
sem saber programar? Ferramentas “no-code” permitem desenvolver 
aplicativos e websites apenas com interfaces gráficas. Comece esco-
lhendo um tema que você ama e resolva problemas do seu dia a dia. 
Parcerias com ONGs ou trabalhos voluntários também são ótimas ma-
neiras de ganhar experiência. Aproveite workshops gratuitos, como os 
oferecidos pela Ebac, para fortalecer sua presença online e aprender 
mais sobre o mercado de UX design! Para saber mais, acesse a seguir: 
Como conseguir o primeiro projeto real em UX Design? 
 
Fonte: elaborado pelo autor
Saiba mais
https://www.youtube.com/watch?v=AlZLLgJNZkg
15
Tema 3
Relação da UX com as Interfaces Front-End
Como a colaboração entre designers e desenvolvedores pode impac-
tar a acessibilidade e a eficiência das interfaces front-end?
Figura 4.3 - Interações Multidispositivos e a Experiência do Usuário
Fonte: VG Stock.
A relação entre a Experiência do Usuário (UX) e as interfaces front-end é fundamental 
para a criação de sistemas que sejam ao mesmo tempo eficientes e inclusivos, espe-
cialmente no contexto da educação especial para pessoas com deficiência física. A 
colaboração entre designers e desenvolvedores é crucial para garantir que a visão do 
design seja implementada corretamente, resultando em interfaces acessíveis e intuiti-
vas.
Para que a visão de design seja traduzida em uma interface funcional e acessível, é 
essencial que designers e desenvolvedores trabalhem de maneira colaborativa. Con-
forme Sommerville (2007), a interação homem-computador é um fator decisivo para 
a aceitação e usabilidade de sistemas, destacando a importância de uma abordagem 
integrada no desenvolvimento de software.
A imagem abaixo ilustra como as tecnologias de comunicação evoluíram, facilitando 
novas formas de interação entre usuários e sistemas, e enfatiza a necessidade de de-
senvolver interfaces que sejam acessíveis e inclusivas para todos os usuários.
16
Essa prática não apenas melhora a compreensão do usuário sobre o que 
está acontecendo, mas também reduz a ansiedade e a frustração associa-
das à espera. Conforme a ISO 9241-210 (2010) sugere, feedback adequado 
ajuda a manter o usuário informado e no controle, um princípio fundamen-
tal no design centrado no usuário.
A experiência do usuário (UX) influencia diretamente a satisfação e a eficiência com 
que os usuários interagem com sistemas digitais. Princípios como feedback do usuário 
e tempo de resposta são elementos essenciais que moldam a UX e, consequentemen-
te, determinam a eficácia das interfaces web.
O feedback do usuário refere-se à comunicação constante entre o sistema e o usu-
ário durante a interação. Segundo Grilo (2019), um bom design de UX deve propor-
cionar ao usuário informações claras e imediatas sobre as ações que está realizando. 
Isso pode incluir mensagens de confirmação, alertas de erro ou indicações visuais de 
progresso. Um exemplo prático é o uso de barras de carregamento ou animações que 
informam o usuário sobre o estado atual de uma operação, como o upload de um 
arquivo.
O tempo de resposta é um conceito que se refere à rapidez com que o sistema res-
ponde às ações do usuário. Marinho (2016) afirma que tempos de resposta rápidos 
são essenciais para manter a fluidez e a satisfação na interação com sistemas digitais. 
Interfaces que demoram a responder podem levar à insatisfação e, em casos extre-
mos, ao abandono do uso.
No desenvolvimento front-end, otimizaro tempo de resposta envolve técnicas como 
minimizar o tamanho dos arquivos, usar carregamento assíncrono e implementar ca-
che. Frameworks como React ajudam a criar interfaces mais responsivas, melhorando 
a percepção de desempenho pelo usuário. Isso é visível em plataformas modernas, 
onde feedback rápido e tempos de resposta otimizados são essenciais. Por exemplo, o 
Google Search oferece sugestões instantâneas enquanto o usuário digita e resultados 
quase imediatos após a consulta.
A implementação desses princípios no desenvolvimento front-end não é apenas uma 
questão técnica, mas também uma abordagem estratégica que pode diferenciar um 
produto no mercado. Como observado por Sommerville (2007), a interação eficaz en-
tre o sistema e o usuário é fundamental para a aceitação e sucesso de um software
17
Assista ao vídeo clicando aqui
Vídeo
Fonte: VG Stock
Para garantir que a experiência do usuário projetada seja fielmente representada na 
versão final do produto, é essencial a realização de testes de usabilidade e de perfor-
mance. Estes testes não apenas validam a eficácia das interfaces front-end, mas tam-
bém identificam áreas de melhoria, assegurando que a UX atende às expectativas dos 
usuários. Clique no “ver mais” para conhecer mais sobre os assuntos
Testes de Usabilidade
Os testes de usabilidade são metodologias práticas que avaliam a facilidade com que 
os usuários podem interagir com um sistema. Esses testes envolvem observar usuários 
reais enquanto eles realizam tarefas específicas na interface. Conforme Stati e Sar-
mento (2021), “os testes de usabilidade permitem identificar problemas de navegação 
e compreensão que podem não ser evidentes durante o desenvolvimento.”
Durante um teste de usabilidade, aspectos como a intuição dos controles, clareza 
das instruções e eficiência das interações são avaliados. Por exemplo, se um usuário 
encontra dificuldade em encontrar uma funcionalidade essencial, isso indica a neces-
sidade de ajustes na interface. A coleta de feedback qualitativo e quantitativo desses 
testes fornece insights valiosos para refinamento do design. 
https://vimeo.com/986517120
18
Fonte: VG Stock
Testes de Performance
Os testes de performance, por outro lado, focam na capacidade do sistema de operar 
de forma eficiente sob diversas condições de carga. Marinho (2016) destaca que “um 
bom desempenho é crucial para manter a satisfação do usuário e garantir que o siste-
ma funcione bem em cenários de uso real.” Estes testes medem tempos de resposta, 
uso de recursos e estabilidade do sistema.
Ferramentas de teste de performance, como o Google Lighthouse e o Apache JMeter, 
são usadas para simular diferentes cenários de uso e identificar gargalos que possam 
comprometer a UX. Por exemplo, tempos de carregamento excessivos podem ser 
diagnosticados e otimizados para assegurar que os usuários não enfrentem atrasos 
frustrantes.
Assegurar que a experiência projetada seja fielmente representada na versão final 
do produto é crucial para a satisfação do usuário e o sucesso do produto. Grilo (2019) 
enfatiza que “uma experiência consistente e sem fricções aumenta a confiança do 
usuário e a probabilidade de uso contínuo.”
A falta de testes adequados pode resultar em discrepâncias significativas entre o de-
sign planejado e a experiência real do usuário. Conforme observado por Sommerville 
(2007), “problemas de usabilidade que não são detectados durante o desenvolvimen-
to podem levar a custos elevados de correção após o lançamento.”
19
Nome do livro: Arquitetura de sistemas
Autores: Diego Bittencourt de Oliveira, Aline Maciel Zenker, 
Jailson Costa dos Santos, Júlia Mara Colleoni Couto, Pedro Henri-
que Chagas Freitas, Marcos Paulo Lobo de Candia, Paulo Antonio 
Pasqual Júnior, Rafael Albuquerque Pinto, Ramon dos Santos 
Lummertz.
Editora: Porto Alegre: SAGAH
Capítulo: 4 (Projeto da interface de uma arquitetura de sistemas)
Ano: 2019
ISBN: 9788595029767
Comentário: Este capítulo apresenta a importância de uma in-
terface bem projetada, onde a interação homem-máquina ocorre 
de maneira fluida, permitindo que as tarefas sejam concluídas 
eficientemente. Destaca-se que interfaces mal construídas resul-
tam em frustração e baixo rendimento. O capítulo identifica os 
requisitos para o projeto de uma interface eficaz, considerando 
usuários, suas tarefas e o ambiente. Além disso, aborda as eta-
pas necessárias para garantir o sucesso da interface no ambiente 
onde será implementada.
Disponível em: Minha Biblioteca: Arquitetura de sistemas
Leitura
Além disso, a iteração constante baseada em testes de usabilidade e performance 
permite que a equipe de desenvolvimento ajuste e refine o produto antes de sua en-
trega final. Este processo iterativo é fundamental para o desenvolvimento de interfa-
ces front-end que realmente atendem às necessidades e expectativas dos usuários.
A relação entre UX e interfaces front-end é intrínseca e demanda uma abordagem 
cuidadosa e detalhada. Testes de usabilidade e performance são ferramentas essen-
ciais para validar e aprimorar a experiência do usuário, garantindo que a versão final 
do produto seja funcional e intuitiva. Investir em uma UX de qualidade não apenas 
melhora a satisfação do usuário, mas também contribui para o sucesso sustentável do 
produto no mercado.
https://integrada.minhabiblioteca.com.br/reader/books/9788595029767/pageid/48
20
Tema 4
Práticas de Design Utilizando o Figma ou Ferramen-
ta Similar
Como o uso do Figma é possível melhorar a consistência e a eficiên-
cia no design de interfaces?
A experiência do usuário (UX) é essencial no desenvolvimento de interfaces web, e 
ferramentas como o Figma desempenham um papel crucial nesse processo. O Fig-
ma, uma ferramenta popular de design de interfaces, oferece suporte robusto para 
a criação e gestão de sistemas de design, facilitando a padronização e reutilização de 
componentes.
Sistemas de design garantem consistência e eficiência, promovendo a reutilização e 
padronização. No Figma, isso é feito por meio de bibliotecas de componentes, estilos 
compartilhados e templates, que são atualizados e mantidos de forma centralizada.
A padronização de elementos de interface melhora a usabilidade e fortalece a identi-
dade da marca, como destacam Stati e Sarmento (2021). O Figma permite a criação de 
componentes reutilizáveis e atualizáveis, que garantem uma experiência consistente.
A colaboração em tempo real no Figma, como ressaltam Dennis, Wixom e Roth (2014), 
melhora o fluxo de trabalho, permitindo que vários designers trabalhem simultane-
amente e integrem suas perspectivas. A criação de bibliotecas de componentes tam-
bém aumenta a eficiência, economizando tempo e reduzindo erros.
O Figma é uma ferramenta poderosa que suporta a criação e o gerenciamento de 
sistemas de design, promovendo a padronização de elementos de interface e a cria-
ção de bibliotecas de componentes reutilizáveis. Essa abordagem não só melhora a 
consistência e a eficiência no desenvolvimento de interfaces, mas também facilita a 
colaboração entre os membros da equipe, resultando em uma melhor experiência 
do usuário. A adoção de práticas de design utilizando o Figma, portanto, é altamente 
recomendada para equipes que buscam otimizar seus processos e entregar produtos 
de alta qualidade.
A prototipagem avançada e a animação no Figma são recursos essenciais que elevam 
a qualidade e a interatividade das interfaces web. Esses recursos permitem que desig-
ners criem experiências mais dinâmicas e envolventes, facilitando a visualização e o 
teste de interações antes do desenvolvimento final.
21
Fonte: VG Stock.
Técnicas Avançadas de Prototipagem
O Figma oferece ferramentas de prototipagem que permitem criar fluxos de navega-
ção interativos e testar a usabilidade das interfaces. Stati e Sarmento (2021) ressaltam 
que “a prototipagem é crucial no design de UX, pois ajuda a identificar problemas e 
validar hipóteses”. No Figma, é possível criar protótipos clicáveis que simulama na-
vegação entre telas e estados. Uma técnica avançada é o uso de componentes inte-
rativos, que incluem estados variantes para botões, menus e formulários, simulando 
comportamentos complexos e garantindo que todas as interações do usuário sejam 
contempladas no protótipo.
As animações e microinterações são elementos fundamentais para enriquecer a expe-
riência do usuário. Sommerville (2007) observa que “animações bem implementadas 
podem guiar a atenção do usuário, proporcionar feedback visual e tornar a interação 
mais intuitiva”. No Figma, os designers podem criar animações utilizando transições 
entre frames, ajustes de tempo e efeitos de easing, que suavizam as mudanças de 
estado, proporcionando uma experiência mais fluida.
22
Um recurso avançado do Figma é a capaci-
dade de criar animações complexas atra-
vés de conexões entre diferentes frames. 
Por exemplo, ao transitar de uma tela de 
login para a tela inicial de um aplicativo, os 
designers podem definir uma animação de 
fade-in ou slide, melhorando a experiên-
cia de transição e tornando-a mais natural 
para o usuário.
Fonte: Figma Learn
O Figma também permite a integração com outras ferramentas de prototipagem e 
animação, como Principle, After Effects e Framer. Marinho (2016) aponta que a inte-
gração de ferramentas permite a maximização das capacidades de design, oferecendo 
uma gama mais ampla de recursos e possibilidades criativas. Ao exportar designs do 
Figma para essas ferramentas, os designers podem criar animações ainda mais com-
plexas e detalhadas, que podem ser utilizadas para apresentações ou testes de usuá-
rio mais avançados.
As técnicas avançadas de prototipagem e animação no Figma proporcionam vários 
benefícios para a experiência do usuário (UX). Permitem a criação de protótipos inte-
rativos testáveis, facilitando a identificação de problemas e a obtenção de feedback 
precoce. Dennis, Wixom e Roth (2014) destacam a importância dos testes de protóti-
pos para atender às necessidades dos usuários. 
Animações e microinterações no Figma enriquecem a experiência do usuário, guiando 
sua atenção e tornando a navegação mais intuitiva. Assim, essas técnicas melhoram 
a satisfação e lealdade dos usuários. Além disso, o Figma facilita a criação de designs 
responsivos e multiplataforma, essenciais no contexto de diversos dispositivos, garan-
tindo interfaces funcionais e envolventes.
O design responsivo envolve a criação de interfaces que se ajustam automaticamente 
ao tamanho da tela do dispositivo do usuário. Stati e Sarmento (2021) apontam que 
um design responsivo bem executado melhora a experiência do usuário ao garan-
tir que a interface seja facilmente navegável e funcional em qualquer dispositivo. O 
Figma suporta essa abordagem através de suas ferramentas de layout e grade, que 
permitem aos designers definir regras de redimensionamento e adaptação dos ele-
mentos da interface. 
23
Frames e Grids: Os frames atuam como contêineres dentro 
do design, permitindo o redimensionamento de acordo com 
diferentes tamanhos de tela. Para garantir consistência e ali-
nhamento dos elementos, configura-se grids dentro desses 
frames. O recurso de Auto Layout ajusta automaticamente o 
posicionamento e o espaçamento dos elementos à medida 
que o frame é redimensionado, facilitando a manutenção de 
um layout organizado e responsivo.
Componentes e Variantes: A reutilização de componentes 
promove a consistência e a eficiência no design (Marinho, 
2016). A criação de variantes permite a adaptação dos com-
ponentes para diferentes estados e tamanhos de tela. Por 
exemplo, um componente de botão pode ter variantes que 
variam entre tamanhos pequenos, médios e grandes, aten-
dendo às diversas necessidades de apresentação e funciona-
lidade no design.
O uso do Figma para design responsivo e multiplataforma oferece vários benefícios 
significativos para a UX. Primeiramente, garante que a interface seja acessível e fun-
cional em qualquer dispositivo, proporcionando uma experiência de usuário consis-
tente e agradável. Além disso, as ferramentas avançadas do Figma permitem que os 
designers criem e testem rapidamente diferentes layouts, identificando e resolvendo 
problemas de usabilidade antes do desenvolvimento final.
A capacidade de colaborar em tempo real também melhora a eficiência do processo 
de design, permitindo iterações rápidas e eficazes. Isso resulta em um produto final 
mais refinado e alinhado com as necessidades e expectativas dos usuários.
24
Você já parou para pensar em como a padronização de elementos 
de interface pode influenciar a experiência do usuário? Considere 
como a reutilização de componentes no Figma pode economizar 
tempo e reduzir erros. Será que as animações e microinterações 
realmente fazem diferença na navegação de um site? E quanto à 
colaboração em tempo real, como ela pode melhorar a qualida-
de do design final? Reflita sobre a importância dessas práticas e 
como elas podem impactar a eficiência e a consistência do seu 
trabalho em projetos de UX.
Fonte: elaborado pelo autor .
Para refletir
O Figma é uma ferramenta indispensável para o design responsivo e multiplataforma, 
oferecendo funcionalidades que facilitam a criação de interfaces flexíveis e otimiza-
das para diferentes dispositivos. Ao utilizar essas técnicas e ferramentas, os designers 
podem garantir que suas interfaces sejam não apenas bonitas, mas também funcio-
nais e acessíveis em qualquer contexto.
25
Encerramento
Como a aplicação antecipada de UX pode reduzir custos com corre-
ções posteriores?
Aplicar UX desde o início permite identificar e resolver problemas de usabilidade 
durante as fases de planejamento e design, evitando que eles se tornem críticos. Isso 
reduz a necessidade de retrabalho, economizando tempo e recursos que seriam gas-
tos em correções após o lançamento do produto.
Como a adaptação das mensagens de erro afeta a experiência em 
plataformas para pessoas com deficiência física?
Adaptar as mensagens de erro para torná-las claras e acessíveis ajuda a reduzir a con-
fusão e a frustração, especialmente para pessoas com deficiência física, que podem 
enfrentar desafios adicionais na navegação. Mensagens bem projetadas guiam os 
usuários de forma eficiente, facilitando a resolução de problemas e promovendo uma 
experiência mais fluida e satisfatória.
Como a colaboração entre designers e desenvolvedores pode impac-
tar a acessibilidade e a eficiência das interfaces front-end?
Como o uso do Figma pode melhorar a consistência e a eficiência no 
design de interfaces?
A colaboração entre designers e desenvolvedores é crucial porque garante que as 
ideias de design sejam traduzidas corretamente em interfaces funcionais. Quando 
trabalham juntos, eles podem resolver problemas de acessibilidade e otimizar a usabi-
lidade, resultando em interfaces que não apenas atendem às necessidades estéticas, 
mas também são práticas e inclusivas para todos os usuários.
O uso do Figma melhora a consistência e a eficiência no design de interfaces ao permi-
tir a criação de componentes reutilizáveis e bibliotecas compartilhadas, facilitando a 
padronização e a colaboração em tempo real entre os membros da equipe.
26
Resumo da unidade
Chegamos ao fim da nossa jornada pelos Princípios de User Experience 
(UX) em Interfaces Web, onde vimos a importância de entender profun-
damente as necessidades e expectativas dos usuários. A UX nos mos-
trou que, mais do que criar produtos bonitos, precisamos criar produtos 
que sejam úteis, fáceis de usar e que proporcionem uma experiência 
agradável. Lembra-se das diversas metodologias de pesquisa e análise 
que discutimos? Elas são ferramentas poderosas que devem estar sem-
pre no seu kit de design.
Exploramos como a UX se aplica em cenários reais, trazendo exemplos 
práticos e estudos de caso. Vimos como grandes empresas utilizam 
princípios de UX para resolver problemas complexos e melhorar conti-
nuamente seus produtos. Esses exemplos não só inspiram, mas tambémnos mostram que a aplicação da UX é fundamental para o sucesso no 
mercado competitivo de hoje.
A relação entre UX e interfaces Front-End ficou clara, mostrando como 
esses dois aspectos andam de mãos dadas. O design de interfaces não 
é apenas sobre estética, mas também sobre funcionalidade e usabilida-
de. Integrar os princípios de UX no desenvolvimento Front-End é crucial 
para criar experiências digitais que realmente ressoem com os usuários.
E claro, nossas práticas com o Figma foram um verdadeiro laboratório 
de inovação. Aprender a usar uma ferramenta tão versátil e podero-
sa como o Figma abre um leque de possibilidades para você. Desde a 
criação de protótipos até a colaboração em equipe, o Figma é um aliado 
valioso na aplicação dos conceitos de UX que discutimos.
Agora, é hora de você aplicar todo esse conhecimento em seus próprios 
projetos. Lembre-se: a UX é um campo em constante evolução. Conti-
nuar aprendendo, testando e iterando é parte essencial do processo. 
Nunca subestime o poder do feedback dos usuários e da adaptação 
contínua.
A UX não é apenas uma habilidade técnica, mas uma mentalidade que 
coloca o usuário no centro de tudo o que fazemos. Continue exploran-
do, criando e, acima de tudo, colocando o usuário em primeiro lugar. 
Boa sorte.
Referências
DENNIS, Alan; WIXOM, Barbara H.; ROTH, Roberta M. Análise e Proje-
to de Sistemas. Rio de Janeiro: Grupo GEN, 2014. E-book. ISBN 978-85-
216-2634-3. Disponível em: https://integrada.minhabiblioteca.com.br/#/
books/978-85-216-2634-3/ . Acesso em: 24 jul. 2024.
GRILO, André. Experiência do usuário em interfaces digitais. Natal: SE-
DIS-UFRN, 2019. Disponível em: https://repositorio.ufrn.br/jspui/hand-
le/123456789/27011 Acesso em: 24 jul. 2024.
INTERNATIONAL STANDARD ORGANIZATION (ISO). ISO 9241-210:2010 Ergo-
nomics of human system interaction - Part 210: Human-Centered design for 
interactive systems, 2010. Disponível em: https://www.sis.se/api/document/
preview/912053 Acesso em: 24 jul. 2024.
INTERNATIONAL ORGANIZATION FOR STANDARDIZATION. ISO 9241-210: 
Ergonomics of human-system interaction - Part 210: Human-centred 
design for interactive systems. Geneva: ISO, 2010. Disponível em: https://
richardcornish.s3.amazonaws.com/static/pdfs/iso-9241-210.pdf Acesso em: 
30 jul. 2024.
MARINHO, Antonio Lopes. Análise e modelagem de sistemas. São Paulo: 
Pearson, 2016. E-book. Disponível em: https://plataforma.bvirtual.com.br . 
Acesso em: 24 jul. 2024.
SOMMERVILLE, Ian. Engenharia de software. 8. ed. São Paulo: Pearson, 
2007. E-book. Disponível em: https://plataforma.bvirtual.com.br . Acesso em: 
24 jul. 2024.
STATI, Cesar Ricardo; SARMENTO, Camila Freitas. Experiência do usuário 
(UX). 1. ed. Curitiba: Intersaberes, 2021. E-book. Disponível em: https://pla-
taforma.bvirtual.com.br . Acesso em: 24 jul. 2024.
https://integrada.minhabiblioteca.com.br/#/books/978-85-216-2634-3/
https://integrada.minhabiblioteca.com.br/#/books/978-85-216-2634-3/
https://repositorio.ufrn.br/jspui/handle/123456789/27011
https://repositorio.ufrn.br/jspui/handle/123456789/27011
https://www.sis.se/api/document/preview/912053
https://www.sis.se/api/document/preview/912053
https://richardcornish.s3.amazonaws.com/static/pdfs/iso-9241-210.pdf
https://richardcornish.s3.amazonaws.com/static/pdfs/iso-9241-210.pdf
https://plataforma.bvirtual.com.br
https://plataforma.bvirtual.com.br
https://plataforma.bvirtual.com.br
https://plataforma.bvirtual.com.br
Até a próxima unidade!