SlideShare uma empresa Scribd logo
1 de 29
Baixar para ler offline
“Há mais papel entre um homem e sua
 interface que julga sua vã filosofia”
Introdução

Do que se trata a oficina:
  Uma técnica de prototipagem para Design de interface

Roteiro:
  Introdução à UX
  Protótipos
  Protipagem em papel
  Parte prática / Intervalo
  Teste do que foi feito
  Encerramento
Experiência

Experiencia em geral
Usuário
User Experience
   • Umbrella Topic
UX – Umbrella Topic

Emotion Design
Interface Design
Information Design
Information Architecture
Interaction Design
Usability
User Research
Social Media
…
Design de Interface

O que é (comparação com a Matrix)
Foi o que levou a computação a atingir o maior número
  de usuários possível. Ambiente amigável x código.
Interface = interação entre coisas. Homem x máquina,
   máquina x máquina, etc.
Antes homem interagia com máquina através de
  válvulas, alavancas e etc.
Arquitetura de Informação

Exemplo do submarino, super mercado

Arquitetura de sistemas é dinâmica, pois o conteúdo
  muda, novas tecnologias surgem e os usuários
  desenvolvem novas necessidades.
Vídeo
Usabilidade

Usabilidade vs UX
Aumentar o desempenho da utilização da interface,
  sem desgastar o usuário
Heurísticas – o que são
Testes com usuário (o objetivo é testar a interface, não
  o usuário)
Survey
Prototipagem

Desenhos de Leonardo da Vincci
Idéias e aplicabilidade - Thomas Edison
Processo, avaliação e método Henry Dreyfuss
Por que prototipar?
  Por que protótipos sao representações tangiveis de suas
  idéias,
  Eles devem refletir os requesitos e as decisões necessárias
  Para a melhor desenvolvimento do produto.
Fácil de usar e aprender?
Prototipagem

O uso do protótipo é intuitivo?
Um usuário tradicional completa tarefas com sucesso?
Deixar claras as consequências de tarefas complexas?
A interface é facil de aprender?
Mercado: percepção de valores
                             para consumidor
Custo é um fator muito importante em qualquer
  projeto.
É um produto que vale o investimento?
Os clientes em potencial valorizam a funcionalidade
  oferecida?
Requer custo de treinamento?
Requer atualizações caras e/ou frequentes?
Olhar e sentir

Se é uma experiência de marca, faz o vínculo do
  usuário com o produto?
O conteúdo é compreensível e comunicativo?
Os usuários se divertem durante a utilização?
Processo
1. Verificar               6. Definir os critérios do
requerimentos              design*
2. Desenvolver: tarefas,   7. projetar e construir o
interações e fluxos        protótipo
3. Determinar cenário      8. Revisar o protótipo
                           9. Validar usabilidade do
4. Definir protótipo       protótipo
componentes e
conteúdo                   10. Passar do protótipo
                           para a real
5. Extrair o conteúdo      implementação.
necessário
Processo

6. Definir os critérios do design
  Determinar as telas de maior prioridade
  Separar as partes mais importantes de sua tela
  Fazer layout das telas mais importantes com todos os
    elementos necessários.
  Layout das telas importantes restantes
  Especificar cada tela, todas as interações, fluxos e elementos
    de forma racional.
Tipos de Prototipos

Níveis de fidelidade de cada prototipo
Dois tipos de prototipagem de software:
   Rapid
   “Demorada”
   Porque usar cada uma?
Tipos de Prototipos

Rapid (é a que nós costumamos trabalhar)
  Wireframes
  Storyboard
  Video
  Softwares de prototipagem
  Paper
Vídeo
Paper Prototyping

Versão em papel da interface, manipulada por uma
  pessoa que faz o papel de computador

Os usuários realizam tarefas realistas
Paper Prototyping

O que é e o que não é:
   É paper protoyping a partir do momento em que há papel e
     interação
   Wireframes exlusivamente não são paper prototyping, mas
    podem vir a ser se houver um "computador" que responda
    pela ações
   Storyboards : usados na maioria das vezes para conceituar a
     interface e o fluxograma do projeto. Pode se tornar um
     paper prototyping adicionando informações necessárias
     para dar suporte às tarefas que devem ser realizadas.
