Устаревшие приёмы в веб-дизайне

Иллюстрация к статье Устаревшие приёмы в веб-дизайне

Есть в веб-дизайне несколько вещей (в частности, в Рунете), которые, за последнее время, успели морально устареть или часто используются дизайнерами «не в тему».

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

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

О чём это я?

«На главную», «Контакт», «Карта сайта»

Начну с обязательного для многих сайтов блока иконок:

Блок иконок на главную, контакт, карта сайта

Хорошие иконки, маленькие и понятные для всех пользователей, но иногда дизайнеры...

Сначала про «домик»

Сейчас сложилось так, что на многих сайтах распространена двухуровневая система навигации: главная навигация (пункты, примерно: «На главную», «О сайте», «Клиентам», Партнерам», «Услуги», «Контакт», «Карта сайта», и т.д.), обычно горизонтальная и расположена в шапке сайта, и навигация по разделам (категориям), располагается в одной из боковых колонок. Такая структура хорошо подходит, как для блогов, так и для большинства корпоративных сайтов.

Заметили в таком подходе знакомые пункты меню? Уже можно задуматься, нужно ли дублировать текстовые ссылки пиктограммами.

Еще, де-факто, стандартом стала ссылка на главную которая спрятана под логотипом. Этот подход давно привычен не только дизайнерам и разработчикам, но и обычным пользователям. Не верите мне? Читайте Круга и Нильсена, их отчёты и исследования бывают полезны.

Так вот, к чему я всё это веду, многие умудряются при такой структуре сайта ещё и вставить вышеупомянутые иконки в шапку сайта. Для красивости или для чего-то ещё, непонятно.

Теперь давайте сосчитаем сколько в таком случае получается слылок «На главную»: 1) под логотипом; 2) в главном меню; 3) иконка. Круто. А при наличии «хлебных крошек», их количество можно увеличить до четырёх.

Теперь-то уж глупый пользователь точно найдёт дорогу домой, ему ведь практически не придётся водить курсором по экрану, куда ни кликни — везде «На главную». Счастье.

А если серьёзно, то от первой иконки, в таком случае, можно смело отказаться. Незачем нерационально использовать несколько пикселей на мониторе и многократно дублировать, то что уже присутствует в интерфейсе.

Про «конвертик» и «папки»

Про них плохого ничего не скажу. Единственное, что если присутствуют аналогичные пункты в главном меню, то их можно смело не использовать. Причина — на абзац выше.

Ещё они не очень хорошо смотрятся на сайтах в вебдванольном стиле. Ну не катит там такой минимализм. Лучше нарисовать или найти для такого дизайна что-нибудь такое же градиентно-отсвечивающее и обязательно с падающими тенями и отражениями *)

A A A

Если кто не понял, так обозначаются ссылки для увеличения/уменьшения шрифта на сайте. Лишний элемент дизайна, который дублирует функции, с которыми успешно справляются элементы интерфейсов всех современных браузеров.

В своё время это было лекарство для одного лишь IE6, который не мог справиться cо шрифтом, указанным в пикселях. Седьмая версия обладает полноценным pixel zoom и это уже не проблема.

Отказ от использования дизайнерами этих A A A, будет ещё одним шагом на пути в светлый мир без IE6.

А увеличивать/уменьшать размеры шрифта на сайте пользователь может с помощью Ctrl± , Ctrl+mouseUp/mouseDown или же в меню своего браузера.

+1. В закладки!

Небольшая ссылка «В закладки», к которой прицеплен обработчик JavaScrit, просто устарела в век социальных сетей и всевозможных онлайн-закладочников. Если не на все 100%, то на 80-90 точно.

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

Версия для печати

Ссылки на страницы, отдельно подготовленные для печати это не совсем хорошо. Точнее, это вообще не хорошо.

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

Достаточно к этой же странице подключить дополнительный стилевой лист с настроенными стилями для печати:

<link rel="stylesheet" href="printStyle.css" type="text/css" media="print" />

А к ссылке «Печать» прицепить JavaScript:

<a href="javascript:window.print()"<Печать</a>

И никаких дополнительных версий страниц.

