SlideShare une entreprise Scribd logo
1  sur  68
Télécharger pour lire hors ligne
Minicurso   Design de Interfaces para Dispositivos Móveis


Saturday, August 21, 2010
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!”

Saturday, August 21, 2010
Quem vos fala?
       • Paolo Domenico Passeri


       • Curioso por natureza!


       • Engenheiro + Designer


       • Pensar em soluções


       • Antes: Aluno e Monitor de UxD
         no Faber-Ludens


       • Hoje: Desenvolvimento de
         Produtos na Positivo
         Informática


Saturday, August 21, 2010
...e vocês?




Saturday, August 21, 2010
O curso




                              50%          50%
               4 horas =    Conceitos   Atividades   = 4 horas




Saturday, August 21, 2010
Para ENTENDER os dispositivos móveis é importante
     entender os seus USUÁRIOS...
Saturday, August 21, 2010
...e o que eles
       BUSCAM

       • Facilidade


       • Agilidade


       • Intuitividade


       • Algo “novo”


       • Se surpreender


       • “Transparência”




Saturday, August 21, 2010
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?




Saturday, August 21, 2010
Não é um computador TRADICIONAL!




Saturday, August 21, 2010
A interface tem que ser REPENSADA...




                                      CTRL+C, CTRL+V
                                       NÃO funciona!

Saturday, August 21, 2010
...para ATENDER ao dispositivo móvel




                                     Somente os elementos
                                      CHAVE se mantém!

Saturday, August 21, 2010
PROCESSO de desenvolvimento




              Conceito      Design   Desenvolvimento   Distribuição   Marketing   Manutenção




Saturday, August 21, 2010
Atividade vs. Tempo


                                     Test

                            Debug

                                            Desenvolvimento
                            Design




                DESENVOLVIMENTO > DESIGN = RESUTADOS

Saturday, August 21, 2010
Atividade vs. Tempo


                                    Test
                                              Desenvolvimento
                            Debug




                                     Design




                 DESIGN > DESENVOLVIMENTO = RESUTADOS

Saturday, August 21, 2010
Como vamos chegar lá?




                 Ideia      Processo      Interface
                (Refinar)     (Executar)   (Desenhar)



Saturday, August 21, 2010
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”

Saturday, August 21, 2010
“ Desculpe porém não tive tempo de escrever
         uma carta curta, então mandei uma longa.”



                                      - Mark Twain




Saturday, August 21, 2010
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

Saturday, August 21, 2010
Meetings for iPad
                            Paolo Domenico Passeri




Saturday, August 21, 2010
DESIGN como um DIFERENCIAL


Saturday, August 21, 2010
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!




Saturday, August 21, 2010
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!
Saturday, August 21, 2010
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




Saturday, August 21, 2010
Qual destes você escolheria (deixe 8)?
                  1              2         3         4




                            5         6         7




                  8              9         10        11




                            12        13        14




                 15              16        17        18




Saturday, August 21, 2010
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

                            45 minutos                     • Lápis/Caneta
                                                           • Cores

Saturday, August 21, 2010
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




Saturday, August 21, 2010
INTERAGINDO COM DISPOSITIVOS MÓVEIS
Saturday, August 21, 2010
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”



Saturday, August 21, 2010
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



Saturday, August 21, 2010
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




Saturday, August 21, 2010
Botões ou Links       Listas
ELEMENTOS


                   Indicadores de Espera
                                               Entrada de Texto




                   Limpa texto
 Saturday, August 21, 2010
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




Saturday, August 21, 2010
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
                            1 hora
                                                             • Lápis/Caneta


Saturday, August 21, 2010
Meetings for iPad
                            Paolo Domenico Passeri




Saturday, August 21, 2010
INTERFACE DE USUÁRIO
Saturday, August 21, 2010
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!




Saturday, August 21, 2010
Dispositivos Móveis




Saturday, August 21, 2010
Entendendo cada dispositivo




                              3.5” /                      2.6” → 5.8” /
               Tela /                        9.7” /                       3.5” → 4.5” /
                            480x320 e                      240x320 →                           ?
             Resolução                     1024x768                         800x480
                             960x640                        480x548



           Auto-rotativa        ✓              ✓              ✓               ✓               ?

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




          Padronização          ✓              ✓               ✗              ✓               ✗

Saturday, August 21, 2010
iPhone 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




