aula 2 - técnicas de prototipação i

Disciplina Técnicas de Prototipação 1Prof.: Paolo Domenico Passeri

Equipes do Projeto

1

A

•Lenin•Alysson•Anderson•Vinicius

B

2

•Ramon•Tiago•Jean•Pedro

•Kallel•Rodrigo•Rafael Giuliano•Gabriela

•Raphael•Paulo•Viviane•Tiago Pain

REVISÃO

Individual:•Ir a um restaurante e OBSERVAR as interações que ocorrem. Tirar fotos e fazer anotações se possível.

•Compartilhar fotos e anotações com as suas equipes.

Grupo:•Após a visita ao restaurante, validar o que foi feito na aula 1 (levantar mais problemas, melhorar os desenhos).

•Pensar em uma solução técnologica composta por HW e SW que possa melhorar a experiência no restaurante.

•Criar um “Concept Sketch” da solução.

TÉCNICA D.D.P.

Refinando a sua Ideia

“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”

• Quem é o seu PÚBLICO ALVO?• O principal usuário será o cliente, garçom ou outra pessoa.

• Jovens, adultos ou idosos

• Homens ou Mulheres

• Vão usar diariamente ou ocasionalmente

• Quais serão as principais FUNCIONALIDADES?• Cardápio do restaurante?

• Realizar pedidos?

• Chamar o garçom?

Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.

- Mark Twain

“”

Meetings for iPadPaolo Domenico Passeri

ATIVIDADE 1

• DEFINAM quem será o público alvo da sua solução

• LEVANTEM todas as funcionalidades que o sistema deverá ter

• CORTEM funcionalidades que não fazem parte do core (menos importantes)

• UNAM o PÚBLICO ALVO e as FUNCIONALIDADES em uma única frase

• Criem o SCKETCH CONCEITO da solução (usando técnicas da aula 1)

45 minutos

• Post-It

• Papel

• Lápis/Caneta

INTERAGINDO COM DISPOSITIVOS

Métodos de Interação

• Lembre-se que existem diferentes meios de interagir com o dispositivo

• Antes de desenhar/prototipar a UI, é necessário avaliar quais meios estão disponíveis e serão utilizados

• Analise se não existe outra maneira de usuários entrarem com “dados” e atingir seus objetivos

• Seja criativo e não se limite ao “tradicional”

Padrões de Interação

• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces

• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers

• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um design

Manipulação INDIRETA

• É necessário aprender o mapeamento das teclas• Deve ser muito consistente• Não são muito flexíveis

• Joystick Direcional• Botões Alfa-numéricos• Soft-keys• Rodas

Manipulação DIRETA/Touch/Haptic

• Toques curtos e longos• Arrastar• Deslizar• Girar• Pinçar e Expandir

• Não existe mapeamento pois as teclas são “virtuais”• Difícil aprender todos os meios de entrada• São muito flexíveis

Manipulação por GESTOS

• Utilizada através de sensores• Através do dispositivo por completo

• Inclinando• Asoprando • Chacoalhando• “Se movendo”

TÉCNICADiagrama de

Fluxo de Interfaces

Diagrama de FLUXO

• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra

• Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os seus detalhes

• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de uma boa NAVEGAÇÃO

TO

OLS

• Usado principalmente por dois motivos:

• Ter uma VISÃO GERAL, em alto nível, da interface de usuário (arquitetura visual da UI)

• Modelar as INTERAÇÕES que os usuários terão com seu sistema;

• Como o fluxo oferece uma visão geral, você tem um entendimento RÁPIDO de como o sistema deve FUNCIONAR.

• É uma maneira simples para avaliar todo o fluxo da INTERFACE DO USUÁRIO, e responder algumas perguntas:

• Este fluxo faz sentido?

• Por que eu não posso ir da tela “X” para a tela “Y”?

• É um simples método para validar se a interface será USÁVEL. Se tiverem muitas caixa e muitas ligações entre eles, é um sinal de que seu sistema é muito grande e complexo para pessoas entenderem.

Po

r q

ue u

sar?

Exemplo

Meetings for iPadPaolo Domenico Passeri

ATIVIDADE 2

• LEIAM novamente a “Declaração de Definição do Produto” (DDP)

• LISTEM as principais TELAS do sistema

• CONSIDEREM as interações que usadas para navegação entre as telas (toque, arrasto, click)

• TRACEM o seu DIAGRAMA usando post-its coloridos (uma cor para telas e outra para interações).

• DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a mesma funcionalidade

45 minutos

• Post-It

• Papel

