mobile first - palestra no mobileconf 2013

Horácio Soares @horaciosoares

21 9925-5404

Outubro de 2012 – São Paulo!

Mobile First

Mobile First

Mobile First Luke Wroblewski

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

Mas antes…

Qual é contexto do Mobile?

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6

Os smartphones são indispensáveis no

cotidiano

“In 2013, Mobile Phone will overtake PC’s as the most

common Web access device world wide.”

— GARTNER

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”

capacidades/vantagens do mobile

GPS

Case Toyota

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ções do mobile

“fritando o peixe e olhando o gato”.

@lukew

‘Desktop is like “diving”…

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

http://www.slideshare.net/Rachel_Hinman

O que todos quando

mergulham desejam?

@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

Outras limitações:

●  Capacidade de armazenamento e

processamento reduzido.

●  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

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

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.

Desktop Site

Mobile Site

Ainda antes de focar no Mobile First, como anda a qualidade dos

nossos sites nas versões desktop?

Será?

Uma breve avaliação de conhecidos sites de

notícias sobre TI

O Mobile First vem tirar os sites

Desktop do

CTI

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

Qual desses Desktops oferecia a melhor experiência?

Qual desses Desktops oferecia a melhor experiência?

E qual desses controles?

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!

Mas antes do Mobile First

precisamos de

estratégia...

Estratégia:

”conspiração para o

sucesso”

X

Projetos UX Mobile

O que os usuários esperam?

felicidade

felicidade

X

felicidade

felicidade

X

experiência perfeita

felicidade

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

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

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

Como são nossas experiências?

•  A maioria das experiências ruins poderiam ser evitadas com a identificação do alvo certo e com avaliações com

usuários...

By Bernard De Luna

É a média do tempo gasto em refação nos projetos de TI. Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013

50%

Dos projetos são abandonados depois de uma primeira entrega inadequada.

Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013

15%

É a média da melhoria dos KPI’s em projetos com 10% do orçamento gasto em pesquisa de usabilidade.

Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013

83%

Aumento de KPI’s

Conversões - Tráfego no site - Cadastros - Contatos de novos clientes - Vendas - Fatia de mercado - Transações - Taxa de sucesso em tarefas - Retenção - Produtividade - Pageviews - Uso do sistema - Visitas key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator

Diminuição de KPI’s

Custos do projeto - Tempo de desenvolvimento do projeto - Custo de treinamento - Erros no uso do sistema - Tempo do usuário - Chamadas em help desk - Refações – Manutenção. key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator

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

•  Precisa de novos clientes/usuários. 

•  Quer que os clientes atuais visitem seu site com

maior frequencia.

•  Quer aumentar a margem de lucro.

•  Você precisa aumentar sua audiência, seu público.

•  Quer diferenciar sua marca.

•  Gostaria de melhorar o retorno sobre o investimento

(ROI).

•  Quer que seus clientes gastem mais a cada compra.

•  Está à procura de novos canais de distribuição.

•  Quer aumentar sua fatia do mercado (market share).

•  ...

Reais necessidades

dos usuários

•  Qualidade. 

•  Simplicidade.

•  velocidade.

•  Utilidade.

•  Usabilidade.

•  Acessibilidade.

•  Portabilidade.

•  Bom custo x benefício.

•  Resolver seu problema.

•  ...

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 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 os caminhos do design mobile?

Não fazer nada…

CSS HandHeld

Design Líquido Design

Respon-sivo

Otimizado para

Mobile

App Nativa

App Híbrida

os caminhos do design mobile

@horaciosoares – Campus Party 2013

Não fazer nada…

Não fazer nada!

os caminhos do design mobile

@horaciosoares – Campus Party 2013

Não fazer nada…

CSS HandHeld

Design Líquido

CSS HandHeld

Design Líquido

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

CSS media

HANDHELD

Site Acesso Digital

2007

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

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

Portabilidade – CSS (Display PRINT)

Acesso Digital: http://acessodigital.net

Portabilidade css para dispositivo móvel

MOTO Q

os caminhos do design mobile

@horaciosoares – Campus Party 2013

Não fazer nada…

CSS HandHeld

Design Líquido Design

Respon-sivo

Design Responsivo

os caminhos do design mobile

@horaciosoares – Campus Party 2013

Não fazer nada…

CSS HandHeld

Design Líquido Design

Respon-sivo

Otimizado para

Mobile

Otimizado para

Mobile

Otimizado para

Mobile

2 v. Desktop e Mobile

2 v. Desktop e Mobile

2 v. Desktop e Mobile

2 v. Desktop e Mobile

Site otimizado para Mobile

A maioria oferece apenas duas versões:

Site otimizado para Mobile

Normalmente a versão Mobile é projetada

com foco nas atividades fins.

Otimizado para

Mobile

3 v. Desktop, Tablet e Mobile

Site otimizado para Mobile

Algumas empresas têm três versões diferentes:

Otimizado para

Mobile

2 v. Desktop e Mobile

3 v. Desktop, Tablet e Mobile

os caminhos do design mobile

@horaciosoares – Campus Party 2013

Não fazer nada…

CSS HandHeld

Design Líquido Design

Respon-sivo

Otimizado para

Mobile

App Nativa

App Nativa

App Nativa

IOS

Android

Windows Phone

Blackbarry

os caminhos do design mobile

@horaciosoares – Campus Party 2013

Não fazer nada…

CSS HandHeld

Design Líquido Design

Respon-sivo

Otimizado para

Mobile

App Nativa

App Híbrida

App Híbrida

Via Thais Souza @tsouzamobile!

Qual melhor caminho?

Mobile First Luke Wroblewski

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