Аудит веб-сайта барбершопа «Tommy Gun»

Аудируемый сайт.

Дизайн

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

2) «Нестандартность» дизайна нарушает пользовательские привычки. Заведомо нарушается группировка элементов, из-за чего непонятно что к чему относится. Не ясно какие элементы являются интерактивными. Конечно, подразумевается что только в первые пару секунд, но все равно пользователю приходится вникать в эту сложную картину перед ним.

4) Декоративные шрифты используются для написания большого текста. Читать не удобно и выглядит не красиво.

5) «Чёрт» в углу экрана.

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

Кстати, вот почти об этом в блоге Ильяхова.

6) Баг это или фича, но текст наезжает на соседние элементы. Очень неряшливо смотрится.

7) Неоправданные расходы пространства на экране.

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

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

Переходим на следующую страницу (события).

Первое что бросается в глаза — «чего страница так долго грузится». Ну заглянем под капот:

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

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

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

Двигаемся дальше...

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

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

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

Ладно, по страницам закончил, посмотрю общие элементы.

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

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

В данном случае не ясная группировка. У элементов теряется смысл/функционал и без бутылки внимания здесь не разобраться.

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

Технические проблемы

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

И ладно, если бы эти люди были приятными на вид и на голос. Так ведь у них может пахнуть изо рта. Ладно, сойду с метафор и вернусь в техническую реальность. Скрипты эти могут писаться индусами, которым категорически пофиг на своих пользователей. Яркий пример — lptracker.

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

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

Ладно, по метрике я всё сказал. О том, что грузится очень много зависимостей и вообще лишнего я уже выше упоминал. Разработка велась с инструментами, которые вообще не применимы к данному сайту. Например, bootstrap.

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

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

Не настроено кеширование данных.

Изображения слишком большие и не оптимизированные.

Не оптимизирован код, рендеринг и поток исполнения логики. Подробнее можно узнать на PageSpeed Insight

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