Веб-дизайн переходит в стадию плавного развития. В среднем, облик главных страниц лишь на 40% отличается от того, какими они была год назад. (Соответственно, полная смена дизайна происходит за 3 года).

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

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

Таковы классические страницы начала интернета: насыщенные графикой и спроектированные без оглядки на какие-либо традиции создания ГИП (графического интерфейса пользователя).

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

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

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

Тем не менее, пристальный взгляд позволяет заметить существенные отличия дизайна 2002 и 2003 годов, поэтому перемены оценены в 70%.

Число вкладок — семь — одинаково в обеих версиях, но в более поздней из них вкладки распределились по всей ширине страницы, и изменился цвет, обозначающий выделенную вкладку. Более того, изменились названия категорий в панели навигации. Информационная архитектура 2002 года строилась на категориях: Первая страница, Предпринимателям, Интернет-бизнес, Коммуникации, Медиа, Персональные технологии и Инвесторам. Категории 2003 года: Первая страница, Программное обеспечение предпринимателям, Аппаратное обеспечение предпринимателям, Безопасность, Обмен опытом, Персональная техника и Сеть.

Наряду с общей композицией главной страницы Персональные технологии — единственная категория, выжившая в информационной резне 2003 года, однако и у неё отрубили кусок названия.

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

Изменения функций многочисленны:

• вместо двух передовых статей с маленькими иллюстрациями появилась одна передовица с более крупными иллюстрациями;
• исчез блок «Новости. Контекст» в нижней части экрана;
• под новостями второго уровня добавились заголовки третьего уровня;
• авторские колонки, включая фотографии их авторов, переместились в гораздо более заметное место;
• видео стали менее заметны;
• поиск по разделам заменили на простой поиск с возможностью использования дополнительных опций;
• время стало подписываться серым цветом, а формат времени изменился с абсолютного (4 октября 2002 года, 13:46 по летнему тихоокеанскому времени) на относительное (1 час 17 минут назад) — часто обновляющимся сайтам лучше использовать относительное время, так как это освобождает пользователей от необходимости рассчитывать часовые пояса;
• время последнего обновления стало более заметным (разумное следствие смены формата времени на относительное);
• у пользователей появилась возможность сохранять статьи; и
• добавился новый раздел: «Быть в курсе».

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

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

Тем не менее, после использования сайта стали заметны некоторые перемены.

Пример детали: кнопка Получить цитату переместилась из правой в левую часть экрана. Кроме того, в 2012 рядом с логотипом появился загадочный знак плюса. (Кликнув на него, можно увидеть сообщение Мы обновились с ссылкой на рассказ о том, чем вызваны перемены. Было бы лучше переместить его в менее заметный раздел с новостями и избежать таким образом странного знака).

Радикальными были изменения в текстовой части, слева от изображения человека — в тексте стало больше призывов к действию.

В 2011 году:

• Зарегистрированный пользователь Aetna Navigator: Войти
• Новые пользователи: Зарегистрироваться
• Найти врача
• Владельцам малых предприятий
• Приобрести медицинскую страховку

В 2012 году:

• Найдите врача
• Получите бланк
• Узнайте о медицинском страховании
• Свяжитесь с нами
• Войдите в Aetna Navigator («Войдите» выделено)
• Зарегистрируйтесь сейчас, чтобы
  • Получить личную карточку
  • Получить информацию о возмещениях и выплатах
  • Оценить стоимость услуг
  • Пройти медицинский осмотр

Найти доктора — единственное сохранившееся действие (тем не менее, изменившее расположение). Новая функция входа на сайт определённо стала шагом вперёд: лучше начинать взаимодействие с информативных ключевых слов, чем с названия компании.

Наконец, в 2012 году исчезли ссылки на китайскую и испанскую версии сайта. Хорошо это или плохо — зависит от числа посетителей, говорящих на этих языках. В 2011 году опция выбора языка имела нестандартное расположение (внизу справа, ниже края экрана большинства мониторов того года).

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

Начало плавного развития веб-дизайна

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

Тенденция очевидна: разительные перемены в первые годы существования интернета, менее значимые — в период пузыря доткомов и плавное развитие на уровне 40% в последние годы.

