O documento descreve um minicurso sobre design de interfaces para dispositivos móveis com as seguintes informações essenciais:
1) Os tópicos abordados no curso incluem entendimento de dispositivos móveis, definição de funcionalidades, importância do design, apresentação com ícones, padrões de interação e fluxo de interface.
2) O curso será ministrado por Paolo Domenico Passeri e terá duração de 4 horas divididas igualmente entre conceitos e atividades práticas.
3) Serão abordados
Mini Curso de Design de Interfaces para Dispositivos Móveis
1. Minicurso Design de Interfaces para Dispositivos Móveis
Saturday, August 21, 2010
2. 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
3. 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
5. O curso
50% 50%
4 horas = Conceitos Atividades = 4 horas
Saturday, August 21, 2010
6. Para ENTENDER os dispositivos móveis é importante
entender os seus USUÁRIOS...
Saturday, August 21, 2010
7. ...e o que eles
BUSCAM
• Facilidade
• Agilidade
• Intuitividade
• Algo “novo”
• Se surpreender
• “Transparência”
Saturday, August 21, 2010
8. Você tem que ser O USUÁRIO!
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?
Saturday, August 21, 2010
9. Não é um computador TRADICIONAL!
Saturday, August 21, 2010
10. A interface tem que ser REPENSADA...
CTRL+C, CTRL+V
NÃO funciona!
Saturday, August 21, 2010
11. ...para ATENDER ao dispositivo móvel
Somente os elementos
CHAVE se mantém!
Saturday, August 21, 2010
12. PROCESSO de desenvolvimento
Conceito Design Desenvolvimento Distribuição Marketing Manutenção
Saturday, August 21, 2010
13. Atividade vs. Tempo
Test
Debug
Desenvolvimento
Design
DESENVOLVIMENTO > DESIGN = RESUTADOS
Saturday, August 21, 2010
14. Atividade vs. Tempo
Test
Desenvolvimento
Debug
Design
DESIGN > DESENVOLVIMENTO = RESUTADOS
Saturday, August 21, 2010
15. Como vamos chegar lá?
Ideia Processo Interface
(Refinar) (Executar) (Desenhar)
Saturday, August 21, 2010
16. Refinando a sua Ideia
• 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?
“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”
Saturday, August 21, 2010
17. “ Desculpe porém não tive tempo de escrever
uma carta curta, então mandei uma longa.”
- Mark Twain
Saturday, August 21, 2010
18. 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
• Post-It
45 minutos • Papel
• Lápis/Caneta
Saturday, August 21, 2010
21. Por que ter DESIGN?
• 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!
Saturday, August 21, 2010
22. Estudo de Caso: CONVERT
• Aplicativo para conversão de unidades • Unidades vendidas: 197,424
• Preço: U$0.99 • Faturamento bruto: $195,450
• Lançado em Agosto de 2009 • Faturamento liquido: $137,065
2 meses
Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!
Saturday, August 21, 2010
23. 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
25. 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”
• Papel
45 minutos • Lápis/Caneta
• Cores
Saturday, August 21, 2010
26. 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
28. 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
29. 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
30. Manipulação INDIRETA Manipulação DIRETA/Touch/Haptic
• É necessário aprender o • Não existe mapeamento pois
mapeamento das teclas as teclas são “virtuais”
• Deve ser muito consistente • Difícil aprender todos os meios
• Não são muito flexíveis de entrada
• São muito flexíveis
• Joystick Direcional • Toques curtos e longos
• Botões Alfa-numéricos • Arrastar
• Soft-keys • Deslizar
• Rodas • Girar
• Pinçar e Expandir
Manipulação por GESTOS
• Utilizada através de sensores
• Através do dispositivo por completo
• Inclinando
• Asoprando
• Chacoalhando
Saturday, August 21, 2010
31. Botões ou Links Listas
ELEMENTOS
Indicadores de Espera
Entrada de Texto
Limpa texto
Saturday, August 21, 2010
32. 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
TOOLS
Saturday, August 21, 2010
33. 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
• Papel
1 hora
• Lápis/Caneta
Saturday, August 21, 2010
36. 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
39. 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
40. Diferentes ESTILOS de aplicativos
São BASEADOS em: Como ESCOLHER ?
• Comportamentos e USO • Qual a motivação do usuário para
usar este aplicativo?
• Características VISUAIS
• Qual a experiência de usuário que
• Modelo dos DADOS
você quer proporcionar?
• EXPERIÊNCIA de usuário
• Qual o seu objetivo para o aplicativo?
Saturday, August 21, 2010
41. PRODUTIVIDADE UTILITÁRIOS
organizar informações de forma HIERÁRQUICA
UMA TAREFA com pouco input do usuário
• Usuários abrem o aplicativo e a informação já
é apresentada
• Pouca interação
TELA TODA, em ambientes ricos visualmente
IMERSIVA
• Muito peculiar
• Organizar listas
• Sem controles
• Adicionar ou remover itens
padrão
• Entrar até o nível de
• Diversão, como
informação desejada e realizar
jogos e rich-media
atividades com ela
Saturday, August 21, 2010
46. Tabelas
Simples Indexada Agrupada
Saturday, August 21, 2010
47. Controles
Busca Slider e Switch Segmentados Pickers
Saturday, August 21, 2010
48. 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
50. 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
Tamanhos
WIDGETS
Moldura
Saturday, August 21, 2010
51. ATIVIDADES
Teclado Contatos Detalhes Edição
Saturday, August 21, 2010
52. MENUS
Menu de Opções
Menu de Contexto
Saturday, August 21, 2010
54. Links para os HIG’s
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/guide/practices/ui_guidelines/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
Saturday, August 21, 2010
55. 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
56. 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
• Papel
• Lápis/Caneta
1 hora
• Post-it’s
• Stencil
Saturday, August 21, 2010
59. O que é 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
Saturday, August 21, 2010
64. Sua IDENTIDADE visual
• 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!
Saturday, August 21, 2010