kluk design dispositivos moveis ufpb 20131025

89
Mini Curso Design para Dispositivos Móveis

Upload: hanry-marcel-kluk

Post on 29-Jun-2015

450 views

Category:

Documents


9 download

TRANSCRIPT

Page 1: Kluk design dispositivos moveis ufpb 20131025

Mini Curso Design para Dispositivos Móveis

Page 2: Kluk design dispositivos moveis ufpb 20131025

TÓPICOS  !• Entendendo Dispositivos Móveis e o Processo de Desenvolvimento de UI’s • Definindo as Funcionalidades do seu Aplicativo• Por que um “bom” Design é um diferencial? • A apresentação começa com o Ícone • Padrões de Interação e a Importância do Fluxo de uma Interface  • Guias (HIG’s) e a Interface de Usuário • Prototipação Rápida• Identidade Visual, criando seu próprio “Look and Feel!”

Page 3: Kluk design dispositivos moveis ufpb 20131025

EU!

Hanry Marcel Kluk !• Curioso por natureza! • Co-fundador do da Iniciativa

Startup Curitiba • Co-fundador da Snowman

Labs • Designer, ilustrador, fotógrafo

amador, cozinheiro...

Page 4: Kluk design dispositivos moveis ufpb 20131025

...e vocês?

Page 5: Kluk design dispositivos moveis ufpb 20131025

O CURSO

40% Conceitos

60% Atividades

Page 6: Kluk design dispositivos moveis ufpb 20131025

Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...

Page 7: Kluk design dispositivos moveis ufpb 20131025

...E O QUE ELES BUSCAM!

• Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência”

Page 8: Kluk design dispositivos moveis ufpb 20131025

ENTENDA AS LIMITAÇÕES

Usuários não têm um PONTEIRO nos dedos

Page 9: Kluk design dispositivos moveis ufpb 20131025

ENTENDA AS LIMITAÇÕES  

Nem são águias com super VISÃO

Page 10: Kluk design dispositivos moveis ufpb 20131025

ENTENDA AS LIMITAÇÕES  

Geralmente interagem com  um aplicativo POR VEZ.

Page 11: Kluk design dispositivos moveis ufpb 20131025

VOCÊ TEM QUE SER O USUÁRIO!Aprenda TUDO sobre o dispositivo • como ele funciona? • é pesado ou leve? • é confortável de segurar? • como acesso suas funções? • quais botões ele possui? • quais aplicativos são “legais”? • quais não são?

Page 12: Kluk design dispositivos moveis ufpb 20131025

NÃO É UM COMPUTADOR TRADICIONAL!

Page 13: Kluk design dispositivos moveis ufpb 20131025

A INTERFACE TEM QUE SER REPENSADA

Ctrl+C, Ctrl+V NÃO FUNCIONA

Page 14: Kluk design dispositivos moveis ufpb 20131025

...PARA ATENDER AO DISPOSITIVO MÓVEL

Somente os elementos CHAVE se mantém!

Page 15: Kluk design dispositivos moveis ufpb 20131025

Manutenção

PROCESSO DE DESENVOLVIMENTO

Conceito Design Desenvolvimento

Distribuição Marketing

Page 16: Kluk design dispositivos moveis ufpb 20131025

DESENVOLVIMENTO > DESIGN =

ATIVIDADE X TEMPO

Debug

Teste

Design

Desenvolvimento

Page 17: Kluk design dispositivos moveis ufpb 20131025

DESENVOLVIMENTO > DESIGN =

ATIVIDADE X TEMPO

Debug

Teste

Design

Desenvolvimento

Page 18: Kluk design dispositivos moveis ufpb 20131025

COMO VAMOS CHEGAR LÁ?

Ideia (Refinar)

Processo (Executar)

Interface (Desenhar)

Page 19: Kluk design dispositivos moveis ufpb 20131025

