50
EURIPEDES MAGALHÃES - @EURIPEDESM User Experience

User Experience

Embed Size (px)

DESCRIPTION

Aula de User Experience, baseada no documento do Instituto Faber Ludens.

Citation preview

Page 1: User Experience

EURIPEDES MAGALHÃES - @EURIPEDESM

User Experience

Page 2: User Experience

DO QUE SE TRATA?

Se trata de gerar “o momento em que tudo está perfeito” se trata de fazer com que tudo o que o usuário use seja mais fácil e melhor, se trata fazer com que o uso daquele sistema, ferramenta ou serviço seja o melhor possível, que gere aprendizado, afetividade e lembrança.

Page 3: User Experience

USER EXPERIENCE

“Algumas pessoas dizem que design é solução de problemas. É óbvio que designers resolvemalguns problemas, mas isso os dentistas também fazem. Design é uma forma de invenção cultural.”

Jack Schulze

Page 4: User Experience
Page 5: User Experience
Page 6: User Experience

FERRAMENTA DE TRABALHO, ACESSÓRIO? COMUNICADOR?

Page 7: User Experience

“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs

Page 8: User Experience
Page 9: User Experience

USER EXPERIENCE

O iPhone ganhou espaço pela sua curva de aprendizado pequena e pela integração que ele permite com outros dispositivos da Apple.

A interface é um ponto importante neste ponto. Isso nos leva a pensar nas características do design, que são cada dia mais abrangentes.

O design agora é um espaço de multilinguagem, e muitos recursos podem ser utilizados.

Page 10: User Experience

?

Visual

Gestual

Sonoro

Tátil

Olfativo

E o que mais?

Page 11: User Experience

USER EXPERIENCE

Em quase tudo que usamos há design, de revistas à embalagens, de cadeiras a mouses de computadores, de maçanetas de porta à assentos de carros, tudo de alguma forma foi pensado para atender uma necessidade.

Essa necessidade deve ser levada em consideração, e além dela, o USUÁRIO também, o “rei” do designer.

Page 12: User Experience
Page 13: User Experience

http://nymag.com/nymetro/health/features/11700/

Page 14: User Experience

http://nymag.com/nymetro/health/features/11700/

1. Fácil identificaçãoO nome do medicamento é impresso no topo da embalagem.

2. Cor vermelhaA cor vermelha é o símbolo universal para alerta.

3. Hierarquia de informaçãoNome do medicamento, posologia, data de validade organizadas de acordo com sua importância e uso

4. Economia de papelA forma e posição do papel gera um melhor aproveitamento por folha e facilita a visualização

Page 15: User Experience

http://nymag.com/nymetro/health/features/11700/

5. Identificação por corPor cores customizadas é possível identificar e separar medicamentos quando usados por mais de uma pessoa em casa.

6. Card com informações extras Mais difícil de perder, o cartão fica atrás da embalagem e explica com detalhes as informações sobre o medicamento

7. PosologiaIdentificação da posologia, quantos dias dura o tratamento e quantas vezes por dia se utiliza.

Page 16: User Experience

User Experience

Usability

Design (Visual & UI)

Project Mgmt.

AJAX (JavaScript)

Back-EndInformation Architecture

Account Mgmt.

Flash Progra mming

APIsPackaged Solutions

Interaction Design

Content User Research

Design Deliverables

Business Intelligence

Problem Framing

Requirements Gathering /

Research

DOM Scripting

Accessibility

CSS

Front-End Development

User AgentsMarkup

Designing the Experience

Managing the Project

Defi ning the Problem

Architecting the Technology

Delivering the Experience

Prototyping

Creative inking

http://garrettdimon.com/pages/improving_interface_design

Page 17: User Experience

Arquitetura da Informação

Design de Interação

Design de Serviços

Experiência do Usuário

Usabilidade

Encontrabilidade

Socialidade

Continuidade

Faber Ludens

Page 18: User Experience

USER EXPERIENCE HONEYCOMB

Peter Morville

Page 19: User Experience

EMOCIONAL...

David Armano

Page 20: User Experience

CRIATIVIDADE “EM T”

Page 21: User Experience

A MENTE EM FORMA DE T

David Armano

Page 22: User Experience

