Mini Curso - Design de Interface para Dispositivos Móveis

1. minicurso Design de Interface para Dispositivos Móveis Jane Vita - Interaction and Visual Designer

2. Conteúdo Programático 1.  Introdução sobre design para pequenas interfaces 2.  Elementos e cuidados comuns na construção de pequenas interfaces, 3.  Exemplos de interfaces para dispositivo móvel (Mobile websites, aplicações, touch UI, low-end devices), 4.  Princípios de design de interação para dispositivos móveis, 5.  UI Guidelines, Design Patterns (Nokia, Android, iPhone, Windows Phone), 6.  Desenvolvendo widgets para mobile, 7.  Prototipagem 8.  Apresentação, 9.  Avaliação.

3. Sobre o que vamos falar? Design de Interface para Dispositivos Móveis 1.  A que público se destina; 2.  O contexto de uso; 3.  Funcionalidades do aplicativo; 4.  Tecnologia usada; 5.  Interface.

4. 1. Introdução sobre design para pequenas interfaces O design para dispositivos móveis se difere do design para outras interfaces de várias maneiras e a maioria destas diferenças estão relacionadas ao fato do usuário levar o dispositivo para qualquer lugar onde vai. Cada dispositivo móvel tem particularidades que devem ser levadas em conta em todo o desenvolvimento do projeto. •  •  •  •  •  •  •  Simplicidade, Rapidez, Objetividade, Eficaz, Estética / agradável, Adequado, Consistente.

5. 2. Elementos e cuidados comuns na construção de pequenas interfaces

6. Acesso as principais funcionalidades

7. Legibilidade

8. Lógico, intuitivo...

9. Consistência http://www.useit.com/jakob/constbook.html

10. Navegabilidade

11. Espaço, gráficos, cores e fontes, identidade visual •  •  •  •  Tamanho da tela, escalabilidade, Informações sobre as funcionalidades / adequação Layout para ícones, labels, menus, caixas de diálogos e erros, Palheta de cores, Fontes, Telas, Direção de arte para áudio, animações e transições. •  •  •  • 

12. Adequado ao usuário (dia-a-dia) Um layout adequado permite o melhor uso da aplicação e aproveitamento do aparelho. (reforçando conceitos de usabilidade)

13. 3. Exemplos de interfaces para dispositivos móveis

14. Skype Use Skype everywhere - over 3G or WiFi. Free Skype-to-Skype calls from any WiFi zone. See who's online and send and receive instant messages on the move.

16. N900

17. Evernote PC Crie e salve notas, atalhos, imagens, tarefas, PDFs e mais. Capture texto, links e imagens de sites no Evernote. Crie notas de texto, fotos e gravações de voz. Navegue e realize buscas das notas salvas.

19. Visualize e acesse todas as notas com apenas um deslizar de dedos. Encontre rapidamente suas notas através dos Notebooks e Tags.

20. Crie notas de textos, imagens, mensagens de voz e anexe arquivos. Procure e acesse notas criadas no seu telefone, PC ou na internet.

21. Globo.com

23. Facebook

26. 4. Princípios de design de interação para dispositivos móveis 8 Regras de Ouro de Ben Shneiderman 1. Mantenha a consistência, 2. Ofereça atalhos aos usuários experientes, 3. Ofereça feedbacks informativos, 4. Apresente as etapas do processo, 5. Ofereça uma forma simples de correção de erros, 6. Permita fácil reversão de ações, 7. O controle do sistema é do usuário, 8. Reduza a carga de memória curta do usuário.

27. 4. Princípios de design de interação para dispositivos móveis Heurísticas de Nielsen 1. Visibilidade do status do sistema 2. Correspondência entre o sistema e o mundo real 3. Liberdade e controle do usuário 4. Consistência e padrões 5. Prevenção de erros 6. Reconhecimento ao invés de memorização 7. Flexibilidade e eficiência de uso 8. Estética e design minimalista 9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros 10. Ajuda e documentação

28. 5. UI Guidelines

29. Iphone demo - http://www.youtube.com/watch?v=8kwmEIctuUw official website - http://www.apple.com/iphone/ UI design guidelines - http://developer.apple.com/iphone/library/index.html •  A interface é construída em torno de uma página principal, onde é disponibilizada uma lista de aplicações. (botão do meio - acesso) •  As aplicações normalmente rodam individualmente (non- multitask) •  Exceções para ligações e para escutar músicas •  Aplicativos padrão – Mensagens, Calendário, Fotos, Câmera, You tube, Mapas, Clima, Recados de voz, Recados, Relógio , Calculadora, Configurações, loja iTunes, App Store e Bússola (3G) •  Menu alinhado na parte inferior exibindo 4 ícones com as funções : Telefone, e-mail, Internet (Safári) e Ipod (multimídia)

30. Iphone demo - http://www.youtube.com/watch?v=8kwmEIctuUw official website - http://www.apple.com/iphone/ UI design guidelines - http://developer.apple.com/iphone/library/index.html •  Permite o usuário acessar páginas no Safári através de ícones personalizados (Web Clips). •  Usuários podem adicionar e organizar até 16 ícones por tela (home) até 4 ícones na barra de menu home. •  A maior parte da interação acontece por touchscreen . É possível ativar funcionalidades como zoom e rolagem através do movimento de touch-drag. Nesses casos são aplicados efeitos aos movimentos simulando a física (fricção). Outros efeitos incluem sub-seleção de rolagem horizontal, barra de favoritos e teclado de rolagem vertical e widgets que giram para exibir as configurações no “verso”. •  Na hierarquia do menu, um botão de voltar no canto superior direito exibe o nome da pasta. •  Ipod touch - As diferenças incluem ausência fone e câmera e no uso de aplicativos distintos para reprodução de músicas e vídeos. Ambos utilizam sistema operacional do iPhone.