Eficiência para Entreter O principal foco de um aplicativo de entretenimento sério, é permitir que o usuário consuma mídia. Usuários esperam uma interface com customizações porém fácil de navegar. A interface é o conteúdo.

Eficiência para Entreter  Um app de produtividade, como uma Ferramenta Séria, cumpre uma tarefa bem específica. Seu aplicativo deve rapidamente e de maneira fácil, realizar o que 80% das pessoas vão fazer com ele. Vá direto ao ponto.

Jogar e se Divertir Tipo de aplicativo que vai entreter o usuário ou jogos. Seu foco deve ser somente um, dar um momento de diversão. Vá direto ao ponto e não use muito hierarquia. A história, experiência e jogabilidade são cruciais.

Elementos inovadores resolvendo problemas Uma Ferramenta Divertida, têm o foco em resolver ou alcançar algo porém incentiva a exploração entregando informações relevantes.

X-Y: TIPO DE APLICATIVO

Eixo X: Uso Eixo Y: ConteúdoDivertido

Sério

Entre

teni

men

to

Ferra

men

ta

Page 20: Kluk design dispositivos moveis ufpb 20131025

Eixo X: Uso Eixo Y: ConteúdoDivertido

Sério

Entre

teni

men

to

Ferra

men

ta

X-Y: TIPO DE APLICATIVO

Page 21: Kluk design dispositivos moveis ufpb 20131025

Quem é o seu PÚBLICO ALVO? • Pessoas de negócios ou usuários finais • Jovens ou idosos • Homens ou Mulheres • Vão usar diariamente ou ocasionalmente

Quais são as principais FUNCIONALIDADES? • Consumir ou produzir conteúdo?  • É necessário já possuir algum serviço?  • O que realmente o usuário vai querer?

“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”

REFINANDO A SUA IDÉIA

Page 22: Kluk design dispositivos moveis ufpb 20131025

Resuma a ideia em uma frase: <<Diferenciação>> <<Solução>> para <<Público>> !Exemplo: !<<Uma maneira rápida e fácil>> para <<criação de ATA’s de reunião>> para <<profissionais de todas as áreas>>

DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO

Page 23: Kluk design dispositivos moveis ufpb 20131025

