SlideShare uma empresa Scribd logo
Disciplina   Técnicas de Prototipação 1
                            Prof.: Paolo Domenico Passeri
Aula 1

ESTRUTURA
            Apresentação da Disciplina | Introdução a Prototipação |
            Sketch | Mind Map | Visual Thinking | Lançamento do Projeto

            Aula 2
            Tipos de Protótipos | Métodos de Interação | Diagrama de
            Fluxo | Prototipação em Papel

            Aula 3
            Modelagem | Prototipação Física

            Aula 4
            Protótipos Vivos | Desenhando Experiênicias | Storyboarding
            | Role-playing

            Aula 5
            Business Design | Apresentações em Papel | Frameworks |
            Infográficos | O “Pitch”

            Aula 6
            Projeto Final da Disciplina
Equipes do Projeto

              1               2
    • Lenin           • Kallel
    • Alysson         • Rodrigo
A   • Anderson        • Rafael Giuliano
    • Vinicius        • Gabriela

    • Ramon           • Raphael
    • Tiago           • Paulo
B   • Jean            • Viviane
    • Pedro           • Tiago Pain
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:
REVISÃO   •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

•   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?




        “DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”
“ Desculpe porém não tive tempo de escrever
  uma carta curta, então mandei uma longa.”



                               - Mark Twain
Meetings for iPad
Paolo Domenico Passeri
• 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)
ATIVIDADE 1
              • 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)

                                                • Post-It

                    45 minutos                  • 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                            Manipulação DIRETA/Touch/Haptic
               • É necessário aprender o                        • Não existe mapeamento pois
               mapeamento das teclas                            as teclas são “virtuais”
               • Deve ser muito consistente                     • Difícil aprender todos os meios
               • Não são muito flexíveis                         de entrada
                                                                • São muito flexíveis

               • Joystick Direcional                            • Toques curtos e longos
               • Botões Alfa-numéricos                          • Arrastar
               • Soft-keys                                      • Deslizar
               • Rodas                                          • Girar
                                                                • Pinçar e Expandir



Manipulação por GESTOS
• Utilizada através de sensores
• Através do dispositivo por completo



                               • Inclinando
                               • Asoprando
                               • Chacoalhando
                               • “Se movendo”
Diagrama de
TÉCNICA     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
TOOLS
Por que usar?   • 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.
Exemplo
Exemplo
Meetings for iPad
Paolo Domenico Passeri
• 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)


ATIVIDADE 2   • 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


                                                    • Post-It

                     45 minutos                     • Papel

                                                    • Lápis/Caneta
PROTOTIPOS BAIXA FIDELIDADE e ALTA FIDELIDADE
BAIXA FIDELIDADE                         ALTA FIDELIDADE

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

 detalhes de um design, como:               detalhes de um design
 • Interações da interface com o usuário   • Necessitam mais tempo e
 • Layout e formato do produto              recursos para serem construídos
 • 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
Visão Abstrata   Baixa Fidelidade
Média Fidelidade   Alta Fidelidade
Prototipos
TÉCNICA
          em Papel
•   Mock-ups ou REPRESENTAÇÕES de um design
O que são?
             •   É 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:
                  1.Esquemas feitos a mão
                  2.Fotocópias
                  3.Recortes de pedações de papel
                  4.Uma combinação criativa de qualquer um dos itens acima
Por que usar?
                •   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
Quando usar?

               •   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
•   Exigem MÍNIMOS RECURSOS para serem contruidos
Vantagens
            •   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
Poupar dinheiro usando protótipos
•   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.



                                      Jacob Nielsen
O que pode ser avaliado?

    Usabilidade      Arq. Inform.    Design

•   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
Passos para criar um Protótipo em Papel


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
Quais elementos incluir no 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
Ferramentas necessárias




                                                          •P
                                                     •P     ap
                                                   •C     os el
                                                •T e t an t-i
                                             • F eso tinh
                                         • C ita ura a m
                                      • T ola ades              éd
                                                                   ia
                                         ra      ba      iva
                                            ns      s
                              ção e            pa tã
                   Organiza                      rê o
                                                   nc
                           v idade!                   ias
                    Criati
Exemplos
Ponto-i
Exemplo: demonstrando a interface
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.

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

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



                                         • Papel       • Tesoura


                 2 horas                 • Post-it     • Cola


                                         • Canetinha   • Revistas

Mais conteúdo relacionado

Mais procurados

