Prototipagem em Papel - Oficina

1,465 views
1,364 views

Published on

*Para ler asobservações, faça download do arquivo PPT.

“Há mais papel entre um homem e sua interface que julga sua vã filosofia”

É a partir desse mote que é desenvolvida a oficina de prototipagem em papel do Ltia.

Direcionada para iniciantes no universo da Experiência de Usuário, a oficina explana brevemente por diversas de suas áreas relacionadas, para então explicar a prototipagem em papel.

O vídeo produzido para ilustrar a oficina foi elogiado pelo próprio Jakob Nielsen!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,465
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Alguem está familiarizado? Tem alguma idéia?
  • 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
  • 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
  • - Experiencia em geral - Usuario - User Experience - Umbrella Topic
  • - 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.
  • - 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.
  • - 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
  • 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.
  • 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?
  • É 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?
  • 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?
  • 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.
  • 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
  • Wireframes
  • - 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
  • 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)
  • 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
  • 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.
  • Prototipagem em Papel - Oficina

    1. 1. “ Há mais papel entre um homem e sua interface que julga sua vã filosofia ”
    2. 3. Introdução
    3. 4. Experiência
    4. 5. UX – Umbrella Topic <ul><li>Emotion Design </li></ul><ul><li>Interface Design </li></ul><ul><li>Information Design </li></ul><ul><li>Information Architecture </li></ul><ul><li>Interaction Design </li></ul><ul><li>Usability </li></ul><ul><li>User Research </li></ul><ul><li>Social Media </li></ul><ul><li>… </li></ul>
    5. 6. Design de Interface
    6. 7. Arquitetura de Informação
    7. 8. Usabilidade
    8. 9. Prototipagem
    9. 10. Fácil de usar e aprender?
    10. 11. Mercado: percepção de valores para consumidor Custo é um fator muito importante em qualquer projeto.
    11. 12. Olhar e sentir
    12. 13. Processo <ul><li>1. Verificar requerimentos </li></ul><ul><li>2. Desenvolver: tarefas, interações e fluxos </li></ul><ul><li>3. Determinar cenário </li></ul><ul><li>4. Definir protótipo componentes e conteúdo </li></ul><ul><li>5. Extrair o conteúdo necessário </li></ul><ul><li>6. Definir os critérios do design </li></ul><ul><li>7. projetar e construir o protótipo </li></ul><ul><li>8. Revisar o protótipo </li></ul><ul><li>9. Validar usabilidade do protótipo </li></ul><ul><li>10. Passar do protótipo para a real implementação. </li></ul>
    13. 14. Tipos de Prototipos
    14. 16. Paper Prototyping
    15. 17. Benefícios
    16. 18. Paper prototyping e usabilidade
    17. 19. Vídeo
    18. 20. Como fazer ?
    19. 21. Obrigado, e mantenham contato! <ul><li>Diego Coutinho </li></ul><ul><li>[email_address] </li></ul><ul><li>Fernanda Rodrigues </li></ul><ul><li>[email_address] </li></ul>Henrique Perticarati [email_address]

    ×