Revisão do Conteúdo o Acesse os recursos que precisa

• Eficácia
o Permite manter a produtividade após aprender o sistema
Experiência e Interface com o Usuário
• Segurança
o Previne que o usuário cometa erros graves
Aula 01 – Conceitos de UX o Ou permite que se recuperem caso tenham cometido o
erro
• Utilidade
Conceitos de UX o Fornece conjunto apropriado de funções necessárias para
Aspecto cognitivo do homem é o responsável pela linguagem, realização das tarefas da maneira desejada
pensamentos, raciocínio lógico, percepção, memória etc. • Facilidade de Aprendizagem
o Baseado no tempo que leva para o usuário aprender e
Segundo Norman (1993)
iniciar o uso das tarefas fundamentais
➢ Cognição Experiencial
o E aprender o conjunto de operações necessárias para
o Estado mental, em que uma pessoa reage aos eventos em
realizar um amplo conjunto de tarefas
esteja inserida de forma quase que automatizada, direta e
• Facilidade de Memorização de Uso
quase sem esforço;
o Ferramentas fornecidas para auxiliar o user a lembrar
o Como jogar vídeo game, assistir a algum entretenimento
como realizar a função, inclusive aquelas pouco utilizadas
➢ Cognição Reflexiva
User-Friendly
o Quando a pessoa está envolvida física e/ou
 Termo utilizado para designar um sistema que é facilmente
psicologicamente. Envolve pensar e tomar decisões
digerido ou aceito pelo user final
o Como trabalhar em algum projeto ou pintar um quadro
 Serve de norte para pesquisadores que buscam entender como a
O que é design de interação? IHC pode enriquecer o trabalho e a vida das pessoas
➢ Segundo Preece, Rogers e Sharp (2008)
o É o “design de produtos interativos que fornecem às
Rocha e Baranauskas (2003, p.17), objetivos da IHC
atividades cotidianas das pessoas(...)”
➢ Aceitabilidade de Sistemas
o É melhorar o cotidiano e a produtividade por meio do
o Aceitabilidade Social
design
▪ Usefullness
Usabilidade divide-se em (2ESU2F): • Liberdade do sistema para atingir o objetivo
• Eficiência em questão
o Se o sistema capaz de permitir que o usuário aprenda a • Utilidade
utilizá-lo bem
 o Deve verificar a funcionalidade do Outros campos disciplinares atuam em IHC:
sistema • psicologia social e organizacional,
o Auxiliar o aprendizado • psicologia cognitiva,
• Usabilidade • economia ou fatores humanos,
o É a forma de interação do usuário • ciências da computação,
o Aceitabilidade Prática • inteligência artificial,
▪ Custos • linguística,
▪ Compatibilidade • psicologia,
▪ Confiabilidade • filosofia,
▪ Etc • sociologia,
• antropologia,
• engenharia e
Aplicações de UX • design.
Segundo Irla Ribeiro [s.d], foi decidido que o termo interação seria
mais amplo e adequado que interface
Diferenças entre UX e UI
➢ Interação ➢ São duas áreas que se complementam
o Comunicação entre user e computadores ou outros tipos
➢ Ambas buscam entregar a melhor experiência para o
de produtos
user
➢ Interface
o Estabelece o conceito de ponto de interação entre ➢ UX
um computador e outra entidade o Analisa a forma que o user se sente após se relacionar
o Física com a experiência de forma global
▪ Hardware
➢ UI
▪ Cabos
o Direcionada a interface
▪ Dispositivos de I/O
o Busca criar interfaces fluidas, simples e user-friendly
o Lógica
o Campo responsável por idealizar as interfaces, pensando
▪ Meio de contato
em como o user irá interagir com ela
▪ Cognitivo
▪ Aspectos léxicos (funcionais), sintáticos ➢ Esquema de responsabilidades por [Link] (2019),
(estruturais) e semânticos (conteúdo) principais diferenças:
o A combinação dos dois tipos de interfaces que o UX
permite a interação ▪ Analisa as macrointerações
 ▪ Pesquisa como deixar o produto útil (resolvedor ▪ Resposta imaginada imediata a ação realizada (faz
de dores e anseios) sentido tal ação)
• Pesquisador ▪ Bom correlacionamento
▪ Empregado em produtos, interfaces e serviços ▪ Botão de scroll do mouse é um ótimo exemplo
• Realiza a rolagem da tela
o UI
▪ Analisa as microinterações o Feedback
▪ Pesquisa como deixar o produto/suas interfaces ▪ Resposta ao user após ele realizar uma ação
utilizável ▪ É ruim quando parece que nada acontece
• Tradutor
o Usabilidade de Sistemas Computacionais
▪ Empregado apenas em interfaces
▪ Fator chave para uma boa experiência
➢ Skeumorfismo ▪ É importante sempre se preocupar em validar o
o Técnica utilizada pela Apple até 2013 design
o Consistia em reproduzir objetos reais como ícone dos seus • Devido a variedade e heterogeneidade de
apps usuários
o A partir de 2014 ▪ É importante pensar o redesign quando necessário
▪ Design Flat ▪ Dar ouvidos ao usuário
• Super simples ▪ Entender o que é melhor para o utilizador
• Cores vivas
➢ Profissional de UX
• Gerou muitas críticas
o Deve ser empático
• Foi incorporado nos sistemas Android
▪ Processo de identificação em que o indivíduo se
➢ Princípios do Design coloca no lugar do outro
o Visibilidade e Affordances ▪ Se projetar no papel no usuário, compreender o
▪ Quanto maior destaque na interface mais visível que ele sente
será, consequentemente, mais utilizado também
o Teste
▪ Excesso de destaque para várias funcionalidades
▪ Por meio dos testes que é possível identificar erros
pode atrapalhar a experiência
ou vícios na experiência
o Bom modelo conceitual
o Segundo Aela (2010), trabalhar com UX é:
▪ Aquele que consegue entrar na cabeça do user e
▪ Trabalhar com dinamismo, buscando soluções
prever suas ações
criativas
o Bons Mapeamentos ▪ Deparar-se com uma área estratégica
 ▪ Diferente de outras profissões, é conhecida por •Durante qualquer experiencia haverá algum
