Desenvolvimento e aplicação de modelo descritivo-normativo para análise de websites

Development and application of a descriptive/ normative framework for website analysis

Desenvolvimento e aplicação de modelo descritivo-normativo para análise de websites

Development and application of a descriptive/ normative framework for website analysis

Stephania Padovani; Carla Galvão Spinillo; Ítalo Mata de Araújo Gomes

UFPR

RESUMO

Este estudo tem como objetivo desenvolver um modelo descritivo-normativo para análise de websites. Inicialmente, explicamos no que consiste a análise de similares, quais os objetivos e benefícios desse estágio no processo de design. Em seguida, descrevemos alguns modelos descritivos e normativos voltados à análise de sistemas de informação e representações gráficas, encontrados na literatura das áreas de design da informação e ergonomia. Por fim, apresentamos uma proposta de modelo descritivo-normativo a ser utilizado na fase de análise de similares em projetos de websites, exemplificando sua aplicação em um website do gênero informativo.

Palavras-chave: Análise de similares, modelo descritivo-normativo, design de websites.

ABSTRACT

In this study, we propose a descriptive and normative framework for website analysis. To begin with, we explain competitor analysis, outlining the aims and benefits of this stage within the design process. After that, we describe a range of descriptive and normative frameworks aimed at analyzing information systems and graphic representations found in Ergonomics and Information Design literature. Finally, we propose a new descriptive and normative framework to be used during the competitor analysis phase in website design, illustrating its application with an informative website.

Key words: Competitor analysis, descriptive framework, normative framework, website design.

1. INTRODUÇÃO

O processo de design centrado no usuário (DCU) compreende uma série de etapas interligadas organizadas em uma lógica iterativa. Durante o curso desse processo, há a alternância de estágios que envolvem diretamente o usuário final com outros que sintetizam as informações coletadas junto ao público-alvo, propõem requisitos de projeto, geram e refinam ideias com base nos requisitos delimitados. Por fim, realiza-se uma validação da(s) solução(ões) proposta(s) junto aos usuários finais para verificar a adequação dela(s) em suas funções prática, estética e simbólica.

A literatura especializada em design centrado no usuário apresenta uma série de propostas de metodologia projetual. Conforme Redig (2006), a formalização da metodologia projetual em design tem como objetivos:

• Atender (usuários, clientes, contextos);

• Abranger (explorar o problema de forma abrangente, trabalhar de forma sistêmica e sistemática, conciliar questões humanas e técnicas);

• Depurar (detectar e corrigir erros durante o processo);

• Inovar (procurar solução diversa das existentes, experimentar);

• Sedimentar (incrementar a durabilidade do produto ou sistema gerado, pensando também em seu pós-uso).

As metodologias projetuais encontradas na literatura apresentam variações entre si, por exemplo, no que concerne ao seu nível de especificidade (e.g., abordagem orientada à tarefa, abordagem sociotécnica), grau de linearidade (e.g., linear estruturado, holístico iterativo) ou forma de envolvimento do usuário (e.g., informativo, consultivo, participativo).

Apenas para o projeto específico de websites (escopo do presente artigo), Ferreira (2006) identificou onze propostas diferentes de metodologia. Entretanto, mesmo diante de tamanha diversidade, há alguns estágios que são comuns a todos os processos de design. Conforme o modelo genérico do processo de design proposto por Wilson e Corlett (1990), apresentado na Figura 1, há quatro fases que caracterizam qualquer processo de design e que se repetem internamente nele: análise, síntese, avaliação e decisão.

Neste artigo, enfocamos um estágio incluído no design preliminar (conforme modelo na Figura 1), na fase de análise, o qual tem sido pouco explorado na literatura da área de ergonomia: a análise de similares.

Inicialmente, explicamos no que consiste a análise de similares, quais são os objetivos e os benefícios que esse estágio agrega ao processo de design, segundo a perspectiva de diversos autores. Em seguida, mostramos alguns modelos descritivos e normativos voltados à análise de sistemas de informação e representações gráficas encontrados na literatura das áreas de design da informação e ergonomia. Por fim, apresentamos uma proposta de modelo descritivo-normativo a ser utilizado na fase de análise de similares em projetos de websites.

2. A ANÁLISE DE SIMILARES NO PROCESSO DE DESIGN DE WEBSITES

Ferreira (2006) realizou um agrupamento por similaridade das etapas e fases do processo de design de websites propostos por onze autores. Em seguida, a autora solicitou que especialistas em design de interface organizassem as etapas e fases, constituindo um novo processo. Como resultado da pesquisa, Ferreira (2006) propôs a seguinte estrutura para o processo de design de websites:

1. definição do projeto;

2. análise dos requisitos;

3. desenvolvimento da estrutura;

4. design e desenvolvimento;

5. prototipagem;

6. testes e avaliação;

7. implementação;

8. design iterativo e refinamento;

9. lançamento;

10. manutenção.

A fase de análise de similares encontra-se na Etapa 2 - Análise dos Requisitos, juntamente com a definição das necessidades e expectativas dos usuários, entendimento do ambiente de uso, identificação das capacidades técnicas, brainstorming para geração de soluções, definição de conceito e escopo e, por fim, criação de objetivos de usabilidade específicos.

2.1 Objetivos e benefícios da análise de similares

A análise de similares aparece na literatura de design e ergonomia sob diversas nomenclaturas. Os termos mais frequentemente utilizados são: análise da concorrência, análise de competidores (competitor analysis), análise competitiva (competitive analysis) ou análise paramétrica de similares. Neste artigo, preservamos o termo empregado por cada autor nas respectivas citações. O termo análise de similares será utilizado no restante do artigo referindo-se especificamente ao processo de caracterização e avaliação dos produtos concorrentes.

Análise de competidores, conforme definição de O'Grady, J. V. e O'Grady, K. V. (2006), é um processo de avaliação de pontos fortes e fracos dos competidores de determinada organização. Segundo os autores, o processo envolve a descrição do perfil do competidor (e.g., histórico, finanças, produtos, mercados, recursos humanos, estratégias de marketing) e auditoria da comunicação da empresa (e.g., relatórios anuais, press releases, utilização de propaganda, presença da marca).

O'Grady, J. V. e O'Grady, K. V. (2006) afirmam que as informações coletadas durante a análise de competidores servem para auxiliar a determinar como transmitir a mensagem, selecionar a mídia de veiculação, definir o público a atingir, mas, principal e essencialmente, diferenciar o produto em desenvolvimento daqueles disponíveis no mercado.