• Lápis/Caneta

PROTOTIPOS BAIXA FIDELIDADE e ALTA FIDELIDADE

•Apoiam a avaliação de todos os

detalhes de um design

•Necessitam mais tempo e

recursos para serem construídos

•Não apoiam a avaliação de todos os

detalhes de um design, como:

• Interações da interface com o usuário

• Layout e formato do produto

• Representações dinâmicas

• Tempo de resposta do sistema

• Apoiam a avaliação do modelo

conceitual usado no design

• Necessitam de pouco tempo e recursos

para serem construídos

BAIXA FIDELIDADE ALTA FIDELIDADE

Baixa FidelidadeVisão Abstrata

Alta FidelidadeMédia Fidelidade

TÉCNICAPrototipos em Papel

• Mock-ups ou REPRESENTAÇÕES de um design

• É uma maneira para AVALIAR um design através de um teste com usuários

• Ferramenta de comunicação para facilitar o ENTENDIMENTO de um design

• São FEITOS de:

O q

ue s

ão?

1.Esquemas feitos a mão2.Fotocópias3.Recortes de pedações de papel4.Uma combinação criativa de qualquer um dos itens acima

• Explorar - permite testar facilmente diferentes idéias

• Comunicar - apresenta as idéias de uma forma que pode ser entendida facilmente

• Colaborar - facilita que todo o time de design contribua e avalie o protótipo

• Validar - determina a eficiência dos elementos de design e do fluxo de navegação

Po

r q

ue u

sar?

• Nos primeiros estágios do processo de design, pois:

• É quando as pessoas são menos resistentes a mudanças

• Foi investido pouco tempo e recursos no projeto

• Ainda não se tem clareza de qual a melhor solução

Qua

ndo

usa

r?

• Exigem MÍNIMOS RECURSOS para serem contruidos

• São contruidos com FERRAMENTAS SIMPLES, que não requerem habilidades específicas

• Permitem que as IDEIAS SEJAM TESTADAS nos primeiros estágios do processo de design

• Facilitam a COLABORAÇÃO entre os membros do time

• Os protótipos são construídos RAPIDAMETE

• Ajudam a IDENTIFICAR os maiores PROBLEMAS de usabilidade do projeto

Vant

agen

s

• As maiores melhorias na interface de um produto são obtidas através da recolha de dados de usabilidade nas fases iniciais do seu desenvolvimento

• Os benefícios da aplicação de metodologias de usabilidade nas fases iniciais é 10 vezes maior do que se for apenas utilizada numa fase posterior (para correção de erros e alteração de elementos na interface)

• É mais barato alterar um produto na sua fase inicial do que fazer alterações a um produto acabado. Estima-se que seja 100 vezes mais barato efetuar alterações antes de se começar a programar do que esperar que todo o desenvolvimento tenha sido efetuado.

Poupar dinheiro usando protótipos

Jacob Nielsen

• Funcionalidade

• Navegação e Estrutura

• Arquiterura da Informação

• Fluxo de telas

• Layout e Agrupamento dos elementos

• Conteúdo

• Terminologia e linguágem

• Rótulos, botões e controles

O que pode ser avaliado?

Usabilidade Arq. Inform. Design

1.Identificar o que prototipar

2.Criar o(s) protótipo(s)

3.Planejar o teste

4.Conduzir o teste com o usuário

5.Analisar os resultados

6.Modificar o design

7.Refazer o teste

Passos para criar um Protótipo em Papel

• O protótipo geralmente não precisa ser completo

• Considere as 3 ou 4 principais tarefas do projeto (mais utilizadas pelo usuário) e faça um protótipo para testá-las

• Comece com conceitos simples e depois evolua para protótipos mais abrangentes ou profundos

Quais elementos incluir no Protótipo em Papel?

Ferramentas necessárias

• Papel• Post-it• Canetinha média

• Tesoura• Fita adesiva

• Cola bastão

• TransparênciasOrganizaçã

o e

Criatividade!

Exemplos

Ponto-i

Exemplo: demonstrando a interface

ATIVIDADEPROJETO

1. Baseado no diagrama de fluxo, criar um protótipo do sistema usando a técnica de prototipação no papel

2. Escolher os principais componentes (3 a 4 telas) e desenha-los.

3. Simular a interação e filmar o resultado

Entregáveis desta aula: post no blog da Faber-Ludens, com DDP, diagrama de fluxo, e vídeo do protótipo que demonstra o uso do sistema.

2 horas

• Tesoura

• Cola

• Revistas

• Papel

• Post-it

• Canetinha