abraçar a multidisciplinariedade tipo de erro
▪ Receber boas remunerações • Pensar em feedbacks e mensagens para
▪ Existe motivação de ajudar o próximo auxílio nesses momentos é importantíssimo
▪ Trabalho em equipe • Por Kakau Fonseca (2018), práticas para
▪ Acompanhar tendências melhor lidar com mensagens de erro
▪ Atuar em conjunto com uma comunidade ativa o Diga o motivo
o Sugira um next step
o Encontre o tom certo
o A mensagem deve levar ao acerto
Aula 02 – Noções Básicas de Cognição, ▪ Menus de acesso ou navegação
• Janela em que aparecem opções
Processos Perceptivos e Cognitivos do Usuário selecionáveis pelo o user
• Por Schneiderman (2016, apud Barbosa et
➢ As principais características de uma interface: al, 2011, p. 174)
o Usabilidade • O objetivo deste tipo de design é criar uma
o Acessibilidade organização, razoável, inteligível, memorável
o Comunicabilidade e conveniente para as tarefas do user
▪ Capacidade de entendimento que o utilizador tem ▪ Formulários
daquela interface • Interação por meio de formulários
▪ Deve ser igual àquela que o utilizador tenha em • Campos, lacunas, caixas selecionáveis, et al
mente na hora de criar a experiência • Dificuldade do user em adotar um padrão
➢ Estilos de Interação ▪ Planilhas
o A forma como você irá interagir com a interface ▪ Diálogos desenvolvidos em linguagem
o As mais comuns natural
▪ Comandos de entrada • Sistemas inteligentes com processamento de
• Se dão por meio de prompt de comando ou linguagem natural
CLI o A Interação com a interface pode se dar de duas
• Exige conhecimento prévio geralmente de formas:
linguagem computacional ▪ Indireta
▪ Mensagens de erro ou feedback ▪ Direta
• Quando o usuário recebe poder de
manipular a interface diretamente
 •Exemplo: Planilhas do excel o Segundo Norma (1983, apud ROCHA e BARANAUSKAS,
o Onde o user pode 2003)
▪ Selecionar ▪ O mapa mental pode ser uma representação
▪ Arrastar dinâmica sobre qualquer projeto ou item que evolui
▪ Escolher valores naturalmente na consciência
▪ Escolher e inserir fórmulas o Na IHC o user trabalha com dois tipos de modelos
prontas mentais
▪ Et al ▪ Estrutural
• Preece e Rogers (et al, 2005), delimita como • Estrutura que foi memorizada pelo user e
benefícios da manipulação direta são usadas como descritivos de uma
o Autoconfiança do user mecânica de um sistema
o Facil aprendizado e memorização por ▪ Funcional (MMF)
usuários não recorrentes • É a análise orientada a função ou
o Menor ansiedade procedimento de como funciona o sistema
o Resposta imediata às ações do user o Subsistemas do modelo de processo humano
o Mensagens de erros não mais raras ▪ Percepção
o Facilitam o aprendizado do usuário • Trabalha com interação proposta pelas
o Maior facilidade para user experientes sentidos do corpo
➢ Verdade X Realidade • Está atrelada à nossa atenção
o “Você não é o usuário” • Essas sensações são armazenadas em uma
o Não existe público homogêneo memória sensorial, de curto prazo e em
o Precisamos considerar cada persona seguida, são armazenadas na de trabalho
➢ Processo Perceptivo e Cognitivo • Os padrões memorizados pelo user o
o A experiência do usuário é guiada, principalmente, auxiliarão como guias na suas jornadas
por sua percepção ▪ Cognição
▪ Auxiliam, por exemplo, na identificação de • Trabalha com as memórias de longo prazo
informações passadas sem texto, por ícones, cores (de trabalho)
de destaque • Utiliza informações previamente
▪ Semáforos japonês (Ao x Midori) armazenadas para tomada de decisão
o De acordo com a psicologia cognitiva ▪ Imagem acústica
▪ Mapas mentais são a análise da estrutura e função • É a imagem sensorial que o usuário tem
do raciocínio humano daquela interação
 •Para prepararmo-nos para ela é importante o Uma mão como concha para segurar
