intmobile aldeia setembro2013_final_000

IxDA Curitiba / Aldeia Coworking / Jane Vita 1 Setembro/2011 Novembro/2013 IxDA Curitiba / Aldeia Coworking / Jane Vita

Curso Design de Interação para disposi3vos móveis Vivenciando a criação de aplica0vos mobile.

Jane Vita Senior UX Designer Ixonos Plc

Novembro/2013 IxDA Curitiba / Aldeia Coworking / Jane Vita

Jane Vita Sênior UX designer na Ixonos Oy em Helsinque, Finlândia. Trabalha com mídias digitais desde 1997. Possui uma vasta experiência em concept design, service design, cross-‐plaNorm design, interac0on design, usability, user interface e visual design. É mestranda em Service Innova0on and Design na Laurea University of Applied Sciences. Tem direcionado seus estudos para métodos e ferramentas que melhorem o processo de game design, tornando o mais centrado no jogador, que também é consumidor. Jane Vita trabalhou em empresas como: Posi0vo Informá0ca, Lojas Renner, INdT, Diário de Pernambuco e Fjord Oy (Finlândia) e teve a oportunidade de atender grandes clientes como: Volvo, Ericsson, Nokia, Banco do Brasil, Renault entre outros.

E VOCÊS?

Nome Área em que trabalha

Profissão O que espera aprender no workshop?


Conteúdo do workshop

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

•  Service Design no contexto digital

•  Mobilidade, interações e contexto

•  Conec0vidade e cross-‐plaNorm

•  Escolhendo a tecnologia

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

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

•  Prá0ca ( 3 horas )

IxDA Curitiba / Aldeia Coworking / Jane Vita 4 Novembro/2013

Antes de decidir o que fazer é preciso pesquisar e analisar

INICIANDO O PROCESSO DE CRIAÇÃO PARA APLICAÇÕES MOBILE

2011 - Going mobile...

IxDA Curitiba / Aldeia Coworking / Jane Vita 8

•  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

2011 - 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

2013


“O crescimento dos disposi/vos móveis se torna evidente para quase qualquer cidadão do mundo, e seu uso não apenas está mudando nossos costumes para nos comunicar como também a forma como

vivemos.” SAP Brasil

2013


“De acordo a uma enquete realizada pela Nielson, 48% das crianças entre 6 e 12 anos pediram um iPad de Natal. Isso significa que o tablet da Apple fois o presente mais requisitado, seguido do WII U, da

Nintendo. Isso quer dizer que as crianças preferiram um disposi-vo que além de jogos oferece uma

grande variedade de opções de mobilidade, ao invés de um console fixo de jogos.”

Universidade de Stamford, Mary Meeker

2013


“O tráfego móvel representa 13% do total. Trata-‐se de um incremento muito importante, levando em consideração que há somente três anos atrás

representava apenas 1%. Como é de se esperar, uma das razões é que cada vez mais usuários comprem usando seus disposi/vos móveis. Por exemplo, durante o úl/mo Black Friday norte-‐americano, 24% das compras online se

realizaram de smartphones ou tablets.” Universidade de Stamford, Mary Meeker

2013


“Um terço dos norteamericanos adultos possuem um tablet ou livro digital. Uma esta]s/ca da Pew Research Center revelou que mais de 29% da população adulta dos Estados Unidos possui um tablet. Um crescimento impressionante se levar em consideração que faz menos

de três anos que esta cifra era de 2%. Universidade de Stamford, Mary Meeker

2013


“No mundo há 1 bilhão de usuários de smartphones. Este número representa 1/5 do total de telefones móveis, o que significa que a nível global esta revolução recém está começando. Segundo um estudo da Morgan Stanley, o número de usuários de

smartphones cresce a uma taxa de 42% a nível global.” Universidade de Stamford, Mary Meeker

2013


“Android é a plataforma que mais cresce. Ainda que as cifras de vendas do tablet iPad e os telefones iPhone

são impressionantes, se tornam pequenas ao compará-‐las com o crescimento do sistema opera/vo

Android. Atualmente, existem 600 milhões de smartphones que funcionam com o sistema opera/vo

