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

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

Case Toyota

Acelerômetro

Giroscópio

Bluetooth

Áudio, vídeo e imagem

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

SIMPLICIDADE

Paradoxo da escolha

Elimine da interface itens que não

sejam extremamente

necessários...

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!

Mas antes do Mobile First

precisamos de

estratégia...

Estratégia:

”conspiração para o

sucesso”

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?


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

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

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!



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



Não fazer nada…

CSS HandHeld


Respon-sivo

Design Responsivo



Não fazer nada…

CSS HandHeld


Respon-sivo

Otimizado para

Mobile

Otimizado para

Mobile

Otimizado para

Mobile

2 v. Desktop e Mobile

Site otimizado para Mobile

A maioria oferece apenas duas versões:


Normalmente a versão Mobile é projetada

com foco nas atividades fins.

Otimizado para

Mobile

3 v. Desktop, Tablet e Mobile


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

Otimizado para

Mobile


3 v. Desktop, Tablet e Mobile



Não fazer nada…

CSS HandHeld


Respon-sivo

Otimizado para

Mobile

App Nativa

App Nativa

App Nativa

IOS

Android

Windows Phone

Blackbarry



Não fazer nada…

CSS HandHeld


Respon-sivo

Otimizado para

Mobile

App Nativa

App Híbrida

App Híbrida

Via Thais Souza @tsouzamobile!

Qual melhor caminho?

mobile first - palestra no mobileconf 2013

Design

e o que

o tiro e o alvo

focarno mobile

mobile phone

limitaesrestriesdo mobile

mobile site

liv o tiro e o

o que osusuriosesperam