A Usabilidade em software Educativo

Apresentação em tema: "A Usabilidade em software Educativo"— Transcrição da apresentação:

1 A Usabilidade em software Educativo
PRINCÍPIOS E TÉCNICAS

2 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. 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. Num projecto de software a usabilidade deve ser uma preocupação constante durante todo o processo de desenvolvimento.

3 Princípios Usar /Assegurar Evitar 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;

4 Pequena Páginas com barras de scrol Os dez principais erros que, segundo Jacob Nielsen, podem encontrar-se num site 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 Importância Início

5 Multimédia e Educação : Páginas na Web
A escolha deste site Multimédia e Educação : Páginas na Web ( da autoria do professor José Paulo Leal, do Departamento de Ciência de Computadores da Faculdade de Ciências da Universidade do Porto, foi por nós escolhido pela sua simplicidade e pela eficácia da sua mensagem (mesmo considerando que a página contém alguns erros). Assim, decidimos escolher as principais regras para elaboração de um bom texto hipermédia. O site é, em si, bastante coerente, quer do ponto de vista dos conteúdos, quer do ponto de vista gráfico. Aproveitámos para apresentar alguns bons e maus exemplos de cada situação.

6 Planificar o Site Narrativa (storyboard) Mapa (flowchart)
Esboço da página Descrição dos elementos (texto, imagem, som) Características (tipos, formatos) Mapa (flowchart) Identificação de cada página Ligações entre as páginas Estrutura Consideramos um dos factores mais importantes a planificação do site (ou de qualquer outro conteúdo multimédia), quer do ponto de vista da sua estrutura topográfica (mapa do site) quer do ponto de vista da narrativa. Um site ou produto multimédia mal estruturado leva o utilizador a perder facilmente o interesse e/ou a paciência. A utilização de mapas de sites é importante na construção de páginas, permitindo uma navegação mais fácil.

7 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 Um dos grandes problemas que se encontram em alguns sites é a falta de planificação das dimensões. Especialmente tendo em conta a impressão. É um pormenor muitas vezes negligenciado por muitos construtores de conteúdos para a Web. É importante a planificação do site para as dimensões de ecrã mais pequenas e planificar igualmente a sua impressão.

8 Estabelecer uma Hierarquia Visual
Utilizadores procuram padrões Ajudar o utilizador compreender a organização Destacar o importante A utilização de padrões que permitam a criação de uma hierarquia visual é importante. A utilização de títulos, cabeçalhos, estilos, listas e tabelas tem uma importância muito grande na navegação e naa ajuda ao utilizador.

9 Definir o Meio Écran: Papel: textos concisos; gráficos adaptados;
textos extensos; menos elementos gráficos; É importante pensar logo de início no meio onde vamos publicar o nosso trabalho. Produzir conteúdos para a Web ou para um CD-ROM não é a mesma coisa, embora seja cada vez mais comum se utilizarem páginas Web em CD’s.

10 Dirigir o Olhar Seguir fluxo de leitura (esquerda-direita; cima-baixo)
Criar contrastes visuais; Evitar páginas insípidas Destacar texto/imagens do fundo É também importante permitir ao leitor seguir o fluxo de leitura, criando contrastes visuais que permitam destacar o texto mais importante em detrimento do complementar. As imagens de fundo não devem impedir o entendimento do texto.

11 Evitar Distracções Visuais
Fundos muito fortes (usar texturas naturais, cores pastel) GIF animados, sobretudo cíclicos A utilização de muitas composições visuais (ícones, imagens, cabeçalhos muito grandes, GIF animados) provoca distracção no receptor da mensagem, que passa a importar-se mais com a animação que vem a seguir do que com a mensagem.

12 Manter a Consistência Consistência não é monotonia
Manter títulos, barras de navegação, fundos Tornar as variações significativas É importante manter a consistência de página para página, para permitir ao receptor navegar com confiança nos conteúdos. No entanto, isso não significa que tenha que haver monotonia nas páginas.

13 Como Maximizar a LEGIBILIDADE de um Texto

14 Elementos morfológicos de uma página Web
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 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)

15 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.

16 Times New Roman (serif)
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. MAU BOM

17 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. MAU BOM 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.

18 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.

19 Imagem JPEG GIF 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. JPEG GIF

20 Conclusão - Para maximizar a Legibilidade: 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ÍCIO