descobrir quem são os públicos, as personas e a o polegar da outra para interagir
o O profissional de UX consegue induzir o user a • Para selecionar um item da tela
tomar certas atitudes, se conduzir os estímulos de o Segura o celular com uma mão e
forma correta utiliza o indicador da outra para
▪ Segundo [Link] (2019), os 4 tipos de selecionar
estímulos ao user ▪ Thumb zone
• Reforço cognitivo • Área do polegar
o Comportamento estimulado por • Mapeamento da zone de alcance e interação
fatores externos do polegar com o ecrã
• Reforço negativo
Tópico Parte Principal
o Quando se subtraem os estímulos
Legendar informações,
• Punição positiva
Consistência ação-efeito usar títulos claros e dar
o Quando os estímulos desestimulam o feedback imediato.
utilizador Reduzir o esforço
• Punição negativa Carga de percepção cognitivo e o tempo para
o Quando a falta de estímulo gera o compreensão do sistema.
desestímulo Manter apenas o
➢ Bases da Ergonomia essencial, evitando
Interface minimalista
o O que é ergonomia? esforço cognitivo
▪ Dicionário Oxford Language desnecessário.
• “estudo científico das relações entre homem Utilizar cores e formas
e máquina visando a segurança e eficiência Agrupamento por formato para organizar elementos
no modo como um e outro interagem visuais e facilitar o uso.
o Forma de utilização conforme o uso Dispor elementos de
Agrupamento por localização forma lógica para fácil
▪ Celular (Steven Hoober), a maioria dos
identificação e leitura.
usuários usa
Garantir leitura clara, com
• Para digitar
Legibilidade fontes adequadas e visual
o As duas mãos limpo.
• Para rolar uma página web Ser claro nos objetivos e
o Os dois polegares Ser convidativo orientar o usuário, com
• Posição mais utilizada dicas e ajuda visível.
 Fornecer
imediatas às
respostas
ações,
Aula 03 – Usabilidade
Feedback
inclusive erros e Usabilidade
confirmações.
Limitar possibilidades • Conceito de Usabilidade
Controle explícito para reduzir erros do o Conjunto de normas, ou preceitos, que permeiam e
usuário. qualificam a interação do usuário
Permitir diferentes formas ▪ Quando você consegue resolver um sistema de
de realizar ações, forma intuitiva, ou
Flexibilidade/adaptabilidade
conforme o perfil do ▪ Quando você percebe que realizar tal tarefa é
usuário.
muito mais prático em uma plataforma/sistema que
Oferecer suporte tanto
em outro
para novatos quanto para
Considerar expertise do usuário
experientes, com o Norma ISSO/IEC 9126/2001
personalização. ▪ “...é um conjunto de atributos relacionados com o
Usar textos, cores e esforço necessário para o uso de um sistema
Proteção de erros formas para prevenir e interativo, e relacionados com a avaliação
orientar sobre erros.
individual de tal uso, por um conjunto específico de
Usar linguagem neutra e
usuários”
Medir a qualidade da prevenção direta, explicando os erros
e como corrigi-los. o Norma ISO 9241-11/2019
Permitir desfazer ações e ▪ Ergonomia
corrigir apenas o • “o grau em que o produto é usado por
Correção de erros
necessário, sem usuários específicos para atingir objetivos
retrabalho total. específicos com eficácia, eficiência e
Mantém padrões visuais e
satisfação, em um contexto de uso
Consistência textuais para evitar
específico”
confusão.
Diferenciar títulos, • Critérios de Usabilidade
Códigos subtítulos e textos com o Estão relacionados à
formatação clara. ▪ Facilidade de aprendizado (learnability)
▪ Facilidade de recordação (memorability)
▪ Eficiência (efficiency)
▪ Segurança no uso (safety)
 ▪ Satisfação do usuário (satisfaction) o Demonstra como tornar o conteúdo web acessível a
pessoas deficientes ou com alguma limitação específica
o Cada interface possui traços e particularidades que
o Define que a web pode ser utilizada por
tornam aquela experiência exclusiva
▪ Pessoas incapazes de ver, ouvir, se locomover ou
o Toda experiência exige conhecimento prévio ou esforço
de interpretar corretamente
mental
▪ Pessoas com dificuldade de leitura/interpretação
o É possível segmentar os usuário por nível de aprendizado
▪ Não sejam capazes de utilizar periféricos de
o Erros são comuns, mas a forma que eles são
entrada
apresentados podem ajudar o user a prosseguir na
▪ Pessoas sem acesso adequado à internet ou
jornada
hardware
▪ Um erro deve gerar um acerto
▪ Não dominam idioma estrangeiro no qual o doc foi
• Principais critérios, que irão te ajudar a avaliar a escrito
usabilidade ▪ Estejam com seus olhos, ouvidos ou mãos
o Consistência impossibilitadas momentaneamente
o Revisão de Guidelines ▪ Estejam com softwares desatualizados, como o
o Percurso cognitivo do utilizador browser, por exemplo
o Análise heurística
▪ Realizada com base nos preceitos das heurísticas Heurística
de Nielsen Em um processo de desenvolvimento de interface, existem métodos
• Criadas por Nielsen para avaliação de “qualidade” da experiência do user.
• Apresentam bons modos de usabilidade
• Veremos mais a frente • Conceito
o Informática
Acessibilidade ▪ Método de investigação baseado na aproximação
progressiva de um dado problema
• Conceito para a TI
• As 8 regras de ouro de Ben Schneiderman (1986)
o A adequação do sistema para pessoas com deficiência,
o Regra 1 – Esforce-se pela consistência
idosas ou sem familiaridade com tecnologia
▪ Utilizar uma metodologia padrão irá ajudar o user a
• WCAG – Web Content Acessibility Guidelines, 1.0 de
não se confundir com as funcionalidades
1999
o Documento com recomendações à criadores de conteúdo o Regra 2 – Atender a universalização do usuário
direcionado a acessibilidade na internet.
 ▪ Reconhecer os níveis de utilizadores e fornecer ▪ Dá sensação de maior fluidez e facilidade em usar