O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
Sidney Roberto
 
Interface Homem Computador - Aula01- Introdução a IHC
Interface Homem Computador - Aula01- Introdução a IHCInterface Homem Computador - Aula01- Introdução a IHC
Interface Homem Computador - Aula01- Introdução a IHC
CEULJI/ULBRA Centro Universitário Luterano de Ji-Paraná
 
Ihc 01-conceitos básicos
Ihc 01-conceitos básicosIhc 01-conceitos básicos
Ihc 01-conceitos básicos
Eduardo Xavier
 
Scratch cap-1
Scratch cap-1Scratch cap-1
Scratch cap-1
RuiTobiasDBCarvalho
 
Sistemas operacionais
Sistemas operacionaisSistemas operacionais
Sistemas operacionais
vini_campos
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
Wellington Oliveira
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
Diego Moraes
 
Introdução - Arquitetura e Organização de Computadores
Introdução - Arquitetura e Organização de ComputadoresIntrodução - Arquitetura e Organização de Computadores
Introdução - Arquitetura e Organização de Computadores
Wellington Oliveira
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
Monica Mesquita
 
Html
HtmlHtml
Lógica de Programação - Algoritmos
Lógica de Programação - AlgoritmosLógica de Programação - Algoritmos
Lógica de Programação - Algoritmos
Roney Sousa
 
Scrum
ScrumScrum
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
Heraldo Gonçalves Lima Junior
 
Interface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHCInterface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHC
CEULJI/ULBRA Centro Universitário Luterano de Ji-Paraná
 
Algoritmos - capítulo 1
Algoritmos - capítulo 1Algoritmos - capítulo 1
Algoritmos - capítulo 1
Carlos Padilla Severo
 
Avaliação Heurística
Avaliação HeurísticaAvaliação Heurística
Avaliação Heurística
Fernanda Sarmento
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
Alan Vasconcelos
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
Fabiano Damiati
 
Algoritmo aula 01-f
Algoritmo   aula 01-fAlgoritmo   aula 01-f
Algoritmo aula 01-f
Professor Samuel Ribeiro
 
Processos de designer
Processos de designerProcessos de designer
Processos de designer
Luciana de Oliveira
 

Mais procurados (20)

O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
 
Interface Homem Computador - Aula01- Introdução a IHC
Interface Homem Computador - Aula01- Introdução a IHCInterface Homem Computador - Aula01- Introdução a IHC
Interface Homem Computador - Aula01- Introdução a IHC
 
Ihc 01-conceitos básicos
Ihc 01-conceitos básicosIhc 01-conceitos básicos
Ihc 01-conceitos básicos
 
Scratch cap-1
Scratch cap-1Scratch cap-1
Scratch cap-1
 
Sistemas operacionais
Sistemas operacionaisSistemas operacionais
Sistemas operacionais
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
Introdução - Arquitetura e Organização de Computadores
Introdução - Arquitetura e Organização de ComputadoresIntrodução - Arquitetura e Organização de Computadores
Introdução - Arquitetura e Organização de Computadores
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Html
HtmlHtml
Html
 
Lógica de Programação - Algoritmos
Lógica de Programação - AlgoritmosLógica de Programação - Algoritmos
Lógica de Programação - Algoritmos
 
Scrum
ScrumScrum
Scrum
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
Interface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHCInterface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHC
 
Algoritmos - capítulo 1
Algoritmos - capítulo 1Algoritmos - capítulo 1
Algoritmos - capítulo 1
 
Avaliação Heurística
Avaliação HeurísticaAvaliação Heurística
Avaliação Heurística
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
 
Algoritmo aula 01-f
Algoritmo   aula 01-fAlgoritmo   aula 01-f
Algoritmo aula 01-f
 
Processos de designer
Processos de designerProcessos de designer
Processos de designer
 

Destaque

Aula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação IAula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação I
Paolo Passeri
 
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Talita Pagani
 
Aula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação IAula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação I
Paolo Passeri
 
Aula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação IAula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação I
Paolo Passeri
 
Protótipos de papel
Protótipos de papelProtótipos de papel
Protótipos de papel
Robson Santos
 
Trabalho es prototipagem
Trabalho es   prototipagemTrabalho es   prototipagem
Trabalho es prototipagem
Dionei Jr Mariño
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoI
Paolo Passeri
 
Sistema de rotulagem
Sistema de rotulagemSistema de rotulagem
Sistema de rotulagem
Robson Santos
 