do Google, diante dos 100 milhões de iPhones distribuídos pela Apple nos úl/mos 4 anos.” Universidade de Stamford, Mary Meeker


hfp://www.thinkwithgoogle.com/mobileplanet/pt-‐br/

MOBILE EXPERIENCE

Mobile phones, tablets, wearables...

Mobile experience 1.  Ideia – Primeiro momento que nos move a prosseguir. 2.  Necessidades -‐ Iden0ficar 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ó0po – Testar a experiência em seu contexto. 8.  Desenvolvimento – Colocar todas as etapas juntas. 9.  Testes – Testar, testar.... e testar. 10. O0mização – Reduzir a quan0dade de componentes, simples. 11. Portabilidade / Localização – Adaptar para outros devices e idiomas.


Idea e necessidades

•  Ideia par0ndo de uma necessidade ou mais – solução de um problema

•  Par0ndo da ideia achar as necessidades – par0ndo do produto.



1. Ideia

1. Ideia

•  Ques0onar 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? Cross-‐plaNorm? Contextos... •  Que aspecto real do dia a dia eu posso comparar? •  Por que vai ser ú0l para o negócio? •  ...



2. Necessidades e obje3vos

2. Necessidades e obje3vos

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

•  Obje3vo (variável) – tasks – casos de uso...

Localizar o usuário e dizer o que ele pode comprar perto. Possibilitar checkin nos estabelecimentos.

Alerta! Toda a necessidade deve gerar um obje0vo bem específico, porém esta necessidade poder ser suprida por diferentes obje0vos. (KISS – Keep It Super Simple)



3. Contexto

3. Contexto

•  Usuário – personas – publico alvo •  Contexto – cenário – mobile (Uso) – jornada do usuário/consumidor

•  Conteúdo – informação – negócios

Um dia na jornada do usuário Jornada do consumidor, do usuário Principais pontos de interação


IxDA Curitiba / Aldeia Coworking / Jane Vita

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 Novembro/2013

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


IxDA Curitiba / Aldeia Coworking / Jane Vita 29 Novembro/2013 IxDA Curitiba / Aldeia Coworking / Jane Vita

29

Onboard experience Produzido por Ixonos

Storyboard com base em casos de uso.

Nokia Music Catcher Produzido por Fjord Oy

Vídeo concept com base em casos de uso.

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

Nokia Music Catcher Produzido por Fjord Oy

Vídeo concept com base em casos de uso.

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


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...

Preferencialmente usando pesquisa com usuários ou referências. 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 0cket de uma vez 4. Comprar para minha namorada 5. Mandar de presente um 0cket para um amigo Quanto a busca: ...

Setembro/2011 Novembro/2013 IxDA Curitiba / Aldeia Coworking / Jane Vita

Product Backlog

Product backlog é um documento de alto nível do projeto. Nele é con0do 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 es0ma0va de complexidade e o valor de negócio da mesma para a implementação, para facilitar na priorização.



ID Área Como (usuário)...

Eu quero... Para... Anotações Prioridade Status

1 Perfil Usuário Ver como estão visualizando meu perfil

e ver se eu gosto

alta feito

2 Perfil Amigo Saber quantos anos meu amigo tem

para ver se ele é mais velho que eu

baixa não iniciado

3 Oferta Usuário Saber mais sobre a oferta

saber se é boa para mim

media cancelado

4 Oferta Amigo Saber o que estão comprando

para eu comprar também

acompanhar as feeds da comunidade

muito alta em processo

Product Backlog Acompanhamento do produto

Novembro/2013

O que é preciso para dar certo... 4. ESTRATÉGIA

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 / U0lidade

•  Service Design Thinking

•  Métodos colabora0vos – falar com outras pessoas...

Setembro/2011

O sucesso depender de N fatores


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

•  O usuário precisa entender do que se trata, precisa colaborar e ajudar a melhorar – colaboração, co-‐criação, feedback...

•  Cross-‐plaNorm (estudo de integração entre as mídias) – sempre atento às compa0bilidades.

•  Transmedia – Youtube, Facebook, Foursquare....

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

•  Go responsive design... (sempre que puder)

Setembro/2011

5. TECNOLOGIA

