mobile first - w3c web.br 2012

Horácio Soares @horaciosoares

21 9925-5404

Outubro de 2012 – São Paulo!

W3C - web.br 2012

mobile first

mundo mobile

GPS

Backseat Driver – Toyota

ToyToyota

http://www.youtube.com/watch?v=-mjudtrwdS4

Acelerômetro

Giroscópio

http://www.youtube.com/watch?v=0X-kmUhPC4Q

Bluetooth

Áudio, vídeo e imagem

NFC

Sensores multitoque

Em qualquer hora e local.

Novas maneiras de interação e apresentação

Boa compatibilidade entre

navegadores Mobile e HTML5

Atualizações frequentes...

estastísticas

http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/

http://zeldman.com/2012/07/09/mobile-to-the-future-luke-wroblewski/

crescimento = oportunidade

Estatísticas Brasil

Fonte: Onnaweb (IBOPE – agosto 2012) http://www.onnaweb.com.br/blog/mobile/estudo-aponta-quando-e-o-que-os-brasileiros-fazem-na-internet-pelo-smartphone/

GIF animado...

By Luli

TIC Domicílios 2011 outubro de 2011 – janeiro 2012

http://cetic.br/usuarios/tic/2011-total-brasil/

Maio 2012 http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

Maio 2012 http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

mais dados...

http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future

http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future

http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future

http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future

http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future

limitações do mobile

Muitas vezes, ao interagir com

mobile, as pessoas estão em

modo: “fritando o peixe e

olhando o gato” e com

apenas um dos dedos...

@lukew

‘Desktop is like “diving”…

…while mobile is like “snorkling.”’ by Hinman at Nokia

http://www.slideshare.net/Rachel_Hinman

@lukew

desktop

@lukew

tela grande

@lukew

tela grande

energia

@lukew

tela grande

energia

rede consistente

@lukew

tela grande

energia

rede consistente

teclado

@lukew

tela grande

energia

rede consistente

teclado

mouse

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa caneca de café

@lukew

@lukew

mobile

tela pequena

@lukew

tela pequena

bateria

@lukew

tela pequena

bateria

rede inconsistente

@lukew

tela pequena

bateria

rede inconsistente

dedo gordo

@lukew

tela pequena

bateria

rede inconsistente

dedo gordo

sensores

@lukew

Slide 107 http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop

Como o Luli disse no Digitalks no Rio:

“Nesse mundo Mobile, somos todos daltónicos e sofremos

do Mal de Parkinson”

"Context is about

understanding human

relationships to the

people, places and things

in the world". Rachel Hinman

Artigo: http://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier Livro: http://www.amazon.com/Mobile-Frontier-Rachel-Hinman/dp/1933820551?tag=651998669-20 Video: http://vimeo.com/39230026 Apresentações: http://www.slideshare.net/Rachel_Hinman

perda de 80% do espaço

@lukew

e isso pode ser ótimo para o negócio...

te força a priorizar...

te força a manter o foco…

Alguém conhece algum site

que gostaria que 80% do seu

conteúdo/itens/elementos

fosse retirado da interface?

Flickr desktop

60 opções de menu...

@lukew

Flickr mobile

7 opções de menu...

Less is more...

@lukew

Conhecimento profundo da

audiência, o que fazem, por

que vieram e por que se

importam com o Flickr...

Restrições são boas para o

design, pois te forçam a

priorizar, a manter o foco

mas cuidado…

no ponto…

Os detalhes do comprador não

podem ser visualizados na versão mobile.

Como os brasileiros estão lidando com seus smartphones?

http://wpuploads.appadvice.com/wp-content/uploads/2011/07/joliescottiphone-642x481.jpg

http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf

1

Os smartphones são indispensáveis no

cotidiano

2 - Os smartphones transformaram o comportamento do consumidor

3 Os smartphones ajudam os usuários a navegar pelo mundo

4

Os smartphones mudam o modo como os consumidores

fazem compras

5

Os smartphones ajudam os

anunciantes a entrarem em

contato com os clientes

Projetos UX Mobile

O que os usuários esperam?

O que as pessoas esperam em uma experiência em dispositivos móveis?

felicidade

felicidade

X

felicidade

experiência perfeita

A e

xpe

riê

nc

ia

pe

rfe

ita

felicidade

Entretanto, a experiência pertence as pessoas.

O designer não projeta a

experiência… Projeta para a