• ESCOLHAM uma categoria de aplicativo dos Post-It`s • DEFINAM quem será o público alvo e o tipo do seu aplicativo

(eixo x-y) • LEVANTEM todas as funcionalidades que consigam pensar

(brainstorm) • CORTEM funcionalidades que não fazem parte do core (menos

importantes) • JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES criando a

declaração

EXERCÍCIO: CRIANDO A SUA DECLARAÇÃO

30 MIN.Post-it Papel Lápis/caneta

Page 24: Kluk design dispositivos moveis ufpb 20131025

DESIGN COMO UM DIFERENCIAL

Page 25: Kluk design dispositivos moveis ufpb 20131025

PORQUE TERDESIGN?!

• Maior apelo aos usuários • Mais atenção da mídia • Diferencial vs. Concorrência • Da vontade de “voltar” • Incentiva a exploração • VENDE MAIS!

Page 26: Kluk design dispositivos moveis ufpb 20131025

• Aplicativo para conversão de unidades

• Preço: U$0.99 • Lançado em Agosto de 2009 • Unidades vendidas: 197,424 • Faturamento bruto: $195,450 • Faturamento liquido: $137,065

Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!

ESTUDO DE CASO: CONVERT

Page 27: Kluk design dispositivos moveis ufpb 20131025

• É a porta de ENTRADA de seu aplicativo • Se bem desenhado pode REPRESENTAR seu produto • “Eu nem entro se o ICONE for RUIM”! • Apresenta FUNÇÕES de maneira VISUAL para o usuário

A IMPORTÂNCIA DOS ÍCONES

Page 28: Kluk design dispositivos moveis ufpb 20131025

ANTES DE ENTRAR VOCÊ JULGA

Page 29: Kluk design dispositivos moveis ufpb 20131025

• Foco em uma forma padrão, não em diversos elementos que deixam o icone “sujo”. • Escolha cores com cuidado, use cores da interface. • Evite usar fotos e muito texto. • Se usar uma marca, deixe somente o necessário para dar representatividade.

COMO?

Page 30: Kluk design dispositivos moveis ufpb 20131025

• LEIAM novamente a “Declaração de Definição do Produto” (DDP)

• BUSQUEM elementos que possam inspirar o icone, considerando a DDP

• DESENHEM 5 conceitos de icone • SELECIONEM 1 conceito • DESENHEM o icone “final”

EXERCÍCIO: DESENHANDO UM ÍCONE

30 MIN.Papel Lápis/caneta Cores

Page 31: Kluk design dispositivos moveis ufpb 20131025

• iOS Toolbar Icons • Glyphish’/> • iOS Toolbar Icon Set • iOS Toolbar Icons 2 • 30 Free Vector Icons • iconSweets • The Android Developer

Common Icon Set II • 30 Free Android Menu Icons • Free Android 2.x Monster

Icons

FONTES DE ÍCONES

Page 32: Kluk design dispositivos moveis ufpb 20131025

INTERAGINDO COM DISPOSITIVOS MÓVEIS

Page 33: Kluk design dispositivos moveis ufpb 20131025

• Lembre-se que existem diferentes meios de interagir com o dispositivo

• Antes de desenhar a UI, é necessário avaliar qual destes estão disponíveis e serão utilizados

• Analise se não existe outra maneira de usuários entrarem com “dados”

• Seja criativo e não se limite ao “tradicional”

MÉTODOS DE INTERAÇÃO

Page 34: Kluk design dispositivos moveis ufpb 20131025

EXEMPLO DE APLICATIVO

Anotação Localização Lembrete

Page 35: Kluk design dispositivos moveis ufpb 20131025

• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces para dispositivos móveis  

• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers  

• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um aplicativo

PADRÕES DE INTERAÇÃO

Page 36: Kluk design dispositivos moveis ufpb 20131025

Manipulação INDIRETA

• É necessário aprender o mapeamento das teclas

• Deve ser muito consistente • Não são muito flexíveis

Joystick Direcional • Botões Alfa-numéricos • Soft-keys

Rodas Manipulação por GESTOS

• Utilizada através de sensores  • Através do dispositivo por completo  • Inclinando • Asoprando • Chacoalhando

PADRÕES DE INTERAÇÃO

Page 37: Kluk design dispositivos moveis ufpb 20131025

Manipulação DIRETA/Touch/Haptic

• Não existe mapeamento pois as teclas são “virtuais”  • Difícil aprender todos os meios de entrada  • São muito flexíveis  • Toques curtos e longos  • Arrastar• Deslizar• Girar  • Pinçar e Expandir  

PADRÕES DE INTERAÇÃO

Page 38: Kluk design dispositivos moveis ufpb 20131025

Botões ou Links

Indicadores de Espera  

Entrada de Texto  Limpa texto  

PADRÕES DE INTERAÇÃOListas

Page 39: Kluk design dispositivos moveis ufpb 20131025

• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra • Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os

detalhes dela • Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de

uma boa NAVEGAÇÃO

DIAGRAMA DE FLUXO DAS TELAS

Tools

Page 40: Kluk design dispositivos moveis ufpb 20131025

MEU DIAGRAMA

• Você pode criar a sua própria forma de diagramar o fluxo.

Page 41: Kluk design dispositivos moveis ufpb 20131025

EXERCI'CIO:  Traçando  seu  DIAGRAMA

• LEIAM novamente a “Declaração de Definição do Produto” (DDP)

• CONSIDEREM as interações que você vai utilizar para navegação e inputs

• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados

• DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade

Page 42: Kluk design dispositivos moveis ufpb 20131025

• LEIAM novamente a “Declaração de Definição do Produto” (DDP)

• CONSIDEREM as interações que você vai utilizar para navegação e inputs

• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados

DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade

EXERCÍCIO: TRAÇANDO SEU DIAGRAMA

30 min.Papel Lápis/caneta

Page 43: Kluk design dispositivos moveis ufpb 20131025

INTERFACE DE USUÁRIO

Page 44: Kluk design dispositivos moveis ufpb 20131025

• Vai além : ENCANTADORA e ATRAENTE

• Boa anfitriã : CONVIDATIVA e CATIVANTE

• Te ajuda : FACÍL de usar • Traz o novo : INOVADORA ...

“Eu NUNCA fiz isso!” • Não está atoa : entrega

SOLUÇÕES e não somente FUNÇÕES

• É NOVA e DESENHADA!

UMA BOA INTERFACE DE USUÁRIO

Page 45: Kluk design dispositivos moveis ufpb 20131025

DISPOSITIVOS MÓVEIS

Page 46: Kluk design dispositivos moveis ufpb 20131025

ENTENDENDO CADA DISPOSITIVO

Page 47: Kluk design dispositivos moveis ufpb 20131025

iPhone (iOS) HIG : Introdução

Page 48: Kluk design dispositivos moveis ufpb 20131025

CARACTERÍSTICAS do iPhone • Tamanho da tela é COMPACTA • Memória é LIMITADA • Usuários visualizam e interagem com UM

APLICATIVO de cada vez. • TIPOS de aplicativos • NATIVO: desenvolvidos com o SDK • WEB: abertos pelo browser • HÍBRIDOS: tem como predominância

uma webview, porém possuem controles de aplicativos nativos

iPhone (iOS) HIG: INTRODUÇÃO

Page 49: Kluk design dispositivos moveis ufpb 20131025

Como ESCOLHER ? • Comportamentos e USO • Características VISUAIS • Modelo dos DADOS • EXPERIÊNCIA de usuário

DIFERENTES ESTILOS DE APLICATIVOS

• Qual a motivação do usuário para usar este aplicativo?  

• Qual a experiência de usuário que você quer proporcionar?  

• Qual o seu objetivo para o aplicativo?

Page 50: Kluk design dispositivos moveis ufpb 20131025

PRODUTIVIDADE

orga

nizar

info

rmaç

ões

de fo

rma

HIER

ÁRQ

UICA

UTILITÁRIOS

UMA TAREFA com pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada  • Pouca interação

Organizar listas  Adicionar ou remover itens  

Entrar até o nível de informação desejada e realizar atividades com ela

DIFERENTES ESTILOS DE APLICATIVOS

Page 51: Kluk design dispositivos moveis ufpb 20131025

TELA TODA, em ambientes ricos visualmente

Muito peculiar  Sem controles padrão  

Diversão, como jogos e rich-media

IMER

SIVA

DIFERENTES ESTILOS DE APLICATIVOS

Page 52: Kluk design dispositivos moveis ufpb 20131025

INTERFACE DO USUÁRIO

Page 53: Kluk design dispositivos moveis ufpb 20131025

Status bar

Navegation bar

Navegation bar

Toolbar

ELEMENTOS

Page 54: Kluk design dispositivos moveis ufpb 20131025

AÇÕES E VIEW MODAL

Page 55: Kluk design dispositivos moveis ufpb 20131025

ALERTAS E NOTIFICAÇÕES

Page 56: Kluk design dispositivos moveis ufpb 20131025

EXEMPLO DE VIEW MODAL MAL DESENHADA

Page 57: Kluk design dispositivos moveis ufpb 20131025

Simples Indexada Agrupada

TABELAS

Page 58: Kluk design dispositivos moveis ufpb 20131025

Pickers

CONTROLES

Busca Slider e Switch Segmentados

Page 59: Kluk design dispositivos moveis ufpb 20131025

Toolbar

Pop-overs  

iPad

Page 60: Kluk design dispositivos moveis ufpb 20131025

ATUALIZAÇÃO iOS 7Clareza  • texto é sempre legível, icones são  precisos,  • adornos são sutís e foco em  • funcionalidade é a inspiração.  Deferência  • a UI ajuda ousuário, porém não compete  • com o conteúdo  Profundidade • camadas visuais e movimento  • auxilia entendimento e prazer  • de usar o app.

Page 61: Kluk design dispositivos moveis ufpb 20131025

• App NOVO: já pense em usar elementos e UI para o iOS 7 • App LANÇADO: começem a pensar como re-desenar a interface para • iOS 7 • Fontes: Helvetica Neue (a fonte desta apresentação) • Icone: Use o Grid • Elementos: já use e se adapte aos novos • UI Dynamics: uma engine física para dar movimento, fluidez e realidade

ao app (não somente animação).

iOS  7  UI  Transition  Guide    https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-­‐CH6-­‐SW1    

O QUE DEVO FAZER

Page 62: Kluk design dispositivos moveis ufpb 20131025

GRID DE ÍCONES

Page 63: Kluk design dispositivos moveis ufpb 20131025

GRID DE ÍCONES

Page 64: Kluk design dispositivos moveis ufpb 20131025

Android: Design

Page 65: Kluk design dispositivos moveis ufpb 20131025

MUITOS DEVICES

Page 66: Kluk design dispositivos moveis ufpb 20131025

MUUUUITOS DEVICES

3997 resoluções disponíveis - 2012

Page 67: Kluk design dispositivos moveis ufpb 20131025

• Seja Flexível

• OTIMIZE layouts para diferentes telas

• Recursos para diferentes DPIs

DISPOSITIVOS E DISPLAYS

Page 68: Kluk design dispositivos moveis ufpb 20131025

Holo Light Holo Dark Holo Light/Dark

TEMAS E TIPOGRAFIA

Page 69: Kluk design dispositivos moveis ufpb 20131025

Icones         Action  Bar           Notificações  

ICONOGRAFIA

Page 70: Kluk design dispositivos moveis ufpb 20131025

Action Bar

Multi-pane  

Selection  

PADRÕES DE UI

Page 71: Kluk design dispositivos moveis ufpb 20131025

EXEMPLO DE NAVEGAÇÃO: UP vs. BACK

Page 72: Kluk design dispositivos moveis ufpb 20131025

• Talvez o elemento MAIS IMPORTANTE • ADAPTÁVEL a rotação e diferentes telas • Pode ser CONTEXTUAL (ex.seleção) • COMPOSTA por: • Top Action Bar• Middle Action Bar • Bottom Action Bar

ACTION BAR GERAL

Page 73: Kluk design dispositivos moveis ufpb 20131025

• Scrollable Tabs

• Spinners

• Fixed Tabs  !

• Spinners

• Action Overflow  

• Buttons

ACTION BAR: ELEMENTOS

Page 74: Kluk design dispositivos moveis ufpb 20131025

Phone

Tablet  

LAYOUTS MULTIPLANE

Page 75: Kluk design dispositivos moveis ufpb 20131025

http://developer.android.com/design/downloads/index.html

ELEMENTOS

Page 76: Kluk design dispositivos moveis ufpb 20131025

• http://developer.apple.com/iphone/library/documentation/

userexperience/conceptual/mobilehig/Introduction/

Introduction.html  

• http://developer.apple.com/iphone/library/documentation/

general/conceptual/ipadhig/Introduction/ Introduction.html  

• http://developer.android.com/design/index.html  

• UI Design and Interaction Guide for Windows Phone 7 v2.0  

• http://wiki.forum.nokia.com/index.php/

Guidelines_for_Mobile_Interface_Design

LINKS PARA OS HIG´S

Page 77: Kluk design dispositivos moveis ufpb 20131025

• Importante iniciar com o NÍVEL mais BAIXO o possível

• NÃO se apegue a DETALHES : use círculos, quadrados, retângulos

• Capturar visualmente a lista de FUNCIONALIDADES considerando a ORDEM definida pelo DIAGRAMA

• Use ELEMENTOS conhecidos, e considere o HIG da plataforma escolhida

• SOMENTE após estes desenhos prontos você pode passar para o COMPUTADOR para testar!

DESENHANDO INTERFACES

Page 78: Kluk design dispositivos moveis ufpb 20131025

• LEIAM novamente a “Declaração de Definição do Produto” (DDP)

• ANALISEM o diagrama de fluxo e ESCOLHAM as telas a serem desenhadas

• DESENHEM as interfaces das telas no stencil

• USEM Post-It’s para mostrar as interações

EXERCÍCIO: DESENHANDO SUA INTERFACE

1 HORA.Papel Lápis/caneta Post-it Stencil

Page 79: Kluk design dispositivos moveis ufpb 20131025

PROTOTIPAÇÃO RÁPIDA

Page 80: Kluk design dispositivos moveis ufpb 20131025

• Utilizada para PROTOTIPAR objetos, conceitos, serviços e  

• interfaces  • Serve para se ter algo PALPÁVEL de maneira rápida

que possam ser testados  • Visualizar as INTERFACES e USAR-LAS de maneira

simples  • Traz RESULTADOS e agiliza o processo de

ITERAÇÃO  • Podem ser utilizadas FERRAMENTAS físicas,

computacionais ou uma combinação de ambas  • DETALHES são irrelevantes, ou até PROIBIDOS

O QUE É PROTOTIPAÇÃO RÁPIDA

Page 81: Kluk design dispositivos moveis ufpb 20131025
Page 82: Kluk design dispositivos moveis ufpb 20131025

FERRAMENTAS E LINKS https://gomockingbird.com/

http://www.mobilesketchbook.com/

http://keynotopia.com/

http://mockapp.com/download/

https://pidoco.com/en

http://balsamiq.com/products%23

Page 83: Kluk design dispositivos moveis ufpb 20131025

• REVISEM as interfaces desenhadas

• LEVEM as interfaces uma a uma para o computador

• UTILIZEM formas padrão (circulos, quadrados, etc.) para representar

• elementos como botões, caixas de texto, etc.

• CRIEM os links definidos no “Diagrama de Fluxo da Telas”

• TESTEM o protótipo para avaliar a usabilidade com outras equipes

EXERCÍCIO: DESENHANDO SUA INTERFACE

1 HORA. Computador

Page 84: Kluk design dispositivos moveis ufpb 20131025

ALGUMAS DICAS

Page 85: Kluk design dispositivos moveis ufpb 20131025

• Registro FORÇADO no primeiro uso  

• Usar textos de DIFÍCIL LEITURA e evite  

• misturar diferentes FONTES  

• Passar ALERTAS ambíguos ao usuário. Use “labels” que representam o resultado (Vizualizar vs. OK). Coloque afirmativa a direita.  

• Usar LINGUAGEM técnica que o usuário não entende.  

• Botões de voltar sem CONTEXTO

O QUE NÃO FAZER

Page 86: Kluk design dispositivos moveis ufpb 20131025

Look & Feel

Page 87: Kluk design dispositivos moveis ufpb 20131025

• Muitos dos CONTROLES e elementos padrão das plataformas, podem ser customizados  

• Pequenas mudanças podem dar um POLIMENTO especial para sua interface  

• EVITE mudar radicalmente os controles que fazem ações PADRÃO

• CRIE temas diferentes, com cores, texturas, e imagens e teste o MELHOR

SUA IDENTIDADE VISUAL

Page 88: Kluk design dispositivos moveis ufpb 20131025

Muito Obrigado!