Embed Size (px)
Citation preview
Usabilidade em Aplicações MóveisBRUNO FIGUEIREDO
the_ml
Europa: 90.9% têm telemóvel41% a nível Mundial (2,67 biliões)
██ 120% > ██ 100-120% ██ 80-100% ██ < 80%
wikipedia
EntusiastasHobby
ProfissionaisTrabalho
ConsumidoresVida
Adaptado de Bill Moggridge e Jan Borchers
Evolução do Mercado
BarrocoSweet Spot
TelemóveisNormais
Telefone, SMS, Internet
SmartPhones
AplicaçõesPDAsTeclado,
Táctil
Distribuição de Tiposde Telemóvel
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
Secção
Secção
SecçãoSecção
Secção
Home
Núcleo Central
Home
Secção Detalhe
Secção
Secção Detalhe
Secção
Secção
Hierarquia Simples
Fluxo de CliquesClickstream
Brian Fling
Home
Cabeçalho
Navegação
Rodapé
ConteúdoSecção 2
ConteúdoSecção 1
Secção 1
Cabeçalho
Navegação
Rodapé
ConteúdoSecção 2
Cabeçalho
Navegação
Rodapé
Conteúdo
Secção Aux.
Cabeçalho
Navegação
Rodapé
Conteúdo
Estrutura Recomendada
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
m.site.com ou site.mobi em vez de www.site.com/mobile
• Versões móveis especializadas
• Estruturas simples, não muito profundas
• Conteúdo útil e simplificado em cada página
não só navegação
• Optimizar a degradação do conteúdo
1
2
3
4
5
Boas Práticas
• Estruturar links de forma vertical
• Evitar introduções repetitivas de dados
passwords são de introdução difícil
• Simplificar formulários (com botões claros)
• Disponibilizar atalhos
• Minimizar uso da (pouca) largura de banda
6
7
8
9
10
Aplicações Móveis
Tim Caynes
Principais Plataformas Móveis
Symbian65%
Windows Mobile12%
BlackBerry11%
iPhone7%
liewcf
TecladoNuméricoe Joystick
StarrGazr
Semi-Tecladoe Bola
KhE 龙
Teclas Cursoras
Crouching Donkey
Ecrã TáctilMulti-toque
Ecrã Táctil e Teclado Completo
Ecrãs Estáticos Sucessivoscom animações subtis
Dois PainéisLista + 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
toques com caneta, alvos pequenos; com dedos, grandes
Mimetizar aspecto 3D para ecrãs tácteis
• Minimizar introduções de dados
• Optimizar a apresentação do conteúdo
dar mais relevo ao que está a ser manipulado/visualizado
• Disponibilizar atalhos para quem é experiente
1
3
4
5
2
