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

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...

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

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

planejamento de um wireframe orientado para aplicativos

Design

lottus7 aplicativos

unidade 01: blender -...

tecnicas orientado a objetos

aplicativos afip

aplicativos mobile

analisis orientado a objeto

aplicativos computacionais

desenvolvimento orientado a testes

arquitetura orientado a serviços

[ aplicativos ] crm

java orientado a objetos

arquitetura de informação sem wireframe

aplicativos webonesystem

apresentação aplicativos

treino orientado a tarefa

paradigma orientado a objeto

php orientado a objetos

c++ orientado a objetos

especificação - wireframe

tic aplicativos