Design e UX: Princípios e Heurísticas

DESIGN INTERAÇÃO, USABILIDADE, USER EXPERIENCE, INTEFACES, ...

quinta-feira, 17 de novembro de 2011

DESIGN WTF ?


DESIGN É U M A C A I X A P R E TA .


DESIGN
C O N H E C E M O S S O M E N T E O R E S U LTA D O D O
DESIGN

EU QUERO UMA DESSA.


DESIGN O QUE NÃO É!


DESIGN DE QUE? ABRINDO A CAIXA.


DESIGN ESTUDA O QUE?


pesquisa

metodologia

analíticas (compreender)
fotografia

O que o design estuda? perceptivas (observar) arte

filosofia
associativas (relacionar)

projetar
livremente

DESIGN ESTUDA O QUE?


DESIGN

MOST PEOPLE THINK IT`S HOW THEY LOOK,
BUT IT`S NOT REALLY HOW THEY LOOK, ITS HOW THEY WORK.

DESIGN FILOSOFIA DAS COISAS


DESIGN FILOSOFIA DAS COISAS


DESIGN HOW IT WORKS?


INOVADOR ÚTIL ESTÉTICO INTELIGÍVEL INOBSTRUSIVO

HONESTO DURÁVEL PRECISO ECO-FRIENDLY LESS BUT BETTER

DESIGN QUANDO É BOM? ( DIETER RAMS - TEN PRINCIPAL OF GOOD DESIGN )


1960

DIETER RAMS

2005

JONATHAN IVE

DESIGN WHO THE FUK IS? ( DIETER RAMS - TEN PRINCIPAL OF GOOD DESIGN )


PESSOAS DE TODOS OS TIPOS

DESIGN PARA QUEM?


O DESIGNER NÃO É O USUÁRIO

DESIGN USER CENTERED DESIGN


O SEU CHEFE NÃO É O USUÁRIO



O CLIENTE NÃO É O USUÁRIO



O DESENVOLVEDOR NÃO É O USUÁRIO



ENVOLVIMENTO DO USUÁRIO NO PROCESSO DE DESIGN
INFORMATIVO
CONSULTIVO
PARTICIPATIVO

DESCUBRA QUEM SÃO SEUS USUÁRIOS



USABILIDADE

EFICÁCIA, EFICIÊNCIA E SATISFAÇÃO

COMPLETAR A TAREFA, COM O MENOR ESFORÇO POSSÍVEL, NO MENOR TEMPO E COM A MAIOR SATISFAÇÃO

DESIGN USABILIDADE


EFICÁCIA E EFICIÊNCIA

DESIGN USABILIDADE SE CONQUISTA, NÃO SE FAZ.


HEURÍSTICAS

Explicitar visualmente a estrutura do sistema

Criar pontos de referências na interface

Mostre somente o necessário naquele momento

Conduzir o caminho mínimo

Respeitar a curva de aprendizagem

Feedback contínuo

Possibilite caminhos alternativos

Se necessário seja redundante

Reduza as interrupções (use ajax)

DESIGN NAVEGAÇÃO
CHECKLIST


HEURÍSTICAS

Use interações lógicas, metáfora do real

Ofereça atalhos para usuários experiêntes

Ofereça instruções para usuários iniciantes

Proponha interações além da simulação

O usuário controla o sistema

Falar a linguagem do usuário

Optar pela adaptabilidade e customização

Possibilite a colaboração do usuário

DESIGN INTERAÇÃO
CHECKLIST


HEURÍSTICAS

Errar antes é errar melhor

Error prooﬁng

Leve em consideração a plataforma do usuário

Emita bons erros

Sempre possibilitar voltar

Faça o mínimo bem feito

Beleza aumenta a tolerância a erros

DESIGN ERROS
CHECKLIST


HEURÍSTICAS

Mantenha a consistência

Reconhecer em vez de relembrar

Menos é mais (sintetisar)

Utilize a cor como sinalização

Scanning em cabeçalhos (letras grandes)

Leitura em parágrafos (letras pequenas)

Ações em botões

Navegação em links

Valorize o contraste para melhorar a legibilidade

Distinguir os diferentes e agrupar os semelhantes

DESIGN VISUAL
CHECKLIST