Конечно, кривая немного колеблется, так как она отражает оценки трёх показателей: число изменившихся за год элементов дизайна, значение этих элементов и характер перемен. Очевидно одно: веб-дизайн переходит в стадию плавного развития.

Это хорошие новости, так как пользователи ненавидят перемены. Люди предпочитают, чтобы вещи работали привычным для них образом. Размеренный темп даёт команде дизайнеров больше времени на анализ и исследование необходимых изменений. Семь раз отмерь — один раз отрежь. Это в свою очередь повышает шансы нового дизайна на успех и прибыль.

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

Оригинал: http://www.useit.com/alertbox/homepage-design-change.html

Михаил Галушко
Руководитель направления финансовой экспертизы, информационный архитектор в AIC Media

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

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

Григорий Коченов
Креативный директор в AGIMA

Я уважаю людей, которые могут совершать какое-то повторяющееся действие в течение 19 лет. Это круто. Смешно смотреть на сайты начала 90-х. Такой мощный стиль, надо обязательно будет к нему вернуться.
Якоб славится любовью к мобильным версиям. Еще весной этого года он, по сути, игнорировал все процессы связанные c движением responsive design. Однако, реальность такова, что со временем все больше сайтов будут переходить на адаптивные рельсы. Многообразие устройств в post-PC world не оставляет шансов иному. И тут возникает вопрос: допустим сайт, как из последнего примера, можно оставить практически без изменений, снабдив адаптивным лейаутом. В десктопной версии сильно ничего и не поменяется, но на самом деле изменится все. Сколько процентов изменчивости появится на графике Якоба Нильсена? Тут учитывается только внешняя сторона веб-дизайна, хотя на самом деле это вершина айсберга.

Роман Клевцов
Генеральный директор в Оптимизм.ру

В России веб-дизайн развивается значительно медленнее, чем на Западе. И исполнителей, которые следят за тенденциями и улучшением технологий, изучают типографику и понимают важность веб-аналитики в развитии веб-проекта, не больше нескольких десятков по всей стране. Поэтому тенденции на 2000-2004гг., описанные в статье Нильсена, у нас во многом только сейчас просматриваются. И если в европейских и американских странах пик изменений пришелся на 1994-2003 гг., то в России все развивается плавно, переломного момента еще не было.

Тем не менее, развитие веб-дизайна очевидно. Из основных тенденций развития компьютерного дизайна в России на 2011-2012 гг. можно выделить:

1. Расширение использования CSS3 и HTML5. Большинство веб-дизайнеров отказываются от Flash в пользу HTML5. Можно сказать, Flash потихоньку умирает: реже встречаются здоровенные flash-баннеры на главной странице, flash-сайтов фактически не осталось. Связано это с тем, что данный формат не работает на мобильных устройствах и планшетах.
2. Легкая навигация, пример с закрепленным («прилипающим») меню, которое часто применяется, если главная страница сайта умещается больше, чем в два экрана.
3. Совместимость с мобильными устройствами и дизайн, приспособленный под сенсорные экраны.
4. Интересный скролл, приемы смещенной прокрутки, особенно для одностраничных сайтов.
5. Типографика. Раньше типографике в дизайне вообще не уделялось никакого внимания, ее значение очень принижалось. С появлением WhatTheFont, CSS Typeset и Typetester дизайнеры все больше стали придавать значение шрифту, правильным отступам, просто приятному оформлению страниц с большим контентом.
6. Интеграция с социальными сетями.
7. Инфографика. Представление информации в легком для восприятия виде.
8. Пиксельные иконки.
9. Эффекты теней, благодаря CSS3.
10. Умный поиск, все чаще встречается на uлавной странице, пример, с МТС.

Таким образом, плавное (и относительно качественное) развитие позволяет посетителям сайтов комфортно себя чувствовать. Нильсен и большинство психологов так и утверждают: резкие перемены вредны. От себя добавлю следующее: резкие НЕОБДУМАННЫЕ перемены еще вреднее. К счастью, дизайн Рунета действительно развивается аккуратно и неспешно.