Design de Interação para Dispositivos Móveis - turma de setembro 2011

Jane Vita
Interaction e Visual designer com
Especialização em Webdesign PUCPR 

Empresas onde trabalhei: Learnway, INDT,
Fjord/Helsinki, Lojas Renner, Positivo
Educacional, Diário de Pernambuco,  
Free Software. 

Clientes: Volvo, Nokia Music/Maps/OVI, Nokia
Siemens, Renault, Lojas Renner, Positivo, Tve,
Ericsson, Yahoo, Skype, HP, Agência Casa,
Ampla. 

Desenvolveu produtos para diversas plataformas. 

Atualmente no Acessozero
(http://www.acessozero.com.br)

Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 2

Primeira parte
Senta que lá vem a história...

Passando por alguns pontos...

•  Iniciando o processo de criação para aplicações mobile

•  Mobilidade, interações e contexto

•  Conectividade e cross-plataform

•  Escolhendo a tecnologia

•  Pesquisas de mercado, costumes dos usuários, etc.

•  Web kits / Fóruns / UI design guides / Boas práticas


Iniciando o processo de criação
para aplicações mobile
Antes de decidir o que fazer, pensar...

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 6

Going mobile...

•  76% das pessoas usam dispositivos móveis quando estão esperando,

•  Mudança de comportamento e expectativas dos seres humanos,

•  Há 3 anos atrás (Smartphones),

•  Em 5 anos mais acessos de dispositivos móveis do que o PC,

•  Localização e portabilidade,

•  Conveniência, praticidade, agilidade,

•  Mais controle nas ações,


Going mobile...
•  Personalização, customização,

•  Parte da realidade,

•  Viralidade,

•  Plataforma free ou de baixo custo,

•  Engajamento,

•  Diversidade,

•  Foco,

•  E muito mais.


Mobile experience
1.  Ideia – Primeiro momento que nos move a prosseguir.
2.  Necessidades - Identificar potenciais usuários e seus desejos.
3.  Contexto – Circunstâncias que agreguem valor ao uso.
4.  Estratégia – Valores que agreguem ao negócio.
5.  Tecnologia – Escolha a tecnologia que melhor se encaixa ao propósito.
6.  Design – Criar a user experiência que envolva as necessidades.
7.  Protótipo – Testar a experiência em seu contexto.
8.  Desenvolvimento – Colocar todas as etapas juntas.
9.  Testes – Testar, testar.... e testar.
10. Otimização – Reduzir a quantidade de componentes, simples.
11. Portabilidade / Localização – Adaptar para outros devices e idiomas.


Idea e necessidades

•  Ideia partindo de uma
necessidade ou mais

•  Partindo da ideia achar as
necessidades


1. Ideia
•  Questionar muito, responder...
•  Por que ninguém fez isto ainda?
•  O que isto vai mudar no dia a dia do meu usuário?
•  Quem vai usar? Por quê?
•  O que tem de diferente dos outros?
•  Por que mobile?
•  Que aspecto real do dia a dia eu posso comparar?
•  Por que vai ser útil para o negócio?
•  ...


2. Necessidades e objetivos

•  Necessidade (pontual)
Vender ofertas quando o usuário precisa, no momento em que ele precisa.
Promover nossos parceiros, para que suas marcas fiquem mais atrativas.

•  Objetivo (variável)
Localizar o usuário e dizer o que ele pode comprar perto.
Possibilitar check in nos estabelecimentos.

Alerta! Toda a necessidade deve gerar um objetivo bem específico, porém
esta necessidade poder ser suprida por diferentes objetivos.
(KISS – Keep it super simple)


3. Contexto

•  Usuário – personas – publico alvo
•  Contexto – cenário – mobile (Uso)
•  Conteúdo – informação – negócios


Jornada do usuário
Prever um dia, uma semana, uma mês, 6 meses e um ano deste produto na
vida do usuário.

Prever o uso das principais funcionalidades no dia a dia do usuário.

Por que?
Para entender o ciclo de vida do serviço, produto.
Para vislumbrar a necessidade de futuras implementações e ações.

Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

PERSONAS são legais!

Criar “personas” não apenas ajudam a compartilhar os resultados de sua
pesquisa, mas elas também oferecem uma ferramenta valiosa para continuar
com o processo de concept design.

Referência por jasonunes.com

Nokia Music Catcher
Produzido por Fjord Oy
Vídeo concept com base em casos de uso.


Exemplo de contexto:


Exemplo de contexto usando mapas:

1. demanda > ofertas > estabelecimento > mapa

2. mapa > demanda > ofertas > estabelecimento

3. ofertas > demanda > estabelecimento > mapa

4. estabelecimento > mapa

5. estabelecimento > mapa > rota

entre outros


Para entender o contexto...
Ex.:
Como usuário eu gostaria de poder:

Quanto a compra da oferta:
1. Poder comprar as ofertas que estejam ao meu redor
2. Quero poder comprar via mobile
3. Poder comprar mais de um ticket de uma vez
4. Comprar para minha namorada
5. Mandar de presente um ticket para um amigo

Quanto a busca: ...


Product Backlog

Product backlog é um documento de alto nível do projeto. Nele é contido todas
as funcionalidades, desejos, etc. desejados para o sistema, descritas de uma
maneira bem abrangente e de forma simples, chamados de casos de uso.
Cada caso de uso contém também uma estimativa de complexidade e o valor
de negócio da mesma para a implementação, para facilitar na priorização.


Product Backlog
Acompanhamento do produto

ID Área Como Eu quero... Para... Anotações Prioridade Status
(usuário)...
1 Perfil Usuário Ver como e ver se eu alta feito
estão gosto
visualizando
meu perfil
2 Perfil Amigo Saber para ver se baixa não
quantos anos ele é mais iniciado
meu amigo velho que eu
tem
3 Oferta Usuário Saber mais saber se é media cancelado
sobre a oferta boa para mim
4 Oferta Amigo Saber o que para eu acompanhar muito alta em
estão comprar as feeds da processo
comprando também comunidade


4. Estratégia
O que é preciso para dar certo...

O sucesso depende de N fatores

•  Benchmarking – voltado para negócios

•  Todos sabemos que o sucesso de um produto depende de N fatores que
não somente ele próprio – Estratégia do produto...

•  Escolha entre os casos de uso os mais relevantes

•  Foco / Simples / Humildade / Agilidade / Utilidade


O sucesso depender de N fatores

•  Nunca esqueça que não há a necessidade de fazer tudo (Releases)

•  O usuário precisa entender do que se trata, precisa colaborar e ajudar a
melhorar.

•  Cross-plataform (estudo de integração entre as mídias)

•  Ações paralelas / share / facebook / website / TV / SEO / Mídia Impressa...


5. Tecnologia
iOS, android, symbian, java me...

Qual tecnologia?
Objetivos Oportunidades Conectividade
Caracterís*cas
Características
de produto Demanda
de produto
Demanda

Nova tecnologia Suporte técnico
Nova tecnologia
Suporte técnico

Público alvo
Aparência
Aparência
Desempenho
Desempenho
Facilidades

Adequaçao
Iden*ﬁcação de bugs Adequação
Identiﬁcação de bugs
Necessidades

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

Números
Uso de apps
(facilidades e costume)


Demos

Nokia Windows phone Android Apple


Tipos de aplicação
SMS, widgets, websites, aplicações nativas, games, web

SMS:
Experiências onde o usuário recebe alertas sobre alguma interação em um sistema
já existente. Ex.: facebook, groupon, gmail...


Widgets:
Pequenas aplicações as quais disponibilizam informações especíﬁcas e que
normalmente se integram ao framework. Ex.: News, Clima/tempo, calendário, notes...


Mobile websites
Experiências exclusivas para o acesso mobile, com informações mais adequadas a
plataforma. Ex.: mobile.nokia.com, m.facebook.com, coosh.com/iphone/


Aplica1vos na1vos:
Experiências que possibilitam uma melhor integração com as próprias funcionalidades
do disposi*vo, normalmente desenhadas para o próprio framework. Ex.: Câmera,
calendário, calculadora, leitor..


Aplicativos Web
Experiências que possibilitam uma melhor integração entre plataformas. Ideais para um
estratégia com plataformas diferentes. Ex.: Facebook, gmail, groupon, peixe urbano...


Games:
Imersão e foco absoluto no entretenimento. Ex.: Angry birds, cut the rope, advergames...


Quanto à mobilidade,
interações e contexto
Utilitários, Imersivos, Localização, Produtivos, Informativos

Utilitários
Solucionam um ﬁm bem especíﬁco – calendário, calculadora, anotações (momento).


Imersivos
Total concentração no aplica*vo


Localização,
Aplicações baseadas em contextos especíﬁcos.


Produtivos
Melhoram a nossa produ*vidade, facilitam processos.


Informativos
Aplica*vos que são voltadas para a disponibilização de conteúdos.


Conectividade e cross-plataform
O que podem influenciar?

Conectividade


Cross-plataform


Telefonica Mydsl
Produzido por Fjord Oy
Vídeo concept com base em conectividade e cross platform


6.Design


Benchmarking / Pesquisas
Compare o desempenho e identiﬁque as oportunidades
Nenhuma empresa é a melhor em tudo, comportamento do usuário...

Main features:

•  Free Skype‐to‐Skype calls.
•  Call phones and mobiles, send SMS.
•  Free instant messaging.
•  Voicemail.
With Skype the user can send a text message directly from Skype; forward a call to •  Forward calls to a phone when you're oﬄine
your mobile; or set up an online number for friends, family and colleagues to make
a local call from their old‐fashioned phone to your Skype, wherever in the world she •  Video conferencing (Skype conferences currently support up to 25
are. people at a 5me, including the host)

The user needs to get going with these snazzy products is a li]le pay as you go
Skype Credit. Alterna*vely you can get unlimited calls to landlines and a great
bundle of useful features with a subscrip*on – it’s one neat li]le package for a low
monthly fee.

