Рекомендации по улучшению юзабилити на silvercinema.ru

Моя цель — стать опытным UX/UI дизайнером. Создавать и улучшать интерфейсы так, чтобы людям было удобно пользоваться.

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

Много раз попадал в неприятные ситуации из-за плохого интерфейса. Отменял проверку в Додо например.

Чтобы прокачиваться, я хочу делать аудиты сайтов, которыми пользуюсь. Сегодня хочу показать проблемы юзабилити сайта https://silvercinema.ru, погнали.

— Исправлено 11 из 14 проблем

Неправильные окончания ✓

Мы не говорим: «Три кинозалов» или «421 удобных кресел»

Как улучшить
Правильные окончания для всех слов с числами.
25 залов, 3 зала, 523 кресла.

Написал для этого код на php.
https://gist.github.com/Postnov/06f3f87c10ae0e0b8f55740bcf56f646

Дублирование соц. сетей ✓

Может быть они ведут в разные места? Я не знаю.

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

Форма не обрабатывает ошибки ✓

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

Кнопку лучше сделать неактивной, пока все поля не будут заполнены. Статья про формы от Лебедева

Как исправить
1. Выделите обязательные поля
2. Добавьте placeholder в поля, чтобы было понятно, как правильно вводить.
3. Заблокируйте кнопку, пока не заполнены обязательные поля.
4. Если данные заполнены неверно, расположите сообщение об ошибке сразу после поля, и не забудьте написать, как правильно.

Некликабельный номер ✓

Как улучшить
Все номера телефонов должны быть кликабельными и выделены как ссылки. Пользователю уже привыкли к звонку при клике на телефон.

Нет названий фильмов — исправлена

Хочу заранее видеть их и не думать как узнать название.

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

Область клика ✓

Кто хочет целиться в ссылку? Слишком малая область клика. Прочитайте про закон Фиттса. Все привыкли кликать в изображение и попадать на страницу. Даже если кто-то захочет прицелиться в ссылку и не попадет — все равно перейдет на страницу

А про мобильное попадание в ссылку даже говорить не хочется.
Что если я вижу плохо? Или палец дрожит из-за болезни?

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

Пустота в подвале ✓

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

Что делать?
Взять решение из статьи и сделать «выталкивание подвала контентом»

Ссылка-обманщица ✓

Вижу синий цвет телефона, думаю что это ссылка, кликаю — ничего. Оказывает, это текст, который выделен синим цветом.

Как исправить?
Если текст синим цветом — это ссылка. Против этого не попрешь. Переделывать условности и привычки бесполезно. Сделать этот телефон ссылкой

Не работает крестик

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

Как исправить?
Убрать этот крестик совсем или добиться того, чтобы пользователь сразу понимал, зачем он там, и что делает.

Подарочные сертификаты для красоты

Захожу на страницу сертификатов, чтобы купить маме подарочный сертификат: «Вау, классные сертификаты». Как купить?

Так, сказано: «подарите, купите, наслаждайтесь» и правила использования. А купить-то как?

Как исправить?
1. Разместить кнопки «Купить» под каждым сертификатом или добавить одну кнопку «Выбрать сертификат» под группой сертификатов.
2. Написать в подзаголовке: «Сертификаты можно приобрести у кассира»

Непримечательная ссылка ✓

Кликнул просто из любопытства, пошел вызов. Откуда люди узнают что это ссылка?

Как исправить?
Если это ссылка — выделить синим и если есть желание, подчеркнуть.

Недоработки в мобильной версии

Отсутствие адаптива. Да, есть мобильное приложение. Но я не хочу его качать ради одного-двух сеансов.

Как узнать название фильма не кликнув на картинку? А если кликну, меня перекинет или покажется название? Боюсь.

Что за белая дыра под Егором?

Как улучшить?
1. Показать названия сразу крупным кеглем
2. Убрать косяк в блоке с Егором
3. Сделать картинку полностью кликабельной с переходом на страницу фильма

Ага, при клике все-таки показывает название. Может если кликну на видео и увижу его название? Ан нет, смотрю видео.

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

Дыры в подвале ✓

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

Как улучшить?
Разместить виджет инстаграмма (запрещенная в РФ организация) по левому краю. Кнопку обратной связи по правому краю.

При загрузке страницы ломается сетка изображений ✓

Когда интернет медленный, изображения загружаются долго. Высота блоков не проставлена, поэтому все блоки схлопываются и ждут появления изображения.

Как улучшить
Сделать фиксированной высоту блоков и вставлять туда картинки с position: absolute. Пока картинка загружается показать серый блок и его мигание — моментальная обратная связь о том, что страница загружается. Интерфейс говорит: «Пожалуйста, подожди, я стараюсь.»

Ссылка на решение: https://codepen.io/dan_postnov/full/WNvpZPQ

Ответ SilverCinema

Я отправил эту статью письмом в SilverCinema.
Мне ответил директор IT отдела Михаил Генералов.

Важно. Информацию приняли, запланировали исправить.

В благодарность Михаил подарил 2 билета на фильм.
Спасибо, Михаил!