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

Jane Vita

IxDA Curitiba / Aldeia Coworking / Jane Vita 2

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

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

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

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,

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

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

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

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:

Setembro/2011

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

Setembro/2011

Para entender o contexto...

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

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.

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

Setembro/2011

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

Setembro/2011

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

5. Tecnologia

iOS, android, symbian, java me...

Qual tecnologia?

Caracterís*cas de produto

Nova tecnologia

Desempenho

Iden*ficaçã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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

Números Uso de apps (facilidades e costume)

Setembro/2011

IxDA Curitiba / Aldeia Coworking / Jane Vita Setembro/2011

Windows phone Android Apple Nokia

Setembro/2011

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í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.: mobile.nokia.com, m.facebook.com, coosh.com/iphone/

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

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 fim bem específico – calendário, calculadora, anotações (momento).

Imersivos

Total concentração no aplica*vo

Localização,

Aplicações baseadas em contextos específicos.

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

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-

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 5me, including the host)

Available features:

Menu applica*on

Status presence

List of contacts and Log conversa*on.

Collapse menu

Video and audio/video controllers

Iphone version

Windows Live Messenger (formerly named MSN Messenger, and colloquially referred to as simply MSN) is an instant messaging client created by Microsoj 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 Microsoj's Windows Live set of online services since 2005. It connects to Microsoj'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-

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 applica*ons

•  "i’m" ini*a*ve

•  S60 Plarorm

•  Xbox integra*on

Windows Live Messenger

Available features:

Toolbar

Chat log

Tools to type a text messaging

User type chat area

Images from webcam

Instant messaging applica*on

Windows Live Messenger

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

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)

Exemplos de interfaces para dispositivos móveis

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

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

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.

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.

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 -

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.

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

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

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

Cada equipe tem: 20min

Referências

Forum Nokia – Flowella Flash – Adobe Device Central Pidoco Live View

Mawk mobile (beta) Videos

Para prototipagem:

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

Education

Móveis (1)

THARCIO BIOLOGIA Interação Gênica 01.06.2020 VASCONCELOS · 2020-06-02 · ACOLHIDA: Apresentação à turma. APRESENTAÇÃO DA AULA: - Conteúdo: Interação Gênica. - Recursos:

REALIDADE AUMENTADA EM DISPOSITIVOS MÓVEIS: MODELOS DE ... · mecanismos de input limitam a interação ao pressionar de botões. Esta viragem tornou ... Figura 4 – Navegação

Sumário · 2017. 1. 9. · Discente, permitindo o intercâmbio virtual de informações entre discentes e docentes de uma turma. Nela, é possível a interação entre professores

Relatório de grupo 2º semestre/2017 - escoladositio.com.br · de interpretação e interação social, ... Após lermos a lenda, a turma ... personagem da Iara

Batrol Móveis - Atacado e Fabricação de Móveis

Identidade Visual, User Experience Design e Design de ...repositorio.ipcb.pt/bitstream/10400.11/5538/1... · desenvolvimento de aplicações móveis a nível do design de interação,

Interação em dispositivos móveis por meio de teclado físico e de teclado virtual

Framework para a Integração de Dispositivos Móveis na ... · 5.2 Gráﬁco do tempo de execução para cada método de interação em minutos . . . .56 5.3 Gráﬁco com a média

Componentes móveis

Disciplina de Programação de Robôs Móveis SSC-0712osorio.wait4.org/SSC0712/Aula02-PRM-2012.pdf · USP – ICMC - SSC0712 - Turma 2012/1 Programação de Robôs Móveis Prof. Fernando

Momentos Móveis

Interação em players de música - dispositivos móveis

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO …³s... · sítio da internet ou aplicativo com suporte para ferramentas digitais móveis no qual ocorre interação virtual

2º PERÍODO DIURNO 2º PERÍODO NOTURNO...HORAS Turma D Turma D Turma D Turma D Turma D HORAS Turma A Turma B Turma A Turma B Turma A Turma B Turma A Turma B Turma A Turma B 8h Economia

Aluno(a): Nº: Turma: Data: / / Acertos: - Educacionalpessoal.educacional.com.br/up/4740001/929720/avaliacao_417734[1].pdf · (€€)€D - polialelia (€€)€E - interação

JEFTÉ DE ASSUMPÇÃO MACÊDO POR NOVAS …...M141p Macêdo, Jefté de Assumpção Por novas formas de interação: uma avaliação do uso da parte posterior de dispositivos móveis

Identidade Visual, User Experience Design e Design de ... · Design, Design de interação no desenvolvimento de aplicações móveis. Focando essa análise através de uma investigação

SANTOS H. L. Design de Interação para Distância Transacional por Dispositivos Móveis, Monografia de conclusão de curso, Centro de Informática da UFPE, 2011

Locação de Bens Móveis - Locação-De-bens-móveis