Mobile UX - Princípios Básicos

MOBILE UXPorquê Mobile?

@vsdteixeira! ! [email protected]

DESAFIO I

���2

���3

A empresa GUM tem um negócio de produção e venda de pastilhas elásticas Gourmet e quer um site móvel para o seu Produto PrimeGum. O site deve permitir:

1. Conhecer o produto

2. Obter informação sobre os pontos de venda

3. Registar para entrar no programa de fidelização

Desenhe no máximo 4 ecrãs para contemplar este caso.

BIBLIOGRAFIA

MOBILE FIRST Luke Wroblewsky

���4http://www.abookapart.com/products/mobile-first

Experiência MOBILE deve ser pensada e desenhada primeiro

���5

IDEIAS CHAVE

���6

Crescimento = OPORTUNIDADES

Limitações = FOCO

Capacidades = INOVAÇÃO

CRESCIMENTO

���7

NÚMEROS 2013“25% dos Portugueses que acedem à internet fazem-no

através de Smartphone”

���8MARKTEST, Bareme Internet 2013

“10% dos mesmos acedem utilizando um Tablet”

Em relação a 2012: Crescimento de 47% e 170%, respetivamente.

… EM TABELA

���9MARKTEST, Bareme Internet 2013

ACESSO 2012 2013 VARIAÇÃO

Computador 62.6 62.7 0%

Smartphone 17.0 25.0 47%

Tablet 3.7 10.0 170%

CURIOSIDADES

“Portugueses preferem ficar sem carro e sem TV do que sem Smartphone”

���10http://tek.sapo.pt & http://www.apdc.pt/

“62% não prescinde de ter o equipamento à mão enquanto janta e 19% leva-o para a cama”

Venda de smartphones cresce 25% em relação a 2012

CASO FixeAds

Entre Out 2012 e Mar 2013 aumento de 70% no tráfego através de Smartphones ou Tablets

���11http://www.dinheirovivo.pt/Buzz/Artigo/CIECO138459.html

7,3M de visitas através de dispositivos móveis em 6 meses

���12

(…) estamos a caminho de um novo paradigma da utilização da Internet em Portugal. O crescente número de smartphones e tablets que permitem uma experiência de navegação mais simples e divertida, abrem novas oportunidades ao mercado (…)

— Miguel Mascarenhas, CEO da FixeAds

CASO FixeAds

���13

§§ §

EM SUMA

Crescimento = OPORTUNIDADES

���14

LIMITAÇÕES

���15

TAMANHO DE ECRÃ1024x768 vs. 320x480 = - 80%!

���16

We can always choose to perceive things differently. You can focus on what's wrong in your life, or you can focus on what's right.

— Marianne Williamson

TAMANHO DE ECRÃÉ necessário chegar a um compromisso entre objetivos de utilizador e necessidades do negócio

���17

…para saber, temos de conhecer os nossos utilizadores!

Será que todos aqueles links são mesmo úteis?

EXEMPLO FlyTAP

���18

EXEMPLO FlyTAP

���19

§ §

PERFORMANCEVelocidade das ligações é uma preocupação em Mobile

���20

Se a experiência Mobile for “rápida e leve”, a experiência Desktop ganha com isso

“Reduzir Requests e tamanhos de ficheiro”

“Aproveitar as oportunidades oferecidas pelo HTML5, CSS3, etc.”

https://developers.google.com/speed/articles/mobile

Because the cost of slower performance increases over time and persists, we encourage site designers to think twice about adding a feature that hurts performance if the benefit of the feature is unproven.

PERFORMANCE - GOOGLE SEARCHEm 2009 decidiram introduzir atrasos propositados

���21

Atraso de 500ms causou perda de 20% do tráfego e fez com que utilizadores demorassem a voltar, mesmo depois de reposto o estado normal.

http://googleresearch.blogspot.pt/2009/06/speed-matters.html

e.g., Consultar o email enquanto cozinho

84% em casa, 74% em filas, 64% no trabalho, etc.

CONTEXTO DE UTILIZAÇÃO

Utilização típica em rajadas curtas

���22

Em qualquer lugar, a qualquer hora

Partilhar algo, consultar email, novos Tweets, etc.

CONTEXTO DE UTILIZAÇÃO

