Дизайн веб-страницы, вдохновленный Эдвардом Тафти

Source: http://staff.washington.edu/larryg/Classes/Rinflux/zz-influx.html

Индекс

(В) Какие темы работ Эдварда Тафти актуальны для веб-сайта?

Наиболее актуальными для меня являются следующие вопросы:

1. Выходные носители: авторы печатных копий знают свои целевые носители, но веб-контент может отображаться на совершенно разных устройствах с точки зрения размера, разрешения и даже типа самого носителя (высокопроизводительные рабочие станции, небольшие ноутбуки, КПК, шрифт Брайля, устная речь и т. д.). )
2. Ожидания пользователей: пользователи Интернета подходят к информации иначе, чем на бумаге, и с большей вероятностью просматривают информацию, чем читают ее.
3. Эргономика: современные технологии просмотра веб-страниц во многом уступают бумажным копиям. Дисплеи имеют низкое разрешение, положение просмотра фиксировано, а управление мышью/клавиатурой очень неудобно по сравнению с карандашом и бумагой.
4. Пространство контента: большая часть пространства веб-страницы занята меню, панелями инструментов и элементами управления навигацией, что сокращает пространство для контента.
5. Орфографические ошибки: они приводят к фактическому сбою навигации и поиска, а не просто к смущению или замешательству.
6. Преобразование в бумажную версию: это часто не удается из-за отсутствия шрифтов, отсутствия графических преобразований, а также проблем с размером и макетом страницы.
7. Ненужный картографический мусор и дезинформация: низкое разрешение современных дисплеев в сочетании с мерцанием ЭЛТ-дисплеев означает, что беспорядок и муар ухудшают качество изображения даже больше, чем на бумаге, и способствуют утомлению и замешательству.
8. Цвета: низкое разрешение дисплеев, а также простота и нулевая стоимость цвета означают, что цвета можно использовать либо для более эффективной передачи информации (например, когда все элементы одной темы имеют один и тот же цвет), либо их можно использовать неправильно, чтобы усугубить путаницу. Документирование данных: поскольку гораздо проще открыть веб-страницу, чем опубликовать статью в журнале или журнале, и поскольку поисковые системы могут вытащить страницу на основе ключевых слов, существует гораздо большая вероятность встретить ненужную информацию на Веб. Я вижу острую необходимость в будущем сертифицировать сайты каким-либо образом для обеспечения качества информации и сделать поисковые системы чувствительными к этой сертификации.
9. Плотность информации: низкое разрешение экранов и медленное время загрузки больших файлов делают информацию с высокой плотностью менее желательной в Интернете. Для компенсации этого можно использовать различные методы, такие как документирование размеров файлов и времени загрузки, выбор графики с различным разрешением, коллекции миниатюр и/или обрезанных изображений, которые при нажатии на них отображают версию миниатюры с высоким разрешением и т. Д.
10. Текст против графики: время загрузки, различные возможности браузера и проблемы с разрешением склоняют баланс текста и графики в сторону текста.
11. Последовательное и гештальт-понимание: Тафте отмечает, что графика высокой плотности на бумаге позволяет вам видеть сложные закономерности как единый гештальт. Однако интерактивные веб-дисплеи могут последовательно вести вас по шагам, которые знакомят вас только с тем контекстом, который вам необходимо знать на основе вашего предыдущего выбора, подобно визуальному дереву телефонов. В некоторых случаях это более эффективно, чем дисплей с высокой плотностью изображения, в других — менее.
12. Сохранение контекста: на веб-сайте гораздо легче заблудиться, чем в книге, потому что существует множество путей, по которым можно идти. Следовательно, эффективные инструменты навигации гораздо важнее в Интернете, чем в печатном виде.

(В) Какие веб-сайты вы рекомендуете с точки зрения содержания, графической релевантности, эстетики и эффективности и почему?

Среди сайтов, которые мне больше всего нравятся:

1. Сайт NASA Skywatch: http://spaceflight.nasa.gov/realdata/sightings/index.html.
   Он предоставляет информацию о многих крупных спутниках на орбите. На начальной странице объясняется цель как в текстовом, так и в потоковом формате мультимедиа, обсуждаются необходимые ресурсы с точки зрения времени загрузки и размера файла, а также содержится удобный двухуровневый элемент управления навигацией, который направляет вас к любой части сайта НАСА.
   Java-апплет предоставляет информацию о спутниках и орбитальных позициях, которая служит как техническим инженерам, так и общественности, посредством таблиц и цветной карты аннотированных орбитальных траекторий против идентифицированных и намеченных созвездий для данного местоположения. Он прост в использовании, привлекателен и очень информативен.