http://vimeo.com/19131028

ILUVUXDESIGN PART I

Page 23: User Experience

http://vimeo.com/21691333

ILUVUXDESIGN PART II

Page 24: User Experience

PLANEJANDO UX

Basicamente nada é criado sem uma base sólida de pesquisa, imersão e entendimento do público e do uso do que será criado.

Por isso pode-se e deve-se fazer levantamentos sócio-demográficos, ver estatísticas de navegação, gerar testes de usabilidade, testes A/B, o que for possível.

Page 25: User Experience

Estudo da Nokia sobre tv móvel

Page 26: User Experience

FERRAMENTAS

Existem muitas ferramentas para pesquisa e definição de caminhos, um processo de design thinking mais complexo pode ser formatado, mas também itens pulverizados podem ajudar.

Mood Boards, Mind Maps e diagramas podem ser bons caminhos.

Page 27: User Experience

MOOD BOARD

Ferramenta muito utilizada no processo de design estratégico, é um “facilitador de pensamento”, por conter informações .

As imagens contidas nele auxiliam o processo de definição dos caminhos a serem trabalhados.

A idéia é criar esse processo de imersão, de atmosfera, humor. Imagens, tecidos, texturas, tudo pode ser inserido nele.

http://www.scrapblog.com

Page 28: User Experience
Page 29: User Experience
Page 30: User Experience

MIND MAP

Dentre muitas funções do Mind Map, uma delas é definir os caminhos de um projeto, ação, comunicação ou até mesmo funcionamentos de um sistema.

Ajuda a planejar as etapas e identificar os caminhos de uma forma visual e intuitiva.

http://www.mindmeister.com

Page 31: User Experience

Mind Map

Page 32: User Experience

DIAGRAMA DE AFINIDADES

Método para ordenar idéias, informações ou ações, a partir de uma classificação por grupos, as informações podem ser agrupadas e classificadas.

Facilita o arranjo das informações porque é intuitivo, rápido e ajuda na discussão dos resultados.

http://nform.com/tradingcards/affinity-diagram

Page 33: User Experience
Page 34: User Experience

PERSONAS

A definição de um “personagem” para pesquisa, na técnica de personas, é traçado um perfil de um possível usuário, suas características básicas, como ele se relacionaria com o sistema e com o seu núcleo de convivência, uma síntese da personalidade.

Pode ser feito como uma descrição de um dia de atividades, somente como uma listagem ou até mesmo criando-se um perfil “fake” em uma rede social para testes.

Page 35: User Experience

http://wiki.openmoko.org/wiki/Main_Page

Page 36: User Experience

ÁRVORE DE TAREFAS E ETAPAS

É a listagem de todas as ações necessárias para a interação no sistema ou site.

Pode conter os itens de curva de aprendizado, pode conter as interações principais ou as interações entre os usuários do sistema.

Serve como guia para programação, para entendimento do tempo de interação e quantidade de páginas a serem criadas.

Page 37: User Experience
Page 38: User Experience
Page 39: User Experience

ESTUDO

App para economia de combustível.

Por intermédio da colaboração entre os usuários, o sistema apontaria os melhores locais para abastecimento, os melhores caminhos e também o rendimento médio do veículo.

Page 40: User Experience
Page 41: User Experience
Page 42: User Experience
Page 43: User Experience

ESTUDO/CASE

App para interação entre os amigos.

Com o conceito de integrar os amigos e fazer coisas diferenciadas, o app para Facebook instigava as pessoas a convidar os amigos para atividades no mínimo estranhas.

Page 44: User Experience
Page 45: User Experience
Page 46: User Experience
Page 47: User Experience

DIAGRAMA SEQUENCIAL

Mostra as interações entre os usuários e a sequência de tarefas para fazer determinada ação.

Ex.: compras em um B2B ou B2C ou C2C

Page 48: User Experience
Page 49: User Experience
Page 50: User Experience

@EURIPEDESM

• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld.mit.edu/video/357/• http://designthinking.ideo.com/• http://arquiteturadeinformacao.com/• http://www.usabilitycounts.com/• http://www.intuitionhq.com/• http://nform.com/tradingcards/affinity-diagram

Links úteis e bibliografia