SlideShare uma empresa Scribd logo
1 de 351
Baixar para ler offline
Horácio Soares
                       @horaciosoares
                         21 9925-5404


     Campus Party 2013
Os Caminhos do Design Mobile




                  Outubro de 2012 – São Paulo!
Por que Mobile?
h"p://thenextweb.com/apple/2012/01/25/there-­‐are-­‐now-­‐more-­‐iphones-­‐sold-­‐than-­‐
babies-­‐born-­‐in-­‐the-­‐world-­‐every-­‐day/	
  
h"p://zeldman.com/2012/07/09/mobile-­‐to-­‐the-­‐future-­‐luke-­‐wroblewski/	
  
crescimento = oportunidade
h"p://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck
h"p://www.slideshare.net/HubSpot/50-­‐mobilefactsdec
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
no Brasil
h"p://services.google.com/J/files/blogs/
1

Os smartphones são
  indispensáveis no
          cotidiano
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
2

Os smartphones
transformaram o
comportamento
 do consumidor
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
3
Os smartphones ajudam
os usuários a navegar
pelo mundo
Mas cuidado...
2 - Os smartphones transformaram o
   comportamento do consumidor
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
5

Os smartphones
   ajudam os
 anunciantes a
  entrarem em
contato com os
    clientes
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Estatísticas Brasil
GIF
animado...
http://www1.folha.uol.com.br/mercado/1184861-venda-de-tablets-dispara-267-no-brasil-em-2012-e-de-smartphones-55.shtml
No mundo
Vários GIFs
animados...
h"p://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck62812	
  	
  -­‐	
  slide	
  35	
  
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18
capacidades/
 vantagens
  do mobile
GPS
Backseat Driver – Toyota

               ToyToyota

http://www.youtube.com/watch?v=-mjudtrwdS4
Acelerômetro
Giroscópio
Os Caminhos do Design Mobile - Campus Party 2013
Bluetooth
Áudio, vídeo e imagem
Os Caminhos do Design Mobile - Campus Party 2013
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...
Os Caminhos do Design Mobile - Campus Party 2013
limitações/restrições
      do mobile
@lukew
‘Desktop is like “diving”…
…while mobile is like “snorkling.”’
             by Hinman at Nokia




                     h"p://www.slideshare.net/Rache
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	
  

@lukew
tela grande	
  

                         energia	
  

                         rede consistente	
  

                         teclado	
  

                         mouse	
  

                         cadeira	
  
    caneca de café	
  
                         mesa	
  

@lukew
mobile	
  




@lukew
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36
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-
Como o Luli disse no Digitalks no Rio:




“Nesse mundo Mobile, somos
 todos daltónicos e sofremos
    do Mal de Parkinson”
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Outras limitações:
•  Capacidade de armazenamento e
   processamento reduzido.
•  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
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 Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os detalhes do
comprador não
   podem ser
visualizados na
 versão mobile.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Desktop
Site
Mobile Site
Os Caminhos do Design Mobile - Campus Party 2013
CSS	
  
                   HandHeld	
  
                    Design	
  
Não	
  fazer	
                     Design	
  
                    Líquido	
  
 nada…	
                          Respon-­‐
                                    sivo	
  


                                                OYmizado	
  
                                                  para	
  
                                                 Mobile	
  




                                                                App	
  
                                                               NaYva	
  




os caminhos
do design                                                       App	
  


mobile
                                                               Híbrida	
  
Os Caminhos do Design Mobile - Campus Party 2013
Antes de
escolher o
  melhor
caminho…
Projetos UX Mobile
O que os
usuários
esperam?
felicidade
felicidade




X
felicidade
felicidade




             X
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
                     ”
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…
Os Caminhos do Design Mobile - Campus Party 2013
para onde vamos?




h"p://voluntariadomococa.files.wordpress.com/
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

         curto, então, mãos à    37 Signals


         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 1:

