SlideShare uma empresa Scribd logo
UX DESIGN PARA
DESENVOLVEDORES
RIAN DUTRA
EXPERIÊNCIA
+10 de experiência
Sócio fundador da Rian Design,
na qual desenvolveu sites,
aplicativos e projetos gráficos
para clientes como Udacity
Brasil, Museu Imperial de
Petrópolis, Instituto Ronald
McDonald, SOS Mata
Atlântica, Ephere, Sergio
Mallandro e Tom Cavalcante.
FORMAÇÃO
‣ Mestrado em Ciência da
Computação (UFJF)
‣ Pós-graduação em Gestão,
Empreendedorismo e Marketing
(PUCRS)
‣ Pós-graduação em Animação 3D
(Instituto Infnet)
‣ Graduação em Design Gráfico
(Instituto Infnet)
‣ Graduação em Análise e
Desenvolvimento de Sistemas
(UNESA)
O QUE É
UX DESIGN
O QUE É UX DESIGN
DESIGN DE EXPERIÊNCIA DO USUÁRIO
▸ UX ≠ UI
▸ UX diz respeito à experiência do usuário ao usar um
produto/serviço, em todas as suas etapas de contato
▸ UX não necessariamente tem a ver com software
▸ Experiência do usuário com o atendimento do banco
▸ Experiência do usuário com um sachê de catchup
▸ Experiência do usuário com uma máquina de estacionamento rotativo
O QUE É UX DESIGN
UX
6 MAIORES ERROS
DE UX DESIGN
6 MAIORES ERROS DE UX DESIGN
ERRO 1
JOGAR DADOS NA TELA
▸ Fazer o que é fácil para nós, e não o que é melhor para o
usuário
▸ Mostrar dados crus em vez de informações refinadas
▸ O usuário tem de se esforçar para interpretar os dados e
transformá-los em algo prático e aplicável
▸ Às vezes, o que pode ser fácil para os desenvolvedores
enxergarem, pode não ser para o usuário
6 MAIORES ERROS DE UX DESIGN
ERRO 2
EXPOR TECNOLOGIA AO USUÁRIO
▸ Os desenvolvedores passam horas diante da tecnologia e
é natural que esqueçam que o usuário não entende
termos técnicos ou jargões que são naturais para os devs
▸ Mas expor o usuário a termos técnicos pode causar
confusão e fricção cognitiva, enfraquecendo a UX.
▸ Deve-se utilizar linguagem mais humanizada.
▸ O usuário não se importa com a tecnologia. Ele quer
apenas resolver seu problema
6 MAIORES ERROS DE UX DESIGN
ERRO 3
USER INTERFACE (UI) BAGUNÇADA
▸ A velha desculpa de “Não sou bom em UI” e acabar
deixando a UI bagunçada
▸ UI bagunçada é a forma mais rápida de fricção cognitiva
que destrói a experiência do usuário
▸ Desenvolvedores não são obrigados a serem ótimos UI
Designers, mas não exagere nessa desculpa
▸ No mínimo, mantenha a UI limpa e organizada
6 MAIORES ERROS DE UX DESIGN
ERRO 4
SER INCONSISTENTE
▸ Alterar a posição de botões, menus e outros elementos ao
longo da aplicação torna a interface inconsistente
▸ O botão “Salvar" deve ser sempre “Salvar”
▸ O menu lateral deve ser sempre lateral
▸ Mantenha os botões e menus nos mesmos lugares, os
mesmos rótulos, os mesmos ícones, fontes e estilos
6 MAIORES ERROS DE UX DESIGN
ERRO 5
CODIFICAR PARA O “USUÁRIO EXPERT”
▸ Evitar o trabalho pesado, de fazer algo fácil de ser usado, com a
desculpa de que está codificando para “Usuário Expert”
▸ Pensar que o usuário tem conhecimentos técnicos e entende a
tecnologia, é um grande erro
▸ Mesmo que o usuário tenha mais conhecimento sobre tecnologia, o
trabalho do desenvolvedor é criar algo que funcione, tanto em termos
técnicos quanto em relação à facilidade de uso
▸ No dia a dia, o usuário não deve perder tempo usando a
aplicação. Ela deve o ajudar a resolver os problemas de forma
mais rápida e fácil
6 MAIORES ERROS DE UX DESIGN
▸ “O usuário pode querer fazer isso ou precisar daquilo” é o mesmo
que brincar de adivinha
▸ Às vezes, passam horas codificando para problemas que não
existem, simplesmente porque querem ou gostam de programar
algo específico. Certo, pode ser divertido :)
▸ É importante focar no problema do usuário
▸ Entender quem é o usuário e o que ele precisa pode reduzir a
complexidade do código e construir a coisa certa de primeira.
Caso contrário, pode ser entregue algo mais complexo do que
os usuários precisam, destruindo a experiência do usuário
ERRO 6
SOLUCIONAR PROBLEMAS NÃO EXISTENTES
10 PRÁTICAS PARA
EVITAR ERROS BÁSICOSOU, 10 HEURÍSTICAS DE NIELSEN
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ Mantenha o usuário sempre
informado com o que ele
está fazendo, informando o
retorno de suas ações
▸ Ex: barras de progresso, remover
item da interface ao exclui-lo dos
registros, cor de um botão
indicando que aquela ação foi
executada
PRÁTICA 1
MOSTRAR O QUE ESTÁ
ACONTECENDO
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
PRÁTICA 2
FALAR A LINGUAGEM
DO USUÁRIO
▸ Fale a língua do usuário de
forma que seja entendida e
que pareça familiar. Evitar
termos técnicos
▸ Metáforas com uso de ícones
são excelentes para tornar a
interface familiar
▸ Ex: barra de ferramentas do
Photoshop faz bom uso de ícones
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ O usuário deve conseguir controlar
a navegação, poder abortar uma
tarefa ou desfazer uma operação
▸ Usuários às vezes escolhem
funções por engano e precisam
conseguir sair facilmente, podendo
desfazer ou refazer a interação
▸ Ex: seguir e deixar de seguir no Instagram,
excluir postagem no Wordpress, bloquear
amigos no Facebook, remover do carrinho
PRÁTICA 3
CONTROLE E
LIBERDADE
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ Mantenha a consistência e padrão
visual (texto, cor, desenho do
elemento, som etc)
▸ Ex 1: botões de fechar/max/minimizar das
janelas do Windows, caixa de entrada de
mensagens do Facebook, barra de
pesquisa dos navegadores
▸ Ex 2: no Windows 8 foi removido o menu
“Iniciar”, que existia desde o Win95. Gerou
toneladas de reclamações e usuários
insatisfeitos.
PRÁTICA 4
CONSISTÊNCIA E
PADRÕES
Logo na esquerda.
Busca no centro.
Login na direita.
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ Crie interface que faça o
usuário evitar erros
▸ Avise o usuário quando
algum erro pode acontecer
▸ Ex: avise qual tipo de arquivo é
permitido para upload, alerta “Tem
certeza de que deseja excluir isto?”,
perguntar ao usuário se deseja
enviar email sem anexo (no Gmail)
PRÁTICA 5
PREVENÇÃO DE ERROS
Para o usuário que não faz compras há muito
tempo na Americanas, o site pergunta se o
endereço ainda é aquele cadastrado.
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ O usuário não tem obrigação de
decorar qual foi o caminho que
ele fez pra chegar até a página
▸ Eles devem realizar tarefas já
executadas antes, sem dificuldade
▸ Ex: breadcrumb em sites, fontes usadas
recentemente no Word são mostradas no
topo da lista, últimos efeitos usados no
Photoshop, também. Últimas pesquisas
feitas no Facebook
PRÁTICA 6
MINIMIZAR A SOBRECARGA
DE MEMÓRIA
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ Deve ser fácil para inexperientes,
mas também deve permitir os
experientes personalizar ações
conforme de costume,
facilitando sua usabilidade
▸ Deve se adaptar às necessidades
do usuário
▸ Ex: atalhos no Photoshop (ou outros
programas), busca rápida no Mac
PRÁTICA 7
FLEXIBILIDADE E
EFICIÊNCIA DE USO
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ Apresente a informação que
o usuário precisa no
momento, nada mais!
▸ Simples e direto ao ponto
PRÁTICA 8
DIÁLOGO SIMPLES
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ Devem ajudar o usuário a
entender o que houve
▸ Linguagem objetiva e sem
códigos/termos técnicos
▸ Ex: Firefox avisa que houver algum
problema ao acessar o site, por falta de
internet ou site fora do ar
▸ Ex (ruim): telas azuis do Windows.
Motivos pode ser: placa-mãe, memória,
vídeo, temperatura, software e mil outros
PRÁTICA 9
MENSAGENS DE
ERRO CLARAS
10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN
▸ O ideal é que seja tão fácil
que não precise de
documentação
▸ A ajuda deve ser acessível
▸ Ex: centrais de ajuda de sites,
documentação do Word e Excel
PRÁTICA 10
AJUDA E
DOCUMENTAÇÃO
www.rian.design www.designr.com.br

