82
Minicurso Design de Interfaces para Dispositivos Móveis

Design de Interfaces para Dispositivos Móveis

Embed Size (px)

DESCRIPTION

Apresentação do curso pelo Prof. Paolo Passeri em 07 de Abril de 2012.

Citation preview

Page 1: Design de Interfaces para Dispositivos Móveis

Minicurso Design de Interfaces para Dispositivos Móveis

Page 2: 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!”

Page 3: Design de Interfaces para Dispositivos Móveis

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

Page 4: Design de Interfaces para Dispositivos Móveis

...e vocês?

Page 5: Design de Interfaces para Dispositivos Móveis

O curso

50%50%AtividadesConceitos = 4 horas4 horas =

Page 6: Design de Interfaces para Dispositivos Móveis

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

Page 7: Design de Interfaces para Dispositivos Móveis

• Facilidade

• Agilidade

• Intuitividade

• Algo “novo”

• Se surpreender

• “Transparência”

...e o que eles BUSCAM

Page 8: Design de Interfaces para Dispositivos Móveis

Entenda as LIMITAÇÕES

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

Page 9: Design de Interfaces para Dispositivos Móveis

Entenda as LIMITAÇÕES

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

Page 10: Design de Interfaces para Dispositivos Móveis

Entenda as LIMITAÇÕES

Geralmente vão interagir com UM aplicativos por vez

Page 11: Design de Interfaces para Dispositivos Móveis

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!

Page 12: Design de Interfaces para Dispositivos Móveis

Não é um computador TRADICIONAL!

Page 13: Design de Interfaces para Dispositivos Móveis

A interface tem que ser REPENSADA...

CTRL+C, CTRL+V NÃO funciona!

Page 14: Design de Interfaces para Dispositivos Móveis

...para ATENDER ao dispositivo móvel

Somente os elementos CHAVE se mantém!

Page 15: Design de Interfaces para Dispositivos Móveis

PROCESSO de desenvolvimento

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

Page 16: Design de Interfaces para Dispositivos Móveis

Atividade vs. Tempo

Desenvolvimento

Design

Debug

Test

DESENVOLVIMENTO > DESIGN = RESUTADOS

Page 17: Design de Interfaces para Dispositivos Móveis

Atividade vs. Tempo

Desenvolvimento

Design

Debug

Test

DESIGN > DESENVOLVIMENTO = RESUTADOS

Page 18: Design de Interfaces para Dispositivos Móveis

Como vamos chegar lá?

Ideia(Refinar)

Processo(Executar)

Interface(Desenhar)

Page 19: Design de Interfaces para Dispositivos Móveis

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?

Page 20: Design de Interfaces para Dispositivos Móveis

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

- Mark Twain

“”

Page 21: Design de Interfaces para Dispositivos Móveis

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

Page 22: Design de Interfaces para Dispositivos Móveis

Meetings for iPadPaolo Domenico Passeri

Page 23: Design de Interfaces para Dispositivos Móveis

DESIGN como um DIFERENCIAL

Page 24: Design de Interfaces para Dispositivos Móveis

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

Page 25: Design de Interfaces para Dispositivos Móveis

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

Page 26: Design de Interfaces para Dispositivos Móveis

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

Page 27: Design de Interfaces para Dispositivos Móveis

Qual destes você escolheria (deixe 8)?

1

8

15

2

9

16

3

10

17

4

11

18

5

12

6

13

7

14

Page 28: Design de Interfaces para Dispositivos Móveis

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

Page 29: Design de Interfaces para Dispositivos Móveis

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

Page 30: Design de Interfaces para Dispositivos Móveis

INTERAGINDO COM DISPOSITIVOS MÓVEIS

Page 31: Design de Interfaces para 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”

Page 32: Design de Interfaces para Dispositivos Móveis

Exemplo de Aplicativo

Anotação Localização Lembrete

Page 33: Design de Interfaces para Dispositivos Móveis

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

Page 34: Design de Interfaces 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 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

Page 35: Design de Interfaces para Dispositivos Móveis

EL

EM

EN

TO

S

Limpa texto

ListasBotões ou Links

Indicadores de EsperaEntrada de Texto

Page 36: Design de Interfaces para Dispositivos Móveis

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

Page 37: Design de Interfaces para Dispositivos Móveis

Meetings for iPadPaolo Domenico Passeri

Page 38: Design de Interfaces para Dispositivos Móveis

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

