A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.
Transcript of A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.
![Page 1: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/1.jpg)
A Usabilidadeem software Educativo
PRINCÍPIOSPRINCÍPIOS
E E
TÉCNICASTÉCNICAS
![Page 2: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/2.jpg)
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.
![Page 3: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/3.jpg)
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;
![Page 4: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/4.jpg)
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
![Page 5: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/5.jpg)
Multimédia e Educação : Páginas na Web
![Page 6: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/6.jpg)
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)
![Page 7: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/7.jpg)
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
![Page 8: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/8.jpg)
Estabelecer uma Hierarquia Visual
Utilizadores procuram padrões Ajudar o utilizador compreender a
organização Destacar o importante
![Page 9: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/9.jpg)
Definir o Meio
Écran: textos concisos; gráficos adaptados;
Papel: textos extensos; menos elementos gráficos;
![Page 10: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/10.jpg)
Dirigir o Olhar
Seguir fluxo de leitura (esquerda-direita; cima-baixo)
Criar contrastes visuais; Evitar páginas insípidas Destacar texto/imagens do fundo
![Page 11: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/11.jpg)
Evitar Distracções Visuais
Fundos muito fortes (usar texturas naturais, cores pastel)
GIF animados, sobretudo cíclicos
![Page 12: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/12.jpg)
Manter a Consistência
Consistência não é monotonia Manter títulos, barras de navegação,
fundos Tornar as variações significativas
![Page 13: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/13.jpg)
Como Maximizar a LEGIBILIDADE de um Texto
![Page 14: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/14.jpg)
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
![Page 15: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/15.jpg)
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.
![Page 16: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/16.jpg)
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.
![Page 17: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/17.jpg)
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.
![Page 18: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/18.jpg)
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.
![Page 19: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/19.jpg)
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.
![Page 20: A Usabilidade em software EducativoPRINCÍPIOS ETÉCNICAS.](https://reader037.fdocumentos.tips/reader037/viewer/2022103016/552fc119497959413d8c9374/html5/thumbnails/20.jpg)
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: