introdução ao design de interação

118
Introdução ao Design de Interação Frederick van Amstel www.usabilidoido.com.br

Upload: frederick-van-amstel

Post on 26-Jun-2015

1.880 views

Category:

Design


7 download

DESCRIPTION

Slides que costumo usar para apresentar o design de interação a meus alunos.

TRANSCRIPT

Page 1: Introdução ao Design de Interação

Introdução ao Design de Interação

Frederick van Amstelwww.usabilidoido.com.br

Page 2: Introdução ao Design de Interação

Quem fala

• Prof. Fred

• Grad. Comunicação Social UFPR

• MsC. Tecnologia UTFPR

• Blog www.usabilidoido.com.br

• Instituto Faber-Ludens www.faberludens.com.br

Page 3: Introdução ao Design de Interação

Conteúdo• DESIGN E TECNOLOGIA

• Design estratégico no mercado de tecnologia

• Retorno do Investimento em Design

• Processo criativo

• INTRODUÇÃO AO DESIGN DE INTERAÇÃO

• Delineando a experiência de uso

• Pesquisa com usuários

• Ecologia de sistemas

Page 4: Introdução ao Design de Interação

Conteúdo• ARQUITETURA DA INFORMAÇÃO

• Estruturas de classificação e navegação

• Documentação da experiência do usuário

• Metodologia de projetos Web

• DESIGN DE INTERFACES

• Padrões de interação

• Prototipação de interfaces

• Ícones e semiótica

Page 5: Introdução ao Design de Interação

O que é Design de Interação?

Design de Interação é uma área profissional, uma sub-disciplina do Design e um processo

voltado ao projeto das interações entre pessoas e sistemas.

Page 6: Introdução ao Design de Interação

Engenharia de Software

sistema usuário

Page 7: Introdução ao Design de Interação

Interação Humano-Computador

sistema usuário

Page 8: Introdução ao Design de Interação

Diferencial

Engenharias

IHC / Design de Interface

Design de Interação

Antropologia / Marketing

Page 9: Introdução ao Design de Interação

Design de Interação como artefato

Page 10: Introdução ao Design de Interação

Design de Interação como comunicação

usuário usuárioartefato

Page 11: Introdução ao Design de Interação

Design de Interação como redes sociotécnicas

U

A

U

U

U

U

U

U

UA

A

A

A

Page 12: Introdução ao Design de Interação

Aplicações do Design de Interação

Page 13: Introdução ao Design de Interação

Publicidade e Marketing

Page 14: Introdução ao Design de Interação

Urbanismo

Page 15: Introdução ao Design de Interação

Brinquedos

Page 16: Introdução ao Design de Interação

Lojas conceito

Page 17: Introdução ao Design de Interação

Tecnologias Educacionais

Page 18: Introdução ao Design de Interação

Medicina

Page 19: Introdução ao Design de Interação

Jogos

Page 20: Introdução ao Design de Interação

Música

Page 21: Introdução ao Design de Interação

Por que esses exemplos ainda são raros?

Page 22: Introdução ao Design de Interação

Falta um objetivo comum!

o que o marketing sugeriu

o que a administração aprovou

o que foi projetado pela engenharia

o que foi produzido como foi montado o que o consumidor queria...

Page 23: Introdução ao Design de Interação

Design Centrado no Valor, Jess McMullin

Objetivos de Negócio

Objetivos do Usuário

Objetivos de Negócio

Objetivos do Usuário

ValorVácuoDesign

Acaso

Page 24: Introdução ao Design de Interação

Processo de desenvolvimento comum

Engenharia

MarketingMarketing

Page 25: Introdução ao Design de Interação

Vantagens/Desvantagens

• Economiza planejamento

• Tentativa e erro

• Design não é importante

• O produto é um frankestein de funcionalidades

Office XP

Page 26: Introdução ao Design de Interação

Design como embelezamento

Engenharia

Marketing

Marketing

Design

Page 27: Introdução ao Design de Interação

Vantagens/Desvantanges

• Beleza vende

• Que inovação é possível a essa altura do campeonato?

Windows Vista

