Главное Авторские колонки Вакансии Образование
Выбор редакции:
259 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Веб-дизайнеру

Про одинаковые ошибки в дизайне форм.
Мнение автора может не совпадать с мнением редакции

Каждый дизайнер — индивидуальность, а ошибки у всех одинаковые.

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

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

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

b_59ea252218e14.jpg

— Если элементов списка меньше 5, то смело лепи их всех в форму, а если их больше, то прячь в скролл.

b_59ea25435cf50.jpg

— Даже у дизайна форм есть свой ритм, который можно нарушить необоснованно прервав вертикальный список.

b_59ea256159a87.jpg

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

b_59ea258399c08.jpg

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

b_59ea25a79a000.jpg

— Никакого капса, каким бы важным не было заполняемое поле. Так слова сложнее читаются, хоть и привлекают больше внимания.

b_59ea25c742b0c.jpg

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

b_59ea25fbda2fb.jpg

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

b_59ea2634e67a9.jpg

— Пользователь может не знать, что означает *. Вместо этого лучше четко обозначить необязательные для заполнения поля. Зачем лишний раз кому-то компостировать мозги ребусами?

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

Подготовлено telegram-каналом о дизайне «Дизайнер»

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
DenyGo 80052
очень хороший блог
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.