Paper Prototyping

Não requer prática
   times multidisciplinares podem trabalhar juntos

Funções envolvidas:
   usuário, facilitador, Computador, e observador
Benefícios

Na equipe ($$$)
  Designing / Rendering / Coding menos gastos com equipe
  Desenvolvimento interativo rápido
  Economia com testes usando protótipos mais caros
  Feitos no estágio inicial – espera-se respostas de interação
Benefícios

No usuário (psicológicos)
   Respostas mais criativas
   Os usuários entendem que a interface não está em estágio
     final e por isso se preocupam com coisas mais
     importantes, como a navegação em si e a realização de
     tarefas – não precisa ter uma estética perfeita ou bem
     acabada
O protótipo pode ser remendado e atualizado durante
  os testes (até mesmo pelo próprio usuário)
Paper prototyping
                                     e usabilidade
Determinar as metas do teste – o que se quer aprender
Quem são os usuários ?
Criar tarefas ao redor do que os usuários irão fazer
Criar os protótipos em papel das peças necessárias
  para a performance das tarefas
Preparar o teste (poupar discussões internas sobre a
  interface)
Paper prototyping
                                    e usabilidade
Conduzir vários testes de usabilidade para refinar o
  protótipo
Estabelecer as prioridades para os problemas
  encontrados
Planejar mudanças adicionais e anotá-las para que
  possam ser feitas depois
Comunicar suas descobertas para os que não estiverem
  diretamente envolvidos
Dicas

Linhas retas não são essenciais para os protótipos (se o
   alinhamento se torna realmente importante a
   interface provavelmente deveria ser feita com ajuda
   de um software).
Nas fases iniciais quando ainda estamos tentando
  entender as necessidades dos usuários ou
  estabelecer a funcionalidade, tamanho pode não ser
  tão crítico como é nas fases posteriores do projeto.
Obrigado, e mantenham contato!

                Diego Coutinho
         diego.coutinho@ltia.fc.unesp.br


              Fernanda Rodrigues
       fernanda.rodrigues@ltia.fc.unesp.br


             Henrique Perticarati
       henrique.perticarati@ltia.fc.unesp.br

Mais conteúdo relacionado

Mais procurados

Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
leopp
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
Erico Fileno
 
Aula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação IAula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação I
Paolo Passeri
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Mourylise Heymer
 

Mais procurados (20)

O uso da prototipagem e fabricação digital no ambiente fab lab
O uso da prototipagem e fabricação digital no ambiente fab labO uso da prototipagem e fabricação digital no ambiente fab lab
O uso da prototipagem e fabricação digital no ambiente fab lab
 
Protótipos de papel
Protótipos de papelProtótipos de papel
Protótipos de papel
 
Design Thinking - Prototipação
Design Thinking  - PrototipaçãoDesign Thinking  - Prototipação
Design Thinking - Prototipação
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
 
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 ...
 
Protótipos em Papel
Protótipos em PapelProtótipos em Papel
Protótipos em Papel
 
Princípios Gerais para o Design de Interfaces
Princípios Gerais para o Design de InterfacesPrincípios Gerais para o Design de Interfaces
Princípios Gerais para o Design de Interfaces
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
 
Aula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação IAula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação I
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interação
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
 
Prototipação
PrototipaçãoPrototipação
Prototipação
 
Design De Interfaces
Design De InterfacesDesign De Interfaces
Design De Interfaces
 
Aula 3
Aula 3Aula 3
Aula 3
 
O retorno do investimento no projeto adequado de interfaces de usuário
O retorno do investimento no projeto adequado de interfaces de usuárioO retorno do investimento no projeto adequado de interfaces de usuário
O retorno do investimento no projeto adequado de interfaces de usuário
 
Análise Heuristica
Análise HeuristicaAnálise Heuristica
Análise Heuristica
 
Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1
 
Usabilidade de Interfaces - Parte 3
Usabilidade de Interfaces - Parte 3Usabilidade de Interfaces - Parte 3
Usabilidade de Interfaces - Parte 3
 

Destaque

Workshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e PrototipaçãoWorkshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e Prototipação
Karine Drumond
 
