INTERFACES

DE SISTEMAS
COMPUTACIONAIS

Prof. Dr. Alfredo BOENTE

alfredo.boente@uva.br
Semana 02
UX Design
SISTEMA DE AVALIAÇÃO:

Elaborar um projeto para desenvolvimento de um

protótipo da interface com o usuário, para certo
WebSite ou WebSystem, responsivo, Mobile App,
baseado em UX e UI, tema a sua escolha, que tenha:
 BrainStorming
 Mind Map
 Card Sorting
 Site Map
 Wireframe
 Prototype
A documentação do projeto (BrainStorming, Mind
Map, Card Sorting, Site Map, Wireframe) deve ser
entregue em forma de apresentação (PPT).
O protótipo navegável (Prototype) deve ser entregue
como arquivo Figma (.fig).
Introdução
Interação Humano-Computador
UX Design
Experiência do Usuário

A experiência do usuário abrange todas as interações do usuário com uma marca. Após a

transformação digital, essa experiência se voltou principalmente para sites, aplicativos

móveis, ferramentas e outros recursos similares.

Hoje, altos índices de satisfação não dependem mais inteiramente da qualidade dos produtos

ou serviços, pois para as empresas, isso implica um maior esforço para desenvolver uma

presença digital coerente e atraente, além de adaptar seus fluxos de interação cada vez mais

às características e aos comportamentos do usuário.

Para entender melhor o que as marcas de hoje devem considerar para garantir uma

experiência do usuário ideal, estudaremos os pilares desse conceito.

UX Design
Experiência do Usuário

Quais são os pilares da experiência do usuário?

1. ATRATIVO VISUAL
2. UTILIDADE
3. ACESSIBILIDADE
4. CREDIBILIDADE
5. INTUITIVIDADE
6. DESEMPENHO TÉCNICO
7. PROXIMIDADE E CUMPLICIDADE
8. INOVAÇÃO E ORIGINALIDADE
UX Design
Experiência do Usuário

ATRATIVO VISUAL:

Este é um dos pontos elementares do UX Design. Isso porque a primeira impressão também é
importante para a experiência do usuário.

Por esse motivo, é necessário cativá-lo com uma atraente apresentação visual.

Independentemente de ser um e-commerce, blog ou qualquer outro tipo de site, é importante

ter um design agradável, coerente e atrativo que capture o visitante e o faça permanecer
bastante tempo naquela página web, surpreendendo-o por seu valor estético.
UX Design
Experiência do Usuário

UTILIDADE:
Além de ser visualmente atraente, a Experiência do Usuário (UX - User Experience) deve ser
altamente funcional.

Dessa forma, plataformas como aplicativos e sites para celular devem oferecer valores
agregados que ajudem a resolver problemas e satisfazer necessidades de usuários e clientes.

Entre esses valores agregados encontramos calculadoras, planilhas, manuais técnicos e,

inclusive, conteúdo e informações com foco educacional.
UX Design
Experiência do Usuário

ACESSIBILIDADE:
A acessibilidade, em primeiro lugar, refere-se à possibilidade de acessar uma página web a
partir de diferentes dispositivos, e não apenas de um computador ou notebook tradicional.
Além disso, exige que o design tenha a capacidade de se ajustar e se otimizar, considerando
as características e o formato de cada dispositivo, conforme estabelecido pelos bons
princípios de responsividade.
Isso garante uma ótima experiência na página a todo momento, independentemente do meio
pelo qual o usuário a acessa (computador, tablet ou smartphone).
Esse ponto também está intimamente relacionado à inclusão de usuários com restrições
físicas, como pessoas com deficiência visual, possibilitando-lhes o acesso à informação
através de recursos como leitores de tela.
UX Design
Experiência do Usuário

CREDIBILIDADE:
Para que um site ou plataforma digital contribua para as taxas de conversão e satisfação do
usuário, precisa projetar credibilidade.

Para isso, deve estar livre de erros e, acima de tudo, atender às expectativas que gera.

É importante que as diferentes funcionalidades e os valores agregados realmente cumpram os

objetivos que prometem e contribuam de maneira tangível para a solução dos problemas.

Assim, a UX é marcada pela confiança, que pode levar a compras, assinaturas e demais
relações comerciais duradouras.
UX Design
Experiência do Usuário

INTUITIVIDADE:

A interface do usuário é eficaz apenas quando garante usabilidade, capacidade de

digitalização e intuitividade.

