Design e Usabilidade. Projeto de Aplicações Web. O que é usabilidade? Usabilidade um direito? Usabilidade um direito

Transcrição

1 Design e Usabilidade Projeto de Aplicações Web Usabilidade um direito Deveríamos poder empregar a ferramenta na tarefa, e não como é hoje, onde temos que adequar a tarefa à ferramenta. E essas ferramentas deveriam seguir os três axiomas do design: simplicidade, versatilidade e satisfatoriedade. Roberto Vedoato O que é usabilidade? Usabilidade um direito? Usabilidade preocupa-se com a relação entre as ferramentas e os seus utilizadores. De modo a que uma ferramenta seja eficiente, ela deve permitir que os seus utilizadores consigam realizar as suas tarefas da melhor maneira possível. O mesmo princípio pode ser aplicado aos computadores, websites, e programas de software. Para que estes sistemas funcionem corretamente, os seus utilizadores têm de ser capazes de os usar eficientemente. A usabilidade existe para tentar facilitar o máximo possível a vida das pessoas ao navegarem pela internet, do utilizador iniciante até o mais experiente. Figura obtida do tutorial do IHC 2002 Profa. Heloísa Vieira da Rocha

2 Figura obtida do tutorial do IHC 2002 Profa. Heloísa Vieira da Rocha Figura obtida do tutorial do IHC 2002 Profa. Heloísa Vieira da Rocha Usabilidade e WebDesign A usabilidade governa a Web. Mas diretamente, se o cliente não encontrar o produto, ele não o comprará. Os usuários experimentam a usabilidade de um site antes de se comprometerem a usá-lo e antes de gastarem dinheiro em possíveis aquisições [Nielsen 2000] Desenvolvimento de aplicações Web pode ter uma abordagem bastante sistemática, com uma seqüência de métodos. O tratamento de um projeto da Web como um projeto de desenvolvimento de software facilita o cumprimento de cronogramas e garante a qualidade Figura obtida do tutorial do IHC 2002 Profa. Heloísa Vieira da Rocha

3 Processo de desenvolvimento de sites O Projeto e desenvolvimento de sites (Webdesign) pode ser dividido em: Definição e Planejamento; Arquitetura (conteúdo e organização); Projeto dos componentes do site; Construção dos componentes do site; Marketing; Avaliação e Manutenção do site. Definição e Planejamento Nesta etapa deve-se definir os objetivos do site; Fazer a coleta e análise sobre o público alvo (usuários) que deseja atingir; Definir o escopo do conteúdo do site(amplitude e profundidade para satisfazer os objetivos); Determinar as funcionalidades interativas, os custos e a tecnologia de suporte requerida. Definição e Planejamento Checklist: Básicos: Propósito e objetivos do site Público alvo Equipe de desenvolvimento e coordenador/responsável Consultores de conteúdo Webmaster Tecnologia Sistema Operacional (Unix, Masc, Windows) e versão mínima Navegadores (Firefox, Internet Explorer) e versão mínima Largura de banda média dos visitantes: audiência majoritariamente interna ou externa Necessidade de elementos avançados: JavaScript, PHP, JSP, Applets Java, CSSs, Plug-Ins, características específicas de um navegador Acesso ao pessoal de suporte: , chats, fone Controle de acesso e suporte de BD: Logins requeridos para entrar em partes do site, questionários de cadastramento, busca e recuperação em BDs Conteúdo audiovisual: som, gráficos, imagens e vídeos requeridos Definição e Planejamento Suporte do servidor Web Servidor interno ou externo (Internet Service Provider) Nomes de domínio disponíveis Espaço em disco e limitações de tráfego, capacidade adequada para o tráfego esperado do site? Suporte e manutenção 24h, 7/7 Estatísticas sobre usuários e tráfego Análise interna ou externa do log do servidor Motor de pesquisa adequado ao conteúdo Suporte disponível a CGI, programação e BD Custos HW e SW de apoio Treinamento da equipe e contratação de consultores Divulgação do site (marketing) Manutenção do site