Sistemas da Arquitetura da Informação
Sistemas da Arquitetura da InformaçãoSistemas da Arquitetura da Informação
Sistemas da Arquitetura da Informação
Claudio Diniz - Designer Gráfico
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
Ana Luisa Vieira
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
pospipoca
 
Sistemas de organização e rotulação
Sistemas de organização e rotulaçãoSistemas de organização e rotulação
Sistemas de organização e rotulação
Instituto Faber-Ludens
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
Danilo Rosisca Pereira
 
Arquitetura da Informacao
Arquitetura da InformacaoArquitetura da Informacao
Arquitetura da Informacao
carlosremontti
 
Modelagem Aplicações Web com UML
Modelagem Aplicações Web com UMLModelagem Aplicações Web com UML
Modelagem Aplicações Web com UML
Claudio Martins
 
Arquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de InformaçãoArquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de Informação
posgraduacaorj
 

Destaque (16)

Aula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação IAula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação I
 
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
 
Aula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação IAula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação I
 
Aula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação IAula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação I
 
Protótipos de papel
Protótipos de papelProtótipos de papel
Protótipos de papel
 
Trabalho es prototipagem
Trabalho es   prototipagemTrabalho es   prototipagem
Trabalho es prototipagem
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoI
 
Sistema de rotulagem
Sistema de rotulagemSistema de rotulagem
Sistema de rotulagem
 
Sistemas da Arquitetura da Informação
Sistemas da Arquitetura da InformaçãoSistemas da Arquitetura da Informação
Sistemas da Arquitetura da Informação
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 
Sistemas de organização e rotulação
Sistemas de organização e rotulaçãoSistemas de organização e rotulação
Sistemas de organização e rotulação
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
 
Arquitetura da Informacao
Arquitetura da InformacaoArquitetura da Informacao
Arquitetura da Informacao
 
Modelagem Aplicações Web com UML
Modelagem Aplicações Web com UMLModelagem Aplicações Web com UML
Modelagem Aplicações Web com UML
 
Arquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de InformaçãoArquitetura de Informação - Sistemas de Rotulação e de Informação
Arquitetura de Informação - Sistemas de Rotulação e de Informação
 

Semelhante a Aula 2 - Técnicas de Prototipação I

Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
Instituto Faber-Ludens
 
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Instituto Faber-Ludens
 
Design Digital em Plataformas Móveis
Design Digital em Plataformas MóveisDesign Digital em Plataformas Móveis
Design Digital em Plataformas Móveis
Paolo Passeri
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
Instituto Faber-Ludens
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo Moveis
Paolo Passeri
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos Móveis
Paolo Passeri
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
Hanry Marcel Kluk
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
Hanry Marcel Kluk
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
Juliana Gaiba
 
Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
Instituto Faber-Ludens
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
UTFPR
 
Aula 01.ppt
Aula 01.pptAula 01.ppt
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuárioDesign de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
Luiz Henrique Pinho de Sá
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - Antecipação
Wellington Oliveira
 
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de OliveiraInteração Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Wellington Oliveira
 
CRP-5215-0420-2014-08
CRP-5215-0420-2014-08CRP-5215-0420-2014-08
Modelagem Ágil - UaiJug TechDays 2013 - Uberlândia MG
Modelagem Ágil - UaiJug TechDays 2013 - Uberlândia MGModelagem Ágil - UaiJug TechDays 2013 - Uberlândia MG
Modelagem Ágil - UaiJug TechDays 2013 - Uberlândia MG
Neubio Ferreira
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
Luanna Eroles
 
Técnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptxTécnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptx
franmafesoni
 
Curso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem MáquinaCurso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem Máquina
kenethyf
 

Semelhante a Aula 2 - Técnicas de Prototipação I (20)

Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
 
Design Digital em Plataformas Móveis
Design Digital em Plataformas MóveisDesign Digital em Plataformas Móveis
Design Digital em Plataformas Móveis
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo Moveis
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos Móveis
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
 
Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
Aula 01.ppt
Aula 01.pptAula 01.ppt
Aula 01.ppt
 
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuárioDesign de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - Antecipação
 
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de OliveiraInteração Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
 
CRP-5215-0420-2014-08
CRP-5215-0420-2014-08CRP-5215-0420-2014-08
CRP-5215-0420-2014-08
 