Mais conteúdo relacionado

Mais procurados

NFT, Metaverso e o Futuro da Experiência Humana
NFT, Metaverso e o Futuro da Experiência HumanaNFT, Metaverso e o Futuro da Experiência Humana
NFT, Metaverso e o Futuro da Experiência Humana
Rian Dutra, MSc.
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
Wellington Oliveira
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
Nécio de Lima Veras
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
Monica Mesquita
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
Heraldo Gonçalves Lima Junior
 
UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticasUX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
Santiago Bustelo
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Julien Condamines
 
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Rafael Burity
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
Andrea Dalforno
 
Introdução Ao Web Design
Introdução Ao Web DesignIntrodução Ao Web Design
Introdução Ao Web Design
Sandra Oliveira
 
Aula - Processos de Criação - Bloqueio Criativo
Aula - Processos de Criação - Bloqueio CriativoAula - Processos de Criação - Bloqueio Criativo
Aula - Processos de Criação - Bloqueio Criativo
Gabriel Ferraciolli
 
Ihc2016.2 aula 1 introdução a ihc
Ihc2016.2 aula 1 introdução a ihcIhc2016.2 aula 1 introdução a ihc
Ihc2016.2 aula 1 introdução a ihc
Ticianne Darin
 
Innovation Management: Design Thinking Workshop
Innovation Management: Design Thinking WorkshopInnovation Management: Design Thinking Workshop
Innovation Management: Design Thinking Workshop
Thomas Lotter
 