Saturday, August 21, 2010
Diferentes ESTILOS de aplicativos
         São BASEADOS em:              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?




Saturday, August 21, 2010
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




Saturday, August 21, 2010
INTERFACE de Usuário




Saturday, August 21, 2010
Status bar
                                          Navegation bar
ELEMENTOS


                              Tab bar



                                             Toolbar




 Saturday, August 21, 2010
Alertas, Ações e View Modal




Saturday, August 21, 2010
Exemplo de “View Modal” MAL desenhada




Saturday, August 21, 2010
Tabelas




                            Simples   Indexada   Agrupada



Saturday, August 21, 2010
Controles




                    Busca   Slider e Switch   Segmentados   Pickers




Saturday, August 21, 2010
Android : User Interface Guidelines

        • Ainda em DESENVOLVIMENTO


        • Seta as GUIAS para INTERAÇÕES e VISUAL


        • Focado TOTALMENTE para
          DESENVOLVEDORES!


            CONTEMPLA

                • Criação de WIDGETS

                • ATIVIDADES e TAREFAS

                • Design de MENUS



Saturday, August 21, 2010
INCONSISTÊNCIA




Saturday, August 21, 2010
WIDGETS
         • Um WIDGET apresenta para
           o usuário as informações
           mais importantes na HOME
           SCREEN

         • Os PADRÕES de criação
           dependem da funcionalidade
                            Tamanhos




                                                 WIDGETS
                                       Moldura

Saturday, August 21, 2010
ATIVIDADES




                   Teclado   Contatos   Detalhes   Edição




Saturday, August 21, 2010
MENUS
        Menu de Opções




                            Menu de Contexto




Saturday, August 21, 2010
PDF
Saturday, August 21, 2010
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/guide/practices/ui_guidelines/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




Saturday, August 21, 2010
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!



Saturday, August 21, 2010
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
Saturday, August 21, 2010
Meetings for iPad
                            Paolo Domenico Passeri




Saturday, August 21, 2010
PROTOTIPAÇÃO RÁPIDA


Saturday, August 21, 2010
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


Saturday, August 21, 2010
Saturday, August 21, 2010
Saturday, August 21, 2010
Ferramentas e Links




Saturday, August 21, 2010
LOOK & FEEL
Saturday, August 21, 2010
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!



Saturday, August 21, 2010
Saturday, August 21, 2010
Busque o LÚDICO...




Saturday, August 21, 2010
...e o REAL




Saturday, August 21, 2010
paolopasseri@gmail.com


                              @paolopasseri


                              paolopasseri



                            Muito Obrigado!

Saturday, August 21, 2010

Contenu connexe

En vedette

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de InterfacesAna Migowski
 
Introdução a dispositivos móveis.
Introdução a dispositivos móveis.Introdução a dispositivos móveis.
Introdução a dispositivos móveis.Eduardo Lagares
 
Competências para aprender e competências para ensinar COM TIC
Competências para aprender e competências para ensinar COM TICCompetências para aprender e competências para ensinar COM TIC
Competências para aprender e competências para ensinar COM TICFernando Albuquerque Costa
 
Introdução a Programação de Dispositivos Móveis
Introdução a Programação de Dispositivos MóveisIntrodução a Programação de Dispositivos Móveis
Introdução a Programação de Dispositivos Móveisigorpimentel
 
Histórias, Mitos e Aspirações das TIC na Educação em Portugal
Histórias, Mitos e Aspirações das TIC na Educação em PortugalHistórias, Mitos e Aspirações das TIC na Educação em Portugal
Histórias, Mitos e Aspirações das TIC na Educação em PortugalAntonio Dias de Figueiredo
 
Tipos de Aplicações Móveis
Tipos de Aplicações MóveisTipos de Aplicações Móveis
Tipos de Aplicações MóveisNeilor Caldeira
 
Boas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesBoas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesFelipe Almeida
 
Dispositivos Móveis - Mobile
Dispositivos Móveis - MobileDispositivos Móveis - Mobile
Dispositivos Móveis - Mobileruirodas
 
Excelência em gestão pública portifólio unopar (1)
Excelência em gestão pública   portifólio unopar (1)Excelência em gestão pública   portifólio unopar (1)
Excelência em gestão pública portifólio unopar (1)João Silva
 
Media kit Oxique - Maurício Pascoal
Media kit Oxique - Maurício PascoalMedia kit Oxique - Maurício Pascoal
Media kit Oxique - Maurício PascoalMaurício Pascoal
 
Media kit oxique - maurício pascoal
Media kit   oxique - maurício pascoalMedia kit   oxique - maurício pascoal
Media kit oxique - maurício pascoalMaurício Pascoal
 
Workshop gestao publica desafios e solucoes para entrega de melhores result...
Workshop gestao publica   desafios e solucoes para entrega de melhores result...Workshop gestao publica   desafios e solucoes para entrega de melhores result...
Workshop gestao publica desafios e solucoes para entrega de melhores result...EloGroup
 

En vedette (20)

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Dispositivos Móveis
Dispositivos MóveisDispositivos Móveis
Dispositivos Móveis
 
Dispositivos móveis na aula: apredizagem apoiada em projetos
Dispositivos móveis na aula: apredizagem apoiada em projetosDispositivos móveis na aula: apredizagem apoiada em projetos
Dispositivos móveis na aula: apredizagem apoiada em projetos
 
Introdução a dispositivos móveis.
Introdução a dispositivos móveis.Introdução a dispositivos móveis.
Introdução a dispositivos móveis.
 
Competências para aprender e competências para ensinar COM TIC
Competências para aprender e competências para ensinar COM TICCompetências para aprender e competências para ensinar COM TIC
Competências para aprender e competências para ensinar COM TIC
 
Introdução a Programação de Dispositivos Móveis
Introdução a Programação de Dispositivos MóveisIntrodução a Programação de Dispositivos Móveis
Introdução a Programação de Dispositivos Móveis
 
Histórias, Mitos e Aspirações das TIC na Educação em Portugal
Histórias, Mitos e Aspirações das TIC na Educação em PortugalHistórias, Mitos e Aspirações das TIC na Educação em Portugal
Histórias, Mitos e Aspirações das TIC na Educação em Portugal
 
Tipos de Aplicações Móveis
Tipos de Aplicações MóveisTipos de Aplicações Móveis
Tipos de Aplicações Móveis
 
Boas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesBoas Práticas em Design de Interfaces
Boas Práticas em Design de Interfaces
 
Dispositivos Móveis - Mobile
Dispositivos Móveis - MobileDispositivos Móveis - Mobile
Dispositivos Móveis - Mobile
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
 
Dispositivos móveis
Dispositivos móveisDispositivos móveis
Dispositivos móveis
 
Excelência em gestão pública portifólio unopar (1)
Excelência em gestão pública   portifólio unopar (1)Excelência em gestão pública   portifólio unopar (1)
Excelência em gestão pública portifólio unopar (1)
 
Media kit Oxique - Maurício Pascoal
Media kit Oxique - Maurício PascoalMedia kit Oxique - Maurício Pascoal
Media kit Oxique - Maurício Pascoal
 
Motivação - 13 Frases de Filmes Famosos
Motivação - 13 Frases de Filmes Famosos Motivação - 13 Frases de Filmes Famosos
Motivação - 13 Frases de Filmes Famosos
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Media kit oxique - maurício pascoal
Media kit   oxique - maurício pascoalMedia kit   oxique - maurício pascoal
Media kit oxique - maurício pascoal
 
Marketing na Gestão Pública?
Marketing na Gestão Pública?Marketing na Gestão Pública?
Marketing na Gestão Pública?
 
Workshop gestao publica desafios e solucoes para entrega de melhores result...
Workshop gestao publica   desafios e solucoes para entrega de melhores result...Workshop gestao publica   desafios e solucoes para entrega de melhores result...
Workshop gestao publica desafios e solucoes para entrega de melhores result...
 
Moda masculina
Moda masculinaModa masculina
Moda masculina
 

Similaire à Mini Curso de Design de Interfaces 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óveisInstituto Faber-Ludens
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Hanry Marcel Kluk
 
Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisInstituto Faber-Ludens
 
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 IPaolo Passeri
 
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
 
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árioBruno Biagioni Neto
 
Design Digital em Plataformas Móveis
Design Digital em Plataformas MóveisDesign Digital em Plataformas Móveis
Design Digital em Plataformas MóveisPaolo Passeri
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot CampUTFPR
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)Gustavo Gobbi
 
Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product DesignProduct School
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
A importância do design na qualidade de software
A importância do design na qualidade de softwareA importância do design na qualidade de software
A importância do design na qualidade de softwareJoao Costa
 
Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXNelson Vasconcelos
 
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de OliveiraInteração Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de OliveiraWellington Oliveira
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webLuanna Eroles
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no UsuárioDavi Busanello
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoWellington Oliveira
 
