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!”
Quem vos fala?
• Paolo Domenico Passeri


• Curioso por natureza!


• Engenheiro + Designer + MKT


• Pensar em soluções


• Antes: Aluno, Monitor e
  Professor do Faber-Ludens


• Hoje: Gerente de
  Desenvolvimento de Produtos
  na Positivo Informática
...e vocês?
O curso




                50%          50%
  4 horas =   Conceitos   Atividades   = 4 horas
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 AGUIAS, com super-visão
Entenda as LIMITAÇÕES


         Geralmente vão interagir com UM aplicativos 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 vs. Tempo


                       Test

              Debug

                              Desenvolvimento
              Design




  DESENVOLVIMENTO > DESIGN = RESUTADOS
Atividade vs. Tempo


                      Test
                                Desenvolvimento
              Debug




                       Design




  DESIGN > DESENVOLVIMENTO = RESUTADOS
Como vamos chegar lá?




  Ideia          Processo       Interface
  (Refinar)         (Executar)   (Desenhar)
Refinando a sua Ideia

•   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”
“ 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 para o seu aplicativo


• LEVANTEM todas as funcionalidades que consigam pensar


• CORTEM funcionalidades que não fazem parte do core (menos importantes)


• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES


                                                       • Post-It

             45 minutos                                • Papel
                                                       • Lápis/Caneta
Meetings for iPad
Paolo Domenico Passeri
DESIGN como um DIFERENCIAL
Por que 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   • Unidades vendidas: 197,424
• Preço: U$0.99                           • Faturamento bruto: $195,450
• Lançado em Agosto de 2009               • Faturamento liquido: $137,065

                                                                          2 meses




   Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!
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
Qual destes você escolheria (deixe 8)?
   1           2           3             4




        5            6            7




   8           9           10            11




        12           13           14




   15          16          17            18
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”


                                                    • Papel

             30 minutos                             • 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                            Manipulação DIRETA/Touch/Haptic
               • É necessário aprender o                        • Não existe mapeamento pois
               mapeamento das teclas                            as teclas são “virtuais”
               • Deve ser muito consistente                     • Difícil aprender todos os meios
               • Não são muito flexíveis                         de entrada
                                                                • São muito flexíveis

               • Joystick Direcional                            • Toques curtos e longos
               • Botões Alfa-numéricos                          • Arrastar
               • Soft-keys                                      • Deslizar
               • Rodas                                          • Girar
                                                                • Pinçar e Expandir



Manipulação por GESTOS
• Utilizada através de sensores
• Através do dispositivo por completo



                               • Inclinando
                               • Asoprando
                               • Chacoalhando
Botões ou Links           Listas
ELEMENTOS


            Indicadores de Espera
                                    Entrada de Texto




            Limpa 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




                                                      • Papel
             45 minutos
                                                      • 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




                   3.5” /          9.7” /      2.6” → 10.1” /
    Tela /                                                      3.5” → 4.5” /
                 480x320 e      1024x768 e      240x320 →                            ?
  Resolução                                                       800x480
                  960x640       2048x1536       1280x800+



 Auto-rotativa       ✓              ✓                ✓              ✓               ?

                 Touchscreen    Touchscreen      Touchscreen    Touchscreen     Touchscreen
                 Acelerômetro   Acelerômetro     Acelerômetro   Acelerômetro    Acelerômetro
                                                  Microfone                      Microfone
  Interface(s)    Microfone      Microfone         Câmeras
                                                                 Microfone        Câmeras
                   Câmeras        Câmeras            GPS          Câmeras           GPS
                     GPS            GPS              RFID           GPS             RFID




 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
Como ESCOLHER ?
 • Comportamentos e USO      • Qual a motivação do usuário para
                               usar este aplicativo?
 • Características VISUAIS
                             • Qual a experiência de usuário que
 • Modelo dos DADOS
                               você quer proporcionar?
 • EXPERIÊNCIA de usuário
                             • Qual o seu objetivo para o aplicativo?
PRODUTIVIDADE                                                                      UTILITÁRIOS




                               organizar informações de forma HIERÁRQUICA
                                                                                       UMA TAREFA com pouco input do usuário
                                                                                       • Usuários abrem o aplicativo e a informação já
                                                                                         é apresentada

                                                                                       • Pouca interação




                                                                                       TELA TODA, em ambientes ricos visualmente
                                                                            IMERSIVA
                                                                                                                       • Muito peculiar
