368
Mobile UX A experiência como vantagem competitiva

Mobile UX - MobileConf 2014 - RJ

Embed Size (px)

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.

Citation preview

!!!!!!!!!!!!!!!!

Mobile UX A experiência como

vantagem competitiva

@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

Projetos UX Mobile

Nunca esquecer de duas

palavras mágicas no

mundo móvel:

Uma delas te rouba tempo:

A outra te faz ganhar tempo

Entretenimento

Utilidade

Como são as experiências dos seus clientes?

O que os clientes esperam?

felicidade

felicidade

X

felicidade

X

Isso é felicidade

Felicidade…

experiência perfeita

felicidade

e o que as empresas

esperam?

Mulher com notebook em sinal de ok

Todos querem o melhor osso…

Cachorrinho caregando um enorme osso.

mas como?

com qualidade...

com uma experiência de

qualidade...

Acertando

o tiro certo

no alvo certo

Realidade nos projetos digitais:

Para onde vamos?

http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg

Livro: O Tiro e o Alvo

Causo 1

!

Precisamos

Construir uma mesa.

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 é curto, então, mãos à obra!

Livro: O Tiro e o Alvo

Livro: rework 37 Signals

Conclusão? !

Retrabalho, desgaste com o cliente e diminuição do lucro.

É 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

Afinal, o que é eXperiência do Usuário (UX) ?

eXperiência do Usuário (UX) é a qualidade da experiência que uma

pessoa tem ao interagir com algo projetado.

uxnet.org

Experiências são uma

!

!

!

!

!

nova oferta econômica.

Experiências que fazem esquecer o mundo a sua volta

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

X

http://semanticstudios.com/publications/semantics/000029.php

http://semanticstudios.com/publications/semantics/000029.php

Mas como são nossas experiências

no mundo digital?

Como os usuários são vistos?

Para alguns desenvolvedores e designers, é assim

que os usuários deveriam ser

tratados…

Usuário bom é usuário m…

Usuário bom é usuário m…

Resumo da ópera

E o resultado não poderia ser diferente:

experiência ruim

= resultado pior ainda

Estratégia

= “uma conspiração

para o sucesso”

Como, na maioria das vezes, os projetos Web são

desenvolvidos?

Cliente

Atendimento

Cliente ??

?? ??

Atendimento

v

Cliente

Atendimento

Designer/Arquiteto

?? ??

v

Cliente

Atendimento

Designer/Arquiteto

v

Cliente

Atendimento

Designer/Arquiteto??

?

v

Cliente

Atendimento

Designer/Arquiteto

OKOK

v

Cliente

Designer gráfico

Atendimento

Designer/Arquiteto

??

?#%$&*@#$%$#

v

Cliente

Designer gráfico

Atendimento

Designer/Arquiteto

???

v

Cliente

Designer gráfico

Atendimento

Designer/Arquiteto

???

v

Cliente

Designer gráfico

Atendimento

Designer/Arquiteto???

v

Cliente

Designer gráfico

Atendimento

Designer/Arquiteto???

v

Cliente

Designer gráfico

Atendimento

Designer/ArquitetoOK

OK

v

Cliente

Designer gráficoFront End

Atendimento

Designer/Arquiteto

? ?

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

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

<% - - %>

#%$&*@#$%$#

???

Além dos problemas de comunicação, um outro grande

problema é:

Marte Objetivos e metas da empresa

Vênus Necessidades dos usuários

Desafio 2:

Como atender ao mesmo tempo os objetivos e as necessidades?

Objetivos e metas do 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).

• ...

Reais necessidades

dos usuários

• Qualidade. 

• Simplicidade.

• velocidade.

• Utilidade.

• Usabilidade.

• Acessibilidade.

• Portabilidade.

• Bom custo x benefício.

• Resolver seu problema.

• ...

Objetivos e metas do projeto

Reais necessidades

dos usuários

a busca do equilíbrio

empresa

usuários

Objetivos e metas do

projeto Necessidades dos

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

Observação = Descoberta

desafio 1:

identificar objetivos e necessidades…

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

“Work is never finished,

only abandoned.” Paul Valéry

Mas, na busca por soluções para os problemas, o que

maioria dos sites faz?

Ctrl + C à Ctrl + V para quase tudo...

Resultado:

replicamos tudo sem questionamentos...

!

Código de barras

X

CAPTCHA

Artigo CAPTCHA: herói ou vilão?

!http://acessodigital.net/art_captcha-heroi-ou-vilao.html

Captcha http://sam.zoy.org/pwntcha/

Captcha http://sam.zoy.org/pwntcha/

X

Captcha (solução inacessível e insegura)

(http://www.webvisum.com/en/main/download)

Menu DropDown

X

Clique aqui!

Clique aqui!

“Clique aqui”, “Saiba mais”, “veja

Mais”… 41.700.000 respostas

para “clique aqui” no Google.

Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)

Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)

