User Experience

EURIPEDES MAGALHÃES - @EURIPEDESM

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.

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

FERRAMENTA DE TRABALHO, ACESSÓRIO? COMUNICADOR?

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

Steve Jobs

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.

?

Visual

Gestual

Sonoro

Tátil

Olfativo

E o que mais?

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.

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

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

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.

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

Arquitetura da Informação

Design de Interação

Design de Serviços

Experiência do Usuário

Usabilidade

Encontrabilidade

Socialidade

Continuidade

Faber Ludens

USER EXPERIENCE HONEYCOMB

Peter Morville

EMOCIONAL...

David Armano

CRIATIVIDADE “EM T”

A MENTE EM FORMA DE T

David Armano

http://vimeo.com/19131028

ILUVUXDESIGN PART I

http://vimeo.com/21691333

ILUVUXDESIGN PART II

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.

Estudo da Nokia sobre tv móvel

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.

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

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

Mind Map

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

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.

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

Á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.

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.

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.

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

@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