SlideShare uma empresa Scribd logo
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!”
Eu...
• Paolo Domenico Passeri
• Curioso por natureza!
• Engenheiro + Designer +
MKT
• Antes: Co-Fundador, Aluno e
Professor do Faber-Ludens,
Gerente de Desenvolvimento
de Produtos na Positivo
Informática
• Hoje: me preparando para
voltar a estudar.
...e vocês?
O curso
60%
40%
Atividades
Conceitos
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)
X-Y: Tipo de Aplicativo
Sério
Divertido
Ferramenta
Entretenimento
Mais função menos forma
Um app de produtividade, como uma
Ferramenta Séria, cumpre uma tarefa bem
específica. Seu aplicativo deve rapidamente
e de maneira fácil, realizar o que 80% das
pessoas vão fazer com ele. Vá direto ao
ponto.
Eficiência para Entreter
O principal foco de um aplicativo de
entretenimento sério, é permitir que o
usuário consuma mídia. Usuários esperam
uma interface com customizações porém
fácil de navegar. A interface é o conteúdo.
Elementos inovadores
resolvendo problemas
Uma Ferramenta Divertida, têm o foco em
resolver ou alcançar algo porém incentiva a
exploração entregando informações
relevantes.
Jogar e se Divertir
Tipo de aplicativo que vai entreter o usuário
ou jogos. Seu foco deve ser somente um,
dar um momento de diversão. Vá direto ao
ponto e não use muito hierarquia. A história,
experiência e jogabilidade são cruciais.
Eixo X: uso Eixo Y: conteúdo
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?
A Declaração de Definição de Produto
Resuma a ideia em uma frase:
<<Diferenciação>> <<Solução>> para
<<Público>>
Exemplo:
<<Uma maneira rápida e fácil>> para <<criação de
ATA’s de reunião>> para <<profissionais de todas
as áreas>>
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 e o tipo do seu aplicativo (eixo x-y)
• LEVANTEM todas as funcionalidades que consigam pensar (brainstorm)
• CORTEM funcionalidades que não fazem parte do core (menos importantes)
• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES criando a declaração
1:30 horas
• Post-It
• Papel
• Lápis/Caneta
Meetings for iPad
Paolo 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
Antes de entrar no app você já o julga...
Qual destes você escolheria (deixe 8)?
1
8
15
2
9
16
3
10
17
4
11
18
5
12
6
13
7
14
Como?
• Foco em uma forma padrão, não
em diversos elementos que deixam
o icone “sujo”.
• Escolha cores com cuidado, use
cores da interface.
• Evite usar fotos e muito texto.
• Se usar uma marca, deixe somente
o necessário para dar
representatividade.
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”
1 hora
• 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
ELEMENTOS
Limpa texto
ListasBotões ou Links
Indicadores de Espera
Entrada 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
TOOLS
Meetings for iPad
Paolo 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
1:30 horas
• 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” e 4” /
480x320, 960x640 e
1136x640
7,9” e 9.7” /
1024x768 e
2048x1536
2.6” → 10.1” /
240x320 →
1280x800+
3.5” → 4.5” /
800x480
Auto-rotativa ✓ ✓ ✓ ✓
Interface(s)
Touchscreen
Acelerômetro
Microfone
Câmeras
GPS
Touchscreen
Acelerômetro
Microfone
Câmeras
GPS
Touchscreen
Acelerômetro
Microfone
Câmeras
GPS
RFID
Touchscreen
Acelerômetro
Microfone
Câmeras
GPS
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
organizarinformaçõesdeformaHIERÁRQUICA
• 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
IMERSIVATELA 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
ELEMENTOS
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
Atualização iOS 7
Filosofia
• Clareza texto é sempre
legível, icones são precisos,
adornos são sutís e foco em
funcionalidade é a inspiração.
• Deferência a UI ajuda o
usuário, porém não compete
com o conteúdo
• Profundidade
camadas visuais e movimento
auxilia entendimento e prazer
de usar o app.
O que devo fazer?
https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-CH6-SW1
iOS 7 UI Transition Guide
• App NOVO: já pense em usar elementos e UI para o iOS 7
• App LANÇADO: começem a pensar como re-desenar a interface para
iOS 7
• Fontes: Helvetica Neue (a fonte desta apresentação)
• Icone: Use o Grid
• Elementos: já use e se adapte aos novos
• UI Dynamics: uma engine física para dar movimento, fluidez e realidade
ao app (não somente animação).
Paleta de Cores
Icones “in app”
iOS7vs.iOS6
Icones
GriddosIcones
ElementosiOS7
ElementosiOS7
Video
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
MuitosDevices
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
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 iPad
Paolo 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
2 horas
• 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 com outras equipes
2:00 horas • Coputador
ALGUMAS DICAS
• Registro FORÇADO no primeiro uso
• Usar textos de DIFÍCIL LEITURA e evite
misturar diferentes FONTES
• Passar ALERTAS ambíguos ao usuário.
Use “labels” que representam o resultado
(Vizualizar vs. OK). Coloque afirmativa a
direita.
• Usar LINGUAGEM técnica que o usuário
não entende.
• Botões de voltar sem CONTEXTO
O que não fazer?
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
Inspiração
Busque o LÚDICO...
...e o REAL
Muito Obrigado!
paolopasseri
@paolopasseri
paolopasseri@gmail.com

