Разбор сайта #1. Интернет провайдер «Телесеть»

Если больше интересен видео формат, то вот ссылка.

Попался мне где-то 2 года назад очень интересный сайт провайдера «Телесеть», наткнулась я на него в какой-то подборке топовых сайтов. Первая мысль была «Дизайнеры, алло! Я понимаю, что стильно, модно, молодежно и все такое, но как же удобст?! ». Почему-то сейчас многие об этом забывают и концентрируются только на wow-эффекте. Но веб-дизайн это же не только про «рисовать», я бы даже сказала, что он вообще не об этом. Основная задача дизайнера — сделать удобный для пользователя продукт. Удобный. Главное — это удобство пользования. Да, да, именно удобство. Пробегусь по некоторым основным моментам, которые сразу бросаются в глаза и мешают пользователю получать удовольствия от пользования продуктом.

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

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

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

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

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

Далее у нас идут 3 иконки, которые ассоциируются с открытием меню.

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

Почему страница бесполезная? Потому, что информации никакой нет, хотя можно кликнуть на любой из 4-х квадратов, и что-то произойдет, но почему пользователь должен догадываться? А вернее, не догадываться, а тыкать и смотреть, к чему приведет каждый клик. У меня нет времени сидеть и играться, я просто хочу быстро получить необходимую мне услугу. Ок, есть кнопка «Оплатить», но что оплатить? На какую сумму? При нажатии откроется страница для ввода данных моей карты? При хорошем дизайне у пользователя не будет возникать лишних вопросов. Все сразу будет понятно и просто.

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

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

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

Нажимаю на кнопку «Подробнее», чтобы получить информацию о тарифе, но получаю страницу, по информативному и функциональному наполнению равную главной.

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

В меню пункт называется «Тариф», а страница — «Тарифы». Лучше везде одинаковые названия использовать, чтобы не путать пользователя.

Сама страница с описанием тарифов не особо информативная. В базовом тарифе написано только про телевидение, в тарифе Интернет 100 Мбит/сек указано «для абонентов ТВ». Что это означает? Что я не могу подключить интернет без ТВ или данная цена для абонентов ТВ? Какая тогда цена, если я не хочу подключать телевидение?

А ниже идут плашки с иконками, где написано «100 Мбит/с стабильная скорость», но непонятно, что будет, если я подключу тариф Интернет 200 Мбит/с? Будет 100 Мбит стабильной и 100 нестабильной скорости?

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

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

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

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

На одной странице 3 раза написано «бизнес». Не стоит так делать, хватит одного раза в меню.

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

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

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

Опять трижды упоминание о том, что это именно новости. Лучше оставить только одно.

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

Дату лучше размещать в самом верху или самом низу, отделить ее визуально от основного текста, сейчас она теряется. Хорошая структура новости: дата -> заголовок (что произошло) -> описание.

Почему-то кнопка «продолжить» серая, из-за чего создается впечатление, что она неактивна. Было бы логично показывать ее серой (неактивной) изначально, а при вводе номера телефона яркой (активной).

Но кнопка становится яркой только при наведении курсора.

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

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

Да и в целом разделение формы на 2 части — странное решение. Логичнее было бы сделать одну, объединив поля ввода для номера телефона и текстовое. Уменьшить количество шагов.

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

Здесь нет заголовка, хотя до этого он всегда был. Желательно везде придерживаться единой структуры.

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

Кнопка «в кабинет» становится серой при наведении, как будто бы становится неактивной.

Здесь почему-то совсем другой стиль пошел, не соответствует основному.

Пункты меню сбоку отличаются по стилю и немного перемешались — вместо пункта «Оплата» появился «Каналы».

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

Страница «Камеры» тоже переводит в личный кабинет.

Пункты «Кабинет» и «Камеры» выделены зеленым цветом, но почему так сделали, я так и не поняла. Сейчас выглядит так, будто это равнозначные элементы.

Снова поменялся стиль, до этого все было все яркое и красочное на белом фоне. Переходим на страницу «Каналы», и нас встречает черный фон. Это весьма неожиданное решение, которое может смутить пользователя.

Далее мы видим инструмент «селект», где имеется возможность выбрать только одну опцию. И опять странное решение — добавить крестик, который будет отменять выбор. Странное потому, что крестик используют, когда есть возможность выбрать несколько опций одновременно. Чтобы не тыкать на каждую выбранную опцию для отмены выбора, нажимают на крестик (сбросить все). В данном случае надо добавить отдельную опцию «все», которая будет выбрана изначально и показывать весь список, а крестик убрать.

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

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

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

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

Нажимаем кнопку «инструкция» на одной из карточек товаров, и нас перебрасывает на страницу 404. Я даже не сразу поняла, что это она. Обычно 404 делают без элементов главного экрана (меню, ссылок и т.д.).

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

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

Ссылка на главную потерялась, почему-то она сделана белым цветом.

Список с точки зрения кликабельности здесь сделан правильно, пункты сворачиваются и разворачиваются, но было бы хорошо еще ховер на них добавить.

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

Снова фиолетовый текст, но уже не кликабельный. Зато тут же фиолетовые ссылки.

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

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

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

Во-вторых, кнопки выполнены в 9 разных стилях. Зачем так много? Лучше выбрать 2 стиля: один для основных кнопок, по типу «заказать» или «оплатить»; и другой для второстепенных кнопок, по типу «подробнее», «продолжить», «далее» и т.д. Кстати, на сайте где-то написано «далее», где-то «продолжить». Лучше прийти к какому-то одному слову, так как смысл у них одинаковый.

Также я нашла 3 разных стиля полей ввода, хотя все это телефон. Зачем использовать 3 разных стиля для одного и того же элемента? Это очень путает пользователя. Он познакомился на одной странице со стиле элемента, и ожидает на следующих увидеть его таким же. Получается, что ему с одним и тем же элементом приходится знакомится заново каждый раз.

На первый взгляд сайт производит wow эффект — яркая иллюстрация цепляет взгляд, на ней хочется задержаться, рассматривать. Сам по себе сайт стильный, но есть много моментов, которые стоило бы доработать с точки зрения удобства пользования. Если учесть и исправить все указанные мною недочеты, сайт будет просто конфетка =)

Если вы знакомы с подобными сайтами, кидайте ссылки в комментариях. Буду постепенно их разбирать на youtube и здесь. Также можете кидать свои сайты, сделаю для ваших разборов отдельную рубрику.

Больше контента по дизайну от меня: Youtube | Telegram | Instagram

Спасибо за внимание. До следующего поста =)