identificar objetivos e necessidades…
Investigação Baseada em Perguntas
                                            Precisamos	
  automa0zar	
  	
  
                                                a	
  Contabilidade	
  

       Preciso	
  do	
  Balancete	
  dia	
  5	
  	
  
 e	
  não	
  dia	
  15	
  como	
  atualmente!	
  
                                                                               Por	
  Quê?	
  
                                                                               Por	
  Quê?	
  
                                                                                Por	
  Quê?	
  

         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!!	
  
Uma proposta de briefing
 Baseado em perguntas:
http://clearleft.s3.amazonaws.com/client-
              worksheet.doc

     http://bit.ly/a5tRzF
Desafio 2:

             Como atender ao mesmo tempo
             os objetivos e as necessidades?




         Marte                           Vênus
Objetivos e metas da empresa     Necessidades dos usuários
Objetivos
e metas
do projeto
•  Precisa de novos clientes/usuários. 
•  Quer que os clientes atuais visitem seu site com
  maior frequencia.
•  Quer aumentar a margem de lucro.
•  Você precisa aumentar sua audiência, seu público.
•  Quer diferenciar sua marca.
•  Gostaria de melhorar o retorno sobre o investimento
  (ROI).
•  Quer q. seus clientes gastem mais a cada compra.
•  Está à procura de novos canais de distribuição.
•  Quer aumentar sua fatia do mercado (market share).
•  ...
Reais
necessidades
 dos usuários
•  Qualidade. 
•  Simplicidade.
•  velocidade.
•  Utilidade.
•  Usabilidade.
•  Acessibilidade.
•  Portabilidade.
•  Bom custo x benefício.
•  Resolver seu problema.
•  ...
Objetivos            Reais
e metas      necessidades
do projeto    dos usuários
Os Caminhos do Design Mobile - Campus Party 2013
a busca
do equilíbrio
empresa	
  
 Objetivos
e metas do
  projeto
                     Necessidades
                         dos
                       usuários
             usuários	
  
Um caminho: modelagem participativa
um case em equilíbrio…
Case	
  apresentado	
  por	
  Rodrigo	
  Tigre,	
  POPULIS	
  -­‐	
  Content	
  Marke0ng	
  Digitalks	
  Rio	
  de	
  Janeiro	
  Abril2012	
  
Erico Fileno	
  
Case	
  apresentado	
  por	
  Rodrigo	
  Tigre,	
  POPULIS	
  -­‐	
  Content	
  Marke0ng	
  Digitalks	
  Rio	
  de	
  Janeiro	
  Abril2012	
  
Case	
  apresentado	
  por	
  Rodrigo	
  Tigre,	
  POPULIS	
  -­‐	
  Content	
  Marke0ng	
  Digitalks	
  Rio	
  de	
  Janeiro	
  Abril2012	
  
Observação e identificação
    de um problema...
Case	
  apresentado	
  por	
  Rodrigo	
  Tigre,	
  POPULIS	
  -­‐	
  Content	
  Marke0ng	
  Digitalks	
  Rio	
  de	
  Janeiro	
  Abril2012	
  
Case	
  apresentado	
  por	
  Rodrigo	
  Tigre,	
  POPULIS	
  -­‐	
  Content	
  Marke0ng	
  Digitalks	
  Rio	
  de	
  Janeiro	
  Abril2012	
  
Os Caminhos do Design Mobile - Campus Party 2013
Como anda a
 qualidade dos
nossos sites nas
versões desktop?
h"p://www.theonion.com/arYcles/internet-­‐users-­‐demand-­‐less-­‐interacYvity,30920/	
  	
  
Os Caminhos do Design Mobile - Campus Party 2013
Será?
Uma breve avaliação
de conhecidos sites
 de notícias sobre TI
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
CSS	
  
                   HandHeld	
  
                    Design	
  
Não	
  fazer	
                     Design	
  
                    Líquido	
  
 nada…	
                          Respon-­‐
                                    sivo	
  


                                                OYmizado	
  
                                                  para	
  
                                                 Mobile	
  




                                                                App	
  
                                                               NaYva	
  




os caminhos
do design                                                       App	
  


mobile
                                                               Híbrida	
  
Os Caminhos do Design Mobile - Campus Party 2013
Não	
  fazer	
  
  nada…	
  




