SlideShare uma empresa Scribd logo
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
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
experiência perfeita
A experiência
perfeita
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
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
ESPN Brasil– abril 2010
ESPN Brasil– abril 2010
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
10 princípios de UX do Google

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
10 princípios de UX do Google

Princípio 8 – agrade aos olhos sem
          distrair a mente
Acessibil
     Usabil
    Simplic
   Interativ
      Veloc    IDADE
Encontrabil
     Atrativ
       Util
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
Acessibil
     Usabil
    Simplic
   Interativ
      Veloc    IDADE
Encontrabil
     Atrativ
        Util
     Facil
Acessibil
  Usabil
Simplic
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
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...
acertando
o tiro certo
no alvo certo
com estratégia
“uma conspiração
  para o sucesso”
para onde vamos?




http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
onde devemos mirar?
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
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 é     Livro: rework
                                  37 Signals
          curto, então, mãos à
          obra!

Livro: O Tiro e o Alvo
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:
           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
a busca
do equilíbrio
empresa
 Objetivos
e metas do
  projeto          Necessidades
                       dos
                     usuários
             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
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
Estatísticas
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
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
Maio 2012
http://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 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/
comScore – dezembro de 2011
capacidades/va
   ntagens
  do 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ão
By: 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çõ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
“snorkling.”‟ 
by Rachel
         Hinman
        at Nokia
desktop




@lukew
tela grande

         energia

         rede consistente

         teclado

         mouse

         cadeira

         mesa


@lukew
tela grande

                     energia

                     rede consistente

                     teclado

                     mouse

                     cadeira

    caneca de café   mesa


@lukew
mobile




@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
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 First
Luke 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
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...
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
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...
Recomendação Apple
Deixe espaço
suficiente para
toque
acidentais




                  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 57px
     E 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
-Performance
-http://gtmetrix.com
Qual caminho mobile meu site deve seguir?
-Avaliação e validação
How To Conduct
A Usability Test
On A Mobile Device
http://www.measuringusability.com/blo
g/mobile-usability-test.php
-Como testar aqui?
Foto: Rosenfield Media
Prototipação
Obrigado!


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

Mais conteúdo relacionado

Destaque

Releitura de obras de arte
Releitura de obras de arteReleitura de obras de arte
Releitura de obras de arte
lisneia2012
 

Destaque (11)

Releitura de obras de arte
Releitura de obras de arteReleitura de obras de arte
Releitura de obras de arte
 
Releitura de obras de arte
Releitura de obras de arteReleitura de obras de arte
Releitura de obras de arte
 
Releituras
ReleiturasReleituras
Releituras
 
PROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DO ARTISTA ROMERO BRITO
PROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DO ARTISTA ROMERO BRITOPROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DO ARTISTA ROMERO BRITO
PROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DO ARTISTA ROMERO BRITO
 
PROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DE ROMERO BRITO
PROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DE ROMERO BRITOPROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DE ROMERO BRITO
PROJETO ARTE DENTRO DA ESCOLA - RELEITURA DAS OBRAS DE ROMERO BRITO
 
Releitura de uma obra de arte (2)
Releitura de uma obra de arte (2)Releitura de uma obra de arte (2)
Releitura de uma obra de arte (2)
 
Mobile Marketing - Conceitos, Tecnologias e Cases
Mobile Marketing - Conceitos, Tecnologias e CasesMobile Marketing - Conceitos, Tecnologias e Cases
Mobile Marketing - Conceitos, Tecnologias e Cases
 
Aula Mobile Marketing Completa
Aula Mobile Marketing CompletaAula Mobile Marketing Completa
Aula Mobile Marketing Completa
 
Releitura de obras de arte
Releitura de obras de arteReleitura de obras de arte
Releitura de obras de arte
 
Pintura romana
Pintura romanaPintura romana
Pintura romana
 
Escultura romana
Escultura romanaEscultura romana
Escultura romana
 

Semelhante a Os Desafios do Design Mobile - Jun/2012

