Minicurso

Design de Interfaces para Dispositivos Mveis

Tpicos
Entendendo Dispositivos Mveis e o Processo de Desenvolvimento de UIs Denindo as Funcionalidades do seu Aplicativo Por que um bom Design um diferencial? A apresentao comea com o cone Padres de Interao e a Importncia do Fluxo de uma Interface Guias (HIGs) e a Interface de Usurio Prototipao Rpida Identidade Visual, criando seu prprio Look and Feel!

Quem vos fala?

Paolo Domenico Passeri Curioso por natureza! Engenheiro + Designer + MKT Pensar em solues Antes: Aluno, Monitor e Professor do Faber-Ludens Hoje: Gerente de Desenvolvimento de Produtos na Positivo Informtica

...e vocs?

O curso

4 horas =

50% Conceitos

50% Atividades

= 4 horas

Para ENTENDER os dispositivos mveis importante entender os seus USURIOS...

...e o que eles BUSCAM

Facilidade Agilidade Intuitividade Algo novo Se surpreender Transparncia

Entenda as LIMITAES
Usurios no tm um PONTEIRO nos dedos

Entenda as LIMITAES
Nem so AGUIAS, com super-viso

Entenda as LIMITAES

Geralmente vo interagir com UM aplicativos por vez

Voc tem que ser O USURIO!

Aprenda TUDO sobre o dispositivo
como ele funciona? pesado ou leve? confortvel de segurar? como acesso suas funes? quais botes ele possui? quais aplicativos so legais? quais no so?

No um computador TRADICIONAL!

A interface tem que ser REPENSADA...

CTRL+C, CTRL+V NO funciona!

...para ATENDER ao dispositivo mvel

Somente os elementos CHAVE se mantm!

PROCESSO de desenvolvimento

Conceito

Design

Desenvolvimento

Distribuio

Marketing

Manuteno

Atividade vs. Tempo

Test Debug Desenvolvimento Design

DESENVOLVIMENTO > DESIGN = RESUTADOS

Atividade vs. Tempo

Test
Desenvolvimento

Debug

Design

DESIGN > DESENVOLVIMENTO = RESUTADOS

Como vamos chegar l?

Ideia
(Renar)

Processo
(Executar)

Interface
(Desenhar)

Renando a sua Ideia

Quem o seu PBLICO ALVO?

Pessoas de negcios ou usurios nais Jovens ou idosos Homens ou Mulheres Vo usar diariamente ou ocasionalmente

Quais so as principais FUNCIONALIDADES?

Consumir ou produzir contedo? necessrio j possuir algum servio? O que realmente o usurio vai querer?

DECLARAO DE DEFINIO DO PRODUTO

 Desculpe porm no tive tempo de escrever uma carta curta, ento mandei uma longa.

- Mark Twain

EXERCCIO: Criando a sua DECLARAO

ESCOLHAM uma categoria de aplicativo dos Post-It`s DEFINAM quem ser o pblico alvo para o seu aplicativo LEVANTEM todas as funcionalidades que consigam pensar CORTEM funcionalidades que no fazem parte do core (menos importantes) JUNTE o PBLICO ALVO e as FUNCIONALIDADES Post-It

45 minutos

Papel Lpis/Caneta

Meetings for iPad

Paolo Domenico Passeri

DESIGN como um DIFERENCIAL

Por que ter DESIGN?

Maior apelo aos usurios Mais ateno da mdia Diferencial vs. Concorrncia Da vontade de voltar Incentiva a explorao VENDE MAIS!

Estudo de Caso: CONVERT

Aplicativo para converso de unidades Preo: U$0.99 Lanado em Agosto de 2009 Unidades vendidas: 197,424 Faturamento bruto: $195,450 Faturamento liquido: $137,065
2 meses

Muitos concorrentes GRTIS j estabelecidos, porm SEM DESIGN!

A importncia 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 FUNES de maneira VISUAL para o usurio

Qual destes voc escolheria (deixe 8)?

1 2 3 4

10

11

12

13

14

15

16

17

18

EXERCCIO: Desenhando o ICONE

LEIAM novamente a Declarao de Denio do Produto (DDP) BUSQUEM elementos que possam inspirar o icone, considerando a DDP DESENHEM 5 conceitos de icone SELECIONEM 1 conceito DESENHEM o icone nal Papel

30 minutos

Lpis/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 MVEIS

Mtodos de Interao
Lembre-se que existem diferentes meios de interagir com o dispositivo Antes de desenhar a UI, necessrio avaliar qual destes esto disponveis e sero utilizados Analise se no existe outra maneira de usurios entrarem com dados Seja criativo e no se limite ao tradicional

Exemplo de Aplicativo

Anotao

Localizao

Lembrete

Padres de Interao
Denem alguns CONTROLES e ELEMENTOS padres para o design de interfaces para dispositivos mveis uma maneira de aprendermos com solues que foram bem APLICADAS e DOCUMENTADAS por outros designers timo ponto de PARTIDA para DESENHARMOS e entendermos partes especcas de um aplicativo

Manipulao INDIRETA
necessrio aprender o mapeamento das teclas Deve ser muito consistente No so muito exveis

Manipulao DIRETA/Touch/Haptic
No existe mapeamento pois as teclas so virtuais Difcil aprender todos os meios de entrada So muito exveis Toques curtos e longos Arrastar Deslizar Girar Pinar e Expandir

Joystick Direcional Botes Alfa-numricos Soft-keys Rodas

Manipulao por GESTOS

Utilizada atravs de sensores Atravs do dispositivo por completo

Inclinando Asoprando Chacoalhando

Botes ou Links

Listas

ELEMENTOS

Indicadores de Espera

Entrada de Texto

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

TOOLS

Meetings for iPad

Paolo Domenico Passeri

EXERCCIO: Traando seu DIAGRAMA

LEIAM novamente a Declarao de Denio do Produto (DDP) CONSIDEREM as interaes que voc vai utilizar para navegao e inputs TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados DESAFIO: tentem REMOVER 1 2 das telas e MANTER a funcionalidade

45 minutos

Papel Lpis/Caneta

INTERFACE DE USURIO

Uma BOA interface de usurio

Vai alm : ENCANTADORA e ATRAENTE Boa antri : CONVIDATIVA e CATIVANTE Te ajuda : FACL de usar Traz o novo : INOVADORA ... Eu NUNCA z isso! No est atoa : entrega SOLUES e no somente FUNES NOVA e DESENHADA!

Dispositivos Mveis

Entendendo cada dispositivo

Tela / Resoluo

3.5 / 480x320 e 960x640

9.7 / 1024x768 e 2048x1536

2.6 10.1 / 240x320 1280x800+

3.5 4.5 / 800x480

Auto-rotativa

Touchscreen Acelermetro Microfone Cmeras GPS

Touchscreen Acelermetro Microfone Cmeras GPS

Touchscreen Acelermetro Microfone Cmeras GPS RFID

Touchscreen Acelermetro Microfone Cmeras GPS

?
Touchscreen Acelermetro Microfone Cmeras GPS RFID

Interface(s)

Padronizao

iPhone (iOS) HIG : Introduo

CARACTERSTICAS do iPhone
Tamanho da tela COMPACTA Memria LIMITADA Usurios visualizam e interagem com UM APLICATIVO de cada vez.

TIPOS de aplicativos
NATIVO: desenvolvidos com o SDK WEB: abertos pelo browser HBRIDOS: tem como predominncia uma webview, porm possuem controles de aplicativos natvos

Diferentes ESTILOS de aplicativos

Como ESCOLHER ? Comportamentos e USO Caractersticas VISUAIS Modelo dos DADOS EXPERINCIA de usurio Qual a motivao do usurio para usar este aplicativo? Qual a experincia de usurio que voc quer proporcionar? Qual o seu objetivo para o aplicativo?

organizar informaes de forma HIERRQUICA

PRODUTIVIDADE

UTILITRIOS

UMA TAREFA com pouco input do usurio

Usurios abrem o aplicativo e a informao j apresentada Pouca interao

IMERSIVA

TELA TODA, em ambientes ricos visualmente

Muito peculiar Sem controles padro Diverso, como jogos e rich-media

Organizar listas Adicionar ou remover itens Entrar at o nvel de informao desejada e realizar atividades com ela

INTERFACE de Usurio

Status bar Navegation bar

ELEMENTOS

Tab bar

Toolbar

Aes e View Modal

Alertas e Noticaes

Exemplo de View Modal MAL desenhada

Tabelas

Simples

Indexada

Agrupada

Controles

Busca

Slider e Switch

Segmentados

Pickers

iPad
Toolbar

Pop-overs

Android: Design
Seta as GUIAS para INTERAES e VISUAL Nova Verso para PHONES e TABLETS CONTEMPLA Princpios de DESIGN Overview da UI Padres para Android Elementos de UI

Muitos Devices

Dispositivos e Displays
Seja FLEXVEL OTIMIZE layouts para diferentes telas Recursos para diferentes DPIs

Temas e Tipograa

Holo Light

Holo Dark

Holo Light/Dark

Iconograa

Icones

Action Bar

Noticaes

Padres de UI
Action Bar

Multi-pane

Selection

Exemplo: Navegao com Up vs. Back

Action Bar: Geral

Talvez o elemento MAIS IMPORTANTE ADAPTVEL a rotao e diferentes telas Pode ser CONTEXTUAL (ex.seleo) COMPOSTA por: Top Action Bar Middle Action Bar Bottom Action Bar

Action Bar: Elementos

Scrollable Tabs

Spinners

Fixed Tabs Buttons

Action Overow

Layouts Multiplane
Phone Tablet

Elementos

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

Web Apps

Contedo Web

Browser

Aplicativo com Web view

PDF

Links para os HIGs

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

Desenhando Interfaces
Importante iniciar com o NVEL mais BAIXO o possvel NO se apegue a DETALHES : use crculos, quadrados, retngulos Capturar visualmente a lista de FUNCIONALIDADES considerando a ORDEM denida pelo DIAGRAMA Use ELEMENTOS conhecidos, e considere o HIG da plataforma escolhida SOMENTE aps estes desenhos prontos voc pode passar para o COMPUTADOR para testar!

Meetings for iPad

Paolo Domenico Passeri

EXERCCIO: Desenhando sua INTERFACE

LEIAM novamente a Declarao de Denio do Produto (DDP) ANALISEM o diagrama de uxo e ESCOLHAM as telas a serem desenhadas DESENHEM as interfaces das telas no stencil USEM Post-Its para mostrar as interaes

Papel

1 hora

Lpis/Caneta Post-its Stencil

PROTOTIPAO RPIDA

O que PROTOTIPAO Rpida?

Utilizada para PROTOTIPAR objetos, conceitos, servios e interfaces Serve para se ter algo PALPVEL de maneira rpida que possam ser testados Visualizar as INTERFACES e USAR-LAS de maneira simples Traz RESULTADOS e agiliza o processo de ITERAO Podem ser utilizadas FERRAMENTAS fsicas, computacionais ou uma combinao de ambas DETALHES so irrelevantes, ou at PROIBIDOS

Ferramentas e Links

EXERCCIO: Protoripando a sua INTERFACE

REVISEM as interfaces desenhadas LEVEM as interfaces uma a uma para o computador UTILIZEM formas padro (circulos, quadrados, etc.) para representar elementos como botes, caixas de texto, etc. CRIEM os links denidos no Diagrama de Fluxo da Telas TESTEM o prottipo para avaliar a usabilidade

45 minutos

Coputador

LOOK & FEEL

Sua IDENTIDADE visual

Muitos dos CONTROLES e elementos padro das plataformas, podem ser customizados Pequenas mudanas podem dar um POLIMENTO especial para sua interface EVITE mudar radicalmente os controles que fazem aes PADRO CRIE temas diferentes, com cores, texturas, e imagens e teste o MELHOR Busque inspirao no MUNDO REAL!

Busque o LDICO...

...e o REAL

paolopasseri@gmail.com @paolopasseri paolopasseri

Muito Obrigado!