 Victor Adriel de Jesus Oliveira
◦ Universidade Estadual de Santa Cruz
◦ TecnoJr
◦ Design de Interfaces acessíveis
◦ Programação Web
◦ @interprete12
◦ blogvictoradriel.blogspot.com
 User what?
◦ Explicando o conceito de UX
 Motivação para a UX
◦ Porque daria atenção a esse tema?
 Características
◦ Alguns elementos da UX
 Métodos
◦ Técnicas e ferramentas
 Bem presentes ao nosso redor
 Multidisciplinar
 aka Experiência do Usuário
 Respostas e percepções do usuário
relacionadas a um produto, sistema ou
serviço antes, durante e depois de utilizá-lo.
ISO 9241-210
Contexto
UsuáriosConteúdo
 Lisa quer entrar em contato com seu marido
através de seu celular...
... isso em um ônibus lotado.
 O contexto envolve a situação atual:
◦ Física
 Condições do ambiente de acordo seus sentidos
◦ Social
 Como outras pessoas afetam sua experiência
◦ Temporal
 Variáveis de tempo
◦ Infra-estrutural
 Disponibilidade da rede, custo da ligação.
◦ Tarefas
 Possibilidades
 Projetando equipamentos
 Projetando tarefas
 Projetando com foco no ambiente
 Treinamento
 Características individuais
 Quem são os usuários desse projeto?
 Quais são suas tarefas e objetivos?
 Quais seus níveis de experiência com esse
projeto e projetos como esse?
 Quais funcionalidades os usuários precisam?
 Que informações os usuários precisam e de
que forma elas devem ser transmitidas?
 Como os usuários acham que o sistema
deveria funcionar?
Contexto
UsuáriosConteúdo
 Evita a criação de funcionalidades
desnecessárias;
 Simplifica o design do projeto;
 Melhora a usabilidade e a ergonomia do
projeto;
 Acelera o design e desenvolvimento por meio
de guidelines;
 Foca os negócios e o marketing de acordo as
características dos usuários
 Você tem menos de 2min para se comunicar
na primeira vez em que um potencial cliente
visita seu Website.
Jakob Nielsen
 Facilidade de uso
◦ Velocidade de aprendizado
◦ Eficiência na utilização
◦ Grau de propensão a erros
 Permitir o acesso à informação independente
de características físicas, motoras, cognitivas
e etáticas.
 Jessica Cox
 Victor Adriel
Sem botões + Sem javascript = Sem comentários
 Eliminar verbosidade desnecessária
 Linguagem simples e objetiva
 Aumentar legibilidade
 Hierarquia
 Estrutura hierárquica
 Estrutura hierárquica (Grids)
 Estrutura hierárquica (Grids)
 Estrutura hierárquica (Grids)
 Estrutura hierárquica (Cor)
 Estrutura hierárquica (Cor)
 Qualidade daquilo que é apetecível
 Cores
 Significado das cores
◦ Branco
 Sugere pureza. Cria uma impressão de vazio e de infinito. Evoca frescor e limpeza,
principalmente quando combinado com o azul. Ex: Simplicidade, luz, paz, higiene,
casamento, hospital, harmonia.
◦ Preto
 Silêncio. Morte. Quando brilhante, confere nobreza, distinção e elegância. Cor
preponderantemente masculina. Ex: Noite, nobreza, pessimismo, tristeza, dor.
◦ Cinza
 É a expressão de um estado de alma duvidosa e neutra. Símbolo da indecisão e da
ausência de energia. Quanto mais sombrio, mais conota desânimo, monotonia. Ex:
Chuva, máquinas, seriedade.
◦ Azul
 Cor profunda, calma. Preferida por adultos, marca uma certa maturidade. Quando
sombrio, o azul chama ao infinito. Ex: Frio, céu, mar, tranqüilidade, paz, infinito,
meditação, credibilidade.
 Escrevendo sobre pessoas
 Wireframes
 Storyboards
@interprete12
blogvictoradriel.blogspot.com

User Experience

  • 2.
     Victor Adrielde Jesus Oliveira ◦ Universidade Estadual de Santa Cruz ◦ TecnoJr ◦ Design de Interfaces acessíveis ◦ Programação Web ◦ @interprete12 ◦ blogvictoradriel.blogspot.com
  • 3.
     User what? ◦Explicando o conceito de UX  Motivação para a UX ◦ Porque daria atenção a esse tema?  Características ◦ Alguns elementos da UX  Métodos ◦ Técnicas e ferramentas
  • 5.
     Bem presentesao nosso redor
  • 13.
  • 14.
     aka Experiênciado Usuário  Respostas e percepções do usuário relacionadas a um produto, sistema ou serviço antes, durante e depois de utilizá-lo. ISO 9241-210
  • 15.
  • 16.
     Lisa querentrar em contato com seu marido através de seu celular...
  • 17.
    ... isso emum ônibus lotado.
  • 18.
     O contextoenvolve a situação atual: ◦ Física  Condições do ambiente de acordo seus sentidos ◦ Social  Como outras pessoas afetam sua experiência ◦ Temporal  Variáveis de tempo ◦ Infra-estrutural  Disponibilidade da rede, custo da ligação. ◦ Tarefas  Possibilidades
  • 22.
     Projetando equipamentos Projetando tarefas  Projetando com foco no ambiente  Treinamento  Características individuais
  • 23.
     Quem sãoos usuários desse projeto?  Quais são suas tarefas e objetivos?  Quais seus níveis de experiência com esse projeto e projetos como esse?  Quais funcionalidades os usuários precisam?  Que informações os usuários precisam e de que forma elas devem ser transmitidas?  Como os usuários acham que o sistema deveria funcionar?
  • 26.
  • 27.
     Evita acriação de funcionalidades desnecessárias;  Simplifica o design do projeto;  Melhora a usabilidade e a ergonomia do projeto;  Acelera o design e desenvolvimento por meio de guidelines;  Foca os negócios e o marketing de acordo as características dos usuários
  • 28.
     Você temmenos de 2min para se comunicar na primeira vez em que um potencial cliente visita seu Website. Jakob Nielsen
  • 30.
     Facilidade deuso ◦ Velocidade de aprendizado ◦ Eficiência na utilização ◦ Grau de propensão a erros
  • 32.
     Permitir oacesso à informação independente de características físicas, motoras, cognitivas e etáticas.
  • 33.
  • 34.
     Victor Adriel Sembotões + Sem javascript = Sem comentários
  • 39.
     Eliminar verbosidadedesnecessária  Linguagem simples e objetiva  Aumentar legibilidade
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
     Qualidade daquiloque é apetecível
  • 48.
  • 49.
     Significado dascores ◦ Branco  Sugere pureza. Cria uma impressão de vazio e de infinito. Evoca frescor e limpeza, principalmente quando combinado com o azul. Ex: Simplicidade, luz, paz, higiene, casamento, hospital, harmonia. ◦ Preto  Silêncio. Morte. Quando brilhante, confere nobreza, distinção e elegância. Cor preponderantemente masculina. Ex: Noite, nobreza, pessimismo, tristeza, dor. ◦ Cinza  É a expressão de um estado de alma duvidosa e neutra. Símbolo da indecisão e da ausência de energia. Quanto mais sombrio, mais conota desânimo, monotonia. Ex: Chuva, máquinas, seriedade. ◦ Azul  Cor profunda, calma. Preferida por adultos, marca uma certa maturidade. Quando sombrio, o azul chama ao infinito. Ex: Frio, céu, mar, tranqüilidade, paz, infinito, meditação, credibilidade.
  • 53.
  • 57.
  • 58.
  • 59.