Di karine e leandro 2011 parte i
Di   karine e leandro 2011 parte iDi   karine e leandro 2011 parte i
Di karine e leandro 2011 parte i
Karine Drumond
 
Importancia da Prototipagem
Importancia da PrototipagemImportancia da Prototipagem
Importancia da Prototipagem
Erico Fileno
 

Destaque (20)

Analise Exploratoria Card Sorting
Analise Exploratoria Card SortingAnalise Exploratoria Card Sorting
Analise Exploratoria Card Sorting
 
Prototipagem Em Papel
Prototipagem Em PapelPrototipagem Em Papel
Prototipagem Em Papel
 
Workshop - Card Sorting
Workshop - Card SortingWorkshop - Card Sorting
Workshop - Card Sorting
 
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
Digital focado nas pessoas: Metodologia e técnicas de pesquisa acessíveis ao ...
 
Workshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e PrototipaçãoWorkshop Mapa de tarefas e Prototipação
Workshop Mapa de tarefas e Prototipação
 
Di karine e leandro 2011 parte i
Di   karine e leandro 2011 parte iDi   karine e leandro 2011 parte i
Di karine e leandro 2011 parte i
 
Guia para Cardsorting
Guia para CardsortingGuia para Cardsorting
Guia para Cardsorting
 
O Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de InteraçãoO Diferencial e as Tendências do Design de Interação
O Diferencial e as Tendências do Design de Interação
 
Prototipagem de Sistemas Digitais - Introdução a VHDL
Prototipagem de Sistemas Digitais - Introdução a VHDLPrototipagem de Sistemas Digitais - Introdução a VHDL
Prototipagem de Sistemas Digitais - Introdução a VHDL
 
Workshop - Personas
Workshop - PersonasWorkshop - Personas
Workshop - Personas
 
Curso Prototipagem de ideias e projetos - Material Resumido
Curso Prototipagem de ideias e projetos - Material ResumidoCurso Prototipagem de ideias e projetos - Material Resumido
Curso Prototipagem de ideias e projetos - Material Resumido
 
Importancia da Prototipagem
Importancia da PrototipagemImportancia da Prototipagem
Importancia da Prototipagem
 
Design de Interação parte II
Design de Interação parte IIDesign de Interação parte II
Design de Interação parte II
 
Técnica de prototipação - Aula 1
Técnica de prototipação - Aula 1Técnica de prototipação - Aula 1
Técnica de prototipação - Aula 1
 
Cardsorting - Palestra (atualizada)
Cardsorting - Palestra (atualizada) Cardsorting - Palestra (atualizada)
Cardsorting - Palestra (atualizada)
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)
 
Prototipação para Design de Interfaces
Prototipação para Design de InterfacesPrototipação para Design de Interfaces
Prototipação para Design de Interfaces
 
Engenharia de software - Prototipo
Engenharia de software - PrototipoEngenharia de software - Prototipo
Engenharia de software - Prototipo
 
O que pode ser Design de Interação?
O que pode ser Design de Interação?O que pode ser Design de Interação?
O que pode ser Design de Interação?
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 

Semelhante a Prototipagem em Papel - Oficina

A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
Flavia Negrao
 
Retorno do Investimento em Usabilidade
Retorno do Investimento em UsabilidadeRetorno do Investimento em Usabilidade
Retorno do Investimento em Usabilidade
Bernardo Mattos
 
Aula8. Projeto de Interface com o usuário
Aula8. Projeto de Interface com o usuárioAula8. Projeto de Interface com o usuário
Aula8. Projeto de Interface com o usuário
Silvia Dotta
 

Semelhante a Prototipagem em Papel - Oficina (20)

Cap. 13 variações no método básico
Cap. 13   variações no método básicoCap. 13   variações no método básico
Cap. 13 variações no método básico
 
Campus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeCampus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidade
 
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
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
 
Ux Presentation
Ux PresentationUx Presentation
Ux Presentation
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
Design de Interação - Capítulo 8 - Design, Prototipação e Construção - Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
 
Otimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User ExperienceOtimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User Experience
 
