mobile ux - princípios básicos
DESCRIPTION
Princípios de Usabilidade para Desenvolvimento de Websites MóveisTRANSCRIPT
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
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
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.
