TAW – Tópicos de Ambiente Web 09 - TAW.pdf · TAW – Tópicos de Ambiente Web Prof. Ricardo...

TAW – Tópicos de TAW – Tópicos de Ambiente WebAmbiente Web

Prof. Ricardo Veras

[email protected]

Aula – 09

Interface

TAW – Tópicos de Ambiente Web Prof. Ricardo Veras

Agenda Interface

• Componentes da Interface WEB


Componentes

Interface


Componentes

Título da página:• Localizado no alto da janela do browser, o título da página identifica o assunto da página. É o

texto registrado por default nos favoritos dos browsers, e é um lembrete muito útil sobre o conteúdo da página para os usuários dos programas.

• É uma informação que merece atenção especial, porque algumas ferramentas de busca mostram o título da página na lista de resultados, associada à sua URL.

• Para ajudar a indexação dos sites de busca e o rastreamento da navegação pelo usuário, cada página deve ter um título que explique o conteúdo da página e faça sentido fora do contexto do site. Se o usuário lê o título no resultado de uma ferramenta de busca, deve poder entendê-lo para que possa selecioná-lo.

• Muitos sistemas de gerenciamento de conteúdo dificultam a diferenciação dos títulos, e conseqüentemente a identificação do assunto das páginas, na medida em que uniformizam os títulos do site todo, às vezes inserindo apenas o nome da organização que o publica.

• É importante deixar claro, para as pessoas/ empresas que adaptam o sistema de gerenciamento de conteúdo para as condições específicas da organização, a necessidade dos títulos das páginas corresponderem ao título do conteúdo. Isto não é normalmente um problema técnico muito difícil de resolver, e depende mais das orientações editoriais do que dos recursos do programa.

• A incidência de títulos uniformes acontece também com freqüência porque os próprios projetistas não prestam muita atenção neles. Mas a diferenciação dos títulos, identificando com objetividade o conteúdo de cada página, traz grandes vantagens não só para a organização que publica o site como para os seus leitores.

• Vemos nas telas abaixo o título da página no alto, que distingue os títulos das páginas de acordo com os títulos das seções. A tela de baixo exibe o título "Initiative Projects“.


Componentes


Componentes

"Etiqueta-síntese do site" ("tag line"):• Aplicada na página Principal, resume o assunto e os objetivos gerais do site em uma

frase. Permite que os usuários que o visitam pela primeira vez (chegando pela página Principal), verifiquem se o assunto é do seu interesse antes de visitar as páginas internas.

• Na página abaixo, a tag line é “The shopping magazine for your home”.


Componentes

Ferramenta de busca - ou buscador – interna:• Uma ferramenta de busca ou buscador é um mecanismo de recuperação de informações que

aceita uma pesquisa, compara esta pesquisa com os arquivos indexados em bancos de dados e gera uma lista com os resultados encontrados.

• A busca pode ser dirigida a uma página, a um site, a um documento específico de um site ou banco de dados ou pode ser dirigida a um tipo de informação mais genérico, como uma lista de produtos num site de vendas.

• A ferramenta é necessária em sites grandes, com mais de 200 páginas, complexos e atualizados freqüentemente (Obs.: pode-se deixar uma frase como “Sim... este site com cerca de 1.000 páginas atualmente, deveria ter uma ferramenta de busca funcionando, mas que está em projeto” – mas não por muito tempo).

• Além de ser usada para a recuperação de informações, é utilizada também como ferramenta de deslocamento - do total de usuários, cerca de 50% navega pela ferramenta de busca e o restante pelos links (Jakob Nielsen).

• Sua utilização pelo público representa, para os projetistas de um site, importante fonte de avaliação da arquitetura de informação e dos assuntos/ produtos que os usuários procuram mais, pois fornecem informações sobre os canais mais procurados pelo público e como estes são encontrados.

• No entanto, seu uso excessivo pelos visitantes pode sinalizar que não estão encontrando facilmente as informações que procuram, e que a arquitetura da informação precisa ser aperfeiçoada.


Componentes

Aspectos importantes sobre a ferramenta de busca interna (de um web site ou intranet):• Ficar situada em local bem visível e acessível em cada página do site (é comum no alto, à direita

ou à esquerda). Pode ser encontrada também isolada em uma página, acessável através de link, mas a disponibilização de um campo de busca simples, em cada página, facilita o processo de busca.

• Não exigir conhecimentos especiais para uso (a não ser para a busca avançada). Se possível, deve repetir o modo de uso das principais ferramentas de busca, como Google e Yahoo, que fornecem campos de texto para buscas por palavras-chave.

