178

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

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

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

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

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

Исправлено

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

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

Как надо

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

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

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

Исправлено

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

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

Как исправить?

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

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

Исправлено

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

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

Рекомендации по улучшению юзабилити на silvercinema.ru 3
«Даниил» — запрещенка

Как исправить?

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

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

Исправлено

Рекомендации по улучшению юзабилити на silvercinema.ru 4
Не кликабельный номер

Как надо

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

Нет названий фильмов

Исправлено

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

Рекомендации по улучшению юзабилити на silvercinema.ru 5
Набор картинок на главной странице

Как исправить?

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

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

Исправлено

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

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

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

Рекомендации по улучшению юзабилити на silvercinema.ru 7
Добро пожаловать на соревнование по стрельбе пальцем.

Как надо

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

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

Исправлено

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

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

Что делать?

Прочитать мою статью и сделать «выталкивание подвала контентом»

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

Исправлено

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

Рекомендации по улучшению юзабилити на silvercinema.ru 9
Не кликабельный номер телефона

Как исправить?

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

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

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

Рекомендации по улучшению юзабилити на silvercinema.ru 10
Крестик-бездельник

Как исправить?

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

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

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

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

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

Как исправить?

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

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

Исправлено

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

Рекомендации по улучшению юзабилити на silvercinema.ru 12
Внезапно кликабельный номер

Как исправить?

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

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

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

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

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

Рекомендации по улучшению юзабилити на silvercinema.ru 13
Егор не оплатил весь баннер, хватило только на половину

Как исправить?

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

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

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

Как исправить?

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

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

Исправлено

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

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

Как исправить?

Разместить виджет инстаграмма по левому краю. Кнопку обратной связи по правому краю.

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

Исправлено

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

Рекомендации по улучшению юзабилити на silvercinema.ru 17
Схлопываются блоки

Как нужно

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

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

Моментальная обратная связь

Ответ SilverCinema

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

Рекомендации по улучшению юзабилити на silvercinema.ru 18
Ответ Михаила Генералова

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

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

Поделиться
Отправить

Комментарии