Withrow (2007) define análise de competidores como uma investigação das companhias em determinado setor ou nicho de mercado em que competem com os produtos ou serviços em desenvolvimento. O autor identificou como benefícios/objetivos da análise de competidores: (a) entender os competidores; (b) expandir a base de conhecimentos em uso na construção do website; (c) identificar as melhores práticas nos websites concorrentes; (d) expandir o diálogo dentro do grupo de projeto e com outras unidades da companhia.

Nielsen (1993) apresenta a análise competitiva como uma das fases do ciclo de engenharia de usabilidade. Nesse estágio, segundo o autor, é desejável analisar produtos existentes com base em recomendações de usabilidade além de conduzir testes com usuários interagindo com tais produtos. Ainda de acordo com o mesmo autor, quando diversos produtos competidores são identificados, convém realizar uma análise comparativa das diferentes abordagens utilizadas para resolver as questões da interface para o tipo de produto em estudo.

Essa análise comparativa, conforme Nielsen (1993), possibilita gerar novas ideias e construir uma lista de recomendações ad hoc para abordagens que parecem funcionar, em contraste com aquelas que devem ser evitadas. Com base nos pontos positivos e negativos levantados, os desenvolvedores devem ter como meta superar as soluções de design observadas nos competidores.

Cybis, Betiol e Faust (2007) definem análise dos competidores como uma técnica que visa identificar os pontos fortes e fracos de produtos competidores antes que se comece o trabalho de projeto de seu próprio sistema. Os produtos competidores mais conhecidos são apresentados e suas vantagens discutidas de modo a produzir um breve resumo sobre a situação do mercado no momento considerado. Como resultado da aplicação da técnica, obtém-se uma listagem de características desejáveis e de aspectos desfavoráveis, a serem evitados no futuro produto.

Em síntese, com base nas citações anteriores, pode-se afirmar que os objetivos gerais da análise de similares no âmbito do design de websites são: (a) identificar tendências de solução para os diversos elementos da interface; (b) identificar as melhores práticas nos websites concorrentes; (c) identificar deficiências recorrentes nos websites concorrentes; (d) produzir uma listagem de características desejáveis para o futuro website, assim como de aspectos desfavoráveis a serem evitados.

Convém ressaltar, de acordo com Withrow (2007), que o propósito da análise de similares não é propor um re-design para o website competidor, ou seja, a análise não necessita atingir um nível de especificidade tal que cada elemento gráfico presente em cada uma das páginas seja pormenorizadamente caracterizado e avaliado. O autor recomenda que se evite o excesso de granularidade na análise de similares, pois nesse caso o fator temporal acabará gerando um balanço negativo em uma análise de custo-benefício.

2.2 Formas de condução da análise de similares

Diferentes abordagens foram propostas na literatura sobre como conduzir uma análise de produtos similares/competidores. Nielsen (1993), por exemplo, recomenda que os sistemas competidores sejam avaliados de forma heurística (com base em princípios consolidados de usabilidade), em combinação com testes de usabilidade envolvendo usuários finais do futuro produto.

Cybis, Betiol e Faust (2007) propõem que a análise dos competidores seja realizada na forma de uma reunião do grupo de projeto. Nessa reunião, os produtos competidores mais conhecidos são apresentados, suas vantagens competitivas discutidas pelo grupo, aspectos de qualidade e aspectos falhos são identificados e, por fim, produz-se um breve resumo da situação de mercado. Os autores sugerem ainda que, a partir da realização dessa reunião, a equipe possa optar por aplicar questionários de satisfação ou realizar observações de usuários operando produtos concorrentes.

Withrow (2007) sugere uma combinação de inventários de conteúdo/ferramentas e comparação de funcionalidade entre os competidores. Inicialmente, listam-se as informações contidas no website, assim como as ferramentas disponíveis, as quais correspondem às ações que os usuários podem realizar no website. Em seguida, para a comparação de funcionalidade entre os websites, o autor adota três categorias: (a) rotulagem e taxonomia; (b) estilo visual; (c) pontos fortes e áreas que necessitam de melhoria.

Para avaliar rotulagem e taxonomia, Withrow (2007) recomenda a realização de testes com usuários e/ou card sorting confirmatório. Para a análise de estilo visual, o autor sugere que sejam capturadas telas e incluídas informações sobre a rolagem (vertical ou horizontal) e pontos críticos (positivos ou negativos) do website. Por fim, para a identificação de pontos fortes e fracos, o autor recomenda que se realize uma avaliação com base em heurísticas.

Em resumo, verifica-se que, independentemente da abordagem e procedimento adotado durante a análise de similares, todos os autores consultados incluem dois aspectos comuns na análise dos produtos: caracterização (descrição) e avaliação. Para que essas atividades sejam realizadas, são necessários parâmetros e/ou modelos. Segundo Engelhardt (2002), modelos de análise podem ser descritivos ou normativos. Os descritivos examinam o fenômeno sem emitir julgamento sobre sua correção, enquanto os normativos/prescritivos empregam "regras do bom design" para avaliar a qualidade do fenômeno examinado. Sendo assim, o modelo proposto neste estudo caracteriza-se como descritivo-normativo.

3. ANÁLISE CRÍTICA DE MODELOS DESCRITIVOS E NORMATIVOS EXISTENTES

Durante a revisão de literatura conduzida no decorrer deste estudo não foram encontrados modelos descritivo-normativos específicos para websites. Apresentamos, portanto, a seguir, alguns exemplos de modelos de análise direcionados a sistemas de informação correlatos, comentando sobre sua adequação à fase de análise de similares durante o desenvolvimento de websites.

Na literatura de avaliação de software educativo, por exemplo, encontram-se diversos modelos normativos específicos para esse tipo de sistema de informação. Dentre os modelos pesquisados merecem menção aquele descrito na TICESE (Técnica de Inspeção de Conformidade Ergonômica de Software Educacional) (GAMEZ, 1998) e a ficha de síntese de potencial pedagógico (PEDACTICE, 2000), visto que ambos incluem uma parte descritiva e outra normativa.

