mobile ux - mobileconf 2014 - rj
DESCRIPTION
Mobile UX: a experiência como vantagem competitiva. Apresentação utilizada na palestra realizada no dia 31 de maio de 2014, no MobileConf no Rio de Janeiro.TRANSCRIPT
@horaciosoares !Especialista em experiência do usuário, usabilidade, Design e acessibilidade, é consultor da Acesso Digital e da Soyuz e possui 16 anos de experiência no desenvolvimento de soluções Web. Palestrante, professor e editor de artigos, faz parte do Conselho Consultivo do Instituto Intranet Portal e do GT de Acessibilidade na Web do W3C Brasil.
Horacio Soares
[email protected] facebook.com/mestresbrasil (21) 9 9925-5404 - @horaciosoares Skype: horacio.soares
Horácio Soares
Mulher com notebook em sinal de ok
Todos querem o melhor osso…
Cachorrinho caregando um enorme osso.
Para onde vamos?
http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
CAUSO 1 (continuação) !- Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é curto, então, mãos à obra!
Livro: O Tiro e o Alvo
Livro: rework 37 Signals
É a média do tempo gasto em refação nos projetos de TI. Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
50%
Mais caro fazer alterações em um projeto finalizado. Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
100x
Dos projetos são abandonados depois de uma primeira entrega inadequada.
Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
15%
É a média da melhoria dos KPI’s em projetos com 10% do orçamento gasto em pesquisa de usabilidade.
Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
83%
Aumento de KPI’s !Conversões - Tráfego no site - Cadastros - Contatos de novos clientes - Vendas - Fatia de mercado - Transações - Taxa de sucesso em tarefas - Retenção - Produtividade - Pageviews - Uso do sistema - Visitas key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
Diminuição de KPI’s !Custos do projeto - Tempo de desenvolvimento do projeto - Custo de treinamento - Erros no uso do sistema - Tempo do usuário - Chamadas em help desk - Refações – Manutenção. key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
eXperiência do Usuário (UX) é a qualidade da experiência que uma
pessoa tem ao interagir com algo projetado.
uxnet.org
“
”
http://semanticstudios.com/publications/semantics/000029.php
Colmeia da experiência do usuário? !
!
!
!HoneyComb User Experience
http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg
http://semanticstudios.com/publications/semantics/000029.php
http://semanticstudios.com/publications/semantics/000029.php
v
Cliente
Designer gráficoFront End
Atendimento
Designer/Arquiteto
<html> <style><script>
Backend
??
v
Cliente
Designer gráficoFront End
Atendimento
Designer/Arquiteto
Backend
??
?
<% - - %>
#%$&*@#$%$#
v
Cliente
Designer gráficoFront End
Atendimento
Designer/Arquiteto
<html> <style>
<script>
Backend
<% - - %>
v
Cliente
Designer gráficoFront End
Atendimento
Designer/Arquiteto
<html> <style><script>
Backend
<% - - %>
#%$&*@#$%$#
???
Marte Objetivos e metas da empresa
Vênus Necessidades dos usuários
Desafio 2:
Como atender ao mesmo tempo os objetivos e as necessidades?
• 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).
• ...
• Qualidade.
• Simplicidade.
• velocidade.
• Utilidade.
• Usabilidade.
• Acessibilidade.
• Portabilidade.
• Bom custo x benefício.
• Resolver seu 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
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
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Por Quê?Por Quê?Por Quê?Por Quê?Por Quê?
Precisamos automatizar a Contabilidade
Preciso do Balancete dia 5 e não dia 15 como atualmente!
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!!
Investigação Baseada em Perguntas
Por que um Novo Sistemade Materiais ?
LUCRO!
DiretorPresidente
ROUBO!
Chefe do Almoxarifado
JUROS!
Diretor Financeiro
PARADAS!
Diretor de Produção
Modelagem Participativa
Uma proposta de briefing
baseado em perguntas:
http://clearleft.s3.amazonaws.com/client-
worksheet.doc
!http://bit.ly/a5tRzF
Artigo CAPTCHA: herói ou vilão?
!http://acessodigital.net/art_captcha-heroi-ou-vilao.html
Captcha (solução inacessível e insegura)
(http://www.webvisum.com/en/main/download)
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
Should I use carousel?
http://shouldiuseacarousel.com !
Exemplo: !
King Host
http://www.kinghost.com.br/
http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
Kill The Hamburger Button
http://exisweb.net/mobile-menu-abtest
Mobile Menu AB Tested: Hamburger Not the Best
Choice?
http://www.newfangled.com/user_experience_mobile_menus_and_nav_burgers
Mobile Navigation Menus and Great User Experience
Porque está na moda, todo mundo usa, porque não temos tempo e
somos reativos...
!
REWORK: Business book from 37signals
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4
http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg
http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf
http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg
http://pt.slideshare.net/wearesocialsg/social-digital-mobile-around-the-world-january-2014
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18
MOBILE TO THE FUTUREhttp://www.zeldman.com/2012/07/09/mobile-to-the-future-luke-wroblewski/
• People are 2x more likely to buy on mobile;
• 2.5x more likely to subscribe;
• 3x more likely to be engaged.
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...
Slide 107 http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somostodos daltónicos e sofremos
do Mal de Parkinson”
Mobile And Accessibility: Why You Should Care And What You
Can Do About It http://www.smashingmagazine.com/2014/05/21/mobile-
accessibility-why-care-what-can-you-do/
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
Desktop first!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Mobile First!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
UX Designer torna-se especialista na criação de docs como Wireframes, site maps, diagramas de
fluxo, inventários de conteúdos, taxonomias, mockups e documentos com especificações, ao
invés de projetarem experiências.
Quando combinado com metodologias de
desenvolvimento, os entregáveis produzidos pelos designers
podem gerar um grande desperdício de tempo.
http://www.slideshare.net/uxconsulting/iaxil-lunch-talk-lean-ux
http://www.slideshare.net/uxconsulting/iaxil-lunch-talk-lean-ux
Não é uma UX preguiçosa,
mas é sobre minimizar desperdícios.
First clic test.
Se o usuário não clicar certo a primeira vez, a chance de
clicar certo depois será muito baixa.
A técnica muito boa e rápida para testar se os seus links/botões/arquitetura estão funcionando.
Chame o usuário e crie alguns cenários para testar a
homepage, como, por exemplo: “Sua senha foi clonada e você precisa mudá-la com urgência... Onde você clicaria para mudar a senha?”
E observe o usuário.
Parallel Design !
Estudo: Improving System Usability Through Parallel Design By JAKOB NIELSENhttp://www.nngroup.com/articles/parallel-design/
"In a case study o a screen-based telephone interface, measured usability when going from version 1 to version 2 was improved by 18% when using traditional iterative design and by 70% when using parallel design. In the case study, parallel design was about 73% more expensive than iterative design, so it cannot be recommended for all development projects, but it seems a promising usability engineering method for speeding up time-to-market”.
Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficac
https://www.cs.cmu.edu/~spdow/files/PrototypingParallel-TOCHI10.pdf
$ # @ % ^&* @ $ * ( ) ^+! ˜
% ˆ & $ # @ $ % ˆ Y )@ Y % ˆ & *
&*ˆ%$ˆ&(&%%%$#%#$ %$#%$ˆ$%ˆ$ ˆ
% ˆ & $ # @ $ % ˆ Y )@ Y % ˆ & *
fkdsjkfl jdskf jsdkl fjsdlk fjsdlk fjsdl fksjfklsfj klsjf lksdjk fljsdk fjsdklj fklsdj klfjsdlkjfklsd flksd jklfjksldjflks jdfklj sdklfj sdkljf lksjd fkljsdlkf jsdkl fjskdlj flksdj flkjsd kfjslk fjskdl jfklds jfklsj flkjsd flkjsdkl fjskl fjklsjfklsj flkjsd klgjkldfjglidjoisufd ikzdjfhdkf dhkkj hkudz fhku hzkd khf kh kjzhkjfhz jkdhfkzd jkfhsdiuf howshfjkw hrjkweh fk kjhd kjhkfdh kshf kjhd kjzhf kzhf kjdhfk hkz fhkz hfjk
[email protected] facebook.com/mestresbrasil (21) 9 9925-5404 - @horaciosoares Skype: horacio.soares
Horácio Soares
Obrigado!