1. Design Digital em Plataformas MveisPaolo Domenico Passeri

2. Para ENTENDER o design de dispositivos mveis importante primeiro entender os seus USURIOS... 3. ...e o que elesBUSCAM Facilidade Agilidade Intuitividade Algo novo Se surpreender Transparncia Resolver problemas 4. Voc tem que ser O USURIO!Aprenda TUDO sobre o dispositivo como ele funciona? pesado ou leve? confortvel de segurar? como acesso suas funes? quais botes ele possui? quais aplicativos so legais? quais no so? 5. No um computador TRADICIONAL! 6. Entenda as LIMITAES Usurios no tm um PONTEIRO nos dedos 7. Entenda as LIMITAESNem so AGUIAS, com super-viso 8. Entenda as LIMITAES Geralmente vo interagir com UM aplicativos por vez 9. A interface tem que ser REPENSADA... CTRL+C, CTRL+VNO funciona! 10. ...para ATENDER ao dispositivo mvelSomente os elementos CHAVE se mantm! 11. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuio Marketing Manuteno 12. Atividade vs. Tempo TestDebugDesenvolvimentoDesignDESENVOLVIMENTO > DESIGN = RESUTADOS 13. Atividade vs. TempoTest DesenvolvimentoDebugDesignDESIGN > DESENVOLVIMENTO = RESUTADOS 14. Como se d este processo?Ideia ProcessoInterface(Renar) (Executar) (Desenhar) 15. Renando a sua Ideia Quem o seu PBLICO ALVO? Pessoas de negcios ou usurios nais Jovens ou idosos Homens ou Mulheres Vo usar diariamente ou ocasionalmente Quais so as principais FUNCIONALIDADES? Consumir ou produzir contedo? necessrio j possuir algum servio? O que realmente o usurio vai querer?DECLARAO DE DEFINIO DO PRODUTO 16. FUNCIONALIDADESCada nova funcionalidade tm um CUSTO: Peso para download Velocidade de operao A interface se torna mais complexa Voc perde tempo desenhando o novo, ao invs derenar o essencial Aumenta o risco de potenciais problemas O usurio precisa de mais tempo para aprender eentender o valor. Em aplicativos mveis, uma NICA funcionalidade permitido, e at recomendado. 17. PBLICO ALVO FUNCIONALIDADES Geralmente cozinham em casa ou preferem Criao de listascomidas prontas Pegar receitas Gostam de buscar ingredientes exticos ou Comparar preosdicilmente se aventuram alm do bsico Localizar mercados Usam receitas para se inspirar ou seguem Anotar receitasreceitas a risca Ver videos de cozinha Compram pouca quantidade, aos poucosou compram quantidades maiores, poucas Aprender novas culinriasvezes Substituir ingredientes Querem manter diversas listas de comprasou somente querem lembrar de compraralgo caminho de casaUma ferramenta para criao de listas de compra, parapessoas econmicas que amam cozinhar 18. INTERAGINDO COM DISPOSITIVOS MVEIS 19. Mtodos de Interao Lembre-se que existem diferentesmeios de interagir com odispositivo Antes de desenhar a UI, necessrio avaliar qual destesesto disponveis e sero utilizados Analise se no existe outra maneirade usurios entrarem com dados Seja criativo e no se limite aotradicional 20. Padres de Interao Denem alguns CONTROLES eELEMENTOS padres para o designde interfaces para dispositivosmveis uma maneira de aprendermos comsolues que foram bemAPLICADAS e DOCUMENTADASpor outros designers timo ponto de PARTIDA paraDESENHARMOS e entendermospartes especcas de um aplicativo 21. Manipulao INDIRETAManipulao DIRETA/Touch/Haptic necessrio aprender o No existe mapeamento pois mapeamento das teclasas teclas so virtuais Deve ser muito consistente Difcil aprender todos os meios No so muito exveis de entrada So muito exveis Joystick Direcional Toques curtos e longos Botes Alfa-numricos Arrastar Soft-keys Deslizar Rodas Girar Pinar e ExpandirManipulao por GESTOS Utilizada atravs de sensores Atravs do dispositivo por completo Inclinando Asoprando Chacoalhando 22. Botes ou Links ListasELEMENTOSIndicadores de EsperaEntrada de TextoLimpa texto 23. 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 seusdetalhes Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento deuma boa NAVEGAO Crie o diagrama nosESTRGIOS INICIAISdo processo de design 24. INTERFACE DE USURIO 25. Uma BOA interface de usurio Vai alm : ENCANTADORA e ATRAENTE Boa antri : CONVIDATIVA e CATIVANTE Te ajuda : FACL de usar Traz o novo : INOVADORA ... Eu NUNCA z isso! No est atoa : entrega SOLUES e no somenteFUNES NOVA e bem DESENHADA! 26. Dispositivos Mveis 27. Aprenda sobre cada dispositivo 3.5 /2.6 5.8 /Tela /9.7 / 3.5 4.5 / 480x320 e240x320 ?Resoluo 1024x768 800x480960x640480x548 Auto-rotativa ? Touchscreen Touchscreen Touchscreen TouchscreenTouchscreenAcelermetro AcelermetroAcelermetroAcelermetroAcelermetroMicrofoneInterface(s)Microfone MicrofoneMicrofone MicrofoneCmera CmeraCmeraCmeraGPSGPS GPS GPS GPS RFID Padronizao 28. iPhone HIG CARACTERSTICAS do iPhone Tamanho da tela COMPACTA Memria LIMITADA Usurios visualizam e interagem com UM APLICATIVO de cada vez. TIPOS de aplicativos NATIVO: desenvolvidos com o SDK WEB: abertos pelo browser HBRIDOS: tem como predominncia uma webview, porm possuem controles de aplicativos natvos 29. Diferentes ESTILOS de aplicativosSo BASEADOS em: Como ESCOLHER ? Comportamentos e USO Qual a motivao do usurio para usar este aplicativo? Caractersticas VISUAIS Qual a experincia de usurio que Modelo dos DADOS voc quer proporcionar? EXPERINCIA de usurio Qual o seu objetivo para o aplicativo? 30. PRODUTIVIDADEUTILITRIOS organizar informaes de forma HIERRQUICA UMA TAREFA com pouco input do usurio Usurios abrem o aplicativo e a informao j apresentada Pouca interao TELA TODA, em ambientes ricos visualmenteIMERSIVA Muito peculiar Organizar listas Sem controles Adicionar ou remover itens padro Entrar at o nvel de Diverso, comoinformao desejada e realizar jogos e rich-mediaatividades com ela 31. INTERFACE de Usurio 32. Status bar Navegation barELEMENTOS Tab barToolbar 33. Alertas, Aes e View Modal 34. Exemplo de interface MAL desenhada 35. Tabelas Simples Indexada Agrupada 36. Controles BuscaSlider e Switch Segmentados Pickers 37. Android : User Interface Guidelines Ainda em DESENVOLVIMENTO Seta os GUIAS para INTERAES e VISUAL Focado TOTALMENTE paraDESENVOLVEDORES! CONTEMPLA Criao de WIDGETS ATIVIDADES e TAREFAS Design de MENUS 38. WIDGETS Um WIDGET apresenta parao usurio as informaesmais importantes na HOMESCREEN Os PADRES de criaodependem da funcionalidadeTamanhos WIDGETS Moldura 39. ATIVIDADESTecladoContatos Detalhes Edio 40. MENUSMenu de Opes Menu de Contexto 41. INCONSISTNCIA 42. Desenhando Interfaces Importante iniciar com o NVEL mais BAIXO opossvel NO se apegue a DETALHES : use crculos,quadrados, retngulos Capturar visualmente a lista deFUNCIONALIDADES considerando a ORDEMdenida pelo DIAGRAMA Use ELEMENTOS conhecidos, e considere oHIG da plataforma escolhida SOMENTE aps estes desenhos prontos vocdeve passar para o COMPUTADOR para testar! 43. Meetings for iPadPaolo Domenico Passeri 44. PROTOTIPAO RPIDA 45. O que PROTOTIPAO Rpida? Utilizada para PROTOTIPAR objetos, conceitos, servios einterfaces Serve para se ter algo PALPVEL de maneira rpida quepossam ser testados Visualizar as INTERFACES e USAR-LAS de maneira simples Traz RESULTADOS e agiliza o processo de ITERAO Podem ser utilizadas FERRAMENTAS fsicas, computacionaisou uma combinao de ambas DETALHES so irrelevantes, ou at PROIBIDOS 46. DESIGN como um DIFERENCIAL 47. Por que um bomDESIGN? Maior apelo aos usurios Mais ateno da mdia Diferencial vs. Concorrncia Da vontade de voltar Incentiva a explorao VENDE MAIS! 48. A importncia 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 FUNES de maneira VISUAL para o usurio 49. Estudo de Caso: CONVERT Aplicativo para converso de unidades Unidades vendidas: 197,424 Preo: U$0.99 Faturamento bruto: $195,450 Lanado em Agosto de 2009 Faturamento liquido: $137,065 2 mesesMuitos concorrentes GRTIS j estabelecidos, porm COM DESIGN POBRE! 50. LOOK & FEEL 51. Sua IDENTIDADE visual Muitos dos CONTROLES e elementospadres das plataformas, podem sercustomizados Pequenas mudanas podem dar umPOLIMENTO especial para sua interface EVITE mudar radicalmente os controlesque fazem aes PADRO CRIE temas diferentes, com cores,texturas, e imagens e teste para chegarno MELHOR Busque inspirao no MUNDO REAL! 52. Busque o LDICO... 53. ...e o REAL 54. paolopasseri@gmail.com@paolopasseripaolopasseriMuito Obrigado! 55. ANEXOS 56. Ferramentas e Links de Design de UI 57. Links para os HIGshttp://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.htmlhttp://developer.apple.com/iphone/library/documentation/general/conceptual/ipadhig/Introduction/Introduction.htmlhttp://developer.android.com/guide/practices/ui_guidelines/index.htmlUI Design and Interaction Guide for Windows Phone 7 v2.0http://wiki.forum.nokia.com/index.php/Guidelines_for_Mobile_Interface_Design 58. 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