– Por exemplo, o usuário deve poder voltar à página de resultados usando a ferramenta "Voltar" do browser e o resultado da busca se manter estruturado, ou teclar Enter no teclado para acionar o botão "Submit", ou realizar a mesma ação que o usuário obtém ao apertar o botão "Procurar“.

• Mostrar os resultados por ordem de relevância, sem repetição, de forma que os endereços indiquem os assuntos principais das áreas.

• Permitir a realização de outras pesquisas a partir da página de resultados (e a volta à página Principal).

• Apontar os links sobre arquivos em PDF para a página com as informações contextuais sobre este arquivo (assunto, tamanho, formato), e não diretamente para o arquivo. Se apontar diretamente para o arquivo em PDF, sinalizar o formato.

• Não mostrar, no resultado, links aos quais o usuário não tem acesso, que precisem de senha ou fiquem em áreas de acesso restrito. Se mostrar estes resultados, as restrições devem ser explicitadas.

• Inserir marcações (tags) nas páginas, arquivos para download e imagens do site para a indexação pela aranha das ferramentas de busca. Quanto mais meta informações o buscador encontrar, mais precisamente identifica a página e seus assuntos principais com os interesses dos usuários.


Componentes

Aspectos importantes sobre a ferramenta de busca interna (de um web site ou intranet):• Ordenar as informações de acordo com as marcações (tags) HTML ou meta tags ao modo como

estão configuradas nas áreas de informações.–Se, por exemplo, o site tiver marcações de títulos hierarquizadas com h1, h2, h3, o resultado deve priorizar os títulos com uma destas marcações. Se o título do texto de uma página for "Usabilidade", assinalado com h2, e um usuário fizer uma busca por esta palavra, o resultado deve priorizar esta página em detrimento de outras páginas onde haja a palavra "Usabilidade" mas em que esta não esteja no título assinalado com h2.

• Outro critério de priorização da ordem dos resultados pode ser o título da página, <title>, no caso de cada página do site ter um título adequado ao seu conteúdo (e não títulos repetitivos e padronizados). Se a palavra procurada se encontra no título de uma página, esta pode ser considerada de alta prioridade para o usuário que a utiliza na busca.

• Pode-se também combinar ao título da página palavras-chave e textos contidos nas meta tags "Description" e "Keywords", de forma a estabelecer prioridades para palavras e expressões mais usadas.

• Quando aplicável, facilitar a busca pelo uso de um menu lateral com opções que restrinjam a amplitude dos assuntos procurados (por classificações ou parâmetros de procura específicos de deteminadas áreas do site).

• Aperfeiçoar permanentemente os resultados com a observação das estatísticas de acesso e a verificação das palavras e expressões mais utilizadas pelos usuários. Este aperfeiçoamento muitas vezes implica na inclusão de palavras-chave nos textos e nas meta tags das páginas, e precisa ser feito com a equipe editorial.


Componentes Sinalização de itens (bullets ou marcadores):

• Funcionam para indicar listas de links (dentro ou fora da barra de navegação) ou de itens dentro do texto.

• Podem sinalizar diversos elementos de listas:– Itens com links

• No meio do texto• Nas barras de navegação• Isolados - Itens sem links, no meio de textos

• A manutenção de critérios de uso destes sinais ajuda o usuário a entender a relação de subordinação do item com o assunto principal.


Componentes

Barras de navegação:• Agrupamentos temáticos ou funcionais de botões, localizados de acordo com as

necessidades dos usuários.• Podem estar em formato de imagem ou texto, normalmente no alto, à esquerda ou na

base das páginas.• Podem variar nas páginas internas de acordo com a organização do conteúdo em

cada camada.• Em páginas internas, outras barras de navegação costumam ser acrescentadas,

sendo que cada nível não deve apontar para mais que três ou quatro níveis de informações, de modo a que o usuário não perca o sentido de localização dentro da estrutura geral.

• Alguns elementos de navegação pelo site, como Ferramenta de busca, Mapa do site, Contato, Glossário, Suporte ao usuário, campo de Login e Logout, carrinho de compras, devem estar presentes em todas as páginas, no alto ou na base da página.

• A página abaixo tem 4 agrupamentos de links (assinalados em vermelho) considerados como barras de navegação.


Componentes


Componentes

Menus:• São ferramentas de navegação em que um rótulo de barra de navegação revela uma

série de rótulos agrupados quando o mouse passa/clica sobre ele. O usuário pode mover o mouse sobre os rótulos de links e selecionar cada uma das opções.

• Permitem também procuras mais rápidas por todas as áreas, independente da localização na estrutura.

• São mais lentos para a navegação que as barras de navegação para a procura de assuntos definidos em camadas mais profundas (muitas vezes o usuário precisa procurar em uma longa lista de itens).

