Первая игра в боулинг

Ух, первый раз поиграл в боулинг. Болят пальцы и левая ягодица 🙂
Слишком много страйков заколотил.

Сначала пришли играть в бильярд, но потом Лиза уговорила меня на боулинг. Я поломался пару минут и согласился. Было немного неловко из-за того, что не знал как бросать и двигаться.

Рассказываю как проходили с женой GTA и другие игры

Благо из GTA помню как там что 🙂 Разобрался.
Потом вошел во вкус и начал выбивать страйк. Круто, когда остается одна кегля и ты прикидываешь траекторию, чтобы ее выбить.

А когда выбиваешь — ууух, ощущения удивительные. Через 15 минут захотел сколотить клуб анонимных боулингистов.

Дорожки
Дорожки боулинга
Ботинки для боулинга
Ботинки для боулинга
Пицца
Пицца в подарок при игре в будний день
Счет с кеглями
Вот так показывается счет и кегли, которые остались после броска

Я решил запечатлеть этот момент и … ну вы поняли.

Фейл

Нормальный бросок тоже хочется запечатлеть! 🙂

Исправляюсь

Рекомендации по улучшению юзабилити на 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 билета на фильм.
Спасибо, Михаил!

WinSCP. Unable to save. Решение

Проблема: при попытке сохранить файл в кастомном редакторе в WinSCP выскакивала ошибка

Я долго не мог найти ответ на вопрос, как решить эту проблему.

WinSCP. Unable to save. Решение 19
Ошибка при сохранении файла

Ответ я нашел здесь

WinSCP. Unable to save. Решение 20
Настройка для временного хранения файлов

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

И вуаля! Заработало. Не забудьте только активировать «Очищать устаревшие временные папки при запуске», чтобы ваш ПК не утонул во временных файлах.

«Человечное» смс от кинотеатра

Сегодня покупал билеты в кинотеатре и столкнулся с плохим интерфейсом. Мелкая деталь — смс-сообщение с информированием о заказе.

После покупки билетов кинотеатр высылает смс с временем, датой и уникальным кодом заказа.

Вот какая смс пришла мне:

"Человечное" смс от кинотеатра 21
Смс от кинотеатра

Первая мысль: «Как я должен это прочитать?»

Все, что можно сделать плохо — сделали плохо:

  • нет заголовка
  • каждое слово через дефис
  • все набрано транслитом
  • Слово info откуда-то взялось
  • не выделена важная информация: дата и время
  • я не понимаю куда ведет ссылка на времени
  • ссылкой выделен месяц и время
  • ссылка на онлайн билет как на главную страницу сайта
  • я не понимаю как мне получить билет и зайти в зал

Нашел консультанта и спросил, что он думает про эту смс.

"Человечное" смс от кинотеатра 22

Тут дело не только в латинице. Можно было написать куда лучше и латиницей. Я думаю вы поняли отношение «Миража» к клиентам.

Решение

"Человечное" смс от кинотеатра 23

Что здесь хорошо:

  • Написана на русском языке
  • Есть заголовок, который рассказывает суть сообщения
  • Информация поделена на группы: заголовок, информация, важная информация, ссылка
  • Начало сеанса отделено от другой информации
  • Подсказываем клиенту как получить билет

Сложно? Нет, стоит лишь включить голову.

До и после.

"Человечное" смс от кинотеатра 24
до
"Человечное" смс от кинотеатра 25
после

Некоторые пользователи в соц. сетях написали мне, что виновато техническое ограничение символов.

Узнал, что латиницей в одной смс влезает 160 символов, кириллией — 70 символов. Пробуем:

Кириллица

"Человечное" смс от кинотеатра 26
Кириллицей

Латиница

"Человечное" смс от кинотеатра 27
Латиницей

Итог

"Человечное" смс от кинотеатра 28
Все 4 варианта

Предложения по сайту #деньземли

1) Смысл фона понятен, но не вяжется с текущим дизайном. Может быть стоит убрать сильную внешнюю тень или обводку http://joxi.ru/D2PoV8YUkjWJ0m

2) Расстояния одинаковые, не понятна группировка элементов, от этого неясно, что главное, а что второстепенное, кто с кем сосуществует. http://joxi.ru/KAgL7WoTXnONDr

3) Заголовок важнее, чем дата, поэтому нужно дату сделать меньше http://joxi.ru/eAOo0DYUpwGv7A

4) Эти элементы жутко раздражают как пользователя. Неужели сложно было сделать их горизонтальными, чтобы не не нужно было мотать головой? Дизайн не должен противоречить удобству использования сайта http://joxi.ru/5md6NQYCe4Jq5A

5) Выравнивания, я сразу заметил, что по верху и слева что-то не так. В редакторе можно легко поправить. Потом тексты, если их нет, не нужно лепить конструкции, которые потом будут заполняться не пойми чем. Сначала нужно понять, какой будет контент и только потом делать дизайн. что будет справа, а слева? Нужно ли центральное выравнивание справа, когда оно там совсем не смотрится. Не знаю, потому что нет контента http://joxi.ru/Q2KoD0YUwbggE2

6) Вертикальные элементы отлично будут смотреться на местах красных прямоугольников http://joxi.ru/5md6NQYCe4J15A

7) Дизайнеру нужно почитать о теории близости. Между буквами расстояние больше, чем от последней буквы до синего окна. Ниже между строками расстояние меньше, чем между буквами. http://joxi.ru/4AkR0GoCXNV1Q2

8) Надпись горизонтально. В списке расстояние между строками такое же, как и между элементами списка. http://joxi.ru/LmGoqjeUJ4ZDZm

9) Выравнивание справа «рваное», кнопку лучше переместить влево. http://joxi.ru/MAja7poIxRY8D2

10) Это весь контент для подвала? Нужно узнать точно для создания дальнейшей композиции. http://joxi.ru/VrwJWM8C8Vg5PA

11) (1)Считаю это не лучшим вариантом для «часа земли». (2) что важно в этом блоке? Нужно что-то одно. И еще цвет фона справа можно сделать темнее чем слева, но не таким темным. http://joxi.ru/L21OpRzCgGDLWr

12) 2020 не является важнее вышестоящих слов. Нужно перекомпоновать часть слева. http://joxi.ru/Q2KoD0YUwbg342

13) Справа текст нужно попробовать сделать лучше и яснее. Сейчас полотно, которое не хочется читать. http://joxi.ru/D2PoV8YUkjWvpm

14) Я не думаю, что это стоит разделять. Лучше, когда единый текст как законченная мысль. http://joxi.ru/krDo1xlUJMd5JA