Мнения специалистов об обновленном TUT.by

Главным событием белорусского интернета в предновогодние дни стала демонстрация порталом TUT.by своего обновленного вида — new.tut.by. Можно по-разному относиться к главному порталу байнета, но трудно спорить с тем, что оставаться безучастным к вестям из стана TUT.by любому белорусскому интернет-пользователю сложно — ежедневный миллион посещений говорит сам за себя.

Легко предугадать реакцию большинства пользователей — им обновление внешнего вида тутбая придется не по душе, и это никак не связано с качеством обновления. Причина проста — пользователи склонны негативно воспринимать любые изменения привычных вещей. Другое дело — мнение профессионалов, которые в своих оценках руководствуются не столько эмоциями, сколько знаниями и опытом. И если мнения о дизайне (в значении оформления) всегда во многом субъективны, то оценить юзабилити или качество исходного кода можно по вполне определенным критериям.

Мы попросили ведущих белорусских специалистов по юзабилити, веб-дизайну и веб-разработке дать оценку новому облику портала. Разумеется, мы обратились и к лидеру TUT.by – Юрию Зиссеру, чтобы узнать из первых уст, что, как и зачем делалось.

Антон Грекович, директор и творческий руководитель студии веб-дизайна Pixelhead

Автор самой первой версии TUT.by (2000 г.)

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

Если предыдущий дизайн главной страницы был основан на достаточно внятной модульной сетке, то новый вариант, к сожалению, похвастаться этим не может. Блоки и заголовки пляшут туда-сюда, много вертикалей, везде разные отступы и т.п., что оставляет впечатление неряшливости и дребезга. Изменения коснулись и цветового решения, причем не лучшим образом: добавились грязноватые "тенюшки" и "растяжки", цветовое выделение блоков выглядит плохо (например, блоки до первого горизонтального баннера). Невнятные иконки, которые как раз стоило бы переделать, перекочевали из старого дизайна без изменений.

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

Еще несколько минусов, которые не касаются основной массы пользователей, но тем не менее важны для белорусской интернет-индустрии в целом. Глядя на новый дизайн, профессиональным веб-девелоперам понятно, что головной портал страны сэкономил на дизайнерах и специалистах по юзабилити, и, как мне тут подсказывают, на кодерах тоже. Получается, что не нужно долго учиться и читать книжки, чтобы создавать сайты - в Беларуси это никому не нужно. Ну, а новый дизайн тутбай — это как если бы президент некой гипотетической страны приехал на встречу глав государств в костюме noname на размер меньше и электронными часами "montana" (7 мелодий), причем не на руке, а на шее, потому что ремешок отломался. А после встречи написал в своем твиттере: "Журналюги исходят пеной из-за моего нового костюма: махнул местами пиджак с брюками, купил часы новые — а сколько вони!". А именно такова была реакция Юрия Зиссера на критику нового дизайна портала http://twitter.com/yzisser/status/6937313709. Ну что ж, мне жаль.

Максим Гулевич, технический директор, ITOnline Group

В прошлом руководитель отдела дизайна, юзабилити и информационной архитектуры EPAM Systems

Что ж, я отношусь к той группе пользователей (именно пользователей, а не разработчиков/проектировщиков/дизайнеров/копирайтеров), которым новый портал НЕ понравился и даже вызвал некоторое отвращение.

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

Почему же мне не понравилась новая главная страница?

Во-первых, дизайн должен решать задачу. Какую задачу решает новый дизайн? На этот вопрос я не смог ответить за 5 минут использования страницей, и это говорит о том, что скорее всего редизайн выполнен ради редизайна (окей, я увидел новые рекламные места).

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

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

Все остальное: скачки текста по ширине при переключении вкладок, странные задержки при движении мышкой, чудовищную 3d цветовую схему, размер шрифта, который меняется не на всей странице, мизерное количество информации, которое можно прочитать на моем разрешении 1680x1050, странные перегрузки страниц (там, где их быть не должно), странное расположение некоторых блоков, ну и конечно нетривиальное решение отображения информации в блоках «Отклик» и «Смотри и Слушай» - мы обсуждать не будем, ведь дизайн – понятие субъективное, и мне, как человеку, зарабатывающему на проектировании и дизайне деньги, об этом очень больно писать.

Юрий Шиляев, менеджер проектов, EPAM Systems