X

Ou ainda as mais recentes modinhas como paralax,

modal, one single page , etc…

Should I use carousel?

http://shouldiuseacarousel.com !

Exemplo: !

King Host

http://www.kinghost.com.br/

Hamburger or not?

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

Mas por quê?

Porque está na moda, todo mundo usa, porque não temos tempo e

somos reativos...

!

REWORK: Business book from 37signals

E porque somos preguiçosos…

Qual é o contexto do Mobile?

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4

crescimento = oportunidade

http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36

no Brasil

1

Os smartphones são indispensáveis no

cotidiano

2 !

Os smartphones transformaram o comportamento

do consumidor

3 Os smartphones ajudam os usuários a navegar pelo mundo

Mas cuidado...

4 !

Os smartphones mudam o modo como os consumidores

fazem compras

5 !

Os smartphones ajudam os anunciantes

a entrarem em

contato com os clientes

http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg

Estatísticas Brasil

GIFanimado...

No mundo

Vários GIFsanimados...

http://pt.slideshare.net/wearesocialsg/social-digital-mobile-around-the-world-january-2014

mitos = verdades

X

mitos

mitos

X

mitos

mitos

mitos

V

mitos do mundo mobile

difícil

é caro

limitador

é demorado

Não atende as pessoas idosas

Muito menos as pessoas com deficiência

é irrelevante

Será?

as pessoas não vão se registrar via mobile

não vão comprar via mobile

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18

não vão criar conteúdo, fazer

reviews, dar opinião, etc.

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

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

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.

capacidades/vantagens do mobile

!GPS

Acelerômetro

Giroscópio

Bluetooth

Bluetooth

!

Áudio, vídeo e imagem

NFC

Sensores multitoque

Em qualquer hora e local.

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

Integração com dispositivos externos…

Novos clientes…

https://www.youtube.com/watch?v=4UoE-87I-Hg

Boa compatibilidade entre navegadores

Mobile e HTML5

Atualizações frequentes...

limitações/restrições do mobile

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

@lukew

‘Desktop is like “diving”…

…while mobile is like “snorkling.”’ by Hinman at Nokia

http://www.slideshare.net/Rachel_Hinman

O que todos quando

mergulham desejam?

@lukew

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

tela grande

energia

rede consistente

teclado

mouse

cadeira

mesa

caneca de café

@lukew

@lukew

mobile

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

Como o Luli disse no Digitalks no Rio:

“Nesse mundo Mobile, somostodos daltónicos e sofremos

do Mal de Parkinson”

https://twitter.com/lukew/media

https://twitter.com/lukew/media

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

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…

Flickr desktop 60 opções de menu...

@lukew

Flickr mobile 7 opções de menu...

Less is more...

Restrições são boas para o

design, pois te forçam a

priorizar, a manter o foco

mas cuidado…

No ponto.

Os detalhes do comprador não podem

ser visualizados na versão mobile.

Como anda a qualidade dos

nossos sites nas versões desktop?

Será?

Uma breve avaliação de conhecidos sites de

notícias sobre TI

Independente do caminho escolhido

deve-se…

Mobile First

Luke Wroblewski

Livro: http://www.abookapart.com/products/mobile-first

O Mobile First veio para tirar

os sites Desktop

do CTI

SIMPLICIDADE

Paradoxo da escolha

Elimine da interface itens que não

sejam extremamente

necessários...

Desktop first!

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

Mobile First!

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

UX Alguns problemas

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.

Inventário de Conteúdo

Taxonomia

Personas

Storyboard

Casos de Uso

Caso de uso

Benthmarking

Fluxos

protótipo

protótipo navegável…

Quando combinado com metodologias de

desenvolvimento, os entregáveis produzidos pelos designers

podem gerar um grande desperdício de tempo.

LEAN

UX

http://www.slideshare.net/uxconsulting/iaxil-lunch-talk-lean-ux

Não é uma UX preguiçosa,

mas é sobre minimizar desperdícios.

!Dev.!Prod.

Processos!

Design Pesquisa

Pessoas

!!

!!!

Startup

Negócios

!

UX!

Agile!

Lean

LEAN

Vem da

Lean Startup (Eric Ries)

Só uma bala na agulha…

Lean Starput (Eric Ries)

Quer uma boa interface? Teste…

First clic test.

(um tipo de teste rápido)

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.

ESPN Brasil– abril 2010

X

• Nada de (re)design, o caminho é o co-design

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

-—

$%ˆ*W&E&%*@ˆ@#ˆ*$

Google X:

- Gere 8 versões para resolver

o problema em 5 minutos

[email protected] facebook.com/mestresbrasil (21) 9 9925-5404 - @horaciosoares Skype: horacio.soares

Horácio Soares

Obrigado!