74. Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somos
todos daltónicos e sofremos
do Mal de Parkinson”
77. 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
139. 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
140. CAUSO 1 (continuação)
Para uma mesa pode parecer
exagero, mas não para
sistemas e sites...
Livro: O Tiro e o Alvo
143. 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!!
144. Uma proposta de briefing
Baseado em perguntas:
http://clearleft.s3.amazonaws.com/client-
worksheet.doc
http://bit.ly/a5tRzF
145. Desafio 2:
Como atender ao mesmo tempo
os objetivos e as necessidades?
Marte Vênus
Objetivos e metas da empresa Necessidades dos usuários
147. • 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).
• ...
190. 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
192. CSS
HandHeld
Design
Líquido
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013
207. Design Responsivo
Ideal para:
• Web sites informativos/institucionais
• Portfolios
• Sites com muito conteúdo como jornais,
revistas, blogs.
208. 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.
209. 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.
282. Otimizado
para
Mobile
3 v.
2 v.
Desktop,
Desktop
Tablet e
e Mobile
Mobile
283. Site otimizado para Mobile
Ideal para:
- Vendas a varejo
- Sites de busca
- SaaS – Software as a Software
- Outras aplicações Web
284. 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.
285. 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
312. App
Nativa
Windows Blackbarry
Android IOS Phone
313. 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!
314. Android
–
Java
Based
Eclipse
–
Pacote
SDK
(Android)
UI
Guidelines
MúlYplas
telas
Orientação
do
aplicaYvo?
Versões?
Via Thais Souza @tsouzamobile!
315. 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!
316. 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
318. 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.
319. 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.
322. 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!
323. 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!
324. 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!
325. 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!
330. 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!
331. 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!
336. Aplicações Híbridas
Ideal para:
- Aplicações corporativas
- Players de vídeo
- Venda a varejo
- Software (ferramentas de produtividade))
337. 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.
338. 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.
339. 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!
342. 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
343. Não
fazer
nada…
OYmizado
para
Mobile
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013
344. Design
Respon-‐
sivo
OYmizado
para
Mobile
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013
345. CSS
HandHeld
Design
Líquido
OYmizado
para
Mobile
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013
346. Design
Respon-‐
sivo
App
NaYva
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013
347. Design
Respon-‐
sivo
OYmizado
para
Mobile
App
NaYva
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013
348. Design
Respon-‐
sivo
OYmizado
para
Mobile
App
NaYva
os caminhos
do design App
mobile Híbrida
@horaciosoares – Campus Party 2013