Available features:
Third
Video Toolkits File Message Graphical Unicode Built-in Themes / Plugin
Encryption party add- Scripting
conferencing or SDKs transfer Logging smiles (UTF-8) games skins system
ons

Qt/KDE,
Yes Yes Yes Yes Yes Partial Yes No Yes Yes No
W32

Right-to-
Remote Webcam User-
Voice Offline desktop Left Handwriting Spell Defined
Support Whiteboard Dockable Multiaccount Animations
Mail messaging application mode check Graphical
texting
assistance smiles

With plugin
Yes Yes N/A Yes Yes No No No No N/A N/A
(windows)

1

2
5

1 Menu applica*on

2 Status presence

3 List of contacts and Log
conversa*on.
3
4 Collapse menu

5
Video and audio/video 4
controllers

6 Iphone version
6

Windows Main features:

•  Sharing folders

Live Messenger •  PC‐to‐phone calls

•  Interoperability

•  Oﬄine messaging
Windows Live Messenger (formerly named MSN Messenger, and colloquially
referred to as simply MSN) is an instant messaging client created by Microsoj •  Games and applica*ons
that is currently designed to work with Windows XP, Windows Vista, Windows 7,
Windows Server 2003, Windows Server 2008, and Windows Mobile. The client •  "i’m" ini*a*ve
has been part of Microsoj's Windows Live set of online services since 2005. It
connects to •  S60 Plarorm
Microsoj's .NET Messenger Service.
•  Xbox integra*on

