Usabilidade em Aplicações Móveis
BRUNO FIGUEIREDO
the_ml
Europa: 90.9% têm telemóvel
41% a nível Mundial (2,67 biliões)
██ 120% > ██ 100-120% ██ 80-100% ██ < 80%
wikipedia
Evolução do Mercado
Entusiastas
Profissionais
Consumidores
Hobby
Trabalho
Vida
Sweet
Spot
Barroco
Adaptado de Bill Moggridge e Jan Borchers
Distribuição de Tipos
de Telemóvel
Smart
Phones
Aplicações
PDAs
Teclado,
Táctil
Telemóveis
Normais
Telefone, SMS, Internet
dotMobi
Sites Móveis
moritz™
Resoluções e Formatos de Ecrã
dotMobi
Evolução das Linguagens Móveis
Wikipedia
Web Normal, versão Móvel
Auntie P
Web Móvel
Principais Browsers Móveis
Pocket Internet
Explorer
Opera Mobile
Safari Mobile
Núcleo Central
Secção
Secção
Secção
Home
Secção
Secção
Hierarquia Simples
Secção
Detalhe
Secção
Home
Secção
Secção
Secção
Detalhe
Fluxo de Cliques
Clickstream
Brian Fling
Estrutura Recomendada
Home
Cabeçalho
Secção Aux.
Navegação
Cabeçalho
Conteúdo
Secção 1
Conteúdo
Secção 2
Secção 1
Secção 2
Cabeçalho
Conteúdo
Conteúdo
Navegação
Cabeçalho
Rodapé
Navegação
Conteúdo
Navegação
Rodapé
Rodapé
Rodapé
Degradação Optimizada
Normal
Sem Folhas de
Estilo
Links Horizontais e Breadcrumbs
Optimizados para deslocações verticais
Breadcrumbs só são úteis para mais de 3 níveis
Formulários
Lista com Teclas de Atalho
O Número Mágico
(+ ou – 2)
George Miller
Boas Práticas
• Endereços fáceis de introduzir
1
m.site.com ou site.mobi em vez de www.site.com/mobile
• Versões móveis especializadas
2
• Estruturas simples, não muito profundas
3
• Conteúdo útil e simplificado em cada página
4
não só navegação
• Optimizar a degradação do conteúdo
5
Boas Práticas
• Estruturar links de forma vertical
6
• Evitar introduções repetitivas de dados
7
passwords são de introdução difícil
• Simplificar formulários (com botões claros)
8
• Disponibilizar atalhos
9
• Minimizar uso da (pouca) largura de banda
10
Aplicações Móveis
Tim Caynes
Principais Plataformas Móveis
Symbian
65%
Windows Mobile
12%
BlackBerry
11%
iPhone
7%
Teclado
Numérico
e Joystick
liewcf
Semi-Teclado
e Bola
StarrGazr
Teclas Cursoras
KhE 龙
Ecrã Táctil
Multi-toque
Crouching Donkey
Ecrã Táctil e Teclado Completo
Ecrãs Estáticos Sucessivos
com animações subtis
Dois Painéis
Lista + Detalhe
Olho de Peixe
Lente com Distorção
Texto Preditivo
Restrição de Disponibilidade
Filtros Progressivos
Apresentação Visual Rápida em Série
50 milisegundos
Robert Spencer
Boas Práticas
• Optimizar a interacção para o dispositivo alvo
1
toques com caneta, alvos pequenos; com dedos, grandes
2
Mimetizar aspecto 3D para ecrãs tácteis
• Minimizar introduções de dados
3
• Optimizar a apresentação do conteúdo
4
dar mais relevo ao que está a ser manipulado/visualizado
• Disponibilizar atalhos para quem é experiente
5
Obrigado
[email protected]
gailjadehamilton