Os Caminhos do Design Mobile - Campus Party 2013

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/ﬁles/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

Backseat Driver – Toyota ToyToyotahttp://www.youtube.com/watch?v=-mjudtrwdS4

Acelerômetro

Giroscópio

Bluetooth

Áudio, vídeo e imagem

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

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

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

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/

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

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.appﬂo.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 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 ﬁcar 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?…

http://www.uxdesign.blog.br	469
http://blog.fspina.com.br	116
http://www.bloglecom.com.br	16
https://twitter.com	9
https://twimg0-a.akamaihd.net	1
http://feeds.feedburner.com	1
http://pt.flavors.me	1
http://flavors.me	1

Os Caminhos do Design Mobile - Campus Party 2013

by Horácio Soares on Jan 31, 2013

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 614

Statistics

Os Caminhos do Design Mobile - Campus Party 2013 Presentation Transcript