Oficina: Introdução ao Design de InteraçãoRodrigo Freese Gonzattomaio de 2013

Rodrigo Gonzatto

Formação:

‣ Bacharel em Comunicação Social

‣ Especialista em Design de Interação

‣ MsC. em Tecnologia e Sociedade

Professor:

‣ Graduação: PUCPR - Design Digital - Hipermídia

‣ Pós-graduação: UTFPR Londrina - Design de Interação

Rodrigo Gonzatto

Atuação profissional:

‣ Agências de publicidade e comunicação

‣ Mídias Sociais (Crânio)

‣ Indústria (Hi Technologies)

‣ Consultorias, projetos e treinamentos (InfoGlobo, Electrolux, Dataprev, PUCPR, CBV, Mídia Digital, Redirect e WebgoaI)

Design LivreFundamentos teóricosdo Design de Interação

Arte & Tecnologia

Relações entreTecnologia e Sociedade

Novas mídias e questõesétnicas e de gênero

Objetivos da oficina

• Desenvolver um projeto de interatividade

• Conhecer alguns métodos e técnicas comuns no Design de Interação

• Sentir na prática algumas das características do processo de design

Cronograma

Manhã

• Apresentação

• Problematização

• Criação (concepção)

Tarde

• Criação (prototipação)

• Avaliação

• Encerramento

Cronograma

Manhã

• O que é Design de Interação?

• Personas, Cenários, Sistema da Atividade

• Brainstroming, Sketch, Fluxogramas

Tarde

• Wireframes, Storyboard,

• Prototipação em Papel

• Análise Heurística, Teste de Usabilidade

O que é Design de Interação?

• Estuda o projeto das interações humanas mediadas por artefatos interativos, ou seja, objetos que participam ativamente da ação humana

• O designer de interação pesquisa, projeta e adapta artefatos websites, softwares, celulares, tablets, videogames, entre outros.

O que é Design de Interação?

• Campo de pesquisa interdisciplinar

• Origens: Design Participativo (Sistemas de Informação)Interação Humano Computador (Computação) /+ Design

O que é Design de Interação?

• Não é Computação, mas também.

• Não é apenas Interação Humano-Computador.

• É diferente de Design de Interfaces (e de Webdesign).

O “Design” do Design de Interação• Prototipação: pensar com materiais

• Iteração: processo não-linear

• Colaboração

• Pesquisa com usuários

“Um sistema não funciona se quem o utiliza não dá sentido à ele”

A “Interação” do Design de Interação• Inter - Entre

• A +B = C

• O designer de interação: de avaliador de telas e criador de interfaces até pesquisador de nichos de mercado

“A interação não está somente no sistemaou somente em quem usa. É mediação.”

Breve histórico

Fatores Humanos

linha de comando

um computador para muitos

Ergonomia

IHC

interface gráfica

um computador, uma pessoa

Psicologia

Design de Interação

interfaces tangíveis, dispositivos móveis,

afetividade...

uma pessoa, vários computadores

Design

Ciências SociaisAntropologia

FilosofiaComputação Ciências Cognitivas

ArquiteturaArte

Comunicação

Sistema

// @ #

& * %

usuário como computador

ENIAC “girls” (década de 40)

Parceiro de discurso

computadorcomo pessoa

I.A.

Ferramenta

trabalhoou produto

+ = ==

Sistema STAR da Xerox (1981)

Mídia / Linguagem

DxI

Windows Phone e Facebook

1. Formar seis ou oito grupos

2. Ajeitar mesas para trabalho em grupo :)

3. Receber materiais de colaboração

4. Escolher um dos briefings que serão apresentados a seguir...

PREPARAÇÃO

Para dar base aos nossos projetos:

‣ Educação

‣ Entretenimento

‣ Monitoramento

‣ Relacionamentos

BRIEFING

Briefing A: Educação

• Interação entre professores e alunos

• Uma escola de Ensino Médio deseja que todos os professores utilizem tablets em sala de aula, conectados à internet.

• Como melhorar o ensino e o aprendizado na sala de aula?

• Porém, a escola deseja utilizar os tablets como algo mais do que um “caderno digital”, mais do que um modo do professor passar a matéria.

Briefing B: Entretenimento

• Interação entre a família

• Um canal de TV deseja aumentar o número de espectadores, reunindo a família para assistir um programa de reality show.

