mini curso - design de interface para dispositivos móveis
DESCRIPTION
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.TRANSCRIPT
![Page 1: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/1.jpg)
minicurso
Design de Interface para Dispositivos Móveis
Jane Vita - Interaction and Visual Designer
![Page 2: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/2.jpg)
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.
![Page 3: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/3.jpg)
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.
Sobre o que vamos falar?
![Page 4: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/4.jpg)
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.
![Page 5: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/5.jpg)
2. Elementos e cuidados comuns na construção de pequenas interfaces
![Page 6: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/6.jpg)
Acesso as principais funcionalidades
![Page 7: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/7.jpg)
Legibilidade
![Page 8: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/8.jpg)
Lógico, intuitivo...
![Page 9: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/9.jpg)
Consistência http://www.useit.com/jakob/constbook.html
![Page 10: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/10.jpg)
Navegabilidade
![Page 11: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/11.jpg)
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.
![Page 12: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/12.jpg)
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)
![Page 13: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/13.jpg)
3. Exemplos de interfaces para dispositivos móveis
![Page 14: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/14.jpg)
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.
![Page 15: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/15.jpg)
![Page 16: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/16.jpg)
N900
![Page 17: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/17.jpg)
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.
![Page 18: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/18.jpg)
![Page 19: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/19.jpg)
Visualize e acesse todas as notas com apenas um deslizar de dedos. Encontre rapidamente suas notas através dos Notebooks e Tags.
![Page 20: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/20.jpg)
Crie notas de textos, imagens, mensagens de voz e anexe arquivos. Procure e acesse notas criadas no seu telefone, PC ou na internet.
![Page 21: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/21.jpg)
Globo.com
![Page 22: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/22.jpg)
![Page 23: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/23.jpg)
![Page 24: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/24.jpg)
![Page 25: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/25.jpg)
![Page 26: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/26.jpg)
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.
![Page 27: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/27.jpg)
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
![Page 28: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/28.jpg)
5. UI Guidelines
![Page 29: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/29.jpg)
• 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)
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
![Page 30: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/30.jpg)
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.
![Page 31: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/31.jpg)
![Page 32: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/32.jpg)
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.
![Page 33: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/33.jpg)
![Page 34: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/34.jpg)
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.
![Page 35: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/35.jpg)
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/
![Page 36: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/36.jpg)
http://www.forum.nokia.com/Devices/ http://www.youtube.com/user/nokiadevforum
![Page 37: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/37.jpg)
6. Desenvolvendo widgets para mobile
![Page 38: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/38.jpg)
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
![Page 39: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/39.jpg)
7. Prototipagem
![Page 40: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/40.jpg)
Algumas ferramentas para prototipagem em dispositivos móveis.
• Forum Nokia – Flowellahttp://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
![Page 41: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/41.jpg)
8. Apresentação
![Page 42: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/42.jpg)
9. Avaliação
![Page 43: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/43.jpg)
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
![Page 44: Mini Curso - Design de Interface para Dispositivos Móveis](https://reader034.vdocuments.site/reader034/viewer/2022052619/555b2e9ad8b42afc348b4a24/html5/thumbnails/44.jpg)
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