Lean UX + Lean Startup = S2
Lean UX + Lean Startup = S2Lean UX + Lean Startup = S2
Lean UX + Lean Startup = S2Neue Labs
 

Similaire à Mini Curso de Design de Interfaces para Dispositivos Móveis (20)

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
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
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
 
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
 
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
 
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
 
Design Digital em Plataformas Móveis
Design Digital em Plataformas MóveisDesign Digital em Plataformas Móveis
Design Digital em Plataformas Móveis
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
 
Principles and best practices of Product Design
Principles and best practices of Product DesignPrinciples and best practices of Product Design
Principles and best practices of Product Design
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
A importância do design na qualidade de software
A importância do design na qualidade de softwareA importância do design na qualidade de software
A importância do design na qualidade de software
 
Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UX
 
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de OliveiraInteração Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
Interação Humano Computador Plataforma Mobile - Wellington Pinto de Oliveira
 
UX Dos and Dont's
UX  Dos and Dont's UX  Dos and Dont's
UX Dos and Dont's
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
 
Workshop de UX, 02
Workshop de UX, 02Workshop de UX, 02
Workshop de UX, 02
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - Antecipação
 
Lean UX + Lean Startup = S2
Lean UX + Lean Startup = S2Lean UX + Lean Startup = S2
Lean UX + Lean Startup = S2
 

Plus de Paolo Passeri

Aula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação IAula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação IPaolo Passeri
 
Aula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação IAula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação IPaolo Passeri
 
Aula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação IAula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação IPaolo Passeri
 
Aula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação IAula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação IPaolo Passeri
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIPaolo Passeri
 

Plus de Paolo Passeri (6)

Aula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação IAula 4 - Tecnicas de Prototipação I
Aula 4 - Tecnicas de Prototipação I
 
Aula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação IAula 6 - Tecnicas de Prototipação I
Aula 6 - Tecnicas de Prototipação I
 
Aula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação IAula 5 - Tecnicas de Prototipação I
Aula 5 - Tecnicas de Prototipação I
 
Aula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação IAula 3 - Técnicas de Prototipação I
Aula 3 - Técnicas de Prototipação I
 
Aula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoIAula 1 - Técnicas de PrototipaçãoI
Aula 1 - Técnicas de PrototipaçãoI
 
Software Livre
Software LivreSoftware Livre
Software Livre
 

