frontinbh - os dasafios do design mobile

front<in>bhBelo Horizonte

Julho 2012

horacio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares

Horácio Soares

http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

X

Estamos falando de pessoas,não de dispositivos...

“design for mobile people,...

Foto: Rosenfield Media...not for mobile device”

O que as pessoas esperam em uma experiência MOBILE?

felicidade

felicidade

X

experiência perfeita

felicidade

Entretanto, a experiência pertence as pessoas.

O designer/desenvolvedor 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

“

”

Um caminho, principalmente em Mobile,

vem da busca pelas melhores IDADES

IDADES?

Acessibil

IDADE}

AcessibilUsabil

IDADE}

X

Comercial Mercado Livre

2011“Eu compro o que quiser,

senão quiser, não compro”

Comercial do Mercado Livre 2011

AcessibilUsabil

Simplic

IDADE}

ESPN Brasil– abril 2010

ESPN Brasil– abril 2010

X

10 princípios de UX do Google

Princípio 3. O simples é poderoso.

Em uma interface perfeita para as pessoas, elas nunca

deveriam errar, principalmente no mundo mobile…

AcessibilUsabil

SimplicInterativ

IDADE}

AcessibilUsabil

SimplicInterativ

Veloc IDADE}

X

X

X

XX

10 princípios de UX do Google

Princípio 2 - cada milisegundo importa.

Melhor definição de milisegundo?

Um caminho:seguir

as dicas de otimização indicadas na apresentação

do Sérgio, mas cuidado com acessibilidade…

sergiolopes.org

AcessibilUsabil

SimplicInterativ

VelocEncontrabil

IDADE}

X

AcessibilUsabil

SimplicInterativ

VelocEncontrabil

Atrativ

IDADE}

X

10 princípios de UX do Google

Princípio 8 – agrade aos olhos sem distrair a mente

AcessibilUsabil

SimplicInterativ

VelocEncontrabil

AtrativUtil

IDADE}

10 princípios de UX do Google

Princípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.

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

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

AcessibilUsabil

SimplicInterativ

VelocEncontrabil

AtrativUtil

Facil

IDADE}

AcessibilUsabil

Simplic

AcessibilUsabil

SimplicInterativ

VelocEncontrabil

AtrativUtil

FacilPortabil

…

IDADE}

InvestigaçãoObservaçãoColaboração

AnáliseAvaliaçãoValidação

A melhor idade vem da: }

By Erico Fileno

Como o Luli disse no Digitalks no Rio:

“Nesse mundo Mobile, somos

todos daltónicos e sofremos do Mal de Parkinson”

Por isso, em projetos mobile, precisamos estratégia,

