Usabilidade em Aplicaes Mveis

BRUNO FIGUEIREDO

the_ml

Europa: 90.9% tm telemvel

41% a nvel Mundial (2,67 bilies)

120% > 100-120% 80-100% < 80%

wikipedia

Evoluo do Mercado

Entusiastas
Hobby

Profissionais
Trabalho

Consumidores
Vida

Sweet Spot

Barroco

Adaptado de Bill Moggridge e Jan Borchers

Distribuio de Tipos de Telemvel

Smart Phones
Aplicaes

PDAs
Teclado, Tctil

Telemveis Normais
Telefone, SMS, Internet

dotMobi

Sites Mveis

moritz

Resolues e Formatos de Ecr

dotMobi

Evoluo das Linguagens Mveis

Wikipedia

Web Normal, verso Mvel

Auntie P

Web Mvel

Principais Browsers Mveis

Pocket Internet Explorer

Opera Mobile

Safari Mobile

Ncleo Central
Seco

Seco
Home

Seco

Seco

Seco

Hierarquia Simples
Seco
Seco Home Seco Seco Detalhe

Detalhe

Seco

Fluxo de Cliques
Clickstream

Brian Fling

Estrutura Recomendada
Home Cabealho Navegao Contedo Seco 1 Contedo Seco 2 Rodap Contedo Navegao Rodap Seco 1 Cabealho Seco 2 Cabealho Contedo Contedo Navegao Rodap Seco Aux. Cabealho

Navegao Rodap

Degradao Optimizada

Normal

Sem Folhas de Estilo

Links Horizontais e Breadcrumbs

Optimizados para deslocaes verticais

Breadcrumbs s so teis para mais de 3 nveis

Formulrios

Lista com Teclas de Atalho

O Nmero Mgico
(+ ou 2)
George Miller

Boas Prticas
1

Endereos fceis de introduzir

m.site.com ou site.mobi em vez de www.site.com/mobile

2 3 4

Verses mveis especializadas

Estruturas simples, no muito profundas

Contedo til e simplificado em cada pgina
no s navegao

Optimizar a degradao do contedo

Boas Prticas
6
7

Estruturar links de forma vertical Evitar introdues repetitivas de dados

passwords so de introduo difcil

Simplificar formulrios (com botes claros) Disponibilizar atalhos Minimizar uso da (pouca) largura de banda

10

Aplicaes Mveis

Tim Caynes

Principais Plataformas Mveis

Symbian 65%

Windows Mobile 12%

BlackBerry 11%

iPhone 7%

Teclado Numrico e Joystick

liewcf

Semi-Teclado e Bola

StarrGazr

Teclas Cursoras

KhE

Ecr Tctil Multi-toque

Crouching Donkey

Ecr Tctil e Teclado Completo

Ecrs Estticos Sucessivos

com animaes subtis

Dois Painis
Lista + Detalhe

Olho de Peixe

Lente com Distoro

Texto Preditivo

Restrio de Disponibilidade

Filtros Progressivos

Apresentao Visual Rpida em Srie

50 milisegundos
Robert Spencer

Boas Prticas
1

Optimizar a interaco para o dispositivo alvo

toques com caneta, alvos pequenos; com dedos, grandes

2 3 4

Mimetizar aspecto 3D para ecrs tcteis

Minimizar introdues de dados

Optimizar a apresentao do contedo
dar mais relevo ao que est a ser manipulado/visualizado

Disponibilizar atalhos para quem experiente

Obrigado
bruno.figueiredo@usabilidade.org

gailjadehamilton