2. Еще один хороший сайт: http://www.nsf.gov. Его начальная страница привлекательна, компактна, использует мало графики и быстро загружается. Он также содержит удобный двухуровневый контроль навигации, информацию о контактах, конфиденциальности, помощи и настройке, инструмент поиска, выбор категории зрителя (студенты, преподаватели, главные следователи), а многие последующие страницы предлагают несколько вариантов выбора для просмотр данных, таких как HTML, обычный текст и формат PDF. Многие, но не все страницы сохраняют тот же внешний вид и элементы управления навигацией, что и домашняя страница.
3. Некоторые исключительно информативные графики можно найти, нажав на «Карту рынка» по адресу: http://www.smartmoney.com/maps/. Хотя изначально он открывается совершенно бесполезной и раздражающей рекламой, которая остается на экране в течение длительного времени и не дает вам понятия о том, что будет дальше, полученный результат того стоит. Он содержит изображения многих акций, сгруппированных по секторам и закодированных цветными областями, размер которых отражает их долю на рынке, а оттенок и интенсивность показывают эффективность их акций: ярко-красный означает резкое снижение, черный означает отсутствие изменений, а ярко-зеленый означает сильный рост. , с промежуточными оттенками между ними. Взглянув на сегодняшний экран, я вижу, что акции технологических компаний сильно упали, акции энергетических компаний выросли, как и акции потребительских товаров. Я могу просмотреть сектор более подробно, могу навести указатель мыши на область, чтобы идентифицировать конкретную акцию и получить некоторую информацию о производительности, а также могу нажать на акцию, чтобы получить подробную информацию. Он также содержит панель, позволяющую настроить карту. Это прекрасный пример многофункциональной графики, позволяющей просматривать информацию разными способами.

(В) Как сайт может быть эффективным, интересным и привлекательным как для пользователей Интернета, так и для опытных пользователей?

Хороший веб-сайт включает в себя следующее:

1. Он основан на ориентированном на пользователя (в отличие от корпоративной, структурной или любой другой точки зрения), проверенном пользователем дизайне.
2. Его начальная страница содержит простой низкотехнологичный HTML-код, который быстро загружается, не требует плагинов, работает практически во всех браузерах, размещает самую важную информацию вверху и сразу сообщает людям:

1. какие темы он охватывает или какие проблемы затрагивает
2. если у него есть информация, которую они ищут
3. если информация актуальна (например, дата последнего изменения)
4. какие доказательства того, что информация верна

1. Начальная страница имеет идентифицирующий логотип и содержит или содержит ссылки на:

1. карта сайта
2. Контактная информация
3. сведения об ответственной организации
4. форма обратной связи на сайте или указатели на дискуссионную группу
5. гарантии безопасности и конфиденциальности
6. похожие сайты
7. Информация о технологии, необходимой для просмотра последующих страниц сайта (например, версии браузера, необходимые загрузки, размеры файлов или время собственной загрузки).

1. Последующие страницы сайта обладают многими качествами начальной страницы, но также:

1. использовать тот же внешний вид, что и домашнюю страницу, с точки зрения внешнего вида и расположения логотипа и другой информации, которая однозначно идентифицирует сайт (для этого полезны внешние таблицы стилей).
2. обеспечить единообразные элементы управления навигацией, которые выглядят одинаково и находятся в одном и том же месте, например кнопки «Далее», «Предыдущий» и «Домой» (особенно избегайте страниц, на которых кнопка «Назад» не работает)
3. контекст отображения и местоположение. На сложных сайтах очень важно знать, где вы находитесь и где вы были. Хотя фреймы создают серьезные проблемы с удобством использования, они иногда используются для предоставления оглавления, которое остается постоянным по всему сайту. URL-адреса, содержащие только простые слова и без символов, могут помочь определить местоположение на сайте, а также древовидные диаграммы, которые выделяют текущее местоположение пользователя.
4. правильно управлять окнами: большое количество окон, которые остаются вокруг, вызывает беспорядок и путаницу (а также риски для безопасности, если пользователь делает больше, чем просто серфинг), но окна, которые автоматически закрываются, могут напугать и сбить с толку пользователя: веб-дизайнер должен взвесить это вопросы, основанные на обстоятельствах, которые применяются

1. На всех страницах используются:

1. приглушенный фон, не мешающий наложению информации
2. хороший контраст между фоном и текстом или элементами управления
3. экономно ярких цветов, чтобы выделить важное содержимое
4. один и тот же цвет для всех товаров, принадлежащих к одной категории
5. текст, если графика не дает реального преимущества
6. видимая структурная информация, такая как заголовки, подзаголовки и списки маркеров вместо длинных абзацев.
7. пробел в качестве основного разделителя
8. существенно уменьшенный текст по сравнению с печатной версией
9. проверка орфографии, чтобы убедиться, что функции навигации и поиска работают.