iOS, Android, Samsung, Nokia...

Qual tecnologia?!

Caracterís0cas de produto

Nova tecnologia

Desempenho

Iden0ficação de bugs

Demanda

Suporte técnico

Aparência

Adequaçao

Características "de produto"

Nova tecnologia"

Desempenho"

Identificação de bugs"

Demanda"

Suporte técnico"

Aparência"

Adequação"

Necessidades

Oportunidades

Facilidades

Público alvo

Conectividade Objetivos

TIPOS DE APLICAÇÃO SMS, widgets, websites, aplicações nativas, games, web

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

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íficas 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.: m.nokia.com, m.bbc.com/sport, m.globo.com

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

Aplica3vos na3vos: Experiências que possibilitam uma melhor integração com as próprias funcionalidades do disposi0vo, normalmente desenhadas para o próprio framework. Ex.: Câmera,

calendário, calculadora, leitor..

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

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... Responsive design – está incluído nesta categoria, algumas pesquisadores consideram esta categoria websites. (hfp://www.nngroup.com/ar0cles/mobile-‐na0ve-‐apps/)


Games: Imersão e foco absoluto no entretenimento. Ex.: Angry Birds, Cut

the Rope, Clash of Clans, advergames...

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

U0litários, Imersivos, Localização, Produ0vos, Informa0vos

QUANTO À MOBILIDADE, INTERAÇÕES E CONTEXTO

Utilitários


Solucionam um fim bem específico – calendário, calculadora, anotações (momento).


Imersivos


Total concentração no aplica0vo

Localização,


Aplicações baseadas em contextos específicos.


Produtivos


Melhoram a nossa produ0vidade, facilitam processos.

Informativos


Aplica0vos que são voltadas para a disponibilização de conteúdos.



Muitos outros... Classificação feita pela loja online e pelo próprio desenvolvedores...

CONECTIVIDADE, CROSS-‐PLATFORM, RESPONSIVE DESIGN, TRANSMEDIA

O que podem influenciar?

Conectividade

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 89 Novembro/2013 IxDA Curitiba / Aldeia Coworking / Jane Vita

Cross-plataform

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita 90 Novembro/2013 IxDA Curitiba / Aldeia Coworking / Jane Vita


Telefonica Mydsl Produzido por Fjord Oy

Vídeo concept com base em conectividade e cross platform



Telefonica Mydsl


Responsive design hfp://responsive.vermilion.com/compare.php

hfp://mediaqueri.es/


Transmedia

6. DESIGN

BENCHMARKING / PESQUISAS

Compare o desempenho e identifique as oportunidades"Nenhuma empresa é a melhor em tudo, comportamento do usuário..."

With Skype the user can send a text message directly from Skype; forward a call to 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 are. The user needs to get going with these snazzy products is a lifle pay as you go Skype Credit. Alterna0vely you can get unlimited calls to landlines and a great bundle of useful features with a subscrip0on – it’s one neat lifle package for a low monthly fee.

Video conferencing

Toolkits or SDKs Encryption File

transfer Message Logging

Graphical smiles

Unicode (UTF-8)

Built-in games

Themes / skins

Plugin system

Third party add-

ons Scripting

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

Voice Mail

Offline messaging

Remote desktop

application assistance

Webcam Support

Whiteboard

Right-to-

Left

texting

Handwriting mode Dockable Multiaccount Spell

check

User-Defined

Graphical smiles

Animations

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

Main features:

•  Free Skype-‐to-‐Skype calls. •  Call phones and mobiles, send SMS.

•  Free instant messaging.

•  Voicemail.

•  Forward calls to a phone when you're offline

•  Video conferencing (Skype conferences currently support up to 25 people at a /me, including the host)

Available features:

1

2

3

4

Menu applica0on

Status presence

List of contacts and Log conversa0on.

Collapse menu

Video and audio/video controllers

Iphone version

5

6

4

6

3

2

1

5

Windows Live Messenger (formerly named MSN Messenger, and colloquially referred to as simply MSN) is an instant messaging client created by Microso� that is currently designed to work with Windows XP, Windows Vista, Windows 7, Windows Server 2003, Windows Server 2008, and Windows Mobile. The client has been part of Microso�'s Windows Live set of online services since 2005. It connects to Microso�'s .NET Messenger Service.

Video conferencing

Toolkits or SDKs Encryption File

transfer Message Logging

Graphical smiles

Unicode (UTF-8)

Built-in games

Themes / skins

Plugin system

Third party add-

ons Scripting

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

Voice Mail

Offline messaging

Remote desktop

application assistance

Webcam Support

Whiteboard

Right-to-

Left

texting

Handwriting mode Dockable Multiaccount Spell

check

User-Defined

Graphical smiles

Animations

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

Main features: •  Sharing folders

•  PC-‐to-‐phone calls

•  Interoperability

•  Offline messaging

•  Games and applica0ons

•  "i’m" ini0a0ve

•  S60 PlaNorm

•  Xbox integra0on

Windows Live Messenger

Available features:

6

1

2

3

4

Toolbar

Chat log

Tools to type a text messaging

User type chat area

Images from webcam

Instant messaging applica0on

5

6

4

3

2

1

5

Windows Live Messenger

FUNCIONALIDADES

http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/

https://www.fontfont.com/fonts http://www.thinkwithgoogle.com/mobileplanet/en/ http://www.mobile-patterns.com/ http://pttrns.com/


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.

Design Research

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

“Make it simple, but no simpler.” Albert Einstein

Elementos e cuidados comuns na construção interfaces

Shneiderman's "Eight Golden Rules of Interface Design"

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

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)

