Upload
instituto-faber-ludens
View
221
Download
1
Embed Size (px)
DESCRIPTION
Slides do workshop Design de Interfaces para Dispositivos Móveis realizado na Wealth Systems em Cascavel pelo professor Hanry Marcel Kluk. Junho de 2014.
Citation preview
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!
Manutenção
PROCESSO DE DESENVOLVIMENTO
Conceito Design Desenvolvimento
Distribuição Marketing
DESENVOLVIMENTO > DESIGN =
ATIVIDADE X TEMPO
Debug
Teste
Design
Desenvolvimento
DESENVOLVIMENTO > DESIGN =
ATIVIDADE X TEMPO
Debug
Teste
Design
Desenvolvimento
COMO VAMOS CHEGAR LÁ?
Ideia (Refinar)
Processo (Executar)
Interface (Desenhar)
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
Entre
teni
men
to
Ferra
men
ta
Eixo X: Uso Eixo Y: ConteúdoDivertido
Sério
Entre
teni
men
to
Ferra
men
ta
X-Y: TIPO DE APLICATIVO
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
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
• 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
DESIGN COMO UM DIFERENCIAL
PORQUE TERDESIGN?!
• 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!
• 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
• É 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
ANTES DE ENTRAR VOCÊ JULGA
• 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?
• 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
• 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
INTERAGINDO COM DISPOSITIVOS MÓVEIS
• 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
EXEMPLO DE APLICATIVO
Anotação Localização Lembrete
• 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
Entrada de Texto Limpa texto
PADRÕES DE INTERAÇÃOListas
• 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
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
• 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
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!
UMA BOA INTERFACE DE USUÁRIO
DISPOSITIVOS MÓVEIS
ENTENDENDO CADA DISPOSITIVO
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
iPhone (iOS) HIG: INTRODUÇÃO
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?
PRODUTIVIDADE
orga
nizar
info
rmaç
ões
de fo
rma
HIER
ÁRQ
UICA
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
TELA TODA, em ambientes ricos visualmente
Muito peculiar Sem controles padrão
Diversão, como jogos e rich-media
IMER
SIVA
DIFERENTES ESTILOS DE APLICATIVOS
INTERFACE DO USUÁRIO
Status bar
Navegation bar
Navegation bar
Toolbar
ELEMENTOS
AÇÕES E VIEW MODAL
ALERTAS E NOTIFICAÇÕES
EXEMPLO DE VIEW MODAL MAL DESENHADA
Simples Indexada Agrupada
TABELAS
Pickers
CONTROLES
Busca Slider e Switch Segmentados
Toolbar
Pop-overs
iPad
ATUALIZAÇÃO iOS 7Clareza • 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.
• 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
GRID DE ÍCONES
GRID DE ÍCONES
Android: Design
MUITOS DEVICES
MUUUUITOS DEVICES
3997 resoluções disponíveis - 2012
• Seja Flexível
• OTIMIZE layouts para diferentes telas
• Recursos para diferentes DPIs
DISPOSITIVOS E DISPLAYS
Holo Light Holo Dark Holo Light/Dark
TEMAS E TIPOGRAFIA
Icones Action Bar Notificações
ICONOGRAFIA
Action Bar
Multi-pane
Selection
PADRÕES DE UI
EXEMPLO DE NAVEGAÇÃO: UP vs. BACK
• 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
• Scrollable Tabs
• Spinners
• Fixed Tabs !
• Spinners
• Action Overflow
• Buttons
ACTION BAR: ELEMENTOS
Phone
Tablet
LAYOUTS MULTIPLANE
http://developer.android.com/design/downloads/index.html
ELEMENTOS
• 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
LINKS PARA OS HIG´S
• 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
• 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
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 https://gomockingbird.com/
http://www.mobilesketchbook.com/
http://keynotopia.com/
http://mockapp.com/download/
https://pidoco.com/en
http://balsamiq.com/products%23
• 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
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
SUA IDENTIDADE VISUAL
Muito Obrigado!