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

Research


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


25 Brainstormizando

minutos


50 Brainstormizando

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

Personas


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

Concept


JogadaCerta

Futebol Paintball Kart

Voleibol

Basquetebol Cartas

Videogame

Tênis

salão Campo Society


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


ideia

sketch

produção

vendas


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

Scott Adams


10 Sketchiando...

minutos


boxing Sketchiando...

glove

Requirements

Levantamento de requisitos


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


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


Box and arrows

static dynamic future cluster

wireframes


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


Sexy projects


Wireframe de compras coletivas

impulsivos


>50% já se inscreveram

42% já realizaram

compras

300% Aumento de


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


Seja Sexy @bernarddeluna