User Experience

Preview:

DESCRIPTION

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

Citation preview

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

Recommended