sistemas exploráveis - campus party

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

Out of the box from Vitamins

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

Obrigada!

contato.bianca@gmail.comfb.com/bianca.brancaleoneslideshare.com/bibia1010

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/