frontinbh - os dasafios do design mobile
DESCRIPTION
Apresentação realizada no FrontinBH dia 14 de julho de 2012.TRANSCRIPT
front<in>bhBelo Horizonte
Julho 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
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
-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!