SlideShare uma empresa Scribd logo
Mini Curso

Design 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

!

Hanry Marcel Kluk
!
• Curioso por natureza!
• Co-fundador do da Iniciativa
Startup Curitiba
• Co-fundador da Snowman
Labs
• Designer, ilustrador, fotógrafo
amador, cozinheiro...
...e vocês?
O CURSO

40%
Conceitos
60%
Atividades
Para ENTENDER os dispositivos móveis é
importante entender os seus USUÁRIOS...
...E O QUE ELES
BUSCAM

!
•

Facilidade

•

Agilidade

•

Intuitividade

•

Algo “novo”

• Se surpreender
• “Transparência”
ENTENDA AS LIMITAÇÕES



Usuários não têm um PONTEIRO nos dedos
ENTENDA AS LIMITAÇÕES  



Nem são águias com super VISÃO
ENTENDA AS LIMITAÇÕES  



Geralmente interagem com   
um aplicativo POR VEZ.
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?
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 X TEMPO

Teste

Design
Desenvolvimento
Debug

	

	

DESENVOLVIMENTO > DESIGN =
ATIVIDADE X TEMPO

Desenvolvimento

Teste

Debug

	

	

Design

DESENVOLVIMENTO > DESIGN =
COMO VAMOS CHEGAR LÁ?

Ideia
(Refinar)

Processo
(Executar)

Interface
(Desenhar)
X-Y: TIPO DE APLICATIVO
Sério

  

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

Eficiência para Entreter
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.

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.

Divertido

Ferramenta

Entretenimento

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.

Eixo Y: Conteúdo
X-Y: TIPO DE APLICATIVO

Eixo X: Uso

Ferramenta

Entretenimento

Sério

Divertido

Eixo Y: Conteúdo
REFINANDO A SUA IDÉIA

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”
DECLARAÇÃO DE DEFINIÇÃO DO 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>>
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

30 MIN.

Post-it
Papel
Lápis/caneta
DESIGN COMO UM DIFERENCIAL
PORQUE 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!
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!
A IMPORTÂNCIA DOS ÍCONES
• É 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 VOCÊ JULGA
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 UM ÍCONE
• 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 MIN.

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
PADRÕES DE INTERAÇÃO

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 por GESTOS
•
•
•
•
•

  

Utilizada através de sensores
Através do dispositivo por completo
Inclinando
Asoprando
Chacoalhando

  
PADRÕES DE INTERAÇÃO
Manipulação DIRETA/Touch/Haptic
• Não existe mapeamento
pois as teclas são
“virtuais”

  

• Difícil aprender todos os
meios de entrada

  

• São muito flexíveis

  

  

• Toques curtos e longos
• Arrastar

• Deslizar

• Girar

  

• Pinçar e Expandir

  
PADRÕES DE INTERAÇÃO
Botões ou Links 


Indicadores de Espera

Listas

  
Limpa texto

  

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
MEU DIAGRAMA
• Você pode criar a sua própria
forma de diagramar o fluxo.
EXERCI'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
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

30 min.

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
iPhone (iOS) HIG : Introduçã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 nativos
DIFERENTES ESTILOS DE APLICATIVOS
Como ESCOLHER ?
•

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?

Comportamentos e USO

•

•

  

  
DIFERENTES ESTILOS DE APLICATIVOS
organizar informações de forma HIERÁRQUICA

PRODUTIVIDADE 


     

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

  
DIFERENTES ESTILOS DE APLICATIVOS

IMERSIVA

TELA TODA, em ambientes ricos
visualmente

     

Muito peculiar
Sem controles padrão
Diversão, como jogos e rich-media
INTERFACE DO USUÁRIO
ELEMENTOS
Status bar 


Navegation bar

Navegation bar

Toolbar
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
Toolbar

Pop-overs   
ATUALIZAÇÃO iOS 7
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 ousuá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
•
•
•
•
•
•
•

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).

iOS  7  UI  Transition  Guide    
https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/
Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-­‐CH6-­‐SW1    
GRID DE ÍCONES
GRID DE ÍCONES
Android: Design 

MUITOS DEVICES
MUUUUITOS DEVICES

3997 resoluções disponíveis - 2012
DISPOSITIVOS E DISPLAYS
•

Seja Flexível

