Interação Humano Computador. Profª Marcia Pereira

Transcrição

1 Interação Humano Computador Profª Marcia Pereira

2 Conteúdo Acessibilidade Tipologia

3 Acessibilidade

4 Acessibilidade Acessibilidade é a possibilidade de qualquer pessoa, independentemente de suas capacidades físico-motoras e perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade.

5 Acessibilidade A acessibilidade digital visa também oferecer condições para que todos, idosos, daltônicos, portadores de deficiência, usuários utilizando qualquer tipo de tecnologia de navegação, possam visitar e interagir com sites. A acessibilidade às tecnologias é pois um fator decisivo para a sua qualidade de vida.

6 Acessibilidade O Censo 2010 (IBGE) aponta que 45,6 milhões de pessoas declararam ter ao menos um tipo de deficiência, o que corresponde a 23,9% da população brasileira. Vivem em áreas urbanas , ante nas áreas rurais. A deficiência visual foi a mais apontada, atinge 18,8% da população, em seguida vêm as deficiências motora (7%), auditiva (5,1%) e mental ou intelectual (1,4%).

7 Acessibilidade para a deficiência motora Reduzido controle dos movimentos e fraquezas musculares podem tornar difícil a utilização de teclados e mouses padrão, bem como a execução de ações que impliquem precisão e rapidez. Garantir a interação: Sem o mouse; Sem o teclado; Personalização dos periféricos de entrada com as opções de acessibilidade do sistema; Sem movimentos precisos; Sem a necessidade de efetuar ações simultâneas; Sem limitações no tempo de resposta.

8 Acessibilidade para a deficiência auditiva Não utilizam nenhum programa ou equipamento auxiliar Principais dificuldades que encontram são: A percepção e localização de sinais sonoros e o acesso a mensagens faladas ou a qualquer tipo de informação em áudio Estratégia de acessibilidade: disponibilização de texto ou legendas de conteúdos e instruções por voz e a sinalização visual de avisos sonoros.

9 Acessibilidade para a deficiência visual As pessoas cegas utilizam um programa genericamente designado por leitor de tela que possibilita a interação com o computador sem recurso à visão. Problemas do leitor de tela: não ler gráfico ou texto sob forma de imagem ou facilita o uso do mouse. A acessibilidade deve assegurar: O acesso a informação a partir do teclado; Leitores de tela; Às opções de contraste do sistema; A programas de ampliação de tela.

10 Ferramentas o ASES - Avaliador e Simulador de Acessibilidade de sítios - é uma ferramenta que permite avaliar, simular e corrigir a acessibilidade de páginas, sites e portais, sendo de grande valia para os desenvolvedores e publicadores de conteúdo. Custo: gratuito para brasileiros sob a licença LGPL (Lesser General Public License) Funcionalidades: Avaliador de acessibilidade (e-mac e WCAG); Avaliador de CSS; Avaliador de HTML Simuladores de leitor de tela (tempo) e baixa visão (daltonismo, miopia, ctarata) Entre outras

11 Vídeo - Acessibilidade

12 Fontes

13 Tipografia A Tipografia é a arte e a técnica de compor com o uso de tipos onde haverá necessariamente a impressão final.

14 Tipografia X Tipologia A tipografia é um procedimento técnico inserido na produção gráfica, desde a criação dos caracteres até a impressão e o acabamento. A tipologia refere-se ao estudo da formação dos tipos, onde será possível conhecer as diferentes características dos tipos, adequando ao objetivo final do projeto, além de capacitar o profissional de design, a transformar o texto em elemento gráfico.

15 Anatomia Tipográfica É de extrema importância conhecer a anatomia tipográfica e a terminologia utilizada nesta área. Esse aprendizado facilitará a comunicação entre os profissionais durante o processo criativo. O termo TIPO é o desenho de uma determinada família de letras como por exemplo: verdana, futura, arial, etc.

16 Anatomia Tipográfica Linha da ascendente: Delimita as letras que ultrapassam a altura de x,inclusive a caixa alta, quando houver; Linha da caixa alta: É a distância entre a linha base e o topo do caractere de caixa alta; Altura de x: É a altura das letras de caixa baixa; Linha base: Linha imaginária onde se a letra é apoiada; Linha da descendente: Linha que delimitam as letras que ultrapassam a linha de base. Ex. Letra p e g; Haste: Traço principal da letra que caracteriza a essência de sua forma; Serifa: São traços que formam o acabamento nos terminais das letras.

17 Anatomia Tipográfica

18 Fonte Fonte é o conjunto completo de caracteres sob o mesmo estilo/tipo e em todos os corpos: caixa alta e baixa, sinais de pontuação, acentos e numerais.

19 Características tipográficas LIGATURA: Na diagramação de materiais impressos, a ligatura é muitas vezes provocada para dar ritmo à leitura. Já nos monitores de vídeo, a ligatura deve ser evitada. A luz dos monitores, não permitirá que o leitor perceba de forma legível, esta união de letras, o que pode ocasionar uma confusão textual.

20 Características tipográficas TRACKING É o nome dado ao ajuste de espaçamento entre os caracteres. É possível aumentar ou diminuir o tracking para distribuir melhor o texto na diagramação, como um recurso estético, ou melhorar a legibilidade.

21 Classificação dos tipos Família de tipos São todas as variações de fontes classificadas em um mesmo estilo. Uma mesma fonte pode receber variações como bold, médium, extrabold, condensed etc.

