Mini Curso de Design de Interfaces para Dispositivos Móveis
-
Upload
paolo-passeri -
Category
Design
-
view
14.517 -
download
1
description
Transcript of Mini Curso de Design de Interfaces para Dispositivos Móveis
Minicurso Design de Interfaces para Dispositivos Móveis
Saturday, August 21, 2010
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!”
Saturday, August 21, 2010
Quem vos fala?
• Paolo Domenico Passeri
• Curioso por natureza!
• Engenheiro + Designer
• Pensar em soluções
• Antes: Aluno e Monitor de UxD no Faber-Ludens
• Hoje: Desenvolvimento de Produtos na Positivo Informática
Saturday, August 21, 2010
...e vocês?
Saturday, August 21, 2010
O curso
50%50%AtividadesConceitos = 4 horas4 horas =
Saturday, August 21, 2010
Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...
Saturday, August 21, 2010
• Facilidade
• Agilidade
• Intuitividade
• Algo “novo”
• Se surpreender
• “Transparência”
...e o que eles BUSCAM
Saturday, August 21, 2010
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!
Saturday, August 21, 2010
Não é um computador TRADICIONAL!
Saturday, August 21, 2010
A interface tem que ser REPENSADA...
CTRL+C, CTRL+V NÃO funciona!
Saturday, August 21, 2010
...para ATENDER ao dispositivo móvel
Somente os elementos CHAVE se mantém!
Saturday, August 21, 2010
PROCESSO de desenvolvimento
Conceito Design Desenvolvimento Distribuição Marketing Manutenção
Saturday, August 21, 2010
Atividade vs. Tempo
DesenvolvimentoDesign
Debug
Test
DESENVOLVIMENTO > DESIGN = RESUTADOS
Saturday, August 21, 2010
Atividade vs. Tempo
Desenvolvimento
Design
Debug
Test
DESIGN > DESENVOLVIMENTO = RESUTADOS
Saturday, August 21, 2010
Como vamos chegar lá?
Ideia(Refinar)
Processo(Executar)
Interface(Desenhar)
Saturday, August 21, 2010
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?
Saturday, August 21, 2010
Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.
- Mark Twain
“”
Saturday, August 21, 2010
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
Saturday, August 21, 2010
Meetings for iPadPaolo Domenico Passeri
Saturday, August 21, 2010
DESIGN como um DIFERENCIAL
Saturday, August 21, 2010
• 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?
Saturday, August 21, 2010
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
Saturday, August 21, 2010
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
Saturday, August 21, 2010
Qual destes você escolheria (deixe 8)?
1
8
15
2
9
16
3
10
17
4
11
18
5
12
6
13
7
14
Saturday, August 21, 2010
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”
45 minutos
• Papel
• Lápis/Caneta
• Cores
Saturday, August 21, 2010
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
Saturday, August 21, 2010
INTERAGINDO COM DISPOSITIVOS MÓVEIS
Saturday, August 21, 2010
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”
Saturday, August 21, 2010
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
Saturday, August 21, 2010
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
Saturday, August 21, 2010
ELE
ME
NT
OS
Limpa texto
ListasBotões ou Links
Indicadores de EsperaEntrada de Texto
Saturday, August 21, 2010
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
OLS
Saturday, August 21, 2010
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 hora• Papel
• Lápis/Caneta
Saturday, August 21, 2010
Meetings for iPadPaolo Domenico Passeri
Saturday, August 21, 2010
INTERFACE DE USUÁRIO
Saturday, August 21, 2010
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!
Saturday, August 21, 2010
Dispositivos Móveis
Saturday, August 21, 2010
Entendendo cada dispositivo
Tela / Resolução
3.5” /480x320 e 960x640
9.7” /1024x768
2.6” → 5.8” /240x320 →
480x548
3.5” → 4.5” /800x480
?
Auto-rotativa ✓ ✓ ✓ ✓ ?
Interface(s)
TouchscreenAcelerômetro
MicrofoneCâmera
GPS
TouchscreenAcelerômetro
MicrofoneGPS
TouchscreenAcelerômetro
MicrofoneCâmera
GPS
TouchscreenAcelerômetro
MicrofoneCâmera
GPS
TouchscreenAcelerômetro
MicrofoneCâmera
GPSRFID
Padronização ✓ ✓ ✗ ✓ ✗
Saturday, August 21, 2010
iPhone 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
Saturday, August 21, 2010
Diferentes ESTILOS de aplicativos
São BASEADOS em:
• Comportamentos e USO
• Características VISUAIS
• Modelo dos DADOS
• EXPERIÊNCIA de usuário
Como ESCOLHER ?
• 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?
Saturday, August 21, 2010
PRODUTIVIDADE
orga
niza
r in
form
açõe
s de
form
a H
IER
Á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
IME
RS
IVA TELA TODA, em ambientes ricos visualmente
• Muito peculiar
• Sem controles padrão
• Diversão, como jogos e rich-media
Saturday, August 21, 2010
INTERFACE de Usuário
Saturday, August 21, 2010
Status bar
Navegation bar
Toolbar
Tab bar
ELE
ME
NT
OS
Saturday, August 21, 2010
Alertas, Ações e View Modal
Saturday, August 21, 2010
Exemplo de “View Modal” MAL desenhada
Saturday, August 21, 2010
Tabelas
Simples Indexada Agrupada
Saturday, August 21, 2010
Controles
Busca Slider e Switch Segmentados Pickers
Saturday, August 21, 2010
Android : User Interface Guidelines
• Ainda em DESENVOLVIMENTO
• Seta as GUIAS para INTERAÇÕES e VISUAL
• Focado TOTALMENTE para DESENVOLVEDORES!
CONTEMPLA
• Criação de WIDGETS
• ATIVIDADES e TAREFAS
• Design de MENUS
Saturday, August 21, 2010
INC
ON
SIS
TÊ
NC
IA
Saturday, August 21, 2010
WIDGETS
• Um WIDGET apresenta para o usuário as informações mais importantes na HOME SCREEN
• Os PADRÕES de criação dependem da funcionalidade
MolduraWIDGETS
Tam
anho
s
Saturday, August 21, 2010
ATIVIDADES
Teclado Contatos Detalhes Edição
Saturday, August 21, 2010
MENUSM
enu
de O
pçõe
s
Menu de Contexto
Saturday, August 21, 2010
PDFSaturday, August 21, 2010
Links para os HIG’s
http://wiki.forum.nokia.com/index.php/Guidelines_for_Mobile_Interface_Design
http://developer.android.com/guide/practices/ui_guidelines/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
Saturday, August 21, 2010
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!
Saturday, August 21, 2010
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
Saturday, August 21, 2010
Meetings for iPadPaolo Domenico Passeri
Saturday, August 21, 2010
PROTOTIPAÇÃO RÁPIDA
Saturday, August 21, 2010
• 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?
Saturday, August 21, 2010
Saturday, August 21, 2010
Saturday, August 21, 2010
Ferramentas e Links
Saturday, August 21, 2010
LOOK & FEEL
Saturday, August 21, 2010
• 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
Saturday, August 21, 2010
Saturday, August 21, 2010
Busque o LÚDICO...
Saturday, August 21, 2010
...e o REAL
Saturday, August 21, 2010
Muito Obrigado!
paolopasseri
@paolopasseri
Saturday, August 21, 2010