32. Androide – hero Demo - http://www.youtube.com/watch?v=Et3v8qkwHSI Official website - http://www.htc.com/www/product/hero/overview.html UI design guidelines - http://developer.android.com/guide/practices/ui_guidelines/index.html - •  Android é um sistema operacional para dispositivos móveis, usa uma versão modificada do Linux Kernel.Foi inicialmente desenvolvido pela Android Inc. , empresa comprada pela Google, e mais tarde pela Open Handset Alliance.Permite o desenvolvedores escreverem código gerenciado em Java, controlando o dispositivo através de livrarias Java do Google. •  Em Android a interface é construída utilizando a objetos View e ViewGroup. Existem vários tipos de Views e ViewGroups, que são descendentes da classe View. •  A classe View serve de base para um conjunto de elementos de tela interativos chamados widgets. Widgets podem ser Text, EditText, InputMethod, MovementMethod, Button, RadioButton, Checkbox e ScrollView.

34. Windows Phone 7 series Demo - http://www.youtube.com/watch?v=w0-pxBZBvlM official website - http://www.windowsphone7.com/#gotophonedemolink UI design guidelines - http://developer.windowsphone.com/windows-phone-7/ •  A nova interface (Metro) é muito similar a do Zune HD. A tela home (chamada tela inicial) é composta de um mosaico (customizáveis), que são links para as principais funções como telefone, musicas e vídeos, email, SuiteOffice e Contatos. •  Interface touchscreen mais amigável do que as versões anteriores com o uso da tecnologia multitouch. •  Integrado com redes sociais populares como Twitter, Facebook e Windows Live e serviços como Xbox Live, Zune e Bing. •  Não suporta copiar e colar ou múltiplas tarefas para aplicativos de outros desenvolvedores. •  Microsoft Kin - primo próximo - tem similaridades de interface - especificações de hardware consistentes. Microsoft disse que a longo prazo o Microsoft Phone 7 será integrado ao Kin.

35. Nokia mobile devices demo - http://www.youtube.com/watch?v=4Az8VE1NtY8 official website - http://www.nokia.com.br UI design guidelines – http://www.forum.nokia.com/Design/Design_process/

36. http://www.forum.nokia.com/Devices/ http://www.youtube.com/user/nokiadevforum

37. 6. Desenvolvendo widgets para mobile

38. 6. Desenvolvendo widgets para mobile •  •  •  •  Definição de Widget Uso do Widget Ótima aparência Melhor interação do usuário com aparelho •  •  •  •  Exercício – Widget para Iphone Tecnologia: Iphone (toolkit) Divisão em grupos Tema: Gastronomia

39. 7. Prototipagem

40. Algumas ferramentas para prototipagem em dispositivos móveis. •  Forum Nokia – Flowella http://www.forum.nokia.com/info/sw.nokia.com/id/ 7557c13f-0b43-4805-85ce-8414bfbade57/Flowella.html •  Flash – Adobe Device Central •  Pidoco - https://pidoco.com/en •  LiveView - http://labs.ideo.com/category/iphone/ •  Videos

41. 8. Apresentação

42. 9. Avaliação

43. Alguns links úteis •  •  •  •  •  •  •  http://deviceatlas.com/ http://patterns.design4mobile.com/index.php/Main_Page http://www.yuiblog.com/blog/2007/10/02/challenges-of-interface-design-for-mobile-devices/ http://www.callingallinnovators.com/venture_challenge.aspx http://www.taptaptap.com/#voices http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ http://www.small.fi/ http://www.smallsurfaces.com/ http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/ http://martinfowler.com/bliki/HumaneInterface.html http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ http://gizmodo.com/310295/microsoft-phone-patent-looks-just-like-the-iphone http://idlemode.com/category/oems/ http://www.myersdesign.com/wordpress/?m=200802 •  •  •  •  •  • 

44. Mais links úteis… •  •  •  •  •  •  •  http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/ http://www.small.fi/ http://gettingreal.37signals.com/toc.php http://wiki.forum.nokia.com/index.php/Mobile_developing_and_design_guidelines http://www.smallsurfaces.com/ http://www.appleinsider.com/articles/09/02/28/japanese_hate_for_iphone_all_a_big_mistake.html http://i.gizmodo.com/5165225/click-a-visual-tour-of-camera-interfaces?skyline=true&s=xhttp:// www.experiencedynamics.com/science-usability/ui-style-guides http://konigi.com/wiki/design-pattern-repositories http://www.interactivegestures.com/index.php?title=Main_Page http://www.teehanlax.com/# http://uxmag.com/design/ipad-user-experience-guidelineshttp://wiki.forum.nokia.com/index.php/ Mobile_Design_Pattern:_Widgets_elegantes_em_dispositivos_m%C3%B3veis •  •  •  • 

45. Jane Vita www.janevita.com.br Interaction and Visual Designer jane.vita@gmail.com Obrigada!