domingo, 28 de outubro de 2007

UM ESTUDO SOBRE ANÁLISE DE SITES

UM ESTUDO DOS ELEMENTOS PARA ANÁLISE DE SITES COM BASE NA MELHORIA DA COMUNICAÇÃO COM OS CLIENTES E NO ACESSO ÀS INFORMAÇÕES - Francisco Sueudo Rodrigues


ÍNDICE

1– ANÁLISE DE SITE JÁ EXISTENTE E AVALIAÇÃO DE SEUS RESULTADOS

2– ASPECTOS TÉCNICOS A CONSIDERAR NA ANÁLISE DE WEB SITE EXISTENTE:
· Usabilidade;
· Arquitetura da informação;
· Layout da interface;
· Edição - conceituação e soluções;
· Aderência da conceituação (geral ou página a página) ao planejamento estratégico e objetivos de marketing);
• Dados a considerar na análise (Estatísticas de acesso, Estatísticas de contatos, Consulta ao SAC (Serviço de atendimento ao consumidor) da organização, Análise da localização do site nos rankings das principais ferramentas de busca);

3 - ANÁLISE SEMIÓTICA DO SITE JODI (análise sintática, análise semântica , análise pragmática e conclusão)

4 - AVALIAÇÃO DE SITE: PAPO DE HOMEM

5 - ANÁLISE DE SITES








1 - Análise de site já existente - e avaliação dos seus resultados

• A primeira impressão sobre um web site, de caráter mais subjetivo e afetivo, é muito importante e deve ser considerada na análise de um web site já existente
Esta impressão se soma aos aspectos técnicos na avaliação de um site sujeito a redesenho ou revisão, que precise de ajustes de acordo com os seus objetivosAnálise de site já existente - e avaliação dos seus resultados

• A primeira impressão sobre um web site, de caráter mais subjetivo e afetivo, é muito importante e deve ser considerada na análise de um web site já existente

2 - Aspectos técnicos a considerar na análise de web site existente:
• Usabilidade
◊ Aplicação e análise de checklist de usabilidade de autoria confiável, como a do MIT (Usability guidelines), por exmplo
◊ Análise de processos realizados pelos usuários, especialmente se o site vender produtos (considerar o percentual de compras efetivadas, compras interrrompidas, tempo para a realização do processo)
Dependendo da importância destes processos para a realização dos objetivos do site, devem ser feitos estudos detalhados do comportamento dos usuários, como a observação direta das ações, a análise da narrativa dos usuários enquanto realizam o processo ou o acompanhamento dos movimentos dos olhos
A coleta de dados da experiência direta nos permite compreender o comportamento dos usuários e antecipar seus padrões de comportamento, para atenuar as brechas entre seus modelos mentais e os modelos de interação

• Arquitetura da informação
◊ Verificação dos efeitos da visualização rápida da estrutura de informações por pessoas ou públicos diferentes (estruturação clara para diferentes modelos mentais)
◊ Verificação da facilidade de localizar as informações mais importantes
A análise das palavras-chave mais usadas nas buscas internas permite ver se correspondem a informações difíceis de localizar pela navegação entre links
Já a verificação das palavras-chave mais utilizadas nos sites de busca que apontam para o site permite conhecer os termos mais utilizados pelos usuários e o ajuste do conteúdo a estas terminologias
◊ Clareza dos rótulos ou títulos dos links (poucas siglas ou palavras de uso restrito)
◊ Rótulos de links compreensíveis mesmo fora do contexto do site
◊ Clareza do sentido de localização em cada página em relação à página Principal
◊ Presença de recursos para ajudar a navegação (breadcrumbs, mapa do site, sinalizações visuais)

• Layout da interface
◊ Consistência das soluções sistemáticas em relação à conceituação geral
◊ Clareza visual entre os elementos funcionais da interface e o conteúdo
◊ Uniformidade da palheta de cores
◊ Legibilidade dos textos
◊ Composição dos elementos

• Edição - conceituação e soluções
◊ Relevância do conteúdo da página Principal e das seções em que conteúdo novo é inserido mais freqüentemente
Os agrupamentos de assuntos em seções ajudam a dividir o público em grupos com interesses específicos. Num site de comércio, os usuários podem ser divididos de acordo com os produtos procurados, por exemplo
◊ Títulos e textos adequados à conceituação geral
◊ Linguagem compreensível pelos públicos-alvo

• Aderência da conceituação (geral ou página a página) ao planejamento estratégico e objetivos de marketing
◊ Adequação da conceituação à realização dos objetivos estratégicos - da organização e do veículo
◊ Avaliação dos relatórios de acessos e dos indicativos de resultados, para verificar a receptividade do público, principais interesses e características
◊ Avaliação dos aspectos positivos e negativos do projeto anterior a partir da opinião das equipes envolvidas (gerenciais, de conteúdo, de tecnologia)
Muitas vezes a equipe interna formula o consenso de que o site precisa ser redesenhado, mas eventualmente uma estratégia adequada de divulgação (online e offline) para públicos especializados ou de indexação em ferramentas de busca pode trazer os resultados esperados sem precisar reformular o design ou a estrutura de informações
• Acessibilidade da interface (inclusão de usuários com deficiências físicas, usuários com equipamentos antigos ou baixa velocidade de conexão)
• Dados a considerar na análise:
◊ Estatísticas de acesso (relação entre acessos e seções atualizadas mais regularmente, verificação das palavras-chave mais usadas nas buscas internas e externas)
◊ Estatísticas de contatos do público com a organização (via sistema de CRM) - número de mensagens, assuntos levantados
◊ Consulta ao SAC (Serviço de atendimento ao consumidor) da organização, para entender as necessidades mais freqüentes, os problemas observados no site, possíveis soluções e sugestões
◊ Análise da localização do site nos rankings das principais ferramentas de busca
Os testes de usuários e a análise dos relatórios de acesso nas fases iniciais do projeto consolidam as informações observadas, de modo que o site justifique os investimentos financeiros aplicados e consolide o valores intangíveis que a sua presença na web representa

Assuntos relacionados Metodologias de avaliação► Projeto de layout Conceituação Consideração de "checklists" para avaliação de usabilidade Arquitetura da informação - Organização do conteúdo Conhecimento do público e avaliação das necessidades Navegação : Estrutura do site Interface: O espaço da página Textos - atividades relacionadas Estratégia de desenvolvimento - conceituação
Bibliografia (Planejamento de projeto de web site)2) Livro: HomePage usabilidade - 50 websites desconstruídos, de Jakob Nielsen3) Livro: Information architecture for the World Wide Web - designing large-scale websites, de Louis Rosenfeld e Peter Morville4) Livro: Mirando resultados - uma metodologia para planejamento e gestão de projetos de e-business, de Ricardo Almeida e Marcelo Oliveira20) When getting the job done isn´t enough - How insight into users' process makes interactions more satisfying (Human Factors International, acesso em 4.4.2006)


3 – Análise semiótica do site JODILuisa Paraguai Donati
In: Revista da Pós Graduação, Instituto de Artes, Unicamp, Campinas, vol.1, n.2, pp.103-111, 1997.

INTRODUÇÃO
Este trabalho se coloca como uma análise e reflexão das "mensagens", como processos de significação, que são produzidas e veiculadas na WWW (World Wide Web) ou simplesmente Web, abordando os conceitos da Semiótica formulada por Peirce.
Nesta produção em redes de computadores, é importante ressaltar um conceito elaborado por sua própria estrutura interna enquanto uma forma de trabalho, procedimentos, comportamentos, uma ação/pensamento em um contexto partilhado com a possibilidade de interação pelos usuários. Esta estrutura interna atua como uma matriz técnica que transporta e organiza informações numéricas através de linguagens de programação, ao mesmo tempo que atualiza e veicula as "mensagens" com características imagéticas, textuais e sonoras, carregadas de simbolismo. (PRADO,1994: 42)
As redes de computadores tornaram-se, portanto, com a evolução dos sistemas de comunicação e as novas possibilidades tecnológicas da informática, capazes de estruturar um espaço e uma forma como estas "informações" produzidas e/ou simplesmente transmitidas neste meio, são atualizadas, apreendidas e manipuladas pelos usuários.
A Metodologia de Análise Semiótica é a ferramenta capaz de apontar no signo escolhido os elementos trabalhados na representação, sua relação com o objeto e os seus significados. Inicialmente uma descrição dos elementos identificados: Signo, Objeto e Interpretante, e uma posterior análise nos Níveis Sintático (domínio da informação estética, onde suas características materiais, formas e meios emprestam singularidade ao signo), Semântico (domínio da informação semântica pois trabalha com as articulações/relações do signo com o referente, apesar de ancorado no nível sintático) e Pragmático (domínio do significado na produção de sentido e significado para o usuário).
1. ELEMENTOS DA ANÁLISE SEMIÓTICA
Signo
É um elemento de representação de algo exterior, a ele próprio, isto é, o objeto dinâmico. O signo pressupõe uma relação redutiva com o objeto, pois não fornece toda a informação, apenas alguma abordagem sobre este. O signo escolhido é o site JODI, cujo endereço eletrônico é:
· http://www.documenta.de.jodi.org/
· http://www.jodi.org/
· http://www.jodi.org/betalab/
As atualizações e modificações das informações neste meio tecnológico ocorrem com freqüência e podem gerar mudanças significativas, desta maneira informar com precisão a data em que a obra foi veiculada inicialmente não tem mais sentido. O que aparece em muitos sites é a informação da data da última atualização ou a indicação do período que ocorrem. O mesmo pode acontecer com a questão da autoria, em um site muitas vezes não fica explícito o nome do autor, mas apenas a indicação de um outro endereço eletrônico para contato ou sugestões.
Objeto Dinâmico ou Referente
É aquilo que o signo representa; o referente/objeto pode ser único ou não, real, fictício ou até mesmo ser criado pelo próprio signo. O objeto dinâmico é o meio tecnológico eletrônico, o virtual, as redes de comunicação, a Web, o próprio código de construção do meio, equipamentos médicos eletrônicos, o suporte informático e suas interfaces como o monitor, hardwares, softwares, modem, impressora, cartões eletrônicos, mouse, chips, entre outros.
Objeto Imediato
É como o objeto está representado pelo signo, valendo-se de suas características materiais; desta maneira a qualidade desta representação varia com o meio/suporte utilizado.
O objeto imediato é a abordagem específica adotada pelo autor neste site. O site é um produto multimídia com características hipertextuais, isto é, possuem links, conexões que se organizam segundo um fluxograma em estruturas verticais e horizontais. Um produto multimídia é gerenciado pelo computador de forma a coordenar amigavelmente imagens sintéticas, sons, textos, gráficos, desenhos, fotografias, vídeos, com possibilidades de interação e manipulação pelos usuários. (PLAZA,1996).
O site em questão circula na Web e coloca-se como uma experimentação das características do suporte tecnológico, de novas relações ao trabalhar com seus próprios códigos, com as possibilidades de configurações das páginas e com os processos de construção, veiculação e atualização das mensagens no contexto das redes de computadores.
Fundamento do Signo
É a idéia que destaca algumas qualidades do objeto dinâmico e as associa na representação exercida pelo signo.Este site trabalha com as idéias de movimento, fluxo contínuo, transformação, simultaneidade, desdobramento, multiplicidade, ruptura, caos, apagamento e destruição do espaço, da direção, da linearidade, do sentido/função.
Interpretante Imediato
É a composição poética, expressa pelo autor, dos processos e procedimentos de construção e características funcionais da estrutura das páginas deste site, juntamente com todas as associações possíveis relacionadas com esta configuração específica.
Interpretante Dinâmico
É considerado como os possíveis significados produzidos pelo signo em relação ao objeto dinâmico e que são identificados pelos interpretantes, de acordo com o repertório individual.
O interpretante dinâmico são os significados em potencial veiculados pelo projeto específico de configuração deste site, que são suscitados na mente do usuário. É importante ressaltar o repertório específico do usuário, familiarizado com a "navegação" na Web e portanto com a forma de interação com o meio, como um conhecimento incorporado que inicialmente estabelece os deslocamentos dentro do site, mas que na verdade negocia as diversas atualizações que o signo possibilita.
2. ANÁLISE SEMIÓTICA
Para uma melhor avaliação do site nas análises que se seguem, adotou-se algumas páginas que compõem este site para inicialmente identificar as relações estruturais e formais entre os diferentes elementos da composição, sua materialidade, os códigos e as qualidades concretas entre si (Análise Sintática). Em seguida, as relações do signo com o seu objeto serão indicadas (Análise Semântica) para depois no domínio do simbólico (Análise Pragmática) trabalhar com as relações entre o signo, seu objeto e os significados para os usuários. O fluxograma apresentado no Anexo I indica a seqüência destas páginas visitadas com seus respectivos endereços eletrônicos.
2.1 ANÁLISE SINTÁTICA
2.1.1 Do suporte
O suporte desta obra é a estrutura de comunicação em redes, a Web, o Ciberespaço, que possui como mediador para atualização das suas informações o próprio computador e suas interfaces (monitor, modem, impressora, linguagens de programação), camadas técnicas sobrepostas aos computadores que vem transformando as relações usuário/informação/suporte tecnológico. A atualização das informações são limitadas fisicamente pelo display, pela tela do monitor do computador e a sua definição é o resultado direto da relação entre o número de "pixel" e a quantidade de cores escolhidas para a visualização.
2.1.2 Da composição
A composição é gerada pela aplicação de linguagens de programação (HTML e JAVA SCRIPT) e podemos dizer que definem dois níveis de composição: a composição estática, que se refere ao posicionamento dos elementos relacionados à composição gráfica das páginas, e a composição dinâmica, que trata das possibilidades de deslocamentos na mesma página e entre as páginas, a própria navegação. Na composição estática os elementos visuais, que compõem as páginas e que estabelecem as configurações são linhas, planos, formas, texturas e tipologia que interagem segundo relações de cor, dimensão, posição e movimento (sobreposição, permutação, rebatimento, repetição, justaposição).
2.1.3 Como Signo de Qualidade
Esta páginas Web se fundamentam na qualidade de imagens não verbais, que se valem de suas qualidades plásticas e dinâmicas para corporificar este signo. As qualidades estão associadas às idéias de movimento, fluxo contínuo, ruptura, multiplicidade, destruição e apagamento. Estes aspectos são comunicados pelo signo de forma polissêmica.
2.1.4 Como Singular (Sin-Signo)
Toda a obra de arte é um singular, independente de ter sido criada para ser reproduzida, seu fundamento não é mais a autenticidade, o ritual, a "aura" e sim outro, a política. (Walter Benjamin,1969)
Este signo se coloca como um sin-signo, por apresentar uma configuração estabelecida pelo autor de maneira singular, única. É interessante notar que a especificidade deste meio possibilita ao usuário novas relações de interação e leitura, criando a todo momento atualizações de singulares.
A maioria das imagens não apresentam forma figurativa e são bidimensionais; colocam-se como combinações entre elementos plásticos, tais como manchas, formas, linhas retas e curvas, áreas internas e externas, limites de planos de cor bem forte, e texturas, tudo em constante movimento; este movimento dos elementos visuais é obtido com a aplicação de linguagens de programação tais como GIFCON, JAVA SCRIPTS ou SCHOCKWAVE.
As imagens de fundo são criadas pelo programa de edição HTML segundo uma repetição lado a lado, tanto no sentido horizontal quanto no vertical, tantas vezes quantas forem necessárias para cobrir toda a extensão da página. Outros fatores técnicos considerados para esta insistente repetição são as dimensões do display e o tamanho da imagem, em bytes, o que está diretamente relacionado ao tempo de carregamento da página quando da transmissão dos dados para o usuário O espaço de representação é bidimensional e não obedece o sentido convencional de leitura, pois não há referências visuais rígidas que estabeleçam com precisão o percurso do olhar. O fluxo deste movimento estabelece uma possibilidade de composição dinâmica, que pode ser obtida pelo arrastar das barras de rolagem no sentido horizontal e/ou vertical, ampliando desta maneira o limite físico imposto pelo display do monitor. Este site apresenta outra forma de realizar este movimento, utilizando um recurso de linguagem JAVA SCRIPT, normalmente não encontrado em outros sites, o que faz a barra de rolagem se movimentar sem a interferência do usuário.
A possibilidade de novas configurações ganha ênfase com um recurso de programação em JAVA SCRIPT, que compõe a tela em várias outras janelas ou frames, podendo definir diferentes tamanhos e posições. Estes frames são elementos distintos e independentes no momento da navegação no site, isto é, podem conter individualmente um endereço eletrônico diferente e propor assim novas configurações, combinações, e imbricações das imagens ao se escolher um dos frames. Neste site os frames são dimensionados de forma não usual, por exemplo muito estreitos, e assumem posições diferentes do padrão normalmente utilizado (nas bordas das páginas), isto é, ocupando por exemplo faixas verticais no centro da página.
A simples navegação pela página ou pelo site amplia a possibilidade da composição dinâmica, ao considerar-se que a cada percurso estabelecido pelo usuário se forma uma diferente narrativa imagética. Torna-se então importante reconhecer que a navegação acontece não linearmente, mas existe um fluxograma estabelecido, uma estrutura interna que organiza em potência todas as configurações de distribuição dos nós a serem visitados. Este site possui um fluxograma determinado, onde pode ser identificado uma estrutura horizontal, quando as páginas contêm muitas informações no mesmo nível, isto é, a maior parte dos links acontecem em uma mesma página, e uma estrutura vertical, onde cada link se encontra em um nível diferente e pode-se pensar que o tempo de acesso às informações aumenta. A navegação de algumas páginas deste site, com a utilização de um recurso JAVA SCRIPT, acontece independente do usuário realizar uma escolha se o tempo de permanência na página for um pouco maior.
Quando se fala em Navegação Interna, na mesma página ou no Site, define-se uma forma de leitura, que acontece com as páginas dimensionadas para este formato, ou pela rolagem das barras e/ou troca das páginas através de determinados recursos para navegação. Neste site, estes recursos podem ser gráficos (botões, texto, formas geométricas), ou abstratos (pontos, linhas, texturas e planos de cor) ou mesmo áreas escolhidas das imagens (imagem mapeada), e são obtidos pela programação em linguagem HTML, transformando-os num link, ou canal de navegação e responsáveis portanto, pela condução do usuário na página, no site, ou na Web. O interessante é notar a posição e a forma como estes recursos são apresentados nas páginas, distribuídos de maneira incomum, às vezes muito pequenos ou então com a tela sensibilizada em toda a sua extensão, e consistindo de elementos gráficos desde pequenos traços, manchas até planos de cor ou texturas.
Esta obra convida o usuário insistentemente a um comportamento interrogativo, uma atitude exploratória, quando trabalha com os seus recursos de navegação de maneira não formal, sem referencial ou qualquer indicativo que sugira um novo percurso; reforça assim o procedimento eminentemente experimental na tentativa de buscar novos caminhos para a exploração do site, o que resulta em novas configurações e composições dos elementos. A compreensão de cada imagem não depende mais de uma seqüência linear, pode ser recomeçada em qualquer ponto de qualquer nível deste fluxograma.
2.1.5 Como Legi-signo
O jogo proposto por este site fala de si mesmo, como uma reflexão das relações entre os complexos sistemas informáticos e os usuários, e utiliza os próprios códigos. Segue abaixo alguns códigos visuais trabalhados como referência neste trabalho:
· a configuração icônica deste signo depende da linguagem de programação, o editor de HTML (Hypertext Markup Language) que interage com outras linguagens e programas (JAVA SCRIPT, GIFCON) mas atua como o código responsável pelo agenciamento das imagens e pela própria veiculação destas informações na Web.
· os códigos formadores, a linguagem de máquina e outras linguagens posteriores (linguagem C++, Visual Basic). Estes códigos são tratados como referências visuais, imagens, texturas sobrepostas que se somam mas deixam os rastros individuais como em um palimpsesto.
· referências ao código ASCI, que produz imagens por computadores utilizando símbolos gráficos, letras e números. · elementos que caracterizam a identidade visual do Macintosh: o marcador de tempo, a lixeira, arquivos e a forma das mensagens do computador quando algo acontece.
· elementos gráficos e imagens que caracterizam o mundo do "game" eletrônico, figuras estilizadas e bidimensionais com cores fortes: alvos, aviões, bombas.
· elementos visuais com referências de direção e espaço: setas, flechas, telas de radares, planta baixa com altitudes demarcadas e malhas topológicas.
· outros códigos presentes no mundo eletrônico: chips, código de cores, código de barras, o ruído/chuvisco presente na telecomunicação.
· referências visuais à pintura de artistas (Kenneth Noland, Ellsworth Kelly e Frank Stella) que formam a chamada corrente do "hard edge", uso das chamadas estruturas primárias, linhas, planos, corpos coloridos em várias dimensões, muitas vezes transitáveis e, portanto, fruíveis como ambientes.
2.1.6 Como Signo Icônico
A narrativa neste site é sustentada pela imagem. Uma imagem não descritiva, que obedece a uma ordem sintática e está apoiada em um repertório semântico, estabelecida pela composição dinâmica dos elementos visuais presentes e das próprias páginas, determinada pela especificidade do meio tecnológico.
A sintaxe da Web é obtida pelos recursos de programação da linguagem HTML, que se utiliza de características plásticas estabelecidas em outros suportes (cor, forma, posição, dimensão, entre outros) e introduz o movimento dos elementos gráficos, o dinamismo das diversas composições pelo uso de frames ou pelas barras de rolagem e a não linearidade, pela possibilidade de acesso ao fluxograma de qualquer nó e de percorrê-lo segundo a escolha do usuário.
Esta representação qualitativa, imersa na idéia da repetição e no ritmo imposto pelos usuários, cria relações com a intenção de recuperar as características físicas e o próprio conceito do objeto dinâmico. Este signo tem a preocupação de excitar na mente do usuário procedimentos análogos aos que o próprio meio tecnológico evoca, uma busca insistente pelo caminho, pela possibilidade de percurso que os leve a navegar pela Web. A utilização dos recursos para navegação, através dos links que ora abrem janelas/frames criando molduras, ora transportam para outras páginas, acabam por criar camadas que se sucedem mas que coexistem simultâneamente em potência.
A característica da narrativa não linear e interativa permite várias possibilidades de "histórias", de configurações, sem que se tenha começo-meio-fim, reorganizando espaços onde não é estruturado apenas um significado e que pode reunir várias "linguagens" para construir um objeto, onde uma imagem pode remeter a um texto, que pode remeter a um som, e assim por diante.
O conceito de desdobramentos, da relação da parte com o todo, constrói a imagem de forma fragmentada e recortada. Este conceito é vivenciado na medida em que as páginas vão sendo atualizadas pelo usuário, que percorre o seu caminho pelo site, sem ter noção e nem poder visualizar o todo. A característica de fragmentação das páginas Web em frames e/ou janelas, reforça este conceito e estabelece as relações com o meio tecnológico.
2.2 ANÁLISE SEMÂNTICA
Do ponto de vista semiótico pode-se constatar no signo em questão uma narrativa qualitativa, de formas icônicas que procuram expor, ao mesmo tempo que subvertem, os conceitos elaborados por este meio tecnológico, sua linguagem de programação específica, seus próprios códigos e suas possibilidades técnicas para construir e transmitir informações.
As imagens trabalhadas nestas páginas estão associadas à informações específicas do meio e que podem estar relacionadas aos procedimentos dos usuários e aos processos realizados pela máquina. É possível identificar formas visuais que representam arquivos, os endereços de sub-rotinas são denominadas com nomes de procedimentos usuais (cancel, load, clear, save, edit, cache, configure, entre outros), o ícone que representa a passagem do tempo no Macintosh (em alguns momentos o círculo que gira e em outros a "mãozinha"), latas de lixo para onde vai tudo que se "deleta", o elemento visual (um quadrado com um ponto de interrogação no interior e o canto direito superior cortado) que indica que a imagem não foi carregada, o símbolo da America on Line (a letra A e O).
A questão do vírus no computador é vivenciado com muita importância por todos os usuários da informática, não apenas os da Web, a ponto de existirem boatos de falsos vírus (como o Goodtimes). Todo este ambiente está referenciado neste site pelo uso do próprio nome de vírus em alguns links (alguns nomes reais: disk killer, keypress.1232.A, Word Macro Virus), nas imagens, nos textos como nos efeitos produzidos na interface informática e na comunicação, gerando panes (nada mais de movimento) ou "looping" (termo que significa um movimento em círculo sem saída), que incomodam a todos os usuários.
Outros elementos visuais apresentados como letras, números, fórmulas e símbolos matemáticos, fluxogramas, textos que contêm informações semânticas de linguagens de programação: de máquina, C++, Visual Basic (como texturas de imagens), que tratam a questão do virtual, do que está em potência neste meio tecnológico.
Referências indiciais de direção, localização e espaço são identificadas em algumas formas geométricas como a seta que representa a atuação do mouse, planta baixa com altitudes, as malhas topológicas que representam relevo e flechas apontando em vários sentidos. Estas noções são amplamente questionadas neste meio tecnológico das redes, quando as referências espaciais se transformam, passando dos eixos cartesianos para uma estrutura de malha onde os nós se associam sem controle rígido e o movimentar-se, os deslocamentos nesta estrutura, implicam na atualização das informações, que existem simultâneamente em potência.
Imagens gráficas com formas regulares e contínuas como a borda dos formulários de impressão de computadores e a película fílmica que aparecem na vertical das telas, trançando e se imbricando com outros elementos e com o fundo, acentuam a questão do movimento. Os códigos de barras, os cartões perfurados, os códigos de cores, as imagens associadas aos "games" eletrônicos e os gráficos com referência ao batimento cardíaco, trabalham como interfaces das informações entre o homem e a máquina, quer seja o computador, a televisão ou o equipamento médico.
A maioria das imagens se apresenta repetidas vezes e esta idéia da repetição, repetição acompanha todo o site e faz referências desde à produção da imagem, como produto de um código que faz deste procedimento a sua ordem formadora, ao comportamento operacional das linguagens de programação que estabelecem sub-rotinas, para procedimentos mais simples, que são reexecutadas quando necessário.
3. ANÁLISE PRAGMÁTICA
Neste nível de análise os significados associados à visualização e à navegação do site, dependem do repertório do usuário/interpretante. As imagens são trabalhadas em excesso com a questão da sobreposição, imbricação na composição das páginas, começando por definir significados na abordagem da Tecnologia como o produto de camadas sucessivas de conhecimentos, que viabilizam o sentido e o significado para o homem. Uma tecnologia que assume os novos conceitos impregnada e ancorada em alguns dados já estabelecidos e que propõe outros específicos do meio.
Na forma de utilização destas novas tecnologias na comunicação em redes de computadores é que este site vem colocar questionamentos. Esta proposta trabalha com os códigos, os procedimentos e os comportamentos desta mídia, ao mesmo tempo que assume a possibilidade de reverter, desorganizar os resultados e destruir os significados esperados.
O tratamento extremamente habilidoso destas páginas, que brincam com uma incursão não linear, hipertextual e interativa, específica desta mídia, permite uma exposição que envolve significados mais profundos quando trata o comportamento, a complexa relação humana com o virtual tecnológico. As imagens trabalham insistentemente com a expectativa do usuário, jogam, brincam, propõem uma busca frenética e incessante para determinar os links e estabelecer relações de sentido, mas terminam por destruir/apagar/"deletar" o que está "arquivado" como os conceitos de direção e de espaço. Estas relações de significado rompem com o esperado e são reforçados pelos processos de reconstrução e de veiculação de informações neste meio. O autor deste site trata constantemente com o que está estabelecido, ao utilizar-se de suas estruturas/fluxogramas e de seus códigos formadores que conduzem a um comportamento e associações esperadas pelo usuário, diante de seu repertório de navegação na Web. Reforça assim o conhecido, para no momento seguinte quebrar toda a expectativa, romper com as certezas, deixando o usuário cair, desabar, perder-se em sensações e sentimentos que desarmam as afirmações "pra onde se vai" e "de onde se vêm", trabalha com a imagem de labirinto.
O usuário procura sentido para as conexões realizadas, que não atuando como o conhecido, geram um desconforto pela desordem provocada e pelo inesperado. Associada à esta idéia de desconforto, o sentimento constante de medo dos vírus, das doenças, que conseguem danificar e apagar a memória das máquinas e a vida das pessoas. Uma ameaça permanente que dependendo da escolha de percurso do usuário chega ao fim, ao nada. O usuário fica em "pane" ou entra em "looping"! Este site configura "máquinas", que não trabalham como o esperado e rompem com a relação de significado e objeto. Produzindo uma sensação de imersão na tecnologia da comunicação em redes e trabalhando com a idéia de burlar o comportamento estabelecido utilizando os próprios códigos de produção e corrompendo a função estrutural e semântica das informações produzidas e veiculadas neste meio.
Na relação homem-máquina, existe a necessidade de interfaces para que se estabeleça a comunicação, para que uma informação reconhecida pela máquina torne-se legível ao homem e transmita assim um significado. Este ir e vir de códigos, como traduções sucessivas que se sobrepõem em níveis, trabalhados pelo repertório do interpretante, é representado neste site por imagens de texto que se transformam em códigos de barra, enquanto o código de cores da linguagem HTML traduz a cor vermelha para um número binário. Este site apresenta esta intertextualidade entre códigos, mas vem reverter esta situação, na medida em que produz ruídos, "chuviscos", interferências e não efetiva a comunicação, por não alcançar o sentido esperado.
CONCLUSÃO
Uma atitude criativa do autor, no exercício da liberdade com a linguagem e o meio, radicalizando e questionando a sua finalidade com consciência de linguagem. A mensagem torna-se auto-referente e revela a materialidade do seu suporte. É uma arte em si, na sua qualidade. (Julio Plaza,1986)
Este signo pode ser dito de Primeiridade, um signo icônico por apresentar uma narrativa imagética ancorada na sintaxe do próprio meio tecnológico. Como um ícone cria o seu objeto imediato, que experimenta as possibilidades de composição e de construção de mensagens na Web, mas ao mesmo tempo joga, brinca, rompe e desarticula as relações, as referências com o seu objeto dinâmico.
Portanto, em nível de Segundidade temos a representação do conflito gerado pela utilização das estruturas/fluxogramas, dos códigos formadores (como a linguagem de HTML, linguagem de máquina, C++ e outros) e dos códigos visuais que envolvem o mundo eletrônico na produção de mensagens, com o resultado de uma comunicação que não acontece, por não expressar o esperado.
Aí pode-se falar em nível de Terceiridade, quando os significados produzidos pela representação do objeto dinâmico rompem com a expectativa dos usuários/interpretantes, que não estabelecem sentido e significado para as conexões realizadas durante a navegação pelo site. Como esta relação do repertório do usuário com o próprio meio tecnológico, com a navegação pela Web e com o conhecimento das linguagens de programação e edição em HTML, determina a apreensão de sentido e amplia o entendimento dos recursos utilizados pelo autor, este signo torna-se predominantemente pragmático.
BIBLIOGRAFIA
BENSE, Max. "A Pequena Estética", São Paulo, Editora Perspectiva, 1975.
CALABRESE, Omar. "A Linguagem da Arte", Rio de Janeiro, Ed. Globo, 1987.
DONATI, Luisa Paraguai; CARVALHO, Hélio; PRADO, Gilbertto. "Sites da Rede Internet: considerações sobre o design gráfico e a estrutura de navegação" in Cadernos de Pós-Graduação, n.1, vol.1, Instituto de Artes, UNICAMP, 1997.
LÉVY, Pierre. "As Tecnologias da Inteligência: o futuro do pensamento na era da informática", Rio de Janeiro, Ed. 34, 1993.
___________ "O que é o Virtual?", São Paulo, Ed. 34, 1996.
PLAZA, Julio."Videografia em Videotexto", São Paulo, Editora Hucitec, 1986.
__________. Anotações de aula, 1996.
PRADO, Gilberto. "As Redes Artísticas Telemáticas" in Imagens, n.3, p.41-43, Dezembro, 1994.
SANTAELLA, Lúcia. "O que é Semiótica?", São Paulo, Ed. Brasiliense, 1983.
VENETIANER, Tomas. "HTML: desmistificando a linguagem da Internet", São Paulo, Makron Books,1996.
WATERS, Crystal. "Web, Concepção e Design", São Paulo, Ed. Quark, 1997.