(В) Должен ли сайт быть красивым, чтобы быть эффективным?

В некоторой степени красота в глазах смотрящего: пользователь, обученный интерпретировать определенные закономерности, может видеть красоту на сайте, который имеет для него смысл, но кажется уродливым и неорганизованным для кого-то без его опыта (часто мы видим то, что ожидаем, а не чем то, что там есть, скорее как лягушка, которая в значительной степени слепа ко всему, что не маленькое, не темное и не движется рывками – мухе).

Однако я считаю, что для сайтов, не требующих специальных знаний, эстетики можно добиться за счет четкого дизайна, подчеркивающего удобство использования, особенно если эстетические дополнения добавляются только тогда, когда они сознательно оправданы с точки зрения их полезности.

Как размер и разрешение экрана влияют на графику в Интернете и как разрабатывать эффективную графику с учетом этих ограничений?

Это большая и важная тема, и, возможно, она является причиной основных различий между дизайном в Интернете и на бумаге:

1. Различия в размерах: если мы ограничимся обсуждением «традиционных» компьютеров и дисплеев, то различия в размерах экранов (в отличие от разрешения) не сильно влияют на восприятие графики, поскольку большие 19-дюймовые экраны имеют площадь всего в 2,5 раза больше маленьких. 12 дюймовые экраны. Однако сейчас мы видим растущее число устройств, таких как КПК, сотовые телефоны и даже наручные часы, которые выходят в Интернет и чьи экраны в 100 раз меньше. Типичные веб-страницы просто не помещаются на таких устройствах, и дизайн страниц должен быть специально предназначен для них, хотя XML/XSL часто можно использовать для изменения назначения более крупных документов. По сравнению с большими раскладывающимися картами или страницами, которые позволяют глазу легко охватить большие площади, веб-просмотрщик полагается на ссылки на несколько страниц, содержащих части изображения, и поэтому общий контекст теряется - любой, кто использует карту книжного типа. знает, как сложно следовать маршрутом, пересекающим разные страницы; Точно так же очень трудно проводить сравнения на большой научной диаграмме, если зритель не может видеть все сразу.
   Кроме того, современные ЖК-экраны имеют ограниченные углы обзора, поэтому даже если бы они были большими или с высоким разрешением, они затруднили бы понимание информации на больших площадях.
2. Различия в разрешении: они даже важнее размера. Теоретически даже страница, предназначенная для 20-дюймового дисплея, поместилась бы на дисплее наручных часов, если бы разрешение было таким же, но экраны с низким разрешением не только вынуждают пользователя выполнять горизонтальную прокрутку, но и могут не отображать большую ее часть. По сравнению с бумагой, широко используемые сегодня дисплеи имеют разрешение в пять-десять раз меньше. В результате детали становятся грубыми, мелкий текст — тусклым и нечетким, а просмотр утомляет, особенно при наличии мерцания экрана. Также теряется общий контекст, заставляя пользователя запоминать и связывать информацию с предыдущих экранов, к чему человеческий разум приспособлен слабо.
   С другой стороны, Интернет предоставляет инструменты, которые частично это компенсируют:

1. Несмотря на определенные недостатки юзабилити, особенно в отношении навигации, можно использовать фреймы для отображения общего вида сцены в одном кадре в виде интерактивной карты изображений: когда пользователь щелкает область на обзорной карте, высокое разрешение вид части изображения появляется во 2-м кадре. Это особенно эффективно, если изображение в первом кадре выделяет область, на которую щелкнули, отображает текущее положение мыши относительно карты и если карта изображения включает в себя большое количество перекрытия, а также различную степень масштабирования, что улучшает возможность отображения всего желаемого контекста.
2. иногда анимацию можно эффективно использовать вместо «маленьких кратных»: плавное и быстро меняющееся изображение, особенно когда оно находится под полным контролем пользователя, часто может передавать информацию лучше, чем статическая страница с высоким разрешением.

1. Однако учтите, что преимущества бумаги по размеру и разрешению перед дисплеями исчезнут через 5-10 лет: на рынке уже есть двухмегапиксельные ЖК-экраны для портативных компьютеров; IBM недавно представила 22-дюймовый ЖК-дисплей с удивительным разрешением 9 мегапикселей, который полностью конкурирует с печатной страницей (в настоящее время он очень дорогой, но наверняка упадет в цене), а субпиксельная технология ClearType (TM) от Miscosoft значительно повышает эффективное разрешение текста. и черно-белые изображения, иногда на 300%. Кроме того, новые ЖК-дисплеи имеют более широкое поле зрения и не мерцают. В ближайшем будущем планшетные ПК со стилусным вводом можно будет держать и манипулировать ими так же, как журналом, они будут превосходить мышь и клавиатуру в плане указывания, рисования и письма, а также будут дополнены голосовым и аудиовводом/выводом. На подходе очень большие экранные дисплеи, а также ретинальные дисплеи для носимых компьютеров, обеспечивающие стереоскопические изображения настоящего высокого разрешения, которые кажутся пользователю шириной 6 футов.