Maior parte do tempo temos: 1 Olho & 1 Polegar

���23

§

Temos de criar interações rápidas e simples

Eliminar elementos de GUI* desnecessários

Abraçar as NUI**

*

*Graphical User Interfaces ** Natural User Interfaces

EM SUMA

���24

Limitações = FOCO

CAPACIDADES

���25

TOQUE /MULTITOQUEO toque introduz uma série de possíveis combinações que permitem inovar e simplificar a UI

���26

§ §

Pull para atualizar

Swipe para mais opções

Orientação do dispositivo /AcelerómetroPermite detetar o posicionamento do equipamento

���27

§ §

Orientação do dispositivo /Acelerómetro & GiroscópioTambém permite detetar alterações na taxa de movimento dos dispositivos

���28

Tilt scrolling Gesto “Shake”

Navegar em panoramas com 360 graus de movimento (Giroscópio)

Orientação do dispositivo /Acelerómetro & GiroscópioSaiba sempre para que lado fica o Norte

���29

§

Possibilidade: Gravar localização de algo e usar a bússola para apontar nessa direção

First world Problem: Onde é que deixei o meu carro?

http://blogs.adobe.com/cantrell/archives/2012/03/accessing-the-accelerometer-and-gyroscope-in-javascript.html

LOCALIZAÇÃODeteção da localização permite situar-nos num mapa rapidamente e com elevada precisão

���30

§ §

Sugestões de locais baseados na localização atual

Pesquisar “algo” perto de mim

CAPTURA DE IMAGEM, VÍDEOS E ÁUDIOAcesso às câmaras e micro para upload de imagem ou vídeo capturados no momento

���31

HTML Media Capture - Suportado em iOS e Android (6.0+ e 3.0+)

http://mobilehtml5.org/

Partilhar Fotos ou Áudio e/ou Vídeo

Submeter ficheiro áudio

OUTRAS CAPACIDADES

Ligações entre disposivos por Bluetooth

���32

Proximidade dos dispositivos a objetos físicos

Deteção do nível de luz ambiente

NFC: Near Field Communication

EM SUMA

���33

Capacidades = INOVAÇÃO

A SEGUIR…ORGANIZAR INFORMAÇÃO

���34

POSSIBILITAR AÇÕES

FACILITAR O INPUT

PLANEAR O LAYOUT

MOBILE UX

@vsdteixeira! ! [email protected]

PRINCÍPIOS PARA DESENVOLVIMENTO MOBILE

ORGANIZAR INFORMAÇÃO

���36

ALINHAR COM USE CASES MOBILE

���37

Check-in/ Status Quero manter-me informado sobre algo que muda regularmente

Explorar/ Jogar Quero uma distração para matar tempo

Editar/ Criar Preciso de concluir uma tarefa agora, não pode esperar

Pesquisar/ Descobrir Preciso da resposta a algo agora

ALINHAR COM USE CASES MOBILE

���38http://xkcd.com/773/

CONTEÚDO ANTES DA NAVEGAÇÃO

���39

Normalmente os utilizadores querem ver conteúdo imediatamente e não o sitemap

§Usar header simples com identificação do site e eventual link para Menu

NAVEGAÇÃO RELEVANTE E BEM POSICIONADA

���40

Um menu no footer é importante para “encaminhar os utilizadores”

Não repetir o menu de topo; Usar uma âncora para o menu do footer e um botão para “voltar ao topo”

Usar opções de navegação contextual se aplicável e quando necessário (e.g., Ver mais…)

NAVEGAÇÃO RELEVANTE E BEM POSICIONADA

���41

§ §

No fim da página temos para onde ir

Ir mais fundo neste tema

REDUZIR NAVEGAÇÃO AO MÍNIMO NECESSÁRIO

���42

Não precisamos de botão “Back” em websites mobile

Evitar barras de menu fixas. Especialmente no fundo do ecrã

§

Ocupam o espaço ad eternum

Causam erros se pressionarmos botões do browser por engano

MANTER O FOCO

���43

REMINDER: Maior parte do tempo temos: 1 Olho & 1 Polegar

Temos apenas a atenção parcial do utilizador

Designs claros e focados nos objetivos do utilizador ajudam a completar ações

MANTER O FOCO

���44

§

Só o que interessa para fazer o post

§

Prevêem espaço ocupado pelo teclado

EM SUMA

���45

Alinhar com comportamentos dos utilizadores

Enfatizar conteúdo antes da navegação

Providenciar opções relevantes para explorar e descobrir

Manter o foco nos objetivos dos utilizadores

POSSIBILITAR AÇÕES

���46

ALVOS ADEQUADOS

���47

Os dedos são apontadores imprecisos

Pontas dos dedos: 8-10mm

* http://www.lukew.com/ff/entry.asp?1085

Existem guidelines sobre tamanhos adequados*

ALVOS ADEQUADOS

���48

Alvos bem posicionados, espaçados, e dimensionados ajudam a tocar com confiança

§ § §

GoodBetterBad

POSICIONAMENTO DE AÇÕES

���49

Regra geral smartphones: Optimizar para Destros que utilizam o polegar para interagir

Ações comuns nas áreas acessíveis

Ações destrutivas nas áreas mais difíceis de aceder

Mais info em: http://www.lukew.com/ff/entry.asp?1649

LINGUAGEM DO TOQUE

���50

Conhecer os gestos comuns ajudam a optimizar a interface para NUI *

http://www.lukew.com/ff/entry.asp?1071

Press

Drag Flick

Spread Pinch

Tap

LINGUAGEM DO TOQUE

���51

Ainda há espaço para inovação

http://www.lukew.com/ff/entry.asp?1071

NÃO ESQUECER “OS OUTROS”

���52

Os dispositivos híbridos ou sem capacidade de toque ainda existem

É preciso definir estados :focus e :hover em todos os nossos botões, links e menus

EM SUMA

���53

Assegurar tamanho e posições adequadas dos alvos

Estar familiarizado com gestos comuns em mobile e como se alinham com os objetivos dos utilizadores

Não esquecer dispositivos sem toque e híbridos

FACILITAR O INPUT

���54

ENCORAJAR INPUT

���55

As pessoas querem usar os seus dispositivos para introdução

Dispositivos modernos fornecem uma oportunidade para obter input diverso dos utilizadores

REMINDER: Podemos simplificar a introdução de informação recorrendo à Localização, Orientação do dispositivo, Microfone, Câmaras, etc.

LABELS EM MOBILE

���56

Labels no topo funcionam melhor em Mobile

§

Leitura e input sequenciais

Permitem usar toda a largura do ecrã

LABELS EM MOBILE

���57

Labels dentro dos campos de input podem poupar espaço… mas existem mais riscos e cuidados a ter

§

Não podem tornar-se parte das resposta

Não podem ser confundidos com a resposta

Estão ausentes depois de se ter introduzido a resposta

TIPOS DE INPUT E MÁSCARAS

���58

Tipos de input standard podem ajudar bastante.

checkbox radio password

<input type=“”>

file submit text

<select><option>…

TIPOS DE INPUT E MÁSCARAS

���59

Novos tipos de input HTML5 podem ajudar ainda mais em mobile

<input type = “”>

url email number

Fornece teclados com defaults para o tipo de dados a ser introduzidos

TIPOS DE INPUT E MÁSCARAS

���60

As várias máscaras dos nossos campos de input

Mascarar inputs com caracteres especias pode ser útil e evitar erros

É preciso corresponder às expectativas que introduzimos

CONTROLOS CUSTOM

���61

Defaults inteligentes e controlos menos “tap intensive” e mais próximos das mecânicas naturais dos utilizadores

Spinners, Date-pickers, etc.

Não esquecer o :focus e :hover para estes controlos

CONTROLOS CUSTOM

���62

Default inteligente. Encomendar 1 item é o mais convencional

Em vez de ter de introduzir um número basta pressionar a seta correspondente

CONTROLOS CUSTOM

���63

vs.§

LAYOUTS PARA TIPOS DE INTRODUÇÃO

���64

Considerar 3 possíveis cenários para introdução

Sequência de questões relacionadas

Atualizações não-lineares

Introdução contextualizada (comentários, etc)

LAYOUTS PARA TIPOS DE INTRODUÇÃO

���65

Sequência de questões relacionadas

Ser eficiente nestes casos e cortar o dispensável

§

LAYOUTS PARA TIPOS DE INTRODUÇÃO