Projetando Mobile
Projetando MobileProjetando Mobile
Projetando Mobile
devMob
 
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - ImastersAcessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Horácio Soares
 

Semelhante a Os Desafios do Design Mobile - Jun/2012 (20)

Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJ
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 
UX.. Vale a pena?
UX.. Vale a pena?UX.. Vale a pena?
UX.. Vale a pena?
 
APP/API e Mobile: o que usar e quando
APP/API e Mobile: o que usar e quandoAPP/API e Mobile: o que usar e quando
APP/API e Mobile: o que usar e quando
 
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresWebinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
 
Gestão de projetos em soluções mobile
Gestão de projetos em soluções mobileGestão de projetos em soluções mobile
Gestão de projetos em soluções mobile
 
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
 
Acessibilidade e Usabilidade no E-commerce - Horacio Soares
Acessibilidade e Usabilidade no E-commerce - Horacio SoaresAcessibilidade e Usabilidade no E-commerce - Horacio Soares
Acessibilidade e Usabilidade no E-commerce - Horacio Soares
 
Prototipação
PrototipaçãoPrototipação
Prototipação
 
Mobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJMobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJ
 
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011
 
E tendências
E tendênciasE tendências
E tendências
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando Mobile
 
UX em Plataformas Conversacionais
UX em Plataformas ConversacionaisUX em Plataformas Conversacionais
UX em Plataformas Conversacionais
 
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - ImastersAcessibilidade como Fator de Inovação - Intercon 2009 - Imasters
Acessibilidade como Fator de Inovação - Intercon 2009 - Imasters
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
 
WAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeWAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e Usabilidade
 
Agile br2011 lucabastos-prog10x-noiteagilcaelum
Agile br2011 lucabastos-prog10x-noiteagilcaelumAgile br2011 lucabastos-prog10x-noiteagilcaelum
Agile br2011 lucabastos-prog10x-noiteagilcaelum
 

Mais de Horácio Soares

Ux 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdadeUx 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdade
Horácio Soares
 
InterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoInterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e Inovação
Horácio Soares
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, Design
Horácio Soares
 
Técnicas de Apresentação
Técnicas de ApresentaçãoTécnicas de Apresentação
Técnicas de Apresentação
Horácio Soares
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
Horácio Soares
 

Mais de Horácio Soares (18)

UX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosUX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
 
Experiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce BrasilExperiência do Cliente no Varejo Online - E-commerce Brasil
Experiência do Cliente no Varejo Online - E-commerce Brasil
 
UX e testes de usabilidade mobile
UX e testes de usabilidade mobileUX e testes de usabilidade mobile
UX e testes de usabilidade mobile
 
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
A Experiência como Vantagem Competitiva (UX) - Goiânia 2014
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014
 
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SPAcessibilidade e Design Mobile - TablelessConf 2013 - SP
Acessibilidade e Design Mobile - TablelessConf 2013 - SP
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
 
Ux 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdadeUx 7Masters - Estratégia, melhor idade e design de verdade
Ux 7Masters - Estratégia, melhor idade e design de verdade
 
InterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoInterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e Inovação
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na Web
 
Interact 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do LuliInteract 2009 Acessibilidade no Cafofo do Luli
Interact 2009 Acessibilidade no Cafofo do Luli
 
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeInteract 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e Mobilidade
 
Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13Monica M Fernandes - Sou+Web 2009 02 13
Monica M Fernandes - Sou+Web 2009 02 13
 
Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13Leda Spelta Sou+Web 2009 02 13
Leda Spelta Sou+Web 2009 02 13
 
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidadeRicardo Nunes - 5o Sou+Web: a união faz a acessibilidade
Ricardo Nunes - 5o Sou+Web: a união faz a acessibilidade
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, Design
 
Técnicas de Apresentação
Técnicas de ApresentaçãoTécnicas de Apresentação
Técnicas de Apresentação
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
 

Os Desafios do Design Mobile - Jun/2012