Page 28: Introdução ao Design de Interação

Design como inovação

Engenharia

Marketing

Design

Marketing

Page 29: Introdução ao Design de Interação

Vantagens/Desvantagens

• Melhora a qualidade

• Economiza retrabalho

• Diminui a velocidade

• Risco de não obter retorno

Office 2007

Page 30: Introdução ao Design de Interação

Design como estratégia

Engenharia

Marketing

Design

Marketing

Page 31: Introdução ao Design de Interação

Vantagens/Desvantagens

• Integra Pesquisa & Desenvolvimento

• Aumenta o ritmo de inovação

• Fortalece a marca

• Custo elevado

• Depende da cultura organizacional

Loja Apple em Nova Iorque

Page 32: Introdução ao Design de Interação

Discurso da Microsoft

Page 33: Introdução ao Design de Interação

Como o mercado de produtos evolui

novo mercado

inovação qualitativa

mercado saturado

competição pela qualidade

inovação quantitativa

início da competição competição pela

quantidade

sem competição

Page 34: Introdução ao Design de Interação

Modelos imaginados pela Motorola nos anos 70 e o que foi comercializado

Page 35: Introdução ao Design de Interação

De ferramenta de trabalho a comunicador pessoal

Page 36: Introdução ao Design de Interação

Razr Dolce&Gabbana: celular como acessório fashion

Page 37: Introdução ao Design de Interação

O diferencial do iPhone é a interface

Page 38: Introdução ao Design de Interação

Bebê ensina a usar o iPhone

Page 39: Introdução ao Design de Interação

Limites: iPhone não permite muita customização

Page 40: Introdução ao Design de Interação

Exercício

• Discussão geral

• Como o Design está ou não integrado aos processos de sua empresa?

• Como deveria estar?

• 20 minutos

Page 41: Introdução ao Design de Interação

Design é inovação?De qual tipo?

Page 42: Introdução ao Design de Interação

Inovação técnica

Page 43: Introdução ao Design de Interação

Inovação formal

Page 44: Introdução ao Design de Interação

Inovação social

Page 45: Introdução ao Design de Interação

Situação atual do mercado de tecnologia brasileiro

• Sempre correndo atrás do déficit

• Competir em hardware é impossível

• Competir em software é possível, mas

• Ninguém sabe mais o que inventar

Page 46: Introdução ao Design de Interação

Outra possibilidade

• Investir em design

• Aproveitar a criatividade do povo brasileiro

• Terceirizar a produção

• Novos meios de distribuição (on demand, Internet, redes P2P)

Page 47: Introdução ao Design de Interação

Exercício

• Esboçar uma crítica à pretensa inovação de algum produto tecnológico

• Discussão em grupo, apresentação oral

• 5 minutos

Page 48: Introdução ao Design de Interação

Características do Design“Design é a alma das criações humanas”,

Steve Jobs

Page 49: Introdução ao Design de Interação

Modelo Triádico

Pessoas

Artefatos

Atividades

Page 50: Introdução ao Design de Interação

Multilingüe

Gestual

Visual Sonora

Tátil

Olfativa

Page 51: Introdução ao Design de Interação

Futurologia aplicada

• A diferença entre a abelha e o arquiteto é que este último imagina o todo antes de construir

• Visão holística

• Observar tendências é a melhor forma de prever o futuro

Page 52: Introdução ao Design de Interação

Articulação de interesses

• Design é deliberação, mesmo que implícita

• Desejos e necessidades são culturais

• Cada um tem uma história distinta

Page 53: Introdução ao Design de Interação

Idealista

Positivista

Lógico

Individualista

Materialista

Crítico

Dialético

Coletivo

Page 54: Introdução ao Design de Interação

Entrevista com Paulo Melo e Felipe Neri (CESAR)

Page 55: Introdução ao Design de Interação

Processo de Design

Design é o design de um design para um design.John Heskett

Page 56: Introdução ao Design de Interação

Modelo Linear

Page 57: Introdução ao Design de Interação

Modelo Errático

Page 58: Introdução ao Design de Interação

Criando possibilidades