���66

Atualizações não-lineares

Nem sempre queremos editar todos os campos

Interface mais limpa e intuitiva§

LAYOUTS PARA TIPOS DE INTRODUÇÃO

���67

Introdução contextualizada

Manter o contexto ajuda a não ter de recordar

§

USAR AS CAPACIDADES DISPONÍVEIS

���68

Localização, Orientação do dispositivo, Microfone, Câmaras, etc

Cada vez mais destas capacidades ficam disponíveis para utilizar na Web

EM SUMA

���69

Não limitar possibilidade de contribuir em Mobile

Usar labels optimizadas para mobile em forms

Simplificar o input em mobile com input types adequados e máscaras

Escolher o layout certo dependendo do tipo de contributo esperado

Aproveitar oportunidades para utilizar as capacidades Mobile para obter input

PLANEAR O LAYOUT

���70

ACEITAR A MUDANÇA

���71

O mundo mobile muda um pouco todos os dias

Devemos abraçar a perspectiva de mudança e adaptar os nossos designs o melhor que soubermos

META VIEWPORT

���72

Esta simples linha é o primeiro passo para layouts mobile eficientes

<meta name=“viewport” content=“width=device-width”>

Com esta linha asseguramos consistência entre diversos dispositivos com densidades de ecrã diferentes

A largura do nosso site fica automaticamente optimizada para o dispositivo em que está a ser vista

DIFERENTES DENSIDADES DE ECRÃ

���73

Densidade de ecrã: Número total de pixels disponíveis dentro de dimensões físicas específicas

Usar CSS3 sempre que possível em vez de imagens

Servir imagens com o dobro da resolução para dispositivo com maior densidade de ecrã

Tip: Usar media-queries para servir imagens diferentes para dispositivos diferentes

LAYOUTS FLUÍDOS E RESPONSIVE

���74

Fluídos - Que permitem alterar as suas dimensões mínimas e máximas

Responsive - Adaptar o design aos dispositivos criando experiências diferentes

Reposicionar elementos, alterar dimensões de imagens, remover ou adicionar elementos

LAYOUTS FLUÍDOS E RESPONSIVE

���75

Fluído

http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

LAYOUTS FLUÍDOS E RESPONSIVE

���76

Fluído

LAYOUTS FLUÍDOS E RESPONSIVE

���77

Responsive

http://www.abookapart.com/products/responsive-web-design

DIFERENTES DISPOSITIVOS, EXPERIÊNCIAS DIFERENTES

���78

Características únicas de cada tipo de dispositivos

Postura do utilizador

Método primário de input

Tamanho médio dos ecrãs

REDUZIR COMPLEXIDADE

���79

REMINDER: Reduzir é a melhor aproximação para desenho de layouts em Mobile

Reduzir complexidade é bom para toda a gente

EM SUMA

���80

Aceitar o ritmo de mudança

Deixar os browsers Mobile saber que pensámos neles

Criar designs flexíveis, fluídos e responsive

Saber onde traçar a linha entre experiências em diferentes dispositivos

Cortar o que é supérfluo

CONCLUINDO…

���81

���82

Aproveitar o crescimento Mobile

Abraçar limitações para focar e prioritizar os serviços

Usar capacidades Mobile para inovar na experiência

Pegar no que sabemos sobre Web Design e pensar de forma diferente acerca de Organização em Mobile, Ações, Input, e Layout

DICAS DO LUKE

���83

Testar os serviços em dispositivos reais em vez de simuladores

Criar protótipos o mais cedo possível

Peguem no que sabem e ponham as mãos na massa! Não precisam saber tudo para começar…

EM DISCUSSÃO…

���84

Nativos vs. soluções Web Mobile

Sites separados ou Responsive?

DESAFIO II

���85

���86

A empresa GUM tem um negócio de produção e venda de pastilhas elásticas Gourmet e quer um site móvel para o seu Produto PrimeGum. O site deve permitir:

1. Conhecer o produto

2. Obter informação sobre os pontos de venda

3. Registar para entrar no programa de fidelização

Desenhe no máximo 4 ecrãs para contemplar este caso.

http://www.slideshare.net/vsdteixeira

MOBILE UX

@vsdteixeira! ! [email protected]