Available features:
Third
Video Toolkits File Message Graphical Unicode Built-in Themes / Plugin
Encryption party add- Scripting
conferencing or SDKs transfer Logging smiles (UTF-8) games skins system
ons

Yes W32 No Yes Yes Yes Yes Yes Yes Yes Yes Yes

Right-to-
Remote Webcam User-
Voice Offline desktop Left Handwriting Spell Defined
Support Whiteboard Dockable Multiaccount Animations
Mail messaging application mode check Graphical
texting
assistance smiles

Yes Yes Yes Yes Yes Yes Yes No Yes No Yes Yes

Windows
Live Messenger 6

1 Toolbar
1
2 Chat log

3 Tools to type a text
messaging

4 User type chat area

Images from webcam
2
5

Instant messaging
3
6 applica*on

4 5

Design Research

As pesquisas devem responder as perguntas chaves que irão ajudar no
sucesso do produto, mas são também uma ferramenta valiosa para uso na
concepção e desenvolvimento do produto. As pesquisas podem ajudar a:

•  Gerar idéias ou avaliar.

•  Esclareça o potencial do seu produto.

•  Entender os pontos fortes e fracos dos produtos concorrentes.

•  Entender seus usuários comportamentos e motivações.

•  Definir, clarificar e priorizar os casos de utilização do produto e do contexto
do usuário.


Tipos de pesquisa
Existem vários tipos de pesquisa: de campo, experimental, laboratorial,
bibliográfica, etc. Porém os resultados obtidos são basicamente: qualitativos
ou quantitativos.