4 - Avaliação de site: Papo de Homem

E mais um site famoso, o Papo de Homem! E que fama, com menos de um ano ele já conseguiu a incrível marca de mais de 1500 assinantes nos feeds (eu nem passei dos 300 :P), e milhares de acessos ao dias (quantos? só o Guilherme poderá nos dizer :D). O tipo de site que eu leio e gosto. Com textos até sobre saúde! Enfim, chega de elogiar. Vamos à parte mais legal: Avaliar.
Acessibilidade
Um erro comum foi cometido aqui, a acessibilidade parcial. Pra quem usa leitor de tela, ótimo tem um link “pular para conteúdo” logo de cara. Para quem usa “normalmente” é só abaixar a tela um pouco e está no conteúdo. Mas pra quem acessa sem o mouse (ou seja, acesso apenas via teclado) são 24 TAB’s para chegar ao conteúdo.
Ao carregar o site, percebi uma demora absurda, foram 48s em conexão de banda larga; o ideal seria 10s, no máximo 30s. Comentarei depois o tamanho do site, mas aqui acho que a questão mais grave é a linkagem de um CSS que não existe. O CSS para um plugin (Form Mailer Plugin, creio eu) leva a um arquivo inexistente. Isso mata o navegador, ele fica muito tempo parado tentando ler o arquivo e não renderiza o resto da página. Se tivesse apenas uma declaração ali no CSS (mesmo que fosse *{color:#000} ) e o arquivo existisse seria melhor.
Faltou identificar o idioma do texto. Imagina um leitor americano lendo esse site? Ia ficar no mínimo estranho.
Faltou um alt (linha 272 - Dá-lhe DaSilva!) em uma parte onde ele é extremamente importante, no noscript (ledores de tela não têm suporte a JS).
Há um target _blank. O MAQ já me puxou a orelha por isso, e agora parei de usá-lo. Ele explicou que para pessoas com visão subnormal (amblíope) a página nova aberta acima acaba confundindo-se com o conteúdo e as cores da página ao fundo, o que gera ao usuário o trabalho de ir à página original para fechá-la (ou seja, você perde o usuário de vez, pois não há mais o “voltar”) e acabar com o incômodo. Fora o fato de invalidar o (x)HTML.
Há um elemento considerado “ultrapassado” utilizado no documento (linha 378, tag “u” - Dá-lhe DaSilva [2]).
Um outro erro foi não colocar alt em todas as imagens que são títulos de seções. Elas têm apenas o atributo title, mas a maioria dos ledores de tela só lêem o alt.
Arquitetura da Informação
Gostei da forma como foi organizada a página, as 3 colunas favorecem esse tipo de site (aliás, ultimamente quase todos os tipos de sites ficam mais bem utilizados em 3 colunas - é hora de repensar o layout do web bem feita :D), com um destaque às seções mais famosas (dr. Love, dr. Money…). Só acho que poderia ser melhor a organização do “miolo”, como se tem um espaço muito grande (~500px) poderia ter sido utilizada a idéia do layout anterior que colocava mais artigos “de cara”, lado a lado.
Código
Confesso que essa parte deixou a desejar. São vários erros de validação de HTML e CSS. “Ora,mas você diz que o selo não é nada!”. E não é mesmo, mas os erros que o site tem interferem na renderização (causando uma demora), na apresentação (algumas tags, como a “u” não deveriam ter sido utilizadas; outras deveriam ter elementos contendo-as) e até uma queda na acessibilidade (com a demora dificulta-se o acesso). Isso sim é ruim. Não fosse isso não haveria problema (pra mim) o site não ter código válido.
Conteúdo
Vixe. Nota 10 sem nem pensar muito. Primeira nota 10 nesse quesito, em todas as avaliações! Um ponto que destaco é quanto o blog preza pelo português bem escrito. Além dos ótimos textos, sem uma linguagem difícil demais.
Estética
Ficou muito mais bonito dessa vez. Como disse o layout de 3 colunas aproveita melhor o espaço. A centralização dele também. O único ponto que faltou aqui foi uma “marca” do site. Ou a preservação da marca anterior, que eu achava muito “style”
Heurísticas
Faltou um feedback maior no título. “Papo de homem, o que é isso? Revista? Então é só pra homem? O que tem aqui?”. Uma frase curta abaixo do título solucionaria isso. Algo como “Conselhos amorosos, dicas financeiras, papo furado, esportes, fórum de discussão, um canto só para mulheres.. e muito mais!”. Ok, o “muito mais” não foi lá o que eu chamaria de descritivo, mas vale a intenção.
Faltou também um feedback maior quanto a seção atual, mais isso entra mais em navegabilidade
Navegabilidade
Cadê o link para a home? Eu sei, o nome do site é um link, mas o link em si faz falta. O recurso do nome do site como link não consegue substituir o link no menu. Ele faz muita falta.
Faltou um estado “active”, como feedback ao link que se está visitando, principalmente em links do menu principal.
Um estado over nos links de seção ajudaria a definir que eles são links.
A área abaixo é bem interessante também, mas há o “quem nos linkou” que está vazio. “Coitadinhos, ninguém linka eles!”. Se não está funcionando ainda, basta retirar. Uma lista dos artigos recentes caberia ali perfeitamente.
Migalhas seriam uma boa pra esse site, colocando inclusive um novo link para a home.
A questão do voltar a home é séria. “A home é o melhor lugar” diria Steve Krug. É o ponto de partida para tudo, é uma referência muito forte, não ter ela clara confunde o usuário. Além do estado “Onde estou” que a navegação provoca (não há nenhum feedback da navegação).
Page Rank
Page rank 4. Acho que o pessoal da Google tá louco, com a quantidade de links que eles recebem tinha que ser no mínimo 6
Tamanho dos Arquivos
Aqui o tamanho deu ~260kB. Bem grande. Só o banner de propaganda e o Widget do “We show” consomem ~120kB, será que vale? Os textos sumarizados na home têm um tamanho muito menor (tanto em peso quanto em dimensão), mas os bytes economizados no texto são consumidos por outros recursos “secundários” do site.
Tarefas
Há tempos não fazia um teste com tarefas “reais”, dessa vez foram 2 bem simples:
1. Descobrir o que é o site, e que tipo de informação há nele.
2. Encontrar algum artigo do dr. love e descobrir “o que” ele é.
Agora vamos ao screencast (com narração, a transcrição aproximada dela aqui abaixo). Desculpem as sopradas no microfone, mas se eu não falar em cima dele ele não pega o som (é daqueles que fica no fio do fone, então eu tenho que ficar segurando ele ainda pra falar).
OBS: Murphy atacou na avaliação e justo na hora que fui mostrar um exemplo no Web Insider de um erro por lá :/ Mas vocês conhecem o WI e com certeza entenderam a idéia Parte 1:http://br.youtube.com/watch?v=eODlrrKIt9QParte 2: http://br.youtube.com/watch?v=Wl0CJ_Ft8Qs
Arquivo compactado no 4shared: vídeo .rm, compactado .rar (Qualidade baixa, sem música ao fundo :D) 3,57MB.1-Descobrindo o siteNa home não há muita informação então vamos procurar algo mais específico (nessa parte mal se nota o texto em branco, já que ele está na área de “cegueira do banner” [Fenômeno estudado por Nielsen, mostra que muitos usuários simplesmente ignoram os banner e vão direto ao conteúdo]) .
Equipe? Pode ser ali. Equipe grande.. maasss… nada aqui.
Contato? Talvez, não há nada mais específico sobre o site. Nada novamente.
E agora? Colunas, Seções? Passagem rápida, mas nada novamente.
Última esperança: Busca [por: informações “papo de homem”]. Nada.
Sucesso: 0 (sim, zero).
Conclusão: Se até uma página de política de acessibilidade há (algumas coisas ali não estão certas, como sobre os alts), porque não uma descrevendo o site, a idéia, as conquistas… Seria algo bem interessante.2-A busca pelo Dr. LoveNa home já há algo sobre a seção dele. Vamos lá.
Opa! só tem texto por aqui. Vamos tentar outra coisa…
Bem, isso é uma coluna, logo em “colunas” deve ter algo!
Mais texto. Em dose tripla!
E agora? Nenhum link parece me levar a informação que eu quero.
Busca novamente [por: “informações dr love”; na hora que eu edito o site fica o título “A Busca não retornou resultados” e abaixo: “Você procurou por: ‘informações dr love’.
Desculpe, o conteúdo procurado não foi encontrado]
Mais uma vez, acaba a avaliação.
Sucesso: 0 (sim, zero, de novo).
Conclusão: Além de informações sobre o site seria legal ter ao menos informações sobre os autores mais “famosos”. Nem que seja só o básico, como no Web Insider.Revelando a covardia :]“Rochester, você definiu tarefas que você sabia que não seriam cumpridas!”. Sim, eu fiz isso. Por 2 motivos básicos:
1. Realizar com alguma tarefa que fosse rápida não ia nem compensar o trabalho de gravar minha voz terrível e meu mouse tremulante.
2. São pontos importantes pro site, e pra mim fez falta de verdade.
“Mas assim você vai zerar o site nesse quesito!”. Não sou tão mau assim. Sei que há milhões de outras tarefas que seriam executadas sem dificuldade nele, por isso serei razoável na nota
Usabilidade
Além das muitas coisas já mencionadas que interferem na facilidade de uso, sobram poucas considerações.
Algo que poderia ser útil e facilitar o uso seria as migalhas de pão, induzindo o usuário a vasculhar toda a seção do artigo que ele gostar.
O fórum ainda segue o padrão antigo do layout. Leitores novos podem se confundir “opa, não cliquei pra ir ao fórum do Papo de Homem? Que site é esse aqui?”.
Nos blocos à esquerda facilitaria ao usuário se todo o texto fosse linkado, indicando que é apenas um trecho e que há algo mais.
Como sempre, os testes são muito mais reveladores que as análises. Basta definir uma tarefa e a coisa muda. Como foi visto, faz falta aquele texto de duas linhas, explicando o site, ou o autor. Ou mesmo o texto que aparece após a busca (”você buscou por ‘Blá’ e teve como resultado 375 textos:”).
Um assunto meio pessoal é propaganda de pôquer em um site desse “nível”. Tenho minhas ressalvas quanto a isso. Vai que o usuário relaciona a propaganda ao conteúdo do site (pois o banner está na parte interna do site, e não “fora” como na maioria dos casos). Adsense não seria melhor para vocês?
Nota Final
· Acessibilidade : 7.5
· AI : 9
· Código : 7.5
· Conteúdo : 10
· Estética : 9.5
· Avaliação Heurística : 9
· Navegabilidade : 8
· Page Rank : 4
· Tamanho dos arquivos : 7.5
· Tarefas : 9
· Usabilidade : 8
Nota Final: 8.125
Ao final o que pesou muito foram os erros na acessibilidade, e navegabilidade (interferindo na usabilidade). Por outro lado temos uma nota 10 em um quesito que a melhor nota até agora tinha sido 9. No fim o site acabou muito bem e em 2° lugar no ranking dos sites avaliados, que agora já são 9 sites.
[Off: Se tiverem uma hospedagem boa e barata pra me indicar, agradeço. Essa aqui anda caindo MUITO e me deixou na mão no meio da edição desse post (pois é, perdi parte do que tinha escrito)]
Se gostou desse, leia mais:
· Avaliação de site: CIA2 May 27th, 2007
· Avaliação de site: Web Insider July 1st, 2007
· Avaliação de site: Yeltsin Lima July 16th, 2007
· Avaliação de Site : IdeiAtiva April 2nd, 2007
· Avaliação de site: MSI Tec May 5th, 2007
Se gostou desse, leia mais:
· Avaliação de site: MSI Tec May 5th, 2007
· Avaliação de site: Yeltsin Lima July 16th, 2007
· Avaliação de site: Papo de Homem October 20th, 2007
· Avaliação de Site: Felipe WebDesigner June 20th, 2007
· Avaliação de site: PDA Expert August 3rd, 2007
Depois de muito brincar com isso, dividirei meus estudos do “css painting” - ou “desenhando em css” no bom português. A técnica consiste em usar apenas recursos do CSS para criar imagens completas. Uma das mais básicas é a de se criar linhas diagonais via css.

Entendendo o conceito
O que vamos fazer é apenas a aplicação de conhecimentos a respeito do box model (ou seja em browsers antigos essa técnica não funciona), a parte que nos interessa é apenas essa:
Assim fica bem claro as bordas de um box, e que a divisória entre elas são diagonais. Serão essas as diagonais utilizadas para os desenhos. Lembrando, isso não vale só para divs: qualquer elemento que aceite o border pode ser utilizado! Assim há infinitas possibilidades de estilização para links, divs, imagens, headings… A utilização mais comum é colocar uma das bordas da mesma cor do fundo, assim cria-se a ilusão de que a borda lateral e o fundo do site são um só, e tem-se a diagonal da borda que está de cor diferente.
Uma coisa extremamente importante, ao usar diagonais evite distorcer as linhas, ou seja, use o tamanho igual em todas as bordas (sempre que possível, claro) assim ela não fica com o aspecto serrilhado no windows (no Linux e no mac há o anti-aliasing que elimina esse efeito serrilhado, e no windows apenas o safari faz isso).
Mundo de possibilidades
Notem a diferença (simples) em:
· links
· links
· headings (h3)
· headings (h3)
· textos com combinações de bordas.
· textos com combinações de bordas.
· imagens
· imagens
É bem pequena a diferença, mas normalmente os detalhes fazem a diferença.
Para quem não sabe nada de CSS, o código é bem simples, basta inserir isso na tag:
style="border: #cor Npx estilo;"
Se eu quero, por exemplo um heading, com borda acima e abaixo e diagonais, azul vivo (#00f) em um fundo branco de 3px, eu colocaria assim:

Texto de título


Vale lembrar que medidas, estilos e cores seguem às normas da W3C, e há uma infinidade de possibilidades de medidas, formas de escrita, estilos e combinações de tudo isso.
No Four Shapes há um artigo sobre essa técnica de linhas diagonais via CSS, rápido e prático.
-


Se gostou desse, leia mais:
· Galeria de Fotos com CSS June 23rd, 2007
· Background em Porcentagem May 14th, 2007
· PNGFix - Dica para transparência em qualquer PNG April 12th, 2007
· Dicas para trabalhar com CSS July 8th, 2007 May 21st, 2007
· 10 Dicas práticas de Acessibilidade August 22nd, 2007
· Testando com vários IE's June 27th, 2007
· Mapa do site May 23rd, 2007
· Quantos usuários temos na web? July 30th, 2
· Power of Schmooze - o maior Meme da internet August 29th, 2007
· Admita, blogueiro é preguiçoso May 19th, 2007
· Intercon 2007 "de grátis" August 10th, 2007
· Meme: Você é um blogueiro Anti-Social? September 21st, 2007
· Dicas rápidas October 1st, 2007


5 - Análise de Sites
Vamos ajudá-lo a compreender porque seu site não apresenta resultados e o que fazer para alcançá-los
A Interactis avalia de forma ampla sites e portais, desde os textos até a usabilidade do site e o nível de interação proporcionado para os diversos públicos que o acessam.
Através deste estudo a Interactis fornece aos seus clientes um diagnóstico preciso do nível de interação proporcionado pelo site atual e quais as melhorias necessárias para que esta interação possa trazer melhores resultados à empresa.
Após o estudo, é elaborado o Planejamento Estratégico do site, que permite corrigir os erros encontrados na análise e definir as ações necessárias para a melhora no desempenho do site, traduzindo em resultados a análise efetuada.
Estes resultados poderão ser observados através de retornos tangíveis e intangíveis:
· Aumento na percepção de qualidade da empresa como um todo
· Redução da taxa de abandono do site
· Aumento no número de cadastrados no site
· Atração de mais candidatos a trabalhar na empresa
· Maior exposição na mídia
· Redução nos custos de atendimento
· Aumento no número de novos projetos
Como objetivos gerais, todo site deveria:
· Contribuir para o mindshare
· Dar suporte no conhecimento e divulgação da marca
· Comunicar a empresa, seus produtos e serviços
· Estar alinhado com a comunicação e os objetivos da empresa
· Proporcionar conteúdo relevante para o usuário
· Fornecer informações sobre o público-alvo e o mercado da empresa
· Proporcionar interatividade e gerar relacionamento com os internautas
Ao negligenciar aspectos fundamentais de planejamento e interação com o usuário, os sites mal projetados acabam impondo dificuldades aos usuários e desconstruindo a estratégia de marca da empresa, trazendo mais problemas do que soluções.
Esta é a missão da Interactis: orientar empresas na identificação de falhas e na elaboração de projetos de interfaces para projetos web, através de uma consultoria ativa e do acompanhamento estratégico da implementação de sites, portais e intranets.

Nossos Serviços
Arquitetura de Informação Planejamento e projeto de AI para sites, intranets e extranets.
Análise Heurística Relatório qualitativo sobre a usabilidade de um site, sistema ou intranet.
Palestras e Cursos Cursos sobre AI e Usabilidade ministrados pela equipe da interactis.
Melhor posicionamento em mecanismos de busca
Aumentar a relevância do conteúdo do site e estruturá-lo de forma correta é o nosso trabalho.
Planejamento de Sites ePortais
Projeto de sites. A Interactis presta assessoria no planejamento de soluções online, aumentando seu grau de sucesso.

Parte II - Capítulo 3
Etapa de análise
Esta etapa tem o objetivo de confrontar os requisitos (propostas) trazidos pelos elaboradores desse trabalho com as necessidades dos projetistas de páginas acadêmicas na Web. Desta forma pode-se validar e refinar tanto a estrutura do guia quanto os conteúdos propostos pelo guia de estilos.
3.1 Análise de requisitos
A análise de requisitos visando a um futuro guia de estilos se fez a partir do relatório técnico do I SCRA, realizado em abril de 1996, na UFSC. Esse relatório revelou três tipos de problemas principais dos sites catarinenses em ciência e tecnologia (Cybis e Parizotto, 1997):
problemas de estruturação e de definição das informações a disponibilizar nos sites;
problemas de interatividade com o usuário, especificamente no que se refere a navegação intra e inter documentos;
problemas de apresentação gráfica da informação, no que se refere à legibilidade, leiturabilidade, formato, localização, agrupamento e distinção de itens de informação e do papel a desempenhar pelos elementos gráficos em geral que compõem uma página na Web;
A proposta desse guia é de poder auxiliar os projetistas de sites em ciência e tecnologia a encarar esses três tipos de problemas. Estrategicamente, os trabalhos foram divididos nos três domínios de interesse citados, sendo que o presente trabalho, proposta de um guia específico sobre ergonomia do projeto gráfico, é o primeiro a ser elaborado.
3.2 Análise das necessidades
A análise das necessidades, que se seguiu à etapa de exame de requisitos, enfocou, de um lado os sites em ciência e tecnologia no Brasil e no mundo e, de outro, os próprios guia de estilos, além da norma ISO 9241, dos livros e dos artigos disponíveis na Web.
A análise dos sites acadêmicos envolveu uma coletânea de informações sobre o emprego correto dos atributos gráficos de uma página na Web, e revelou o conteúdo informacional desses sites e o layout mais apreciado pelos usuários, identificando os atributos gráficos usados para mostrar a informação neste novo meio de comunicação.
Os sites acadêmicos que fizeram parte desse estudo preliminar foram visitados no mês de janeiro de 1997, e as mudanças ocorridas após este período foram desconsideradas. Os sites estudados pertencem às seguintes universidades:
Universidade Federal de Santa Catarina - UFSC
Universidade Federal do Rio Grande do Sul - UFRGS
Universidade Federal do Paraná - UFPR
Pontifícia Universidade Católica do Paraná - PUC-PR
Universidade Federal do Rio de Janeiro - UFRJ
Universidade Estadual de Campinas - UNICAMP
University of Illinois at Urbana-Champaign - USA
Iowa State University - USA
3.2.1 Conteúdo informacional
Embora não esteja entre os aspectos abordados neste guia de estilos, também foi verificado o conteúdo informacional dessas instituições, para um melhor entendimento das informações disponibilizadas por cada uma delas. Esses conteúdos são muito parecidos, mas a maneira de organizar as informações e os termos lingüísticos empregados por eles diferem de site para site. Exceto pela UFRJ, todas as universidades trazem fotos como elemento gráfico ilustrativo.
Os assuntos encontrados em quase todos os sites dizem respeito ao vestibular, às informações da própria universidade, ao ensino ministrado, aos projetos de pesquisa científica e aos eventos promovidos pela instituição. Há, também, assuntos relacionados com a Internet, como listas de discussões e servidores de FTP, além de assuntos de cortesia e utilidade para o usuário.
O vestibular é apresentado como "Resultado do Vestibular 97", pela UFSC e pela UFPR; como "Listão de Vestibular 97 e Vestibular" pela UFRGS e como "Vestibular" pela UFRJ e pela PUC-PR.
O termo lingüístico utilizado para denotar as informações da própria universidade são diferentes na maioria dos sites. Na UFSC e na PUC-PR é "Administração"; na UFRGS é "A UFRGS"; na UFRJ é "Informações Gerais + Estrutura" e na UFPR é "Estrutura Administrativa + Histórico UFPR".
O ensino ministrado em cada instituição é apresentado como "Ensino" pela UFSC; como "Graduação e Pós-Graduação" pela UFGRS; como "Ensino e Pesquisa" pela UFRJ; como "Cursos de Graduação e Cursos de Pós-Graduação" pela UFPR e como "Mestrados" pela PUC-PR.
Os projetos de pesquisa científica utilizam o termo "Pesquisa na UFSC"; "Pesquisa e Extensão" na UFGRS; "Ensino e Pesquisa" pela UFRJ e "Pesquisa e Educação Continuada" pela PUC-PR.
Os eventos promovidos pela instituição são apresentado como "Eventos" pela UFSC, pela UFRGS e pela UFRJ; como "Novidades" pela UFPR e como "Novidades e Eventos" pela PUC-PR.
As informações foram organizadas por seqüência (hierarquia), ou seja, por ordem de grandeza. Nesta classificação e segundo orientações do SCRA (1996), no que se refere ao universo acadêmico, as divisões e subdivisões internas obedecem a uma hierarquia que deve ser privilegiada e disponibilizada para conhecimento e pesquisa dos usuários.
No caso específico de elaboração de um site de uma instituição de ensino/pesquisa/extensão, acredita-se que a apresentação da informação deva ser feita a partir da organização física e hierárquica já existente e formalizada, por exemplo: Centros - Departamentos - Laboratórios, etc (SCRA, 1996).
Outra forma de organizar a informação apresentada é através da ordem alfabética. Este método presta-se muito bem para grandes conjuntos de informação, como palavras de um dicionário ou nomes de uma lista telefônica. É a forma mais usual de apresentação de informação, pois é conhecida pela maioria dos usuários de cultura ocidental (SCRA, 1996).
3.2.2 Layout
A análise dos sites acadêmicos pesquisados revelou uma tendência à padronização, valorizando a simplicidade do projeto visual em todos os seus atributos gráficos. Desta pesquisa foram selecionadas as informações pertinentes à classe de atributos de forma (layouts, cores, fundos, fontes, textos e ícones) de um site na Web.
O layout mais comum foi aquele que utiliza os frames para destacar os links mais importantes daqueles de uso sazonal, como por exemplo, o resultado do Vestibular.
Os padrões de layout adotados por esses sites são, segundo informações dos seus projetistas (webmasters), resultados de pesquisas em outros sites do mesmo gênero. A UFRJ, por exemplo, usa frames em suas páginas e o layout foi escolhido com base na experiência dos projetistas e de pesquisa em outros sites.
Este site adota um padrão de layout e atributos gráficos em todas as suas páginas. Desta maneira é possível verificar a consistência alcançada pela adoção de um padrão dos atributos gráficos como: layouts, cores, fundos, fontes, textos e ícones.
A falta de uma padronização de layout dos sites e dos atributos gráficos empregados causa desorientação e desinteresse por parte do usuário.
3.3 Análise do estado da arte
3.3.1 Os guias de estilos disponíveis
A análise dos guias de estilos revelou o guia de estilos do sistema operacional Windows - The Windows Interface Guidelines - A Guide for Designing Software e o guia de estilos do OSF/Motif Style Guide.
Esses guias não foram elaborados com o propósito de atender às necessidades da Web, entretanto os atributos gráficos - layouts, cores, fundos, fontes, textos e ícones - empregados por essas interfaces podem ser utilizados na elaboração de páginas na Web.
Outro aspecto analisado na elaboração deste trabalho foi a diferença entre o grau de especialização necessário para o usuário-alvo dos referidos guias e de um guia para projetos de páginas na Web. Os usuários desses dois guias são profissionais que trabalham constantemente com projetos de interfaces mais complexas.
Os usuários que este guia pretende atingir são engenheiros e estudantes, sem conhecimento específico de comunicação visual, cujo trabalho não é somente projeto de páginas na Web. Devido ao fato dos usuários-alvo serem menos especializados, este guia contém recomendações e observações curtas, em forma de itens, tornando-o mais conciso e didático. Dentre eles, o que mais se mostrou relevante para esse propósito, foi o guia de estilos do sistema operacional Windows, da Microsoft Corporation.
3.3.1.1 O guia Windows
O guia The Windows Interface Guidelines - A Guide for Designing Software é muito importante para o projeto de interface de software que utiliza o sistema operacional da Microsoft® Windows®. O uso desse guia permite a elaboração de um bom projeto de interface.
Esse guia é dirigido para aqueles que estão projetando e desenvolvendo softwares baseados no sistema operacional Windows. Ele também é apropriado para aqueles que desejam uma melhor compreensão do ambiente Windows e dos princípios de interface homem-computador que ele suporta.
O conteúdo desse guia abrange as seguintes áreas:
princípios e processos básicos de projeto
elementos de interface
detalhes de projeto
informações adicionais
Nesse guia os aspectos gráficos encontram-se descritos no capítulo 13 (Projeto Visual) e abrange os princípios de layout, o uso das cores e das fontes e o projetos de ícones.
Esse guia promove consistência visual e funcional dentro do sistema operacional Windows. O uso destas recomendações permite que os usuários transfiram suas habilidades e experiências de uma tarefa para outra e aprendam facilmente novas tarefas. Elas são ferramentas valiosas, mas o seu uso não garante a utilizabilidade.
Deve-se evitar adicionar novos elementos ou comportamentos, bem como não se deve mudar o comportamento existente para elementos comuns, pois o usuário cria expectativas sobre o comportamento de uma interface e a inconsistência pode confundí-lo.
3.3.1.2 O guia OSF/Motif
O guia de estilos OSF/Motif proporciona uma estrutura de especificação de comportamento para guiar os projetistas de interfaces no projeto e implementação de novos produtos para que eles sejam consistentes com o padrão de interface OSF/MotifTM. Este guia de estilos também é consistente com o ambiente Windows.
"O guia de estilos estabelece um comportamento consistente entre os novos produtos pois ele extrai os elementos comuns de uma variedade de modelos de comportamento diferentes" (OSF/Motif, 1990).
O guia de estilos antecipa a evolução das interfaces gráficas na medida em que as novas tecnologias tornam-se disponíveis e cresce o uso do padrão MotifTM. Ele se destina aos projetistas de aplicações, de ambiente de trabalho, de sistemas de interfaces com o usuário e de janelas de gerenciamento.
O seu conteúdo está organizado em sete capítulos e dois apêndices.
Capítulo 1: dá os princípios gerais do projeto de interface com o usuário;
Capítulo 2: descreve os modelos de navegação e entrada de dados;
Capitulo 3: descreve os modelos de ativação e seleção;
Capítulo 4: descreve as escolhas de componentes de interface com o usuário, o layout e a interação;
Capítulo 5: descreve o projeto de janelas de gerenciamento;
Capítulo 6: descreve brevemente os conceitos de localização e internacionalização e aspectos que se relacionam com o projeto de interface com o usuário.
Capítulo 7: traz informações de referência para os conceitos descritos nos capítulos anteriores e dá informações detalhadas sobre os componentes.
"O objetivo principal de uma interface com o usuário é auxiliar o projetista a criar, mais facilmente, aplicações que aumentam a eficiência e a satisfação do usuário que segue as recomendações apresentadas neste guia" (OSF/Motif, 1990).
Para este trabalho foram usadas as recomendações contidas no guia OSF/Motif sobre layout de janelas e ícones.
3.3.2 A norma ISO 9241
A ISO 9241 (International Organization for Standardization) é uma norma internacional que trata da aplicação de princípios ergonômicos para a introdução de um sistema de processamento de informações mostradas em terminais de monitores de vídeo (VDT), e como este sistema pode afetar a estrutura, a função e o ambiente físico, sendo essencial para a integração do projeto da tarefa com o projeto do hardware, do software e do ambiente de trabalho.
Ela estuda o trabalho de escritório informatizado através do uso de planilhas eletrônicas e de processadores de textos, entre outros aplicativos. Nela não estão incluídos os aplicativos de projeto auxiliado por computador e de controle de processos (CAD-CAM), bem como as interfaces que usem estereoscopia ou realidade virtual. Não são abordados aspectos da emissão de radiações ou segurança elétrica dos equipamentos, cobertos pelas normas IEC.
Essa norma internacional se destina aos profissionais encarregados de garantir um trabalho de escritório seguro e efetivo com os computadores. Seu objetivo é promover a saúde e a segurança de usuários de computadores e garantir que eles possam operar esses equipamentos com eficiência e conforto. Isso requer um projeto cuidadoso dos terminais de computadores, dos locais de trabalho e do ambiente nos quais eles são usados, assim como da organização e do gerenciamento do próprio trabalho.
De uma maneira geral as recomendações que constam da ISO 9241 foram definidas por evidência empírica e a partir da revisão da literatura existente, sendo então generalizadas e formuladas em termos de requisitos para o uso de projetistas e avaliadores de interfaces. O comitê técnico TC-159, que se ocupa de ergonomia e, em particular, o subcomitê SC 4, que se ocupa da ergonomia da interação homem-sistema, organizaram a ISO 9241 em um conjunto de 17 partes, cada uma lidando com diferentes aspectos do trabalho em escritórios informatizados (Cybis, 1997).
Parte 1: Introdução geral.
Parte 2: Condução quanto aos requisitos das tarefas.
Parte 3: Requisitos dos terminais de vídeo.
Parte 4: Requisitos dos teclados.
Parte 5: Requisitos posturais e do posto de trabalho.
Parte 6: Requisitos do ambiente.
Parte 7: Requisitos dos terminais de vídeo quanto às reflexões.
Parte 8: Requisitos dos terminais de vídeo quanto às cores.
Parte 9: Requisitos de dispositivos de entrada, que não sejam os teclados.
Parte 10: Princípios de diálogo.
Parte 11: Especificação da utilizabilidade.
Parte 12: Apresentação da informação.
Parte 13: Condução para o usuário.
Parte 14: Diálogo por menu.
Parte 15: Diálogo por linguagem de comandos.
Parte 16: Diálogo por manipulação direta.
Parte 17: Diálogo por preenchimento de formulários.
No que se refere ao equipamento, as recomendações tratam somente dos fatores que afetam o desempenho dos usuários e estejam menos sujeitos às variações do estado da tecnologia. Para medir este desempenho a ISO 9241 fornece indicações sobre as características do equipamento que são importantes sob o ponto de vista ergonômico: como medir ou avaliar essas características, que equipamento de teste utilizar, como formar uma amostra de usuários apropriada, que condições experimentais montar e qual o nível de desempenho esperar. Como nem sempre é possível realizar estes testes, a ISO 9241 traz recomendações que podem ser utilizadas de modo prescritivo, simplesmente auxiliando na busca dos níveis esperados de desempenho humano (Cybis, 1997).
Para a elaboração deste trabalho foram estudadas as partes 3, 8 e 12:
A parte 3 (Requisitos dos terminais de vídeo) que estabelece os requisitos para qualidade da imagem para o projeto e avaliação de terminais de monitores de vídeo colorido e monocromático. Os requisitos são estabelecidos como especificações de desempenho e as avaliações proporcionam métodos para teste e medidas de comparação. Atualmente, as recomendações estão baseadas em caracteres alfabéticos de origem latina, cirílica e grega, e em numerais arábicos.
Essa parte aplica-se ao projeto ergonômico de monitores eletrônicos para tarefas de escritório. A parte 8 complementa essas recomendações (ISO 9241-3).
A proposta da parte 8 (Requisitos dos terminais de vídeo quanto às cores) prescreve especificações básicas para cores em terminais de monitores de vídeo para assegurar a visibilidade, identificação e discriminação das cores. Essas especificações dizem respeito às imagens coloridas (estímulo visual), sua aparência (percepção visual) e sua identificação (nome das cores). Conseqüentemente, estas especificações referem-se aos componentes perceptuais da cor e a alguns componentes cognitivos.
Essa parte da norma descreve os requisitos ergonômicos mínimos e as recomendações a serem aplicadas para cores destinadas aos textos e aplicações gráficas e para imagens nas quais as cores são discretamente usadas. Ela se destina tanto para o hardware quanto para o software de terminais de monitores visuais, pois ambos os recursos controlam a apresentação e a aparência da cor em telas de monitores (ISO 9241-8).
A parte 12 (Apresentação da informação) lida com a apresentação visual das informações através de terminais de monitores de vídeo (VDT). Ela traz princípios gerais para a apresentação da informação e se refere tanto à organização da informação nas telas quanto ao uso de técnicas de codificação individual, com a finalidade de aumentar o desempenho e a satisfação do usuário. Suas recomendações referem-se a: janelas, áreas de entradas e saídas, grupos, listas, tabelas, rótulos, campos, cursores, aspectos sintáticos e semânticos de códigos alfanuméricos, abreviaturas, codificação gráfica, códigos de cores e outras técnicas de codificação visual (Cybis, 1997).
Ela especifica os princípios ergonômicos e recomendações para a apresentação da informação em monitores baseados em texto e interfaces gráficas usadas em tarefas de escritório. Ela proporciona recomendações ergonômicas para o projeto e avaliação da apresentação visual da informação para destaques e categorização. Ela não se destina para a apresentação da informação em auditórios.
3.4 Outras fontes
Também foram pesquisadas outras fontes de informações como livros e artigos sobre a World Wide Web e a interface de documentos eletrônicos (via computador).
Dentre os livros pesquisados os que mais se mostraram úteis na elaboração de recomendações para um guia de estilos para a Web foram:
"Graphic Design for Eletronic Documents and User Interface" de Aaron Marcus (1992) traz recomendações práticas para o uso de figuras e símbolos criados por computadores para comunicar a informação de modo eficiente. Há regras claras que governam o projeto gráfico (design) de informações contidas em textos, gráficos, mapas e outras figuras apresentadas em monitores de computadores. Os atributos gráficos como cores, fontes e ícones são os mais relevantes para a pesquisa do presente trabalho.
Karen A. Schriver (1997) baseia seu livro "Dynamics in Document Design" na premissa de que o leitor merece documentos que atendam às suas necessidades e de que as pessoas que criam a apresentação gráfica desempenham um papel muito importante para alcançar esse objetivo. Esse livro é destinado a escritores e a projetistas gráficos (designers) que criam documentos usados diariamente por pessoas que respondem aos estímulos causados por eles de maneira estética e emocional. Ele abrange desde manuais de alta tecnologia até informações on-line e páginas da World Wide Web, o principal objetivo neste trabalho.
O livro "Designing Visual Interfaces - Communication Oriented Techniques" de Kevin Mullet e Darrell Sano (1995) foi a base para elaboração de recomendações dos atributos gráficos estudados. É importante dizer que este livro é citado por Schriver (1997) como referência para seus trabalhos.
Ben Shneiderman (1992) em seu livro "Designing the User Interface - Strategies for Effective Human-Computer Interaction" afirma que nenhum conjunto de regras pode governar o uso de cores, mas descreve um número mínimo de guidelines que podem tornar-se o ponto de partida para os projetistas.
"The Icon Book - Visual Symbols for Computer Systems and Documentation" de William Horton (1994) tem como objetivo ajudar os projetistas de ícones de todos os tipos de interfaces gráficas. O livro tem muitos exemplos de aplicação de ícones e orientação quanto ao seu uso correto.
"Interactivity by design - Creating & Communicating with New Media" de Ray Kristof e Amy Satran (1995) apresenta claramente todos os passos para projetar produtos interativos, como por exemplo, páginas na Web. O livro é ricamente ilustrado com exemplos de uso dos atributos gráficos tratados no guia de estilos.
A Web também foi pesquisada e os autores mais relevantes para o presente trabalho foram Jackob Nielsen, que mantém um site onde disponibiliza os resultados das pesquisas realizadas na Sun sobre Intranet, ícones e erros em páginas na Web, e Douglas Robertson que disponibilizou seu estudo sobre cores, tipologia e layout.
A revisão bibliográfica para a elaboração do guia está apresentada em detalhes na parte I.

Nenhum comentário: