Design de Interfaces para Dispositivos Móveis

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

Quem vos fala?

• Paolo Domenico Passeri

• Curioso por natureza!

• Engenheiro + Designer + MKT

• Pensar em soluções

• Antes: Aluno, Monitor e Professor do Faber-Ludens

• Hoje: Gerente de Desenvolvimento de Produtos na Positivo Informática

...e vocês?

O curso

50%50%AtividadesConceitos = 4 horas4 horas =

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

Desenvolvimento

Design

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)

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?

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 para o seu aplicativo

• LEVANTEM todas as funcionalidades que consigam pensar

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

• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES

45 minutos

• 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

Qual destes você escolheria (deixe 8)?

1

8

15

2

9

16

3

10

17

4

11

18

5

12

6

13

7

14

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”

30 minutos

• 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

EL

EM

EN

TO

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

TO

OL

S

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

45 minutos• 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” /480x320 e 960x640

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

TouchscreenAcelerômetro

MicrofoneCâmeras

GPSRFID

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

niza

r in

form

açõe

s d

e fo

rma

HIE

RÁ

RQ

UIC

A

• 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

IME

RS

IVA 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

EL

EM

EN

TO

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

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

Mu

ito

s D

evi

ce

s

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

Web Apps

Conteúdo Web

Browser Aplicativo com Web view

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

1 hora

• 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

45 minutos • Coputador

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

Busque o LÚDICO...

...e o REAL

Muito Obrigado!

paolopasseri

@paolopasseri

paolopasseri@gmail.com