OTIMIZE layouts para diferentes
telas
• Recursos para diferentes DPIs
•
TEMAS E TIPOGRAFIA

Holo Light		

	 Holo Dark 	 	

	

Holo Light/Dark
ICONOGRAFIA

Icones           Action  Bar             Notificações  
PADRÕES DE UI
Action Bar

Multi-pane   

Selection   
EXEMPLO DE NAVEGAÇÃO: 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

• Spinners

• Action Overflow   

• Scrollable Tabs

• Spinners

• Fixed Tabs   

!

• Buttons
LAYOUTS MULTIPLANE
Tablet   

Phone
ELEMENTOS

http://developer.android.com/design/downloads/index.html
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/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 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!
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
Stencil
PROTOTIPAÇÃO RÁPIDA
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
Kluk design dispositivos moveis ufpb 20131025
FERRAMENTAS E LINKS
https://gomockingbird.com/
http://www.mobilesketchbook.com/
http://keynotopia.com/
http://mockapp.com/download/
https://pidoco.com/en
http://balsamiq.com/products%23
EXERCÍCIO: DESENHANDO 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

1 HORA.

Computador
ALGUMAS DICAS
O QUE NÃO FAZER
•

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
Look & Feel
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
Muito Obrigado!
hanrykluk@gmail.com

Mais conteúdo relacionado

Semelhante a 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
Instituto Faber-Ludens
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces 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
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos 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
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
maumoreira
 
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
 
Mercado Livre Experience - Matias Gualino
Mercado Livre Experience - Matias GualinoMercado Livre Experience - Matias Gualino
Mercado Livre Experience - Matias Gualino
Matii Gualino
 
Mercado Pago - SDK mobile
Mercado Pago - SDK mobile Mercado Pago - SDK mobile
Mercado Pago - SDK mobile
melidevelopers
 
MLExperience - Matías Gualino
MLExperience - Matías GualinoMLExperience - Matías Gualino
MLExperience - Matías Gualino
Matii Gualino
 
App Inventor: Eu escolho você!
App Inventor: Eu escolho você!App Inventor: Eu escolho você!
App Inventor: Eu escolho você!
Anrafel Fernandes Pereira, MSc.
 
ux em aplicativos
ux em aplicativosux em aplicativos
ux em aplicativos
Thales Rodrigues
 
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
 
5667.pptx
5667.pptx5667.pptx
5667.pptx
GameFlixBR
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
Elton Minetto
 
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
 
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 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
 

Semelhante a Kluk design dispositivos moveis ufpb 20131025 (20)

Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces 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
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos 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
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
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
 
Mercado Livre Experience - Matias Gualino
Mercado Livre Experience - Matias GualinoMercado Livre Experience - Matias Gualino
Mercado Livre Experience - Matias Gualino
 
Mercado Pago - SDK mobile
Mercado Pago - SDK mobile Mercado Pago - SDK mobile
Mercado Pago - SDK mobile
 
MLExperience - Matías Gualino
MLExperience - Matías GualinoMLExperience - Matías Gualino
MLExperience - Matías Gualino
 
App Inventor: Eu escolho você!
App Inventor: Eu escolho você!App Inventor: Eu escolho você!
App Inventor: Eu escolho você!
 
ux em aplicativos
ux em aplicativosux em aplicativos
ux em aplicativos
 
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
 
5667.pptx
5667.pptx5667.pptx
5667.pptx
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
 
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...
 
Como construir uma boa realidade aumentada
Como construir uma boa realidade aumentadaComo construir uma boa realidade aumentada
Como construir uma boa realidade aumentada
 
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
 