• Este canal especula que a criação de um site para funcionar como segunda tela (em dispositivos móveis) pode ser uma solução.

• Como oferecer uma experiência significativa que integre a família, mas sem que o canal precise criar conteúdo exclusivo?

Briefing C: Monitoramento

• Interação entre pais e filhos

• Celulares com internet dão acesso à todo tipo de informação e comunicação. Mas será que os pais querem que seus filhos tenham contato com tudo?

• Uma empresa está pensando em criar uma interface para celulares para estes pais preocupados comprarem.

• Entretanto, o foco deste sistema são pais que não querem enganar seus filhos, nem mentir ou espioná-los, mas não encontram alternativas nos sistemas de monitoramento atuais, nem nos celulares disponíveis.

Briefing D: Relacionamentos

• Interação entre pessoas em uma festa

• Uma casa noturna quer promover a paquera/flerte. Pensou em algo como um "correio elegante" digital.

• Pensa a princípio em um site acessível pelo celular, mas pode-se instalar um telão na boate também.

• Entretanto, a casa noturna não quer que nenhum dos usuários sejam incomodados ou se sintam ofendidos, e tem uma preocupação com questões de gênero: tem foco em públicos hétero e LGBT, não quer discriminar mas quer promover a interação do flerte.

Processo

• PesquisaLevantamento do requisitos e informações para definição dos objetivos do projeto.

• Ideação e prototipaçãoGeração de ideias e possibilidades.

• TestesAvaliações com e sem usuários para melhorar protótipos ou o produto final.

Modelo funil(Karine Drummond)

Diverge Converge

especificadefinições

compreensão

explorapossibilidadesambiguidade

pesquisa > requerimentos > design > testes com

usuários refinamento do protótipo>

PREECE, ROGERS & SHARP

pesquisa > requerimentos > design > testes comusuários

refinamento do protótipo>

Modelo cíclico(Rodrigo Gonzatto)

Cronograma

• Problematização

• Criação (concepção)

• Criação (prototipação)

• Avaliação

PROBLEMATIZAÇÃO1. elaborar as Personas

2. desenvolver Cenários

3. analisar a(s) atividade(s) e compreender Sistema da Atividade

Geradores de avatar online:

Mangá, Mii, Meez

Personas

"Modelos" de usuários que servem como critérios para um projeto e sintetizam dados coletados em pesquisas

Persona 3: Luigi Garçom, 30 anos, Brasileiro Carismático, espontâneo, fala com as mãos. É agitado, mas se distrai conversando com clientes ou com outros garçons com muita facilidade.

Tecnologia: usa muito o celular, que é um modelo bem simples, mas mais para ligar e mandar mensagens. Internet tem foco social: MSN, Orkut, Facebook, e-mail. Rotina: Chega um pouco antes do restaurante abrir apenas para colocar o avental, pois já vem com a roupa e cabelo arrumados. Vai embora assim que sai o último cliente (ou seja, após as 00:00 em dias normais e depois das 5:00 em finais de semana).

Sugestões de itens

• Desenho/rascunho da persona

• Nome e idade

• Relacionamento com família e amigos

• Educação, trabalho e hobbies

• Personalidade: introvertido/extrovertido?

• Qual a sua rotina?

• Quais suas motivações?

• Como se relaciona com tecnologia? Que aparelhos usa?

O aluno de Psicologia, Jair Araújo, casou-se e decidiu trancar seu curso pois não está conseguindo acompanhar as aulas e deseja trabalhar mais no momento.

Utilizando um computador do trabalho, ele recorre ao website da universidade para saber por quanto tempo poderá trancar seu curso.

Cenárioscom personas

descrições de situações hipotéticas em que são colocadas pessoas que

interessam ao projeto

Cenários

• Devem ajudar a visualização da pessoa agindo em um contexto, a partir de uma motivação

• Quem?

• Faz o quê?

• Onde faz?

• Como faz, com o que?

• Porquê faz?

Sistema da Atividade

• Projetar os artefatos (sistemas, dispositivos, sites, etc) para dar suporte às atividades das pessoas

• Mais do que que teclas as pessoas apertam, ou a sequência de cliques que pressionam:O que as pessoas fazem? (atividade)

• O sistema (informático) deve se adaptar ao sistema (social)

Pessoas