(В) Какие новые возможности открывают веб-технологии в дизайне?

Интернет может предоставить более богатую информационную среду, чем это возможно со статическими страницами на бумаге, например:

1. Актуальная информация: веб-информация может быть не только более актуальной, чем печатная копия, но и мгновенной, как в случае с веб-камерами дорожного движения, бронированием билетов, биржевыми отчетами, показаниями GPS и т. Д.
2. Анимация, управляемая пользователем: для имитации анимации на бумаге обычно используются небольшие кратные изображения, но Интернет предлагает гораздо более широкие возможности, такие как

1. движение в реальном времени
2. пользовательский контроль скорости и направления (вперед и назад)
3. анимация выбранных пользователем подмножеств, чтобы можно было наблюдать отдельные переходы с различной скоростью и направлением
4. стоп-кадры, которые захватывают один или несколько кадров анимации.
5. ответ в режиме реального времени на вводимые данные либо от пользователя, либо от внешних источников

1. 3D-графика: часто бывает трудно найти правильную точку обзора для сложных 3D-сцен на бумаге, поскольку любой отдельный вид или даже набор видов может скрыть или исказить важную информацию. Но трехмерная визуализация данных в Интернете, предоставляемая VRML или другими программами, позволяет пользователю просматривать данные под любым углом. Много лет назад я видел содержательную демонстрацию Дж. У. Тьюки, который интерактивно исследовал многомерные (10-12-мерные) наборы данных. Первоначально все, что появлялось, было набором случайных бессмысленных точек, но когда он сжал данные по определенным измерениям и применил повороты, появились четкие и простые кривые, иллюстрирующие важные взаимосвязи.
   Хотя это правда, что управление 3D-объектами сегодня несколько затруднено, поскольку мы обычно делаем это с помощью мыши на 2D-поверхности, в ближайшем будущем это станет проще благодаря привлекательным и легким гарнитурам, которые обеспечивают истинное стереоскопическое зрение в сочетании со стереокамерами. которые отслеживают положение рук в 3D, позволяя нам «захватывать» 3D-изображения и манипулировать ими так же легко, как мы делаем это с объектами реального мира.
2. Графика высокой плотности: хотя печатная копия обеспечивает более высокое разрешение, чем современные дисплеи, некоторые веб-технологии позволяют увеличивать масштаб для просмотра наборов данных гораздо более подробно, чем это возможно на бумаге.
3. Исследовательский анализ данных: Интернет позволяет не только просматривать, но и манипулировать данными, а также применять к ним преобразования, чтобы выявить взаимосвязи, которые невозможно было бы наблюдать на бумаге.
4. Универсальные информационные устройства: Интернет, особенно посредством беспроводного доступа, может связывать воедино все формы информации, которые сегодня предоставляются множеством различных устройств: часами, будильниками, радиоприемниками, телевизором, газетами, журналами, книгами, компакт-дисками, компьютерами, видеоиграми, юридические, финансовые и медицинские записи, лицензии, разрешения, классы, театры и т. д.

(В) Какие ошибки чаще всего встречаются в веб-дизайне?

Среди наиболее досадных дефектов конструкции, которые я часто вижу, можно назвать:

1. Отсутствие информации о дате/времени: большая часть информации в той или иной степени нестабильна. «Дата последнего изменения» важна для большинства сайтов, и любые зависящие от времени данные на странице требуют документирования времени.
2. Запутанная навигация, окна, отключающие навигацию, или слишком много всплывающих окон.
3. Начальные страницы загружаются слишком медленно или требуют плагинов или исключительных ресурсов, а также скриптов, отключающих браузеры.
4. Отсутствие информации о сайте, такой как карта сайта и контактная информация.
5. Беспорядок в виде запутанной компоновки, длинных абзацев, отвлекающей графики, яркого фона, непоследовательного использования цвета (разные цвета в одной теме или один и тот же цвет для разных тем), муаровых узоров.
6. Нечувствительность к техническим или пользовательским ограничениям. Веб-страницы должны предоставлять альтернативные ресурсы просмотра для людей с ограниченными браузерами, компьютерами или физическими ограничениями.