• Organizar listas
                                                                                                                       • Sem controles
• Adicionar ou remover itens
                                                                                                                         padrão
• Entrar até o nível de
                                                                                                                       • Diversão, como
  informação desejada e realizar
                                                                                                                         jogos e rich-media
  atividades com ela
INTERFACE de Usuário
Status bar
                         Navegation bar
ELEMENTOS


             Tab 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
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
Muitos Devices
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: 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



                               Spinners
Scrollable Tabs




                                           Action
Fixed Tabs                                Overflow

                         Buttons
Layouts Multiplane

         Phone       Tablet
Elementos




http://developer.android.com/design/downloads/index.html
Web Apps




                     Conteúdo Web




           Browser              Aplicativo com
                                  Web view
PDF
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!
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




                                                    • Papel
                                                    • Lápis/Caneta
             1 hora
                                                    • Post-it’s
                                                    • 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
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



             45 minutos                                • Coputador
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


• Busque inspiração no MUNDO REAL!
Busque o LÚDICO...
...e o REAL
paolopasseri@gmail.com


  @paolopasseri


  paolopasseri



Muito Obrigado!

Design de Interfaces para Dispositivos Móveis

  • 1.
    Minicurso Design de Interfaces para Dispositivos Móveis
  • 2.
    Tópicos • Entendendo DispositivosMó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.
    Quem vos fala? •Paolo Domenico Passeri • Curioso por natureza! • Engenheiro + Designer + MKT • Pensar em soluções • Antes: Aluno, Monitor e Professor do Faber-Ludens • Hoje: Gerente de Desenvolvimento de Produtos na Positivo Informática
  • 4.
  • 5.
    O curso 50% 50% 4 horas = Conceitos Atividades = 4 horas
  • 6.
    Para ENTENDER osdispositivos móveis é importante entender os seus USUÁRIOS...
  • 7.
    ...e o queeles 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 AGUIAS, com super-visão
  • 10.
    Entenda as LIMITAÇÕES Geralmente vão interagir com UM aplicativos por vez
  • 11.
    Você tem queser 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 é umcomputador TRADICIONAL!
  • 13.
    A interface temque ser REPENSADA... CTRL+C, CTRL+V NÃO funciona!
  • 14.
    ...para ATENDER aodispositivo móvel Somente os elementos CHAVE se mantém!
  • 15.
    PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção
  • 16.
    Atividade vs. Tempo Test Debug Desenvolvimento Design DESENVOLVIMENTO > DESIGN = RESUTADOS
  • 17.
    Atividade vs. Tempo Test Desenvolvimento Debug Design DESIGN > DESENVOLVIMENTO = RESUTADOS
  • 18.
    Como vamos chegarlá? Ideia Processo Interface (Refinar) (Executar) (Desenhar)
  • 19.
    Refinando a suaIdeia • 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”
  • 20.
    “ Desculpe porémnão tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
  • 21.
    EXERCÍCIO: Criando asua DECLARAÇÃO • ESCOLHAM uma categoria de aplicativo dos Post-It`s • DEFINAM quem será o público alvo para o seu aplicativo • LEVANTEM todas as funcionalidades que consigam pensar • CORTEM funcionalidades que não fazem parte do core (menos importantes) • JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES • Post-It 45 minutos • Papel • Lápis/Caneta
  • 22.
    Meetings for iPad PaoloDomenico Passeri
  • 23.
    DESIGN como umDIFERENCIAL
  • 24.
    Por que 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!
  • 25.
    Estudo de Caso:CONVERT • Aplicativo para conversão de unidades • Unidades vendidas: 197,424 • Preço: U$0.99 • Faturamento bruto: $195,450 • Lançado em Agosto de 2009 • Faturamento liquido: $137,065 2 meses Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!
  • 26.
    A importância dosICONES • É 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
  • 27.
    Qual destes vocêescolheria (deixe 8)? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  • 28.
    EXERCÍCIO: Desenhando oICONE • 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” • Papel 30 minutos • Lápis/Caneta • Cores
  • 29.
    Fontes de ícones iOSToolbar 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
  • 30.
  • 31.
    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”
  • 32.
    Exemplo de Aplicativo Anotação Localização Lembrete
  • 33.
    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
  • 34.
    Manipulação INDIRETA Manipulação DIRETA/Touch/Haptic • É necessário aprender o • Não existe mapeamento pois mapeamento das teclas as teclas são “virtuais” • Deve ser muito consistente • Difícil aprender todos os meios • Não são muito flexíveis de entrada • São muito flexíveis • Joystick Direcional • Toques curtos e longos • Botões Alfa-numéricos • Arrastar • Soft-keys • Deslizar • Rodas • Girar • Pinçar e Expandir Manipulação por GESTOS • Utilizada através de sensores • Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando
  • 35.
    Botões ou Links Listas ELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto
  • 36.
    Diagrama de FLUXOdas 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
  • 37.
    Meetings for iPad PaoloDomenico Passeri
  • 38.
    EXERCÍCIO: Traçando seuDIAGRAMA • 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 • Papel 45 minutos • Lápis/Caneta
  • 39.
  • 40.
    Uma BOA interfacede 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!
  • 41.
  • 42.
    Entendendo cada dispositivo 3.5” / 9.7” / 2.6” → 10.1” / Tela / 3.5” → 4.5” / 480x320 e 1024x768 e 240x320 → ? Resolução 800x480 960x640 2048x1536 1280x800+ Auto-rotativa ✓ ✓ ✓ ✓ ? Touchscreen Touchscreen Touchscreen Touchscreen Touchscreen Acelerômetro Acelerômetro Acelerômetro Acelerômetro Acelerômetro Microfone Microfone Interface(s) Microfone Microfone Câmeras Microfone Câmeras Câmeras Câmeras GPS Câmeras GPS GPS GPS RFID GPS RFID Padronização ✓ ✓ ✗ ✓ ✗
  • 43.
    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
  • 44.
    Diferentes ESTILOS deaplicativos Como ESCOLHER ? • Comportamentos e USO • Qual a motivação do usuário para usar este aplicativo? • Características VISUAIS • Qual a experiência de usuário que • Modelo dos DADOS você quer proporcionar? • EXPERIÊNCIA de usuário • Qual o seu objetivo para o aplicativo?
  • 45.
    PRODUTIVIDADE UTILITÁRIOS organizar informações de forma HIERÁRQUICA UMA TAREFA com pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada • Pouca interação TELA TODA, em ambientes ricos visualmente IMERSIVA • Muito peculiar • Organizar listas • Sem controles • Adicionar ou remover itens padrão • Entrar até o nível de • Diversão, como informação desejada e realizar jogos e rich-media atividades com ela
  • 46.
  • 47.
    Status bar Navegation bar ELEMENTOS Tab bar Toolbar
  • 48.
  • 49.
  • 50.
    Exemplo de “ViewModal” MAL desenhada
  • 51.
    Tabelas Simples Indexada Agrupada
  • 52.
    Controles Busca Slider e Switch Segmentados Pickers
  • 53.
    iPad Toolbar Pop-overs
  • 54.
    Android: Design • Setaas 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
  • 55.
  • 56.
    Dispositivos e Displays •Seja FLEXÍVEL • OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs
  • 57.
    Temas e Tipografia Holo Light Holo Dark Holo Light/Dark
  • 58.
    Iconografia Icones Action Bar Notificações
  • 59.
    Padrões de UI Action Bar Multi-pane Selection
  • 60.
  • 61.
    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
  • 62.
    Action Bar: Elementos Spinners Scrollable Tabs Action Fixed Tabs Overflow Buttons
  • 63.
    Layouts Multiplane Phone Tablet
  • 64.
  • 65.
    Web Apps Conteúdo Web Browser Aplicativo com Web view
  • 66.
  • 67.
    Links para osHIG’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
  • 68.
    Desenhando Interfaces • Importanteiniciar 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!
  • 69.
    Meetings for iPad PaoloDomenico Passeri
  • 70.
    EXERCÍCIO: Desenhando suaINTERFACE • 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 • Papel • Lápis/Caneta 1 hora • Post-it’s • Stencil
  • 71.
  • 72.
    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
  • 75.
  • 76.
    EXERCÍCIO: Protoripando asua 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 45 minutos • Coputador
  • 77.
  • 78.
    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 • Busque inspiração no MUNDO REAL!
  • 80.
  • 81.
  • 82.
    [email protected] @paolopasseri paolopasseri Muito Obrigado!