Mais conteúdo relacionado

Mais procurados

Como construir uma boa realidade aumentada
Como construir uma boa realidade aumentadaComo construir uma boa realidade aumentada
Como construir uma boa realidade aumentada
Vinícius da Costa
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
Nelson Vasconcelos
 
Interfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveisInterfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveis
Juliana Lemos
 
Boas práticas para aplicativos android
Boas práticas para aplicativos androidBoas práticas para aplicativos android
Boas práticas para aplicativos android
Juliana Akemi
 
As vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobileAs vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobile
Dirceu Belém
 
Aula05 - Princípios de Marketing Digital
Aula05 - Princípios de Marketing DigitalAula05 - Princípios de Marketing Digital
Aula05 - Princípios de Marketing Digital
Marcio Nunes
 
Onboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson VasconcelosOnboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Nelson Vasconcelos
 
UX não é uma etapa, é estratégia.
UX não é uma etapa, é estratégia.UX não é uma etapa, é estratégia.
UX não é uma etapa, é estratégia.
Marcela Hippe
 
Apps Hibridos
Apps HibridosApps Hibridos
Apps Hibridos
Allan Marques Baptista
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
Vítor Teixeira
 

Mais procurados (10)

Como construir uma boa realidade aumentada
Como construir uma boa realidade aumentadaComo construir uma boa realidade aumentada
Como construir uma boa realidade aumentada
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
 
Interfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveisInterfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveis
 
Boas práticas para aplicativos android
Boas práticas para aplicativos androidBoas práticas para aplicativos android
Boas práticas para aplicativos android
 
As vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobileAs vantagens de se tornar um desenvolvedor mobile
As vantagens de se tornar um desenvolvedor mobile
 
Aula05 - Princípios de Marketing Digital
Aula05 - Princípios de Marketing DigitalAula05 - Princípios de Marketing Digital
Aula05 - Princípios de Marketing Digital
 
Onboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson VasconcelosOnboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson Vasconcelos
 
UX não é uma etapa, é estratégia.
UX não é uma etapa, é estratégia.UX não é uma etapa, é estratégia.
UX não é uma etapa, é estratégia.
 
Apps Hibridos
Apps HibridosApps Hibridos
Apps Hibridos
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
 

Semelhante a Mini Curso Design de Dispositivo Moveis

Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
Hanry Marcel Kluk
 
Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
Instituto Faber-Ludens
 
Design Digital em Plataformas Móveis
Design Digital em Plataformas MóveisDesign Digital em Plataformas Móveis
Design Digital em Plataformas Móveis
Paolo Passeri
 
Aula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação IAula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação I
Paolo Passeri
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
Bruno Biagioni Neto
 
Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8
Janynne Gomes
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
Juliana Gaiba
 
CRP-5215-0420-2014-09
CRP-5215-0420-2014-09CRP-5215-0420-2014-09
Engage
EngageEngage
Engage
Terence Reis
 
Eureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou HíbridoEureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou Híbrido
drbatiston
 
Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product Design
Product School
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
Renato Melo
 
Ux para agencias de publicidade
Ux para agencias de publicidade Ux para agencias de publicidade
Ux para agencias de publicidade
Danilo Sousa
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
Jane Vita
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
UTFPR
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuário
Renato Melo
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
Pedro Edson Silva Barros
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
Elton Minetto
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
Renato Melo
 
Apresentacao jornada-unesp-2011
Apresentacao jornada-unesp-2011Apresentacao jornada-unesp-2011
Apresentacao jornada-unesp-2011
Tadeu Araujo
 

Semelhante a Mini Curso Design de Dispositivo Moveis (20)

Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
 
Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
 
