59

User Experience

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: User Experience
Page 2: User Experience

Victor Adriel de Jesus Oliveira◦ Universidade Estadual de Santa Cruz

◦ TecnoJr

◦ Design de Interfaces acessíveis

◦ Programação Web

◦ @interprete12

◦ blogvictoradriel.blogspot.com

Page 3: User Experience

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

Page 4: User Experience
Page 5: User Experience

Bem presentes ao nosso redor

Page 6: User Experience
Page 7: User Experience
Page 8: User Experience
Page 9: User Experience
Page 10: User Experience
Page 11: User Experience
Page 12: User Experience
Page 13: User Experience

Multidisciplinar

Page 14: User Experience

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

Page 15: User Experience

Contexto

UsuáriosConteúdo

Page 16: User Experience

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

Page 17: User Experience

... isso em um ônibus lotado.

Page 18: User Experience

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

Page 19: User Experience
Page 20: User Experience
Page 21: User Experience
Page 22: User Experience

Projetando equipamentos

Projetando tarefas

Projetando com foco no ambiente

Treinamento

Características individuais

Page 23: User Experience

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?

Page 24: User Experience
Page 25: User Experience
Page 26: User Experience

Contexto

UsuáriosConteúdo

Page 27: User Experience

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

Page 28: User Experience

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

Jakob Nielsen

Page 29: User Experience
Page 30: User Experience

Facilidade de uso◦ Velocidade de aprendizado

◦ Eficiência na utilização

◦ Grau de propensão a erros

Page 31: User Experience
Page 32: User Experience

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

Page 33: User Experience

Jessica Cox

Page 34: User Experience

Victor Adriel

Sem botões + Sem javascript = Sem comentários

Page 35: User Experience
Page 36: User Experience
Page 37: User Experience
Page 38: User Experience
Page 39: User Experience

Eliminar verbosidade desnecessária

Linguagem simples e objetiva

Aumentar legibilidade

Page 40: User Experience

Hierarquia

Page 41: User Experience

Estrutura hierárquica

Page 42: User Experience

Estrutura hierárquica (Grids)

Page 43: User Experience

Estrutura hierárquica (Grids)

Page 44: User Experience

Estrutura hierárquica (Grids)

Page 45: User Experience

Estrutura hierárquica (Cor)

Page 46: User Experience

Estrutura hierárquica (Cor)

Page 47: User Experience

Qualidade daquilo que é apetecível

Page 48: User Experience

Cores

Page 49: User Experience

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.

Page 50: User Experience
Page 51: User Experience
Page 52: User Experience
Page 53: User Experience

Escrevendo sobre pessoas

Page 54: User Experience
Page 55: User Experience
Page 56: User Experience
Page 57: User Experience

Wireframes

Page 58: User Experience

Storyboards

Page 59: User Experience

@interprete12

blogvictoradriel.blogspot.com