Artefatos

Atividades

pessoas objetivo

Vygotsky

pessoas objetivo

instrumentos

Vygotsky

Engestrom

objetivo

ATIVIDADE1. elaborar as Personas

2. desenvolver Cenários

3. analisar a(s) atividade(s) e compreender Sistema da Atividade

CRIAÇÃO1. Gerar muitas ideias realizando um

brainstorming e conversando

2. Rabiscar (prototipação em baixa fidelidade) fazendo sketches e colaborando com outros sketches

3. Anotar tudo em modelos conceituais

especificadefinições

compreensão

explorapossibilidadesambiguidade

Diverge Converge

Diverge Converge

primeirasideias

ideia para ser

desenvolvida

análise edescarte

muitas possibilidades

geração(tese e

antítese)

iníciodo projeto

finaldo projeto

Prototipação

• Pode ter diferentes propósitos (demonstrar, testar, explorar)

• Protótipos podem ser em baixa fidelidade ou alta fidelidade

• Podem não ter funcionalidades, ou serem funcionais ou semi-funcionais

• É um tipo de comunicação e de documentação

SketchesPrototipação em baixa fidelidade

Protótipos em baixa ou em

alta fidelidade

Protótipos

Protótipo em baixa fidelidade

Protótipo em alta fidelidade

Sketchs ou Rabiscos

Cubezilla

Sketches de Jonas Lowgren

BrainstormingObjetivo: máximo de ideias possível.

Não inibir os demais: ambiente de

liberdade = criatividade.

Que ajuda a evitar a

conformidade

E writestormingtambém!

Sobre Writestorming

Vídeos de Psicologia:Testes de conformidade

Anotação de ideias

• Não ficar nas listas! Tornar visual! :)

• Modelos conceituais

• Diagrama de afinidades

• Arquivar◦ Tagear■ Agrupar tags

• Comparti lhar◦ Indicar para amigos◦ Linkar no blog■ No post■ Na linkroll

◦ Fornecer RSS Feeds◦ Comparti lhar tags

• Reencontrar◦ Buscar por palavra-chave◦ Filtrar por tags■ Ver tags relacionadas

• Descobrir◦ Nos populares◦ Indicados por amigos◦ Assinados■ Tag X■ Usuário Y

Diagrama de afinidades

Flickr User Model, Bryce Glass

Diagrama de afinidades

Criatividade: Brainstorming e prototipação com sketches• Fazer sessões de brainstorming ou writestorming para

aquecer

