A Usabilidadeem software Educativo

PRINCÍPIOSPRINCÍPIOS

E E

TÉCNICASTÉCNICAS

Usabilidade em Software Educativo

O termo engenharia da

usabilidade passou a fazer parte do

vocabulário dos programadores e

designers gráficos, sendo aplicado a

uma área de estudo com muitos anos

que é a interacção homem-máquina,

área esta que surgiu com as

primeiras interfaces gráficas.

Num projecto de software a usabilidade

deve ser uma preocupação constante

durante todo o processo de

desenvolvimento.

Deve ser vista a montante (o

desenho da interface deve ser baseado

em princípios heurísticos, ou seja, as

regras definidas);

E a jusante (testes de campo

efectuados com os utilizadores,

validando ou não os princípios

heurísticos) do processo de

desenvolvimento.

Princípios

Usar /Assegurar

Etiquetas ATL para todas as imagens;

Texto negro em fundo branco;

Cores de fundo planas e/ou texturas subtis;

Texto de cor que possa ser impressa;

Menu de navegação em localização

consistente;

Localizações familiares para barras de

navegação;

Design adequado evitando scroll horizontal;

Eixo de simetria, centrando texto numa

página;

Imagem semi-escondida em fundo de página

a fim de assegurar o scroll vertical.

Evitar

Etiquetas ALT reduzidas;

Texto estático a azul ou sublinhado;

Negrito ou maiúsculas para texto longo;

Obrigar o utilizador a fazer scroll para

encontrar informação importante;

Usar travessões para separar

horizontalmente diferentes tipos de

conteúdos;

Alternar frequentemente entre texto

centrado e alinhado à esquerda. A

maior parte do texto deve estar

alinhado à esquerda;

Os dez principais

erros que,

segundo Jacob

Nielsen, podem

encontrar-se

num site

Importância

Pequena

Páginas com barras de scrol

Média• Frames

• Páginas órfãs

Grave • URLs complexas

• Falta de suporte na navegação

• Utilização de cores não

Standard para os links

Muito grave• Usar tecnologia de ponta

• Movimento de texto e animações em loop

• Informação desactualizada

• Tempo de download elevado

Início

Multimédia e Educação : Páginas na Web

Planificar o Site Mapa (flowchart)

Identificação de cada página

Ligações entre as páginas

Estrutura

Narrativa (storyboard) Esboço da página Descrição dos elementos

(texto, imagem, som) Características (tipos,

formatos)

Pensar as Dimensões

Dimensões de écran de 17' : 800x600 Dimensões seguras do écran : 700x450

Topo: width: 18.52cm/ 700px height: 2.64cm/ 100px

Estabelecer uma Hierarquia Visual

Utilizadores procuram padrões Ajudar o utilizador compreender a

organização Destacar o importante

Definir o Meio

Écran: textos concisos; gráficos adaptados;

Papel: textos extensos; menos elementos gráficos;

Dirigir o Olhar

Seguir fluxo de leitura (esquerda-direita; cima-baixo)

Criar contrastes visuais; Evitar páginas insípidas Destacar texto/imagens do fundo

Evitar Distracções Visuais

Fundos muito fortes (usar texturas naturais, cores pastel)

GIF animados, sobretudo cíclicos

Manter a Consistência

Consistência não é monotonia Manter títulos, barras de navegação,

fundos Tornar as variações significativas

Como Maximizar a LEGIBILIDADE de um Texto

Legibilidade do interface gráfico Texto conciso e preciso Escrita e fontes simples Parágrafos frequentes Informação arrumada Simplicidade estrutural Recurso à exemplificação

Organizadores de texto Subtítulos apelativos

(localizadores de informação)

Composição gráfica Mancha gráfica

agradável e repousante Gestão equilibrada:

Espaçamento Entrelinhamento Espaços em branco Caixas

Elementos morfológicos de uma página Web Fácil navegação Estrutura inteligível e

legível

Visão - Leitura

A utilização de Tabelas, Cabeçalhos, Negrito, Gráficos e Marcadores (Bullets) facilita a leitura.

Formatar o texto em colunas reduz o movimento dos olhos diminuindo a fadiga da visão.

Fontes - Atributos

Evitar o uso de diversas fontes numa mesma interface;

Utilizar itálico, negrito, sublinhado (com moderação); Fontes "sans serif" oferecem melhor capacidade de

leitura que fontes "serif“.

Times New Roman (serif) Arial (sans serif)

Não chega possuir uma homepage na Internet. É preciso transformá-la num local apelativo, informativo e dinâmico. A Web conquistou já um papel de destaque na comunicação entre os seres humanos.

Não chega possuir uma homepage na Internet. É preciso transformá-la num local apelativo, informativo e dinâmico. A Web conquistou já um papel de destaque na comunicação entre os seres humanos.

Texto Alinhar os textos à esquerda;

Alinhar os textos à esquerda ("left justified").

Qualquer outra opção (centralizado ou alinhado à direita) compromete a

velocidade de leitura, e aumenta o cansaço visual.

Alinhar os textos à esquerda ("left justified").

Qualquer outra opção (centralizado ou alinhado à direita) compromete a velocidade de leitura, e aumenta o cansaço visual.

Limitar os parágrafos; Deixar espaços entre cada parágrafo; Utilizar linguagem acessível e concisa; Utilizar texto em Negrito é um excelente recurso para destacar

elementos do texto; Evitar a utilização de texto em MAIÚSCULAS no corpo do texto

que contribuem para diminuir a velocidade de leitura.

Cor - Atributos

A leitura eficiente de um texto depende de um bom contraste entre a cor da fonte e do fundo;

A cor pode ser usada para codificação da informação, para atrair a atenção do utilizador e para realçar uma informação;

Usar a cor para agrupar elementos relacionados e utilizar no máximo 5 +/- 2 cores numa mesma interface;

Evitar as combinações verde/vermelho, azul/amarelo, verde/azul, vermelho/azul.

INSUPORTÁVEL Aceitável

Não basta mais possuir uma homepage na Internet. É preciso transformá-la em um efectivo canal de negócios, mesmo que este processo seja conduzido de forma lenta e gradual. Até mesmo em empresas consideradas conservadoras, a Web começa a conquistar um papel de destaque nos planos estratégicos.

Não basta mais possuir uma homepage na Internet. É preciso transformá-la em um efectivo canal de negócios, mesmo que este processo seja conduzido de forma lenta e gradual. Até mesmo em empresas consideradas conservadoras, a Web começa a conquistar um papel de destaque nos planos estratégicos.

Imagem

Formatos: *.jpeg; *.gif; *.png; GIF – 256 cores/ permite transparência; JPEG – 16.7 milhões de cores; Taxa de compressão para Web – 72 a 96dpi.

Conclusão

Escolher adequadamente: Fonte, tamanho, estilo;

Diferenciar títulos e subtítulos; Formatar parágrafos:

Comprimento e espaçamento das linhas; Alinhamento do texto de preferência à esquerda; Espaçamento dos caracteres;

Composição gráfica: Mancha gráfica agradável e repousante; Imagens (Figuras) com valor informativo e lúdico; Bom contraste entre texto e fundo.

INÍCIOINÍCIO

- Para maximizar a Legibilidade: