Palestra escolhida para ser realizada no palco de Design da 7ª edição do Campus Party Brasil (2014). A apresentação foi adaptada para ser apresentada como oficina na UPF - Universidade de Passo Fundo.

1. Sistemas exploráveis
Imagem: http://www.flickr.com/photos/emmealcubo/5371776333/sizes/o/in/photostream/
Arquitetura de Informação e User Experience

2. Bianca
Brancaleone

3. Design de Multimídia
Aquitetura da Informação
Graduação
Pós-graduação
Imagem: http://designshack.net/articles/inspiration/close-photoshop-and-grab-a-pencil-the-lost-art-of-thumbnail-sketches/

4. Atrativa Games, Virgula, MMCafé, iG, iThink,
Webgoal

6. Freelancer de AI - UX

11. Parece agradável?

14. Vai
desenvolver
um sistema?
Web
Mobile
Software
Aplicativo
Site
...
Imagem: Sublime do @gserrano

15. Correlação das áreas que criam o design
da interface do usuário e, por sua vez,
sua experiência
● Arquitetura da Informação
● Interação Humano Computador
● Design de Interação
● Usabilidade
http://www.montparnas.com/articles/what-is-user-experience-design/

16. Os três círculos da Arquitetura de Informação
● Conteúdo (o que vai usado?)
● Contexto (como vai ser usado?)
● Usuário (por quem vai ser usado?)
http://semanticstudios.com/publications/semantics/000029.php

17. The User Experience Honeycomb
● Útil
● Desejável
● Acessível
● Confiável
● Encontrável
● Utilizável
● Valioso
http://semanticstudios.com/publications/semantics/000029.php

18. Diagrama da Experiência do usuário
- Do mais ao menos consciente
● Linguagem escrita
● Design gráfico
● Som
● Movimento
● Design da Informação
● Design da Interface
● Design de Interação
● Programação

19. Donald Norman
“Um método importante de tornar os
sistemas mais fáceis de aprender e usar é
torná-los exploráveis, encorajar o usuário a
fazer experiências e aprender as
possibilidades através de exploração ativa.
É assim que muitas pessoas aprendem a
usar utensílios domésticos ou um novo
sistema de som, aparelho de televisão ou
videogame: apertando os botões
enquanto escutam e observam, para ver
o que acontece.”

20. 10 Heurítiscas de Nielsen
10 Usability Heuristics for User Interface Design
by JAKOB NIELSEN on January 1, 1995
http://www.nngroup.com/articles/ten-usability-heuristics

21. 1 - Visibilidade do status do sistema
O sistema deve sempre manter os usuários informados sobre o que está
acontecendo, através de feedback apropriado e dentro de um tempo
razoável.
Feedback

22. 2 - Combinação entre o sistema e o mundo real
O sistema deve falar a linguagem do usuário, com palavras, frases e conceitos familiares ao
usuário no lugar de termos orientados ao sistema. Siga convenções do mundo real, fazendo as
informações aparecerem em uma ordem natural e lógica.
Linguagem
adequada

23. 3 - Controle do usuário e liberdade
Usuários sempre escolhem funções erradas e vão precisar de uma “saída de emergência”
claramente marcada para sair do estado indesejado sem maiores problemas. Permita desfazer
e refazer.

24. 4 - Consistência
e padrões
Usuários não devem ter
que se preocupar se
palavras diferentes,
situações ou ações
significam a mesma
coisa. Siga as
convenções.

25. 5 - Prevenção de erro
Melhor que ter boas mensagens de erro é ter um design
cuidadoso que previne um problema antes de acontecer.
Elimine condições de erro ou os conheça e apresente aos
usuários uma opção de confirmação antes dele prosseguir
com a ação.

26. 6 - Reconhecimento é melhor que lembrança
Reduza a carga de memória
do seu usuário fazendo
objetos, ações e opções
visíveis. O usuário não deve
ter que lembrar informação
de uma parte do diálogo em
outra parte.
Instruções para o uso do
sistema devem estar visíveis
ou facilmente recuperáveis
sempre que necessário.