Design Digital em Plataformas Móveis
Design Digital em Plataformas MóveisDesign Digital em Plataformas Móveis
Design Digital em Plataformas Móveis
 
Aula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação IAula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação I
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
 
CRP-5215-0420-2014-09
CRP-5215-0420-2014-09CRP-5215-0420-2014-09
CRP-5215-0420-2014-09
 
Engage
EngageEngage
Engage
 
Eureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou HíbridoEureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou Híbrido
 
Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product Design
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
 
Ux para agencias de publicidade
Ux para agencias de publicidade Ux para agencias de publicidade
Ux para agencias de publicidade
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuário
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
Apresentacao jornada-unesp-2011
Apresentacao jornada-unesp-2011Apresentacao jornada-unesp-2011
Apresentacao jornada-unesp-2011
 

Mais de Paolo Passeri

Aula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação IAula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação I
Paolo Passeri
 
Aula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação IAula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação I
Paolo Passeri
 
Aula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação IAula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação I
Paolo Passeri
 
Aula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação IAula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação I
Paolo Passeri
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoI
Paolo Passeri
 
Software Livre
Software LivreSoftware Livre
Software Livre
Paolo Passeri
 

Mais de Paolo Passeri (6)

Aula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação IAula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação I
 
Aula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação IAula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação I
 
Aula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação IAula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação I
 
Aula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação IAula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação I
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoI
 
Software Livre
Software LivreSoftware Livre
Software Livre
 

