mini curso - design de interface para dispositivos móveis

minicurso

Design de Interface para Dispositivos Móveis

Jane Vita - Interaction and Visual Designer

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.

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?

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.

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

Acesso as principais funcionalidades

Legibilidade

Lógico, intuitivo...

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

Navegabilidade

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.

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)

3. Exemplos de interfaces para dispositivos móveis

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.

N900

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.

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

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

Globo.com

Facebook

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.

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

5. UI Guidelines

•  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

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.

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.

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.

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/

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

6. Desenvolvendo widgets para mobile

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

7. Prototipagem

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

8. Apresentação

9. Avaliação

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

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

Obrigada! Jane Vita

www.janevita.com.br

Interaction and Visual Designer jane.vita@gmail.com