27. 7 - Flexibilidade e eficiência no uso
Atalhos - que não são vistos
pelos usuários leigos - podem
aumentar a velocidade na
interação para usuários
experientes. Assim, o sistema
pode atender tantos os usuários
inexperientes como os
experientes.
Permita que os usuários
configurem ações frequentes.

28. Diálogos não
devem ter
informações
irrelevantes ou
raramente usados.
Cada unidade de
informação extra
em um diálogo
compete com
unidades
relevantes de
informação e
diminui a sua
visibilidade.
8 - Estética e design minimalista

29. 9 - Ajude o usuário a reconhecer, diagnosticar
e recuperar erros
Mensagens de erro devem ser
expressadas em linguagem
(sem código) indicando
precisamente o problema, e
sugerir uma solução
construtiva.

30. 10 - Ajuda e documentação
É melhor que o sistema possa
ser usado sem documentação,
mas pode ser necessário ter
um para oferecer ajuda.
Qualquer informação deve ser
fácil de procurar, focando na
tarefa do usuário, listando
passos concretos e sem ser
muito extenso.

31. Convidando a experimentação
“We were shocked at the
number of people who had
spent hundreds of pounds on
a smartphone but didn't
know what they could do
with it - they were too
frightened to explore.”
NFC Cards - http://vitaminsdesign.com/projects/nfc-cards-for-
samsung

32. Out of the box from Vitamins

33. Resumindo em um slide...
1 - Dar sempre feedback pro usuário do que está
acontecendo no sistema
2 - Usar sempre linguagem apropriada pro seu
público
3 - Liberdade e controle do usuário para ir onde
quiser e precisar no sistema
4 - Sistema precisa ter consistência e seguir padrões
é sempre recomendado
5 - Previna os erros de acontecerem - veja pontos
críticos e trabalhe neles
6 - Reduza a carga de memória do usuário, não
crie menus com vários níveis nem esconda
funcionalidades
7 - Flexibilidade e eficiência, atalhos (botões
configuráveis, atalhos no teclado são ótimos)
8 - Mostrar o que precisa ser mostrado na hora
que precisa ser mostrado
9 - Ajude o usuário a resolver caso haja problemas
10 - Crie um sistema tão bom que não precise de
documentação (mas como sempre tem que ter,
que seja fácil de encontrar o que precisa e que
mostre de maneira fácil o que se quer).

34. Ferramentas*
Fluxos e mapas
- Excel (Google Drive)
- Visio (Windows)
Omnigraffle (Mac)
Wireframe e prototipagem
- Axure
Photoshop
Powerpoint
* 1ª ferramenta: papel e

35. Documentos que podem ajudar
Benchmark, Mapa / Fluxo do Sistema,
Wireframe (papel!)
Pesquisa com usuário, Análise de comportamento de usuário, prototipagem de papel
Métodos para ter materiais de apoio

36. Obrigada!
contato.bianca@gmail.com
fb.com/bianca.brancaleone
slideshare.com/bibia1010

37. Referências
Livros e apresentações
Apresentação: Quanto custa
arquitetura da informação?
http://www.slideshare.net/bibia1010/quanto-custa-a-arquitetura-da-
informao
Livro: The design of everyday
things
http://www.amazon.com/Design-Everyday-Things-Donald-
Norman/dp/0465067107
Livro: Information Architecture
for the World Wide Web
http://shop.oreilly.com/product/9781565922822.do

38. Referências
Sites
Propiciação e clicabilidade
http://www.usabilidoido.com.br/propiciacao_e_clicabilidade.html
Corais
http://corais.org/knowledge
Affordances: Clarifying and
Evolving a Concept
http://www.cs.ubc.ca/~joanna/papers/GI2000_McGrenere_Affordances.pdf
Service Design Tools
http://www.servicedesigntools.org/
Affordances and Design
http://www.interaction-design.org/encyclopedia/affordances_and_design.html
Design como linguagem: não basta projetar, tem que parecer
projetado?
http://www.gonzatto.com/linguagem-design-projetado/