Mini Curso Design de Dispositivo Moveis

  • 1. Minicurso Design de Interfaces para Dispositivos Móveis
  • 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!”
  • 3. Eu... • Paolo Domenico Passeri • Curioso por natureza! • Engenheiro + Designer + MKT • Antes: Co-Fundador, Aluno e Professor do Faber-Ludens, Gerente de Desenvolvimento de Produtos na Positivo Informática • Hoje: me preparando para voltar a estudar.
  • 6. Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...
  • 7. • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência” ...e o que eles BUSCAM
  • 8. Entenda as LIMITAÇÕES Usuários não têm um PONTEIRO nos dedos
  • 9. Entenda as LIMITAÇÕES Nem são AGUIAS, com super-visão
  • 10. Entenda as LIMITAÇÕES Geralmente vão interagir com UM aplicativos por vez
  • 11. 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!
  • 12. Não é um computador TRADICIONAL!
  • 13. A interface tem que ser REPENSADA... CTRL+C, CTRL+V NÃO funciona!
  • 14. ...para ATENDER ao dispositivo móvel Somente os elementos CHAVE se mantém!
  • 15. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção
  • 18. Como vamos chegar lá? Ideia (Refinar) Processo (Executar) Interface (Desenhar)
  • 19. X-Y: Tipo de Aplicativo Sério Divertido Ferramenta Entretenimento Mais função menos forma Um app de produtividade, como uma Ferramenta Séria, cumpre uma tarefa bem específica. Seu aplicativo deve rapidamente e de maneira fácil, realizar o que 80% das pessoas vão fazer com ele. Vá direto ao ponto. Eficiência para Entreter O principal foco de um aplicativo de entretenimento sério, é permitir que o usuário consuma mídia. Usuários esperam uma interface com customizações porém fácil de navegar. A interface é o conteúdo. Elementos inovadores resolvendo problemas Uma Ferramenta Divertida, têm o foco em resolver ou alcançar algo porém incentiva a exploração entregando informações relevantes. Jogar e se Divertir Tipo de aplicativo que vai entreter o usuário ou jogos. Seu foco deve ser somente um, dar um momento de diversão. Vá direto ao ponto e não use muito hierarquia. A história, experiência e jogabilidade são cruciais. Eixo X: uso Eixo Y: conteúdo
  • 20. 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?
  • 21. A Declaração de Definição de Produto Resuma a ideia em uma frase: <<Diferenciação>> <<Solução>> para <<Público>> Exemplo: <<Uma maneira rápida e fácil>> para <<criação de ATA’s de reunião>> para <<profissionais de todas as áreas>>
  • 22. Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa. - Mark Twain “ ”
  • 23. EXERCÍCIO: Criando a sua DECLARAÇÃO • ESCOLHAM uma categoria de aplicativo dos Post-It`s • DEFINAM quem será o público alvo e o tipo do seu aplicativo (eixo x-y) • LEVANTEM todas as funcionalidades que consigam pensar (brainstorm) • CORTEM funcionalidades que não fazem parte do core (menos importantes) • JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES criando a declaração 1:30 horas • Post-It • Papel • Lápis/Caneta
  • 24. Meetings for iPad Paolo Domenico Passeri
  • 25. DESIGN como um DIFERENCIAL
  • 26. • 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?
  • 27. 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
  • 28. 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
  • 29. Antes de entrar no app você já o julga...
  • 30. Qual destes você escolheria (deixe 8)? 1 8 15 2 9 16 3 10 17 4 11 18 5 12 6 13 7 14
  • 31. Como? • Foco em uma forma padrão, não em diversos elementos que deixam o icone “sujo”. • Escolha cores com cuidado, use cores da interface. • Evite usar fotos e muito texto. • Se usar uma marca, deixe somente o necessário para dar representatividade.
  • 32. 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” 1 hora • Papel • Lápis/Caneta • Cores
  • 33. 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
  • 35. 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”
  • 36. Exemplo de Aplicativo Anotação Localização Lembrete
  • 37. 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
  • 38. 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
  • 39. ELEMENTOS Limpa texto ListasBotões ou Links Indicadores de Espera Entrada de Texto
  • 40. 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
  • 41. Meetings for iPad Paolo Domenico Passeri
  • 42. 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:30 horas • Papel • Lápis/Caneta
  • 44. 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!
  • 46. Entendendo cada dispositivo Tela / Resolução 3.5” e 4” / 480x320, 960x640 e 1136x640 7,9” e 9.7” / 1024x768 e 2048x1536 2.6” → 10.1” / 240x320 → 1280x800+ 3.5” → 4.5” / 800x480 Auto-rotativa ✓ ✓ ✓ ✓ Interface(s) Touchscreen Acelerômetro Microfone Câmeras GPS Touchscreen Acelerômetro Microfone Câmeras GPS Touchscreen Acelerômetro Microfone Câmeras GPS RFID Touchscreen Acelerômetro Microfone Câmeras GPS Padronização ✓ ✓ ✗ ✓
  • 47. 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
  • 48. 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 ?
  • 49. PRODUTIVIDADE organizarinformaçõesdeformaHIERÁRQUICA • 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 IMERSIVATELA TODA, em ambientes ricos visualmente • Muito peculiar • Sem controles padrão • Diversão, como jogos e rich-media
  • 52. Ações e View Modal
  • 54. Exemplo de “View Modal” MAL desenhada
  • 56. Controles Busca Slider e Switch Segmentados Pickers
  • 59. Filosofia • Clareza texto é sempre legível, icones são precisos, adornos são sutís e foco em funcionalidade é a inspiração. • Deferência a UI ajuda o usuário, porém não compete com o conteúdo • Profundidade camadas visuais e movimento auxilia entendimento e prazer de usar o app.
  • 60. O que devo fazer? https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-CH6-SW1 iOS 7 UI Transition Guide • App NOVO: já pense em usar elementos e UI para o iOS 7 • App LANÇADO: começem a pensar como re-desenar a interface para iOS 7 • Fontes: Helvetica Neue (a fonte desta apresentação) • Icone: Use o Grid • Elementos: já use e se adapte aos novos • UI Dynamics: uma engine física para dar movimento, fluidez e realidade ao app (não somente animação).
  • 68.
  • 69. Video
  • 70. 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
  • 72. Dispositivos e Displays • Seja FLEXÍVEL • OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs
  • 73. Temas e Tipografia Holo DarkHolo Light Holo Light/Dark
  • 75. Padrões de UI Action Bar Multi-pane Selection
  • 77. 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
  • 78. Action Bar: Elementos Scrollable Tabs Fixed Tabs Spinners Buttons Action Overflow
  • 81. PDF
  • 82. 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
  • 83. 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!
  • 84. Meetings for iPad Paolo Domenico Passeri
  • 85. 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 2 horas • Papel • Lápis/Caneta • Post-it’s • Stencil
  • 87. • 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?
  • 88.
  • 89.
  • 91. 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 com outras equipes 2:00 horas • Coputador
  • 93. • Registro FORÇADO no primeiro uso • Usar textos de DIFÍCIL LEITURA e evite misturar diferentes FONTES • Passar ALERTAS ambíguos ao usuário. Use “labels” que representam o resultado (Vizualizar vs. OK). Coloque afirmativa a direita. • Usar LINGUAGEM técnica que o usuário não entende. • Botões de voltar sem CONTEXTO O que não fazer?
  • 95. • 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
  • 96.