Slides do workshop Design de Interfaces para Dispositivos Móveis realizado na Wealth Systems em Cascavel pelo professor Hanry Marcel Kluk. Junho de 2014.
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...
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?
18. COMO VAMOS CHEGAR LÁ?
Ideia
(Refinar)
Processo
(Executar)
Interface
(Desenhar)
19. 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.
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.
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.
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.
X-Y: TIPO DE APLICATIVO
Eixo X: Uso Eixo Y: ConteúdoDivertido
Sério
Entretenimento
Ferramenta
20. Eixo X: Uso Eixo Y: ConteúdoDivertido
Sério
Entretenimento
Ferramenta
X-Y: TIPO DE APLICATIVO
21. 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”
REFINANDO A SUA IDÉIA
22. 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>>
DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO
23. • 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
EXERCÍCIO: CRIANDO A SUA DECLARAÇÃO
30 MIN.
Post-it
Papel
Lápis/caneta
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. • 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!
ESTUDO DE CASO: CONVERT
27. • É 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
A IMPORTÂNCIA DOS ÍCONES
29. • 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.
COMO?
30. • 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”
EXERCÍCIO: DESENHANDO UM ÍCONE
30 MIN.
Papel
Lápis/caneta
Cores
31. • 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
FONTES DE ÍCONES
33. • 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”
MÉTODOS DE INTERAÇÃO
35. • 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
36. 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
37. 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
38. Botões ou Links
Indicadores de Espera
Entrada de Texto Limpa texto
PADRÕES DE INTERAÇÃO
Listas
39. • 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
DIAGRAMA DE FLUXO DAS TELAS
Tools
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. • 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
30 min.
Papel
Lápis/caneta
44. • 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!
UMA BOA INTERFACE DE USUÁRIO
48. 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
iPhone (iOS) HIG: INTRODUÇÃO
49. Como ESCOLHER ?
• Comportamentos e USO
• Características VISUAIS
• Modelo dos DADOS
• EXPERIÊNCIA de usuário
DIFERENTES ESTILOS DE APLICATIVOS
• 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?
50. PRODUTIVIDADE
organizarinformaçõesdeformaHIERÁRQUICA
UTILITÁRIOS
UMA TAREFA com pouco input do usuário
• Usuários abrem o aplicativo e a informação já
é apresentada • Pouca interação
Organizar listas Adicionar ou remover itens Entrar até o nível de informação desejada e
realizar atividades com ela
DIFERENTES ESTILOS DE APLICATIVOS
51. TELA TODA, em ambientes ricos
visualmente
Muito peculiar Sem controles padrão Diversão, como jogos e rich-media
IMERSIVA
DIFERENTES ESTILOS DE APLICATIVOS
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. • 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
O QUE DEVO FAZER
72. • 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 GERAL
73. • Scrollable Tabs
• Spinners
• Fixed Tabs
!
• Spinners
• Action Overflow
• Buttons
ACTION BAR: ELEMENTOS
77. • 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!
DESENHANDO INTERFACES
78. • 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
EXERCÍCIO: DESENHANDO SUA INTERFACE
1 HORA.
Papel
Lápis/caneta
Post-it
Stencil
80. • 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
83. • 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
EXERCÍCIO: DESENHANDO SUA INTERFACE
1 HORA. Computador
85. • 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
87. • 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
SUA IDENTIDADE VISUAL