Jane Vita tem experiência trabalhando em diversas empresas de design e tecnologia. Ela tem especialização em webdesign e desenvolveu produtos para várias plataformas. Atualmente trabalha na empresa Acessozero.
O guia definitivo para conquistar a aprovação em concurso público.pdf
Design de Interação para Dispositivos Móveis - turma de setembro 2011
1.
2. 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
4. 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
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 4
5. Iniciando o processo de criação
para aplicações mobile
Antes de decidir o que fazer, pensar...
6. Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 6
7. Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 7
8. 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,
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 8
9. Going mobile...
• Personalização, customização,
• Parte da realidade,
• Viralidade,
• Plataforma free ou de baixo custo,
• Engajamento,
• Diversidade,
• Foco,
• E muito mais.
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 9
11. 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.
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 11
12.
13. Idea e necessidades
• Ideia partindo de uma
necessidade ou mais
• Partindo da ideia achar as
necessidades
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 13
14. 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?
• ...
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 14
15. 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)
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 15
16. 3. Contexto
• Usuário – personas – publico alvo
• Contexto – cenário – mobile (Uso)
• Conteúdo – informação – negócios
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 16
17. 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
18. 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
19. Nokia Music Catcher
Produzido por Fjord Oy
Vídeo concept com base em casos de uso.
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 19
22. 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: ...
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 22
23. 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.
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 23
24. 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
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita
26. 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
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 26
27. 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...
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 27
43. Widgets:
Pequenas aplicações as quais disponibilizam informações específicas e que
normalmente se integram ao framework. Ex.: News, Clima/tempo, calendário, notes...
Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 43
44. 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/
Setembro/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 44
59. Telefonica Mydsl
Produzido por Fjord Oy
Vídeo concept com base em conectividade e cross platform
Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 59
61. Benchmarking / Pesquisas
Compare o desempenho e identifique as oportunidades
Nenhuma empresa é a melhor em tudo, comportamento do usuário...
62. 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 offline
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)
63. 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
64. Windows Main features:
• Sharing folders
Live Messenger • PC‐to‐phone calls
• Interoperability
• Offline 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
65. 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
66. 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.
Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 66
67. 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.
75. 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.
76. 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)
78. 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.
81. 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.
90. 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)
91. 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.
92. 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 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 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.
93. 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.
94. 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/
96. 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 :)
Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 96
97. 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.
Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 97
108. Para prototipagem:
Forum Nokia – Flowella
Flash – Adobe Device Central
Pidoco
Live View
Mawk mobile (beta)
Videos
Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita
109. 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
Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 109