SlideShare uma empresa Scribd logo
Design Digital em Plataformas Móveis
Paolo Domenico Passeri
Para ENTENDER o design de dispositivos móveis é
importante primeiro entender os seus USUÁRIOS...
...e o que eles
BUSCAM

• Facilidade


• Agilidade


• Intuitividade


• Algo “novo”


• Se surpreender


• “Transparência”


• Resolver problemas
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!
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
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
Design Digital em Plataformas Móveis
Atividade vs. Tempo


                       Test

              Debug

                              Desenvolvimento
              Design




  DESENVOLVIMENTO > DESIGN = RESUTADOS
Atividade vs. Tempo


                      Test
                                 Desenvolvimento
              Debug




                        Design




  DESIGN > DESENVOLVIMENTO = RESUTADOS
Como se dá este processo?




  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”
FUNCIONALIDADES

Cada nova funcionalidade têm um CUSTO:
• Peso para download
• Velocidade de operação
• A interface se torna mais complexa
• Você perde tempo desenhando o novo, ao invés de
  refinar o essencial
• Aumenta o risco de potenciais problemas
• O usuário precisa de mais tempo para aprender e
  entender o valor.


     Em aplicativos móveis, uma ÚNICA funcionalidade
             é permitido, e até recomendado.
PÚBLICO ALVO                       FUNCIONALIDADES

• Geralmente cozinham em casa ou preferem     • Criação de listas
  comidas prontas                             • Pegar receitas
• Gostam de buscar ingredientes exóticos ou   • Comparar preços
  dificilmente se aventuram além do básico
                                              • Localizar mercados
• Usam receitas para se inspirar ou seguem
                                              • Anotar receitas
  receitas a risca
                                              • Ver videos de cozinha
• Compram pouca quantidade, aos poucos
  ou compram quantidades maiores, poucas      • Aprender novas culinárias
  vezes                                       • Substituir ingredientes
• Querem manter diversas listas de compras
  ou somente querem lembrar de comprar
  algo à caminho de casa



    “Uma ferramenta para criação de listas de compra, para
          pessoas econômicas que amam cozinhar“
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”
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 seus
  detalhes


• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de
  uma boa NAVEGAÇÃO




   Crie o diagrama nos
  ESTRÁGIOS INICIAIS
  do processo de design
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 bem DESENHADA!
Dispositivos Móveis
Aprenda sobre 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        ✓              ✓               ✗              ✓               ✗
iPhone HIG

• 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
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?
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
Alertas, Ações e View Modal
Exemplo de interface MAL desenhada
Tabelas




     Simples   Indexada   Agrupada
Controles




   Busca    Slider e Switch   Segmentados   Pickers
Android : User Interface Guidelines

• Ainda em DESENVOLVIMENTO


• Seta os GUIAS para INTERAÇÕES e VISUAL


• Focado TOTALMENTE para
  DESENVOLVEDORES!


 CONTEMPLA

   • Criação de WIDGETS

   • ATIVIDADES e TAREFAS

   • Design de MENUS
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
ATIVIDADES




  Teclado    Contatos   Detalhes   Edição
MENUS
Menu de Opções




                 Menu de Contexto
INCONSISTÊNCIA
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ê
  deve passar para o COMPUTADOR para testar!
Meetings for iPad
Paolo Domenico Passeri
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
Design Digital em Plataformas Móveis
Design Digital em Plataformas Móveis
DESIGN como um DIFERENCIAL
Por que um bom
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!
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
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 COM DESIGN POBRE!
LOOK & FEEL
Sua IDENTIDADE visual

• Muitos dos CONTROLES e elementos
  padrões 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 para chegar
  no MELHOR


• Busque inspiração no MUNDO REAL!
Design Digital em Plataformas Móveis
Design Digital em Plataformas Móveis
Busque o LÚDICO...
...e o REAL
paolopasseri@gmail.com


  @paolopasseri


  paolopasseri



