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

Mini Curso de Design de Interfaces para Dispositivos Móveis

on

  • 14,232 views

Apresentação do Mini Curso de Design de Interfaces para Dispositivos Móveis realizado em parceria Fisam e Instituto Faber-Ludens ministrado por Paolo Domenico Passeri.

Apresentação do Mini Curso de Design de Interfaces para Dispositivos Móveis realizado em parceria Fisam e Instituto Faber-Ludens ministrado por Paolo Domenico Passeri.

Statistics

Views

Total Views
14,232
Views on SlideShare
7,956
Embed Views
6,276

Actions

Likes
50
Downloads
550
Comments
0

15 Embeds 6,276

http://www.faberludens.com.br 3746
http://www.ramonvictor.com 1637
http://www.mobilesmemordam.com 666
http://www.coisasdewebdesigner.com 140
http://account.c.mouseflow.com 28
http://paper.li 12
http://designstore.tumblr.com 9
http://us-w1.rockmelt.com 7
http://web.archive.org 7
http://quirktools.com 6
http://webcache.googleusercontent.com 6
url_unknown 5
http://www.loop11.com 5
http://twitter.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

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

  • 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