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

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

1. Закрытие всплывающего окна (popUp)

1.1. Крест

Часто мы используем всплывающие окна, чтобы задержать пользователя или привлечь  его внимание. Важно отметить, что даже если ваше всплывающее окно содержит кнопку “закрыть”, “мне не интересно” или подобную, закрывающую это окно, нужно иметь в правом верхнем углу крестик “x”, по нажатию которого, окно также закроется.

Закрытие всплывающего окна

Почему это важно?

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

Если вы не хотите, чтоб человек испытывал неудобства по поводу отсутствия кнопки закрыть, то лучше всегда продублировать ее в правом верхнем углу в виде крестика – “x”. Это просто, но придаст большей лояльности к вашему сайту.

1.2. Закрытие вне окна или подсказки

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

2. Персонализированные checkbox и radio button

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

Есть множество вариантов персонализации checkbox и radio button, как с помощью CSS, так и JavaScript и другие. Не обязательно делать что-то очень сложное, добавлять анимацию или превращать вашу форму в какой-то творческий сложный шедевр.

Простые четкие формы добавят скучному и уже всем надоевшему checkbox вот такой вид:

Персонализированные checkbox

А radio button такой:

Персонализированные radio

Здесь оставлю ссылку на ресурс, из которого мы взяли код для этих элементов: Стилизация чекбоксов и радиокнопок на чистом CSS
Так, даже используя только CSS можно, сделать все ваши инпуты приятными и более профессиональными.

3. Сообщение об ошибках в формах

Раньше для указания ошибок при заполнении форм, в коде HTML добавляли атрибут required в элемент input. Это и сейчас работает, но уже не смотрится по-современному.

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

Сообщение об ошибках в формах

Цвет как правило выбирают яркий, красный, бросающийся в галаза и для более четкого представления меняют фон или обводку ошибочного инпута.

4. Сообщение об успешно отправленной форме

Еще один вид сообщений для пользователя – сообщение об успешно заполненной/отправленной форме. Иногда разработчики забывают об этом и поэтому после отправки, например, контактной формы пользователь не понимает, все прошло хорошо или наоборот страница перезагрузилась и сообщение отправить не удалось.

Это может быть Popup, которые появляется по центру экрана, изменение кнопки “Отправить” на сообщение “Ваше сообщение было успешно отправлено”, сообщение ввехру/внизу формы и другие варианты оповещений.

Сообщение об успешной отправленной форме

Главное, чтоб человек заметил ваше уведомление об отправке, а через 5 секунд, например, его можно автоматически скрывать. Важно сделать это сообщение контрастым цветом, желательно в тепалых тонах: зеленый, синий.

Сообщение об отправленной форме внизу

5. Cursor pointer

И снова вспомним ссылки. Не всегда ссылки на сайте очевидны.
Чтоб понять, что элемент на сайте является ссылкой или по клику на него произойдет какое-либо действие важно, чтоб при наведении мышки на этот элемент, курсор менялся на “указатель-рука”.

Cursor pointer кнопка

Для этого просто необходимо прописать для элемента свойство CSS: cursor: pointer.

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

Эти лайфхаки помогут вам улучшить пользовательский опыт на вашем сайте и сделают его более профессиональным.

Автор

Оставляйте комментарии на @_pro_web