Prototipagem de Software para Devs
Prototipagem de Software para DevsPrototipagem de Software para Devs
Prototipagem de Software para Devs
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Técnica de prototipação - Aula 2
Técnica de prototipação - Aula 2Técnica de prototipação - Aula 2
Técnica de prototipação - Aula 2
 
Retorno do Investimento em Usabilidade
Retorno do Investimento em UsabilidadeRetorno do Investimento em Usabilidade
Retorno do Investimento em Usabilidade
 
Aula8. Projeto de Interface com o usuário
Aula8. Projeto de Interface com o usuárioAula8. Projeto de Interface com o usuário
Aula8. Projeto de Interface com o usuário
 
Técnicas de Concepção - Livro de Walter Cybis
Técnicas de Concepção - Livro de Walter CybisTécnicas de Concepção - Livro de Walter Cybis
Técnicas de Concepção - Livro de Walter Cybis
 
Do papel a prototipação mobile
Do papel a prototipação mobileDo papel a prototipação mobile
Do papel a prototipação mobile
 
Projeto e interface_com_usuário_resumo
Projeto e interface_com_usuário_resumoProjeto e interface_com_usuário_resumo
Projeto e interface_com_usuário_resumo
 
Usabilidade1
Usabilidade1Usabilidade1
Usabilidade1
 
Trabaho design de interação
Trabaho design de interaçãoTrabaho design de interação
Trabaho design de interação
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 