… Gestures cuidado com conflitos


EXEMPLOS DE INTERFACES PARA DISPOSITIVOS MÓVEIS

Novembro/2013 IxDA Curi0ba / Aldeia Coworking / Jane Vita

Skype


hfp://www.skype.com/en/download-‐skype/skype-‐for-‐computer/

Evernote


hfp://evernote.com/evernote/#

Outros exemplos:

http://www.mobile-patterns.com/

http://pttrns.com/


DESIGN PATTERNS

iOS 7

https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/

MobileHIG/index.html#//apple_ref/doc/uid/TP40006556

Androide http://developer.android.com/design/patterns/index.html


Windows phone http://dev.windowsphone.com/en-us/design/library


CONCEPT DESIGN Visualizando ideias... Prá0ca...

Escolha o tema 15min


Empresas e Negócios Governo e Política

Economia e Monetização Mídia e Entretenimento

Ciência e Tecnologia Design e cultura

Comércio e Varejo Saúde e Bem-estar

Viagens e Transportes Educação

Outro...

Apresentação de um conceito


1.  Síntese dos obje0vos 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 (interações);

5.  Principais funcionalidade (5 telas) 6.  Finalmente, qual é o grande diferencial e o porquê esta solução é

matadora. (Elevator Pitch)

7.  Explique o processo e como chegaram nesta ideia

Novembro/2013


1. Síntese dos obje3vos 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

(Elevator Pitch) 20min


7. Explique o processo e como chegaram nesta ideia

20min


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

30min


Cada equipe tem: 15min

Referências

References

http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/

https://www.fontfont.com/fonts http://www.thinkwithgoogle.com/mobileplanet/en/ http://www.mobile-patterns.com/ http://pttrns.com/ Novembro/2013 IxDA Curitiba / Aldeia Coworking / Jane Vita


Para prototipagem:!Framer Indigo Studio Mockingbird Simulify Solidify Lovely Charts ForeUI Creately JumpChart Lumzy Concept.ly Frame Box Realizer

Cacoo Mockup Builder Appery.io Mockup Designer ClickDummy Mockups.me Mockabilly RWD Wireframes Blocks UX Toolbox FluidUI Proto.io POP prototype


JANE VITA Senior UX Designer

Ixonos Plc. [email protected]

http://www.janevita.com http://www.slideshare.net/janevita/

fi.linkedin.com/in/janevita/ http://www.ixonos.com

http://futureshelsinki.com/

Obrigada!

intmobile aldeia setembro2013_final_000

Documents

demandagt

video conferencingtoolkits

ofertasgt

http

mobileplaneten

fonts http

estabelecimentogt

mapagt