os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
Não
fazer
nada!
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Google Survey Reveals What Users
          Want From Mobile Sites (Julho 2012)




   http://marketingland.com/google-survey-what-users-want-from-mobile-sites-22606
http://googlemobileads.blogspot.com.br/2012/09/mobile-friendly-sites-turn-visitors.html
Os Caminhos do Design Mobile - Campus Party 2013
CSS	
  
                       HandHeld	
  
                        Design	
  
                        Líquido	
  




os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
CSS
HandHeld
 Design
 Líquido
Os Caminhos do Design Mobile - Campus Party 2013
CSS
media
HANDHELD




        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 dispositivo móvel
                   MOTO Q




            Acesso Digital:
   http://acessodigital.net
Os Caminhos do Design Mobile - Campus Party 2013
Design	
  
                                         Respon-­‐
                                           sivo	
  




os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
Design
Responsivo
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo




Ideal para:
•  Web sites informativos/institucionais
•  Portfolios
•  Sites com muito conteúdo como jornais,
   revistas, blogs.
Prós do Design Responsivo

•    Future Proof (vai funcionar nos dispositivos
     que ainda não foram criados).
•    Baixo custo quando comparado com as outras
     opções.
•    Manutenção mais simples e sem duplicação.
•    Um único link (indicado pelo Google SEO).
•    Melhora a experiência do desktop.
Desvantagens Design Responsivo

•    Não tem modelo para Ads nos dispositivos
     móveis.
•    Necessita do Mobile First para funcionar
     adequadamente.
•    Redesign da versão desktop
•    CrossBrowser
•    Requer testes em muitos dispositivos, ambientes
     e navegadores.
•    Todos os conteúdos e funcionalidades da versão
     clássica devem carregar na versão Mobile.
•    Pode apresentar problemas de performance.
Soluções de
 Navegação
     Design
 Responsivo
Problema:
Como fazemos wireframes?
Design Responsivo
Menu no topo, com “do nothing”.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
   Menu no topo
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Content First

               Navigation second

             @Lukew (mobile first)

            Quebra de paradigma:
Design de Epicentro (caindo na real – 37 Signals)
Design Responsivo – salto para o rodapé
     Menu inserido no final do documento.
  No desktop, via CSS, é posicionado no topo.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Por que colocar o menu no final?
Design Responsivo
  Menu inserido no início (topo) do documento.
No Mobile, via CSS, é posicionado no rodapé, com
                       salto.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
Menu duplicado, em cima e em baixo da página.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
One single page, sem saltos na versão mobile.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
One single page, com saltos.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
Menu duplicado, em cima e em baixo na página,
              ambos à mostra.
h"p://thecoppertree.org/	
  
h"p://thecoppertree.org/	
  
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
   Link no topo que abre o menu do tipo
DropDown (opções em uma nova “camada”)
       ou expansível (abre e fecha)
DropDown (opções em uma nova “camada”)
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Expansível (abre e fecha)
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
No topo, poucos links, sendo que um
     último abre mais opções.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
       Side Navigation
Navegação à esquerda, via flutuação
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
Menu com menos opções
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
Escondendo menus na versão mobile
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Design Responsivo
Menu via uma Combo box (menu select)
          na versão móvel.
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
OYmizado	
  
                                           para	
  
                                          Mobile	
  




os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
Otimizado
   para
 Mobile
Os Caminhos do Design Mobile - Campus Party 2013
Otimizado
              para
            Mobile




  2 v.
Desktop
e Mobile
2 v.
Desktop
e Mobile
2 v.
Desktop
e Mobile
2 v.
Desktop
e Mobile
Site otimizado para Mobile
A maioria oferece apenas duas versões:
Otimizado
   para
 Mobile




              3 v.
            Desktop,
            Tablet e
             Mobile
Site otimizado para Mobile

Algumas empresas têm três versões diferentes:
Otimizado
              para
            Mobile




                         3 v.
  2 v.
                       Desktop,
Desktop
                       Tablet e
e Mobile
                        Mobile
Site otimizado para Mobile

Ideal para:
- Vendas a varejo
- Sites de busca
- SaaS – Software as a Software
- Outras aplicações Web
Prós do site otimizado para mobile

- Foco na atividade fim
- Mais otimizado do que o Responsivo e com boa
performance.
- Melhor UX do que o Responsivo.
- Mais em conta que as APPs.
- Funciona em todos os dispositivos com um
navegador e acesso a internet.
- Não necessita de uma Store.
Desvantagens do site Mobile

- Requer duas URLs, uma para versão clássica e
Mobile.
- Se tiver menos conteúdo e funcionalidade tem
que indicar a versão clássica.
- Problemas com indexação pelos róbos
- Precisa de conexão via internet
Exemplos de navegação
   via mobile Web
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Youtube em dezembro 2012
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Globo.com em dezembro 2012
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
App	
  
                                         NaYva	
  



os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
App
Nativa
Os Caminhos do Design Mobile - Campus Party 2013
App
                Nativa




                         Windows   Blackbarry
Android   IOS             Phone
Iphone3GS,	
  Iphone4	
  e	
  Ipad	
  –	
  Objec0ve	
  C	
  

                Resoluções:	
  
                Iphone3GS	
  –	
  320x480	
  pixels	
  
                Iphone4	
  e	
  4S	
  –	
  640x960	
  pixels	
  
                Iphone	
  5	
  –	
  640	
  x1136	
  pixels	
  
                Ipad	
  –	
  768x1024	
  pixels	
  
                Ipad	
  2	
  –	
  2048x1536	
  pixels	
  
	
              UI	
  Guidelines	
  
	
              	
  




       Via Thais Souza @tsouzamobile!
Android	
  –	
  Java	
  Based	
  

         Eclipse	
  –	
  Pacote	
  SDK	
  (Android)	
  
         UI	
  Guidelines	
  
         	
  


         MúlYplas	
  telas	
  
         	
  


         Orientação	
  do	
  aplicaYvo?	
  
         Versões?	
  




Via Thais Souza @tsouzamobile!
Blackberry	
  –	
  Java	
  Based	
  /	
  C/C++	
  


         Eclipse	
  -­‐	
  NaYvo	
  –	
  Pacote	
  SDK	
  (Blackberry)	
  
         UI	
  Guidelines	
  por	
  versão	
  
         	
  
         	
  

         Média	
  de	
  55	
  aparelhos	
  diferentes	
  
         240x260	
  	
  	
  	
  	
  	
  	
  320x240	
  	
  	
  	
  	
  	
  	
  	
  1024x600	
  
         324	
  x	
  352	
  	
  	
  	
  	
  240x320	
  
         240x160	
  	
  	
  	
  	
  	
  	
  480x360	
  
         	
  

         Versões	
  –	
  diferentes	
  interfaces	
  




Via Thais Souza @tsouzamobile!
Windows	
  Phone–	
  Objec0ve	
  C#	
  baseada	
  C++	
  

                  Resoluções:	
  
                  WVGA	
  –	
  800x480	
  
                  WXGA-­‐	
  1280	
  x	
  768	
  
                  720P	
  –	
  1280x720	
  


	
                Widows	
  Phone	
  7	
  e	
  WP8	
  -­‐	
  	
  
	
                Limitações	
  de	
  uma	
  versão	
  para	
  outra	
  
                  	
  




       Via Thais Souza @tsouzamobile!
        h"ps://www.microsoovirtualacademy.com/tracks/entendendo-­‐desenvolvimento-­‐para-­‐o-­‐windows-­‐phone-­‐7	
  	
  
Aplicações nativas

Ideal para:
- Vendas a varejo
- Softwares financeiros
- Jogos
- Aplicações corporativas
Prós das Apps nativas
- Melhor experiência do usuário e interface gráfica.
- Interface customizada para cada ambiente.
- Mais indicado para aplicações com cálculos
complexos, relatórios, gráficos, jogos, etc.
- Ótima performance
- Acesso offline (não necessita internet)
- Pode utilizar todos os recursos do dispositivo, como
NFC, GPS, áudio, vídeo, botões.
- Visível nas Stores
- Diferentes maneires de monetizar.
Desvantagens das APPs nativas
- Cliente-servidor
- Custo do desenvolvimento.
- Alta complexidade e custo da manutenção para
diferentes dispositivos, telas, versões de SO e
ambientes.
- Equipes diferentes de desenvolvimento
- Requer aprovação nas Stores.
- Tempo de espera pela aprovação pode ser demorado
- Atualizações necessitam aprovação em alguns SO
- Download e atualizações consomem banda e espaço
em disco.
- Só para smartphones.
Exemplos de navegação em APPs
Navegação	
  Primária	
  -­‐	
  Splashscreen	
  




                                                   Nike/	
  Vimeo	
  
Via Thais Souza @tsouzamobile!
Navegação	
  Primária	
  -­‐	
  Dashboard	
  –	
  Landing	
  Page	
  




                                                                                                                Rio	
  Show	
  /	
  Google	
  Plus	
  
       Problemas:	
  Pode	
  não	
  passar	
  claramente	
  o	
  objeYvo	
  do	
  aplicaYvo	
  
       	
  
       Soluções:	
  ícone	
  claros	
  e	
  nomenclatura	
  objeYva	
  
                                                                                        Via Thais Souza @tsouzamobile!
Navegação	
  Primária	
  –	
  List	
  Menu	
  




                                                                                                                Cielo	
  /	
  Bradesco	
  
       Problemas:	
  Pode	
  não	
  passar	
  claramente	
  o	
  objeYvo	
  do	
  aplicaYvo	
  
       	
  
       Soluções:	
  ícone	
  claros	
  e	
  nomenclatura	
  objeYva	
  
                                                                                        Via Thais Souza @tsouzamobile!
Navegação	
  Primária	
  –	
  Tab	
  Menu	
  




                                                                                                                              Jamie	
  Oliver	
  /	
  	
  Starbucks	
  –	
  Everything	
  cofee	
  Free	
  
       Problemas:	
  Não	
  conseguir	
  colocar	
  todos	
  os	
  itens	
  visíveis	
  
       	
  
       Soluções:	
  ícone	
  claros,	
  uso	
  do	
  “...”	
  para	
  deixar	
  claro	
  que	
  tem	
  mais	
  opções	
  


                                                                                                     Via Thais Souza @tsouzamobile!
Navegação	
  Primária	
  –	
  Gallery	
  




                                                                                                                  BBC	
  News	
  /	
  Flickr	
  
       Problemas:	
  Necessidade	
  de	
  Ytulo	
  claro,	
  distorção	
  de	
  imagens	
  
       	
  
       Soluções:	
  Padronização	
  tamanho	
  das	
  imagens,	
  vtulo	
  objeYvo	
  
                                                                                         Via Thais Souza @tsouzamobile!
Fonte:	
  h"p://inspiraYon.appflo.ws/orozpotk/this-­‐years-­‐iphone-­‐design-­‐trend-­‐side-­‐navigaYon	
  



 Navegação	
  Primária	
  –	
  Side	
  NavigaYon	
  




                                                 Green Kitchen
   Download	
  from	
  the	
  App	
  Store	
  
Navegação	
  Primária	
  –	
  Side	
  NavigaYon	
  




Youtube
Navegação	
  Primária	
  –	
  Side	
  NavigaYon	
  




Youtube
Navegação	
  Primária	
  –	
  Side	
  NavigaYon	
  




Youtube
Navegação	
  Secundária	
  –	
  Page	
  Indicator	
  




                                                                                                                 Lacing	
  shoes	
  /	
  Cielo	
  
     Problemas:	
  Não	
  deve	
  ser	
  usado	
  em	
  processos	
  longo,	
  componente	
  default	
  de	
  slide	
  
     	
  
     Soluções:	
  Usar	
  somente	
  em	
  processos	
  curtos,	
  levando	
  em	
  consideração	
  seu	
  padrão	
  
                                                                                         Via Thais Souza @tsouzamobile!
Navegação	
  Secundária	
  –	
  Image	
  Carousel	
  #	
  Slideshow	
  




                                                                                                            IMDb	
  /	
  Cielo	
  
       Problemas:	
  distorção	
  de	
  imagens,	
  Falta	
  de	
  paginação	
  
       	
  
       Soluções:	
  manter	
  tamanho	
  original	
  das	
  imagens	
  
                                                                                   Via Thais Souza @tsouzamobile!
Os Caminhos do Design Mobile - Campus Party 2013
os caminhos
do design                                 App	
  
mobile                                   Híbrida	
  

@horaciosoares – Campus Party 2013	
  
App
Híbrida
Os Caminhos do Design Mobile - Campus Party 2013
Aplicações Híbridas

Ideal para:
- Aplicações corporativas
- Players de vídeo
- Venda a varejo
- Software (ferramentas de produtividade))
Prós das APPs Híbridas

- Não necessita de Store e nem de aprovação
para publicação.
- Boa performance com uso adequado do cache.
- Mais em conta que as APP nativas.
- Pode utilizar alguns recursos do dispositivo.
- Atualizações constantes de navegadores
- Utiliza recursos de HTML5, CSS e JavaScript
- Uma única equipe para todos os ambientes.
Desvantagens
- Performance inferior as APPs nativas
- Não utiliza todos os recursos dos dispositivos
como as APPs.
- Não está disponívels nas Stores
- Pode ou não utilizar os recursos de navegação
dos dispositivos e aproveitar experiências dos
usuários de cada plataforma.
Para	
  app	
  Android,	
  os	
  
controles	
  devem	
  ficar	
  
no	
  topo.	
  
	
  
Reverso	
  do	
  Iphone	
  
onde	
  o	
  botão	
  Home	
  
não	
  criar	
  o	
  mesmo	
  
0po	
  de	
  compe0ção	
  
como	
  no	
  Android.	
  
	
  
Compare	
  o	
  aplica0vo	
  
para	
  Android	
  e	
  Iphone	
  

                                     Via Thais Souza @tsouzamobile!
Via Thais Souza @tsouzamobile!
Os Caminhos do Design Mobile - Campus Party 2013
CSS	
  
                       HandHeld	
  
                        Design	
  
 Não	
  fazer	
                           Design	
  
                        Líquido	
  
  nada…	
                                Respon-­‐
                                           sivo	
  


                                                       OYmizado	
  
                                                         para	
  
                                                        Mobile	
  




                                                                       App	
  
                                                                      NaYva	
  



os caminhos
do design                                                              App	
  
mobile                                                                Híbrida	
  

@horaciosoares – Campus Party 2013	
  
Não	
  fazer	
  
  nada…	
  



                                         OYmizado	
  
                                           para	
  
                                          Mobile	
  




os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
Design	
  
                                         Respon-­‐
                                           sivo	
  


                                                       OYmizado	
  
                                                         para	
  
                                                        Mobile	
  




os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
CSS	
  
                       HandHeld	
  
                        Design	
  
                        Líquido	
  




                                         OYmizado	
  
                                           para	
  
                                          Mobile	
  




os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
Design	
  
                                         Respon-­‐
                                           sivo	
  




                                                        App	
  
                                                       NaYva	
  



os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
Design	
  
                                         Respon-­‐
                                           sivo	
  


                                                       OYmizado	
  
                                                         para	
  
                                                        Mobile	
  




                                                                       App	
  
                                                                      NaYva	
  



os caminhos
do design
mobile
@horaciosoares – Campus Party 2013	
  
Design	
  
                                         Respon-­‐
                                           sivo	
  


                                                       OYmizado	
  
                                                         para	
  
                                                        Mobile	
  




                                                                       App	
  
                                                                      NaYva	
  



os caminhos
do design                                                              App	
  
mobile                                                                Híbrida	
  

@horaciosoares – Campus Party 2013	
  
Qual é o futuro?
Qual é o chute para fora?
Um único caminho servindo e se
 ajustando a todos as escolhas
 com experiências diferentes e
  customizadas pelo usuário/
          design?…

Mais conteúdo relacionado

Destaque

7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid MarquesiMasters
 
7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon KulikowskiiMasters
 
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetupPedro Donati
 
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosQConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosEiti Kimura
 
Como lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQLComo lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQLpichiliani
 
CNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliveryCNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliverySamanta Cicilia
 
Como o ViajaNet aumentou suas vendas com SEO
Como o ViajaNet aumentou suas vendas com SEOComo o ViajaNet aumentou suas vendas com SEO
Como o ViajaNet aumentou suas vendas com SEOConversion
 
7Masters jQuery - Eventos em jQuery, com Felquis Gimenes
7Masters jQuery - Eventos em jQuery, com Felquis Gimenes7Masters jQuery - Eventos em jQuery, com Felquis Gimenes
7Masters jQuery - Eventos em jQuery, com Felquis GimenesiMasters
 
Mobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJMobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJHorácio Soares
 
Cost Effective Data-Based Content Marketing
Cost Effective Data-Based Content MarketingCost Effective Data-Based Content Marketing
Cost Effective Data-Based Content MarketingKane Jamison
 
Advanced Django Forms Usage
Advanced Django Forms UsageAdvanced Django Forms Usage
Advanced Django Forms UsageDaniel Greenfeld
 
As Media Queries são só um detalhe!
As Media Queries são só um detalhe!As Media Queries são só um detalhe!
As Media Queries são só um detalhe!Edu Agni
 
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)Edu Agni
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceEdu Agni
 
Past, Present & Future of Recommender Systems: An Industry Perspective
Past, Present & Future of Recommender Systems: An Industry PerspectivePast, Present & Future of Recommender Systems: An Industry Perspective
Past, Present & Future of Recommender Systems: An Industry PerspectiveJustin Basilico
 
Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...
Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...
Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...Dawen Liang
 

Destaque (20)

7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
 
7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski
 
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
 
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosQConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
 
SPL Datastructures
SPL DatastructuresSPL Datastructures
SPL Datastructures
 
Como lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQLComo lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQL
 
CNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliveryCNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous Delivery
 
Let's log!
Let's log!Let's log!
Let's log!
 
Como o ViajaNet aumentou suas vendas com SEO
Como o ViajaNet aumentou suas vendas com SEOComo o ViajaNet aumentou suas vendas com SEO
Como o ViajaNet aumentou suas vendas com SEO
 
7Masters jQuery - Eventos em jQuery, com Felquis Gimenes
7Masters jQuery - Eventos em jQuery, com Felquis Gimenes7Masters jQuery - Eventos em jQuery, com Felquis Gimenes
7Masters jQuery - Eventos em jQuery, com Felquis Gimenes
 
Mobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJMobile UX - MobileConf 2014 - RJ
Mobile UX - MobileConf 2014 - RJ
 
Twitter: 10 anos de existência
Twitter: 10 anos de existênciaTwitter: 10 anos de existência
Twitter: 10 anos de existência
 
Cost Effective Data-Based Content Marketing
Cost Effective Data-Based Content MarketingCost Effective Data-Based Content Marketing
Cost Effective Data-Based Content Marketing
 
Advanced Django Forms Usage
Advanced Django Forms UsageAdvanced Django Forms Usage
Advanced Django Forms Usage
 
As Media Queries são só um detalhe!
As Media Queries são só um detalhe!As Media Queries são só um detalhe!
As Media Queries são só um detalhe!
 
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)
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da Interface
 
Past, Present & Future of Recommender Systems: An Industry Perspective
Past, Present & Future of Recommender Systems: An Industry PerspectivePast, Present & Future of Recommender Systems: An Industry Perspective
Past, Present & Future of Recommender Systems: An Industry Perspective
 
Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...
Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...
Factorization Meets the Item Embedding: Regularizing Matrix Factorization wit...
 

Semelhante a Os Caminhos do Design Mobile - Campus Party 2013

Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Horácio Soares
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Horácio Soares
 
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 mobileMarcos Fabrício
 
UX em Plataformas Conversacionais
UX em Plataformas ConversacionaisUX em Plataformas Conversacionais
UX em Plataformas ConversacionaisJoana Ritter
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando MobiledevMob
 
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 - BlogcampRJHorácio Soares
 
"Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de...
 "Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de... "Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de...
"Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de...Julio Cesar Nunes de Souza
 
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 2014Horácio Soares
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaMarcelo Sales
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceHorácio Soares
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios BásicosVítor Teixeira
 
Trabalho Gerencia de Projetos
Trabalho Gerencia de ProjetosTrabalho Gerencia de Projetos
Trabalho Gerencia de ProjetosDiego BBahia
 
Artefato organizador para um espaço de trabalho.- projeto 21
Artefato organizador  para um espaço de trabalho.- projeto 21Artefato organizador  para um espaço de trabalho.- projeto 21
Artefato organizador para um espaço de trabalho.- projeto 21Francisco Gómez Castro
 
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Dhiego Bicudo
 
O Mercado e Desenvolvimento em Mobile
O Mercado e Desenvolvimento em MobileO Mercado e Desenvolvimento em Mobile
O Mercado e Desenvolvimento em MobileThiago Cortat
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Juliana Gaiba
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot CampUTFPR
 

Semelhante a Os Caminhos do Design Mobile - Campus Party 2013 (20)

Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
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
 
UX em Plataformas Conversacionais
UX em Plataformas ConversacionaisUX em Plataformas Conversacionais
UX em Plataformas Conversacionais
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando Mobile
 
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
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
"Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de...
 "Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de... "Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de...
"Mas eu não tenho experiência..." E daí??? - Como quebrar o ciclo vicioso de...
 
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
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a Experiência
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
 
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
 
Trabalho Gerencia de Projetos
Trabalho Gerencia de ProjetosTrabalho Gerencia de Projetos
Trabalho Gerencia de Projetos
 
04 O artefato organizador para um espaço de trabalho projeto 21_ v 2015.2
04 O artefato organizador  para um espaço de trabalho projeto 21_ v 2015.204 O artefato organizador  para um espaço de trabalho projeto 21_ v 2015.2
04 O artefato organizador para um espaço de trabalho projeto 21_ v 2015.2
 
Artefato organizador para um espaço de trabalho.- projeto 21
Artefato organizador  para um espaço de trabalho.- projeto 21Artefato organizador  para um espaço de trabalho.- projeto 21
Artefato organizador para um espaço de trabalho.- projeto 21
 
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...
 
O Mercado e Desenvolvimento em Mobile
O Mercado e Desenvolvimento em MobileO Mercado e Desenvolvimento em Mobile
O Mercado e Desenvolvimento em Mobile
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 

Mais de Horácio Soares

UX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosUX Mobile - Testando com Usuários
UX Mobile - Testando com UsuáriosHorácio Soares
 
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 BrasilHorácio Soares
 
UX e testes de usabilidade mobile
UX e testes de usabilidade mobileUX e testes de usabilidade mobile
UX e testes de usabilidade mobileHorácio Soares
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014Horácio Soares
 
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/03Horácio Soares
 
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 - SPHorácio Soares
 
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012Horácio Soares
 
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresWebinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresHorá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 verdadeHorácio Soares
 
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Horácio Soares
 
InterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoInterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoHorácio Soares
 
EDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebEDTED 2010 - Acessibilidade na Web
EDTED 2010 - Acessibilidade na WebHorácio Soares
 
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 - ImastersHorácio Soares
 
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 LuliHorácio Soares
 
Interact 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeInteract 2009 - Acessibilidade Web e Mobilidade
Interact 2009 - Acessibilidade Web e MobilidadeHorácio Soares
 
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 13Horácio Soares
 
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 13Horácio Soares
 
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 acessibilidadeHorácio Soares
 
WAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeWAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeHorácio Soares
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignHorácio Soares
 

Mais de Horácio Soares (20)

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
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014
 
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 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
 
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedoresWebinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
 
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
 
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011
 
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
 
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
 
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
 
WAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e UsabilidadeWAIU - Workshop AI, Acessibilidade e Usabilidade
WAIU - Workshop AI, Acessibilidade e Usabilidade
 
Portais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, DesignPortais Corporativos - Mobile, PodCast, WebCast, Design
Portais Corporativos - Mobile, PodCast, WebCast, Design
 

Os Caminhos do Design Mobile - Campus Party 2013