В прошлом директор минского офиса Artics Internet Solutions

Если говорить о самой странице, то в сущности ничего не поменялось. Во всяком случае, не поменялось на столько, чтобы обсуждать сами изменения. Рекламодатели могут видеть новые рекламные места — это приоритет номер раз для руководства TUT.by. Визуально главный портал страны не вырос, он не приводит в восторг, не задает какой-то высокой планки для других проектов. TUT.by с точки зрения дизайна, типографики - это окно в прошлое, как домашний телефон на визитке. Столь бурное обсуждение новой страницы в твиттере связано больше с ожиданиями белорусских дизайнеров, которые надеялись, что что-то изменится в лучшую сторону. Но этого не произошло. Застоявшиеся в холодильнике макароны разогрели, приправили и подали, как угощение к новогоднему столу. Ждали большего.

Вадим Скротский, руководитель студии Вадима Скротского

Человек, ответственный за современный дизайн onliner.by и oz.by

Я абсолютно не являюсь сторонником обсуждения чужой работы. Бессмысленно что-либо ругать или хвалить, не зная мотивов, технических возможностей, бизнес-задач, финансовых условий и иных требований, которые стояли перед разработчиками. Дилетантизм в работе дизайнеров виден даже без особых знаний предмета: полный разброд и шатание в стилистике, очередная попытка применить весь цветовой спектр, непредсказуемость в поведении управляющих элементов и так далее. Проще говоря — отсутствует предмет обсуждения. Понятно только одно, что создавалось «это» на коленке и за три копейки, то есть в рамках очень ограниченного бюджета и сроков. Почему и зачем — вопрос к Юрию Анатольевичу.

Антон Баранов, художественный руководитель Студии Антона Баранова

В том числе автор дизайна сайта hoster.by для TUT.by. Арт-директор Астроним* c 2004 по 2008

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

Павел Коноплицкий, Специалист по юзабилити и UX Amazing Development

Изменение главной страницы TUT.by рано или поздно должно было произойти. Любые видимые изменения в layout сайта с посещаемостью 984 803 в день (данные на 23 декабря) будут проходить мучительно как для самого портала, так и для его посетителей. Думаю, что, как и любой владелец сайта, администрация TUT.by определила цели, которые она собирается достичь с помощью редизайна. Ещё не успел посмотреть видео, в котором Юрий Анатольевич рассказывает о новом дизайне, но для себя я не смог однозначно определить эти цели. Если пробовать угадывать, nо вот, например, один из вариантов — новый дизайн направлен на повышение падающего CTR у баннерной рекламы, уменьшение, хотя бы на некоторое время, эффекта "баннерной слепоты" (вспомните, когда вы последний раз жали на баннер на TUT.by). Повторюсь, это только одно из предположений.

Перепроектирование посещаемого портала — вызов для любого проектировщика интерфейсов. Именно в таких проектах имеет огромную ценность фаза исследований (анализ статистики, опрос и интервью с пользователями, обратная связь и т.д.). TUT.by в этом смысле - кладезь уникальной информации о поведении и опыте белорусских пользователей интернетa. Кроме того, TUT.by часто воспринимают как лакмусовую бумажку всего байнета. Я думаю, именно поэтому множество отечественных специалистов так ревностно отнеслись к новому дизайну. Специалистам портала TUT.by было бы интересно изучить опыт Яндекса по внедрению новых/изменению старых элементов главной страницы (блоков, ссылок, названий и т.д.) и предварительных эксперименов на небольшой выборке, прежде чем новый элемент внедряется для всех пользователей.

Что касается конкретных интерфейсных решений, то в новом дизайне меня смутило решение вынести поиск в переключаемый таб. Интересно узнать обоснование такого решения. Из положительных моментов хотелось бы отметить движение в сторону accessibility (доступности) с появлением кнопок для увеличения шрифта. Хотя у меня есть вопросы по реализации и этого элемента.

В целом новый дизайн TUT.by не оправдал моих ожиданий

Надя Зеленкова, директор, интерактивное агентство Red Graphic

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

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

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

Что касается дизайна и восприятия, то тут случай, когда четко видны две разные руки в дизайне старом и новом. И первая рука была профессиональнее. Все те мелочи, из которых складывается ощущение комфорта от нахождения на сайте, в новом дизайне проигнорированы или решены плохо: отступы, пропорции шрифтов, закругления плашек, пляски нижних блоков при изменении главной новости. Каким-то странным чудом в дизайне уцелела только одна фоновая иллюстрация блока: раньше она была для блока голосования, а теперь одна и на голосование, и на анекдоты. Из-за всех этих мелочей tut.by в новом дизайне зажатый, разношерстный и не очень последовательный.

Но перемены – это всегда к лучшему:)

Павел Ловцевич, Технический директор, LOVATA Group

В целом, новую верстку tut.by можно охарактеризовать как «WTF»? Портал, претендующий на звание местного Яндекса выкатывает вот такое, простите, технологически ущербное убожество. Подобное качество работы для такого уровня проекта просто недопустимо. Среди основных отрицательных качеств кода можно отметить отсутствие его «чистоты», неграмотное применение технологий, применение устаревших технологий, а также отсутствие качественной оптимизации верстки.

Мне хотелось бы, чтобы руководство крупнейшего интернет-проекта помнило о том, что tut.by является лицом всего национального сегмента сети Интернет. На них смотрят, на них ориентируются, по ним оценивают.

С подробным разбором верстки можно ознакомиться в блоге Павла

Дмитрий Овод-Марчук,технический руководитель Hello World!

Недостатков в верстке достаточно много. И если говорить об общей оценке, то это очень сырой релиз, который, видимо, доверили сверстать программисту, который вроде как знает html/css. Если этот код займет со временем место существующей сегодня главной страницы портала — то моему удивлению не будет предела. Что сразу бросается в глаза при просмотре кода страницы — непонимание семантической верстки автором кода и использование уже давно не используемых таблиц для разметки макета.

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
            <td width="14%" class="current"><div><div><a href="http://new.tut.by/?informer=0">Поиск</a></div></div></td>
            <td width="14%" class=""><div><div><a href="http://new.tut.by/?informer=1">Погода</a></div></div></td>
            <td width="15%" class=""><div><div><a href="http://new.tut.by/?informer=2">Финансы</a></div></div></td>
            <td width="14%" class=""><div><div><a href="http://new.tut.by/?informer=3">Афиша</a></div></div></td>
            <td width="15%" class=""><div><div><a href="http://new.tut.by/?informer=4">Программа ТВ</a></div></div></td>
            <td width="14%" class=""><div><div><a href="http://new.tut.by/?informer=5">Форумы</a></div></div></td>
            <td width="14%" class=""><div><div><a href="http://new.tut.by/?informer=6">Работа</a></div></div></td>
</tr></table>

Этот код занимает 845 символов, а можно обойтись и 535 символами (если не брать в расчет код в файлах CSS, объем которого изменится незначительно):

    <ul class="tabs">
        <li class="active"><a href="http://new.tut.by/?informer=0">Поиск</a></li>
        <li><a href="http://new.tut.by/?informer=1" target="_blank">Погода</a></li>
        <li><a href="http://new.tut.by/?informer=2" target="_blank">Финансы</a></li>
        <li><a href="http://new.tut.by/?informer=3" target="_blank">Афиша</a></li>
        <li><a href="http://new.tut.by/?informer=4" target="_blank">Программа ТВ</a></li>
        <li><a href="http://new.tut.by/?informer=5" target="_blank">Форумы</a></li>
        <li><a href="http://new.tut.by/?informer=6" target="_blank">Работа</a></li>
    </ul>

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

Один из страшнейших грехов верстальщика — описывать элементы прямо в html с помощью аттрибута style. Меня очень хорошо поймут те, кому приходилось вносить изменения в ранее написанный код с такими "сюрпризами".

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

<div id="container" class="container">

<img alt="|" src="http://img.tut.by/titul_by2/header-settings-divider.gif"; class="divider"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>РАЗМЕР ШРИФТА:&nbsp;&nbsp;</span><img alt="Уменьшить шрифт" src="http://img.tut.by/titul_by2/minus_icon.gif"; class="plusMinus" id="zoomMinus" />

<a target="_blank" onclick="window.open('http://www.tutby.com/service/development/main/')" href="http://astronim.by" title="Разработка сайтов"><img height="43" width="48" alt="Разработка сайтов" src="http://img.tut.by/i/idev.gif" /><br />Разработка сайтов</a>