De nada adianta um site ter ótimos recursos e potencial se o usuário não entende como usá-lo
e tirar o máximo proveito dele. Portanto, uma interface deve ser altamente intuitiva às vistas
do usuário.
UX Design
Experiência do Usuário

DESEMPENHO TÉCNICO:

Ter uma alta velocidade de carregamento e um bom desempenho técnico é especialmente

importante para as páginas. Essa é a única maneira de alcançar a otimização da taxa de
conversão (CRO) e uma sólida experiência do usuário.

Mesmo que um site seja funcional e visualmente atraente, o usuário não se sentirá confortável
se este falhar tecnicamente e precisar lidar com vários atritos e aborrecimentos.

É importante mencionar também que um site com bom desempenho técnico é mais valorizado
pelos algoritmos dos buscadores, portanto, isso tem relação direta com a otimização dos
mecanismos de busca (SEO).
UX Design
Experiência do Usuário

PROXIMIDADE E CUMPLICIDADE:

Os usuários estão cada vez mais exigentes e requerem experiências que realmente os
motivem e cativem.

É por isso que dentro dos pilares da experiência do usuário está a humanização das páginas e
ferramentas, tornando-as mais próximas e permitindo que as marcas se conectem
emocionalmente com o público.

O resultado dessas boas práticas, quando implementadas, aumenta o engajamento dos

usuários, o que os incentiva a se tornarem embaixadores da marca graças à experiência de
navegação bem-sucedida.
UX Design
Experiência do Usuário

INOVAÇÃO E ORIGINALIDADE:
Além disso, a experiência é mais gratificante quando o usuário interage com plataformas e
ferramentas inovadoras e originais que têm sua identidade própria e se mostram memoráveis.

Portanto, ter um web site recheado de inovações tecnológicas, sem perder seu perfil de
originalidade, provê uma significativa experiência do usuário.
UX Design
Experiência do Usuário

https://www.youtube.com/watch?v=9BdtGjoIN4E&t=21s
UX Design
Experiência do Usuário
UX Design
Experiência do Usuário
UX Design
Experiência do Usuário
UX Design
Experiência do Usuário
UX Design
Experiência do Usuário
UX Design
Experiência do Usuário
UX Design
Experiência do Usuário
UX Design
Experiência do Usuário

Ferreira (2012) afirma que “experiência do usuário é muito importante para qualquer tipo de
produto ou serviço, com foco em diversos aspectos, principalmente na usabilidade de Web
Pages ou Mobile Apps”.

Utilizando o “Teorema de Iceberg” da experiência do usuário, criada por Trevor Van Gorp
(2007), sendo uma releitura de um gráfico apresentando por Jesse James Garret, no livro
“The Elements of User Experience”, 2000, aponta-se os elementos que fazem parte da
experiência do usuário dentro do desenvolvimento de um produto.

Esses elementos, dentro de um projeto, englobam diferentes disciplinas como a arquitetura de

informação, o design de interação e design de interfaces.
UX Design
Experiência do Usuário

O “Teorema de Iceberg” divide o processo de UX Design na criação de um produto em etapas

com enfoque no usuário. Primeiramente, deve-se verificar quais as necessidades das pessoas
que farão o uso da interface para, posteriormente, desenvolver o projeto de UI Design.
UX Design
Experiência do Usuário

Conforme o “Teorema do Iceberg”, pode-

se resumir como as cinco camadas
funcionam juntas.

Diante disso, a base do iceberg se

encontra no fundo do oceano e é regida
pela Estratégia (“Strategy”), que consiste
na investigação de quais são as
necessidades dos usuários (“User
Needs”) e suas dores (“Objectives”).
UX Design
Experiência do Usuário

Nessa etapa são levantadas questões

como: O porquê do produto? Por que foi
criado? Para quem? Por que precisam
dele? Qual Caminho percorrer?

Dessa forma, essas perguntas são a base

para o desenvolvimento do produto final.

Nesse sentido, a Estratégia vai se

transformar em Escopo (“Scope”) quando
definidos as especificações funcionais
(“Functional specs”), as exigências de
conteúdo (“Content requirements”) que
aplicativo atenderá.
UX Design
Experiência do Usuário

Definido isso, o Escopo se tornará Estrutura