recursos condizentes com cada nível auxilia a o sistema
enriquecer a experiência de todos ▪ Torna o sistema mais funcional e produtivo
o Regra 3 – Ofereça feedback informativo • Heurísticas de Nielsen (1994)
▪ Para cada ação é e bom grado oferecer um o Apresentadas por Jakob Nielsen e Rolf Molich
feedback ao user o Principal lista de princípios de usabilidade
▪ De forma explicita o A avaliação heurística
• Com janelas com textos ▪ Necessita de um grupo de profissionais que
• Ideal para ações esporádicas conheçam a experiência/interface (3-5
pesquisadores) e que possam avaliá-la conforme
▪ Sutil
a lista de heurísticas
• Como um toque ou vibração de alerta
▪ Demora de 1 a 2 horas
• Ideal para ações frequentes
▪ São realizadas individualmente e no final os
o Regra 4 – Diálogos indicativos de término de uma dados são compartilhados entre os
ação pesquisadores
▪ Feedback importante para a noção de conclusão ▪ Recomenda-se uma revisão, para que a
investigação da interface aconteça pelo menos 2
o Regra 5 – Evite erros
vezes
▪ Projete uma interface em que os erros mais graves
sejam evitados ou menos recorrentes o As 10 heurísticas de usabilidade de Nielsen
▪ 1ª – Visibilidade do status do sistema
o Regra 6 – Permita a fácil reversão de ações
(Visibility of system status)
▪ Permita a reversão de forma simples das ações
• Ser transparente com o usuário, informando
realizadas
a ele de todos os passos e o que está
o Regra 7 – Ofereça controle de usuário acontecendo no sistema
▪ Esse tipo de conduta age de forma que o user não
▪ 2ª – Combinação entre o sistema e o mundo
fique entediado ou estressado com ações
real (Match between system and the real
recorrentes
world)
• como janelas de pop-up que ele não
• Aproximar o sistema do mundo real, seja
consegue marcar para não abrirem mais
por meio de linguagem verbal (textos,
o Regra 8 – Reduza a carga de memorização áudios) quanto por linguagem não verbal
▪ É o mesmo que reduzir o esforço cognitivo (imagens ou símbolos)
▪ 3ª – Controle do usuário e liberdade (User • Não é ideal contar com a memória do
control and freedom) usuário para a utilização
• Os users precisam de liberdade para decidir
▪ 7ª – Flexibilidade e eficiência de uso
e tomar decisões, assim como para resolver
(Flexibility and efficiency of use)
seus erros
• Formas de otimizar o uso
▪ 4ª – Consistência e padronização o Criação de atalhos de teclado ou
(Consistency and standards) toque de tela
• Deve-se padronizar cores, símbolos, fontes e o Personalização de comando
demais elementos que facilitem a fluidez de
▪ 8ª – Estética/Design minimalista (Aesthetic
sua interface para que ela seja consistente,
and minimalista design)
padronizada
• Menos é mais
▪ 5ª – Prevenção de erro (Error prevention) • Adequar a interface com elementos visuais
• “Boas mensagens de erro são importantes, leves e minimalistas, evitando a ação de
mas um design pensado cuidadosamente ruídos de elemento externos na interação
prevê que esses erros aconteçam” (Nielsen,
▪ 9ª – Ajude o usuário a reconhecer,
2020)
diagnosticar e se recuperar de erros (Help
• Sinalização adequada por meio mensagens
user recognize, diagnose, and recover from
de feedback em ações decisivas para evitar
erros)
erros graves
• Adaptar mensagens de erros de forma
o Erros bobos
sucinta e direta, com cores de alerta e
▪ Falta de atenção do user
símbolos correspondentes
o Erros severos
• Fuja de linguagem técnica desnecessária
▪ Problemas de interação mental
com o design da interface ▪ 10ª – Ajuda e documentação (Help and
documentation)
▪ 6ª – Reconhecimento ao invés de
• A ajuda deve estar a mão, ser direta e
memorização (Recognition rather than
pragmática, com foco no usuário
recall)
• Isso acontece quando deixamos os Critérios de Avaliação da Usabilidade
elementos ou opções mais visíveis na
interface • Avaliação Heurística
o Método de inspeção voltado para a busca por problemas e • Automaticamente
questões passível de alteração na experiência do user o Em que a análise é feita por meio de
um software
o Segundo Rocha e Baranauskas, deve ser feita em
conjunto com a evolução do projeto e não uma fase • Empiricamente
exclusiva o Teste com usuários reais
▪ Pode se afirmar que o método de avaliação
• Formalmente
apresenta 3 objetivos centrais
o Utilizando modelos e fórmulas
• Avaliar a funcionalidade do sistema
o Ajuda o criador da experiência a • Informalmente
alinhar a qualidade desta com a o Baseando-se nos avaliadores
praticidade da utilização
▪ É igualmente importante avaliar os erros e sua
o Analisa, além da IHC, a performance
frequência, mas de perto, para evitar vieses com
do utilizados ao usar o sistema
análises pessoais
• Avaliar o efeito da interface sob o ▪ É adequado gerar uma lista de problemas de
usuário usabilidade
o Avaliação da própria usabilidade ▪ Os métodos de inspeção atuam para encontrar
o Avalia-se problemas e sugerir o redesign
▪ a facilidade de utilização e ▪ Para avaliar a severidade do erro
aprendizado • Precisamos definir o custo de adequação do
▪ forma de interação com a problema, priorizando os mais graves
experiência • Combinar a frequência em que o erro
▪ esforço cognitivo para ocorre, com
utilização da interface • o impacto na experiência e se
• é fácil ou difícil para o usuário superá-lo
• Identificar problemas no sistema
como barreira,
o Avaliação de elementos que sejam
• e a persistência do erro, se ocorre de forma
passíveis de mudança para melhorar
recorrente
a visão do utilizador na experiência,
evitando, então, problemas de ▪ Dentre os métodos de inspeção, destacam-se
usabilidade • Avaliação Heurística
o Baseia-se na lista pré-estabelecida de
▪ Outras formas de obter dados de avaliação de
heurísticas de usabilidade
usabilidade
• Revisão de Guidelines • Análise dos dados
o Verifica se a usabilidade equivale ao
guidelines pré-estabelecido. Comunicabilidade
o Normalmente essa lista possui mais • Um problema comum de usabilidade
de 1k de guidelines, o que dificulta a • Para qualificar a comunicabilidade
utilização deste método o Método de avaliação de Comunicabilidade (MAC)
• Inspeção de Consistência ▪ Tem como objetivo observar como o user interage
o Basicamente é verificar a consistência com a interface e, assim, identificar possíveis
da experiência por meio da problemas
padronização da interface ▪ Etapas
• Preparação
• Percurso Cognitivo o Definição do objetivo do teste
o Avaliação do caminho a ser seguido o Seleção de tarefas e geração dos
pelo user por meio de simulação cenários da atividade
o Analisa as tarefas realizadas, desde o Após isso, seleção do usuário por
uma fluida experiência até pontos meio de questionários
como erros • Execução
o Análise focada no design quanto a o Etapa gravada
facilidade de aprendizado, sob o o Usuário realiza as tarefas
viés do esforço cognitivo selecionadas
empregado pelo user na sua o Com ou sem entrevista após, definido
experiência de exploração pelo responsável do teste
o Fases • Análise
▪ Preparatória o Etiquetagem
• Definição das ▪ Analise das interações e
o Tarefas associação das expressões aos
o Sequência de momentos de ruptura da
ações para todas comunicação
as tarefas o Interpretação
o Os users ▪ Interpretação das expressões
o Interface que que caracterizam a ruptura, a
será analisada
▪ Análise
 frequência e o contexto que • Para Morais e Lopes (2014), a usabilidade
acontecem o Está relacionada a satisfação do usuário e a
▪ Tipos de Falhas operacionalidade eficiente e agradável de uma interação
• Completa o Principais fatores que devem ser analisados
o Comunicação ▪ Facilidade de aprendizado
inconsistente • Tempo/esforço para entender como se usa
• Parcial ▪ Facilidade de uso
o Parte da • Esforço cognitivo empregado
comunicação não ▪ Eficiência de uso
é atingida • Se o sistema cumpre o que promete, em
• Temporária termos de usabilidade
o Comunicação ▪ Eficiência de produtividade
falha que o user • Se o usuário consegue usar o que se
tenta perceber e promete
tenta resolvê-la ▪ Satisfação do usuário
o Perfil Semiótico • Avaliação qualitativa do usuário
▪ Delimitação do perfil do user ▪ Flexibilidade
em que se utiliza template pré- • Adaptabilidade do sistema vs necessidades
estabelecido: do user
• Quem você é ▪ Utilidade
• O que entendi que você • Subjetivo
quer ou precisa fazer • Análise qualitativa do número de funções
• Quais forma de fazer exercidas e utilizadas pelo user
• Por quê precisa fazer ▪ Segurança no uso
• • Nível de proteção
• Este é o sistema que ▪ Barreira
• Fiz para você • Barreira que impede o uso da interface
• Que você pode ou deve ▪ Obstáculo
usar assim • Atua como a barreira mas o user consegue
• Para realizar essa série dominá-lo
de objetivos ▪ Ruído
• Associados a essa • Fator que atrapalha a experiência,
minha visão diminuindo a eficiência de produtividade
 o Problemas de Usabilidade • Antes da fase de análise devemos observar 4 aspectos
▪ Quanto à tarefa o O que são os usuários do sistema?
• Primários ▪ Categoria de utilizadores, como mais específico
o Principais melhor (persona)
o Atrapalham a concluir ou realizar o Qual tarefa será analisada?
atividade emergentes, principais ou ▪ Pode ser uma ou mais tarefas
importantes o Qual a correta sequência de ações para cada tarefa
• Secundários descrita?
o Atrapalham a concluir tarefas menos ▪ O que se espera do user? Quais os passos ele
emergentes precisa para concluir a tarefa?
▪ Quanto ao usuário o Qual a interface definida?
• Gerais ▪ Como vai ser a cara do aplicativo ou do site que a
o Atrapalham todos os tipos de user pessoa vai usar
• De inicialização • Na fase de análise do percurso cognitivo
o Impedem um novo usuário ou users o avalia-se as ações tomadas e cria-se um roteiro para
não recorrentes a começar a conduzir o usuário, se baseando em suposições sobre os
interação com a interface objetivos e o conhecimento deste
• Avançados o
o Atrapalham usuários avançadas
• Especiais
o Atrapalham users deficientes ou com
Aula 04 – Métodos Entregáveis – Parte 1
necessidades específicas Nessa unidade você irá compreender os princípios das principais
▪ Quanto a interface metodologias de entregáveis da área. Para isso, iremos te apresentar a
• Falsos parte teórica e prática de como abordar cada método. O desafio proposto
o Enganos que ocorrem por conta de fará provocações para que você utilize seus conhecimentos prévios e
inexperiência do avaliador ou da estabeleça as primeiras noções sobre metodologias destes entregáveis
ferramenta para validar a experiência do usuário.
• Novos
Palavras-chave: Entregáveis. Personas. Moodboard. User stories. Card
o Surgimento de um obstáculo após
sorting. Eye tracking. User flow. Sitemap. Storyboard.
uma revisão de usabilidade feita de
equivocadamente Alguns entregáveis servem para auxiliar no desenvolvimento da
jornada, validando como seria a experiência do user.
Segundo Rocha e Baranauskas (2003),
➢ Desing Participativo (ou Colaborativo) • Foto
o Movimento de 70’s, criado na Noruega por Kristen • Idade
Nygaard • Ocupação
• Demografia
o Incorpora o user como membro da equipe de design
• Experiência
e não apenas como sujeito de observação e experimentos
• Principais Tarefas
o 3 características que definem o DP • Dores
▪ É orientado ao contexto • Analgésicos
▪ Envolve elaboração em vários níveis
o Templates de Personas
▪ Apresenta uma abordagem interativa ao design
▪ [Link]

