Os Desafios do Design Mobile - Jun/2012

Encontro
LOCAWEB
Rio de Janeiro
Junho 2012

Horácio Soares
horacio@digitalacesso.com
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

O que as pessoas esperam em uma
experiência em dispositivos móveis?

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

Acessibil
Usabil

IDADE

Comercial
Mercado Livre
“Eu compro o
que quiser, 2011
senão quiser,
não compro”
Comercial do Mercado
Livre 2011

Acessibil
Usabil
Simplic

IDADE

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…

Acessibil
Usabil
Simplic
Interativ
IDADE

Acessibil
Usabil
Simplic
Interativ
Veloc IDADE


Princípio 2 - cada milisegundo importa.

Melhor definição de milisegundo?

Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil

Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ


Princípio 8 – agrade aos olhos sem
distrair a mente

Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ
Util


Princípio 1 – foque nas pessoas: suas
vidas, trabalho, sonhos.

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

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

Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ
Util
Facil

Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ
Util
Facil
Portabil
…

A melhor idade vem da:

Investigação
Observação
Colaboração
Análise
Avaliação
Validação

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

Mulher com notebook em sinal de ok
o melhor osso…

acertando
o tiro certo
no alvo certo

“uma conspiração
para o sucesso”

para onde vamos?

http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg

Causo 1
Precisamos
Construir
uma mesa.

Liv
O Tiro e o A

CAUSO 1

- A propósito, que mesa?

Livro: O Tiro e o Alvo

Ou seria uma mesa para computador?

Ou seria uma mesa de cirurgia?

CAUSO 1 (continuação)

- Isso não
interessa, meu filho.
Depois a gente vê.
Vamos começar logo o
trabalho. O prazo é Livro: rework
37 Signals
curto, então, mãos à
obra!


CAUSO 1 (continuação)

Para uma mesa pode parecer
exagero, mas não para
sistemas e sites...


Conclusão?

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

Desafio:
Como atender ao mesmo tempo
os objetivos e as necessidades?

Marte Vênus
Objetivos e metas da empresa Necessidades dos usuários

Objetivos Reais
e metas necessidades
do projeto dos usuários

Um caminho: modelagem participativa

empresa
Objetivos
e metas do
projeto Necessidades
dos
usuários
usuários

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

Maio de 2012
http://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 2011
outubro 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 2012
http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

O ecosistema do Mobile.
http://econsultancy.com/us/reports/mobile-ecosystem

Fevereiro 2012
http://blog.nielsen.com/nielsenwire/online_mobile/smartphones-account-for-half-of-all-mobile-phones-dominate-new-phone-purchases-in-the-us/

Maio de 2012
http://blog.nielsen.com/nielsenwire/online_mobile/how-us-smartphone-and-tablet-owners-use-their-devices-for-shopping/

capacidades/va
ntagens
do mobile

Novas maneiras de interação e apresentação

Boa compatibilidade entre
navegadores Mobile e HTML5

Contexto:
By: Thais Souza @_tsouza_

É sobre pessoas e não plataformas…

Paixão

vaidade


Útil para esportes….


Funcionais…


Para comprar…

Conhecimento….

Para todos….

limitações/restriçõ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...

„Desktop is like “diving”
while mobile is
“snorkling.”‟  by Rachel
Hinman
at Nokia

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

@lukew

tela grande

energia

rede consistente

teclado

mouse

cadeira

caneca de café mesa

@lukew

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

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

Flickr mobile
7 opções de menu...

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 First!

http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

Elimine da interface itens que não
sejam extremamente
necessários...

as pessoas não vão
se registrar 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

http://midiaria.wordpress.com/2012/02/21/10pesquisa-sms-mavam-acision-brasil/

se as perguntas fizerem sentido e a
interface tiver um bom design, as
pessoas vão responder...

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

3 – Opção de senha sem
mascara.

Será que é mesmo necessário
me cadastrar em um site de
e-commerce para fazer uma
compra?

Se o dispositivo é
pequeno, por que não
tornar toda área
interativa?

Recomendação Apple
Deixe espaço
suficiente para
toque
acidentais


Mas…a Microsoft pede 34px e a Nokia 28px?


Mas…o dedo de um adulto vai de 45 a 57px
E o dedão pode chegar até 72px


Quantos dedos você usa
em um smartphone?


-Performance
-http://gtmetrix.com

Qual caminho mobile meu site deve seguir?

How To Conduct
A Usability Test
On A Mobile Device
http://www.measuringusability.com/blo
g/mobile-usability-test.php

Obrigado!

Horácio Soares
Workshop Design Mobile
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

Os Desafios do Design Mobile - Jun/2012

Mais conteúdo relacionado

Destaque

Semelhante a Os Desafios do Design Mobile - Jun/2012

Mais de Horácio Soares

Os Desafios do Design Mobile - Jun/2012