planejamento de um wireframe orientado para aplicativos
Post on 29-Jun-2015
7.709 Views
Preview:
DESCRIPTION
TRANSCRIPT
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Bernard De Luna Publicitário, 27 anos Carioca Especialista em Design Funcional e Front-end Coordenador Front-end www.bernarddeluna.com www.bernarddeluna.com/blog @bernarddeluna
Metódico como designer?
www.bernarddeluna.com @bernarddeluna
Pela última vez, arte, estética,
desenho, ilustração não são a
mesma coisa que design.
www.bernarddeluna.com @bernarddeluna
Ideal artístico x Ideal de engenharia
www.bernarddeluna.com @bernarddeluna
O ideal artístico de expressar-se e o ideal da engenharia de resolver um problema para o cliente. Este livro coloca-se firmemente ao lado da engenharia. Embora eu reconheça que haja necessidade de arte, alegria e diversão na Web, acredito que o principal objetivo da maioria dos projetos da web seja facilitar aos clientes o desempenho de tarefas úteis
Jakob Nielsen - Designing web usability: The practice of simplicity.
www.bernarddeluna.com @bernarddeluna
O absurdo de planejar o tiro municiando a arma, sem antes identificar o alvo. Até porque
o alvo é que determina a escolha da arma.
O tiro e o alvo – Horácio Soares Neto
Research
www.bernarddeluna.com @bernarddeluna
A good designer may not have all the answers, but he knows which questions to ask.
Rudy Duke
Apresentação
www.bernarddeluna.com @bernarddeluna
• Peça para ser apresentado ao projeto, deixe seu cliente contar tudo sobre a ideia do aplicativo.
• O aplicativo precisa ser documentada por escrito. • Não permita que sua reunião demore mais de 40
minutos.
Identifique a arena
www.bernarddeluna.com @bernarddeluna
• Pesquise concorrentes diretos e indiretos • Documente o aplicativo dos concorrentes com base na
documentação do seu cliente • Identifique os pontos de seus clientes (positivos e
negativos)
Entrevistas
www.bernarddeluna.com @bernarddeluna
• Após ler a documentação, prepare-se para criar uma pauta para entrevistas
• Defina os “Stakeholders” e entreviste-os. • Entreviste usuários (internos ou não).
www.bernarddeluna.com @bernarddeluna
http://www.youtube.com/watch?v=XlcDtCX-GwE
www.bernarddeluna.com @bernarddeluna
25 Brainstormizando
minutos
www.bernarddeluna.com @bernarddeluna
50 Brainstormizando
ideias
Cuidado com o brainstorming
www.bernarddeluna.com @bernarddeluna
O opinião do seu cliente tem
A MESMA IMPORTÂNCIA
que qualquer outro empregado
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Em uma cultura inovativa, todo mundo se sente capaz de falar e vão falar muito. Em uma cultura não-inovativa, o chefe fala o tempo todo.
David Kelley, IDEO
Personas
www.bernarddeluna.com @bernarddeluna
Se eu perguntasse para os meus clientes o que eles desejavam, eles diriam: um cavalo mais veloz
Henry Ford
www.bernarddeluna.com @bernarddeluna
As pessoas não sabem o que querem até você mostrar a elas
Steve Jobs
Postura reativa x Postura proativa
www.bernarddeluna.com @bernarddeluna
Horácio Soares Neto
Centro de Informações de Novos negócios
www.bernarddeluna.com @bernarddeluna
CASE: Centro de Informações de Novos negócios
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Goal first Then Behavior
Concept
www.bernarddeluna.com @bernarddeluna
JogadaCerta
Futebol Paintball Kart
Voleibol
Basquetebol Cartas
Videogame
Tênis
salão Campo Society
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
http://www.youtube.com/watch?v=NugRZGDbPFU
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
ideia
sketch
produção
vendas
www.bernarddeluna.com @bernarddeluna
Here’s the world’s worst idea for a movie: Titanic. It did okay at the box office
Scott Adams
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
10 Sketchiando...
minutos
www.bernarddeluna.com @bernarddeluna
boxing Sketchiando...
glove
Requirements
www.bernarddeluna.com @bernarddeluna
Levantamento de requisitos
www.bernarddeluna.com @bernarddeluna
Requisito Descrição Imp. para o
negócio Imp. para o
usuário Viabilidade
Técnica Comentários
Formulário de Login
Usuários devem colocar login/ senha para acessar a plataforma. No caso de não lembrarem a senha, deve haver opção para reset password por email.
High High Low
Priorização de requisitos
www.bernarddeluna.com @bernarddeluna
Alta prioridade (HP) Média prioridade (MP) Baixa prioridade (LP)
www.bernarddeluna.com @bernarddeluna
Se você não conseguiu identificar o CORE do seu aplicativo, algo está errado.
Experimente o conceito “mobile first”
Fluxo da aplicação
www.bernarddeluna.com @bernarddeluna
• Validar cenários e personas • Destacar “user goals” • Identificar buracos • Mapear seu aplicativo • Documentar interações • Reconhecer o coração da sua aplicação
Facilitando o fluxo
www.bernarddeluna.com @bernarddeluna
Box and arrows
static dynamic future cluster
wireframes
www.bernarddeluna.com @bernarddeluna
SKETCH IDEIA
WIREFRAME USABILIDADE
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Comece pelo seu CORE (epicenter design).
www.bernarddeluna.com @bernarddeluna
Foco na estrutura
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Foco na interação
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Saiba como utilizar as heurísticas. Se preferir crie suas próprias Heurísticas
www.bernarddeluna.com @bernarddeluna
http://jordisan.net/blog/2011/psychological-usability-heuristics
3 simple ux questions
www.bernarddeluna.com @bernarddeluna
3 simples perguntas de ux
Can I use it?
www.bernarddeluna.com @bernarddeluna
Consigo usá-lo?
Should I use it?
www.bernarddeluna.com @bernarddeluna
Devo usá-lo?
Do I want to use it?
www.bernarddeluna.com @bernarddeluna
Desejo usá-lo?
Não se esqueça da Memória
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Eae?
www.bernarddeluna.com @bernarddeluna
1. Ball – Bola 2. Eraser – Borracha 3. Rat – Rato 4. Notebook 5. Anchor – Âncora 6. Rope – Corda 7. Dog – Cão 8. Dice – Dado 9. Elephant – Elefante 10. Lipstick - Batom
www.bernarddeluna.com @bernarddeluna
1. Ball – Bola 2. Eraser – Borracha 3. Rat – Rato 4. Notebook 5. Anchor – Âncora 6. Rope – Corda 7. Dog – Cão 8. Dice – Dado 9. Elephant – Elefante 10. Lipstick - Batom
Ícones são traiçoeiros
www.bernarddeluna.com @bernarddeluna
Teste o seu wireframe
www.bernarddeluna.com @bernarddeluna
Sexy projects
www.bernarddeluna.com @bernarddeluna
Wireframe de compras coletivas
impulsivos
www.bernarddeluna.com @bernarddeluna
>50% já se inscreveram
42% já realizaram
compras
300% Aumento de
www.bernarddeluna.com @bernarddeluna
Wireframe de compra coletiva SEXY
www.bernarddeluna.com @bernarddeluna
Blank Slate
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Que tal uma página
de erro assim?
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
www.bernarddeluna.com @bernarddeluna
Não importa o seu negócio,
usuário, budget, ou tempo
www.bernarddeluna.com @bernarddeluna
nunca se esqueça
www.bernarddeluna.com @bernarddeluna
Seja Sexy @bernarddeluna
top related