design de interação para dispositivos móveis - turma de setembro 2011

110

Upload: jane-vita

Post on 19-May-2015

1.531 views

Category:

Education


5 download

DESCRIPTION

Workshop - Design de Interação para dispositivos móveis. Ministrado na Aldeia Coworking em parceria com o IxDA-Curitiba.

TRANSCRIPT

Page 1: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 2: 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

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

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

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

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

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

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

Antes de decidir o que fazer, pensar...

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

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

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

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

Page 8: Design de Interação para Dispositivos Móveis - turma de setembro 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

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

Going mobile...

IxDA Curitiba / Aldeia Coworking / Jane Vita 9

•  Personalização, customização,

•  Parte da realidade,

•  Viralidade,

•  Plataforma free ou de baixo custo,

•  Engajamento,

•  Diversidade,

•  Foco,

•  E muito mais.

Setembro/2011

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

Mobile experience

Page 11: Design de Interação para Dispositivos Móveis - turma de 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. 

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

Page 12: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 13: Design de Interação para Dispositivos Móveis - turma de setembro 2011

Idea e necessidades

•  Ideia partindo de uma necessidade ou mais

•  Partindo da ideia achar as necessidades

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

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

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?

•  ...

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

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

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)

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

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

3. Contexto

•  Usuário – personas – publico alvo

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

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

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

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

Page 18: Design de Interação para Dispositivos Móveis - turma de 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

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

Nokia Music Catcher Produzido por Fjord Oy

Vídeo concept com base em casos de uso.

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

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

IxDA Curitiba / Aldeia Coworking / Jane Vita

Exemplo de contexto:

Setembro/2011

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

IxDA Curitiba / Aldeia Coworking / Jane Vita

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

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

IxDA Curitiba / Aldeia Coworking / Jane Vita 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

Page 23: Design de Interação para Dispositivos Móveis - turma de 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.

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

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

IxDA Curitiba / Aldeia Coworking / Jane Vita

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

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

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

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

O sucesso depende de N fatores

IxDA Curitiba / Aldeia Coworking / Jane Vita 26

•  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

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

O sucesso depender de N fatores

IxDA Curitiba / Aldeia Coworking / Jane Vita 27

•  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

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

5. Tecnologia

iOS, android, symbian, java me...

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

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 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

IxDA Curitiba / Aldeia Coworking / Jane Vita 33

Números Uso de apps (facilidades e costume)

Setembro/2011

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

IxDA Curitiba / Aldeia Coworking / Jane Vita Setembro/2011

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

IxDA Curitiba / Aldeia Coworking / Jane Vita

Windows phone  Android  Apple Nokia 

Demos

Setembro/2011

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

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

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

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

SMS:  Experiências onde o usuário recebe alertas sobre alguma interação em um sistema 

já existente. Ex.: facebook, groupon, gmail... 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Quanto à mobilidade, interações e contexto

Utilitários, Imersivos, Localização, Produtivos, Informativos

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

Utilitários

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

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

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

Imersivos

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

Total concentração no aplica*vo  

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

Localização,

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

Aplicações baseadas em contextos específicos. 

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

Produtivos

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

Melhoram a nossa produ*vidade, facilitam processos. 

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

Informativos

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

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

Page 55: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 56: Design de Interação para Dispositivos Móveis - turma de setembro 2011

Conectividade e cross-plataform

O que podem influenciar?

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

Conectividade

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

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

Cross-plataform

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

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

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

Telefonica Mydsl Produzido por Fjord Oy

Vídeo concept com base em conectividade e cross platform

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

6.Design

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Benchmarking / Pesquisas

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

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

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-

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

Available features: 

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

Menu applica*on 

Status presence 

List of contacts and Log conversa*on. 

Collapse menu 

Video and audio/video controllers 

Iphone version 

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

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-

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

•  "i’m" ini*a*ve 

•  S60 Plarorm 

•  Xbox integra*on 

Windows Live Messenger

Available features: 

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

Toolbar 

Chat log 

Tools to type a text messaging 

User type chat area  

Images from webcam 

Instant messaging applica*on 

Windows Live Messenger

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

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

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

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

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.

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

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

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

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

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

Acesso as principais funcionalidades

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

Legibilidade

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

Lógico, intuitivo...

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

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

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

Navegabilidade

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

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.

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

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)

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

Exemplos de interfaces para dispositivos móveis

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

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.

Page 79: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 80: Design de Interação para Dispositivos Móveis - turma de setembro 2011

N900

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

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. 

Page 82: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 83: Design de Interação para Dispositivos Móveis - turma de setembro 2011

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

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

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

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

Globo.com

Page 86: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 87: Design de Interação para Dispositivos Móveis - turma de setembro 2011

Facebook

Page 88: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 89: Design de Interação para Dispositivos Móveis - turma de setembro 2011
Page 90: Design de Interação para Dispositivos Móveis - turma de setembro 2011

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

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

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.

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

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 -

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

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.

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

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/

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

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

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

Briefing (daqueles...) 15min

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

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 :)

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

Apresentação de um conceito

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

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. 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

1. Síntese dos obje1vos do projeto 20min 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

2. Viabilidade do produto comercialmente 20min 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

30min 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

4. Tecnologia usada e potencial dos recursos 15min 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

5. Principais funcionalidade (5 telas) 30min 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

20min 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

30min 

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

Cada equipe tem: 20min 

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

Referências

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

Julho/2011 IxDA Curitiba / Aldeia Coworking / Jane Vita

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

Mawk mobile (beta) Videos

Para prototipagem:

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

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

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