Prototipagem em Papel - Oficina

  • 1. “Há mais papel entre um homem e sua interface que julga sua vã filosofia”
  • 2.
  • 3. Introdução Do que se trata a oficina: Uma técnica de prototipagem para Design de interface Roteiro: Introdução à UX Protótipos Protipagem em papel Parte prática / Intervalo Teste do que foi feito Encerramento
  • 4. Experiência Experiencia em geral Usuário User Experience • Umbrella Topic
  • 5. UX – Umbrella Topic Emotion Design Interface Design Information Design Information Architecture Interaction Design Usability User Research Social Media …
  • 6. Design de Interface O que é (comparação com a Matrix) Foi o que levou a computação a atingir o maior número de usuários possível. Ambiente amigável x código. Interface = interação entre coisas. Homem x máquina, máquina x máquina, etc. Antes homem interagia com máquina através de válvulas, alavancas e etc.
  • 7. Arquitetura de Informação Exemplo do submarino, super mercado Arquitetura de sistemas é dinâmica, pois o conteúdo muda, novas tecnologias surgem e os usuários desenvolvem novas necessidades.
  • 9. Usabilidade Usabilidade vs UX Aumentar o desempenho da utilização da interface, sem desgastar o usuário Heurísticas – o que são Testes com usuário (o objetivo é testar a interface, não o usuário) Survey
  • 10. Prototipagem Desenhos de Leonardo da Vincci Idéias e aplicabilidade - Thomas Edison Processo, avaliação e método Henry Dreyfuss Por que prototipar? Por que protótipos sao representações tangiveis de suas idéias, Eles devem refletir os requesitos e as decisões necessárias Para a melhor desenvolvimento do produto.
  • 11. Fácil de usar e aprender?
  • 12. Prototipagem O uso do protótipo é intuitivo? Um usuário tradicional completa tarefas com sucesso? Deixar claras as consequências de tarefas complexas? A interface é facil de aprender?
  • 13. Mercado: percepção de valores para consumidor Custo é um fator muito importante em qualquer projeto. É um produto que vale o investimento? Os clientes em potencial valorizam a funcionalidade oferecida? Requer custo de treinamento? Requer atualizações caras e/ou frequentes?
  • 14. Olhar e sentir Se é uma experiência de marca, faz o vínculo do usuário com o produto? O conteúdo é compreensível e comunicativo? Os usuários se divertem durante a utilização?
  • 15. Processo 1. Verificar 6. Definir os critérios do requerimentos design* 2. Desenvolver: tarefas, 7. projetar e construir o interações e fluxos protótipo 3. Determinar cenário 8. Revisar o protótipo 9. Validar usabilidade do 4. Definir protótipo protótipo componentes e conteúdo 10. Passar do protótipo para a real 5. Extrair o conteúdo implementação. necessário
  • 16. Processo 6. Definir os critérios do design Determinar as telas de maior prioridade Separar as partes mais importantes de sua tela Fazer layout das telas mais importantes com todos os elementos necessários. Layout das telas importantes restantes Especificar cada tela, todas as interações, fluxos e elementos de forma racional.
  • 17. Tipos de Prototipos Níveis de fidelidade de cada prototipo Dois tipos de prototipagem de software: Rapid “Demorada” Porque usar cada uma?
  • 18. Tipos de Prototipos Rapid (é a que nós costumamos trabalhar) Wireframes Storyboard Video Softwares de prototipagem Paper
  • 19.
  • 21. Paper Prototyping Versão em papel da interface, manipulada por uma pessoa que faz o papel de computador Os usuários realizam tarefas realistas
  • 22. Paper Prototyping O que é e o que não é: É paper protoyping a partir do momento em que há papel e interação Wireframes exlusivamente não são paper prototyping, mas podem vir a ser se houver um "computador" que responda pela ações Storyboards : usados na maioria das vezes para conceituar a interface e o fluxograma do projeto. Pode se tornar um paper prototyping adicionando informações necessárias para dar suporte às tarefas que devem ser realizadas.
  • 23. Paper Prototyping Não requer prática times multidisciplinares podem trabalhar juntos Funções envolvidas: usuário, facilitador, Computador, e observador
  • 24. Benefícios Na equipe ($$$) Designing / Rendering / Coding menos gastos com equipe Desenvolvimento interativo rápido Economia com testes usando protótipos mais caros Feitos no estágio inicial – espera-se respostas de interação
  • 25. Benefícios No usuário (psicológicos) Respostas mais criativas Os usuários entendem que a interface não está em estágio final e por isso se preocupam com coisas mais importantes, como a navegação em si e a realização de tarefas – não precisa ter uma estética perfeita ou bem acabada O protótipo pode ser remendado e atualizado durante os testes (até mesmo pelo próprio usuário)
  • 26. Paper prototyping e usabilidade Determinar as metas do teste – o que se quer aprender Quem são os usuários ? Criar tarefas ao redor do que os usuários irão fazer Criar os protótipos em papel das peças necessárias para a performance das tarefas Preparar o teste (poupar discussões internas sobre a interface)
  • 27. Paper prototyping e usabilidade Conduzir vários testes de usabilidade para refinar o protótipo Estabelecer as prioridades para os problemas encontrados Planejar mudanças adicionais e anotá-las para que possam ser feitas depois Comunicar suas descobertas para os que não estiverem diretamente envolvidos
  • 28. Dicas Linhas retas não são essenciais para os protótipos (se o alinhamento se torna realmente importante a interface provavelmente deveria ser feita com ajuda de um software). Nas fases iniciais quando ainda estamos tentando entender as necessidades dos usuários ou estabelecer a funcionalidade, tamanho pode não ser tão crítico como é nas fases posteriores do projeto.
  • 29. Obrigado, e mantenham contato! Diego Coutinho diego.coutinho@ltia.fc.unesp.br Fernanda Rodrigues fernanda.rodrigues@ltia.fc.unesp.br Henrique Perticarati henrique.perticarati@ltia.fc.unesp.br