Page 39: Design de Interfaces para Dispositivos Móveis

INTERFACE DE USUÁRIO

Page 40: Design de Interfaces para Dispositivos Móveis

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!

Page 41: Design de Interfaces para Dispositivos Móveis

Dispositivos Móveis

Page 42: Design de Interfaces para 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 ✓ ✓ ✗ ✓ ✗

Page 43: Design de Interfaces para Dispositivos Móveis

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

Page 44: Design de Interfaces para Dispositivos Móveis

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 ?

Page 45: Design de Interfaces para Dispositivos Móveis

PRODUTIVIDADE

orga

niza

r in

form

açõe

s d

e fo

rma

HIE

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

Page 46: Design de Interfaces para Dispositivos Móveis

INTERFACE de Usuário

Page 47: Design de Interfaces para Dispositivos Móveis

Status bar

Navegation bar

Toolbar

Tab bar

EL

EM

EN

TO

S

Page 48: Design de Interfaces para Dispositivos Móveis

Ações e View Modal

Page 49: Design de Interfaces para Dispositivos Móveis

Alertas e Notificações

Page 50: Design de Interfaces para Dispositivos Móveis

Exemplo de “View Modal” MAL desenhada

Page 51: Design de Interfaces para Dispositivos Móveis

Tabelas

Simples Indexada Agrupada

Page 52: Design de Interfaces para Dispositivos Móveis

Controles

Busca Slider e Switch Segmentados Pickers

Page 53: Design de Interfaces para Dispositivos Móveis

iPad

Pop-overs

Toolbar

Page 54: Design de Interfaces para Dispositivos Móveis

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

Page 55: Design de Interfaces para Dispositivos Móveis

Mu

ito

s D

evi

ce

s

Page 56: Design de Interfaces para Dispositivos Móveis

Dispositivos e Displays

• Seja FLEXÍVEL

• OTIMIZE layouts para diferentes telas

• Recursos para diferentes DPIs

Page 57: Design de Interfaces para Dispositivos Móveis

Temas e Tipografia

Holo DarkHolo Light Holo Light/Dark

Page 58: Design de Interfaces para Dispositivos Móveis

Iconografia

Icones Action Bar Notificações

Page 59: Design de Interfaces para Dispositivos Móveis

Padrões de UI

Action Bar

Multi-pane

Selection

Page 60: Design de Interfaces para Dispositivos Móveis

Exemplo: Navegação com Up vs. Back

Page 61: Design de Interfaces para Dispositivos Móveis

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

Page 62: Design de Interfaces para Dispositivos Móveis

Action Bar: Elementos

Scrollable Tabs

Fixed Tabs

Spinners

Buttons

Action Overflow

Page 63: Design de Interfaces para Dispositivos Móveis

Layouts Multiplane

Phone Tablet

Page 64: Design de Interfaces para Dispositivos Móveis

Elementos

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

Page 65: Design de Interfaces para Dispositivos Móveis

Web Apps

Conteúdo Web

Browser Aplicativo com Web view

Page 66: Design de Interfaces para Dispositivos Móveis

PDF

Page 67: Design de Interfaces para Dispositivos Móveis

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

Page 68: Design de Interfaces para Dispositivos Móveis

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!

Page 69: Design de Interfaces para Dispositivos Móveis

Meetings for iPadPaolo Domenico Passeri

Page 70: Design de Interfaces para Dispositivos Móveis

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

Page 71: Design de Interfaces para Dispositivos Móveis

PROTOTIPAÇÃO RÁPIDA

Page 72: Design de Interfaces 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 73: Design de Interfaces para Dispositivos Móveis
Page 74: Design de Interfaces para Dispositivos Móveis
Page 75: Design de Interfaces para Dispositivos Móveis

Ferramentas e Links

Page 76: Design de Interfaces para Dispositivos Móveis

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

Page 77: Design de Interfaces para Dispositivos Móveis

LOOK & FEEL

Page 78: Design de Interfaces 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

• Busque inspiração no MUNDO REAL!

Sua IDENTIDADE visual

Page 79: Design de Interfaces para Dispositivos Móveis
Page 80: Design de Interfaces para Dispositivos Móveis

Busque o LÚDICO...

Page 81: Design de Interfaces para Dispositivos Móveis

...e o REAL

Page 82: Design de Interfaces para Dispositivos Móveis

Muito Obrigado!

paolopasseri

@paolopasseri

[email protected]