TAW – Tópicos de
TAW – Tópicos de
Ambiente Web
Ambiente Web
Prof. Ricardo Veras
rveras@unip.br
Aula - 07
Agenda
Interface
• Variações para cada usuário
• A página principal e as páginas internas
Variações para
cada usuário
Interface
A navegação, o layout, e a capacidade de processamento dos equipamentos, variam de usuário para usuário, e de acordo com as circunstâncias do acesso (em casa, no trabalho, no café, num ponto de acesso gratuito, por computador pessoal, dispositivo móvel).
O desenho das páginas e os recursos tecnológicos utilizados na interface devem se
adaptar a estas variações.
Configurações do usuário que afetam a visualização e o uso das interfaces web:
– Navegadores (browsers) utilizados.
– Espaço ocupado por cada browser na página. – Velocidade de conexão e navegação.
– O tamanho da página no monitor e a resolução de tela.
Seja qual for a configuração tecnológica do seu dispositivo ou programa de acesso, o usuário controla a sua navegação através das páginas (e muitas vezes nem entra no site pela página Principal).
Por isto, é importante manter a identidade visual (logotipo - identificação da organização, cores, tipologias) consistente em todas as páginas.
A página principal
e as páginas
internas
Interface
O tempo médio que um usuário passa numa página web é menor que 10
segundos
. Neste tempo, o usuário não só entende a sua estrutura, como
também se o conteúdo o interessa ou não, e para onde deve ir a seguir.
Para atender a impressões tão imediatas, as páginas de um site, de maneira
geral, têm características que a maioria dos usuários está acostumada a
encontrar, como:
• Modelo de conteúdo, ou o conceito editorial e comercial da publicação, que define
como vários tipos de informação são exibidas.
• Modelo de navegação, que define a relação entre as ações dos usuários e os
conteúdos oferecidos - inclui a gramática (ou conjuntos de símbolos articulados) entre a ação do usuário e os objetos da interface.
• Padrões de layout - Cores, tipologias, aplicações da identidade visual, ícones, etc.. • Padrões de interação com/para o usuário - Barras de navegação, menus, botões,
janelas, mensagens, formulários.
É importante também considerar as características específicas da Página
Principal e das Páginas Internas
.
Interface
A Página Principal
• Embora tenha a mesma estrutura visual e conceitual do resto do site, a Página
Principal pode ser diferente das Páginas Internas, com sinalização clara de que é uma página que contém referências de acesso.
• Como 40% dos visitantes chegam a um site pelas páginas internas (Jakob Nielsen),
onde ficam de 25 a 35 segundos, a diferenciação da página Principal (com as demais páginas) ajuda aos usuários a se orientarem na estrutura de informações.
• A aparência especialmente atraente desta página mantém o usuário interessado no
Interface
Características a considerar na Página Principal:
• Identificar claramente a atividade mais importante do site e o que este pode oferecer (através do
logotipo e/ou do seu símbolo, com breve descrição da marca em local bem visível, relação direta do layout com a atividade e clareza dos títulos das barras de navegação).
• Oferecer suporte aos usuários para encontrar o que estão procurando, através de ferramentas de busca, contato bem visível e fácil de usar, Arquitetura da informação clara, atalhos para páginas mais profundas na estrutura.
• Ser permanentemente atualizada e identificar o conteúdo atualizado com mais freqüência (como acontece na primeira página de um jornal).
• Marcar a localização do usuário em relação às outras páginas e guiar seus percursos.
• Ter mais área para a navegação do que para conteúdo, sinalizando o conteúdo mais importante na parte superior.
• Informar os assuntos de maneira concisa e direta, para que os leitores não fiquem saturados de informações, e com isso não encontrem as informações que estão procurando.
• Ser dividida em diferentes seções de acordo com os objetivos estratégicos da marca e com a estrutura de informações.
• Incluir, se conveniente, uma seção ou menu com links para as áreas mais acessadas pelos usuários, que deve mudar periodicamente, de acordo com os resultados dos relatórios de acesso.
Interface
Sobre a ocupação do espaço da página Principal de cada site, ressaltamos que,
por ser um local de "convergência" de usuários, um ponto indicador de
percursos, pode por isto ter mais ferramentas de navegação do que conteúdo
.
As páginas abaixo ilustram um tipo de página Principal bastante diferente das
páginas internas.
• Este tipo de página não tem espaço para conteúdo atualizável, funcionando como
ponto direcionador dos usuários para áreas relacionadas à estrutura funcional e aos programas desenvolvidos pela organização.
Interface
As Páginas Internas:
• A rigor em um “web site” todas as páginas são Internas, inclusive a Principal, na
medida em todas fazem parte de um mesmo canal, e a navegação não segue uma ordem pré-definida, como num livro ou revista.
• De qualquer forma, "páginas internas" são aqui apontadas como as que não incluem
a Principal, ou seja as que ficam localizadas na segunda camada de navegação.
• Cada vez mais as Páginas Internas são acessadas diretamente, sem que o usuário
sinta necessidade de passar pela Principal. Veículos como blogs, ferramentas de busca, emails informativos, wikis e tecnologias como RSS se consolidam como suportes à navegação dos leitores online, e os direcionam para as informações que procuram.
• Cerca de 60% dos visitantes chegam a um site pelas páginas internas e suas visitas
são mais longas do que quando chegam pela Principal (70 a 80% mais tempo - Jakob
Interface
Características a considerar nas páginas internas para facilitar o deslocamento e a realização de tarefas:
• Mostrar o logotipo da empresa ou organização em local bem visível, ligando à página Principal ►Exemplos
• Manter o mesmo estilo das outras páginas, pelo menos das páginas da mesma camada, para contextualizar a
navegação e orientar o usuário que chegue por elas.
• Manter o foco em aspectos mais específicos do que na página Principal.
• Prover o sentido de localização do usuário em relação ao resto do site e à Principal.
• Manter as informações estruturais de navegação, sobre o site (como barra de localização - "breadcrumb" - ,
ferramenta de busca, data de atualização, links relacionados, mapa do site) e de auxílio ao usuário sempre em locais de fácil acesso e visualização.
• Na maioria dos sites, estas informações costumam ficar localizadas em lugares fixos em todas as páginas. • Se o conteúdo for muito extenso, deve-se dividir o assunto em um resumo geral numa página e detalhar o
assunto em outra página, de forma que o usuário possa decidir se quer se aprofundar no assunto.
• Prover mais informações sobre o assunto da página, como por exemplo imagens ou fotos ilustrativos, links para
páginas do site ou de outros sites, podcasts e vídeos relacionados.
• O fortalecimento de uma estrutura menos centrada na Página Principal e nas relações hierárquicas entre as informações, apóia os percursos paralelos dos usuários através de uma estrutura matricial. Permite assim que o canal fique mais estruturado em torno dos interesses dos usuários do que na sua taxonomia interna.
• Programar as páginas (com CSS) para que a sua versão impressa contenha apenas os elementos de conteúdo
principais, e menos elementos de navegação (quem imprime a página geralmente está interessado no conteúdo, e não na estrutura de informações em torno da página, na tela).
Interface
O espaço das Páginas Internas deve ser mais ocupado pelo conteúdo do que
pelas ferramentas de navegação
.
As páginas mais internas, ou em camadas mais profundas em relação à página
Principal contém
assuntos mais aprofundados ou as imagens maiores
.
• O usuário que as procura se dispõe a ler textos mais longos, ou a esperar algum
Interface
Independentemente da sua localização no site, quanto mais comandos e
botões houver na página, fica mais difícil para o usuário encontrar o que
procura.
• O layout das páginas do site abaixo já foi remodelado. De qualquer forma, a página nova, bem
como a representada abaixo, apresenta grande número de informações com tratamento
diversificado, com quatro animações "acima da dobra" e um anúncio que desaparece depois de alguns segundos.
• É possível que os usuários habituais saibam onde encontrar as informações que lhes
Usabilidade
Usabilidade
Segundo os standards ISO 9241-11 (Guidance on Usability, 1998), usabilidade é
a amplitude de uso de um determinado produto por seus usuários
, de modo
que possam
realizar tarefas de maneira efetiva, eficiente e satisfatória
num
contexto definido.
Relacionada à qualidade de uso de uma interface
, usabilidade refere-se ao
potencial de efetivação das ações que os usuários desejam realizar
(encontrar
informações, ler textos, comprar produtos, jogar jogos) a partir de seus
modelos mentais.
É resultado do entendimento de como cada pessoa percebe, sente e
compreende suas relações com as interfaces digitais e com as informações
nelas publicadas.
O conceito inclui também o entendimento dos padrões de comportamento
na
busca e uso de informações, o
atendimento às necessidades dos usuários
e
grupos de usuários, a compreensão de suas motivações e os processos de
transformação subjetivos que se realizam através das informações.
Usabilidade
O aperfeiçoamento estrutural de usabilidade se reflete diretamente na
melhoria
da qualidade da experiência do usuário
, e no
aperfeiçoamento dos seus
processos de decisão
- tanto em relação às ações que realizam quanto em
relação às informações que selecionam -, refletindo na positivação da
percepção da marca associada à interface.
Sendo um dos aspectos mais importantes no projeto de web sites, a
usabilidade inclui fatores, como:
qualidade do layout, funcionalidade dos
recursos interativos, arquitetura da informação
(facilidade de deslocamento e
de localização das informações),
conceito editorial
(tratamento de textos,
imagens, vídeo, áudio para publicação),
aderência às tecnologias e
dispositivos digitais
.
Usabilidade
Questões importantes:
• Autonomia orientada - embora o usuário tenha controle sobre a ação num site, um
ambiente adequado de uso facilita a navegação e a realização de tarefas.
• Antecipação da experiência - o usuário deve aprender facilmente a estrutura de
informações e saber o que vai encontrar antes de selecionar o conteúdo de um link.
• Consistência da funcionalidade - os aplicativos devem responder à mesma ação do
usuário com os mesmos resultados, em qualquer momento, em qualquer tela.
• Considerações sobre os contextos culturais dos “stakeholders” (pessoas
Usabilidade
Benefícios da usabilidade de um site para o usuário:
• Satisfação com o canal - mais chances de fidelização de público. • Aperfeiçoamento da experiência de uso.
Benefícios da usabilidade de um site para a organização que publica:
• Incorporação de uma cultura voltada para o público (interno e externo).
• Maior conhecimento das necessidades/comportamentos dos clientes em relação ao
produto oferecido e à interface.
• Maior satisfação do cliente na visita ao site. • Maior retorno sobre o investimento.
Benefícios da usabilidade de um site para o desenvolvedor:
• Diminuição do tempo de desenvolvimento. • Diminuição do tempo de suporte.
Usabilidade
Autonomia orientada:
• O equilíbrio entre o que o usuário procura em um site e o que se espera que procure (ou faça) é delicado. A prioridade fica com a satisfação da demanda do usuário, que, embora deva ter
controle e autonomia sobre a sua própria experiência, deve ser também orientado pela interface para realizar o que se propõe.
• Normalmente os usuários navegam em diversos sites quando estão procurando informações ou produtos para compra. Quanto mais fácil e imediato for o processo de aprendizado do uso da interface, mais rapidamente podem se concentrar naquilo que procuram.
• O rápido aprendizado também permite ao usuário a antecipação do que vai encontrar antes de selecionar um link ou apertar um botão (comprar um produto ou jogar um jogo, por exemplo). • Como 54,4% da população brasileira nunca usou um computador e 67% nunca navegou na
Internet, segundo dados da pesquisa TIC Domicílios realizada em julho e agosto de 2006. No ano, o total de usuários cresceu 18% em relação a dezembro de 2005 (B2B, 23.1.2006). Ou seja, foram 2.592.000 usuários novos.
• É importante por isto, para não incluir nas interfaces, elementos cujo uso pode não ser muito simples ou auto-explicativo. O aprendizado imediato da interface deve ser uma preocupação permanente dos desenvolvedores web.
Usabilidade
Fatores a considerar em relação à autonomia de ação dos usuários:
• Grau de familiaridade do usuário médio do site com o uso da internet e suas
ferramentas.
• Considerar o uso das interfaces web não só por usuários novatos, mas também por
especialistas, usuários ocasionais, freqüentes, crianças, idosos, pessoas com deficiência física, etc.
• Adaptação da interface às condições físicas ou de acesso do usuário.
– Exemplo: provimento de recursos como a possibilidade de aumentar o corpo de letra dos
textos (para usuários com deficiência visual), ou a possibilidade de adaptar o layout a diferentes resoluções de tela (layout líquido).
• Uso de convenções já aceitas em grandes sites e portais, que facilita a localização de
informações. Por exemplo, o uso do símbolo e do logotipo da organização no alto da página informa o nome do site ou da organização aos usuários que chegam direto nas páginas internas (através das ferramentas de busca).
• Clareza da localização das páginas de abertura das seções principais em relação à
Usabilidade
Fatores a considerar em relação à autonomia de ação dos usuários (cont.):
• Sinalização do status de uma tarefa durante a sua realização (como o download deum arquivo ou a compra de uma mercadoria).
• Orientação visual dos percursos a seguir, dos caminhos percorridos e pontos de
chegada - Deve haver mais de um caminho para chegar a uma informação, um mais curto e outro mais detalhado.
• Sinalização visual dos pontos onde os usuários devem permanecer mais tempo, com
elementos visuais estáveis, menos elementos animados, menos opções de uso, que ajudam o usuário a achar as informações que está procurando.
• Possibilidade de opção sobre a instalação de plug-ins e programas no computador
ou no browser do usuário para a visualização de imagens e animações, de forma que se o usuário não quizer fazê-la pode sair da página ou do site.
Usabilidade
A interface ilustrada abaixo ilustra a realização de etapas seqüenciais de uma
ação (tour de apresentação para parceiros em prospecção).
A ordem de cada página em relação ao total fica sinalizada pela imagem que
Usabilidade
Antecipação da experiência
:
• Fatores a considerar para facilitar a antecipação da funcionalidade da interface:
– Incluir "Links relacionados" que facilitem a localização de assuntos no site todo, independentemente da sua estrutura.
– Oferecer suporte à navegação e ao uso, por meio de mensagens claras e objetivas.
Mensagens vagas como "Veja mais", não acrescentam informação ao texto ou ao rótulo do link.
• Por exemplo: Uma expressão como "As chuvas e o racionamento", acrescenta mais informação sobre o assunto ao que o link se refere.
– Facilitar o aprendizado de uso - o usuário deve poder usar o site sem precisar de longo aprendizado (o aprendizado é indispensável, embora seja na maioria dos casos um processo quase instantâneo).
– Incluir pequenos resumos próximos aos links ajudam os usuários a entender e antecipar o conteúdo da página relacionada.
– Permitir a reversibilidade das ações - o usuário deve poder explorar o site e "errar o caminho," ou desistir de uma tarefa.
Usabilidade
Exemplo - Inclusão de "Links relacionados" que facilitem a localização de
Usabilidade
Consistência da funcionalidade:
• Consistência Funcional se refere a padrões e convenções de funcionalidade, de
estrutura visual e de edição de conteúdo a serem seguidos, estabelecidos e
aplicados a todo ambiente e conteúdo web em situações semelhantes.
• Para facilitar o aprendizado, a consistência dos elementos da interface (mecanismos
de resposta, estrutura de design, informações e conteúdo) diminui os erros de uso e fortalece as expectativas do usuário.
• Padrões e convenções de uso e edição devem ser estabelecidos e aplicados a toda
interface e conteúdo, sem mudanças em situações semelhantes.
– Por exemplo: Se as cores dos links variam de página para página, o usuário pode se
confundir sobre a sua funcionalidade.
• A consistência das soluções torna o aprendizado de uso do site mais fácil e rápido. • A consistência ajuda também a produção de templates e estilos CSS, de forma que
Usabilidade
Crianças tendem a gostar mais de interfaces "investigativas" e a explorar mais
o ambiente do que os usuários mais velhos.
Às vezes, um botão escondido, em vez de representar um problema, pode ser
um desafio excitante. Neste caso, a dificuldade de encontrar informações se
incorpora à idéia de consistência da interface.
Usabilidade
Fatores a considerar:
• Coordenação entre a funcionalidade da interface e o comportamento do usuário.
• Provimento de respostas claras e imediatas de que uma ação foi realizada ou um resultado foi atingido.
– Acionar um botão conduz a uma página localizada em outro site, por exemplo.
• A estrutura de navegação e uso deve se manter invisível - Os elementos ficam disponíveis para o uso, mas sua funcionalidade aparece de maneira discreta.
• A visibilidade informativa - a aparência de ícones, boxes, setas, sinaliza seu uso. Os sinais de localização e orientação devem ser visíveis quando necessários.
• A padronização do layout geral do programa (telas, logotipos, cores, tipologias).
– Se, no entanto, um objeto está relacionado a uma ação ou área de navegação "diferente" da atual, deve aparecer diferente.
• Elementos com funcionalidades semelhantes devem ser agrupados segundo uma estrutura de navegação previsível, em que os elementos de layout sejam baseados nos mesmos critérios , especialmente s elementos muito notados pelos usuários.
• Uso da mesma terminologia para as mesmas informações - especificações editoriais ajudam a uniformizar as referências mais comuns.
• Áreas de informações relacionadas às expectativas dos usuários para o conteúdo principal.