Processo de Criação e Desenvolvimento com Design Thinking
Processo de Criação e Desenvolvimento com Design ThinkingProcesso de Criação e Desenvolvimento com Design Thinking
Processo de Criação e Desenvolvimento com Design Thinking
Coletivo Mola
 
Design Emocional
Design EmocionalDesign Emocional
Design Emocional
Edu Agni
 
Construção de Personas
Construção de PersonasConstrução de Personas
Construção de Personas
Tracto Content Marketing
 
Engenharia Semiótica e Engenharia Cognitiva
Engenharia Semiótica e Engenharia CognitivaEngenharia Semiótica e Engenharia Cognitiva
Engenharia Semiótica e Engenharia Cognitiva
Dayane Cristine Leite
 
Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
Denis L Presciliano
 
Planejamento Estratégico Pessoal
Planejamento Estratégico PessoalPlanejamento Estratégico Pessoal
Planejamento Estratégico Pessoal
Michel Moreira
 
Design emocional
Design emocionalDesign emocional
Design emocional
Elisa Olsson
 

Mais procurados (20)

NFT, Metaverso e o Futuro da Experiência Humana
NFT, Metaverso e o Futuro da Experiência HumanaNFT, Metaverso e o Futuro da Experiência Humana
NFT, Metaverso e o Futuro da Experiência Humana
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticasUX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
 
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...Da IHC ao UX: Uma história de ressignificação  para o mercado / Webinar BR-CH...
Da IHC ao UX: Uma história de ressignificação para o mercado / Webinar BR-CH...
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Introdução Ao Web Design
Introdução Ao Web DesignIntrodução Ao Web Design
Introdução Ao Web Design
 
Aula - Processos de Criação - Bloqueio Criativo
Aula - Processos de Criação - Bloqueio CriativoAula - Processos de Criação - Bloqueio Criativo
Aula - Processos de Criação - Bloqueio Criativo
 
Ihc2016.2 aula 1 introdução a ihc
Ihc2016.2 aula 1 introdução a ihcIhc2016.2 aula 1 introdução a ihc
Ihc2016.2 aula 1 introdução a ihc
 
Innovation Management: Design Thinking Workshop
Innovation Management: Design Thinking WorkshopInnovation Management: Design Thinking Workshop
Innovation Management: Design Thinking Workshop
 