(“Structure”) quando estabelecidas as formas
de interação com a usabilidade do sistema
(“Interaction Design") e a partir do desenho
dessa Estrutura como cada informação será
apresentada (“Information architecture"),
descomplicando a busca do usuário para
que siga uma lógica simples levando em
consideração as possibilidades de interação.
UX Design
Experiência do Usuário

Chega-se, dessa forma, na camada do

Esqueleto (“Skeleton”) que determina a
Interface Visual (“Interface Design”) da tela,
a Navegação (“Navigation Design”) e a
disposição de todos as Informações
(“Information Design”) que forem
necessários.

Para finalizar, na camada da Superfície

(“Surface”) é onde se cria a Apresentação
Visual (“Visual Design”), levando em
consideração todas as etapas citadas
anteriormente.
UX Design
Estratégia de UX

Acesse o www.miro.com/app/dashboard, para usar as ferramentas que veremos a seguir:

UX Design
Estratégia de UX

1. Mind Map *

Um mapa mental é uma

estratégia utilizada para
representação de ideias,
analises, compreensão e
solução de problemas que
se ramifica a partir de um
conceito central. (BUZAN,
2012)
UX Design
Estratégia de UX

1. Mind Map
UX Design
Estratégia de UX

2. User Stories

A segunda estratégia de UX utilizada

é o “User Stories”, esta etapa
consiste em descrever as
necessidades do usuário de uma
maneira simples e objetiva.
O método tem a finalidade de definir
os detalhes necessários para o
desenvolvimento da funcionalidade e
motivações do aplicativo. Pode-se
resumir essa estratégia em três
pequenas perguntas: Quem?
O que deseja? e Por qual motivo?
UX Design
Estratégia de UX

2. User Stories

Ator 1: Contratantes
Estou expandindo meu negócio para um “e-commerce” e quero elaborar de maneira efetiva
meu canal de vendas online, com fluxos intuitivos e estruturados. Busco também facilidade na
contratação e pagamento seguro. Como microempreendedor busco um designer gráfico para
produção da identidade visual da minha empresa que transmita a essência e credibilidade aos
meus futuros clientes. Procuro um preço justo e um profissional que otimize meu tempo para
solucionar meu problema.

Gostaria de um profissional para criar uma animação que mostre os processos de fabricação
dos meus produtos. Procuro um profissional disposto a se dedicar exclusivamente para a
produção deste material até sua finalização.
UX Design
Estratégia de UX

2. User Stories

Ator 2: Contratados
Como UX Designer almejo transmitir meu conhecimento através de estratégias e métodos
qualificados para elaborar a melhor experiência do usuário. Pretendo ter segurança no
pagamento e aumentar minha demanda de clientes consequentemente.

Como Designer Gráfico busco enriquecer meu portfólio, consolidar meu trabalho e ter sempre
clientes dispostos a novas possibilidades de solucionar seus problemas. Além disso, receber
um preço justo pelo projeto desenvolvido.

Como Motion Designer pretendo mostrar por meio da criatividade o meu trabalho, sempre com
foco na qualidade e desempenho do projeto. Assim, permitir uma flexibilidade de animações
dentro do orçamento do cliente.
UX Design
Estratégia de UX

2. User Stories

Dessa maneira, com o desenvolvimento do User Stories é possível a visualização mais

fracionada às expectativas e motivações dos usuários, sendo escritas segundo o ponto de
vista dos agentes identificados.

Portanto, as motivações dos contratantes são, a facilidade na contratação, a qualidade dos

serviços, a flexibilidade de pagamento e exclusividade do projeto solicitado. Quanto às
motivações dos contratados temos, o aprimoramento do portfólio, a consolidação profissional,
o aumento da renda e a flexibilidade de atendimento.
UX Design
Estratégia de UX

3. Personas

Personas são um retrato do público-alvo que destaca dados demográficos, comportamentos,

necessidades e motivações através da criação de um personagem ficcional baseado em
insights extraídos de pesquisa.

Personas fazem com que os designers e desenvolvedores criem empatia com os

consumidores durante o processo

de design. (TEIXEIRA, 2015)

UX Design
Estratégia de UX

3. Personas

Desse modo, esta etapa do processo mostra as possibilidades de serviços mais próximas dos

consumidores e é baseada em informações reais e características demográficas dos usuários.

O intuito de desenvolver personas é mostrar quais possíveis problemas podem surgir a partir
do conteúdo oferecido e colaborar na determinação de uma linguagem para o aplicativo.
Delimita-se, então, o público alvo e busca solucionar de maneira eficaz os problemas que
surgem no decorrer do projeto.
UX Design
Estratégia de UX

3. Personas

Persona 1:
UX Design
Estratégia de UX

3. Personas

Persona 2:
UX Design
Estratégia de UX

3. Personas

Persona 3:
UX Design
Estratégia de UX

3. Personas

Persona 4:
UX Design
Estratégia de UX

3. Personas

Persona 5:
UX Design
Estratégia de UX

3. Personas

O que podemos concluir sobre cada persona (Motivações e Dores)?

UX Design
Estratégia de UX

3. Personas

O que podemos concluir sobre cada persona (Motivações e Dores)?

UX Design
Estratégia de UX

3. Personas

O que podemos concluir sobre cada persona (Motivações e Dores)?

UX Design
Estratégia de UX

Conteúdo e Especificações Funcionais

Card Sorting *

É uma combinação dos esquemas de

organização, rotulação de busca e

navegação dentro de websites e
intranets. Uma disciplina emergente e
uma comunidade de prática focada em
trazer princípios do design e
arquitetura ao espaço digital.
(ROSENFELD e MORVILLE, 2006)
UX Design
Estratégia de UX

Conteúdo e Especificações Funcionais

Card Sorting

O “Card sorting” é um método de estruturação das informações de sites, aplicativos e outras

interfaces digitais que fornecem prestação de serviços. Esta técnica consiste em organizar as
características e as necessidades dos usuários dentro do aplicativo e é representada por um
conjunto de “cards” descrevendo conteúdos e funções que serão disponibilizados.

Os cards devem ser organizados a partir da visão do usuário formando categorias para o
aplicativo.

Através desta técnica pode-se obter um mapa mental preciso baseando-se no ponto de vista
dos usuários finais de uma determinada aplicação (Spencer,2004).
UX Design
Estratégia de UX

Conteúdo e Especificações Funcionais

Card Sorting
UX Design
Estratégia de UX

Conteúdo e Especificações Funcionais

Card Sorting
UX Design
Estratégia de UX

Conteúdo e Especificações Funcionais

Card Sorting
UX Design
Estratégia de UX

Arquitetura de Informação

Site Map *

Segundo Fabricio Teixeira (2015, p. 57)

um dos métodos mais conhecidos

de UX consiste em um diagrama das

páginas de um site organizadas
hierarquicamente.
Este método ajuda a visualizar
a estrutura básica e a navegação
entre as diferentes partes
dos sistemas.
UX Design
Estratégia de UX

Arquitetura de Informação

Site Map *

Segundo Fabricio Teixeira (2015, p. 57)

um dos métodos mais conhecidos

de UX consiste em um diagrama
ass páginas de um site organizadas
hierarquicamente.
Este método ajuda a visualizar
a estrutura básica e a navegação
entre as diferentes partes
dos sistemas.
UX Design
Estratégia de UX

Arquitetura de Informação

Site Map

Esta etapa do processo chama-se Site Map e é uma maneira de mostrar aos usuários as
primeiras estruturas do aplicativo, leva-se em consideração os resultados gerados através do
Card Sorting. Desta forma, fica mais fácil visualizar a trajetória do usuário, mapear os dados
de cada seção e arquitetar as informações do aplicativo. Com isso, irá direcionar a base do
funcionamento da interface. O desenvolvimento do Site Map colabora para a ramificação dos
menus criados anteriormente, assim, forma-se os fluxos das ações realizadas pelos usuários.

As informações deste método buscam listar detalhadamente todas as ações realizadas pelos
usuários, isso auxilia na identificação das páginas primárias, secundárias e assim em diante. A

realização do Site Map é indispensável pois ele é a base para a criação dos wireframes.
UX Design
Estratégia de UX

Arquitetura de Informação

Flow Chart

Após o Site Map, utiliza-se o

fluxograma da interface a partir de

um método chamado Flow Chart, que
é uma representação feita com gráficos.
Com isso o entendimento dos
possíveis menus, botões e
respectivamente os seus grupos
ficaram mais claras, estruturando
uma hierarquia de interações
primárias e secundárias.
UX Design
Estratégia de UX

Arquitetura de Informação

Flow Chart
UX Design
Estratégia de UX

Arquitetura de Informação

Flow Chart

Legenda:
UX Design
Estratégia de UX

ATIVIDADE ASSISTIDA

Visando a concepção do seu projeto para desenvolver um protótipo da interface com o

usuário, para certo WebSite ou WebSystem, responsivo, Mobile App, baseado na
experiência do usuário, elabore as seguintes estratégias de UX:

- Mind Map (mapa mental)

- Card Sorting (organização de cartões)

- Site Map (mapa do site)

- Flow Chart (fluxograma da interface)