• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Os Caminhos do Design Mobile - Campus Party 2013
 

Os Caminhos do Design Mobile - Campus Party 2013

on

  • 4,700 views

Os Caminhos do Design Mobile, apresentação realizada no dia 29 de janeiro de 2013 no Campus Party Brasil.

Os Caminhos do Design Mobile, apresentação realizada no dia 29 de janeiro de 2013 no Campus Party Brasil.

Statistics

Views

Total Views
4,700
Views on SlideShare
3,751
Embed Views
949

Actions

Likes
22
Downloads
96
Comments
1

9 Embeds 949

http://www.uxdesign.blog.br 783
http://blog.fspina.com.br 123
http://www.bloglecom.com.br 22
https://twitter.com 9
http://flavors.me 8
https://twimg0-a.akamaihd.net 1
http://feeds.feedburner.com 1
http://pt.flavors.me 1
http://cloud.feedly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Os Caminhos do Design Mobile - Campus Party 2013 Os Caminhos do Design Mobile - Campus Party 2013 Presentation Transcript

    • Horácio Soares @horaciosoares 21 9925-5404 Campus Party 2013Os 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
    • no Brasil
    • h"p://services.google.com/J/files/blogs/
    • 1Os smartphones são indispensáveis no cotidiano
    • 2Os smartphonestransformaram ocomportamento do consumidor
    • 3Os smartphones ajudamos usuários a navegarpelo mundo
    • Mas cuidado...
    • 2 - Os smartphones transformaram o comportamento do consumidor
    • 5Os smartphones ajudam os anunciantes a entrarem emcontato com os clientes
    • Estatísticas Brasil
    • GIFanimado...
    • 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 GIFsanimados...
    • 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 ToyToyotahttp://www.youtube.com/watch?v=-mjudtrwdS4
    • 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 entrenavegadores Mobile e HTML5
    • Atualizações frequentes...
    • 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”
    • 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 siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?
    • Flickr desktop60 opções de menu...
    • @lukew
    • Flickr mobile7 opções de menu...
    • Less is more...
    • @lukew
    • Conhecimento profundo daaudiê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 detalhes docomprador não podem servisualizados na versão mobile.
    • DesktopSite
    • Mobile Site
    • CSS   HandHeld   Design  Não  fazer   Design   Líquido   nada…   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo design App  mobile Híbrida  
    • Antes deescolher o melhorcaminho…
    • Projetos UX Mobile
    • O que osusuáriosesperam?
    • felicidade
    • felicidadeX
    • felicidade
    • felicidade X
    • experiência perfeita
    • felicidade
    • Entretanto, a experiência pertence as pessoas.O designer não projeta a experiência… Projeta para aexperiê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...
    • acertandoo tiro certono alvo certo
    • com estratégia
    • “uma conspiração para o sucesso”
    • falta de estratégia eplanejamento resulta em…
    • para onde vamos?h"p://voluntariadomococa.files.wordpress.com/
    • onde devemos mirar?
    • Causo 1PrecisamosConstruiruma 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 ocliente 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ênusObjetivos e metas da empresa Necessidades dos usuários
    • Objetivose metasdo 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).•  ...
    • Reaisnecessidades dos usuários
    • •  Qualidade. •  Simplicidade.•  velocidade.•  Utilidade.•  Usabilidade.•  Acessibilidade.•  Portabilidade.•  Bom custo x benefício.•  Resolver seu problema.•  ...
    • Objetivos Reaise metas necessidadesdo projeto dos usuários
    • a buscado equilíbrio
    • empresa   Objetivose 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  
    • Como anda a qualidade dosnossos sites nasversões desktop?
    • h"p://www.theonion.com/arYcles/internet-­‐users-­‐demand-­‐less-­‐interacYvity,30920/    
    • Será?
    • Uma breve avaliaçãode conhecidos sites de notícias sobre TI
    • CSS   HandHeld   Design  Não  fazer   Design   Líquido   nada…   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo design App  mobile Híbrida  
    • Não  fazer   nada…  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • Nãofazernada!
    • Google Survey Reveals What Users Want From Mobile Sites (Julho 2012) http://marketingland.com/google-survey-what-users-want-from-mobile-sites-22606http://googlemobileads.blogspot.com.br/2012/09/mobile-friendly-sites-turn-visitors.html
    • CSS   HandHeld   Design   Líquido  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • CSSHandHeld Design Líquido
    • CSSmediaHANDHELD Como era em 2004, 2005, 2006...?
    • SiteAcesso Digital 2007
    • Portabilidade - design líquido (resolução 1024x768)
    • Portabilidade - design líquido ( resolução 640x480)
    • Portabilidadecss para dispositivo móvel MOTO Q Acesso Digital: http://acessodigital.net
    • Design   Respon-­‐ sivo  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • DesignResponsivo
    • Design ResponsivoIdeal 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 ResponsivoMenu no topo, com “do nothing”.
    • Design Responsivo Menu no topo
    • 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.
    • 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.
    • Design ResponsivoMenu duplicado, em cima e em baixo da página.
    • One single page, sem saltos na versão mobile.
    • One single page, com saltos.
    • Design ResponsivoMenu duplicado, em cima e em baixo na página, ambos à mostra.
    • h"p://thecoppertree.org/  
    • h"p://thecoppertree.org/  
    • Design Responsivo Link no topo que abre o menu do tipoDropDown (opções em uma nova “camada”) ou expansível (abre e fecha)
    • DropDown (opções em uma nova “camada”)
    • Expansível (abre e fecha)
    • Design ResponsivoNo topo, poucos links, sendo que um último abre mais opções.
    • Design Responsivo Side NavigationNavegação à esquerda, via flutuação
    • Design ResponsivoMenu com menos opções
    • Design ResponsivoEscondendo menus na versão mobile
    • Design ResponsivoMenu via uma Combo box (menu select) na versão móvel.
    • OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • Otimizado para Mobile
    • Otimizado para Mobile 2 v.Desktope Mobile
    • 2 v.Desktope Mobile
    • 2 v.Desktope Mobile
    • 2 v.Desktope Mobile
    • Site otimizado para MobileA maioria oferece apenas duas versões:
    • Otimizado para Mobile 3 v. Desktop, Tablet e Mobile
    • Site otimizado para MobileAlgumas empresas têm três versões diferentes:
    • Otimizado para Mobile 3 v. 2 v. Desktop,Desktop Tablet ee Mobile Mobile
    • Site otimizado para MobileIdeal 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 boaperformance.- Melhor UX do que o Responsivo.- Mais em conta que as APPs.- Funciona em todos os dispositivos com umnavegador e acesso a internet.- Não necessita de uma Store.
    • Desvantagens do site Mobile- Requer duas URLs, uma para versão clássica eMobile.- Se tiver menos conteúdo e funcionalidade temque 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
    • Youtube em dezembro 2012
    • Globo.com em dezembro 2012
    • App   NaYva  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • AppNativa
    • App Nativa Windows BlackbarryAndroid 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 nativasIdeal 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álculoscomplexos, relatórios, gráficos, jogos, etc.- Ótima performance- Acesso offline (não necessita internet)- Pode utilizar todos os recursos do dispositivo, comoNFC, 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 paradiferentes dispositivos, telas, versões de SO eambientes.- 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çoem 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 caminhosdo design App  mobile Híbrida  @horaciosoares – Campus Party 2013  
    • AppHíbrida
    • Aplicações HíbridasIdeal 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çãopara 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 dispositivoscomo as APPs.- Não está disponívels nas Stores- Pode ou não utilizar os recursos de navegaçãodos dispositivos e aproveitar experiências dosusuá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!
    • CSS   HandHeld   Design   Não  fazer   Design   Líquido   nada…   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo design App  mobile Híbrida  @horaciosoares – Campus Party 2013  
    • Não  fazer   nada…   OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • Design   Respon-­‐ sivo   OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • CSS   HandHeld   Design   Líquido   OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • Design   Respon-­‐ sivo   App   NaYva  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • Design   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
    • Design   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo 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?…