Не лениться делать скриптовую валидацию полей

В HTML упрощённый вариант поля ввода выглядит примерно так:

<input type=”text” maxlength=”5” name=”field” oninput=”…”>

Допустим, это поле должно принимать только цифры (без пробелов и других символов).
Пометка для искушенных: опустим пока тот факт, что в этом случае можно использовать type=number

Проблемы начинаются, когда юзер копипастой(!) пытается вставить валидное значение (на первый взгляд).

Например, вставляет “123 45” (с пробелом). Во вставке шесть символов, поле принимает только 5 (maxlength). Результат вставки будет: “1234”, вместо “12345”.

«На ровном месте» мы получили неочевидную юзабилити-проблему (и даже баг).

Придётся колдовать со скриптами. Правда, современные разрабы давно не заморачиваются с maxlength (да и с валидацией не особо), всё на скриптах. Потому и страница, которая должна весить 10кб, весит 3Мб, что уже другая юзабилити-проблема ))

#мнение | ЗоЮ

Разбор кейса 62 👆
Резюмирую то, что уже написали в комментах ❤️
и от себя ещё немного )

1️⃣ Название блока: «Готовые модульные дома». А в карточках: «Проект дома …». Так готовые или проект? что юзер получает?
Уже давно «проектом» называют всё что угодно, но именно в строительстве проект — это чертежи (бумажки), как мне кажется.
Это сайт строительной фирмы, т.е. они продают (строят) именно готовые дома по выбранным проектам (чертежам). Часть клиентов всё понимает и для них готовые и проекты это одно и то же, а остальные?!
Ещё, рядом с заголовком блока не хватает ссылки типа «Все наши проекты».

2️⃣ Зачем повторять «Проект дома…» в названиях карточек? Лишний и бесполезный для юзеров текст.

3️⃣ В заголовке карточки, где указаны размеры «24,5х19» я бы добавил полупробелы к «Х» и написал бы там не Х, а именно умножить × он аккуратнее, меньше и в строке центрируется по горизонтали, читать гораздо легче. И добавить «м» (метры) или убрать эти цифры из заголовков и перенести в описание.

4️⃣ Самая важная инфа про дом показана мелким шрифтом. Площадь, комнаты, сроки — это может даже важнее цены.
Почему-то иконки для характеристик сделаны в разном стиле (из разных наборов и разного цвета).
Названия полей характеристик в разном стиле: «сроки» — бледным, «площадь» — чёрным.
Зачем-то разнесены по карточке, хотя это всё одинаково важно.

5️⃣ Цена показана в блоке похожем на кнопку. Ну выделите стилями.
Цифры цены лучше разделить полупробелами. «От» написать с маленькой буквы и отделить от цифры пробелом (сделать больше отступ), сейчас слиплось, читать неудобно.

6️⃣ Если цена «от», то зачем писать такую длинную и «точную» цену? «от 12 620 400» — вот эти 400 рублей имеют значение, когда речь идёт о миллионах? Можно написать «от 12 млн» или «от 12 600 000».
С другой стороны, «точной» суммой сайт даёт понять, что у них всё «как в аптеке», типа «не обманываем».
Исследований полно, как ЦА воспринимает разные написания цены для разных услуг. Покопал и резюмировал здесь 👈

7️⃣ В кнопке «Подробнее» убрать «…». Выглядит, как-будто текст не поместился, а юзер и без «…» понимает, что сюда можно нажать. Если мы из названия убираем слова «Проект дома», то на кнопке можно написать: «О проекте».
В принципе, можно не оформлять кнопкой, это же не СТА-кнопка, это просто ссылка на страницу о проекте. Просто выделить ссылку «О проекте» контрастным стилем — карточка получится «легче». Тем более юзеры и так понимают, что с подобных карточек можно перейти на «подробности» просто кликнув на картинку (или заголовок).

8️⃣ Как вариант, карточки можно сделать каруселькой с зумом — центральная карточка большая + больше инфы, боковые карточки поменьше и меньше инфы. Но это на любителя.

ЗоЮ

«Реальные фотографии»

В одном из чатов возник такой вопрос:

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

