Planejamento de um wireframe orientado para aplicativos

Bernard De Luna - www.bernarddeluna.com - @bernarddeluna

Bernard De LunaPublicitário, 27 anosCariocaEspecialista em Design Funcional e Front-endCoordenador Front-endwww.bernarddeluna.comwww.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 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 Netowww.bernarddeluna.com @bernarddeluna

Research

A good designer may not have all the answers, but he knows which questions to ask. Rudy Dukewww.bernarddeluna.com @bernarddeluna

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.www.bernarddeluna.com @bernarddeluna

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)www.bernarddeluna.com @bernarddeluna

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).www.bernarddeluna.com @bernarddeluna

http://www.youtube.com/watch?v=XlcDtCX-GwEwww.bernarddeluna.com @bernarddeluna

Brainstormizando 25 minutoswww.bernarddeluna.com @bernarddeluna

Brainstormizando 50 ideiaswww.bernarddeluna.com @bernarddeluna

Cuidado com o brainstormingwww.bernarddeluna.com @bernarddeluna

O opinião do seu cliente tem A MESMA IMPORTÂNCIA que qualquer outro empregadowww.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, IDEOwww.bernarddeluna.com @bernarddeluna

Personas

Se eu perguntasse para os meus clientes o que eles desejavam, eles diriam: um cavalo mais veloz Henry Fordwww.bernarddeluna.com @bernarddeluna

As pessoas não sabem o que querem até você mostrar a elas Steve Jobswww.bernarddeluna.com @bernarddeluna

Postura reativa x Postura proativa Horácio Soares Netowww.bernarddeluna.com @bernarddeluna

Centro de Informações de Novos negócioswww.bernarddeluna.com @bernarddeluna

CASE: Centro de Informações de Novos negócioswww.bernarddeluna.com @bernarddeluna

www.bernarddeluna.com @bernarddeluna

Goal first Then Behaviorwww.bernarddeluna.com @bernarddeluna

Concept

salão Campo Society Kart Paintball Futebol Voleibol JogadaCerta Tênis Basquetebol Videogame Cartaswww.bernarddeluna.com @bernarddeluna

http://www.youtube.com/watch?v=NugRZGDbPFUwww.bernarddeluna.com @bernarddeluna

ideia vendas sketch produçãowww.bernarddeluna.com @bernarddeluna

Here’s the world’s worst idea for a movie: Titanic. It did okay at the box office Scott Adamswww.bernarddeluna.com @bernarddeluna

Sketchiando... 10 minutoswww.bernarddeluna.com @bernarddeluna

Sketchiando... boxing glovewww.bernarddeluna.com @bernarddeluna

Requirements

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.www.bernarddeluna.com @bernarddeluna

Priorização de requisitos 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”www.bernarddeluna.com @bernarddeluna

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çãowww.bernarddeluna.com @bernarddeluna

Facilitando o fluxo static dynamic future cluster Box and arrowswww.bernarddeluna.com @bernarddeluna

wireframes

SKETCH IDEIA WIREFRAME USABILIDADEwww.bernarddeluna.com @bernarddeluna

Comece pelo seu CORE (epicenter design).www.bernarddeluna.com @bernarddeluna

Foco na estruturawww.bernarddeluna.com @bernarddeluna

Foco na interaçãowww.bernarddeluna.com @bernarddeluna

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

http://jordisan.net/blog/2011/psychological-usability-heuristicswww.bernarddeluna.com @bernarddeluna

3 simple ux questions 3 simples perguntas de uxwww.bernarddeluna.com @bernarddeluna

Can I use it? Consigo usá-lo?www.bernarddeluna.com @bernarddeluna

Should I use it? Devo usá-lo?www.bernarddeluna.com @bernarddeluna

Do I want to use it? Desejo usá-lo?www.bernarddeluna.com @bernarddeluna

Não se esqueça da Memóriawww.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 - Batomwww.bernarddeluna.com @bernarddeluna

Ícones são traiçoeiroswww.bernarddeluna.com @bernarddeluna

Teste o seu wireframewww.bernarddeluna.com @bernarddeluna

Sexy projects

Wireframe de compras coletivaswww.bernarddeluna.com @bernarddeluna

>50% já se inscreveram 42% já realizaram compras 300% Aumento de impulsivoswww.bernarddeluna.com @bernarddeluna

Wireframe de compra coletiva SEXYwww.bernarddeluna.com @bernarddeluna

Blank Slatewww.bernarddeluna.com @bernarddeluna

Que tal uma página de erro assim?www.bernarddeluna.com @bernarddeluna

Não importa o seu negócio, usuário, budget, ou tempowww.bernarddeluna.com @bernarddeluna

nunca se esqueçawww.bernarddeluna.com @bernarddeluna

Seja Sexy@bernarddeluna

http://www.agni.art.br	573
http://bernarddeluna.com	508
http://blog.thiagotoledo.com	83
http://twistters.net	64
http://us-w1.rockmelt.com	7
http://feeds.feedburner.com	7
http://www.uxdesign.blog.br	6
http://a0.twimg.com	3
http://delicious.com	2
http://paper.li	1
http://www.delicious.com	1

Planejamento de um wireframe orientado para aplicativos

by Bernard De Luna on Oct 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 1,255

Statistics

Planejamento de um wireframe orientado para aplicativos — Presentation Transcript