Apresentação do conceito User Experience e de técnicas para o bom desenvolvimento de interfaces.

2.  Victor Adriel de 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 presentes ao nosso redor

13.  Multidisciplinar

14.  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

15. Contexto
UsuáriosConteúdo

16.  Lisa quer entrar em contato com seu marido
através de seu celular...

17. ... isso em um ônibus lotado.

18.  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

22.  Projetando equipamentos
 Projetando tarefas
 Projetando com foco no ambiente
 Treinamento
 Características individuais

23.  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?

26. Contexto
UsuáriosConteúdo

27.  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

28.  Você tem menos de 2min para se comunicar
na primeira vez em que um potencial cliente
visita seu Website.
Jakob Nielsen

30.  Facilidade de uso
◦ Velocidade de aprendizado
◦ Eficiência na utilização
◦ Grau de propensão a erros

32.  Permitir o acesso à informação independente
de características físicas, motoras, cognitivas
e etáticas.

33.  Jessica Cox

34.  Victor Adriel
Sem botões + Sem javascript = Sem comentários

39.  Eliminar verbosidade desnecessária
 Linguagem simples e objetiva
 Aumentar legibilidade

40.  Hierarquia

41.  Estrutura hierárquica

42.  Estrutura hierárquica (Grids)

43.  Estrutura hierárquica (Grids)

44.  Estrutura hierárquica (Grids)

45.  Estrutura hierárquica (Cor)

46.  Estrutura hierárquica (Cor)

47.  Qualidade daquilo que é apetecível

48.  Cores

49.  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.

53.  Escrevendo sobre pessoas

57.  Wireframes

58.  Storyboards

59. @interprete12
blogvictoradriel.blogspot.com