No módulo descritivo da TICESE são incluídos os seguintes itens: classificação da modalidade do software, identificação da abordagem pedagógica e complexidade cognitiva. No módulo de avaliação são incluídas questões sobre os seguintes parâmetros: identificação do produto; pré-requisitos técnicos e pedagógicos; identificação dos objetivos pedagógicos; avaliação da documentação; consistência; significado de códigos e denominações; presteza; qualidade de opções de ajuda; legibilidade; agrupamento e distinção por formato e localização; feedback; carga informacional; concisão; ações mínimas; densidade informacional; recursos de apoio à compreensão dos conteúdos; flexibilidade; consideração da experiência do utilizador; ações explícitas do utilizador; controle do utilizador; correção de erros; qualidade das mensagens de erro; proteção contra erros; avaliação do aprendizado; homogeneidade; compatibilidade e adequabilidade. O checklist completo apresenta um total de 278 perguntas fechadas.

O modelo da TICESE foi considerado excessivamente extenso para o propósito da análise de similares. Diversas partes direcionadas à avaliação pedagógica também precisariam ser excluídas caso o website em análise não fosse do gênero educacional. Por fim, considerou-se a parte descritiva do modelo inadequada por não incluir aspectos ligados à arquitetura da informação, sistema de navegação e design visual.

A ficha de síntese de potencial pedagógico (PEDACTICE, 2000) apresenta em sua parte descritiva as seguintes informações: título, editora, data de edição, manuais de exploração, tipo de software, conteúdo principal abordado na aplicação, faixa etário, nível de ensino e área curricular. Apresenta ainda uma sessão referente à avaliação enquanto ferramenta de aprendizagem e outra intitulada apreciação global do produto, na qual avaliam-se os seguintes aspectos: qualidade global (flexibilidade, versatilidade, confiabilidade e ferramentas); facilidade de aprendizagem e de utilização; qualidade do conteúdo científico; qualidade da interface gráfica; qualidade dos materiais de suporte; possibilidade de utilização em rede; motivação e satisfação global (do aluno); pontos fortes e fracos. A ficha apresenta um total de 82 perguntas abertas.

O modelo do PEDACTICE foi considerado de extensão adequada para o propósito da análise de similares. Entretanto, seu enfoque recai principalmente sobre a avaliação pedagógica. A parte descritiva do modelo foi julgada insuficiente por não incluir aspectos ligados à arquitetura da informação, sistema de navegação e design visual. A parte normativa tampouco foi considerada apropriada, pois inclui apenas um item relacionado à qualidade da interface gráfica. Nesse item específico, abordam-se apenas questões relacionadas ao software tirar partido das diferentes formas possíveis de representação da informação, à agradabilidade estética, à simplicidade e à facilidade de aprendizagem.

Na literatura sobre design da informação também são encontrados diversos modelos para análise de sistemas de informação e representações gráficas. Neste estudo, consultaram-se os modelos propostos por Engelhardt (2002) e Bertin (1981), por considerarmos que são passíveis de aplicação à análise de websites. Modelos muito específicos, desenvolvidos para a análise de ilustrações, ou anúncios publicitários, por exemplo, não foram incluídos neste estudo.

Engelhardt (2002) propôs um modelo descritivo para análise de sintaxe e significado em mapas, gráficos e diagramas. O modelo encontra-se estruturado em cinco níveis: representação gráfica, espaço gráfico, objeto gráfico, relações entre os objetos gráficos e relação entre significado e representação gráfica. Na caracterização da representação gráfica, Engelhardt (2002) inclui o tipo de informação e o tipo de representação gráfica (e.g., mapa, gráfico, tabela, símbolo). Espaços gráficos são caracterizados como métricos ou métricos-distorcidos. Objetos gráficos são analisados de acordo com seus atributos espaciais e de preenchimento, funções informacionais e funções sintáticas. Quanto às relações entre os objetos gráficos, o autor considera relações baseadas em atributos gráficos e relações espaciais. Por fim, analisa-se o tipo de correspondência entre a representação gráfica e seu significado (e.g., literal, metafórica, metonímica, arbitrária).

O modelo descritivo proposto por Engelhardt (2002) poderia ser aplicado à análise de websites quando os elementos de cada página específica fossem examinados. No entanto, o modelo não considera representações dinâmicas, além de necessitar de complementação para incluir a descrição da arquitetura da informação, do sistema de navegação e da interatividade do website.

Bertin (1981) propôs um modelo para caracterização de representações gráficas com enfoque exclusivamente na sintaxe visual. As seis variáveis propostas pelo autor são: tamanho; valor (luminosidade); granularidade (referente a texturas); cor; orientação (e.g., horizontal, vertical, oblíqua), forma (e.g., retangular, circular, orgânica) e posição no plano (em duas coordenadas).

O modelo desenvolvido por Bertin (1981) tem aplicabilidade direta na análise dos elementos gráficos utilizados nas páginas dos websites. Porém, à semelhança do modelo de Engelhardt (2002), necessitaria de complementação para abordar também a descrição da arquitetura da informação, do sistema de navegação e da interatividade do website.

Além dos instrumentos descritos anteriormente, considerou-se nesta pesquisa o modelo normativo intitulado ErgoList, desenvolvido pelo Labiutil (1998). O ErgoList tem sido largamente utilizado por pesquisadores e desenvolvedores de sistemas de informação dos mais diversos gêneros (e.g., comércio eletrônico, ambientes virtuais de aprendizagem, sites institucionais). O modelo apresenta um total de 194 questões agrupadas nos seguintes critérios: presteza; agrupamento por localização; agrupamento por formato; feedback; legibilidade; concisão; ações mínimas; densidade informacional; ações explícitas; controle do usuário; flexibilidade; experiência do usuário; proteção contra erros; mensagens de erro; correção de erros; consistência; significados; compatibilidade.

Apesar de o ErgoList ter aplicabilidade direta na avaliação de websites, foi considerado excessivamente extenso para o propósito da análise de similares. Além desse aspecto, como o modelo possui caráter apenas normativo, necessitaria de complementação para incluir uma parte descritiva.

Em síntese, nenhum dos modelos consultados durante a revisão de literatura se mostrou inteiramente adequado à fase de análise de similares durante o processo de design de websites. Portanto, justifica-se a necessidade de desenvolvimento de um novo modelo descritivo-normativo com esse propósito.

4. DESENVOLVIMENTO DO MODELO DESCRITIVO-NORMATIVO PARA ANÁLISE DE WEBSITES