Page 59: Introdução ao Design de Interação

Recursos para criar

• Rabiscos

• Brainstorming

• Cenários hipotéticos

• Prototipação rápida

• Abdução

Page 60: Introdução ao Design de Interação

Exercício

• Criar conceito de jogo para o BRGames 2009

• Proibido criticar

• Trabalhar em cima das idéias dos outros

• Dinâmica

• 10 minutos

Page 61: Introdução ao Design de Interação

Processo dialético

ImagemOperante

Visão

Especificação

Visão

Img. Operante

Especificação

Tempo

Lowgren e StoltermanThoughtful Interaction Design, MIT Press

Page 62: Introdução ao Design de Interação

Modelo Espiralado

Page 63: Introdução ao Design de Interação

“O Design não está lá, nem cá; está no meio, ora pendendo para um lado, ora para o outro, num movimento que se assemelha à uma dança graciosa. É preciso saber o momento e o lugar certo para ser rígido ou flexível, de acordo com as intenções da performance e com a guia musical. O Design é assim: não cria, mas recombina; não define, mas propõe; não julga, mas avalia; não é arte, mas também gosta de dançar… Para entendê-lo, é preciso dar o primeiro passo!”

Instituto Faber-Ludens de Design de Interação

Page 64: Introdução ao Design de Interação

Aspectos e métodos de Design“Design é uma atividade criativa cuja finalidade é estabelecer as qualidades multifacetadas de objetos, processos, serviços e seus sistemas,

compreendendo todo seu ciclo de vida.” The International Council of Design Societies

Page 66: Introdução ao Design de Interação

Metodologia e método

• Metodologia é o estudo crítico dos métodos a partir de uma perspectiva teórica

• Método é uma estrutura coerente de técnicas necessárias para atingir um resultado

Page 67: Introdução ao Design de Interação

Metodologia Ágil

• Ver funcionando é melhor do que prever

• Evoluir por iterações

• Diálogo com usuários

• Equipe enxuta

• Compartilhar conhecimento

Page 68: Introdução ao Design de Interação

Métodos de Design de Interaçao

• Prototipação

• Teste de Usabilidade

• Entrevista

• Shadowing

• etc...

Page 70: Introdução ao Design de Interação

Utilidade

Produtos Google

Page 71: Introdução ao Design de Interação

Usabilidade

Jitterburg

Page 72: Introdução ao Design de Interação

Significado

Charmr

Page 73: Introdução ao Design de Interação

Beleza

Sony Digital Walkman

Page 74: Introdução ao Design de Interação

Sustentabilidade

Carona USP

Page 75: Introdução ao Design de Interação

Crítica: Metodologia Moebius

Page 76: Introdução ao Design de Interação

Exercício

• Escolher e adaptar métodos para formar um processo ideal de desenvolvimento

• 1 hora

Page 77: Introdução ao Design de Interação

Balanceando aspectos

• Uma coisa não exclui a outra

• Os aspectos não devem ser tomados em separado > visão holística

• O critério final deve ser a apropriação para a situação específica

Page 78: Introdução ao Design de Interação

Sistemas não se restringem à funcionalidades

Page 79: Introdução ao Design de Interação

Sistemas são ecologias

Page 80: Introdução ao Design de Interação

Exercício

• Mapear um ecossistema que vocês tenham experiência

• Entidades, relações, atividades, entrada-saída

• 20 minutos

Page 81: Introdução ao Design de Interação

Importância da pesquisa

• Perceber e compreender a diferença entre as pessoas

• Mapear as atividades

• Descobrir oportunidades para inovação

• “Botar o pé no chão”

Page 82: Introdução ao Design de Interação

Expansão da consciência

Page 83: Introdução ao Design de Interação

Esse é nosso diferencial!

Engenharias

IHC / Design de Interface

Design de Interação

Antropologia / Marketing

Page 84: Introdução ao Design de Interação

Empresas que investem

Page 85: Introdução ao Design de Interação

Nokia: oportunidades em mercados emergentes

Page 86: Introdução ao Design de Interação

Motorola: correndo atrás da concorrência