➢ Personas
➢ User Stories
o Desenho do perfil de usuários hipotéticos
o São pequenos retratos da vida do user
▪ Quais são suas motivações?
o Permite ao designer ter empatia com o user
▪ O que estão fazendo?
o Carrega detalhes como emoções e pensamentos
▪ Como resolvem a dor, até o momento sem
o Modelo
solução?
▪ Como um <tipo de user>, eu quero <algum
▪ Quais são suas dores e quais são os analgésicos
objetivo> para que <algum motivo>
para essas dores?
▪ Como um... / eu quero... / para que eu possa...
o Na hora de cria-las devemos lembrar que elas devem
o Métodos para criar user stories, Fabrício Teixeira (2013)
atender aos campos de necessidades dos clientes e
▪ Em cartões de papel
usuários
▪ Em planilhas
o NÃO é um ENTREGÁVEL ▪ Em sistemas online
▪ Serve para auxiliar no processo de criação da
o Critérios de aceite (ou aceitação)
jornada do usuário
▪ Lista de itens de negócio
o Processo de criação da Persona ▪ Expressam como usar a funcionalidade na história
▪ Criar persona com base na própria opinião ▪ Contém infos extras não contextualizadas
▪ Realizar entrevista dos usuários ▪ P.O – Product Owner
▪ Refatorar e validar as Personas criadas
o Utilizando um User Story como exemplo:
▪ O que ter na ficha de Persona
▪ – Como estudante;
• Nome
 ▪ – Eu gostaria de ter uma plataforma que reúna todo o Serve como auxilio criativo tanto para a equipe de design,
o tipo de mídia para estudo; quanto para a de criação de interfaces
▪ – Para conseguir melhorar meu aprendizado. o É uma espécie de história em quadrinhos
1. Cada desenho é uma cena descrita
o Como critério de aceitação:
2. Ao final forma uma história
▪ – Quero poder encontrar as mídias de fontes
o Muito usado pela Disney para imaginar cenas de filmes
populares, como a Netflix;
o Segundo Fabrício Teixeira (2013), nova ordem de
▪ – Eu quero que o conteúdo seja leve e que eu possa
entregáveis, com o Storyboard sendo entregue
acessar do meu celular.
primeiro
o A metodologia de Klementz, Job Stories 1. Visa dar uma noção da jornada do user aos
▪ Como um... / Eu quero... / Então eu possa... desenvolvedores antes de iniciar o projeto
2. Vantagens
➢ MoodBoard • Facilidade
• Desenho
o Painéis Semânticos
• Circular com facilidade
o Estrutura que carrega elementos de referências
• Despertar novas ideias
visuais para o projeto
• Visibilidade
o Expressão do projeto de maneira gráfica/visual, por
• Contexto de uso
meio de imagens, texturas, cores, tipografia
➢ Card Sorting
o 3 motivos para utilizar moodboard, Kakau Fonseca (2018)
o Colaborativa
1. Inspiração o Foca especialmente na disposição das informações no
2. Melhora a comunicação produto
3. Ajuda a encontrar um estilo para o design o Pode ser feito com
o Fontes de Criação 1. Post-its
1. [Link] 2. Cartões
semantico/ 3. Ferramentas on-line
2. [Link] o Excelente Vetor para entendimento e mapeamento
do “pensa” do usuário
1. Como nomear menus
➢ Story Board 2. Como criar categoria no site/app
o Forma de apresentar e convencer o seu cliente das 3. Disposição dos elementos na tela
funcionalidades do sistema o Ao desenvolver o card sorting, é importante
considerar segundo Wagner Guimarães (2018)
 1. Seleção do conteúdo que será validade pelo • Usando experiências pré-existentes
