Minicurso Design de Interfaces 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...• Paolo Domenico Passeri

• Curioso por natureza!

• Engenheiro + Designer + MKT

• Antes: Co-Fundador, Aluno e Professor do Faber-Ludens, Gerente de Desenvolvimento de Produtos na Positivo Informática

• Hoje: me preparando para voltar a estudar.

...e vocês?

O curso

60%

40%

Atividades

Conceitos

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

• Facilidade

• Agilidade

• Intuitividade

• Algo “novo”

• Se surpreender

• “Transparência”

...e o que eles BUSCAM

Entenda as LIMITAÇÕES

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

Entenda as LIMITAÇÕES

Nem são AGUIAS, com super-visão

Entenda as LIMITAÇÕES

Geralmente vão interagir com UM aplicativos por vez

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?

Você tem que ser O USUÁRIO!

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!

PROCESSO de desenvolvimento

Conceito Design Desenvolvimento Distribuição Marketing Manutenção

Atividade vs. Tempo

DesenvolvimentoDesign

Debug

Test

DESENVOLVIMENTO > DESIGN = RESUTADOS

Atividade vs. Tempo

Desenvolvimento

Design

Debug

Test

DESIGN > DESENVOLVIMENTO = RESUTADOS

Como vamos chegar lá?

Ideia(Refinar)

Processo(Executar)

Interface(Desenhar)

X-Y: Tipo de AplicativoSério

Divertido

Ferramenta

Entre

tenim

ento

Mais função menos formaUm 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.

Eficiência para EntreterO 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.

Elementos inovadoresresolvendo problemas

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

Jogar e se DivertirTipo 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.

Eixo X: uso Eixo Y: conteúdo

Refinando a sua Ideia

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

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

A Declaração de Definição de Produto

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

Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.

- Mark Twain

“”

EXERCÍCIO: Criando a sua DECLARAÇÃO

• 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

1:30 horas• Post-It

• Papel

• Lápis/Caneta

Meetings for iPadPaolo Domenico Passeri

DESIGN como um DIFERENCIAL

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

Por que ter DESIGN?

Estudo de Caso: CONVERT• 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!

2 meses

A importância dos ICONES

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

Antes de entrar no app você já o julga...

Qual destes você escolheria (deixe 8)?1

8

15

2

9

16

3

10

17

4

11

18

5

12

6

13

7

14

Como?

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

EXERCÍCIO: Desenhando o ICONE

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

1 hora• Papel

• Lápis/Caneta

• Cores

Fontes de ícones

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

INTERAGINDO COM DISPOSITIVOS MÓVEIS

Métodos de Interação

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

Exemplo de Aplicativo

Anotação Localização Lembrete

Padrões de Interação

• 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

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 DIRETA/Touch/Haptic

• Toques curtos e longos• Arrastar• Deslizar• Girar• Pinçar e Expandir

• Não existe mapeamento pois as teclas são “virtuais”• Difícil aprender todos os meios de entrada• São muito flexíveis

Manipulação por GESTOS• Utilizada através de sensores• Através do dispositivo por completo

• Inclinando• Asoprando • Chacoalhando

ELEM

ENTO

S

Limpa texto

ListasBotões ou Links

Indicadores de EsperaEntrada de Texto

Diagrama de FLUXO das telas

• 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

TOO

LS

Meetings for iPadPaolo Domenico Passeri

EXERCÍ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

1:30 horas• Papel

• Lápis/Caneta

INTERFACE DE USUÁRIO

Uma BOA 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!

Dispositivos Móveis

Entendendo cada dispositivo

Tela / Resolução

3.5” e 4” /480x320, 960x640 e

1136x640

7,9” e 9.7” /1024x768 e 2048x1536

2.6” → 10.1” /240x320 → 1280x800+

3.5” → 4.5” /800x480

Auto-rotativa ✓ ✓ ✓ ✓

Interface(s)

TouchscreenAcelerômetro

MicrofoneCâmeras

GPS

TouchscreenAcelerômetro

MicrofoneCâmeras

GPS

TouchscreenAcelerômetro

MicrofoneCâmeras

GPSRFID

TouchscreenAcelerômetro

MicrofoneCâmeras

GPS

Padronização ✓ ✓ ✗ ✓

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 natívos

Diferentes ESTILOS de aplicativos

• Comportamentos e USO

• Características VISUAIS

• Modelo dos DADOS

• EXPERIÊNCIA de usuário

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

Como ESCOLHER ?

PRODUTIVIDADE

orga

nizar

info

rmaç

ões

de fo

rma

HIE

RÁR

QU

ICA

• Organizar listas

• Adicionar ou remover itens

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

UTILITÁRIOS

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

é apresentada

• Pouca interação

IMER

SIVA

TELA TODA, em ambientes ricos visualmente

• Muito peculiar

• Sem controles padrão

• Diversão, como jogos e rich-media

INTERFACE de Usuário

Status bar

Navegation bar

Toolbar

Tab bar

ELEM

ENTO

S

Ações e View Modal

Alertas e Notificações

Exemplo de “View Modal” MAL desenhada

Tabelas

Simples Indexada Agrupada

Controles

Busca Slider e Switch Segmentados Pickers

iPad

Pop-overs

Toolbar

Atualização iOS 7

Filosofia

• Clareza 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 o usuário, porém não compete com o conteúdo

• Profundidade camadas visuais e movimento auxilia entendimento e prazer de usar o app.

O que devo fazer?

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

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

Paleta de Cores

Icones “in app”

iOS

7 vs

. iO

S 6

Icon

es

Grid

dos

Icon

es

Elem

ento

s iO

S 7

Elem

ento

s iO

S 7

Video

Android: Design

• Seta as GUIAS para INTERAÇÕES e VISUAL

• Nova Versão para PHONES e TABLETS

CONTEMPLA

• Princípios de DESIGN

• Overview da UI

• Padrões para Android

• Elementos de UI

Mui

tos

Dev

ices

Dispositivos e Displays

• Seja FLEXÍVEL

• OTIMIZE layouts para diferentes telas

• Recursos para diferentes DPIs

Temas e Tipografia

Holo DarkHolo Light Holo Light/Dark

Iconografia

Icones Action Bar Notificações

Padrões de UI

Action Bar

Multi-pane

Selection

Exemplo: Navegação com Up vs. Back

Action Bar: Geral

• 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: Elementos

Scrollable Tabs

Fixed Tabs

Spinners

Buttons

Action Overflow

Layouts Multiplane

Phone Tablet

Elementos

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

PDF

Links para os HIG’s

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

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

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

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

Desenhando Interfaces

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

Meetings for iPadPaolo Domenico Passeri

EXERCÍCIO: Desenhando sua INTERFACE

• 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

2 horas

• Papel

• Lápis/Caneta

• Post-it’s

• 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

EXERCÍCIO: Protoripando a sua INTERFACE• 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

2:00 horas • Coputador

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

• Busque inspiração no MUNDO REAL!

Sua IDENTIDADE visual

Inspiração

Busque o LÚDICO...

...e o REAL

Muito Obrigado!

paolopasseri

@paolopasseri

paolopasseri@gmail.com