Workshop Design para Dispositivos Móveis
Upcoming SlideShare
Loading in...5
×
 

Workshop Design para Dispositivos Móveis

on

  • 118 views

Slides do workshop Design de Interfaces para Dispositivos Móveis realizado na Wealth Systems em Cascavel pelo professor Hanry Marcel Kluk. Junho de 2014.

Slides do workshop Design de Interfaces para Dispositivos Móveis realizado na Wealth Systems em Cascavel pelo professor Hanry Marcel Kluk. Junho de 2014.

Statistics

Views

Total Views
118
Views on SlideShare
118
Embed Views
0

Actions

Likes
2
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Workshop Design para Dispositivos Móveis Workshop Design para Dispositivos Móveis Presentation Transcript

  • 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 Entretenimento Ferramenta
  • Eixo X: Uso Eixo Y: ConteúdoDivertido Sério Entretenimento Ferramenta 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 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!
  • • 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ÇÃO Listas
  • • 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 
 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
  • TELA TODA, em ambientes ricos visualmente Muito peculiar  Sem controles padrão  Diversão, como jogos e rich-media IMERSIVA 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 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.
  • • 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!
  • hanrykluk@gmail.com