user • O usuário organiza de acordo com um modelo
2. Recrutamento de participantes pré-estabelecido
• Pode ser individual, contendo de 8 a 10 3. Híbrido
participantes • O participante pode organizar as categorias
• Em grupo com pelo menos 5 grupos de 3-5 tanto como no tipo fechado, quanto como
pessoas no tipo aberto
3. Preparação dos cards ➢ Eye Tracking
• Apresentar cada validação o Caro
• Utilizar: o Utiliza hardware e software específicos
o Cores o Considerado especialmente para dispositivos móveis
o Letra legível o Mapeamento ocular do “escaneamento” feito pelo user na
o Aplicar microcopy utilização da tela
o Objetivo
Sugere-se que você guarde de 20 a 30 minutos para aplicar a
➢ User flow / Sitemap
metodologia. Explique para os participantes como funcionará, coloque-
o Ferramentas diferentes / com funções propósitos distintos,
os diante dos cards misturados e peça-os para organizar de acordo
mas
com a sequência lógica que acharem mais adequada. É
1. No final apresentam estruturas super parecidas
interessante oferecer papel e caneta (ou até cartões em branco)
2. User flow
para que o usuário possa interagir e sugerir algumas informações
• Voltado para a jornada do user
durante a montagem da jornada. Sugira para que eles “pensem em voz
3. Sitemap
alta” para que você ouça e entenda o processo mental realizado
• Voltado para análise posterior do motor de
por eles. Ao final, peça para que expliquem o motivo de suas
busca de um site
decisões e documente tudo.
o Sitemap
o Tipos de Card Sorting, segundo Wagner Guimarães (2018) 1. Arquivo de texto
1. Aberto 2. Utilizado para indexação das páginas
• Descobrir o modelo mental do participante 3. Contém a arquitetura do site, bem como metadados
• Deixá-lo organizar a validação da forma que de dados não estruturados
desejar 4. Visão geral direcionando o user para onde ir
• “pensar em voz alta” as motivações e 5. Imprescindível para a criação de uma
escolhas navegação mais fluida
2. Fechado
 6. Dá noção de profundidade do site e hierarquia das
páginas
7. Sugere-se que seja criado antes do wireframe, pois
permitirá o melhor desenvolvimento deste
8. Vantagens
• Proporciona melhor experiência
• Melhora a navegabilidade
• Melhora a instintividade na jornada
• Permite uma visão ampla da jornada,
facilitando a manutenção
o User flow
1. Tenha em mente o perfil do user e o objetivo do
produto para traçar a delimitação
2. Cada tela do entregável é correspondente a ação do
user realizada na tela anterior
• A tela principal é a primeira tela do esquema
3. Contudo, pode haver outras porta de entrada no seu
site, precisar ser mapeadas
 Aula 05 – Métodos Entregáveis – Parte 2 • Cores e destaques
4. Feedback
Conceitos, Tipos e Importância de Wireframes • Permite refinar a experiência
o Tipos de Protótipos
para construção de Produtos de Software 1. Baixa Fidelidade
➢ Todo wireframe é protótipo, mas nem todo protótipo é • Wireframe
wireframe • Estética menos trabalhada
o 1ª Forma do protótipo • Objetiva
1. O protótipo pode ser feito em papel o Traduzir a ideia do modelo mental
2. Baixa fidelidade 2. Média fidelidade (Ou Molde Anotado)
3. Objetiva, exclusivamente, iniciar os trabalhos de • Está entre os modelos de baixa e alta
um protótipo fidelidade
o 2ª Forma • possui legendas apontando funcionalidades
1. Irá apresentar uma função ou feature do produto • Não é tão avançado quanto um modelo de
que está sendo desenvolvido alta fidelidade
o 3ª Forma 3. Alta Fidelidade
1. Propõe a criação de um wireframe de um programa • Busca semelhança ao projeto final
que já existe e que apresenta a função desejada • Contém elementos que provavelmente
2. Não seja 100% igual estarão no projeto final
3. Apresente algumas novas funções • Versão de jornada interativa
o O que leva em conta na hora de criar um
o Principais finalidades do wireframe, segundo Neil
wireframe?
Patel [s.d]:
1. Briefing
1. Auxiliar o designer
• estar em sintonia com o cliente
• O wireframing é um forte vetor no processo
• se não houver cliente específico,
criativo
documentar todos os pontos solicitados
• Ajuda a economizar tempo
2. UX (user experience)
2. Base para considerar mudanças
• Ver a vontade do cliente
• Permite uma noção melhor do projeto
• Análise sob a ótica da prática e da
• Auxilia a enxergar se é alcançável
experiência do usuário
3. Evita atrasos e gastos
3. Posicionamento e cores
• Como dá uma noção do projeto, permite o
• Hierarquização de cores e elementos
cliente antever algo que não goste
• Tamanho dos elementos
 • Evita retrabalho ➢ Processo de Criação de um protótipo
4. Facilita alinhamento com o cliente 1. Inspiração
5. Promover o desenvolvimento de variação de 1. Utilizar outros modelos, ideias e produtos para
layouts inspirar seu projeto
• Por ser mais simples permite a criação de 2. Não copie, inspire-se
variações 2. Mapeie o seu fluxo de usuário
1. Telas navegáveis
Técnicas para Construção de Wireframes e 3. Crie blocos em seu wireframe
Exemplos de Ferramentas 1. Começar a trabalhar com o objetivo e usuário em
mente
➢ O Editorial [Link] (2019)ajuda a responder essas três 2. Disposição dos elementos
perguntas: 4. Grids
1. O quê? Quais grupos de conteúdos serão priorizados. 1. Adoção de uma infraestrutura padrão do layout
2. Como? Como será a visualização da interface e como ele 5. Funcionalidades
será utilizada pelo usuário. 1. Pense e veja a melhor forma de apresentar as
3. Onde? Definir o posicionamento e estrutura da informação funcionalidades
e conteúdo na interface. 6. Detalhes
➢ Na hora ou antes de criar um wireframe de todo ou parte 1. Símbolos
do seu sistema 2. Botões
3. Logos
1. Entrar em acordo com a equipe do critério que será 4. Ícones
adotado 7. Estabeleça prazos
2. Discutir o desenho da interface 8. Não torne mais complexo do que o necessário
3. Definir ferramentas que auxiliem a pensar na jornada do 1. Neste caso a perfeição é inimiga da pressa
user 2. Feito é melhor que perfeito
4. Definir tipos de conteúdos que irão na interface 3. Nesta etapa, suas ferramentas são lápis e borracha
5. Definir a hierarquia visual 9. O U de “UX” não é à toa – Lembre-se do Usuário!
1. Verifique se a solução é adequada e agradável sob
➢ Elementos básicos de um protótipo
a ótica do user
1. Cabeçalho
10. Organização Sempre
2. Rodapé
1. Seguir um plano de ação
3. Barra Lateral
2. Definir metas
4. Área de Conteúdo
3. Organização do wireframe
 1. Qualificação do produto