Muito Obrigado!
ANEXOS
Ferramentas e Links de Design de UI
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
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

Mais conteúdo relacionado

Mais procurados

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
Instituto Faber-Ludens
 
Ux vs Ui
Ux vs UiUx vs Ui
Ux vs Ui
Daniel de Paola
 
UX Samsung
UX SamsungUX Samsung
UX Samsung
appies_co
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
Diego Moraes
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
Edu Agni
 
Wesley silva design para s40
Wesley silva   design para s40Wesley silva   design para s40
Wesley silva design para s40
INdT
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
Edu Agni
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
Hanry Marcel Kluk
 
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Instituto Faber-Ludens
 
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
Bruno Biagioni Neto
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
Edu Agni
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
Edu Agni
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
Ítalo Waxman
 
Planejando seu app
Planejando seu appPlanejando seu app
Planejando seu app
Aline Borges
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
Victor Rubens
 
Protótipos mobile na prática
Protótipos mobile na práticaProtótipos mobile na prática
Protótipos mobile na prática
Richard Jesus
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
Gustavo Gil
 
Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010
3bits Estúdio Criativo
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
Jane Vita
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
Edu Agni
 

Mais procurados (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
 
Ux vs Ui
Ux vs UiUx vs Ui
Ux vs Ui
 
UX Samsung
UX SamsungUX Samsung
UX Samsung
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Wesley silva design para s40
Wesley silva   design para s40Wesley silva   design para s40
Wesley silva design para s40
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
 
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
 
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
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 
Planejando seu app
Planejando seu appPlanejando seu app
Planejando seu app
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Protótipos mobile na prática
Protótipos mobile na práticaProtótipos mobile na prática
Protótipos mobile na prática
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
 
Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 

Destaque

Noele curso
Noele cursoNoele curso
Noele curso
Emei Margaridinha
 
Profissionais
ProfissionaisProfissionais
Profissionais
femmerick
 
Catálogo de Móveis Piassini 2015
Catálogo de Móveis Piassini 2015Catálogo de Móveis Piassini 2015
Catálogo de Móveis Piassini 2015
Marcus Vinicius Wildner
 
Manual dos projetos
Manual dos projetosManual dos projetos
Manual dos projetos
Gleyson Costa
 
Moveis projetado
Moveis projetadoMoveis projetado
Moveis projetado
soanatareportagens snr
 
Mdf
Mdf Mdf
Mdf
tablemac
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
Make it Loyal
 
Institucional Marcenaria Casarao
Institucional Marcenaria CasaraoInstitucional Marcenaria Casarao
Institucional Marcenaria Casarao
Marcenaria Casarão
 
Curso caixas acusticas faca voce mesmo
Curso  caixas acusticas   faca voce mesmoCurso  caixas acusticas   faca voce mesmo
Curso caixas acusticas faca voce mesmo
Manim Edições
 
Desenho técnico uninorte 2015 parte1 37pp
Desenho técnico uninorte 2015 parte1 37ppDesenho técnico uninorte 2015 parte1 37pp
Desenho técnico uninorte 2015 parte1 37pp
Alberto Negrao
 
Bancadas
BancadasBancadas
Apresentação de Padrões de Design para Aplicativos Móveis.
Apresentação de Padrões de Design para Aplicativos Móveis.Apresentação de Padrões de Design para Aplicativos Móveis.
Apresentação de Padrões de Design para Aplicativos Móveis.
Hewerson Freitas
 
LAMINADOS PARA MÓVEIS
LAMINADOS PARA MÓVEISLAMINADOS PARA MÓVEIS
LAMINADOS PARA MÓVEIS
Telma Moura
 
Bancada para marcenaria
Bancada para marcenariaBancada para marcenaria
Bancada para marcenaria
Osvaldo Alves
 
Faça você mesmo - Passo a passo para instalação de prateleiras
Faça você mesmo - Passo a passo para instalação de prateleiras Faça você mesmo - Passo a passo para instalação de prateleiras
Faça você mesmo - Passo a passo para instalação de prateleiras
portosegurocanaiseletronicos
 
O marceneiro e as ferramentas
O marceneiro e as ferramentasO marceneiro e as ferramentas
O marceneiro e as ferramentas
Luis Branco, PMP
 
Marcenaria basica senai
Marcenaria basica senaiMarcenaria basica senai
Marcenaria basica senai
Minerin Das Gerais
 
Aula 3 história mob brasil
Aula 3 história mob brasilAula 3 história mob brasil
Aula 3 história mob brasil
Andresa Jessita da Conceição
 
Livro -marcenaria_desenho tecnico
Livro  -marcenaria_desenho tecnicoLivro  -marcenaria_desenho tecnico
Livro -marcenaria_desenho tecnico
Minerin Das Gerais
 
Aula 3 - história do mobiliário
Aula 3 - história do mobiliárioAula 3 - história do mobiliário
Aula 3 - história do mobiliário
Andresa Jessita da Conceição
 

Destaque (20)

Noele curso
Noele cursoNoele curso
Noele curso
 
Profissionais
ProfissionaisProfissionais
Profissionais
 
Catálogo de Móveis Piassini 2015
Catálogo de Móveis Piassini 2015Catálogo de Móveis Piassini 2015
Catálogo de Móveis Piassini 2015
 
Manual dos projetos
Manual dos projetosManual dos projetos
Manual dos projetos
 
Moveis projetado
Moveis projetadoMoveis projetado
Moveis projetado
 
Mdf
Mdf Mdf
Mdf
 
Plataformas digitais
Plataformas digitaisPlataformas digitais
Plataformas digitais
 
Institucional Marcenaria Casarao
Institucional Marcenaria CasaraoInstitucional Marcenaria Casarao
Institucional Marcenaria Casarao
 
Curso caixas acusticas faca voce mesmo
Curso  caixas acusticas   faca voce mesmoCurso  caixas acusticas   faca voce mesmo
Curso caixas acusticas faca voce mesmo
 
Desenho técnico uninorte 2015 parte1 37pp
Desenho técnico uninorte 2015 parte1 37ppDesenho técnico uninorte 2015 parte1 37pp
Desenho técnico uninorte 2015 parte1 37pp
 
Bancadas
BancadasBancadas
Bancadas
 
Apresentação de Padrões de Design para Aplicativos Móveis.
Apresentação de Padrões de Design para Aplicativos Móveis.Apresentação de Padrões de Design para Aplicativos Móveis.
Apresentação de Padrões de Design para Aplicativos Móveis.
 
LAMINADOS PARA MÓVEIS
LAMINADOS PARA MÓVEISLAMINADOS PARA MÓVEIS
LAMINADOS PARA MÓVEIS
 
Bancada para marcenaria
Bancada para marcenariaBancada para marcenaria
Bancada para marcenaria
 
Faça você mesmo - Passo a passo para instalação de prateleiras
Faça você mesmo - Passo a passo para instalação de prateleiras Faça você mesmo - Passo a passo para instalação de prateleiras
Faça você mesmo - Passo a passo para instalação de prateleiras
 
O marceneiro e as ferramentas
O marceneiro e as ferramentasO marceneiro e as ferramentas
O marceneiro e as ferramentas
 
Marcenaria basica senai
Marcenaria basica senaiMarcenaria basica senai
Marcenaria basica senai
 
Aula 3 história mob brasil
Aula 3 história mob brasilAula 3 história mob brasil
Aula 3 história mob brasil
 
Livro -marcenaria_desenho tecnico
Livro  -marcenaria_desenho tecnicoLivro  -marcenaria_desenho tecnico
Livro -marcenaria_desenho tecnico
 
Aula 3 - história do mobiliário
Aula 3 - história do mobiliárioAula 3 - história do mobiliário
Aula 3 - história do mobiliário
 

Semelhante a Design Digital em Plataformas Móveis

Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
Instituto Faber-Ludens
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo Moveis
Paolo Passeri
 
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
Instituto Faber-Ludens
 
Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025Kluk design dispositivos moveis ufpb 20131025
Kluk design dispositivos moveis ufpb 20131025
Hanry Marcel Kluk
 
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
Paolo Passeri
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos Móveis
Paolo Passeri
 
HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1
Jose Berardo
 
Ux para agencias de publicidade
Ux para agencias de publicidade Ux para agencias de publicidade
Ux para agencias de publicidade
Danilo Sousa
 
Apps Hibridos
Apps HibridosApps Hibridos
Apps Hibridos
Allan Marques Baptista
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
maumoreira
 
Eureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou HíbridoEureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou Híbrido
drbatiston
 
Best pratices para desenvolvimento mobile
Best pratices para desenvolvimento mobileBest pratices para desenvolvimento mobile
Best pratices para desenvolvimento mobile
nipjc
 
Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8
Janynne Gomes
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
Richard Jesus
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
Vítor Teixeira
 
8ºConnecting Knowledge Web ou App
8ºConnecting Knowledge Web ou App8ºConnecting Knowledge Web ou App
8ºConnecting Knowledge Web ou App
Heider Lopes
 
Web ou App?
Web ou App?Web ou App?
Web ou App?
thingshackerteam
 
Web mobile dicas
Web mobile dicasWeb mobile dicas
Web mobile dicas
Ana Laura Gomes
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
Pedro Edson Silva Barros
 
CRP-5215-0420-2014-08
CRP-5215-0420-2014-08CRP-5215-0420-2014-08

Semelhante a Design Digital em Plataformas Móveis (20)

Workshop Design para Dispositivos Móveis
Workshop Design para Dispositivos MóveisWorkshop Design para Dispositivos Móveis
Workshop Design para Dispositivos Móveis
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo Moveis
 
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
 
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
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos Móveis
 
HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1
 
Ux para agencias de publicidade
Ux para agencias de publicidade Ux para agencias de publicidade
Ux para agencias de publicidade
 
Apps Hibridos
Apps HibridosApps Hibridos
Apps Hibridos
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Eureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou HíbridoEureka! E agora: Nativo ou Híbrido
Eureka! E agora: Nativo ou Híbrido
 
Best pratices para desenvolvimento mobile
Best pratices para desenvolvimento mobileBest pratices para desenvolvimento mobile
Best pratices para desenvolvimento mobile
 
Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8Desenvolvendo aplicativos para windows 8
Desenvolvendo aplicativos para windows 8
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
 
8ºConnecting Knowledge Web ou App
8ºConnecting Knowledge Web ou App8ºConnecting Knowledge Web ou App
8ºConnecting Knowledge Web ou App
 
Web ou App?
Web ou App?Web ou App?
Web ou App?
 
Web mobile dicas
Web mobile dicasWeb mobile dicas
Web mobile dicas
 
Os caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobileOs caminhos para o desenvolvimento mobile
Os caminhos para o desenvolvimento mobile
 
CRP-5215-0420-2014-08
CRP-5215-0420-2014-08CRP-5215-0420-2014-08
CRP-5215-0420-2014-08
 

Mais 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 I
Paolo 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 I
Paolo 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 I
Paolo 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 I
Paolo 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çãoI
Paolo Passeri
 
Software Livre
Software LivreSoftware Livre
Software Livre
Paolo Passeri
 

Mais 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
 

Design Digital em Plataformas Móveis

  • 1. Design Digital em Plataformas Móveis Paolo Domenico Passeri
  • 2. Para ENTENDER o design de dispositivos móveis é importante primeiro entender os seus USUÁRIOS...
  • 3. ...e o que eles BUSCAM • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência” • Resolver problemas
  • 4. 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?
  • 5. Não é um computador TRADICIONAL!
  • 6. Entenda as LIMITAÇÕES Usuários não têm um PONTEIRO nos dedos
  • 7. Entenda as LIMITAÇÕES Nem são AGUIAS, com super-visão
  • 8. Entenda as LIMITAÇÕES Geralmente vão interagir com UM aplicativos por vez
  • 9. A interface tem que ser REPENSADA... CTRL+C, CTRL+V NÃO funciona!
  • 10. ...para ATENDER ao dispositivo móvel Somente os elementos CHAVE se mantém!
  • 11. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção
  • 13. Atividade vs. Tempo Test Debug Desenvolvimento Design DESENVOLVIMENTO > DESIGN = RESUTADOS
  • 14. Atividade vs. Tempo Test Desenvolvimento Debug Design DESIGN > DESENVOLVIMENTO = RESUTADOS
  • 15. Como se dá este processo? Ideia Processo Interface (Refinar) (Executar) (Desenhar)
  • 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”
  • 17. FUNCIONALIDADES Cada nova funcionalidade têm um CUSTO: • Peso para download • Velocidade de operação • A interface se torna mais complexa • Você perde tempo desenhando o novo, ao invés de refinar o essencial • Aumenta o risco de potenciais problemas • O usuário precisa de mais tempo para aprender e entender o valor. Em aplicativos móveis, uma ÚNICA funcionalidade é permitido, e até recomendado.
  • 18. PÚBLICO ALVO FUNCIONALIDADES • Geralmente cozinham em casa ou preferem • Criação de listas comidas prontas • Pegar receitas • Gostam de buscar ingredientes exóticos ou • Comparar preços dificilmente se aventuram além do básico • Localizar mercados • Usam receitas para se inspirar ou seguem • Anotar receitas receitas a risca • Ver videos de cozinha • Compram pouca quantidade, aos poucos ou compram quantidades maiores, poucas • Aprender novas culinárias vezes • Substituir ingredientes • Querem manter diversas listas de compras ou somente querem lembrar de comprar algo à caminho de casa “Uma ferramenta para criação de listas de compra, para pessoas econômicas que amam cozinhar“
  • 20. 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”
  • 21. 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
  • 22. 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
  • 23. Botões ou Links Listas ELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto
  • 24. 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 seus detalhes • Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de uma boa NAVEGAÇÃO Crie o diagrama nos ESTRÁGIOS INICIAIS do processo de design
  • 26. 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 bem DESENHADA!
  • 28. Aprenda sobre 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 ✓ ✓ ✗ ✓ ✗
  • 29. iPhone HIG • 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
  • 30. 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?
  • 31. 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
  • 33. Status bar Navegation bar ELEMENTOS Tab bar Toolbar
  • 34. Alertas, Ações e View Modal
  • 35. Exemplo de interface MAL desenhada
  • 36. Tabelas Simples Indexada Agrupada
  • 37. Controles Busca Slider e Switch Segmentados Pickers
  • 38. Android : User Interface Guidelines • Ainda em DESENVOLVIMENTO • Seta os GUIAS para INTERAÇÕES e VISUAL • Focado TOTALMENTE para DESENVOLVEDORES! CONTEMPLA • Criação de WIDGETS • ATIVIDADES e TAREFAS • Design de MENUS
  • 39. 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
  • 40. ATIVIDADES Teclado Contatos Detalhes Edição
  • 41. MENUS Menu de Opções Menu de Contexto
  • 43. 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ê deve passar para o COMPUTADOR para testar!
  • 44. Meetings for iPad Paolo Domenico Passeri
  • 46. 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
  • 49. DESIGN como um DIFERENCIAL
  • 50. Por que um bom 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!
  • 51. 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
  • 52. 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 COM DESIGN POBRE!
  • 54. Sua IDENTIDADE visual • Muitos dos CONTROLES e elementos padrões 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 para chegar no MELHOR • Busque inspiração no MUNDO REAL!
  • 59. paolopasseri@gmail.com @paolopasseri paolopasseri Muito Obrigado!
  • 61. Ferramentas e Links de Design de UI
  • 62. 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
  • 63. 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