Например, такое может понадобиться на сайтах недвижимости или продаже каких-то физических вещей, чтобы дополнительно указать, что на фотках продаваемый товар, а не что-то «красиво похожее».

Я бы предложил вместо «реальные» использовать «настоящие». Так кажется «теплее» и проще.

Кроме того, само слово «фото» уже предполагает, что на картинке реальный объект (где-то же это снято). А всякие «изображения», «картинки» и т.п. — отдают некой искусственностью, рисунком, макетом.

Все фото — настоящие
Фото настоящие

#мнение #UXtext | ЗоЮ

Найдите кнопку меню для карточки

(вдогонку вам ещё маленький кейсик, а то предыдущий какой-то простой)

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

Чтобы не выводить на карточку сразу все кнопки, их прячут за какой-то одной.

Вот и на этом скрине также.

Найдёте сходу такую кнопку? 😏

Разбор кейса 64 👆

Всем — большое спасибо за коменты, всё по делу! 🤝
Немного резюмирую:

1️⃣ Хедер: Текст под лого (слоган) — не совсем по делу. Они же не занимаются автоматизацией выпуска автомобилей?! Ну так и напишите конкретнее: «Автоматизация упаковки продукции»

2️⃣ Хедер: идёт иконка — дивайдер (вертикальная разделительная полоса) — инфа, относящаяся в иконке. Сейчас получилось, что иконка телефона визуально относится ко времени работы, а геометка к телефонам. Делаем так: девайдер — иконка — инфа.
Ещё можно часть инфы с контактами перенести в футер (email, адрес, время работы).

3️⃣ Хедер: Время работы непонятно по какому поясу. Фирма находится в районе Екатеринбурга. Если время работы важно, то лучше дописать например так: «У нас сейчас 7:32» и/или «Офис откроется через 28 минут»

4️⃣ Хедер: Кнопку «Заказать звонок» не видно, надо делать заметнее, на этом сайте это одна из важнейших кнопок СТА. Лучше написать: «Позвоните мне» («перезвоните» — длинновато, но тоже пойдёт). Или «Есть вопросы, перезвоните мне»

5️⃣ Хедер: С адреса сделать ссылку на карту, чтобы сразу было понятно где это вообще.

6️⃣ Меню: Поиск не видно. Меню не «по порядку». Исправить можно разными способами, зависит от ЦА и что они ищут на сайте. Предположу, что поиском пользуются редко, потому что сложные названия оборудования, у всех по-разному называются, непонятно что искать. Допустим, поиск нужен, потому переносим кнопку «лупа» влево (под лого), по клику — разворачиваем поле. Рядом с лупой — «Каталог».
Остальные пункты меню можно выровнять по правому краю. «О компании | Вакансии | Контакты». Здесь именно «Вакансии», так юзерам гораздо понятнее, «Карьера» — слишком абстрактно.
«Контакты» крайний пункт в списке, так гораздо заметнее.

7️⃣ Хиро (главный экран): «Белый» текст — много лишних слов, очень длинный и непонятный. Предлагаю так: «Оборудование для автоматической упаковки в гофрокороб»

8️⃣ Хиро (главный экран): Кнопка «Связаться с нами» — такая себе, юзер ещё не знает что они могут. Я бы предложил поставить ссылки/кнопки на рубрики каталога: «Формовка» / «Заклейка» / «Укладка». Вместе с новым (п.7) текстом — будет органично.

9️⃣ У меня (у юзера) остались важные вопросы, которые не раскрыты не только на первом экране, но и вообще на всей Главной. Например такие:
- Можно ли менять размер коробок?
- Как обслуживать, сколько стоит?
- Доставка, установка, гарантии — цена, города, сроки.
- Истории установок с расчётами.



ЗоЮ

#кейс 66 / Блоки в шапке сливаются

Смотрим на блок Меню / Каталог / Поиск…

Оформлено так, что элементы выглядят как кнопки. Всё сливается, Поиск и Каталог не видно.

Например, можно было бы Каталог визуально объединить с Поиском и как-то отделить стилем Меню от Поиска.

Просто Меню (без видимых ссылок) выглядит непривычно для десктопа. Лишние клики, юзер не знает, что за кнопкой.

Тут ещё очень много можно насыпать и по текстам и по остальному ))

ЗоЮ