experiência do usuário.

Experiência do Usuário (UX) é a

qualidade da experiência que uma

pessoa tem ao interagir com algo

projetado.

uxnet.org

“

”

E o que as empresas esperam?

o melhor osso…

mas como

com qualidade...

acertando o tiro certo no alvo certo

com estratégia

“uma conspiração para o sucesso”

falta de estratégia e planejamento resulta em…

X

http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg

para onde vamos?

onde devemos mirar?

Livro: O Tiro e o Alvo

Causo 1

Precisamos Construir uma mesa.

CAUSO 1

- A propósito, que mesa?

Livro: O Tiro e o Alvo

De sinuca?

Ping-pong?

Futebol de botão?

Carteado?

Ou seria uma mesa para computador?

Reunião?

Escritório?

Mesa de centro?

Jantar?

Ou seria uma mesa de cirurgia?

De autópsia?

CAUSO 1 (continuação)

- Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é curto, então, mãos à obra!

Livro: O Tiro e o Alvo

Livro: rework 37 Signals

CAUSO 1 (continuação)

Para uma mesa pode parecer exagero, mas não para sistemas e sites...

Livro: O Tiro e o Alvo

Conclusão? Retrabalho, desgaste com o cliente e diminuição do lucro.

desafio 1:

identificar objetivos e necessidades…

Por Quê? Por Quê? Por Quê? Por Quê? Por Quê?

Precisamos automatizar a Contabilidade

Preciso do Balancete dia 5 e não dia 15 como atualmente!

Necessito da Conta X do Balancete até o dia 5.

Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas.

Precisamos informar o valor das Reservas ao

Banco Central até o dia 8!

Por que se não informarmos as Reservas

seremos multados!!

Investigação Baseada em Perguntas

Uma proposta de briefing Baseado em perguntas:

http://clearleft.s3.amazonaws.com/client-

worksheet.doc

http://bit.ly/a5tRzF

Marte Objetivos e metas da empresa

Vênus Necessidades dos usuários

Desafio 2:

Como atender ao mesmo tempo os objetivos e as necessidades?

Objetivos e metas do projeto

Reais necessidades

dos usuários

a busca do equilíbrio

empresa

usuários

Objetivos e metas do

projeto Necessidades dos

usuários

Um caminho: modelagem participativa

um case em equilíbrio…

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Erico Fileno

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Observação e identificação de um problema...

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Quais são os caminhos do mobile?

Como era em 2004, 2005, 2006...?

Site Acesso Digital

2007

Portabilidade - design líquido (resolução 1024x768)

Portabilidade - design líquido ( resolução 640x480)

Portabilidade – css para impressão

Acesso Digital: http://acessodigital.net

Portabilidade css para dispositivo móvel

MOTO Q

Quais são os caminhos do mobile hoje?

WEB Não fazer nada…

design responsivo

site mobile (uma versão)

site mobile (duas versões – smartphone e tablet)

Lufthansa

Installed Aplicações nativas

Installed Aplicações Hibridas

HTML5

Qual melhor caminho?

Depende!

•  do problema que será resolvido •  do orçamento •  público-alvo •  …

Como anda a qualidade dos

nossos sites nas versões desktop?

Será?

Independente do caminho escolhido

deve-se…

Mobile First Luke Wroblewski

Livro: http://www.abookapart.com/products/mobile-first

SIMPLICIDADE

Paradoxo da escolha

Elimine da interface itens que não

sejam extremamente

necessários...

Case Extreme Booking with Hotels.com

http://www.youtube.com/watch?v=gcuFkiEORsE

Desktop first!

http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

Mobile First!

http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

Mobile First!

Mobile First!

Mobile First!

- Site mobile: Netshoes

Prototipação

- Não economize nos

protótipos…

37 Signals

(design de epicentro)

Content First

Cuidado com Wireframe…

“Erre logo para ser bem

sucedido mais cedo.” IDEO

Faber Ludens – Érico Fileno

How To Conduct A Usability Test On A Mobile Device

http://www.measuringusability.com/blog/mobile-usability-test.php

- Desafio… Como testar aqui?

Foto: Rosenfield Media

- Como o homem da maça fazia?

protótipos testes

avaliações

...e evolua sempre.

...e evolua sempre.

= Melhoria contínua

Horácio Soares @horaciosoares

21 9925-5404

Outubro de 2012 – São Paulo!

Obrigado!