PONTOS DE REFERÊNCIA
COMPLETAM A COGNIÇÃO
SENSAÇÃO DE NAVEGAR
COMPREENDER A ESTRUTURA DO SISTEMA
SEGURANÇA NAS AÇÕES (FEEDBACK)
FUNDAMENTAL PARA A TOMADA DE DECISÃO

DESIGN CAMINHAR E NAVEGAR


DURANTE
NO PERCURSO
MAPA COGNITIVO

RECURSOS INTERNOS
MEMÓRIA
ATENÇÃO
PERCEPÇÃO
MODELO MENTAL
VIGILÂNCIA (FILTRAR)
EMOÇÕES

ESTÍMULOS EXTERNOS
COGNIÇÃO DISTRIBUÍDA

DESIGN COGNIÇÃO
A INTERFACE É UMA EXTENSÃO DO CÉREBRO


WTF?

E AGORA? COMO FAÇO?
POR QUE ESSA #%$#@ NÃO FUNCIONA!?

DESIGN PROBLEMAS DE USABILIDADE


Irritação, stresse

Fadiga mental, fadiga motora

Baixa produtividade

Decepções, desistência

Subutilização da ferramenta

Reduz o ROI
WTF?

E AGORA? COMO FAÇO?
POR QUE ESSA #%$#@ NÃO FUNCIONA!?

DESIGN PROBLEMAS DE USABILIDADE


MÉTODOS CONCEPTIVOS
THE BRIDGE
ENTREVISTA STORYBOARD

CENÁRIOS PAPER PROTOTYPE PERSONAS
PESQUISA ETNOGRÁFICA
TAG ART (TAGS E SORTEIO)

PS3 (PROBLEMA / SOLUÇÃO)

ANÁLISE DA TAREFA
WIREFRAME

BENCHMARK TAXONOMIA (BRAINSTORM, TAGS E HIERARQUIA)

DESIGN MÉTODOS


MÉTODOS FORMATIVOS
Mouse tracking Wireﬂow
Observação de campo
Card Sorting
Moodboard

Avaliação heurística

Premo
Paper Prototype Eye Tracking

Taxonomia
Icon Sorting
Feature Checklist
Wireframe
Análise da tarefa

PS3 (problema / solução)

DESIGN MÉTODOS


MÉTODOS AVALIATIVOS

MODELAGEM DE EMOÇÕES
MOUSE
EYE TRACKING TRACKING CO-DISCOVERY

DIÁRIO DE USO

AVALIAÇÃO HEURÍSTICA
OBSERVAÇÃO DE CAMPO
QUESTIONÁRIOS

ANÁLISE ESTATÍSTICAS DE USO
TAXONOMIA

CARD SORTING
TESTE DE USABILIDADE

ICON SORTING INVENTÁRIO DE CONTEÚDOS

DESIGN MÉTODOS


DESIGN MÉTODOS


DESIGN USER EXPERIENCE


DESIGN USER EXPERIENCE FAIL


DESEJO DO USUÁRIO PRODUTO VENDIDO AO USUÁRIO

DESIGN USER EXPERIENCE FAIL


DESIGN PARA QUEM?


ANALISTA DE USABILIDADE VERIFICAR PADRÕES DE USO (HEURÍSTICAS)

DESIGNER DE INTERFACES PROJETAR <INTERFACES>

DESIGNER DE INTERAÇÃO CRIAR NOVAS FORMAS DE <INTERAÇÃO>

UX DESIGNER CRIAR EXPERIÊNCIAS EMOCIONAIS

DESIGN ERS


DESIGN PROCESSO ITERATIVO - CONSTANTE DE REFLEXÃO SOBRE O OBJETO.


AUMENTA A CONVERSÃO AGREGA USUÁRIOS E ROI

FACILITA O USO VALORIZA A FERRAMENTA

REDUZ O TEMPO DE DESENV DIMINUI A REFAÇÃO (ERRAR ANTES)

REDUZ CUSTOS DE PUBLICIDADE O PRODUTO BOM SE VENDE

PRODUTO POLÍDO APRIMORAMENTO CONTÍNUO

BASE FORTE CONCEITOS CONSISTENTES

DESIGN POR QUE?


ANDERSON.GOMES@INFORMANT.COM.BR

DESIGN FINALMENTE.


Design e UX: Princípios e Heurísticas

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Mais de InformantTalks

Mais de InformantTalks (6)

Design e UX: Princípios e Heurísticas