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

bruno.figueiredo@usabilidade.org

Obrigado

gailjadehamilton