← Назад в «Блог»
868

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

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

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

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

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

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

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

Мы не говорим: «Три кинозалов» или «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 билета на фильм.
Спасибо, Михаил!

Полезно
2
1
Непонятно
0
Поделиться
Отправить
Линкануть
Вотсапнуть

Подпишись на крутой канал о фрилансе

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

← Назад в «Блог»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *