• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile First - Palestra no MobileConf 2013
 

Mobile First - Palestra no MobileConf 2013

on

  • 3,869 views

Palestra ministrada no MobileConf 2013, em São Paulo - abril.

Palestra ministrada no MobileConf 2013, em São Paulo - abril.

Statistics

Views

Total Views
3,869
Views on SlideShare
3,728
Embed Views
141

Actions

Likes
9
Downloads
66
Comments
2

2 Embeds 141

http://www.benjamim.net 129
https://twitter.com 12

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

12 of 2 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

    Mobile First - Palestra no MobileConf 2013 Mobile First - Palestra no MobileConf 2013 Presentation Transcript

    • Horácio Soares @horaciosoares 21 9925-5404Mobile First Outubro de 2012 – São Paulo!
    • Mobile First
    • Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
    • Mas antes…
    • Qual é contexto do Mobile?
    • http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4
    • http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6
    • Os smartphones são indispensáveis no cotidiano
    • “In 2013, Mobile Phone will overtake PC’s as the mostcommon Web access device world wide.” — GARTNER
    • Slide 107http://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”
    • capacidades/ vantagens do mobile
    • GPS
    • Case Toyota
    • 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
    • “fritando o peixe e olhando o gato”.
    • @lukew
    • ‘Desktop is like “diving”…
    • …while mobile is like “snorkling.”’ by Hinman at Nokia http://www.slideshare.net/Rachel_Hinman
    • O quetodos quando mergulham desejam?
    • 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
    • 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
    • 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
    • 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
    • Ainda antes de focarno Mobile First, comoanda a qualidade dos nossos sites nas versões desktop?
    • Será?
    • Uma breve avaliaçãode conhecidos sites de notícias sobre TI
    • O Mobile Firstvem tirar os sites Desktop do CTI
    • Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
    • SIMPLICIDADE
    • Paradoxo da escolha
    • Elimine da interface itens que não sejam extremamente necessários...
    • Qual desses Desktops oferecia a melhor experiência?
    • Qual desses Desktops oferecia a melhor experiência?
    • E qual desses controles?
    • Case Extreme Booking with Hotels.com
    • http://www.youtube.com/watch?v=gcuFkiEORsE
    • Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
    • Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
    • Mobile First!
    • Mobile First!
    • Mobile First!
    • Mas antes do Mobile First precisamos de estratégia...
    • Estratégia:”conspiração para o sucesso”
    • X
    • Projetos UX Mobile
    • O que osusuáriosesperam?
    • felicidade
    • felicidadeX
    • felicidade
    • felicidade X
    • experiência perfeita
    • felicidade
    • Experiência do“ Usuário (UX) é a qualidade daexperiê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
    • para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
    • 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 37 Signals curto, então, mãos à obra!Livro: O Tiro e o Alvo
    • Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
    • Como são nossas experiências?
    • •  A maioria das experiências ruins poderiam ser evitadas com a identificação do alvo certo e com avaliações com usuários...
    • By Bernard De Luna
    • 50%É a média do tempo gasto emrefação nos projetos de TI.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
    • 15%Dos projetos são abandonadosdepois de uma primeira entregainadequada.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
    • 83%É a média da melhoria dos KPI’s emprojetos com 10% do orçamentogasto em pesquisa de usabilidade.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
    • Aumento de KPI’sConversões - Tráfego no site -Cadastros - Contatos de novosclientes - Vendas - Fatia de mercado -Transações - Taxa de sucesso emtarefas - Retenção - Produtividade -Pageviews - Uso do sistema - Visitaskey performance indicator (KPI)http://en.wikipedia.org/wiki/Key_performance_indicator
    • Diminuição de KPI’sCustos do projeto - Tempo dedesenvolvimento do projeto - Custo detreinamento - Erros no uso do sistema- Tempo do usuário - Chamadas emhelp desk - Refações – Manutenção.key performance indicator (KPI)http://en.wikipedia.org/wiki/Key_performance_indicator
    • desafio 1:identificar objetivos e necessidades…
    • Investigação Baseada em Perguntas Precisamos automatizar a Contabilidade Preciso do Balancete dia 5e 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ãoinformarmos 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 que 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 case em equilíbrio…
    • Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
    • Erico Fileno
    • 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
    • CSS HandHeld DesignNão fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App NativaQuais oscaminhos do Appdesign mobile? Híbrida
    • Não fazer nada…os caminhosdo designmobile@horaciosoares – Campus Party 2013
    • Nãofazernada!
    • CSS HandHeld Design Não fazer Líquido nada…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)
    • Portabilidade – CSS (Display PRINT)
    • Portabilidadecss para dispositivo móvel MOTO Q Acesso Digital: http://acessodigital.net
    • CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivoos caminhosdo designmobile@horaciosoares – Campus Party 2013
    • DesignResponsivo
    • CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobileos 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:
    • Site otimizado para MobileNormalmente a versão Mobile é projetada com foco nas atividades fins.
    • 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
    • CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativaos caminhosdo designmobile@horaciosoares – Campus Party 2013
    • AppNativa
    • App Nativa Blackbarry WindowsAndroid IOS Phone
    • CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativaos caminhosdo design Appmobile Híbrida@horaciosoares – Campus Party 2013
    • AppHíbrida
    • Via Thais Souza @tsouzamobile!
    • Qual melhor caminho?
    • Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first