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.

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
Obrigada! www.janevita.com.br
Interaction and Visual Designer
jane.vita@gmail.com