1.
EncontroLOCAWEBRio de Janeiro Junho 2012

2.
?

3.
Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares

4.
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

5.
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

6.
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

7.
O que as pessoas esperam em umaexperiência em dispositivos móveis?

8.
felicidade

9.
felicidade

10.
experiência perfeita

11.
A experiênciaperfeita

12.
felicidade

13.
Entretanto, a experiência pertence as pessoas.O designer não projeta a experiência… Projeta para aexperiência do usuário.

14.
Experiência do“ Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”

15.
Um caminho para umaexperiência perfeita vem da busca pelas melhores IDADES

16.
IDADES?

17.
Acessibil IDADE

18.
Acessibil Usabil IDADE

19.
Comercial Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado Livre 2011

20.
Acessibil UsabilSimplic IDADE

21.
ESPN Brasil– abril 2010

22.
ESPN Brasil– abril 2010

23.
10 princípios de UX do GooglePrincípio 3. O simples é poderoso.

24.
Em uma interface perfeita paraas pessoas, elas nunca deveriam errar, principalmente no mundo mobile…

25.
Acessibil Usabil SimplicInterativ IDADE

26.
Acessibil Usabil Simplic Interativ Veloc IDADE

27.
10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa. Melhor definição de milisegundo?

28.
Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil

29.
Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ

30.
10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem distrair a mente

31.
Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util

32.
10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.

33.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

34.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

35.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

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

37.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

38.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

39.
Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util Facil

40.
Acessibil UsabilSimplic

41.
Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util Facil Portabil …

42.
A melhor idade vem da: Investigação Observação Colaboração Análise Avaliação Validação

43.
Erico Fileno

44.
Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”

