Улучшаем форму

Вчера вы предложили отличные варианты исправления текста в форме — спасибо за участие 😊 Разберемся по порядку.

Переделываем текст 💥 Татьяна предложила сократить текст внутри каждого поля так, чтобы его было полностью видно. Например: «Имя», «e-mail», «Телефон», «Вопрос».

💥 Алексей в Сетке предложил убрать повторяющиеся слова «ваш» из первых трех полей. И верно, ведь в заголовке уже написано «оставьте свои контакты». Максим Ильяхов подтверждает мысль в заметке «Вынести за скобки».

Это простое действие уже улучшит форму — смотрите первую фотку.

Переделываем форму

Василий предложил не ограничиваться текстом и переверстать форму: — Расположить ячейки в столбик так, чтобы слова были видны полностью — Увеличить размер последнего поля с вопросом, где, очевидно, подразумевается подробное описание ситуации, а не одно слово

Хорошее решение! Я докрутила эту мысль, обращаясь к советам и рекомендациям великолепного Ильи Бирмана — узнала о нем, когда училась на первой ступени школы редакторов, он преподавал дисциплину «Интерфейс и информация».

Улучшаем форму:

1️⃣Выносим текст из ячеек наружу. Текст, помещенный внутрь ячейки, называется «плейсхолдер». Когда пользователь начинает вводить свой текст, плейсхолдер исчезает. Человек остается с пустым прямоугольником и не видит, что надо ввести. Если же описание находится рядом с полем, пользователь всегда знает, что надо ввести, может вернуться и отредактировать текст.

2️⃣Располагаем поля в столбик, а описания пишем слева. Так пользователю легче пробежаться по списку и понять, что надо заполнить. Если места мало, то описание можно ставить над полем. Читать Бирмана по теме.

3️⃣Убираем всё лишнее. Например, действительно ли нужен и телефон, и e-mail? Чтобы связаться с клиентом, достаточно одного приоритетного канала связи. Поэтому я объединила телефон и e-mail в одно поле. Читать Бирмана по теме.

4️⃣****Наводим красоту. Расстояния, размеры, цвета, стили. Не уверена, что у меня получилось всё как надо, но результат — на втором фото. Читать Бирмана по теме.

Еще больше разборов всевозможных форм — в советах Ильи Бирмана на сайте бюро Горбунова. По ссылке вы попадете на список советов именно об интерфейсе веб-форм. Можно залипнуть надолго. Разборы студенческих работ можно посмотреть на ютуб-канале Ильи Бирмана, в плейлисте «Курс „Пользовательский интерфейс“».

Что думаете, удалось у нас улучшить форму? 😎 #работаем

В этом посте были ссылки, но мы их удалили по правилам Сетки