IDADE(n)(e design de verdade

E o que as empresas esperam?

Mulher com notebook em sinal de ok o melhor osso…

mas como

com qualidade...

acertandoo tiro certono alvo certo

com estratégia

“uma conspiração para o sucesso”

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 Construiruma 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: rework37 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.

Marte Objetivos e metas da empresa

VênusNecessidades dos usuários

Desafio:

Como atender ao mesmo tempo os objetivos e as necessidades?

Objetivose metas do projeto

Reaisnecessidades dos usuários

Equilíbrio?

a buscado equilíbrio

empresa

usuários

Objetivose metas do

projeto Necessidades dos

usuários

Um caminho: modelagem participativa

Sitemap

Antes de prototipar, crie coletivamente

(designers, arquitetos de informação, desenvolvedores front/back, analista de

negócios, gerentes, etc.)

fluxos com os principais passos dos clientes em seu site/sistema.

Um Vocabulário Visual para AI e Design de Interaçãohttp://iainstitute.org/pt/translations/000332.html

http://migre.me/wI0X

Protótipos

Depois, crie “coletivamente" protótipos em papel, em computador...

Prototipação

Por que Mobile?

crescimento = oportunidade

no Brasil

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

3Os 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

Estatísticas no Brasil

GIFanimado...

Maio de 2012http://www.mobiletime.com.br/29/05/2012/brasil-tem-52-milhoes-de-acessos-de-banda-larga-movel-diz-estudo/280718/news.aspx

TIC Domicílios 2011outubro de 2011 – janeiro 2012

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

http://www1.folha.uol.com.br/tec/1098360-uso-de-internet-no-celular-cresce-340-em-um-ano.shtml

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

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

No mundo

Vários GIFsanimados...

O ecosistema do Mobile.http://econsultancy.com/us/reports/mobile-ecosystem

capacidades/vantagensdo mobile

GPS

Acelerômetro

Giroscópio

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

limitações/restriçõesdo 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

“snorkling.”’ by Rachel

Hinman

at Nokia

@lukew

desktop

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesacaneca de café

@lukew

@lukew

mobile

tela pequena

bateria

rede inconsistente

dedo gordo

sensores

@lukew

Outras limitações:

● Capacidade de processamento reduzida.

● Uma aplicação em HTML5 para mobile

pode ser até 100 vezes mais lenta que

em desktop.http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf

perda de 80% do espaço

@lukew

Pode parecer uma tragédia, mas isso

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

@lukew

te força a priorizar...

te força a manter o foco…

@lukew

Alguém conhece algum site

que gostaria que 80% do seu

conteúdo/itens/elementos

fosse retirado da interface?

@lukew

Flickr desktop

60 opções de menu...

@lukew

@lukew

Flickr mobile

7 opções de menu...

@lukew

Less is more...

@lukew

restrições são boas para o

design, pois te forçam a

priorizar, a manter o foco

Desktop first!

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

Mobile FirstLuke Wroblewski

Mobile First!

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

Elimine da interface itens que

não sejam extremamente

necessários...

Paradoxo da escolha

mundo Mobile...

Qual contexto?By Thais @tsouzamobile

By Thais @tsouzamobile

É sobre pessoas e não plataformas…

PaixãoBy Thais @tsouzamobile

vaidade

By Thais @tsouzamobile

raiva

alegria

frustração

Otimização de tempo

Útil para esportes….

By Thais @tsouzamobile

Funcionais…

By Thais @tsouzamobile

Para comprar…By Thais @tsouzamobile

Inovador

Conhecimento….By Thais @tsouzamobile

Para novos gênios….By Thais @tsouzamobile

Para todos….By Thais @tsouzamobile

mitos

as pessoas não vão

se registrar via mobile

não vão comprar via mobile

não vão criar conteúdo, fazer

reviews, dar opinião, etc.

sempre seremos surpreendidos

pelo que as pessoas fazem na

experiência mobile

htt

p:/

/mid

iari

a.w

ord

pre

ss.c

om

/20

12

/02

/21

/10

pe

squ

isa

-sm

s-m

ava

m-a

cisi

on

-bra

sil/

se as perguntas fizerem sentido e a

interface tiver um bom design, as

pessoas vão responder...

Algumas recomendações

- INPUTS

(entrada de dados)

1- LABELS no topo

LABEL no topo• Miniminiza o tempo para

entrada de dados• Mais fácil de codificar:

sem floats e tabelas• Acessibilidade: label,

campos na ordem certa• Melhor formato para

mobile• Suporte diferentes

resoluções• Requer mais espaço

vertical

2 – Confirmação de

dados

Confirmação

de senha?

Confirmação

de e-mail?

3 – Opção de senha sem

mascara.

4 – Cadastro obrigatório

Será que é mesmo

necessário me cadastrar em

um site de e-commerce para

fazer uma compra?

- Navegação

Content First

- Botões de voltar...

By @lukew

- Espaços em branco...

- Web Standards

Toque...

Se o dispositivo é pequeno, por que não tornar toda área interativa?

Toque seguro...

Deixe espaço suficiente para toque acidentais

Recomendação Apple

By Thais @tsouzamobile

Mas…a Microsoft pede 34px e a Nokia 28px?

By Thais @tsouzamobile

Mas…o dedo de um adulto vai de 45 a 57pxE o dedão pode chegar até 72px

By Thais @tsouzamobile

Quantos dedos você usa

em um smartphone?

By Thais @tsouzamobile

-Performance-http://gtmetrix.com

-Avaliação e validação

How To Conduct A Usability Test On A Mobile Devicehttp://www.measuringusability.com/blog/mobile-usability-test.php

-Como testar aqui?

Foto: Rosenfield Media

Momento debateQual caminho meu website deve seguir?

Separar URL’s para mobile e desktop com conteúdos diferentes?Separar URL’s para mobile e desktop copiando o conteúdo?

Uma única URL que se adapta a todas as telas?

By Thais @tsouzamobile

Workshop Design Mobilefacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares

Horácio Soares

Obrigado!