Conforme mencionado anteriormente, o modelo proposto neste estudo destina-se à fase de análise de similares durante o desenvolvimento de websites. Visa, em um primeiro estágio, caracterizar - descrever - cada website concorrente e avaliá-lo, com base em princípios da Ergonomia e do Design da Informação. De posse da caracterização/avaliação individualizada de cada website, torna-se possível realizar uma análise comparativa de websites concorrentes a partir de: (a) mapeamento de tendências de solução para a interface dos websites; e (b) síntese dos pontos positivos e negativos dos websites. Por fim, com base nos resultados obtidos, gera-se uma listagem de características desejáveis e aspectos desfavoráveis a serem evitados no futuro website.

Cumpre enfatizar que a aplicação do modelo não é recomendável para processos de re-design de websites por não possuir detalhamento suficiente para este fim.

4.1 Estruturação do modelo

O modelo proposto tem como base a estrutura descritiva de elementos da experiência do usuário em websites desenvolvida por Garrett (2003). Tal estrutura foi escolhida devido à possibilidade de ser facilmente convertida em uma metodologia projetual para o desenvolvimento de websites. Desse modo, os resultados da análise de similares podem fornecer subsídios diretamente para os diversos estágios do processo de design do futuro website. A estrutura proposta por Garrett (2003) contempla cinco níveis, organizados do mais abstrato para o mais concreto: estratégia, escopo, estrutura, esqueleto e superfície (Figura 2).

No nível inicial, o mais abstrato, encontra-se a definição da estratégia do sistema, ou seja, a delimitação dos objetivos do produto e necessidades do público-alvo. Na sequência, o autor propõe a definição do escopo do sistema, ou seja, que funções serão necessárias para realizar as tarefas e que conteúdos o usuário consultará durante sua interação com o sistema. O nível da estrutura envolve o design da interação (modelo conceitual e estilo predominante de interação) e a arquitetura da informação (ligações entre os nós de informação, formando uma árvore, rede ou outro tipo de estrutura de base para o sistema).

No nível do esqueleto, o autor inclui o design da informação (malha de diagramação e definição de relações hierárquicas), da interface e da navegação. Por fim, no plano da superfície, o autor inclui o design sensorial (também chamado de design visual), ou seja, a definição da modalidade de apresentação de cada um dos elementos informacionais, assim como todos os atributos gráficos associados.

4.2 Princípios e heurísticas consultados

Para o desenvolvimento do modelo foram consultados conjuntos de parâmetros, princípios e heurísticas propostos por autores das áreas de Ergonomia, Interação Humano-Computador e Design da Informação. Inicialmente, agruparam-se os princípios por similaridade e excluíram-se os princípios repetidos (de mesmo conteúdo mas redação diferente). Excluíram-se, ainda, princípios excessivamente genéricos e aqueles princípios cuja avaliação não poderia ser realizada apenas pela observação do website, mas necessitaria de entrevista com os desenvolvedores ou ensaio de interação envolvendo usuários. A seguir, apresentamos, de forma sintética, os grupos de princípios consultados.

4.2.1 Heurísticas de usabilidade (NIELSEN, 1993)

• Simplicidade e clareza no diálogo;

• O sistema deve falar a língua do usuário;

• Minimizar a carga na memória do usuário;

• Consistência;

• Feedback;

• Saídas do sistema claramente sinalizadas;

• Permissão de shortcuts de diálogo;

• Mensagens de erro adequadas;

• Prevenção de erros;

• Help on-line e documentação sobre o sistema.

4.2.2 Princípios para o design de interfaces (MAYHEW, 1992)

• Compatibilidade com o usuário;

• Compatibilidade entre produtos;

• Compatibilidade com a tarefa a ser realizada;

• Compatibilidade com o fluxo do trabalho;

• Consistência;

• Familiaridade;

• Simplicidade;

• Interface de manipulação direta;

• Controle do usuário sobre o sistema;

• Flexibilidade;

• Apresentação do resultado e do andamento dos processos;

• Tecnologia invisível;

• Robustez técnica;

• Proteção contra erros;

• Facilidade de aprendizado, entendimento e utilização.

4.2.3 Oito golden rules no desenvolvimento de interfaces (SHNEIDERMAN, 1998)

• Esforço para ser consistente;

• Permissão de uso de shortcuts;

• Feedback informativo;

• Diálogos que tenham começo, meio e fim;

• Prevenção e fácil correção de erros;

• Reversão de ações simples e fácil;

• Sensação de controle do sistema para o usuário;

• Redução da carga na memória de curta duração.

4.2.4 Critérios ergonômicos (BASTIEN; SCAPIN, 1993)

• Condução;

• Carga de trabalho;

• Controle explícito;

• Adaptabilidade (flexibilidade/experiência);

• Gestão de erros (proteção/correção);

• Homogeneidade/consistência;

• Significado de códigos e denominações;

• Compatibilidade (usuário/tarefa/contexto).

4.2.5 Princípios para o design de sistemas de navegação (FLEMING, 1998)

• Sistema de navegação fácil de aprender;

• Manter-se constante;

• Proporcionar feedback;

• Aparecer em contexto;

• Oferecer alternativas;

• Ser econômico em termos de ações e tempo;

• Disponibilizar mensagens visuais claras;

• Utilizar rótulos claros e inteligíveis;

• Ser apropriado ao propósito do site;

• Fornecer suporte às metas e comportamentos dos usuários.

4.2.6 Princípios para o design de sistemas de informação (PETTERSON, 2007)

Princípios funcionais:

• Estrutura;

• Simplicidade;

• Clareza;

• Ênfase;

• Unidade.

Princípios estéticos:

• Harmonia;

• Proporção estética.

Princípios cognitivos:

• Atenção/Percepção;

• Processamento;

• Memória.

4.2.7 Recomendações para arquitetura da informação (ROSENFELD; MORVILLE, 1998)

Recomendações para organização:

• Categorias mutuamente excludentes;

• Uso de termos não ambíguos;

• Classificação por conteúdo e não por granularidade ou formato de apresentação;

• Equilíbrio entre largura e profundidade;

• Equilíbrio entre hierarquia e hipertextualidade.

Recomendações para rotulagem:

• Uso de termos não ambíguos;

• Expressões curtas;

• Não utilização de vocabulário "interno ao grupo";

• Ícones devem ser rotulados.

Recomendações para navegação:

• Onde estou?

• De onde vim?

• Para onde posso ir a partir daqui?