И таких интересных строк можно найти ещё немало.

Обращают на себя внимание проблемы и проблемки буквально повсеместно. Где-то кавычки экранируются (заменяются на escape-последовательности), где-то нет. Отдельные атрибуты тегов (например, при вставке swf) не взяты в кавычки (наследие IE?). Наконец, где-то <br/>, где-то <br /> (пробел перед слэшем — по желанию).

Отдельным экстремалам можно порекомендовать почитать, что скажет валидатор от w3c при виде сайта. Я не стал на ночь глядя .)

Да, отдельный разговор — это использование разработчиками сценариев javascript. Мои беглые замечания:

• Кроме 4 подключенных в <head/> внешних js-файлов в коде страницы более 20 раз подключаются внешние js-библиотеки и инициализируются отдельные методы. Опытные разработчики знают, как неудобно (и неэффективно!) работать с кодом, разбросанным в разных частях html-документа (а на практике этот код получается из множества других — составных частей). Внесение быстрых правок в такой код затруднительно. Это ахилесово сухожилие больших проектов, но с этой проблемой можно справляться.
• Обработка событий (клик, ховер) прямо в коде — больше чем дурной тон. По той же причине: одним махом внести изменения в обработку, скажем, события переключения табов не получится. Но получилось бы, если бы обработка события была бы собрана в отдельном js-файле.
• Кстати, предыдущий пункт крайне просто может быть реализован с помощью jQuery. Но разработчики не очень активно пользуются им, из-за чего им приходится изобретать даже такое:

<a href="javascript:function(){return false;}" onclick="javascript:return false;">Аукционы</a>

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

Юрий Зиссер, генеральный директор УП "Надежные программы" (TUT.BY)

Новый дизайн портала мы не вводили и в обозримом будущем не планируем. Мы лишь подправили существующий дизайн, поменяв местами правую и левую колонку в верхней части и изменив рекламные места. Так что мнения из серии "те же яйца, вид сбоку" абсолютно справедливы.

Структура

В результате стало меньше "молока" вокрут главной новости. Соответственно верх страницы стал более компактным, и новости поднялись ближе к пользователю. Главных новостей стало четыре. Исчез баннер 468х60, который давно "режет" Антивирус Касперского, и вообще уменьшилось число рекламных мест, хотя оставшиеся рекламные блоки стали больше по размеру и появились новые форматы баннеров — это общемировая тенденция. За счет переброски правой и левой стороны местами ресурсы портала объединились в один блок (до сих пор много лет ресурсы портала были слева, а рекламные ссылки — справа, что как минимум нелогично). К тому же правая и левая стороны перестали зависеть друг от друга, что опять же уменьшило "дыры" в дизайне вокруг главной новости и дало возможность добавить новые блоки — например, "Смотри и слушай", что нам кровно необходимо в свзи с появлением нового раздела с мультимедийным контентом. Правда, в результате появления независимости правой и левой колонок создалась иллюзия нарушения сетки. Сегодня рассматривали это и решили ничего не менять, иначе "молоко" вернется.

Рекламные места.

Важная проблема в переделке, вяжущая нас по рукам и ногам — вовсе не в дизайне и даже не в стиле, а в (печальной? радостной? нужное вставить) необходимости сохранить монетизацию портала, т.е. сохранить рекламные места на портале в таком виде, чтобы не пришлось ее уценять. Кстати, довольно много ограничений дизайнерской свободы появилось из-за необходимости учитывать интересы рекламодателей. Даже отказ от баннера 468х60 нам дорого обошелся в буквальном смысле (потеряли десятки тысяч долларов в годовом исчислении). Да и с четырьмя главными новостями получилось так, как получилось, из-за необходимости сохранить самое дорогое рекламное место без уценки. Вы даже себе представить не можете, как были осенью шокированы редизайном рекламные агентства, но не потому, что стало хуже (наоборот, всем понравилось), а из-за изменений в продажах и перепродажах. Непонятно, как воспримут рекламодатели цены на новые рекламные места и т.д. Разработчики корпоративных сайтов даже представить себе не могут, чтобы из-за расстановки рекламных баннеров на своей работе они могли недосчитаться десятков или сотен тысяч долларов в год, и вообще как "уверенно" себя чувствуешь, принимая решения о баннерных местах: поставил баннер не туда или не такой — фирма — бац! — и потеряла сто тысяч баксов.

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

