mobile first - w3c web.br 2012
DESCRIPTION
Apresentação realizada na conferência do W3C WEB.BR 2012, em São Paulo, no dia 19 de outubro.TRANSCRIPT
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!