• Permitir navegação lateral e vertical direta;

• Uso moderado de links embutidos.

Recomendações para sistema de busca:

• Permitir diferentes formas de busca;

• Permitir diferentes níveis (básico, avançado);

• Apresentar as informações da busca de forma consistente com o restante do site;

• Permitir que o usuário escolha o nível de detalhamento dos resultados, a quantidade de resultados e a ordem de apresentação;

• Providenciar busca default de modo que o usuário não necessite configurar nada.

4.3 Categorias e subcategorias do modelo descritivo-normativo

4.3.1 Parte I - Caracterização do website

Nesta primeira parte, o objetivo é descrever o website concorrente desde sua estratégia até o design visual. Cada aspecto contido nas cinco categorias é descrito sem que sua qualidade seja questionada, ou seja, sem emissão de julgamento de valor. Devem-se capturar telas e/ou porções delas para ilustrar as descrições realizadas.

Identificação do website:

• Título;

• URL;

• Instituição responsável;

• Data da última atualização.

Nível 1 - Estratégia (objetivos e necessidades dos usuários)

• Objetivo(s) do website;

• Gênero do website (conforme Ribeiro, 2006: de vendas/de anúncio/de notícias/de informação/de serviços/de discussão/de comunidade/de busca/de entretenimento/portal/híbrido);

• Segmentação de usuários (presente/ausente) - critério de segmentação;

• Possibilidade de customização (presente/ausente) - de que elemento(s);

• Adaptatividade (presente/ausente) - estágio (pré-interação/pós-interação) - forma (conforme Batista, 2008: ocultação/ordenação/sugestão);

• Gestão de erros (presente/ausente) - tipo (prevenção/advertência/mensagem/recuperação pelo sistema/correção pelo usuário);

• Feedback (presente/ausente) - tipo (de andamento/de conclusão);

• Meio(s) de avaliação do site pelo usuário;

• Ajuda/suporte ao usuário.

Nível 2 - Escopo (conteúdos e funções)

• Listagem sucinta dos principais conteúdos abordados no site;

• Listagem das principais ferramentas/ações que o usuário pode realizar no site.

Nível 3 - Estrutura (arquitetura e interação)

• Tipo de arquitetura da informação (sequencial/hierárquica/rede/híbrida);

• Nível de arborescência (largura × profundidade);

• Modelo conceitual (inovação/metáfora/convenção);

• Estilo de diálogo predominante (conforme Cybis, 2003: por menu/por linguagem de comando/por preenchimento de formulário/por manipulação direta);

• Interatividade (conforme Sims, 2007: de objeto/linear × não-linear/independente × consequencial/de suporte/de atualização/de construção/virtual imersiva).

Nível 4a - Esqueleto (navegação)

• Níveis de navegação (global/local/contextual/suplementar/avanço e recuo linear/retronavegação);

• Apresentação de áreas clicáveis (texto/imagem/botão/outro);

• Apresentação de auxílio à identificação das áreas clicáveis (mudança no cursor/mudança no formato do link);

• Feedback ao acionar área clicável (presente/ausente) - tipo (sonoro/visual/ambos);

• Sinalização de área clicável já visitada (presente/ausente) - tipo (mudança de cor/mudança de formato/mudança de posicionamento/outra);

• Indicadores de localização (título e subtítulo/sinalização no menu breadcrumb/outro);

• Reforço não textual à localização (presente/ausente) - tipo (mudança de imagem no cabeçalho/mudança de fundo da página/mudança de cor/outro);

• Ferramenta(s) de auxílio à navegação (presente/ausente) - tipo (mapa do site/índice/histórico/janela de atalhos/outra).

Nível 4b - Esqueleto (diagramação)

• Malha de diagramação (presente/ausente) - variação (malha única/malha por nível hierárquico) - quantidade de malhas diferentes - desenhar as malhas de diagramação;

• Quantidade e especificação das áreas funcionais em cada malha de diagramação;

• Quantidade de níveis hierárquicos por página;

• Rolagem (presente/ausente) - orientação ortogonal (vertical/horizontal) -| área (página inteira/porção específica da página com restante dos elementos fixos);

• Uso de janelas (presente/ausente) - sobreposição (parcial/total em relação à página principal).

Nível 5 - Superfície (design visual)

• Recursos audiovisuais utilizados (texto/imagem estática/imagem dinâmica/som);

• Características dos elementos tipográficos utilizados;

• Características das imagens utilizadas;

• Características dos elementos esquemáticos utilizados (e.g., caixas, faixas, linhas);

• Paleta de cores;

• Manutenção da identidade visual do website (presente/ausente) - recurso(s) utilizado(s) (cor/tipografia/fundo/cabeçalho).

4.3.2 Parte II -Avaliação do website

Nesta segunda parte, o objetivo é julgar cada website concorrente, com base nas questões propostas em cada uma das cinco categorias. Para cada pergunta, a resposta pode ser afirmativa (sim), negativa (não) ou "não se aplica". Além da resposta a cada pergunta, é importante incluir uma breve explicação sobre porque o website foi considerado adequado ou inadequado em cada um dos aspectos analisados.

Nível 1 - Estratégia (objetivos e necessidades dos usuários)

• As possibilidades de customização do website (caso existam) estão claras e facilmente acessíveis a partir de qualquer página do site?

• Os mecanismos de adaptatividade (caso existam) permitem que o usuário navegue pelo website sem interrupção/restrição?

• O website previne a ocorrência de erros?

• As mensagens de erro (caso existam) são claras e construtivas?

• O website apresenta feedback de conclusão e de andamento (quando necessários) de forma explícita e clara?

• Os meios de avaliação do site pelo usuário estão facilmente acessíveis?

• Os mecanismos de ajuda/suporte ao usuário estão facilmente acessíveis, ou seja, é óbvio como acessá-los?

• A ajuda disponibilizada responde às prováveis questões dos usuários e traz mais informações do que as disponíveis na interface?

• O usuário possui controle sobre o website (e.g., é permitido cancelar, desistir ou desfazer ações iniciadas)?

Nível 2 - Escopo (conteúdos e funções)

• O website providencia a informação de que o usuário necessitaria para realizar as tarefas?

• Todos os elementos de cada página são úteis, não havendo repetição de informação ou informação desnecessária?

• Os textos são sucintos (e.g., parágrafos curtos, subtítulos e listas de tópicos)?

