Sistemas exploráveis
Imagem: http://www.flickr.com/photos/emmealcubo/5371776333/sizes/o/in/photostream/
Arquitetura de Informação e User Experience
BiancaBrancaleone
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/
Atrativa Games, Virgula, MMCafé, iG, iThink, Webgoal
Freelancer de AI - UX
Parece agradável?
Vai desenvolver um sistema?
WebMobile
SoftwareAplicativo
Site...
Imagem: Sublime do @gserrano
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/
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
The User Experience Honeycomb
● Útil● Desejável● Acessível● Confiável● Encontrável● Utilizável● Valioso
http://semanticstudios.com/publications/semantics/000029.php
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
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.”
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
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
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
3 - Controle do usuário e liberdadeUsuá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.
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.
5 - Prevenção de erroMelhor 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.
6 - Reconhecimento é melhor que lembrançaReduza 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.
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.
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
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.
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.
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
Resumindo em um slide...
1 - Dar sempre feedback pro usuário do que está acontecendo no sistema2 - Usar sempre linguagem apropriada pro seu público3 - Liberdade e controle do usuário para ir onde quiser e precisar no sistema4 - Sistema precisa ter consistência e seguir padrões é sempre recomendado5 - 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).
Ferramentas*Fluxos e mapas
- Excel (Google Drive)- Visio (Windows)
Omnigraffle (Mac)
Wireframe e prototipagem
- Axure
Photoshop
Powerpoint
* 1ª ferramenta: papel e
caneta!
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
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
thingshttp://www.amazon.com/Design-Everyday-Things-Donald-
Norman/dp/0465067107
Livro: Information Architecture
for the World Wide Webhttp://shop.oreilly.com/product/9781565922822.do
Referências
Sites
Propiciação e clicabilidadehttp://www.usabilidoido.com.br/propiciacao_e_clicabilidade.html
Coraishttp://corais.org/knowledge
Affordances: Clarifying and
Evolving a Concepthttp://www.cs.ubc.ca/~joanna/papers/GI2000_McGrenere_Affordances.pdf
Service Design Toolshttp://www.servicedesigntools.org/
Affordances and Designhttp://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/