Dicas:

•  Leia tanto quanto você puder, mantenha-se atualizado;

•  Envolva usuários reais. Sempre que possível, observar e conversar com as
pessoas, seja observador;

•  Documente todas as suas descobertas e reflexões sobre suas pesquisas;

•  Rabisque, desenhe, tire fotos, filme, anote;

•  Reveja toda a pesquisa com os envolvidos no projeto, quando possível as
pessoas que irão fazer parte do criação devem participar das investigações.

Design patterns
Web kits, Fóruns, UI design guides, Boas práticas

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

Acesso as principais funcionalidades

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

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)

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.

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.

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)

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 disposi*vos móveis, usa
uma versão modiﬁcada 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 disposi*vo
através de livrarias Java do Google.
Em Android a interface é construída u*lizando a objetos View e
ViewGroup. Existem vários *pos de Views e ViewGroups, que são
descendentes da classe View.

A classe View serve de base para um conjunto de elementos de
tela intera*vos chamados widgets. Widgets podem ser Text,
EditText, InputMethod, MovementMethod, Bu]on, RadioBu]on,
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/

Segunda parte
Hora de botar tudo em prática...

Briefing (daqueles...) 15min
Primeiro caso:
Estamos tendo problemas com a segurança, trânsito e infra-estrutura nos
bairros e precisamos comunicar nossos cidadãos através de um serviço para
celular. Queremos que os mesmos nos ajudem a amenizar este problemas nos
comunicando das ocorrências.

Segundo caso:
Queremos disponibilizar para os nossos usuários um serviço que ajude com o
dia a dia de uma família. A idéia é que os pais possam administrar tarefas para
os filhos, marcar compromissos, agendar eventos, lista de compras, etc.

Terceiro caso:
Nosso objetivo é montar um álbum virtual para a copa, mas desta vez
queremos inovar e este produto só ira estar disponível na versão mobile.

Quarto caso:
Tenho dinheiro e quero investir na sua idéia :)


Apresentação de um conceito
1.  Síntese dos obje*vos do projeto;

2.  Viabilidade do produto comercialmente;

3.  Apresentação de personas, cenários e jornada do usuário.

4.  Tecnologia usada e potencial dos recursos;

5.  Principais funcionalidade (5 telas)

6.  Finalmente, qual é o grande diferencial e o porquê esta solução é
matadora.

7.  Como as informações ali con*das foram ob*das.


1. Síntese dos obje1vos do projeto
20min


2. Viabilidade do produto comercialmente
20min


3. Apresentação de personas, cenários e
jornada do usuário.
30min


4. Tecnologia usada e potencial dos recursos
15min


5. Principais funcionalidade (5 telas)
30min


6. Finalmente, qual é o grande diferencial e o
porquê esta solução é matadora
20min


7. Como as informações ali con1das foram ob1das
20min


8. Agrupar todas as informações e ver a
melhor maneira de apresentar
30min


Cada equipe tem:
20min


Para prototipagem:

Forum Nokia – Flowella
Flash – Adobe Device Central
Pidoco
Live View
Mawk mobile (beta)
Videos


Links:
http://www.yiibu.com
http://www.humanodigital.com.ar/285-libros-gratis-sobre-internet-redes-sociales-comunicacion-tics-educacion-seo-y-la-cultura-digital/

http://www.youtube.com/user/Apple?blend=6&ob=5#p/u/4/LLJIef-e-7g
http://www.youtube.com/user/androiddevelopers
http://www.youtube.com/user/windowsphone
http://www.youtube.com/user/nokia
http://deviceatlas.com/
http://www.scoop.it/t/all-about-digital-and-mobile-marketing/
http://www.delicious.com/jane.vita/mobile

Slideshare
http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://www.slideshare.net/fjordnet/fjord-trends-2011
http://www.slideshare.net/fling/designing-mobile-experiences

Livros:
Mobile Design and Development – Brian fling – Ed. O'Reilly


Design de Interação para Dispositivos Móveis - turma de setembro 2011

Mais conteúdo relacionado

Mais procurados (16)

Destaque (18)

Semelhante a Design de Interação para Dispositivos Móveis - turma de setembro 2011 (20)

Mais de Jane Vita (19)

Último (20)

Design de Interação para Dispositivos Móveis - turma de setembro 2011