• O website não apresenta mais conceitos/grupos de informação por página do que a memória humana consegue reter (em torno de sete)?

• O website emprega a terminologia do usuário, evitando termos ambíguos, técnicos e jargões?

• Existe alguma forma de tirar dúvidas sobre termos utilizados no website (e.g., dicionário, glossário)?

• O website é econômico em quantidade de ações e tempo para concluir as tarefas?

• Existe uma ferramenta/comando específico para cada ação que o usuário pode realizar no website (não há funções ocultas)?

Nível 3 - Estrutura (arquitetura e interação)

• O website apresenta equilíbrio entre largura e profundidade?

• O website apresenta equilíbrio entre hierarquia e hipertextualidade?

• As relações entre nós de informação (estrutura do site) são evidentes?

• As categorias são mutuamente excludentes?

• A classificação de informações em categorias foi realizada com base no conteúdo e não por granularidade ou formato de apresentação?

• Informações diretamente relacionadas aparecem na mesma tela e não em telas diferentes conectadas por links?

• Evita-se o excesso de links embutidos (não se transformam em links todas as palavras-chave que se relacionam com os menus/categorias do website)?

• A metáfora (caso exista) selecionada é adequada ao propósito do website?

• O estilo de diálogo predominante é simples e intuitivo?

Nível 4a - Esqueleto (navegação)

• Os nomes de links são concisos e explicitam o conteúdo da página a que remetem?

• Ícones aparecem sempre rotulados (rótulo fixo ou por aproximação do cursor)?

• Evita-se adicionar comentários explanatórios a links textuais?

• O website diferencia claramente os links já visitados daqueles ainda por visitar?

• O website sinaliza os links que acabaram de ser acionados?

• Links para a homepage e para pelo menos uma ferramenta de auxílio à navegação estão disponíveis em todas as páginas?

• O website apresenta o caminho feito pelo usuário até a página atual?

• O sistema de navegação se mantém constante?

• Todas as páginas aparecem em contexto (orientação global e local)?

• As informações se complementam quando há vários indicadores de localização?

• O site oferece ferramentas de auxílio à navegação (alternativas à navegação nó a nó)?

• A ferramenta de busca (se disponível) possui uma opção default de modo que o usuário não necessite configurar nada?

• O usuário pode escolher as opções de busca e a forma de apresentação dos resultados?

Nível 4b - Esqueleto (diagramação)

• Utiliza-se uma malha gráfica (grid) para a organização dos elementos nas páginas?

• O cabeçalho não toma mais do que 25% da área da janela?

• O cabeçalho e o rodapé estão claramente separados do restante da página?

• Os menus, ferramentas etc. aparecem nas páginas sempre na mesma localização?

• As páginas são curtas (máxima rolagem de 2 ½ janelas do browser)?

• As ações estão posicionadas de forma lógica nas páginas, seguindo a ordem de realização das tarefas?

• Os botões de ação estão próximos dos itens a que se relacionam?

Nível 5 - Superfície (design visual)

• O design gráfico evidencia as relações hierárquicas em cada página e a estrutura do website?

• O design gráfico mantém a identidade visual do website entre páginas?

• A família tipográfica escolhida é comum, familiar?

• O texto é apresentado de forma estática?

• O texto encontra-se majoritariamente alinhado à esquerda?

• Palavras importantes foram destacadas para chamar a atenção do usuário?

• Utilizam-se, sempre que possível, imagens para revelar o conteúdo das páginas, em vez de apenas descrição textual?

• Existe uma relação clara entre as imagens e o texto a que se referem?

• Evita-se o uso gratuito de animações?

• Anúncios (quando existentes) estão posicionados nas bordas externas das páginas, de forma o mais discreta possível em relação às áreas de navegação e de conteúdo?

• As cores foram selecionadas de forma que as páginas também possam ser impressas/lidas em preto e branco?

• O uso da cor é sutil, a não ser quando se deseja deliberadamente chamar atenção para determinado item?

• Existe consistência na apresentação visual das informações e sistema de navegação?

5 APLICAÇÃO DO MODELO DESCRITIVO-NORMATIVO

A fim de exemplificar a utilização do modelo descritivo-normativo proposto, apresentamos a seguir sua aplicação na análise do site Web Style Guide - 2nd edition (LYNCH; HORTON, 2005). A aplicação aqui apresentada visa apenas um melhor entendimento dos critérios e parâmetros do modelo, por meio de um exemplo, assim como a forma de redação dos comentários referentes a cada item do modelo.

5.1 Parte I - Caracterização do website

No exemplo a seguir, optamos por redigir textos sucintos reunindo todos os parâmetros a serem observados em cada um dos níveis do modelo. Uma forma alternativa de caracterização é manter cada um dos itens do modelo e redigir ao lado a caracterização separadamente, sem combinar as informações dentro de cada nível (vide exemplo no Nível 2 - Escopo).

Identificação do website

