workshop design para dispositivos móveis

89
Mini Curso Design para Dispositivos Móveis

Upload: instituto-faber-ludens

Post on 25-Jun-2015

221 views

Category:

Design


1 download

DESCRIPTION

Slides do workshop Design de Interfaces para Dispositivos Móveis realizado na Wealth Systems em Cascavel pelo professor Hanry Marcel Kluk. Junho de 2014.

TRANSCRIPT

Page 1: Workshop Design para Dispositivos Móveis

Mini Curso Design para Dispositivos Móveis

Page 2: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

...e vocês?

Page 5: Workshop Design para Dispositivos Móveis

O CURSO

40% Conceitos

60% Atividades

Page 6: Workshop Design para Dispositivos Móveis

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

Page 7: Workshop Design para Dispositivos Móveis

...E O QUE ELES BUSCAM!

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

Page 8: Workshop Design para Dispositivos Móveis

ENTENDA AS LIMITAÇÕES

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

Page 9: Workshop Design para Dispositivos Móveis

ENTENDA AS LIMITAÇÕES  

Nem são águias com super VISÃO

Page 10: Workshop Design para Dispositivos Móveis

ENTENDA AS LIMITAÇÕES  

Geralmente interagem com  um aplicativo POR VEZ.

Page 11: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

NÃO É UM COMPUTADOR TRADICIONAL!

Page 13: Workshop Design para Dispositivos Móveis

A INTERFACE TEM QUE SER REPENSADA

Ctrl+C, Ctrl+V NÃO FUNCIONA

Page 14: Workshop Design para Dispositivos Móveis

...PARA ATENDER AO DISPOSITIVO MÓVEL

Somente os elementos CHAVE se mantém!

Page 15: Workshop Design para Dispositivos Móveis

Manutenção

PROCESSO DE DESENVOLVIMENTO

Conceito Design Desenvolvimento

Distribuição Marketing

Page 16: Workshop Design para Dispositivos Móveis

DESENVOLVIMENTO > DESIGN =

ATIVIDADE X TEMPO

Debug

Teste

Design

Desenvolvimento

Page 17: Workshop Design para Dispositivos Móveis

DESENVOLVIMENTO > DESIGN =

ATIVIDADE X TEMPO

Debug

Teste

Design

Desenvolvimento

Page 18: Workshop Design para Dispositivos Móveis

COMO VAMOS CHEGAR LÁ?

Ideia (Refinar)

Processo (Executar)

Interface (Desenhar)

Page 19: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

Eixo X: Uso Eixo Y: ConteúdoDivertido

Sério

Entre

teni

men

to

Ferra

men

ta

X-Y: TIPO DE APLICATIVO

Page 21: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

DESIGN COMO UM DIFERENCIAL

Page 25: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

• É 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: Workshop Design para Dispositivos Móveis

ANTES DE ENTRAR VOCÊ JULGA

Page 29: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

INTERAGINDO COM DISPOSITIVOS MÓVEIS

Page 33: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

EXEMPLO DE APLICATIVO

Anotação Localização Lembrete

Page 35: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

Botões ou Links

Indicadores de Espera  

Entrada de Texto  Limpa texto  

PADRÕES DE INTERAÇÃOListas

Page 39: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

MEU DIAGRAMA

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

Page 41: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

INTERFACE DE USUÁRIO

Page 44: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

DISPOSITIVOS MÓVEIS

Page 46: Workshop Design para Dispositivos Móveis

ENTENDENDO CADA DISPOSITIVO

Page 47: Workshop Design para Dispositivos Móveis

iPhone (iOS) HIG : Introdução

Page 48: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

INTERFACE DO USUÁRIO

Page 53: Workshop Design para Dispositivos Móveis

Status bar

Navegation bar

Navegation bar

Toolbar

ELEMENTOS

Page 54: Workshop Design para Dispositivos Móveis

AÇÕES E VIEW MODAL

Page 55: Workshop Design para Dispositivos Móveis

ALERTAS E NOTIFICAÇÕES

Page 56: Workshop Design para Dispositivos Móveis

EXEMPLO DE VIEW MODAL MAL DESENHADA

Page 57: Workshop Design para Dispositivos Móveis

Simples Indexada Agrupada

TABELAS

Page 58: Workshop Design para Dispositivos Móveis

Pickers

CONTROLES

Busca Slider e Switch Segmentados

Page 59: Workshop Design para Dispositivos Móveis

Toolbar

Pop-overs  

iPad

Page 60: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

GRID DE ÍCONES

Page 63: Workshop Design para Dispositivos Móveis

GRID DE ÍCONES

Page 64: Workshop Design para Dispositivos Móveis

Android: Design

Page 65: Workshop Design para Dispositivos Móveis

MUITOS DEVICES

Page 66: Workshop Design para Dispositivos Móveis

MUUUUITOS DEVICES

3997 resoluções disponíveis - 2012

Page 67: Workshop Design para Dispositivos Móveis

• Seja Flexível

• OTIMIZE layouts para diferentes telas

• Recursos para diferentes DPIs

DISPOSITIVOS E DISPLAYS

Page 68: Workshop Design para Dispositivos Móveis

Holo Light Holo Dark Holo Light/Dark

TEMAS E TIPOGRAFIA

Page 69: Workshop Design para Dispositivos Móveis

Icones         Action  Bar           Notificações  

ICONOGRAFIA

Page 70: Workshop Design para Dispositivos Móveis

Action Bar

Multi-pane  

Selection  

PADRÕES DE UI

Page 71: Workshop Design para Dispositivos Móveis

EXEMPLO DE NAVEGAÇÃO: UP vs. BACK

Page 72: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

• Scrollable Tabs

• Spinners

• Fixed Tabs  !

• Spinners

• Action Overflow  

• Buttons

ACTION BAR: ELEMENTOS

Page 74: Workshop Design para Dispositivos Móveis

Phone

Tablet  

LAYOUTS MULTIPLANE

Page 75: Workshop Design para Dispositivos Móveis

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

ELEMENTOS

Page 76: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

PROTOTIPAÇÃO RÁPIDA

Page 80: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis
Page 82: Workshop Design para Dispositivos Móveis

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: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

ALGUMAS DICAS

Page 85: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

Look & Feel

Page 87: Workshop Design para Dispositivos Móveis

• 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: Workshop Design para Dispositivos Móveis

Muito Obrigado!