Planejamento de um wireframe orientado para aplicativos

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.


Ideal artístico x Ideal de engenharia
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.


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


A good designer may not have all the answers,
but he knows which questions to ask.

Rudy Duke


Apresentação
• 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
• 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
• 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).


http://www.youtube.com/watch?v=XlcDtCX-GwE


Brainstormizando

25 minutos


Brainstormizando

50 ideias


Cuidado com o brainstorming


O opinião do seu cliente tem
A MESMA IMPORTÂNCIA
que qualquer outro empregado


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


Se eu perguntasse para os meus clientes
o que eles desejavam, eles diriam:
um cavalo mais veloz
Henry Ford


As pessoas não sabem o que querem até
você mostrar a elas
Steve Jobs


Postura reativa x Postura proativa

Horácio Soares Neto


Centro de Informações de Novos negócios


CASE: Centro de Informações de Novos negócios


Goal first
Then Behavior

salão Campo
Society
Kart
Paintball Futebol

Voleibol JogadaCerta Tênis

Basquetebol Videogame
Cartas


http://www.youtube.com/watch?v=NugRZGDbPFU


ideia

vendas sketch

produção


Here’s the world’s worst idea for a movie:
Titanic. It did okay at the box office

Scott Adams


Sketchiando...

10 minutos


Sketchiando...

boxing
glove


Levantamento de requisitos

Imp. para o Imp. para o Viabilidade
Requisito Descrição Comentários
negócio usuário Técnica

Usuários devem colocar
login/ senha para acessar a
Formulário plataforma. No caso de não
High High Low
de Login lembrarem a senha, deve
haver opção para reset
password por email.


Priorização de requisitos
Alta prioridade (HP)

Média prioridade (MP)

Baixa prioridade (LP)


Se você não conseguiu identificar o CORE
do seu aplicativo, algo está errado.
Experimente o conceito “mobile first”


Fluxo da aplicação
• 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

static dynamic future cluster

Box and arrows


SKETCH IDEIA
WIREFRAME USABILIDADE


Comece pelo seu CORE (epicenter design).


Foco na estrutura


Foco na interação


Saiba como utilizar as heurísticas.
Se preferir crie suas próprias Heurísticas


http://jordisan.net/blog/2011/psychological-usability-heuristics


3 simple
ux questions
3 simples perguntas de ux


Can I use it?
Consigo usá-lo?


Should I use it?
Devo usá-lo?


Do I want to use it?

Desejo usá-lo?


Não se esqueça da Memória


Eae?


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


Teste o seu wireframe


Wireframe de
compras coletivas


>50%
já se inscreveram
42%
já realizaram
compras

300% Aumento de
impulsivos


Wireframe de compra coletiva SEXY


Blank Slate


Que tal uma página
de erro assim?


Não importa o seu negócio,
usuário, budget, ou tempo


nunca se esqueça


Planejamento de um wireframe orientado para aplicativos

Mais conteúdo relacionado

Mais de Bunee.io - Hiring with Intelligence

Planejamento de um wireframe orientado para aplicativos