22 Inspirada na escrita monumental romana Proporciona ao leitor um inconsciente descanso visua Tipos serifados, contem traços nas extremidades das letras. Traduz representações de requinte, classicismo, romantismo, antiguidade e seriedade. Não recomendada para aplicações que inspiram leveza, dinamismo e novidade. Evitar o uso em monitores de vídeo, principalmente em corpos pequenos, pelo fato de ocorrer ligaturas. Ex: Bodoni, Garamond, Book Antiqua, Aldine, etc..

23 Faz lembrar um estilo americano (marca de tênis, times esportivos e filmes). Chamada de tipo egípcio. Ênfase vertical, as serifas em caixa baixa são horizontais e grossas, pouca ou nenhuma transição grosso-fino nostraços. Tem como característica estrutural uma certa uniformidade nas hastes e serifas retangulares. Boa utilização em títulos. Ex.: New Century Schoolbook, Rockwell

24 Também conhecida como sans serif, lapidária e Moderna Surgiu na Alemanha no século XIX Possui caracteres com poucas variações em suas hastes, cujos arremates não possuem serifas Ideal para sistemas RGB, ou seja, suportes em vídeo por serem nítidas em telas e suportes iluminados. São bem utilizados em títulos e legendas principalmente em corpos pequenos. Facilitam a leitura na web. Ex.: Arial, Antique Olive, futura, Helvética, Verdana etc.

25 Também conhecida como Manuscrita ou Script. Ex.: Ariston, Rage Italic, Palace Script, Amandine, etc. Os tipos que parecem ser escritos à mão desde as mais clássicas às mais modernas. Elas têm hastes e serifas livres, e sua legibilidade pode ser interferida pelo excesso de curvas e detalhes, limitando seu uso a destaques ou trechos pequenos de textos. Seu uso total em caixa alta deve ser evitado. Representam de forma mais direta a elegância, ao romantismo, a leveza, feminilidade, o classicismo, e dependendo da escolha da fonte a modernidade.

26 Conhecida também como Família Fantasia São as fontes mais complicadas de usar, no que se refere a adequação, bom gosto e equilíbrio. São tipos engraçados, diferentes e fantasiosos como se imitassem desenhos de crianças,motivos, néon, etc. São tratados como arte, e por isso são incorporados ao trabalho com a mesma importância que um desenho ou imagem. Ex. Decorated, Mechanical, ActionIs, AlphaSmoke, etc.

27 Alinhamentos

28 Práticas recomendadas um projeto bem elaborado deve ser bom sem que o usuário tenha que aumentar ou reduzir o tamanho dos textos. A W3C indica o uso de CSS ao invés da tag <font> Especificar as fontes (esperando que elas existam) e especificar outros nomes de fontes alternativas (se possível, próximas das que você quer usar).

29 Dicas importantes Alinhamento: Evite alinhamento centralizado em textos longos. O excesso de espaço branco nas laterais tende a fazer a pessoa se perder. Opte por textos alinhados a esquerda, sem justificativa (caso as palavras fiquem com espaçamento grande d e m a i s entre elas) Contraste: Nunca utilize tipo claro em fundo claro, ou tipo escuro em fundo escuro. Opte sempre pelo contraste. Afinal de contas, texto é para ser lido! Use apenas uma categoria de fonte: Se você fizer um texto todo com uma fonte serifada, utilize apenas fontes serifadas no resto do texto. Não mude no meio do caminho, pois isso pode trazer uma confusão visual ao leitor. Se for mudar de fonte, deixe óbvio a mudança; Dá pra criar um texto com título em Georgia e corpo do texto em Helvetica (serifada e sem-serifa, respectivamente). Mas deixe óbvio a mudança use uma cor diferente, um fundo diferente, ou um tamanho de letra diferente.

30 O aspecto das fontes padrão Cada sistema operacional e cada navegador interpreta estas fontes padrão de forma diferente. Serif: É o "Times New Roman"no Windows, e o "Times" no Mac (que é diferente da do Windows). Sans-Serif: É o "Arial" no Windows, e o "Helvetica" no Mac. Monoespaço: "Courier New " no Windows, "Courrier" no Mac e, muitas vezes, "VeraSans"ou "DejaVuSans" no Linux.

31 Fontes Recomendas Para as fontes serifa, especifique: "Times New Roman", Times, serif; Para fontes de vara: Verdana, Arial, Helvetica, sans-serif; (Verdana tem uma melhor legibilidade na tela do que o Arial, embora haja controvérsias sobre o uso desta fonte). Para as fontes com espaço fixo: "DejaVu Sans Mono","Bitstream Vera Sans Mono", monospace; DejaVu e Vera são famílias de fontes "Open source" muito legíveis, que permitem (ao contrário do horrível Courier) distinguir o 0 do O e o 1 do I. Elas são preferíveis ao Courrier, tantas vezes quanto possível. (Elas estão presentes por padrão na maioria das distribuições recentes do Linux). (Enquanto for possível, evite a fonte "Courier").

32 Uso de fontes grandes

33

34

35

36

37 Referências Tipos de Fontes para baixar: M/ 25 exemplos de sites com fontes grandes: Bruno Ávila designer Guia de acessibilidade para software: Acesso em: Abr Instituto Indianopolis. Censo divulga o número de deficientes no Brasil. Disponível em: Acesso em Abr 2013

38 Pesquise e cite três sites identificando as características de usabilidade, acessibilidade, e fonte e qual a teoria de cores adotada pelo Designer.