Mini Curso de Design de Interfaces para Dispositivos Móveis

  • 1. Minicurso Design de Interfaces para Dispositivos Móveis Saturday, August 21, 2010
  • 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!” Saturday, August 21, 2010
  • 3. Quem vos fala? • Paolo Domenico Passeri • Curioso por natureza! • Engenheiro + Designer • Pensar em soluções • Antes: Aluno e Monitor de UxD no Faber-Ludens • Hoje: Desenvolvimento de Produtos na Positivo Informática Saturday, August 21, 2010
  • 5. O curso 50% 50% 4 horas = Conceitos Atividades = 4 horas Saturday, August 21, 2010
  • 6. Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS... Saturday, August 21, 2010
  • 7. ...e o que eles BUSCAM • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência” Saturday, August 21, 2010
  • 8. 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? Saturday, August 21, 2010
  • 9. Não é um computador TRADICIONAL! Saturday, August 21, 2010
  • 10. A interface tem que ser REPENSADA... CTRL+C, CTRL+V NÃO funciona! Saturday, August 21, 2010
  • 11. ...para ATENDER ao dispositivo móvel Somente os elementos CHAVE se mantém! Saturday, August 21, 2010
  • 12. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção Saturday, August 21, 2010
  • 13. Atividade vs. Tempo Test Debug Desenvolvimento Design DESENVOLVIMENTO > DESIGN = RESUTADOS Saturday, August 21, 2010
  • 14. Atividade vs. Tempo Test Desenvolvimento Debug Design DESIGN > DESENVOLVIMENTO = RESUTADOS Saturday, August 21, 2010
  • 15. Como vamos chegar lá? Ideia Processo Interface (Refinar) (Executar) (Desenhar) Saturday, August 21, 2010
  • 16. 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” Saturday, August 21, 2010
  • 17. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain Saturday, August 21, 2010
  • 18. 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 Saturday, August 21, 2010
  • 19. Meetings for iPad Paolo Domenico Passeri Saturday, August 21, 2010
  • 20. DESIGN como um DIFERENCIAL Saturday, August 21, 2010
  • 21. 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! Saturday, August 21, 2010
  • 22. 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! Saturday, August 21, 2010
  • 23. 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 Saturday, August 21, 2010
  • 24. Qual destes você escolheria (deixe 8)? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Saturday, August 21, 2010
  • 25. 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 45 minutos • Lápis/Caneta • Cores Saturday, August 21, 2010
  • 26. 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 Saturday, August 21, 2010
  • 27. INTERAGINDO COM DISPOSITIVOS MÓVEIS Saturday, August 21, 2010
  • 28. 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” Saturday, August 21, 2010
  • 29. 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 Saturday, August 21, 2010
  • 30. 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 Saturday, August 21, 2010
  • 31. Botões ou Links Listas ELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto Saturday, August 21, 2010
  • 32. 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 Saturday, August 21, 2010
  • 33. 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 1 hora • Lápis/Caneta Saturday, August 21, 2010
  • 34. Meetings for iPad Paolo Domenico Passeri Saturday, August 21, 2010
  • 36. 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! Saturday, August 21, 2010
  • 38. Entendendo cada dispositivo 3.5” / 2.6” → 5.8” / Tela / 9.7” / 3.5” → 4.5” / 480x320 e 240x320 → ? Resolução 1024x768 800x480 960x640 480x548 Auto-rotativa ✓ ✓ ✓ ✓ ? Touchscreen Touchscreen Touchscreen Touchscreen Touchscreen Acelerômetro Acelerômetro Acelerômetro Acelerômetro Acelerômetro Microfone Interface(s) Microfone Microfone Microfone Microfone Câmera Câmera Câmera Câmera GPS GPS GPS GPS GPS RFID Padronização ✓ ✓ ✗ ✓ ✗ Saturday, August 21, 2010
  • 39. iPhone 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 Saturday, August 21, 2010
  • 40. Diferentes ESTILOS de aplicativos São BASEADOS em: 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? Saturday, August 21, 2010
  • 41. 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 Saturday, August 21, 2010
  • 43. Status bar Navegation bar ELEMENTOS Tab bar Toolbar Saturday, August 21, 2010
  • 44. Alertas, Ações e View Modal Saturday, August 21, 2010
  • 45. Exemplo de “View Modal” MAL desenhada Saturday, August 21, 2010
  • 46. Tabelas Simples Indexada Agrupada Saturday, August 21, 2010
  • 47. Controles Busca Slider e Switch Segmentados Pickers Saturday, August 21, 2010
  • 48. Android : User Interface Guidelines • Ainda em DESENVOLVIMENTO • Seta as GUIAS para INTERAÇÕES e VISUAL • Focado TOTALMENTE para DESENVOLVEDORES! CONTEMPLA • Criação de WIDGETS • ATIVIDADES e TAREFAS • Design de MENUS Saturday, August 21, 2010
  • 50. WIDGETS • Um WIDGET apresenta para o usuário as informações mais importantes na HOME SCREEN • Os PADRÕES de criação dependem da funcionalidade Tamanhos WIDGETS Moldura Saturday, August 21, 2010
  • 51. ATIVIDADES Teclado Contatos Detalhes Edição Saturday, August 21, 2010
  • 52. MENUS Menu de Opções Menu de Contexto Saturday, August 21, 2010
  • 54. 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/guide/practices/ui_guidelines/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 Saturday, August 21, 2010
  • 55. 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! Saturday, August 21, 2010
  • 56. 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 Saturday, August 21, 2010
  • 57. Meetings for iPad Paolo Domenico Passeri Saturday, August 21, 2010
  • 59. 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 Saturday, August 21, 2010
  • 62. Ferramentas e Links Saturday, August 21, 2010
  • 63. LOOK & FEEL Saturday, August 21, 2010
  • 64. 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! Saturday, August 21, 2010
  • 66. Busque o LÚDICO... Saturday, August 21, 2010
  • 67. ...e o REAL Saturday, August 21, 2010
  • 68. paolopasseri@gmail.com @paolopasseri paolopasseri Muito Obrigado! Saturday, August 21, 2010