• Para a navegação menos direcionada, a combinação de barras de navegação (localizadas) e menus (generalizados) aumenta a velocidade de localização de assuntos.

• Problemas de usabilidade em muitos menus fazem com que o movimento do mouse faça com que o menu "fuja" do usuário, o que prejudica as vantagens da sua funcionalidade.


Componentes


Componentes

Trilha de orientação ("breadcrumbs"):• Este recurso da interface consta de uma linha de texto que mostra a localização de

uma página em relação à estrutura de informações do site. O nome em inglês, "breadcrumb", é uma referência à história de João e Maria, que, para não se perdem na floresta jogam pedaços de pão para formar uma trilha que lhes sinalize o caminho de volta. É difícil traduzi-la, portanto sugerimos aqui expressões como “trilha de orientação” ou “barra de localização”.

• Não é um recurso muito utilizado pela maioria dos usuários, mas permite o deslocamento entre páginas utilizando os atalhos percorridos, sem necessidade de usar o botão "Voltar" ou a ferramenta de busca.

• Reforça o sentido de localização do usuários entre camadas.• É mais utilizada por usuários experientes (menos da metade dos usuários), e muitas

vezes ignorada mesmo pelos que notam a sua existência. Como o público da internet brasileira inclui cada vez mais usuários novos (especialmente das classes C e D), deve-se considerar o uso destas trilhas junto com outros recursos de orientação e navegação. Não deve ser a base da navegação de um site.


Componentes


Componentes

O gráfico abaixo mostra que a "breadcrumb", aqui referida como "barra de localização" não é muito utilizada pelos usuários de sites que oferecem este recurso junto com outros modos de navegação.

Na navegação seqüencial da maioria dos usuários, estas barras não apresentam vantagem significativa sobre menus e barras de navegação.

Já para usuários que chegam a um site através de ferramentas de busca ou de atalhos em outros sites, estas tímidas linhas de textos podem ser bastante úteis para o estabelecimento de coordenadas sobre o conteúdo das camadas mais superficiais e como chegar até elas.


Componentes

Ícones:• Em sites com usuários regulares, ícones podem ajudar a simplificar a navegação,

através da rápida visualização de links e informações a eles associadas.• As cores, as formas dos ícones, e a quantidade de detalhes dos ícones de uma

interface devem ser baseadas em critérios visuais e conceituais homogêneos. As diferenças entre eles devem ficar facilmente identificáveis mesmo de relance, em passadas rápidas do olho sobre o conjunto.

• Usuários regulares de uma interface costumam usar mais os ícones como referência do que usuários que visitam um site pela primeira vez. Estes usuários já estão familiarizados com os assuntos principais e já não se detêm muito tempo na leitura dos rótulos, mas na imagem que identificam rapidamente.

• Para não aumentar o tempo de carregamento das páginas, os ícones devem ser pequenos, bem como ser facilmente visualizáveis em monitores com resoluções mais baixas e mesmo sem distinção de cores (em preto e branco). No site ilustrado abaixo, os ícones abaixo dos links ajudam a identificar o conteúdo das páginas às quais estão relacionadas.


Componentes


Componentes

Formulários:• Permitem que o usuário inclua, a partir de um web site, diversos tipos de informações e as envie

para destinatários definidos, como no caso de pagamento de impostos, compra de mercadorias, contrato de serviços, registro de acesso a um site.

– As informações encaminhadas podem ser incluídas em bancos de dados e gerar respostas automáticas - como a compra de uma mercadoria, por exemplo. Podem também ser enviadas por email para uma pessoa, responsável pela resposta ou pelo seu encaminhamento a terceiros.

Algumas recomendações:• Redação clara das informações e a programação visual dos formulários, que leve a um

preenchimento fácil e intuitivo.• Durante o projeto do site deve ser feita uma análise do preenchimento dos campos, para

antecipar o comportamento dos usuários. Depois do lançamento, o acompanhamento das ações de preenchimento permite a verificação da efetividade das soluções e o seus aperfeiçoamento.

• Uso de elementos que obedeça a convenções amplamente utilizadas, como no caso dos botões de rádio e caixas de seleção.

• Informação prévia do que vai acontecer a partir do preenchimento do formulário, para fortalecer a relação de confiança com o cliente.

TAW – Tópicos de Ambiente Web 09 - TAW.pdf · TAW – Tópicos de Ambiente Web Prof. Ricardo...

Documents

Transcript of TAW – Tópicos de Ambiente Web 09 - TAW.pdf · TAW – Tópicos de Ambiente Web Prof. Ricardo...