Introdução aexperiência do usuário. O que é? O que se faz? Como se faz? User Experience é focar o projeto no usuário, entender necessidades e saber conciliar sua satisfação com os objetivos do produto. Video fashionista: http://www.youtube.com/watch?v=E1T0egGgc5E Referências tiradas de: http://catarinasdesign.com.br http://www.slideshare.net/guimenga/interface-interao-e-usabilidade http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe http://www.fatdux.com/pt/What/What-is-UX http://books.google.com.br/books?id=bl0H1cYIzAwC&printsec=frontcover&hl=pt-BR&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false

1. INTRODUÇÃO A
EXPERIÊNCIA DO
USUÁRIO
O QUE É?
O QUE SE FAZ?
COMO SE FAZ?

2. O QUE É UX?
O design faz a UX ou a UX faz o Design?

3. UX = USER EXPERIENCE
EXPERIÊNCIA DO USUÁRIO
User Experience é focar o projeto no
usuário, entender necessidades e saber conciliar
sua satisfação com os objetivos do produto.

4. QUEM NUNCA OUVIU?
• Quando você consegue entregar as telas?
• Mesmo com argumentos sobre o processo e entregáveis vinha o contra-
argumento...
• Mas é só a home e uma interna. Só a “cara” do sistema
pra termos uma base.

5. COMO CHEGAMOS NAS TELAS (DESIGN)?
• Conteúdo
• Funcionalidades
• Design
• Páginas
• Usuários
• Interação
• Como usam?
• Qual a UX?

6. ENTREGÁVEIS DE UX

7. O QUE TEMOS EM UX?
MUITAS SIGLAS
UX
UI
IA
UCD
IxD
GUI
UT
WAI
WWSG

8. O QUE TEMOS EM UX?
MUITAS SIGLAS
UX
UI
IA
Vamos analisar os mais
conhecidos.
UX - User Experience
UI - User Interface
AI - Information Architecture

9. DIVISOR DE ÁGUAS
UX E UI
DESIGNER
QUAL A DIFERENÇA?

10. UX / UI DESIGNER
User Experience User Interface
Trabalha a Desenvolve a
experiência na interface a ser
utilização utilizada

11. O QUE FAZ O UX DESIGNER?
ELE NÃO É ... ELE FAZ...
• O cara que faz botões • Direção de arte
• O cara que dá um tapa no • Identidade visual
layout • Layouts com, padrões
• Dá um jeito na apresentação visuais, tipografia e estética
• Recorta foto • Pensa em como deixar as
coisas melhores
• Arrumador de foto do
sobrinho • Cria experiências e interações

12. IA – INFORMATION ARCHITECTURE
O QUE É?
Arquitetura de Informação é
tornar o complexo claro.
WURMAN (1997)

13. IA – INFORMATION ARCHITECTURE
Em qual categoria ficariam os itens
abaixo?

14. O QUE TEMOS?
Arquitetura da Informação - O que temos para desenvolver o produto /sistema?

15. O QUE VAMOS FAZER?
UX experiência do usuário – quem pensa na utilização

16. COMO VAMOS UTILIZAR?
UI User Interface Design – quem desenvolve o layout

19. ENTÃO...O QUE É UX?
Experiência de Usuário (UX) é um termo para o nível de satisfação geral dos
usuários enquanto usam o seu produto ou sistema.
UX = soma de uma série de interações
Experiência de Usuário (UX) representa
a percepção deixada na mente das
pessoas depois de uma série de
interações entre as pessoas, objetos e
eventos – ou uma combinação entre
eles.

20. PILARES DA UX
UX design = combina três tipos de atividades
Interação Interface Usabilidade

21. ENTREGÁVEIS DE UX

22. LEMBRA DA PERGUNTA?
• Quando você consegue entregar os wireframes?
• Mas é só a home e uma interna. Só a “cara” do
sistema pra termos uma base.
• Pra lembrar

23. MAS EU PRECISO UTILIZAR TUDO ISSO?
NÃO!

24. ENTÃO POR ONDE COMEÇAR?
É necessário coletar informações antes de iniciar interação.
Pesquisar Descobrir Analisar o que
• Requisitos • o problema
pode ser feito
para melhorar o
• Referências • perfil do seu usuário cenário atual
• Usuários • o que pensam
• Objetivos • como agem

25. FOCO NA INFORMAÇÃO ÚTIL
Para ter sucesso precisamos isolar a informação específica de que
precisamos e levá-las às pessoas que realmente irão usá-las.
Site para crianças tem foco em E para a terceira idade? Como
interação visual identificar a interação?
Pesquisem antes de fazer...

26. PRECISAMOS MUDAR O
PANORAMA DA INFORMAÇÃO
A boa notícia é que hoje existem muita informação nas nuvens.
A notícia ruim é que a maioria delas não são importantes ou não
são compreensíveis ao usuário.
O volume enorme de informação disponível e a maneira como é
apresentada faz com que boa parte dela seja inútil, perde-se o
foco do real motivo que entramos naquela página ou site.

27. É NECESSÁRIO OBSERVAR

28. É NECESSÁRIO OUVIR

29. É NECESSÁRIO ANALISAR

30. É NECESSÁRIO SUGERIR

31. COM ISSO NASCEM OS WIREFRAMES

32. WIREFRAMES MOBILE

33. WIREFRAMES INSTITUCIONAIS

34. E DESENVOLVEM-SE LAYOUTS (DESIGN)

35. O USUÁRIO ESPERA ENCONTRAR UM PRODUTO
QUE ATENDA AS SUAS NECESSIDADES.

36. MAS ELE SÓ ELOGIA E DIVULGA UM PRODUTO
QUE SUPERE SUAS EXPECTATIVAS.

37. INTERAÇÃO ALÉM DAS EXPECTATIVAS
Ecommerce com realidade aumentada
https://www.youtube.com/watch?v=ZnBcqV9POkY

38. E QUAIS SÃO OS BENEFÍCIOS?
• Antecipar erro de interação
• Obter informações reais de utilização antes do desenvolvimento
• Proximidade entre cliente, desenvolvimento e usuários finais.
• Redução de horas de desenvolvimento
• Desenvolvimento ágil com componentes e padrões web
• Ao fim se economiza tempo e dinheiro no projeto.

39. PADRÕES WEB + COMPONENTES
É possível desenvolver componentes baseados em padrões
internacionais de Código W3C e Web Standards, permitindo a
visualização em todos browsers garantindo assim a utilização em
futuras atualizações dos Browsers.
+ =
Sistema com Validação Cross-Browser
padrões visuais

42. ANÁLISE DE ESTATÍSTICAS
Tipos de Browser

43. É UX É UMA ETAPA QUE...
...entrega o bastão para que a próxima equipe continue a corrida.
Se não estiverem em sincronia, a corrida não termina.

44. É UX É UMA ETAPA QUE...
Agora se ao fim se a sincronia
for perfeita, todos sobem ao
lugar mais alto.
A união faz a melhor equipe

45. USER EXPERIENCE É FOCAR O PROJETO NO
USUÁRIO, ENTENDER NECESSIDADES E SABER CONCILIAR
SUA SATISFAÇÃO COM OS OBJETIVOS DO PRODUTO.

46. UX é o centro e não
o topo da pirâmide
Bruno Biagioni Neto - AI, UX & UI Designer - bruno@biagioni.com.br - www.biagioni.com.br