O Web Style Guide - 2^nd edition (http://webstyleguide.com) tem conteúdo sob responsabilidade de Patrick Lynch e Sarah Horton; sua última atualização ocorreu em 12 de julho de 2005.

Nível 1 - Estratégia (objetivos e necessidades dos usuários)

• O website analisado é do gênero informativo, tendo por objetivo fornecer recomendações para o desenvolvimento de websites no que concerne tanto ao processo quanto aos aspectos estruturais e gráficos da apresentação da informação.

• O website não apresenta segmentação de usuários nem possibilidade de customização ou mecanismo de adaptatividade.

• O site fornece uma página específica de ajuda (Help using this site), além de permitir que o usuário tire dúvidas ou envie sugestões para e-mail fornecido no rodapé de todas as páginas. Entretanto, não apresenta nenhum mecanismo de gestão de erros ou feedback de andamento ou conclusão.

Nível 2 - Escopo (conteúdos e funções)

• Principais conteúdos abordados no site: processo de design de websites, design de interfaces, design do site, design da página, tipografia, estilo editorial, gráficos, multimídia.

• Principais ferramentas: buscar, imprimir, enviar feedback.

Nível 3 - Estrutura (arquitetura e interação)

• O website possui arquitetura da informação hierárquica, com arborescência de 8 × 3 (largura × profundidade), sendo considerado largo e raso. O modelo conceitual é convencional e o estilo de diálogo predominante é por menus. Há interatividade linear e não linear, independente, de suporte e de atualização, sem entrar nos níveis de construção ou virtualidade imersiva.

Nível 4a - Esqueleto (navegação)

• A navegação no website ocorre em nível global e local, existindo ainda as possibilidades de avanço e recuo linear e retronavegação. As áreas clicáveis são apresentadas na forma de texto e o único auxílio existente é a mudança na forma do próprio cursor. Ao acionar uma área clicável, há um feedback visual (alteração na cor), e essa mudança de cor também serve para sinalizar as áreas já visitadas. Os indicadores de localização se apresentam na forma de título e subtítulo, associados à marcação no menu lateral, não havendo nenhum reforço não textual à localização. A única ferramenta de auxílio à navegação disponível é a busca.

Nível 4b - Esqueleto (diagramação)

• O website se utiliza de uma mesma malha de diagramação em todos os níveis hierárquicos. Esta malha, conforme apresentado na Figura 5, encontra-se dividida em seis áreas funcionais. Podem-se identificar, ainda nesta malha, cinco níveis hierárquicos por página. A movimentação dos conteúdos é realizada apenas por rolagem ortogonal vertical da página inteira. Os conteúdos são sempre apresentados em telas ocupando toda a extensão da janela do navegador, não ocorrendo sobreposição por janelas em nenhuma das páginas.

Nível 5 - Superfície (design visual)

• Os recursos audiovisuais utilizados no website restringem-se a textos e imagens estáticas. A família tipográfica utilizada é Verdana, nas variantes normal, caixa alta e negrito, ora em preto, ora em azul (nas áreas clicáveis). Família tipográfica serifada é empregada apenas na logomarca.

• As imagens utilizadas aparecem em cores com função de ilustração na área principal de conteúdo. Os únicos elementos esquemáticos aparecem na forma de uma barra delimitando o cabeçalho e uma linha inferior separando a área de navegação linear.

• A paleta de cores utiliza variantes de azul e a identidade do website é mantida tanto pela aplicação dessa paleta de cores quanto pela tipografia, cabeçalho e logomarca.

5.2 Parte II - Avaliação do website

Nesta parte da aplicação do modelo há duas opções: texto explicativo de síntese ou resposta sim/não/n.a. (não se aplica) a cada uma das perguntas apresentadas. Pode-se ainda combinar as duas opções de modo a realizar uma tabulação quantitativa e qualitativa durante o tratamento comparativo dos dados. Para evitar que essa seção se torne excessivamente extensa e/ou repetitiva, apresentamos o preenchimento apenas dos níveis 1, 2 e 3. No nível 1, utilizamos o sistema de resposta sim/não/n.a. às perguntas. No nível 2, redigimos um texto explicativo sintetizando a avaliação. No nível 3, combinamos as duas opções. Essa variação tem propósito meramente ilustrativo; em situação real de aplicação, deve-se optar por apenas uma das possibilidades.

Nível 1 - Estratégia (objetivos e necessidades dos usuários)

Nível 2 - Escopo (conteúdos e funções)

• O website providencia a informação de que o usuário necessitaria para realizar a tarefa de desenvolvimento de um website. Os textos são sucintos e não há repetição de informação ou informação desnecessária, mas poderiam ter sido incluídas mais imagens, para torná-los menos monótonos. A terminologia empregada encontra-se de acordo com o vocabulário da área de webdesign, mas poderia ter sido incluído um glossário, para facilitar o acesso a públicos de áreas diferenciadas ou menos especializadas.

Nível 3 Estrutura (arquitetura e interação)

• O website encontra-se, em geral, bem resolvido no que se refere à arquitetura da informação. Apenas um ponto negativo foi observado: uso de categorias mutuamente excludentes. Por exemplo, os rótulos site design, page design e editorial style permitem que vários itens estejam enquadrados em qualquer um deles. Interface design também se apresenta como um rótulo muito genérico, onde praticamente todos os aspectos do desenvolvimento de um website poderiam ser incluídos.

5.3 Tratamento dos dados

Após a análise individualizada de cada website concorrente, é necessário realizar uma síntese comparativa das informações. Sugere-se que seja feita inicialmente uma síntese para a caracterização (de modo a revelar a tendência dos websites concorrentes) e outra para a avaliação (de modo a revelar os pontos positivos e negativos observados). Nas Figuras 6 e 7 apresentamos exemplos de partes de quadros de síntese de caracterização e avaliação.

No conjunto de websites apresentados na Figura 6 verifica-se, portanto, uma tendência de arquitetura da informação hierárquica, modelo conceitual convencional, sem utilização de metáfora de base para o website. O estilo de diálogo predominante é por menu e a interatividade mais frequente é do tipo objeto/suporte, não linear e consequencial.

No conjunto de websites apresentados na Figura 7, verifica-se que os principais problemas de arquitetura e interação (nível da estrutura) dizem respeito às relações entre nós de informação (pouco evidentes), classificação por formato e não por conteúdo e excesso de fragmentação, com informações diretamente relacionadas aparecendo em telas diferentes. Como pontos positivos recorrentes dentre os aspectos analisados, é preciso citar o equilíbrio entre largura e profundidade (arborescência), entre hierarquia e hipertextualidade, além do uso moderado de links embutidos. O estilo de diálogo predominante nos sites analisados (links textuais associados a pictogramas) também pode ser considerado bastante intuitivo e consistente com a maioria dos sistemas de menu utilizados nos softwares.

Após as sínteses tabulares e comentários textuais complementares para caracterização e avaliação, é importante gerar uma lista dos pontos positivos e negativos mais relevantes observados na amostra. Com base nessa lista, pode-se, por fim, construir uma segunda lista com as características desejáveis e os pontos a evitar no futuro website. A partir dos exemplos anteriores poderíamos gerar a seguinte lista para o item arquitetura da informação:

• pontos positivos observados nos websites: equilíbrio entre largura e profundidade; equilíbrio entre hierarquia e hipertextualidade; uso moderado de links embutidos; estilo de diálogo predominante intuitivo.

• pontos negativos observados nos websites: relações pouco evidentes entre nós de informação; categorias não excludentes mutuamente; classificação das informações com base em formato e não em conteúdo; informações diretamente relacionadas em telas diferentes.

Poderíamos então listar uma série de características desejáveis para o website em desenvolvimento, com base na avaliação dos similares:

• manter a largura do site entre 7 ± 2 categorias e a profundidade abaixo de cinco níveis;

• evitar estrutura totalmente hierárquica; buscar equilíbrio, acrescentando algumas relações cruzadas e links embutidos dentro das categorias;

• buscar relações intuitivas entre as categorias; utilizando alguma técnica de design participativo (por exemplo, card sorting);

• verificar junto aos usuários em potencial se os rótulos utilizados para nomear as categorias passam a ideia de que estas são mutuamente excludentes;

• classificar as informações com base no conteúdo e não em seu formato de apresentação (texto, imagens, multimídia);

• manter informações diretamente relacionadas sempre na mesma tela; evitando o excesso de fragmentação;

• combinar texto e pictogramas nos menus, para facilitar a previsão pelo usuário do conteúdo de cada categoria.

6. CONCLUSÕES E DESDOBRAMENTOS

O presente estudo teve como objetivo propor um modelo descritivo-normativo para websites a ser aplicado na fase de análise de similares. O modelo apresentado neste artigo foi aplicado pela equipe do projeto durante o desenvolvimento de dois websites na área de saúde: (a) website de suporte ao design de bulas de medicamentos; (b) website informativo sobre bulas de medicamentos para usuários-pacientes. O exemplo apresentado neste artigo se inclui na categoria de websites de orientação ao design de sistemas de informação, tendo sido analisado durante o desenvolvimento do website mencionado no item (a). O instrumento se mostrou adequado aos propósitos da análise de similares além de possibilitar aplicação fácil e rápida, mesmo por alunos de design com pouca experiência no desenvolvimento de websites.

Como desdobramento, está prevista a análise de websites de gêneros diferentes dessa primeira aplicação como, por exemplo, sites de discussão, de comunidades e de entretenimento. A expectativa é que esses sites possam trazer especificidades que enriqueçam o modelo descritivo-normativo proposto neste artigo.

AGRADECIMENTOS

Esta pesquisa foi financiada com recursos do CNPq através do Edital MCT/CNPq 02/2006 - Universal, processo n.o 475694/2006-6.

REFERÊNCIAS

BASTIEN, C.; SCAPIN, D. Rapport Technique 0156. Ergonomic Criteria for the evaluation of human-computer interfaces. Rocquencourt: INRIA, 1993.

BATISTA, C. R. Modelo e diretrizes voltadas ao design de interfaces para web adaptativa. Florianópolis, Santa Catarina, 2008. Tese (Doutorado em Engenharia e Gestão do Conhecimento) - Universidade Federal de Santa Catarina, 2008.

BERTIN, J. Graphics and graphic information processing. Berlin: Walter de Gruyter & Co, 1981.

CYBIS, W.; BETIOL, A. H.; FAUST, R. Ergonomia e usabilidade: conhecimentos, métodos e aplicações. São Paulo: Novatec Editora, 2007.

CYBIS, W. A. Engenharia de usabilidade: uma abordagem ergonômica. Florianópolis: Labiutil, 2003.

ENGELHARDT, Y. The Language of Graphics: a framework for the analysis of syntax and meaning in maps, charts and diagrams. Amsterdam: ILLC- Publications, 2002.

FERREIRA, A. S. Um estudo comparativo de metodologias de projeto para o desenvolvimento de websites. In CONGRESSO BRASILEIRO DE ERGONOMIA, 14, FÓRUM BRASILEIRO DE ERGONOMIA, 4 e CONGRESSO BRASILEIRO DE INICIAÇÃO EM ERGONOMIA, 2, 2006, Curitiba. .Anais. ..

FLEMING, J. Web navigation: designing the user experience. Cambridge: O'Reilly, 1998.

GAMEZ, L. Técnica de inspecção de conformidade ergonómica de software educacional. Manual do Avaliador. Minho: Universidade do Minho, 1998.

GARRETT, J. J. The elements of user experience: user-centered design for the web. New York: AIGA; New Riders, 2003.

LABIUTIL. ErgoList. Florianópolis: UFSC; SENAI-SC; CTAI, 1998.

MAYHEW, D. Principles and guidelines in software user interface design. New Jersey: Prentice Hall, 1992.

NIELSEN, J. Usability engineering. San Diego: Morgan Kaufmann, 1993.

O'GRADY, J. V.; O'GRADY, K. V. A designer's research manual: succeed in design by knowing your client and what they really need. Gloucester (MA): Rockport Publishers, 2006.

PEDACTICE. Análise de Software Multimédia Educativo. Ficha de síntese do potencial pedagógico. Lisboa: Universidade de Lisboa, 2000.

PETTERSON, R. It Depends: ID - Principles and Guidelines. Tullinge: Institute for Infology, 2007.

REDIG, J. Design é metodologia: procedimentos próprios do dia-a-dia do designer. In L. A. COELHO (Ed.). Design Método. Rio de Janeiro: PUC-Rio; Novas Idéias, 2006. p. 169-178.

RIBEIRO, M. B. P. Design experiencial em ambientes digitais: um estudo do uso de experiências em web sites e junto a designers e usuários de internet. Recife, 2006. Dissertação (Mestrado em Design) - Universidade Federal de Pernambuco.

ROSENFELD, L.; MORVILLE, P. Information Architecture for the World Wide Web. New York: O´Reilly, 1998.

SHNEIDERMAN, B. Designing the user interface: Strategies for effective human-computer interaction. Maryland: Addison-Wesley, 1998.

WILSON, J. R.; CORLETT, N. Evaluation of human work. London: Taylor & Francis, 1990.

WITHROW, J. Competitive analysis: understanding the market context. In: Boxes and Arrows: the design behind the design. Disponível em: <http://www.boxesandarrows.com>. Acesso em: 14 junho 2007.

Artigo recebido em 27/01/2009

Aprovado para publicação em 28/06/2009

SOBRE OS AUTORES

Stephania Padovani

Universidade Federal do Paraná - UFPR

Curitiba, PR, Brasil

E-mail: [e-mail]

Carla Galvão Spinillo

Universidade Federal do Paraná - UFPR

Curitiba, PR, Brasil

E-mail: [e-mail]

Ítalo Mata de Araújo Gomes

Universidade Federal do Paraná - UFPR

Curitiba, PR, Brasil

E-mail: [e-mail]

Datas de Publicação

• Publicação nesta coleção
  12 Jan 2010
• Data do Fascículo
  2009

Histórico

• Aceito
  28 Jun 2009
• Recebido
  27 Jan 2009