“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úmerode 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údomuda, novas tecnologias surgem e os usuáriosdesenvolvem 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ãoo 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áriasPara 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. Verificarrequerimentos2. Desenvolver: tarefas, interações e fluxos3. Determinar cenário4. Definir protótipocomponentes e conteúdo5. Extrair o conteúdonecessário

6. Definir os critérios do design*

7. projetar e construir o protótipo8. Revisar o protótipo9. Validar usabilidade do protótipo10. Passar do protótipopara a real implementação.

Processo

6. Definir os critérios do designDeterminar as telas de maior prioridade

Separar as partes mais importantes de sua tela

Fazer layout das telas mais importantes com todos oselementos necessários.

Layout das telas importantes restantes

Especificar cada tela, todas as interações, fluxos e elementosde 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)WireframesStoryboardVideoSoftwares de prototipagemPaper

Vídeo

Paper Prototyping

Versão em papel da interface, manipulada por umapessoa 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áticatimes multidisciplinares podem trabalhar juntos

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

Benefícios

Na equipe ($$$)Designing / Rendering / Coding menos gastos com equipeDesenvolvimento interativo rápidoEconomia com testes usando protótipos mais carosFeitos no estágio inicial – espera-se respostas de interação

Benefícios

No usuário (psicológicos)Respostas mais criativasOs 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áriaspara 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 problemasencontrados

Planejar mudanças adicionais e anotá-las para quepossam ser feitas depois

Comunicar suas descobertas para os que não estiveremdiretamente 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 ajudade 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