Modelagem Ágil - UaiJug TechDays 2013 - Uberlândia MG
Modelagem Ágil - UaiJug TechDays 2013 - Uberlândia MGModelagem Ágil - UaiJug TechDays 2013 - Uberlândia MG
Modelagem Ágil - UaiJug TechDays 2013 - Uberlândia MG
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
 
Técnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptxTécnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptx
 
Curso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem MáquinaCurso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem Máquina
 

Aula 2 - Técnicas de Prototipação I

  • 1. Disciplina Técnicas de Prototipação 1 Prof.: Paolo Domenico Passeri
  • 2. Aula 1 ESTRUTURA Apresentação da Disciplina | Introdução a Prototipação | Sketch | Mind Map | Visual Thinking | Lançamento do Projeto Aula 2 Tipos de Protótipos | Métodos de Interação | Diagrama de Fluxo | Prototipação em Papel Aula 3 Modelagem | Prototipação Física Aula 4 Protótipos Vivos | Desenhando Experiênicias | Storyboarding | Role-playing Aula 5 Business Design | Apresentações em Papel | Frameworks | Infográficos | O “Pitch” Aula 6 Projeto Final da Disciplina
  • 3. Equipes do Projeto 1 2 • Lenin • Kallel • Alysson • Rodrigo A • Anderson • Rafael Giuliano • Vinicius • Gabriela • Ramon • Raphael • Tiago • Paulo B • Jean • Viviane • Pedro • Tiago Pain
  • 4. 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: REVISÃO •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.
  • 5. TÉCNICA D.D.P.
  • 6. Refinando a sua Ideia • 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? “DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”
  • 7. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
  • 8. Meetings for iPad Paolo Domenico Passeri
  • 9. • 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) ATIVIDADE 1 • 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) • Post-It 45 minutos • Papel • Lápis/Caneta
  • 11. 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”
  • 12. 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
  • 13. Manipulação INDIRETA Manipulação DIRETA/Touch/Haptic • É necessário aprender o • Não existe mapeamento pois mapeamento das teclas as teclas são “virtuais” • Deve ser muito consistente • Difícil aprender todos os meios • Não são muito flexíveis de entrada • São muito flexíveis • Joystick Direcional • Toques curtos e longos • Botões Alfa-numéricos • Arrastar • Soft-keys • Deslizar • Rodas • Girar • Pinçar e Expandir Manipulação por GESTOS • Utilizada através de sensores • Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando • “Se movendo”
  • 14. Diagrama de TÉCNICA Fluxo de Interfaces
  • 15. 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 TOOLS
  • 16. Por que usar? • 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.
  • 19. Meetings for iPad Paolo Domenico Passeri
  • 20. • 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) ATIVIDADE 2 • 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 • Post-It 45 minutos • Papel • Lápis/Caneta
  • 21. PROTOTIPOS BAIXA FIDELIDADE e ALTA FIDELIDADE
  • 22. BAIXA FIDELIDADE ALTA FIDELIDADE • Não apoiam a avaliação de todos os • Apoiam a avaliação de todos os detalhes de um design, como: detalhes de um design • Interações da interface com o usuário • Necessitam mais tempo e • Layout e formato do produto recursos para serem construídos • 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
  • 23. Visão Abstrata Baixa Fidelidade
  • 24. Média Fidelidade Alta Fidelidade
  • 26. Mock-ups ou REPRESENTAÇÕES de um design O que são? • É 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: 1.Esquemas feitos a mão 2.Fotocópias 3.Recortes de pedações de papel 4.Uma combinação criativa de qualquer um dos itens acima
  • 27. Por que usar? • 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
  • 28. Quando usar? • 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
  • 29. Exigem MÍNIMOS RECURSOS para serem contruidos Vantagens • 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
  • 30. Poupar dinheiro usando protótipos • 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. Jacob Nielsen
  • 31. O que pode ser avaliado? Usabilidade Arq. Inform. Design • 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
  • 32. Passos para criar um Protótipo em Papel 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
  • 33. Quais elementos incluir no 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
  • 34.
  • 35. Ferramentas necessárias •P •P ap •C os el •T e t an t-i • F eso tinh • C ita ura a m • T ola ades éd ia ra ba iva ns s ção e pa tã Organiza rê o nc v idade! ias Criati
  • 36.
  • 40. 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. ATIVIDADE 3. Simular a interação e filmar o resultado PROJETO 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. • Papel • Tesoura 2 horas • Post-it • Cola • Canetinha • Revistas