os desafios do design mobile - jun/2012
DESCRIPTION
Apresentação realizada no 14o Encontro Locaweb no Rio de Janeiro - 26/06/2012TRANSCRIPT
Encontro LOCAWEBRio de Janeiro
Junho 2012
?
[email protected]@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
O que as pessoas esperam em uma experiência em dispositivos
móveis?
felicidade
felicidade
X
experiência perfeita
A e
xperi
ên
cia
perf
eit
a
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
“
”
Um caminho para uma experiência perfeita 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
10 princípios de UX do Google
Princípio 2 - cada milisegundo importa.
Melhor definição de milisegundo?
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: }
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
Um caminho: modelagem participativa
a buscado equilíbrio
empresa
usuários
Objetivose metas do
projeto Necessidades dos
usuários
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
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
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
O ecosistema do Mobile.http://econsultancy.com/us/reports/mobile-ecosystem
Fevereiro 2012http://blog.nielsen.com/nielsenwire/online_mobile/smartphones-account-for-half-of-all-mobile-phones-dominate-new-phone-purchases-in-the-us/
Maio de 2012http://blog.nielsen.com/nielsenwire/online_mobile/how-us-smartphone-and-tablet-owners-use-their-devices-for-shopping/
comScore – dezembro de 2011
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...
Contexto:
By: Thais Souza @_tsouza_
By: Thais Souza @_tsouza_
É sobre pessoas e não plataformas…
PaixãoBy: Thais Souza @_tsouza_
vaidade
By: Thais Souza @_tsouza_
raiva
alegria
frustração
Otimização de tempo
Útil para esportes….
By: Thais Souza @_tsouza_
Funcionais…
By: Thais Souza @_tsouza_
Para comprar…
By: Thais Souza @_tsouza_
Inovador
Conhecimento….By: Thais Souza @_tsouza_
Para novos gênios….
Para todos….By: Thais Souza @_tsouza_
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...
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
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
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...
- 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 Souza @_tsouza_
Mas…a Microsoft pede 34px e a Nokia 28px?
By: Thais Souza @_tsouza_
Mas…o dedo de um adulto vai de 45 a 57pxE o dedão pode chegar até 72px
By: Thais Souza @_tsouza_
Quantos dedos você usa
em um smartphone?
By: Thais Souza @_tsouza_
By: Thais Souza @_tsouza_
-Performance
Qual caminho mobile meu site deve seguir?
-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
Prototipação
Workshop Design Mobilefacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
Horácio Soares
Obrigado!