Skip to content

Приём не устаревший, но спорный в использовании.

Ссылки «Skip to Content» («Перейти к содержанию»), «Skip Navigation» («Пропустить навигацию») и т.п. нужны для обеспечения доступности сайтов пользователям с ограниченными возможностями или использующим нестандартные средства доступа в веб. Предполагается, что такие браузеры обеспечивают доступ токлько к наполнению сайта и не поддерживают стилей и прочих дизайнерских украшений (конечно же, если сайт грамотно свёрстан по принципу структура-представление).

Использование таких ссылок для обычных пользователей сети считаю нецелесообразным и они должны быть скрыты через CSS. Для того, чтобы пропустить ненужный участок страницы достаточно одного движения пальца по колесу мыши. Это намного быстрее, чем прочитать ссылку, подвести к ней курсор и кликнуть. Если вы несогласны, может посоревнуемся?

А показывают такие ссылки на сайтах лишь для: «Эй! Посмотрите, у меня тут доступный сайт! Я знаю что такое Section 508 и WAI...»

Ещё

Наверное найдутся такие вещи, которым ещё повезло не попасть в этот список. Но я их обязательно найду и поделюсь своими размышлениями. Время не стоит на месте, что-то всегда приходит на смену старому и неэффективному.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 31

  1. Wasly, 09.09.2008 в 12:38

    Мда, весьма спорная статья...(подумалось мне, глядя на уродливо бооольшущую кнопку «Подписаться на...» :) )

    домик-конвертик-папки в стиле «минимализма» — верный признак движка Parser от Лебедева.

    масштаб шрифта — на тех сайтах, где мне действительно потребовалось выставить масштаб 150% (у меня зрение в норме, замечу), чтобы комфортно читать текст на них, такого линка я почему-то не встречал ;)

    в закладки — редко встречаю и никогда не понимал назначение этого линка :]

    печать — отдельная тема и весьма объемная, но оптимальное решение найдено. Предлагаемая же вами «замена» — пустышка, так как дублирует кнопку броузера по функциональности. Ссылаться на использование «медиа» не нужно, это слабый аргумент — пользователь НЕ ВИДИТ есть ли у страницы медиа для печати ;)

    скип... — простите за непродвинутость, Section 508 не придерживаюсь. Но соблюдение правил юзабилити и акцесибилити назвать «устаревшим приемом» не могу.

    Ответить

  2. rotor, 09.09.2008 в 13:25

    По последним двум пунктам замечаний:

    >Ссылаться на использование “медиа” не нужно, это слабый аргумент...

    Я не ссылаюсь, я о том, что не нужно делать двух разных версий одной страницы: для сайта и для печати. Достаточно лишь грамотно настроить стилевые листы.

    А то, что пользователь не видит не значит, что разработчики не должны были об этом позаботиться.

    >Но соблюдение правил юзабилити и акцесибилити назвать “устаревшим приемом” не могу.

    Теперь цитирую себя (сразу под подзаголовком Skip to Content):

    >Приём не устаревший, но спорный в использовании.

    Такое чувство, что последний пункт вы вообще не читали.

    Ответить

  3. Wasly, 09.09.2008 в 14:38

    «А то, что пользователь не видит не значит, что разработчики не должны были об этом позаботиться.»

    Что пользователь не видит, то он не использует!

    Переход на страницу «версия для печати» по ссылке «Печать» устаревший, не спорю.

    Но доработав именно его получили «новое» современное решение ;)

    Нажатие на ссылку «Печать» приводит к подмене стилевого листа на стиль для печати, а повторное нажатие на эту ссылку приводит к window.print () и возврату основного стилевого листа.

    В результате и перехода никакого не происходит и пользователь увидель превью перед печатью ;)

    «Такое чувство, что последний пункт вы вообще не читали.»

    Читал, чес-слово :)

    Особенно увлёк абцаз с вашим предложением посоревноваться.

    Я, видимо, нечетко выразил свою мысль, извините.

    Я хотел сказать: если не считаете, что это «устаревший приём», то не нужно было о нём упоминать в статье с названием «Устаревшие приёмы в веб-дизайне» ;)

    Ответить

  4. uggallery, 09.09.2008 в 14:57

    Вспоминая Нильсена, упомянем Закон Якоба: пользователь проводит большую часть времени на других сайтах. С этой точки зрения, стандартное меню с пиктограммами может быть полезно, так как вполне распространено и привычно. К тому же оно позволяет сохранить больше места в главном меню, если не дублировать пункты, конечно.

    Домик позволяет избежать разнобоя в терменологии. Когда в меню пишут то «на главную», то «главная», то «стартовая страница», то невесть что еще. А тут стандартный унифицированный образ, врядли допускающий разночтения.

    Со стандартным меню с пиктограммами есть проблемы не упомянутые в статье. Но куда опаснее другое: использование нестндартных пиктограмм для стандартных пунктов меню, и введение в меню новых пунктов без подписей, разъясняющих их назначение. Это приводит к появлению mistery meat navigation.

    В целом согласен, что эти и другие несовершенные методы имеют причиной «слабое планирование информационной архитектуры сайта, недостаточный уровень знаний дизайнера, некачественное ТЗ». Поэтому они кочуют по работам фрилансеров и мелких студий. Плохонькие, но проверенные средства позволяют выдавать поделки за дизайн. Но это увы не совсем вина разработчиков.

    Ответить

  5. rotor, 09.09.2008 в 16:48

    Wasly

    Под устаревшими приёмами я понимаю не только те вещи от которых стоит вообще отказаться в силу их неактуальности, но и те подходы, которые используются не к месту или по традиции: «я уже так делал когда-то», «я видел такое на сайте...» и т.д.

    Старым подходам часто нужна корректировка либо обеспечение их другой реализацией.

    Ответить

  6. Octane, 09.09.2008 в 17:26

    А мне еще не нравится присутствие на сайтах кнопок валидаторов))) у веб-разработчиков они обычно есть в браузере, а обычным пользователям они не нужны. Хотя наверное это нельзя назвать устаревшим приемом…

    p.s. в браузерах на основе WebKit в номерах комментариев при разрешении 1024*768 видно только одну цифру.

    Ответить

  7. uggallery, 09.09.2008 в 18:15

    Почему кнопки валидаторов многих раздражают? Это конечно мусор, но они крайне редко встречаются. Кнопки счетчиков встречаются чаще, а пользы посетителям от них столько же.

    Ответить

  8. rotor, 09.09.2008 в 18:30

    Ну, по-моему, пока спорят о необходимости поддержки веб-стандартов, такие кнопки должны висеть. Пусть видят, что валидные сайты можно делать без ущерба для дизайна.

    Хотя стандартные валид-кнопки не блещут красотой. Можно и перерисовать на свой вкус.

    За наводку thx. Где-то недосмотрел. Как появится минутка попробую исправить.

    Ответить

  9. netcrawler, 10.09.2008 в 14:46

    Да и неудобно сохранять закладки на одном компьютере, пользуясь тремя.

    firefox + foxmarx= закладки на сервере

    Ответить

  10. cross, 12.09.2008 в 10:29

    Про домик и другие иконки не совсем согласен... Очень часто юзается и переодически даже удобен... А все остальное да — старовато

    Ответить

  11. Инна Х, 14.09.2008 в 20:16

    Всё очень интересно. Но, честно говоря, когда я задумалась о эстетическом восприятии Вашего сайта, о вопросах композиционной целесообразности и цветовых решениях... идея написания Вами данной статьи показалась мне забавной.

    Ответить

  12. Lec, 16.09.2008 в 21:44

    Отличная статья, спасибо!

    Ответить

  13. «reset.css» — сброс стандартных стилей, 17.09.2008 в 18:37

    [...] устаревших приёмов в веб-дизайне, а так же не забывайте, что и «Internet [...]

    Ответить

  14. Полезное для всех, скрипты темы, javascript | oslive, 23.09.2008 в 6:44

    [...] Устаревшие приёмы в веб-дизайне [...]

    Ответить

  15. sunbath.ru, 09.10.2008 в 14:55

    сейчас модна блочная верстка, потому что код становится проще. А ведь в прошлом была модна табличная верстка, потому-что о другом не знали. А скоро, возможно, станет модна табличная верстка, т.к. при ней упростится код в css. Т.е. сегодня модно одно, а завтра хорошо забытое старое. А вообще я к тому, что нужно пользоваться любым методом для того, что б была выполнена необходимая задача!

    Ответить

  16. sunbath.ru, 09.10.2008 в 15:01

    о! и кстати, у меня вообще мнение, что иконки для добавления в закладки, в принципе, не нужная на сайте вещь. Ведь кто не знает что такое закладка и куда она сохранится, для них это вообще «захламление» сайта. А для тех кто умеет пользоваться закладками, те и сами прекрасно знают как сохранить, даже не напрягая зрения ища на сайте иконку «добавиться в закладку». Это было модно, только для тех кто этим хвастался, типо «смотрите какая у меня функция клёвая».

    Ответить

  17. Виталий, 12.10.2008 в 22:52

    А знаете, что я сделал сразу после прочтения статьи?

    Выбрал в меню браузера «Предварительный просмотр». И то что я увидел меня не удивило — страница без стилевого оформления. Уж лучше бы была отдельная страница для печати, чем отсутствие оформления печати вообще. Хотя в целом с идеей согласен.

    На счет ссылок перехода по странице, то от обычных пользователей их действительно надо прятать. А вот на мобилке очень удобно, когда они есть.

    Ответить

  18. rotor, 13.10.2008 в 0:09

    Виталий

    Если вы о версии для печати в моём блоге, то она не настроена. Это пункт номер XX в моём списке доработок. Наверное не самый приоритетный, но все-таки ещё не доделанный.

    Ответить

  19. h1, 25.03.2009 в 14:17

    Не соглашусь по поводу отказа от дополнительных страниц для печати. Когда материал/статья разбит(а) на страницы, тогда не обойдешься css файлом и window.print (); В таком случае без формирования новой страницы показано. Еще один момент. А что если пользователь изначально хочет попасть на страницу для печати (например ему линк кто-то скинул)? И зачем ему грузить кучу скрытого кода, когда ему нужен только контент?

    А Skip to content за что так категорично забанили? Если на странице контента больше, чем на 10 экранов то данный приём будет весьма актуальным, к слову, как и в случае длинных статей справочного типа (спецификации и т.п)

    С «домиками» и закладками согласен на все %100.

    Ответить

  20. rotor, 25.03.2009 в 16:50

    @h1

    В идеале всё оформление страниц должно ложиться на плечи вебмастера, включая те случаи которые вы описали (в CSS хватает средств предусмотреть многие варианты формирования страницы для печати в том числе и как разбивать контент при печати по страницам).

    Ну и не забывайте про пункт «предварительный просмотр» в браузерах. Да и в условиях большого рабочего сайта, изготовление дополнительных страниц под печать будет занимать много времени. Мы ведь движемся к автоматизированному вебу, удобному для пользователей?

    Ни разу не получал от друзей ссылку на версию для печати, честно. Поэтому, извините, пропущу этот пункт.

    Про «Skip to content» останусь при своём мнении. Во-первых ни разу не видел таких длинных меню на страницах, чтобы не мог перейти к контенту самостоятельно. Покажете пример?

    А во-вторых для перехода по текущей странице больше подходят ссылки-якоря, если текста действительно много.

    Да, всё, что выше ↑ — ИМХО.

    Ответить

  21. h1, 25.03.2009 в 18:03

    Прошу прощения, надо было сначала ознакомиться со skip-to-content, а затем отписываться. Говоря о них я имел в виду именно якоря.

    Насчет отдельной страницы для печати. Безусловно, нужно стремится к «автоматизированному вебу», однако специфика некоторых сайтов предполагает строгое разбиение материала на страницы, такое часто встречается в статьях-обзорах хардверных ресурсов, где каждая страница может содержать большое количество текстовой и графической информации. В этом случае без генерации отдельной страницы для печати просто невозможно. Или вы предлагаете загрузить сразу 10 страниц, скрывая все кроме n-ных первых? Или подгрузить аяксом?

    А как насчет отключенного js? Я например читаю статьи в версии для печати с мобильного устройства.

    А если взть такую ситуацию: я хочу распечатать страницу так, как она есть — с бэкраундами, картинками, подчеркнутыми ссылками и т.п?

    В полне возможно, что я воспринял вашу статью слишком категорично, хотя по «ИМХО» на абсолютную истину она не претендовала.

    Это я скорее не из нигилизма, а из того соображения, что даже логичные, рациональные предложения не надо вопроспринимать как правила и неукоснительно их соблюдать. Т.е. я не утверждаю, что ваше мнение неверное и (боже упаси) не претендую на абсолютную правоту своего, но говорю о том, что сущуствуют частные случаи.

    Ответить

  22. rotor, 25.03.2009 в 21:17

    Не буду, сопротивляться вашему мнению. Я ведь не доказывал, что эти правила стоит применять всегда и ко всем сайтам. Всегда будут исключения.

    Ведь каждый проект должен проектироваться в соответствии со своими задачами. Поэтому и тех.реализация должна им соответствовать и отталкиваться от конкретных проблем и требований.

    Спасибо за мнение.

    Ответить

  23. Саня, 06.05.2009 в 18:21

    Привет, rotor!

    Внимально изучила рекомендации по оформлению... у меня тоже есть перебор в оформительстве, но это от того, что мне многое хочется попробовать сделать, а лишнее я потом «отмету».

    Так о чем это я? (нет... не о СМС)

    Я хочу спросить, есть ли у вас тема, в которой описывается способ оформления меню с картинками, как в вашем блоге?

    Спасибо.

    Ответить

  24. Саня, 06.05.2009 в 18:44

    Небольшое уточнение: хотелось прежний вариант, ранешний... когда картинки меню были в одну строку. )))

    Ответить

  25. rotor, 06.05.2009 в 19:57

    Хватит подкалывать меня с SMS, подумаешь, асю угнали :) Сменил пароли, возможно, поможет :)

    Не совсем понял, что за меню «когда картинки меню были в одну строку». Проверил, вроде в доступных мне браузерах ничего нигде не разваливается.

    Урока по оформлению меню нет, но вот здесь я давал ссылки на такие меню (en).

    Кстати, забавная карта на портале получилась ;)

    Ответить

  26. Саня, 06.05.2009 в 21:29

    Я сейчас смотрю в Опере, «сова ушла» во второй ряд... )))

    *Спасибо за ссылочку, если что-то спросить, то № девушки Аси тот же?

    Ответить

  27. Тормоз, 15.09.2009 в 6:19

    А я ещё и размер шрифта в пискселях ооочень давно не употребляю. И вообще перешёл на HTML5, так что я один из самых современных 8-р Скоро и блог переверстаю в HTML5 (пока только новые проекты в нём).

    Ответить

  28. rotor, 15.09.2009 в 9:10

    @Тормоз, насчёт пикселей в шрифтах — сейчас это не особо актуально уже, хотя я тоже предпочитаю ключевые слова (x-small, small, ...) и %.

    А вот за HTML5 респект!

    Ответить

  29. @ Vitaly, 21.09.2010 в 20:50

    Пара слов в защиту отдельной страницы для печати. Часто, читая обзоры софта и железа, сразу перехожу на нее, т.к. на нет нет рекламы, меню и т.д. Только нужная информация на всю ширину экрана. И это есть хорошо!

    Ответить

    • rotor, 25.09.2010 в 14:29

      Для чтения перегруженных сайтов есть отличная штука — Readability. Всегда держу под рукой для таких случаев.

      Ответить

  30. Александр, 21.12.2011 в 10:37

    Все что вы описали не является устаревшим! Просто где-то это нужно где-то нет, иконки главная и тп, бывают необходимы, две разные страницы длоя печати мало кто делает, делают через css, в закладки давно никто не использует, ааа это только на готовых движках старых, просто может кому это пригодится а может нет, так убрать не сложно. Вообще не стоит говорить что это устарело юзая какой нибудь движок, там куча функций которые не используются но они там есть.

    Ответить

Есть что сказать?