• Gerar o máximo de ideias possíveis. Não ironizar ideias absurdas >:’(

• Anotar todas as ideias em post-its. Sempre que possível, anotar de forma visual (sketche)

• Grudar os post-its no A3, por afinidades, formando modelos conceituais.

ATIVIDADE1. Gerar muitas ideias realizando um

brainstorming e conversando

2. Rabiscar (prototipação em baixa fidelidade) fazendo sketches e colaborando com outros sketches

3. Anotar tudo em modelos conceituais

CRIAÇÃO1. Criação dos primeiros fluxos de

interação

2. Prototipação em papel dos Wireframes

Navegação e tempo

• O tempo é um dos diferenciais do Design de Interação perante outras disciplinas de UX

• Interações possuem andamentos, ritmos

• Narrativa, Ritmo e Dança: conduzir e ser conduzido

Parangolé

Interface gráfica do StepMania. Conduza seu corpo (pés, olhos, pernas...) de acordo com os sinais exibidos.

Texto

Interface gráfica do Rock Band. Conduza seu corpo (dedos, olhos, mãos, braços...) de acordo com os sinais exibidos.

A dança dos dedosConduza a ponta dos seus dedos...

Interface do Gtalk. O “Pessoa está digitando...” indica que algo está acontecendo e também de que algo está para acontecer (chegar a mensagem). Muda a forma de interagir.

Interface de Add-on no Firefox. Ele não permite que você clique instantaneamente no botão “Instalar”, obrigando a esperar 3 segundos. Com isso sugere um breakdown.

Sites de download: versões pagas e gratuitas. Velocidade e lentidão como argumento para compra de um serviço do site. O design visual força a ideia de que ter que esperar é ruim. Mas porque 19 minutos é lento se, em alguns lugares (ou no passado), era rápido?

Antiga tela de erro do orkut

Diagramas

Humano Computador

Interação

Como formalizar / diagramar?

Diagrama de Navegação,Sitegrama ou Mapa do site

+ Computador

Representa a interaçãoentre papéis de usuários

Diagrama Sequencial+ Humano

Diagrama SequencialNegativo

Fluxogramaou fluxo de tarefa + Interação

Planejamento da Curva de Aprendizado

0

22,5

45

67,5

90

1 semana 2 semanas 3 semanas 4 semanas

Adobe PhotoshopCorel Photopaint

Prototipação:wireframes

WireframeMomento de definição:

especificação

Wireframe

Protótipo em alta fidelidade

Sketche: protótipo em baixa fidelidade

Protótipo em papel

MockupProtótipo que permite testar funcionalidades com usuários

Wireflow

ATIVIDADE1. Criação dos primeiros fluxos de

interação

2. Prototipação em papel dos Wireframes

Convergente!

AVALIAÇÃO1. Avaliação das telas pelas

heurísticas de Nielsen

2. Teste de Usabilidade

Análise cognitiva

O que o usuário precisa saber?

O que a interface explica? Propiciação

O que o usuário precisa lembrar?

O que a interface armazena? Memória

O que o usuário pode descobrir?

O que a interface propõe? Descompasso

Avaliação heurística

• Tipo de avaliação de especialista, na qual os avaliadores baseiam-se em princípios de usabilidade próprios ou desenvolvidos por outros especialistas.

• Uma heurística é uma regra indutiva, baseada na experiência, e exposta de forma sintética

Ação crítica ao lado de ação rotineira (Heurística 2 -

Prevenção de erros)

Botão soneca destacado

(Heurística 7 - Atalhos)

Auto é pra ligar o rádio quando tocar o alarme, mas não está claro isso. (Heurística 2 -

Linguagem familiar)

Heurísticas de Nielsen1. Percepção do Status do Sistema (feedback)

2. Falar a linguagem do usuário (utilizar uma linguagem familiar, fazendo o sistema e o mundo real corresponderem)

3. Saídas claramente demarcadas (controle e liberdade de utilização - atalhos, opções, desfazer, sair... deve estar claro e ser possível)

4. Consistência e padrões (uma mesma ação deve sempre ter o mesmo efeito)

5. Prevenção de erros

6. Minimizar a sobrecarga de memória do usuário (memória curta e aprendizado)

7. Os utilizadores inexperientes e especialistas utilizam os sistemas diferenciadamente (oferecer atalhos, por exemplo)

8. Estética e design minimalista (oferecer a informação que o usuário precisa no momento, nem mais nem menos)

9. Ajudar os utilizadores a reconhecer, diagnosticar e corrigir os erros (construir boas mensagens de erro, contextualizar e explicar o que acontece no sistema)

10. Ajuda e Documentação

Etapas da avaliação heurística

1. Escolher os avaliadores

2. Definir as heurísticas a serem utilizadas

3. Executar a avaliação

4. Cada problema encontrado deve ser relacionado à uma heurística

5. Promover a discussão entre os avaliadores

6. Redigir relatório

7. Priorizar problemas encontrados

Teste de Usabilidade

• Permite compreender melhor a interação do usuário com um produto

• Receber feedback sobre o design

• Avaliar situação

• Comparar com a concorrência e convencer chefes e equipes ;)

• Pode ser realizado em laboratório, em contexto ou a distância

Laboratório de Usabilidade

Eye-tracking

Áreas onde o usuário fixou o olhar

Caminho do olhar

Métricas

• Eficiência

• Tempo de execução da tarefa

• Taxa de erros

• Eficácia

• Taxa de conclusão da tarefa

• Satisfação

• Questionário de avaliação subjetiva

Exemplo de questionário de satisfação pós-teste

ATIVIDADE1. Avaliação dos projetos

apresentados pelas heurísticas de Nielsen

APRESENTAÇÃO• Apresentação dos projetos dos

grupos!

Para se aprofundar...

• Barbosa e Silva - Interação Humano Computador

• Usabilidoido: www.usabilidoido.com.br

• Saffer - Designing for Interaction

• Cooper - About Face 3

• Dan Brown - Communication Design

• Information Architecturefor the World Wide Web

Obrigado!Rodrigo Freese Gonzattowww.gonzatto.comrodrigo@gonzatto.com