2. Verificação do atendimento das expectativas
gerais
Aula 06 – Processos de Criação do Trabalho de 3. Identificar público-alvo
4. Mapear concorrentes
UX/UI 2. De Campanha
1. Avaliação de estratégias de publicidade e
Introdução marketing
3. De Conceito
Fases para Entrega de Projetos
1. Análise da reação ante
➢ Entendimento atualizações/alterações em um app
1. Essencial para que se consiga desenhar a jornada do user,
2. Ou adequar com base em melhorias percebidas ➢ Escrita (UX Writing)
3. Definição do “O QUÊ” e do “COMO” 1. O UX Writer tem a intenção de
➢ Pesquise (UX Research) 1. Cativar, aproximar e facilitar a vida do leito
1. UX Research 2. Deixar tudo alinhado para caber na tela e espaços
1. Ramo do UX Design que objetiva a realização de delimitados
pesquisas 2. Principais práticas ao criar um texto com base na
2. O researcher desta área ira atuar na assertividade da Experiência do usuário
experiência do user, envolvido no pré, durante e pós- 1. Mensagem Clara
projeto 1. Conheça seu público
3. No Pré-projeto 2. Use palavras fáceis
1. Delimitar público-alvo com 3. Evite abreviações ou siglas pouco
1. Idade conhecidas
2. Gênero (se necessário) 4. Verbo + sujeito + complemento
3. Classe social 2. Concisão
4. Realidade financeira 1. Dizer mais com menos
5. Dores 3. Acompanhe a Jornada
6. Anseios 1. O texto deve condizer com o momento da
4. Durante e após o projeto jornada
1. Testes de usabilidade 4. Crie seu guia de escrita
5. Categorias de Testes, por D’Angelo (2020) ➢ Esboço e Produção
1. De Produto
 1. Um esboço é algo flexível que permite alterações fáceis e 1. Elencar principais pontos das personas
não se deve apaixonar-se pela ideia 2. Analise, pense e visualize a interação do user com
2. Lean UX a sua interface
1. Metodologia que auxiliar no lançamento de um 3. Use o mapa de empatia
Produto Mínimo Viável (MVP) 4. Analisar requisitos de interação com base no
2. É a combinação entre esboço do projeto
1. Metologia ágil 5. Iniciar a partir das telas principais, que iniciam o
1. Frameworks de gerenciamento de fluxo
tempo 1. Telas com grandes menus e
2. Usa ferramentas como Trello ou Jira 2. opções de navegação
2. Design Thinking 3. é onde devemos aplicar os conceitos de esforço
1. Desenvolvimento com foco na cognitivo e fácil aprendizagem
experiência do usuário 6. Desenhar a navegação
2. Fator chave na 1ª etapa é a empatia 1. Definição dos fluxos/ caminhos
3. Idear soluções e prototipar 2. Usar um Diagrama de Fluxo do Usuário
4. Realização de testes antes do deploy 3. Equilíbrio entre verticalidade e horizontalidade
3. Lean Startup 7. Design das telas
➢ Validação 1. Disposição dos elementos
1. Pode ocorrer no início, durante e na entrega do projeto 2. Guias de estilos
3. Heurísticas de Nielsen
8. Prototipação Horizontal x Vertical
1. Horizontal
Aula 07 – Interfaces Gráficas 1. Fornece uma ampla gama de funções, mas
com poucos detalhes
Introdução 2. Vertical
1. Muitos detalhes para poucas funções
Elaborar um protótipo baseado nas ideias e necessidades do usuário faz
parte de uma das principais tarefas do UX Designer. Visão Conceitual Descritiva e Prescritiva
Métodos e Técnicas de Projeto de Interfaces ➢ Análise Descritiva
1. Análise com base em dados anteriores para entender o
Gráficas impacto disso na tomada de decisão
➢ Elaborando Interfaces Gráficas (IG) ➢ Análise Prescritiva
 1. Avaliam possíveis tomadas de decisão e ponderam com
base em dados e decisões anteriores qual a melhor
Aula 08 – Interfaces Personalizadas
decisão a ser tomada

Prototipação (Exemplos e Ferramentas)

➢ Sketch
1. Disponível apenas para MacOS
2. Baseada em vetor
➢ Invision App
1. Supercompleto
2. Com animações de tela
3. Criação de testes com elementos clicáveis
4. Qualidade superior
➢ Axure
1. Mais abrangente
2. Permite colocar todas as funcionalidades
➢ FramerJS
1. Permite ver os códigos em ação
2. Ideal para profissionais de UX e UI condeless
➢ Principle
1. Simples, fluida e intuitiva
2. Faz o mesmo que os demais
3. Mas possui uma interface, plataforma e estilos diferentes
➢ AdobeXD

Apresentação de uma Ferramenta de

Prototipação
Figma
Aula 09 – Testes com o Usuário