Author: Edward Tufte
Web Page Design Inspirado por Edward Tufte
O seguinte conjunto de perguntas e respostas sobre o design da Web é a base de um artigo na revista francesa "Influx" onde fui entrevistado sobre a influência dos princípios de design de Edward Tufte à medida que se aplicam a páginas da World Wide Web.Índice
(Q) Quais são as questões dos trabalhos de Edward Tufte que são relevantes para um site?
Os problemas que considero mais relevantes são:- Mídia de saída: os escritores impressos conhecem a mídia alvo, mas o conteúdo da Web pode ser processado em dispositivos radicalmente diferentes em termos de tamanho, resolução e até mesmo o tipo de mídia (estações de trabalho de ponta, laptops pequenos, PDAs, braille, palavras faladas, etc.)
- Expectativas do usuário: os usuários da Web abordam a informação de forma diferente do que no papel e são mais prováveis de digitalizar informações do que lê-las
- Ergonomia: a tecnologia atual para navegação na Web é muito inferior à cópia impressa de muitas maneiras. Os monitores são de baixa resolução, a posição de visualização é fixa, e os controles do mouse / teclado são muito estranhos, em comparação com lápis e papel
- Espaço de conteúdo: grande parte do espaço da página da Web é ocupada por menus, barras de ferramentas e controles de navegação, reduzindo assim o espaço para o conteúdo
- Erros de ortografia: estes causam uma falha real na navegação e busca em oposição ao simples constrangimento ou confusão
- Conversão em cópia impressa: isso muitas vezes falha devido a fontes faltantes, conversões gráficas ausentes, bem como problemas de tamanho e layout de página
- Chart junk e dis-information: a baixa resolução de displays atuais juntamente com a cintilação de monitores CRT significa que os padrões de desordem e moira subtraem ainda mais a partir de uma tela do que no papel e contribuem para a fadiga e a confusão.
- Cores: a baixa resolução dos monitores e a facilidade e o custo zero da cor significam que as cores podem ser usadas para transmitir informações de forma mais efetiva (por exemplo, quando todos os elementos de um único tópico compartilham a mesma cor) ou podem ser mal utilizados para exacerbar a confusão.
- Documentação de dados: porque é muito mais fácil exibir uma página da Web do que publicar um artigo em uma revista ou revista e, como os mecanismos de busca podem redigir uma página com base em palavras-chave, há muito provavelmente provavelmente encontrando conhecimento de lixo na Rede. Vejo uma forte necessidade no futuro de ter sites certificados de alguma forma para garantir informações de qualidade e ter mecanismos de pesquisa sensíveis a essa certificação.
- Densidade da informação: a baixa resolução de telas e os tempos de download lento para arquivos grandes tornam a informação de alta densidade menos desejável na Web. Várias técnicas podem ser usadas para compensar isso, como documentação de tamanhos de arquivos e tempos de download, opções de diferentes gráficos de resolução, coleções de imagens em miniatura e / ou recortadas que, quando clicadas em exibição, uma versão de alta resolução da miniatura, etc..
- Texto versus gráficos: os tempos de download, diferentes recursos do navegador e problemas de resolução dão o equilíbrio do texto versus gráficos mais para o texto.
- Compreensão sequencial versus gestalt: Tufte observa que gráficos de alta densidade em papel permitem que você veja padrões complexos como uma gestalt única. No entanto, displays interativos da Web podem levá-lo sequencialmente, apesar de etapas que o exporão apenas ao contexto que você precisa saber com base em suas escolhas anteriores, em vez de uma árvore de telefone visual. Em alguns casos, isso é mais eficaz do que uma exibição de alta densidade, em outros casos é menos.
- Mantendo o contexto: é muito mais fácil se perder em um site do que um livro porque há tantos caminhos a serem seguidos. Assim, ferramentas de navegação eficazes são muito mais importantes na Web do que para cópias impressas.
(Q) Quais são seus sites recomendados em termos de conteúdo, relevância gráfica, estética e eficácia, e por que??
Entre os sites que eu mais gosto são:- O site da NASA Skywatch em:
http://spaceflight.nasa.gov/realdata/sightings/index.html.
Ele fornece informações sobre muitos grandes satélites em órbita. A página inicial explica o propósito no formato de mídia de texto e streaming, discute os recursos necessários em termos de tempo de download e tamanho do arquivo e contém um bom controle de navegação de duas camadas que o dirige para qualquer parte do site da NASA.
O Java Applet fornece informações sobre satélites e posições orbitais que servem ao engenheiro técnico e ao público através de tabelas e um mapa de cores de trilhas orbitais anotadas contra constelações identificadas e esboçadas para um determinado local. É fácil de usar, atraente e altamente informativo..
- Outro bom site é: http://www.nsf.gov
Outro bom site é: http://www.nsf.gov Sua página inicial é atraente, compacta, usa poucos gráficos e downloads rapidamente. Ele também contém um bom controle de navegação em duas camadas, contato, privacidade, ajuda e informações de personalização, uma ferramenta de busca, opções para a categoria de visualizador (alunos, professores, Principais Investigadores) e muitas das páginas subseqüentes oferecem várias opções para visualização de dados, como HTML, texto simples e formato PDF. Muitas páginas, mas não todas, mantêm a mesma aparência e controles de navegação da página inicial.
- Alguns gráficos excepcionalmente informativos podem ser encontrados clicando em um "Mapa do Mercado" em: http://www.smartmoney.com/maps/
Enquanto inicialmente se abre com uma propaganda completamente inútil e irritante que permanece na tela por um longo período de tempo e não dá nenhuma pista sobre o que se segue, a exibição resultante vale a pena. Contém representações de muitas ações, agrupadas por setor e codificadas por áreas coloridas cujo tamanho reflete sua participação de mercado e cuja tonalidade e intensidade mostram seu desempenho conservado em estoque: vermelho brilhante que significa queda acentuada, preto, sem mudança e verde claro, indicando fortes ganhos , com tons intermediários no meio. Olhando para a tela de hoje, posso ver que os estoques da tecnologia estão muito abaixo, as ações de energia estão em alta, assim como os bens de consumo básicos. Posso ver um setor com mais detalhes, pode passar o mouse sobre uma área para identificar o estoque específico e obter algumas informações de desempenho, e pode clicar no estoque para obter informações detalhadas. Ele também contém um painel que permite personalizar o mapa. É um bom exemplo de gráficos que funcionam de forma múltipla que permitem visualizar informações de várias maneiras diferentes.
(Q) Como um site pode ser efetivo, interessante e atraente para o surfista da Net, bem como para o usuário em profundidade?
Um bom site incorpora o seguinte:- Baseia-se em um usuário centrado (em oposição a um ponto de vista corporativo, estrutural ou a qualquer outro), design testado pelo usuário
- Sua página inicial contém HTML simples de baixa tecnologia que carrega rapidamente, não requer plugins, funciona em quase todos os navegadores, coloca as informações mais importantes perto do topo e informa as pessoas imediatamente:
- quais assuntos cobrem ou o que ele aborda
- se tiver a informação que eles procuram
- se a informação estiver atual (por exemplo, data-última modificação)
- que evidência de que a informação é precisa
- A página inicial possui um logotipo de identificação e contém ou tem links para:
- um site map
- informações de contato
- informações sobre a organização responsável
- um formulário de feedback do site ou ponteiros para um grupo de discussão
- garantias de segurança e privacidade
- sites relacionados
- Informações sobre a tecnologia necessária para visualizar páginas subseqüentes no site (por exemplo, versões do navegador, downloads necessários, tamanhos de arquivos ou tempos de carga própria)
- Páginas subsequentes no site possuem muitas das qualidades da página inicial, mas também:
- use a mesma aparência e a mesma aparência que a página inicial em termos de aparência e localização do logotipo e outras informações que identificam de forma exclusiva o site (folhas de estilo externas são úteis para isso)
- fornecer controles de navegação consistentes que pareçam os mesmos e estão no mesmo local, como os botões "Próximo", "Anterior" e "Início" (especialmente evite as páginas onde o botão "Voltar" não funciona)
- Exibir contexto e localização: em sites complexos é muito importante saber onde você está e onde você esteve. Embora os quadros representem grandes problemas de usabilidade, às vezes são usados para fornecer uma tabela de conteúdos que permanece constante em todo o site. Os URLs que contêm apenas palavras simples e sem símbolos podem ajudar a identificar a localização em um site, bem como diagramas de árvore que destacam a localização atual do usuário
- controle as janelas corretamente: uma proliferação de janelas que se mantêm em torno da confusão e confusão (bem como riscos de segurança se o usuário estiver fazendo mais do que navegar), mas o Windows que se fecha automaticamente pode assustar e confundir o usuário: o web designer precisa pesar isso questões com base nas circunstâncias que se aplicam
- use a mesma aparência e a mesma aparência que a página inicial em termos de aparência e localização do logotipo e outras informações que identificam de forma exclusiva o site (folhas de estilo externas são úteis para isso)
- Todas as páginas usam:
- um fundo silencioso que não interfere na sobreposição de informações
- bom contraste entre fundo e texto ou controles
- cores brilhantes com moderação para destacar conteúdos importantes
- da mesma cor para todos os itens pertencentes à mesma categoria
- texto a menos que gráficos confiram uma vantagem real
- informações estruturais visíveis, como títulos, subtítulos e listas de balas no lugar de parágrafos longos
- espaço em branco como o delimitador primário
- texto substancialmente reduzido em comparação com a cópia impressa
- verificação ortográfica para garantir que as funções de navegação e pesquisa funcionem
(Q) Um site deve ser bonito, para ser eficaz ?
Até certo ponto, a beleza está no olho do espectador em que um usuário treinado para interpretar certos padrões pode ver a beleza em um site que faz sentido para eles, mas parece feio e desorganizado para alguém sem o seu fundo (muitas vezes vemos o que esperamos um pouco do que o que está lá, um pouco como um sapo que é em grande parte cego para qualquer coisa que não é pequena, escura e que se move jerkily - uma mosca).No entanto, para sites que não requerem conhecimento especializado, acredito que a estética pode ser alcançada através de um design claro que enfatiza a usabilidade, especialmente se as adições estéticas só forem adicionadas quando forem conscientemente justificadas em termos de utilidade
O que afeta o tamanho e a resolução da tela em gráficos na Web e como você desenvolve gráficos efetivos sob essas restrições?
Este é um tópico grande e importante e talvez seja o motivo das principais diferenças entre design na Web versus papel:- Diferenças de tamanho: se limitarmos a nossa discussão aos computadores e displays "tradicionais", as diferenças no tamanho da tela (em oposição à resolução) não afetam muito a compreensão dos gráficos, pois as grandes telas de 19 polegadas possuem apenas 2,5 vezes a área de pequenas Telas de 12 polegadas. No entanto, agora vemos um número crescente de dispositivos, como PDAs, celulares e até mesmo relógios de pulso, que navegam na Web e cujas telas são 100 vezes menores. As páginas da Web típicas simplesmente não se encaixam em tais dispositivos, e os projetos de página devem ser direcionados especificamente para eles, embora XML / XSL possa ser usado para reexaminar documentos maiores para se adequarem.
Comparado com grandes mapas dobrados ou páginas que permitem ao olho varrer facilmente em grandes áreas, o visualizador da Web depende de links para várias páginas que contêm porções da vista e, portanto, o contexto geral é perdido - qualquer pessoa usando um mapa de tipo de livro sabe o quão difícil é seguir uma rota que atravessa páginas diferentes; Da mesma forma, as comparações em um grande gráfico científico são muito difíceis de fazer quando o visualizador não pode ver tudo ao mesmo tempo.
Além disso, as telas LCD atuais oferecem ângulos de visão de tela limitados, portanto, mesmo que fossem de grande ou alta resolução, eles tornariam a compreensão em grandes áreas difíceis.
- Diferenças de resolução: são ainda mais importantes do que o tamanho. Teoricamente, até uma página projetada para uma exibição de 20 polegadas caberia em uma exibição de relógio de pulso se a resolução fosse a mesma, mas as telas de baixa resolução não só forçam um usuário a rolagem horizontal, mas podem deixar de renderizar grandes partes dele.
Em comparação com o papel, as exibições em uso comum hoje têm uma resolução de cinco a 10 vezes menor. Como resultado, o detalhe é grosseiro, o texto pequeno é fraco e distorcido, e a visualização é cansativa, especialmente quando a cintilação da tela está presente. Além disso, o contexto geral é perdido, forçando o usuário a lembrar e conectar informações de telas anteriores, algo para o qual a mente humana é mal adaptada.
Por outro lado, a Web fornece ferramentas que compensam parcialmente esta mente é mal adaptada:
- apesar de algumas desvantagens de usabilidade, especialmente em relação à navegação, pode-se usar quadros para exibir uma visão geral de uma cena em um quadro na forma de um mapa de imagem clicável: quando o usuário clica em uma área no mapa de visão geral, uma alta resolução A vista de uma parte da imagem aparece no 2º quadro. Isso é particularmente eficaz se a imagem no primeiro quadro realçar a área que foi clicada, exibe a posição atual do mouse em relação ao mapa, e se o mapa da imagem incluir uma grande quantidade de sobreposição, bem como vários graus de zoom, melhorando o Possibilidade de exibir todo o contexto desejado.
- às vezes, a animação pode ser efetivamente usada em vez de "pequenos múltiplos": uma imagem rápida e rápida, especialmente quando está sob controle total do usuário, geralmente pode transmitir informações melhor do que uma página estática de alta resolução
- apesar de algumas desvantagens de usabilidade, especialmente em relação à navegação, pode-se usar quadros para exibir uma visão geral de uma cena em um quadro na forma de um mapa de imagem clicável: quando o usuário clica em uma área no mapa de visão geral, uma alta resolução A vista de uma parte da imagem aparece no 2º quadro. Isso é particularmente eficaz se a imagem no primeiro quadro realçar a área que foi clicada, exibe a posição atual do mouse em relação ao mapa, e se o mapa da imagem incluir uma grande quantidade de sobreposição, bem como vários graus de zoom, melhorando o Possibilidade de exibir todo o contexto desejado.
- No entanto, note que as vantagens de tamanho e resolução do papel sobre os monitores desaparecerão em 5-10 anos: já as telas LCD de dois megapixels em computadores portáteis estão no mercado; A IBM revelou recentemente um LCD de 22 polegadas com incríveis 9 megapixels que rivalizam completamente com a página impressa (no momento é muito caro, mas certamente diminuirá o preço), e a tecnologia de subpíxeles ClearType (TM) da Miscosoft aumenta consideravelmente a resolução efetiva do texto e imagens preto / branco, às vezes por 300%
Além disso, os LCDs mais recentes têm um campo de visão mais amplo e não cintilam. No futuro próximo, os tablets com entrada de caneta podem ser mantidos e manipulados como uma revista, são superiores para apontar, desenhar e escrever do que ratos e teclados, e serão aumentados por entrada e saída de voz e áudio. Os ecrãs de tela muito grande estão no caminho, bem como displays de retina para computadores portáteis que fornecem imagens estereoscópicas de alta resolução verdadeiras que aparecem para o usuário ter 6 pés de largura.
(Q) Quais novos potenciais são oferecidos para projetar pela tecnologia web? ?
A Web pode fornecer um ambiente de informação mais rico do que é possível com páginas estáticas em papel, como:- Informações atualizadas: as informações da Web não só podem ser mais atuais quanto as cópias impressas, mas podem ser instantâneas, como no caso de câmeras web de tráfego, reservas de bilhetes, relatórios de estoque, leituras de GPS, etc..
- Animação controlada pelo usuário: múltiplos pequenos geralmente são usados para simular animação em papel, mas a Web oferece possibilidades muito maiores, como
- movimento em tempo real
- controle do usuário de velocidade e direção (para frente e para trás)
- animação de subconjuntos selecionados pelo usuário para que transições particulares possam ser observadas em diferentes velocidades e direções
- congelar quadros que capturam um ou mais quadros em animações
- resposta em tempo real à entrada fornecida pelo usuário ou por fontes externas
- Gráficos 3D: muitas vezes é difícil encontrar o ponto de vista certo para cenas 3D complexas no papel, uma vez que qualquer visão única, ou mesmo um conjunto de visualizações, pode ocultar ou distorcer informações importantes. Mas as visualizações de dados 3D na Web, conforme fornecido pelo VRML ou outros programas, permitem ao usuário visualizar os dados de qualquer ângulo. Muitos anos atrás, vi uma demonstração perspicaz de J.W Tukey, que explorava conjuntos de dados multidimensionais (dimensão 10-12) de forma interativa. Inicialmente, tudo o que apareceu foram conjuntos de pontos aleatórios sem sentido, mas, ao colapsar dados ao longo de certas dimensões e rotações aplicadas, surgiram curvas fortes e simples que ilustram relacionamentos importantes.
Embora seja verdade que o controle de objetos 3D é um pouco difícil hoje, como geralmente o fazemos através de um mouse em uma superfície 2D, será mais fácil no futuro próximo através de fones de ouvido atraentes e leves que oferecem visão estereoscópica verdadeira combinada com câmeras estéreo que acompanham as posições das mãos em 3D, permitindo-nos "pegar" e manipular imagens 3D tão facilmente quanto fazemos objetos do mundo real.
- Gráficos de alta densidade: embora a cópia impressa ofereça uma resolução maior do que as exibições atuais, certas tecnologias da Web permitem aumentar o zoom para exibir conjuntos de dados com muito mais detalhes do que é possível no papel.
- Análise de dados exploratórios: a Web permite que não apenas veja, mas manipule e aplique transformações em dados para descobrir relacionamentos que nunca poderiam ser observados no papel
- Dispositivos de informação universais: a Web, especialmente através do acesso sem fio, pode unir todas as formas de informação que hoje são fornecidas por muitos dispositivos diferentes: relógios, despertadores, rádios, TV, jornais, revistas, livros, CDs, computadores, videogames, registros legais, financeiros e médicos, licenças, licenças, salas de aula, teatros, etc..
(Q) Quais são os erros mais comuns encontrados no design da Web?
Entre os defeitos de projeto mais irritantes que eu vejo com freqüência são:- Falta de informação de data / hora: a maioria das informações é volátil até certo ponto. Uma "data-última modificação" é essencial para a maioria dos sites, e qualquer informação dependente do tempo em uma página precisa de documentação de tempo
- Confuso navegação, janelas que desativam a navegação ou muitos janelas pop-up
- Páginas iniciais que carregam muito devagar ou requerem plugins ou recursos excepcionais, ou scripts que desativam os navegadores
- Falta de informações do site, como um mapa do site e informações de contato
- Clutter em termos de um layout confuso, parágrafos longos, gráficos distraídos, fundos chatos, uso inconsistente de cores (diferentes cores dentro do mesmo tópico ou a mesma cor para diferentes tópicos), padrões de moeira
- Insensibilidade aos limites técnicos ou de usuários: as páginas da Web devem fornecer recursos de visualização alternativos para aqueles com navegadores, computadores ou limitações físicas limitadas.