Processo de Criação e Desenvolvimento com Design Thinking
Processo de Criação e Desenvolvimento com Design ThinkingProcesso de Criação e Desenvolvimento com Design Thinking
Processo de Criação e Desenvolvimento com Design Thinking
 
Design Emocional
Design EmocionalDesign Emocional
Design Emocional
 
Construção de Personas
Construção de PersonasConstrução de Personas
Construção de Personas
 
Engenharia Semiótica e Engenharia Cognitiva
Engenharia Semiótica e Engenharia CognitivaEngenharia Semiótica e Engenharia Cognitiva
Engenharia Semiótica e Engenharia Cognitiva
 
Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
 
Planejamento Estratégico Pessoal
Planejamento Estratégico PessoalPlanejamento Estratégico Pessoal
Planejamento Estratégico Pessoal
 
Design emocional
Design emocionalDesign emocional
Design emocional
 

Semelhante a UX Design para Desenvolvedores

User experiense
User experienseUser experiense
User experiense
Gabriela Silva
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
iMasters
 
Apresentação tarefa 2 ihm
Apresentação tarefa 2 ihmApresentação tarefa 2 ihm
Apresentação tarefa 2 ihm
Maxnilson Almeida
 
O que é user experience
O que é user experienceO que é user experience
O que é user experience
Andersom Alves Laranja
 
Palestra UX Etec - 22_04
Palestra UX Etec - 22_04Palestra UX Etec - 22_04
Palestra UX Etec - 22_04
danilopinheirosan
 
UX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca BrancaleoneUX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca Brancaleone
Byte Girl
 
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
Rafael Burity
 
UX Design
UX DesignUX Design
UX Design
Vitor Garcia
 
Gisele, lucas e felipe. trabalho de ihm ux
Gisele, lucas e felipe. trabalho de ihm  ux Gisele, lucas e felipe. trabalho de ihm  ux
Gisele, lucas e felipe. trabalho de ihm ux
GISELE TERTO GOMES
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
Luis Fernando Justus
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AI
klaibert
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
Luanna Eroles
 
ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte A
Fabiano Damiati
 
Ihc Aula4 A
Ihc Aula4 AIhc Aula4 A
Ihc Aula4 A
Fabiano Damiati
 
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Rafael Burity
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
Bruno Biagioni Neto
 
Ux
UxUx
ads pra os nigers.pptx
ads pra os nigers.pptxads pra os nigers.pptx
ads pra os nigers.pptx
AmorimRazo
 
User experience
User experienceUser experience
User experience
Rafael Souza
 
Ux nas organizações
Ux nas organizaçõesUx nas organizações
Ux nas organizações
Edu Agni
 

Semelhante a UX Design para Desenvolvedores (20)

User experiense
User experienseUser experiense
User experiense
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
 
Apresentação tarefa 2 ihm
Apresentação tarefa 2 ihmApresentação tarefa 2 ihm
Apresentação tarefa 2 ihm
 
O que é user experience
O que é user experienceO que é user experience
O que é user experience
 
Palestra UX Etec - 22_04
Palestra UX Etec - 22_04Palestra UX Etec - 22_04
Palestra UX Etec - 22_04
 
UX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca BrancaleoneUX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca Brancaleone
 
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
 
UX Design
UX DesignUX Design
UX Design
 
Gisele, lucas e felipe. trabalho de ihm ux
Gisele, lucas e felipe. trabalho de ihm  ux Gisele, lucas e felipe. trabalho de ihm  ux
Gisele, lucas e felipe. trabalho de ihm ux
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AI
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
 
ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte A
 
Ihc Aula4 A
Ihc Aula4 AIhc Aula4 A
Ihc Aula4 A
 
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Ux
UxUx
Ux
 
ads pra os nigers.pptx
ads pra os nigers.pptxads pra os nigers.pptx
ads pra os nigers.pptx
 
User experience
User experienceUser experience
User experience
 
Ux nas organizações
Ux nas organizaçõesUx nas organizações
Ux nas organizações
 