Консерватизм пользователей

Лучшее — враг хорошего. Пользователи крайне консервативны и всегда будут против абсолютно любых изменений дизайна. Проверено в 2004 году: два месяца вся страна стояла на ушах и писала на форумах и в почту, как стало ужасно. Пользователи хором просили вернуть старый добрый дизайн Грековича, а дизайнеры исписали весь интернет гадостями о работе Астронима. Но самое ужасное — что тогда же продажи рекламы немедленно упали в полтора раза и восстановились только три месяца спустя! И это в сезон!! Увы, мы себе больше не можем позволить таких дорогостоящих экспериментов. Честно говоря, лично я даже за эти минимальные изменения боюсь, как их примут пользователи.

Стиль портала

остался неизменным, т.к. пока не видим в этом ни жесткой необходимости для пользователей или бизнеса, ни — главное — возможности. Лишь разработчики корпоративных сайтов, которые все по заказу делают "с нуля" по принципу "...весь мир разрушим до основанья, а затем...", получая на переделку время и деньги, могут себе это позволить. Тем более что над нами висит масса проектов в рамках портала, которые важнее редизайна титульной — например, стратегически гораздо важнее развитие социальной сети и новостей. Но наше хозяйство большое и разнородное, поэтому если мы изменим стиль (а когда-нибудь это придется сделать), то нам придется изменить около тысячи шаблонов у себя и всех наших партнеров в десятках разделов портала, а это почти нереально и займет годы, к тому же затормозив функциональное развитие портала и, следовательно, ослабив нас в конкуренции с зарубежными ресурсами. Нам остается лишь позавидовать тем молодым или небольшим ресурсам, которые не отягощены унаследованными вещами (legacy).

Саморасхлопывающиеся закладки

Моя любовь в обновленном дизайне. Страшно нравится вкусная реализация на Yahoo!, хотя они даже допустили скакание колонок под закладками вверх-вниз (что якобы нельзя по канонам) и не парятся по этому поводу. Мне также страшно нравится играться с закладками, водя по ним мышью, и я надеюсь, что пользователям эта игра понравится и еще больше "привяжет" их к порталу. Это как iPhone, который иногда хочется взять в руки только для того, чтобы потыкать в экран пальцами. Люди бы за неделю привыкли к саморасхлопыванию. Но мои коллеги испугались исходившей от одного известного профи угрозы расстрелять :) и под влиянием массы негативных отзывов уже кастрировали "фишку", превратив закладки в обычные кликабельные "табы". Игрушке конец. Осталось только справа в середине. Мне жалко, но упоминавшийся выше консерватизм пользователей никто не отменял.

Новый дизайн неделю назад принципиально утвердили всем миром —11 сотрудников расписались на листе утверждения, включая меня. Дополнительно для текущей оценки проекта привлекались не только наши сотрудники, но и сотрудники ООО "Веб Эксперт", крупнейшие рекламодатели и крупные рекламные агентства, т.к. им эти новые рекламные места предстоит продавать в будущем году.

Незавершенность

Дизайн все еще в работе, поэтому налицо очевидная "сырость" в мелочах. Замечания будет исправлены в течение месяца. К сожалению, хотя мы разрабатывали этот дизайн с весны, детально обсуждали на совещаниях минимум раз тридцать по 30-40 минут — и все равно не успели. Пообщавшись с рекламодателями, мы поняли, что изменить дизайн имеем право только когда почти нет баннерной рекламы, т.е. ровно один раз в году между 1 и 10 января (тем более что медиапланирование у крупных рекламодателей осуществляется на календарный год). Поэтому пути назад нет: вводить новый дизайн придется в начале января в имеющемся виде и потом доделывать мелочи. Тем более что отзывы и мнения пользователей и профессионалов продолжают поступать. Мы их собираем, классифицируем и рассматриваем каждое замечание на совещаниях. Кое-что в последние сутки изменили. В течение января еще не раз изменим — в частности, придется поработать над низом страницы: там еще вообще ничего не делалось.

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

Спасибо дизайнерам TUT.BY! Спасибо всем рядовым пользователям и профессионалам, кто поучаствовал в тестировании и высказал ценные замечания! Мы их обязательно учтем.