4 Arquitetura Estrutura Detalhar conteúdo e organização do site, registrando todo o conteúdo existente, relacionando todos os novos conteúdos requeridos e definindo a estrutura organizacional do site. Construir pequenos protótipos de partes do site para testar idéias A organização da informação é o mais importante passo de definição do site: decidir o quê fazer e como mostrar/dizer ao usuário antes da construção das páginas individuais. A organização da informação pode conter: Dividir o conteúdo em unidades lógicas Estabelecer uma hierarquia de importâncias entre as unidades Utilizar a hierarquia para estruturar relações entre unidades Analisar a usabilidade do site: a navegação do site que deve ser natural para os usuários As estruturas mais comuns de um projeto de um site são: Seqüências: segue uma ordem (linear), por exemplo cronológica, lógica, alfabética, etc. Hierárquicas: mais indicadas para organizar conjuntos complexos de informação; Redes: as mais difíceis de entender e usar. Exploração não linear de links pelos usuários não remove necessidade de organizar a estrutura. Projeto dos componentes do site HomePage (Página Inicial) Elementos de sites: Homepage Menus e subsites Lista de recursos, links relacionados Tabelas de conteúdo, índices de sites e mapas de sites Páginas de novidades Auxílio a busca no site Informação de contato e feedback dos usuários Bibliografias e apêndices FAQs Páginas de erros de servidor Ponto lógico de entrada e página mais visitada do site Visibilidade: 4 superiores formam a região mais visível 13 a 15 áreas mais comuns Além de 15, necessidade de rolagem :-( ou de vídeos maiores ($) Panorâmica: Menu de links, caminhos (ou grupos de interesse) no site, tabela de conteúdo do site

5 Organização espacial Visa direcionar atenção, priorizar info, simplificar navegação e reduzir erros; Design gráfico: usar layout, tipografia, ilustrações e imagens para conduzir o olhar do leitor através da página: Hierarquia visual Formas e cores Gráficos Texto Contraste Equilibrar entre atrair a atenção aumentando os pontos focais com contraste e prover um senso de organização: SUGESTÃO: Textos, links e gráficos pequenos Consistência Layout, tipografia, formas de navegação e temas gráficos repetidos ao longo do site para criar unidade Dimensões Vídeo mínimo comum 14, 640x480: Evitar rolagem vertical (ruim) e horizontal (intolerável) para visualizar a página inteira; Permitir impressão fácil em letter e A4; Área segura para boa impressão Largura máx: 535 pixels; altura máx: 295 pixels Área segura para maximizar uso de tela Largura máx: 595 pixels; altura máx: 295 pixels; perde 2 cm da borda direita quando impressa Comprimento de página 4 fatores: Relação entre página e tela Conteúdo do documento Objetivo: Leitura on-line ou impressão Banda disponível para audiência Rolagem Causa desorientação se elementos auxiliares de navegação não estiverem exibidos (títulos, id do site, links, etc), lentidão de carga e problemas de RAM; SUGESTÃO: páginas com no máximo comprimento de 2 telas (640x480) e links de navegação no início e no fim de cada página, além de botões de jump to top em intervalos Páginas longas deterioram vantagem de telas sobre papel SUGESTÃO: Para ter páginas longas de boa leitura on line e ao mesmo tempo fáceis de imprimir e salvar, divida a página em chunks com no máximo comprimento de 2 páginas impressas; e crie um arquivo separado com o texto unificado para facilitar impressão e/ou salvamento; NÃO esquecer na versão unificada a referência à URL da versão online; SUGESTÃO: Não pensar em layout da página como uma unidade mas sim em função das porções visuais existentes a cada rolagem Exemplo: Parte superior - mais visível,mais densa, mais links Parte inferior - menos visível, menos densa, menos links

6 Diagramação Página sem um esquema de utilização de espaço: perda de legibilidade e usabilidade. SUGESTÃO: estabelecer uma grid básica determinando onde regularmente vão ocorrer os principais blocos de texto, ilustrações, títulos, subtítulos e elementos de auxílio à navegação. Experimente com exemplos representativos de seu texto vários arranjos e situações; lembre-se de adotar um esquema que permite fácil adição de informação sem novos rearranjos para cada página; Lembre que este esquema deve ser válido para a região visível e não para a tela toda!! Cabeçalhos e rodapés Página não é somente uma experiência visual - deve funcionar eficientemente Página é carregada aos poucos: impacto visual é gradual; SUGESTÃO: Não criar gráficos pesados no cabeçalho!! Usar cabeçalho e rodapé como forma de identidade visual do site mas com tamanho adequado SUGESTÃO: Rodapé deve conter dados sobre identificação, autoria e atualização da página, além de links para outras páginas! Tabelas Usadas para arranjar o layout da página; Devemos usá-las respeitando regras tipográficas Tamanho da linha: Linhas menores aumentam legibilidade do texto SUGESTÃO: Limitar tamanho da linha a 10 ou 12 palavras por linha Margens: Separam texto de não-texto; Usá-las consistentemente no site; Colunas 2 colunas ajuda a diminuir tamanho da linha SUGESTÃO: uma de controles (à esquerda) e uma de texto Espaços entre colunas SUGESTÃO: Célula como espaço, CELLPADDING, CELLSPACING Bordas e contornos Em geral invisíveis (BORDER = 0 ) Tabelas (cont.) Dimensões da tabela: SUGESTÃO: tamanho fixo (independente do tamanho da janela do navegador), criar imagens invisíveis do tamanho da célula para manter dimensões da tabela Alinhamento: SUGESTÃO: rótulos à direita, textos à esquerda Tabelas auxiliam melhor a posicionar imagens no layout da tela

7 Frames Frames são meta-documentos que permitem exibir multiplos documentos HTML em uma única janela do navegador Páginas baseadas em frames não funcionam como uma unidade integrada: BOM: facilitam manutenção, boa forma de manter narrativa e consistência de design no site separando itens de navegação e estrutura dos itens de conteúdo RUIM: impõem limitações de impressão, de referência (bookmark) e navegação ( voltar ) e rolagem ; Flexibilidade, Funcionalidade e Interatividade: Designar áreas específicas de uma página para certas funções (áudio, vídeo, p.ex) e dar ao usuário um link para a carga se desejada. - Resumo Entenda a mídia: Online x Download Inclua elementos fixos em cada página: Títulos, autor, filiação, data de atualização, link para homepage do site Não copie estilo, ele emerge do conteúdo Use eficientemente o espaço nobre das telas (4 ) Use cores sutis Cores naturais, evite negrito, experimente em vídeos monocromáticos e impressões Uso homeopático de gráficos! Pequenas doses, grandes efeitos Observações sobre outros elementos Menus e subsites: Para tratar níveis de complexidade; mini homepage para cada subsite; Lista de recursos, links relacionados: Links favoritos dos autores, informação seletiva; Tabelas de conteúdo, índices de sites e mapas de sites: Indicações de amplitude, profundidade e organização do site; Como em impressos, mas menos detalhados (há busca) Páginas de novidades: Perceber novidades nos sites não é óbvio: datas de revisão Marcas NEW versus página ou seção What s new? Observações sobre outros elementos Auxílio a busca no site: Essencial em grandes sites ou grandes páginas Visa informação específica e é complementar a Tabelas de conteúdo, índices de sites e mapas de sites Informação de contato e feedback dos usuários: Prover sempre um para receber feedback Contato: endereço, fones, fax, mapas ou indicações de localização precisas Bibliografias e apêndices: Tornar informação volumosa disponível num site FAQs (Frequently Asked Questions): Questões e dúvidas comuns dos usuários e respostas; reduz suporte Páginas de erros de servidor: Páginas e mensagens customizadas e úteis e não 404 error, file not found!

8 Construção dos componentes do site Marketing Postergada deliberadamente visando amadurecimento da definição e clareza nas idéias de projeto Esteja preparado para refinar o projeto e reconstruir vários componentes do site após os primeiros testes e a descoberta de pontos fracos e oportunidades de melhorias no conteúdo e na navegação Primeiros testes devem ser feitos pela equipe mas os mais importantes são os realizados por pessoas externas à equipe e ao ambiente institucional do site Somente após testes, divulgue a URL do site a uma audiência maior Divulgação do site: URL do site presente em toda divulgação da instituição Definir se a audiência é local, nacional ou internacional Manter site constantemente atualizado, ele agora é uma imagem adicional de sua instituição Avaliação e Manutenção Avaliação por Tracking: Análise de dados de uso do site, investigando log de acesso ao servidor do site e obtenso dados quantitativos sobre: páginas mais acessadas, versões de navegadores usados, localização geográfica dos visitantes; Avaliação Heurística do Site Manutenção do site Atualização de conteúdo Assegurar que gráficos e programação (animação e BD) continuam funcionando Verificar consistência de links internos e externos Dicas Básicas de Web Design (Lynch) Cada site necessita de: Um título informativo; A identidade do site (autor ou instituição) Data de criação e/ou última atualização Ao menos um link para um página local A URL do site principal a que está vinculado, caso pertinente Isto previne 90% dos problemas de usabilidade na Web (Lynch)

9 Dicas rápidas (Nielsen 99) 1. Inserir nome ou logotipo em todas páginas com link para página inicial 2. Desenvolver mecanismo de busca para site com mais de 100 páginas 3. Definir títulos e manchetes com significado claro 4. Estruturar página para facilitar leitura; usar grupo para quebrar longa lista em listas menores 5. Construir hiperdocumentos: não sobrecarregar uma única página mas sim mantê-la com a informação essencial e usar links para páginas secundárias com detalhes Dicas rápidas (Nielsen 99) 6. Fotos I: evitar muitas numa mesma página; colocar foto(s) menor(es) (thumbnails) e permitir que o usuário acione zoom 7. Fotos II: Não reduzir proporcionalmente mas combinar redimensionamento com corte para destacar detalhes importantes e identificáveis 8. Indicar em cada link para onde vai (antes do clic) 9. Adaptar projeto a usuários com deficiências ou necessidades especiais 10. Familiaridade: se grandes sites adotam uma forma, usuários habituam-se a achar que em seu site a forma funcionará da mesma maneira Os 10 erros mais comuns na Web (Nielsen 96) 1. Uso de frames Impedem bookmarks e botão voltar, dificultam impressão 2. Misturas tecnológicas gratuitas Atraem Nerds e podem desencorajar usuários reais 3. Elementos com movimento incessante Atuam sobre visão periférica e perturbam a percepção 4. URLs complexas Nomes relacionados ao conteúdo facilitam busca 5. Páginas órfãs Indicar SEMPRE a pertinência a um site e permitir navegar para página inicial dele Os 10 erros mais comuns na Web (Nielsen 96) 6. Páginas com longas rolagens Todas informações críticas devem aparecer no topo da página 7. Falta de suporte à navegação Explicitar estrutura da informação e indicar posição do usuário 8. Não usar cores padrão para links Links não visitados em azul; visitados em vermelho ou roxo 9. Informação desatualizada SUGESTÃO: Manter conteúdo atualizado; retirar páginas expiradas 10. Longo tempo de carga de página Até 15 s é aceitável

10 Os 10 novos erros comuns na Web (Nielsen 99) Os 10 novos erros comuns na Web (Nielsen 99) 1. Quebrar usabilidade do botão voltar 2a funcionalidade de navegação mais usada 2. Abrir automaticamente novas janelas Usuário que abra por conta própria se desejar 3. Não seguir regras padrão para elementos de interação Viola consistência (p.ex. radio buttons e check box) 4. Falta de autoria Personalizar site, indicando quem é responsável pelo conteúdo 5. Falta de arquivos Permitir download de informações em arquivos: fáceis de manter, acessar ($$) e imprimir 6. Mover páginas para novas URLs Perda de referência de outros sites 7. Manchetes sem sentido fora de contexto Devem ajudar navegação 8. Mudanças freqüentes de terminologia Evitar trocar termos de palavras-chave e expressões de busca 9. Tudo se parece com publicidade Atenção seletiva: usuários evitam tudo que se pareça com pub 10. Servidor com tempo de resposta lento Reduz confiança e diminui número de usuários Guia de Recomendações Referências Ver LabIUtil NIELSEN, J. Projetando Websites. Rio de Janeiro: Editora Campus, ROCHA, Heloísa V. da; et al. Design e Avaliação de interfaces humano-computador, São Paulo, IME-USP, 2000, Escola de Computação PIMENTA, Marcelo Soares. Material de apoio da disciplina. Mestrado em Ciência da Computação, UFRGS, ROCHA, Heloísa Vieira da. Profa. da UNICAMP-SP. Tutorial: Por que Estudar IHC? Introdução aos fundamentos, aplicações, metodologias e desafios. V Simpósio sobre Fatores Humanos em Sistemas Computacionais (IHC), de 7 a 10 de outubro,fortaleza, CE, PREECE, J., Rogers, Y., Sharp, H., Benyon, D., Holland, S. & Carey, T. Human-Computer Interaction. Wokingham, UK: Addison-Wesley 2002.