UX Design para Desenvolvedores

  • 2. EXPERIÊNCIA +10 de experiência Sócio fundador da Rian Design, na qual desenvolveu sites, aplicativos e projetos gráficos para clientes como Udacity Brasil, Museu Imperial de Petrópolis, Instituto Ronald McDonald, SOS Mata Atlântica, Ephere, Sergio Mallandro e Tom Cavalcante. FORMAÇÃO ‣ Mestrado em Ciência da Computação (UFJF) ‣ Pós-graduação em Gestão, Empreendedorismo e Marketing (PUCRS) ‣ Pós-graduação em Animação 3D (Instituto Infnet) ‣ Graduação em Design Gráfico (Instituto Infnet) ‣ Graduação em Análise e Desenvolvimento de Sistemas (UNESA)
  • 3. O QUE É UX DESIGN
  • 4. O QUE É UX DESIGN DESIGN DE EXPERIÊNCIA DO USUÁRIO ▸ UX ≠ UI ▸ UX diz respeito à experiência do usuário ao usar um produto/serviço, em todas as suas etapas de contato ▸ UX não necessariamente tem a ver com software ▸ Experiência do usuário com o atendimento do banco ▸ Experiência do usuário com um sachê de catchup ▸ Experiência do usuário com uma máquina de estacionamento rotativo
  • 5. O QUE É UX DESIGN UX
  • 6. 6 MAIORES ERROS DE UX DESIGN
  • 7. 6 MAIORES ERROS DE UX DESIGN ERRO 1 JOGAR DADOS NA TELA ▸ Fazer o que é fácil para nós, e não o que é melhor para o usuário ▸ Mostrar dados crus em vez de informações refinadas ▸ O usuário tem de se esforçar para interpretar os dados e transformá-los em algo prático e aplicável ▸ Às vezes, o que pode ser fácil para os desenvolvedores enxergarem, pode não ser para o usuário
  • 8. 6 MAIORES ERROS DE UX DESIGN ERRO 2 EXPOR TECNOLOGIA AO USUÁRIO ▸ Os desenvolvedores passam horas diante da tecnologia e é natural que esqueçam que o usuário não entende termos técnicos ou jargões que são naturais para os devs ▸ Mas expor o usuário a termos técnicos pode causar confusão e fricção cognitiva, enfraquecendo a UX. ▸ Deve-se utilizar linguagem mais humanizada. ▸ O usuário não se importa com a tecnologia. Ele quer apenas resolver seu problema
  • 9. 6 MAIORES ERROS DE UX DESIGN ERRO 3 USER INTERFACE (UI) BAGUNÇADA ▸ A velha desculpa de “Não sou bom em UI” e acabar deixando a UI bagunçada ▸ UI bagunçada é a forma mais rápida de fricção cognitiva que destrói a experiência do usuário ▸ Desenvolvedores não são obrigados a serem ótimos UI Designers, mas não exagere nessa desculpa ▸ No mínimo, mantenha a UI limpa e organizada
  • 10. 6 MAIORES ERROS DE UX DESIGN ERRO 4 SER INCONSISTENTE ▸ Alterar a posição de botões, menus e outros elementos ao longo da aplicação torna a interface inconsistente ▸ O botão “Salvar" deve ser sempre “Salvar” ▸ O menu lateral deve ser sempre lateral ▸ Mantenha os botões e menus nos mesmos lugares, os mesmos rótulos, os mesmos ícones, fontes e estilos
  • 11. 6 MAIORES ERROS DE UX DESIGN ERRO 5 CODIFICAR PARA O “USUÁRIO EXPERT” ▸ Evitar o trabalho pesado, de fazer algo fácil de ser usado, com a desculpa de que está codificando para “Usuário Expert” ▸ Pensar que o usuário tem conhecimentos técnicos e entende a tecnologia, é um grande erro ▸ Mesmo que o usuário tenha mais conhecimento sobre tecnologia, o trabalho do desenvolvedor é criar algo que funcione, tanto em termos técnicos quanto em relação à facilidade de uso ▸ No dia a dia, o usuário não deve perder tempo usando a aplicação. Ela deve o ajudar a resolver os problemas de forma mais rápida e fácil
  • 12. 6 MAIORES ERROS DE UX DESIGN ▸ “O usuário pode querer fazer isso ou precisar daquilo” é o mesmo que brincar de adivinha ▸ Às vezes, passam horas codificando para problemas que não existem, simplesmente porque querem ou gostam de programar algo específico. Certo, pode ser divertido :) ▸ É importante focar no problema do usuário ▸ Entender quem é o usuário e o que ele precisa pode reduzir a complexidade do código e construir a coisa certa de primeira. Caso contrário, pode ser entregue algo mais complexo do que os usuários precisam, destruindo a experiência do usuário ERRO 6 SOLUCIONAR PROBLEMAS NÃO EXISTENTES
  • 13. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOSOU, 10 HEURÍSTICAS DE NIELSEN
  • 14. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Mantenha o usuário sempre informado com o que ele está fazendo, informando o retorno de suas ações ▸ Ex: barras de progresso, remover item da interface ao exclui-lo dos registros, cor de um botão indicando que aquela ação foi executada PRÁTICA 1 MOSTRAR O QUE ESTÁ ACONTECENDO
  • 15. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN PRÁTICA 2 FALAR A LINGUAGEM DO USUÁRIO ▸ Fale a língua do usuário de forma que seja entendida e que pareça familiar. Evitar termos técnicos ▸ Metáforas com uso de ícones são excelentes para tornar a interface familiar ▸ Ex: barra de ferramentas do Photoshop faz bom uso de ícones
  • 16. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ O usuário deve conseguir controlar a navegação, poder abortar uma tarefa ou desfazer uma operação ▸ Usuários às vezes escolhem funções por engano e precisam conseguir sair facilmente, podendo desfazer ou refazer a interação ▸ Ex: seguir e deixar de seguir no Instagram, excluir postagem no Wordpress, bloquear amigos no Facebook, remover do carrinho PRÁTICA 3 CONTROLE E LIBERDADE
  • 17. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Mantenha a consistência e padrão visual (texto, cor, desenho do elemento, som etc) ▸ Ex 1: botões de fechar/max/minimizar das janelas do Windows, caixa de entrada de mensagens do Facebook, barra de pesquisa dos navegadores ▸ Ex 2: no Windows 8 foi removido o menu “Iniciar”, que existia desde o Win95. Gerou toneladas de reclamações e usuários insatisfeitos. PRÁTICA 4 CONSISTÊNCIA E PADRÕES Logo na esquerda. Busca no centro. Login na direita.
  • 18. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Crie interface que faça o usuário evitar erros ▸ Avise o usuário quando algum erro pode acontecer ▸ Ex: avise qual tipo de arquivo é permitido para upload, alerta “Tem certeza de que deseja excluir isto?”, perguntar ao usuário se deseja enviar email sem anexo (no Gmail) PRÁTICA 5 PREVENÇÃO DE ERROS Para o usuário que não faz compras há muito tempo na Americanas, o site pergunta se o endereço ainda é aquele cadastrado.
  • 19. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra chegar até a página ▸ Eles devem realizar tarefas já executadas antes, sem dificuldade ▸ Ex: breadcrumb em sites, fontes usadas recentemente no Word são mostradas no topo da lista, últimos efeitos usados no Photoshop, também. Últimas pesquisas feitas no Facebook PRÁTICA 6 MINIMIZAR A SOBRECARGA DE MEMÓRIA
  • 20. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Deve ser fácil para inexperientes, mas também deve permitir os experientes personalizar ações conforme de costume, facilitando sua usabilidade ▸ Deve se adaptar às necessidades do usuário ▸ Ex: atalhos no Photoshop (ou outros programas), busca rápida no Mac PRÁTICA 7 FLEXIBILIDADE E EFICIÊNCIA DE USO
  • 21. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Apresente a informação que o usuário precisa no momento, nada mais! ▸ Simples e direto ao ponto PRÁTICA 8 DIÁLOGO SIMPLES
  • 22. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Devem ajudar o usuário a entender o que houve ▸ Linguagem objetiva e sem códigos/termos técnicos ▸ Ex: Firefox avisa que houver algum problema ao acessar o site, por falta de internet ou site fora do ar ▸ Ex (ruim): telas azuis do Windows. Motivos pode ser: placa-mãe, memória, vídeo, temperatura, software e mil outros PRÁTICA 9 MENSAGENS DE ERRO CLARAS
  • 23. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ O ideal é que seja tão fácil que não precise de documentação ▸ A ajuda deve ser acessível ▸ Ex: centrais de ajuda de sites, documentação do Word e Excel PRÁTICA 10 AJUDA E DOCUMENTAÇÃO