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

Design de Interfaces para Dispositivos Móveis

on

  • 8,279 views

Apresentação do curso pelo Prof. Paolo Passeri em 07 de Abril de 2012.

Apresentação do curso pelo Prof. Paolo Passeri em 07 de Abril de 2012.

Statistics

Views

Total Views
8,279
Views on SlideShare
6,582
Embed Views
1,697

Actions

Likes
14
Downloads
229
Comments
2

1 Embed 1,697

http://www.faberludens.com.br 1697

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

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

    Design de Interfaces para Dispositivos Móveis Design de Interfaces para Dispositivos Móveis Presentation Transcript

    • 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 é importanteentender os seus USUÁRIOS...
    • ...e o que elesBUSCAM• 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 iPadPaolo 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 íconesiOS Toolbar IconsGlyphish’/>iOS Toolbar Icon SetiOS Toolbar Icons 230 Free Vector IconsiconSweetsThe Android Developer Common Icon Set II30 Free Android Menu IconsFree 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 ExpandirManipulação por GESTOS• Utilizada através de sensores• Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando
    • Botões ou Links ListasELEMENTOS 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ÇÃOTOOLS
    • Meetings for iPadPaolo 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 aplicativosComo 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 barELEMENTOS 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 SpinnersScrollable Tabs ActionFixed Tabs Overflow Buttons
    • Layouts Multiplane Phone Tablet
    • Elementoshttp://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 iPadPaolo 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 paolopasseriMuito Obrigado!