Notas do Editor

  1. Alguem está familiarizado? Tem alguma idéia?
  2. O que é o Ltia? - Laboratório de TI - Auto-sustentável O que é o AIR? - Grupo de UX - design de interface - aprendizado na prática e sob demanda! Piada pronta: premios do air
  3. O que é o mergulho: - Uma técnica de prototipagem para Design de interface - Roteiro: - Introdução à UX - Protótipos - Protipagem em papel - Parte prática / Intervalo - Teste do que foi feito - Encerramento
  4. - Experiencia em geral - Usuario - User Experience - Umbrella Topic
  5. - Perguntar se alguem sabe - O que é (matrix) - Foi o que levou a computação a atingir o maior numero de usuarios possivel. Ambiente amigavel x codigo. - Interface = interação entre coisas. Homem x máquina, máquuina x máquina, etc. - Antes homem interagia com máquina através de válvulas, alavancas e etc. - Exemplos do mundo digital e analógico. - Enfatizar que vamos planezar uma interface digital.
  6. - Exemplo do submarino - Exemplo do super mercado - Video - Retomar o video e explicar a metáfora do universo. - Arquitetura de sistemas pode ser dinamica, pois o conteudo muda, novas tecnologias surgem e os usuarios desenvolvem novas necessidades.
  7. - Usabilidade vs UX - Aumentar o desempenho da utilizacao da interface, sem desgastar o usuario - … - - Heuristicas – o que são - Testes com Usuario (o objetivo é testar a interface, nao o usuario) - Survey
  8. Histórico: Desenhos de Leonardo da Vincci Idéias e aplicabilidade Thomas Edison Processo, avaliação e método Henry Dreyfuss Porque prototipar? Por que protótipos sao representações tangiveis de suas idéias, eles devem refletir os requesitos e as decisões necessárias para a melhor desenvolvimento do produto.
  9. O uso do protótipo é intuitivo? Um usuário tradicional completa tarefas com sucesso? Deixar claras as consequencias de tarefas complexas? A interface é facil de aprender?
  10. É um produto que vale o investimento? Os clientes em potencial valorizam a funcionalidade oferecida? Requer custo de treinamento? Requer atualizações caras e/ou frequentes?
  11. Se é uma experiência de marca, faz o vínculo do usuário com o produto? O conteúdo é compreensível e comunicativo? Os usuários se divertem durante a utilização?
  12. 6. Definir os critérios do design - Determinar as telas de maior prioridade - Separar as partes mais importantes de sua tela - Fazer layout das telas mais importantes com todos os elementos necessários. - Layout das telas importantes restantes - Especificar cada tela, todas as interações, fluxos e elementos de forma racional.
  13. Dois tipos de prototipagem de software: - Rapid - “Demorada” - Porque usar cada uma? Lembrar dos niveis de fidelidade de cada prototipo Rapid (é a que nós costumamos trabalhar) - Wireframes - Storyboard - Video - Softwares de prototipagem - Paper
  14. Wireframes
  15. - Teste de usabilidade - tarefas realistas - versão em papel da interface (manipulada por uma pessoa que faz o papel de computador, e que não explica como a interface funciona) O que é e o que não: - paper protoyping a partir do momento em q há papel e interação - wireframes exlusivamente não são paper prototyping, mas podem vir a ser se houver um "computador" q responda pela ações - storyboards : usados na maioria das vezes para conceituar a interface e o fluxograma do projeto. Pode se tornar um paper prototyping adicionando informações necessárias para dar suporte às tarefas que devem ser realizadas. - Não requer prática - times multidisciplinares podem trabalhar juntos Funções envolvidas: usuário, facilitador, Computador, e observador
  16. Na equipe ($$$) Designing / Rendering / Coding – sem gastos = menos gastos com equipe Desenvolvimento interativo rápido Economia com testes usando protótipos mais caros Uma vez q são feitos no estágio inicial, só precisa-se ter uma resposta (rápida) de como o usuário vai se comportar com o No usuário (psicológicos) programa/site/etc Respostas mais criativas Os usuários entendem q a interface não está em estágio final e por isso se preocupam com coisas mais importantes, como a navegação em si e a realização de tarefas – não precisa ter uma estética perfeita ou bem acabada O protótipo pode ser remendado e atualizado durante os testes (até mesmo pelo próprio usuário)
  17. Determinar as metas do teste – o que se quer aprender Quem são os usuários ? Criar tarefas ao redor do que os usuários irão fazer Criar os protótipos em papel das peças necessárias para a performance das tarefas Preparar o teste (poupar discussões internas sobre a interface) Conduzir vários testes de usabilidade para refinar o protótipo Estabelecer as prioridades para os problemas encontrados Planejar mudanças adicionais e anotá-las para que possam ser feitas depois Comunicar suas descobertas para os que não estiverem diretamente envolvidos
  18. Dicas Funções específicas Linhas retas não são essenciais para os protótipos (se o alinhamento se torna realmente importante a interface provavelmente deveria ser feita com ajuda de um software). Nas fases iniciais quando ainda estamos tentando entender as necessidades dos usuários ou estabelecer a funcionalidade, tamanho pode não ser tão crítico como é nas fases posteriores do projeto.