Interface Web

Diferenças entre os usuários

 Os grandes avanços tecnológicos ocorridos nos últimos
anos proporcionaram o baixo custo da tecnologia e
fizeram com que o computador deixasse de ser um
equipamento de dificel accesso.
 Devido à diferença de usuários e de formas de acesso, é
necessário que os recursos tecnológicos empregados e
os layouts de páginas sejam adaptados a essas
variações.
 Algumas configurações podem afetar a visualização e o
uso de interfaces web;
 Configurações que afectam a vizualização e o uso de interface web.

 Tamanho da página e resolução:é a quantidade de pixels que

compõem a imagem vista na tela.
 A qualidade de imagem dependem dos seguintes factores:
- Relação do número de pontos por polegada.
- Configuração da tela
- Tamanho do monitor e sua resolução.
 Configurações que afectam a vizualização e o uso de
interface web
 Espaço da página no browser :
- O espaço ocupado pelo browser na página do dispositivo
utilizado, seja dispositivo móvel, sejam notebooks, TV,
variam de acordo com a resolução da tela do dispositivo
utilizado.
 As resoluções de tela mais utilizadas atualmente pelos usuários de
PCs, segundo estatísticas do Market Share
(http://marketshare.hitslink.com), são: 1024x768 pixels serve de
referência para web site.
 1280x800 pixels – desenvolvimento de layout para interfaces web.
Velocidade de conexão e tamanho do arquivo da
página em Kb

 A velocidade de conexão varia muito, ao

desenvolvermos uma página, é necessário ter em mente
que o tempo de download das páginas não deve exceder
10 segundos.
O espaço da página
 O espaço da página é definido de forma como os olhos do
usuário a percorrem.
 Existem estudos que descrevem que a maior parte dos
usuários de cultura ocidental vê a página no sentindo
diagonal, a partir do topo à esquerda, em direção à parte
inferior direita, e depois retorna ao topo, como mostra a
Figura abaixo.
Navegação

 Navegação é o acto ou efeito de percorrer um

hipertexto, determinando a sequência em que os
diversos documentos são consultados, ou percorrer
páginas web, indo de um link a outro.
 As interfaces precisam responder aos usuários três
perguntas fundamentais da navegação.

 Onde estou? / Onde estive? / Onde posso ir?

 Onde estou?
- É a localização do usuário em relação à estrutura do
site e a pagina web em geral.
 Onde estive?
- É a localização do usuário em relação às páginas já
visitadas.
 Onde posso ir?

- É a localização do usuário em relação à estrutura de

informações, que irá levá-lo a encontrar o que está a
procura, seja um produto para comprar, uma notícia, um
texto acadêmico, video, audio, etc.
 Características a considerar na página
principal
 É importante conhecermos algumas características que devem ser
levadas emconsideração ao criar uma página.
1. Identificar claramente a localização do usuário e actividade/conteúdo
mais importante do site e o que ele pode oferecer.
2. Oferecer suporte aos usuários para encontrar o que procuram
3. Estar permanentemente actualizada.
4. Informar os assuntos de maneira concisa e direta.
5. Ser dividida em diferentes seções.
6. Ter uma seção ou menu com links para as áreas mais acessadas pelos
usuários.
 Páginas internas
 Características importantes de uma página interna.
- Apresentar em destaque o nome da página principal
- Mostrar, em local bem visível, a marca da empresa ou organização.
- Manter o mesmo estilo das outras páginas, pelo menos das páginas da
mesma camada.
- Manter o foco em aspectos mais específicos do que na página
principal.
- Se o conteúdo for muito extenso, dividir o assunto em um resumo
geral numa página e detalhar o assunto em outra.
- Prover mais informações sobre o assunto da página.
 Usabilidade

O termo usabilidade surgiu na década de 1980, em

substituição à expressão “user-friendly, foi a ISO/IEC
9126-1991 quem definiu pela primeira vez o termo
usabilidade sobre qualidade de software, como:

 “Um conjunto de atributos de software relacionado ao

esforço necessário para seu uso e para o julgamento
individual de tal uso por determinado conjunto de
usuários.”
A ISO 9241/11 definiu conceitos importantes que
devem ser levados em conta quando se pensa em
usabilidade
 Usuário – pessoa que interage com o produto.
 Contexto de uso – usuários, tarefas, equipamentos
(hardware, software e materiais), ambiente físico e social
em que o produto é usado.
 Eficácia – precisão e totalidade com que os usuários
atingem objetivos específicos, acessando a informação
correta ou gerando os resultados esperados.
 Eficiência – precisão e totalidade com que os usuários
atingem seus objetivos em relação à quantidade de
recursos gastos.
 Satisfação – conforto e aceitabilidade do produto, medidos
por meio de métodos subjetivos e/ou objetivos
fatores considerados para desenvolver um site com
características de usabilidade

 qualidade do layout,
 funcionalidade dos recursos interativos,
 arquitetura da informação,
 conceito editorial,
 aderência às tecnologias e dispositivos digitais.
 Inclusão de “links relacionados”.
Acessibilidade
 Existem varias razões para tornar uma pagina web acessivel,
uma pagina acessivel é aquela que oferece facil acesso a
informação a pessoas de todos os niveis de conhecimento de
T.I, geralmente as informações online constituem uma
vantangem para os politicas governamentais de inclusao digital,
que buscam a inserção de todos na sociedade a informação.
 A inclusão digital visa contribuir para que as pessoas de
baixa visão tenham acesso a computador e acesso à redes
publicas.
 Acessibilidade
 As paginas webs devem ser usadas por user de diferentes
contextos como:
- Usuarios incapazes de ver, ouvir, se deslocar ou interpretar
determinados tipos de informação.
- Tenham dificuldade em ler ou compreender textos.
- Não tenham um teclado ou mouse convencionais
 Não falem ou compreendam fluentemente o idioma em que o
documento foi escrito
 Possuam uma versão ultrapassada de navegador web
Recomendações sobre acessibilidade em pag web:

 Fornecer alternativas equivalentes ao conteúdo sonoro ou

visual.
 Utilizar corretamente marcações e folhas de estilo
 Assegurar o controle do usúario sobre as alterações
temporais do conteúdo.
 Projetar páginas considerando a independência de
dispositivos.
 Fornecer mecanismos de navegação claros
 Legibilidade
 Os conteúdos são as componentes mais importantes de uma
página web.
 Fornecer os conteúdos de forma legível é um dos principais
pontos a ter em conta na criação de um website com uma
boa experiência de utilização. Isto implica que os textos
tenham um tamanho de leitura confortável, espaçamentos
entre linhas que permitam ler o conteúdo sem cansar a vista
e um contraste suficiente entre a cor do texto e a cor de
fundo para que não seja preciso forçar a vista.
Para incrementar a facilidade de leitura e tornar seu
texto “escaneável”Legivel
 Recomenda-se a utilização de:

 Tabelas.

 Cabeçalhos.
 Negrito.

 Gráficos.
 Marcadores (bullets).
 Links
 Fonte
 A escolha da fonte a ser utilizada no projeto de um web site
influencia diretamente no seu resultado final.
 Existem basicamente dois tipos de fontes: as com serifa e as sem
serifa.
 As fontes serifadas geralmente se perdem na resolução dos
monitores, tornando-se inadequada a sua utilização.
 Seu contraste é máximo para compensar problemas de resolução
e para que não haja confusão de legibilidade.
 O texto sem serifa não perdem resolução e tem mais potencial de
velocidade de leitura.
 Serifas São os pequenos traços e prolongamentos que
ocorrem no fim das hastes das letras.

 A tipografia escolhida para o corpo do texto é

Verdana, por ser uma tipografia comumente utilizada,
largamente distribuída e de leitura rápida e simples .
Texto com Serifa Texto sem Serifa

AaBbCc AaBbCc
 Cor ou Modos de cor
 Existem duas classificações para as cores primárias:
- RGB e CMYK
 RGB (Red = vermelho – Green = verde – Blue = azul):
sistema utilizado nos monitores de computador, televisões
e data show.
 É formado pelo processo aditivo, em que pigmentos e suas
combinações geram a cor branca.
 Cada uma dessas cores possui uma variação de 0 a 255, que
geram mais ou menos 16 milhões de cores.
 CMYK (Cyan = ciano – Magenta – Yellow = amarelo
– Black = preto):
 Sistema utilizado para impressões.
É gerado pela absorção de luz pelas cores, processo
denominado de subtrativos, em que a adição das três
principais cores gera a cor preta.
 As cores se dividem em três grupos:

 Cores Primárias: são as cores que não podem ser

formadas por nenhuma mistura. são elas: Vermelho, verde,
azul, no sistema RGB; e no sistema CMYK, são elas:
azul, magenta e amarelo.
 Cores Secundárias: são formadas por duas cores
primárias misturadas em partes iguais.
 Cores Terciárias: são as intermediárias entre uma cor
secundária e qualquer das duas primárias que lhe dão
origem
Thank You