kluk design dispositivos moveis ufpb 20131025

Mini Curso 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!”

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

...e vocês?

O CURSO

40% Conceitos

60% Atividades

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

...E O QUE ELES BUSCAM!

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

ENTENDA AS LIMITAÇÕES

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

ENTENDA AS LIMITAÇÕES  

Nem são águias com super VISÃO

ENTENDA AS LIMITAÇÕES  

Geralmente interagem com  um aplicativo POR VEZ.

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?

NÃO É UM COMPUTADOR TRADICIONAL!

A INTERFACE TEM QUE SER REPENSADA

Ctrl+C, Ctrl+V NÃO FUNCIONA

...PARA ATENDER AO DISPOSITIVO MÓVEL

Somente os elementos CHAVE se mantém!

Manutenção

PROCESSO DE DESENVOLVIMENTO

Conceito Design Desenvolvimento

Distribuição Marketing

DESENVOLVIMENTO > DESIGN =

ATIVIDADE X TEMPO

Debug

Teste

Design

Desenvolvimento

DESENVOLVIMENTO > DESIGN =

ATIVIDADE X TEMPO

Debug

Teste

Design

Desenvolvimento

COMO VAMOS CHEGAR LÁ?

Ideia (Refinar)

Processo (Executar)

Interface (Desenhar)

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

Eixo X: Uso Eixo Y: ConteúdoDivertido

Sério

Entre

teni

men

to

Ferra

men

ta

X-Y: TIPO DE APLICATIVO

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

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

• 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

DESIGN COMO UM DIFERENCIAL

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!

• 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

• É 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

ANTES DE ENTRAR VOCÊ JULGA

• 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?

• 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

• 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

INTERAGINDO COM 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

EXEMPLO DE APLICATIVO

Anotação Localização Lembrete

• 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

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

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

Botões ou Links

Indicadores de Espera  

Entrada de Texto  Limpa texto  

PADRÕES DE INTERAÇÃOListas

• 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

MEU DIAGRAMA

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

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

• 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

INTERFACE DE USUÁRIO

• 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

DISPOSITIVOS MÓVEIS

ENTENDENDO CADA DISPOSITIVO

iPhone (iOS) HIG : Introdução

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

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?

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

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

INTERFACE DO USUÁRIO

Status bar

Navegation bar

Navegation bar

Toolbar

ELEMENTOS

AÇÕES E VIEW MODAL

ALERTAS E NOTIFICAÇÕES

EXEMPLO DE VIEW MODAL MAL DESENHADA

Simples Indexada Agrupada

TABELAS

Pickers

CONTROLES

Busca Slider e Switch Segmentados

Toolbar

Pop-overs  

iPad

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.

• 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

GRID DE ÍCONES

GRID DE ÍCONES

Android: Design

MUITOS DEVICES

MUUUUITOS DEVICES

3997 resoluções disponíveis - 2012

• Seja Flexível

• OTIMIZE layouts para diferentes telas

• Recursos para diferentes DPIs

DISPOSITIVOS E DISPLAYS

Holo Light Holo Dark Holo Light/Dark

TEMAS E TIPOGRAFIA

Icones         Action  Bar           Notificações  

ICONOGRAFIA

Action Bar

Multi-pane  

Selection  

PADRÕES DE UI

EXEMPLO DE NAVEGAÇÃO: UP vs. BACK

• 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

• Scrollable Tabs

• Spinners

• Fixed Tabs  !

• Spinners

• Action Overflow  

• Buttons

ACTION BAR: ELEMENTOS

Phone

Tablet  

LAYOUTS MULTIPLANE

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

ELEMENTOS

• 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

• 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

• 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

PROTOTIPAÇÃO RÁPIDA

• 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

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

• 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

ALGUMAS DICAS

• 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

Look & Feel

• 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

Muito Obrigado!

hanrykluk@gmail.com