Kluk design dispositivos moveis ufpb 20131025

  • 1. Mini Curso Design 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 ! Hanry Marcel Kluk ! • Curioso por natureza! • Co-fundador do da Iniciativa Startup Curitiba • Co-fundador da Snowman Labs • Designer, ilustrador, fotógrafo amador, cozinheiro...
  • 6. Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...
  • 7. ...E O QUE ELES BUSCAM ! • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência”
  • 8. ENTENDA AS LIMITAÇÕES 
 Usuários não têm um PONTEIRO nos dedos
  • 9. ENTENDA AS LIMITAÇÕES   
 Nem são águias com super VISÃO
  • 10. ENTENDA AS LIMITAÇÕES   
 Geralmente interagem com   um aplicativo POR VEZ.
  • 11. 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?
  • 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!
  • 18. COMO VAMOS CHEGAR LÁ? Ideia (Refinar) Processo (Executar) Interface (Desenhar)
  • 19. X-Y: TIPO DE APLICATIVO Sério   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 Eficiência para Entreter 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. 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. Divertido Ferramenta Entretenimento 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. Eixo Y: Conteúdo
  • 20. X-Y: TIPO DE APLICATIVO Eixo X: Uso Ferramenta Entretenimento Sério Divertido Eixo Y: Conteúdo
  • 21. REFINANDO A SUA IDÉIA 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”
  • 22. DECLARAÇÃO DE DEFINIÇÃO DO 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>>
  • 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 30 MIN. Post-it Papel Lápis/caneta
  • 24. DESIGN COMO UM DIFERENCIAL
  • 25. PORQUE 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!
  • 26. 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!
  • 27. A IMPORTÂNCIA DOS ÍCONES • É 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
  • 28. ANTES DE ENTRAR VOCÊ JULGA
  • 29. 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.
  • 30. EXERCÍCIO: DESENHANDO UM ÍCONE • 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 MIN. Papel Lápis/caneta Cores
  • 31. 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 • • • • • • •
  • 33. 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”
  • 35. 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
  • 36. PADRÕES DE INTERAÇÃO 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 por GESTOS • • • • •   Utilizada através de sensores Através do dispositivo por completo Inclinando Asoprando Chacoalhando  
  • 37. PADRÕES DE INTERAÇÃO Manipulação DIRETA/Touch/Haptic • Não existe mapeamento pois as teclas são “virtuais”   • Difícil aprender todos os meios de entrada   • São muito flexíveis     • Toques curtos e longos • Arrastar
 • Deslizar
 • Girar   • Pinçar e Expandir  
  • 38. PADRÕES DE INTERAÇÃO Botões ou Links 
 Indicadores de Espera Listas   Limpa texto   Entrada de Texto  
  • 39. 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
  • 40. MEU DIAGRAMA • Você pode criar a sua própria forma de diagramar o fluxo.
  • 41. EXERCI'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
  • 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 30 min. 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!
  • 47. iPhone (iOS) HIG : Introdução 

  • 48. 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 nativos
  • 49. DIFERENTES ESTILOS DE APLICATIVOS Como ESCOLHER ? • 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? Comportamentos e USO • •    
  • 50. DIFERENTES ESTILOS DE APLICATIVOS organizar informações de forma HIERÁRQUICA PRODUTIVIDADE 
     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  
  • 51. DIFERENTES ESTILOS DE APLICATIVOS IMERSIVA TELA TODA, em ambientes ricos visualmente     Muito peculiar Sem controles padrão Diversão, como jogos e rich-media
  • 53. ELEMENTOS Status bar 
 Navegation bar Navegation bar Toolbar
  • 54. AÇÕES E VIEW MODAL
  • 56. EXEMPLO DE VIEW MODAL MAL DESENHADA
  • 60. ATUALIZAÇÃO iOS 7 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 ousuário, porém não compete   • com o conteúdo   Profundidade • camadas visuais e movimento   • auxilia entendimento e prazer   • de usar o app.
  • 61. O QUE DEVO FAZER • • • • • • • 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). iOS  7  UI  Transition  Guide     https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/ Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-­‐CH6-­‐SW1    
  • 66. MUUUUITOS DEVICES 3997 resoluções disponíveis - 2012
  • 67. DISPOSITIVOS E DISPLAYS • Seja Flexível OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs •
  • 68. TEMAS E TIPOGRAFIA Holo Light Holo Dark Holo Light/Dark
  • 69. ICONOGRAFIA Icones         Action  Bar           Notificações  
  • 70. PADRÕES DE UI Action Bar Multi-pane   Selection  
  • 71. EXEMPLO DE NAVEGAÇÃO: UP vs. BACK
  • 72. 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
  • 73. ACTION BAR: ELEMENTOS • Spinners • Action Overflow   • Scrollable Tabs • Spinners • Fixed Tabs   ! • Buttons
  • 76. 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/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
  • 77. 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!
  • 78. 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 Stencil
  • 80. 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
  • 83. EXERCÍCIO: DESENHANDO 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 1 HORA. Computador
  • 85. O QUE NÃO FAZER • 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
  • 87. 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