Page 87: Introdução ao Design de Interação
Page 88: Introdução ao Design de Interação

Apple: esconder pesquisa e patentear tudo

Page 89: Introdução ao Design de Interação

Estudos de Caso

Page 90: Introdução ao Design de Interação

Stobag do Brasil

• Customização em massa de toldos

• Venda complexa

• Especificação dos sistemas de apoio à revenda

Page 91: Introdução ao Design de Interação

Visitas e entrevistas

• Compreender o negócio sob múltiplas perspectivas

• Funcionários e revendedores (usuários)

• Identificação de situações de baixa eficiência

Page 92: Introdução ao Design de Interação

Processo de venda

Page 93: Introdução ao Design de Interação

Design do ecossistema

Page 94: Introdução ao Design de Interação

Financeiro Web - Brame

Page 95: Introdução ao Design de Interação

ADM - Análise de Helpdesk

Page 96: Introdução ao Design de Interação

Automação do Lar - Specto

Page 97: Introdução ao Design de Interação

Visualização de atividade em prédios

Page 98: Introdução ao Design de Interação

Ozonin - Spherical

Page 99: Introdução ao Design de Interação

CIMM

Page 100: Introdução ao Design de Interação

Proposta de redesign

Page 101: Introdução ao Design de Interação

Exercício

• Escolher uma atividade a ser estudada

• Criar um conceito de serviço web 2.0 inspirado nessa atividade

• Planejar uma pesquisa com usuários potenciais

Page 102: Introdução ao Design de Interação

Objeto compartilhado ResultadoProcessos, Ações

Photo

© 2

000 V

ilma V

ain

ikain

en

Pho

to ©

2000 V

ilma V

ain

ikain

en

Análise da atividade

Baseado em Korpela (2004)

Cuidado intensivo de bebês prematuros

Page 103: Introdução ao Design de Interação
Page 104: Introdução ao Design de Interação

Análise das ações

AtorAçãoMeio de açãoObjeto da ação

Phot

o ©

200

0 Vi

lma

Vain

ikai

nen

Meio de coordenação entre as ações

Shared objectof activity

Page 105: Introdução ao Design de Interação
Page 106: Introdução ao Design de Interação

Análise da redeO resultado de uma atividade se torna o objeto de outra

Meio de conexão entre as

atividades

Ph

oto

© 2

000 V

ilma V

ain

ikain

en

Page 107: Introdução ao Design de Interação
Page 108: Introdução ao Design de Interação

Cristalização nos instrumentosYrjo Engeström

pessoas

instrumentos

comunidade

regras divisão do trabalho

objeto resultado

Page 109: Introdução ao Design de Interação

Mudança na atividadeYrjo Engeström

pessoas

instrumentos

comunidade

regras divisão do trabalho

objeto resultado

Page 110: Introdução ao Design de Interação

Steve Jobs na MacWorld 2007

Page 111: Introdução ao Design de Interação

Crise no sistemaClay Spinuzzi

pessoas

Blackberry

comunidade

regras divisão do trabalho

objeto resultado

Botões não se adaptam aos múltiplos objetos

Page 112: Introdução ao Design de Interação

Teclado on-screen do iPhone

Page 113: Introdução ao Design de Interação

Reconfiguração do sistema

pessoas

iPhone

comunidade

regras divisão do trabalho

objeto resultado

Teclado on-screen é impreciso

Page 114: Introdução ao Design de Interação

Resumindo o Processo

artefatos

atividade atividade

artefatos

Page 115: Introdução ao Design de Interação

A base para seu projeto deve ser a atividade humana

Page 116: Introdução ao Design de Interação

A base para seu projeto deve ser a atividade humana

Page 117: Introdução ao Design de Interação

Exercício

• Grupos de 2 separados por facilidades geográficas

• Definir a atividade

• Criar o conceito de serviço Web 2.0

• Expor numa cartolina apenas

• Convencer outra equipe a aderir ao projeto

Page 118: Introdução ao Design de Interação

Obrigado! Dúvidas?

Frederick van Amstelwww.usabilidoido.com.br www.faberludens.com.br