45.
Por isso, em projetos mobile, precisamos estratégia,IDADE(n)(e design de verdade

46.
E o que as empresas esperam?

47.
Mulher com notebook em sinal de ok o melhor osso…

48.
mas como

49.
com qualidade...

50.
acertandoo tiro certono alvo certo

51.
com estratégia

52.
“uma conspiração para o sucesso”

53.
para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg

54.
onde devemos mirar?

55.
Causo 1PrecisamosConstruiruma mesa. Liv O Tiro e o A

56.
CAUSO 1 - A propósito, que mesa?Livro: O Tiro e o Alvo

57.
De sinuca?

58.
Ping-pong?

59.
Futebol de botão?

60.
Carteado?

61.
Ou seria uma mesa para computador?

62.
Reunião?

63.
Escritório?

64.
Mesa de centro?

65.
Jantar?

66.
Ou seria uma mesa de cirurgia?

67.
De autópsia?

68.
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

69.
CAUSO 1 (continuação) Para uma mesa pode parecer exagero, mas não para sistemas e sites...Livro: O Tiro e o Alvo

70.
Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.

71.
Desafio: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VênusObjetivos e metas da empresa Necessidades dos usuários

72.
Objetivos Reaise metas necessidadesdo projeto dos usuários

73.
Um caminho: modelagem participativa

74.
a buscado equilíbrio

75.
empresa Objetivose metas do projeto Necessidades dos usuários usuários

76.
Por que Mobile?

77.
crescimento = oportunidade

78.
no Brasil

79.
http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf

80.
1Os smartphones são indispensáveis no cotidiano

81.
2Os smartphonestransformaram ocomportamento do consumidor

82.
3Os smartphones ajudamos usuários a navegarpelo mundo

83.
4Os smartphones mudam o modo como os consumidores fazem compras

84.
5Os smartphones ajudam os anunciantes a entrarem emcontato com os clientes

85.
Estatísticas

86.
Maio de 2012http://www.mobiletime.com.br/29/05/2012/brasil-tem-52-milhoes-de-acessos-de-banda-larga-movel-diz-estudo/280718/news.aspx

87.
TIC Domicílios 2011outubro de 2011 – janeiro 2012 http://cetic.br/usuarios/tic/2011-total-brasil/

88.
http://www1.folha.uol.com.br/tec/1098360-uso-de-internet-no-celular-cresce-340-em-um-ano.shtml

89.
Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

90.
Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

91.
Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

92.
Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

93.
No mundo

94.
O ecosistema do Mobile.http://econsultancy.com/us/reports/mobile-ecosystem

95.
Fevereiro 2012http://blog.nielsen.com/nielsenwire/online_mobile/smartphones-account-for-half-of-all-mobile-phones-dominate-new-phone-purchases-in-the-us/

96.
Maio de 2012http://blog.nielsen.com/nielsenwire/online_mobile/how-us-smartphone-and-tablet-owners-use-their-devices-for-shopping/

97.
comScore – dezembro de 2011

98.
capacidades/va ntagens do mobile

99.
GPS

100.
Acelerômetro

101.
Giroscópio

102.
Bluetooth

103.
Áudio, vídeo e imagem

104.
NFC

105.
Sensores multitoque

106.
Em qualquer hora e local.

107.
Novas maneiras de interação e apresentação

108.
Boa compatibilidade entrenavegadores Mobile e HTML5

109.
Atualizações frequentes...

110.
Contexto: By: Thais Souza @_tsouza_

111.
By: Thais Souza @_tsouza_

112.
É sobre pessoas e não plataformas…

113.
PaixãoBy: Thais Souza @_tsouza_

114.
vaidadeBy: Thais Souza @_tsouza_

115.
raiva

116.
alegria

117.
frustração

118.
Otimização de tempo

119.
Útil para esportes…. By: Thais Souza @_tsouza_

120.
Funcionais…By: Thais Souza @_tsouza_

121.
Para comprar… By: Thais Souza @_tsouza_

122.
Inovador

123.
Conhecimento…. By: Thais Souza @_tsouza_

124.
Para novos gênios….

125.
Para todos….By: Thais Souza @_tsouza_

126.
limitações/restrições do mobile

127.
Muitas vezes, ao interagir com mobile, as pessoas estão em modo: “fritando o peixe e olhando o gato” e com apenas um dos dedos...

128.
@lukew

129.
„Desktop is like “diving” while mobile is“snorkling.”‟ by Rachel Hinman at Nokia

130.
desktop@lukew

131.
tela grande energia rede consistente teclado mouse cadeira mesa@lukew

132.
tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew

133.
mobile@lukew

134.
tela pequena bateria rede inconsistente dedo gordo sensores@lukew

135.
Outras limitações:● Capacidade de processamento reduzida.● 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

136.
perda de 80% do espaço

137.
@lukew

138.
Pode parecer uma tragédia, mas isso pode ser ótimo para o negócio...

139.
te força a priorizar...te força a manter o foco…

140.
Alguém conhece algum siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?

141.
Flickr desktop60 opções de menu...

142.
@lukew

143.
Flickr mobile7 opções de menu...

144.
Less is more...

145.
@lukew

146.
Restrições são boas para o design, pois te forçam a priorizar, a manter o foco

147.
Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

148.
Mobile FirstLuke Wroblewski

149.
Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

150.
Elimine da interface itens que não sejam extremamente necessários...

151.
Paradoxo da escolha

152.
mitos

153.
as pessoas não vãose registrar via mobile

154.
não vão comprar via mobile

155.
não vão criar conteúdo, fazer reviews, dar opinião, etc.

156.
sempre seremos surpreendidos pelo que as pessoas fazem na experiência mobile

157.
http://midiaria.wordpress.com/2012/02/21/10pesquisa-sms-mavam-acision-brasil/

158.
se as perguntas fizerem sentido e a interface tiver um bom design, as pessoas vão responder...

159.
Algumas recomendações

160.
- INPUTS(entrada de dados)

161.
1- LABELS no topo

162.
LABEL no topo• Miniminiza o tempo para entrada de dados• Mais fácil de codificar: sem floats e tabelas• Acessibilidade: label, campos na ordem certa• Melhor formato para mobile• Suporte diferentes resoluções• Requer mais espaço

163.
2 – Confirmação de dados

164.
Confirmação de senha?

165.
Confirmação de e-mail?

166.
3 – Opção de senha sem mascara.

167.
4 – Cadastro obrigatório

168.
Será que é mesmo necessário me cadastrar em um site dee-commerce para fazer uma compra?

169.
- Navegação

170.
Content First

171.
- Botões de voltar...

172.
- Espaços em branco...

173.
- Web Standards

174.
Toque...

175.
Se o dispositivo épequeno, por que não tornar toda área interativa?

176.
Toque seguro...

177.
Recomendação AppleDeixe espaçosuficiente paratoqueacidentais By: Thais Souza @_tsouza_

178.
Mas…a Microsoft pede 34px e a Nokia 28px? By: Thais Souza @_tsouza_

179.
Mas…o dedo de um adulto vai de 45 a 57px E o dedão pode chegar até 72px By: Thais Souza @_tsouza_

180.
Quantos dedos você usaem um smartphone? By: Thais Souza @_tsouza_

181.
By: Thais Souza @_tsouza_

182.
-Performance

183.
-Performance-http://gtmetrix.com

184.
Qual caminho mobile meu site deve seguir?

185.
-Avaliação e validação

186.
How To ConductA Usability TestOn A Mobile Devicehttp://www.measuringusability.com/blog/mobile-usability-test.php

187.
-Como testar aqui?

188.
Foto: Rosenfield Media

189.
Prototipação

190.
Obrigado!Horácio SoaresWorkshop Design Mobilefacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares