10 советов по дизайну интерфейса

Привет, Хабр! Представляю вашему вниманию перевод статьи "10 Tips to Designing Perfect Forms".


Формы играют роль портала между пользователем и системой и часто являются основой страницы. Авторизация, регистрация, обновление статуса, ввод платежных данных или адреса доставки – управляются формами. Для онлайн-магазинов грамотно созданные формы играют значительную роль. По собственному опыту, хороший дизайн удваивает онлайн-продажи.

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

1. Начинайте с ввода данных


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

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

Заголовки должны быть сверху


Тенденции рождаются и умирают. Сейчас модно размещатьplaceholder как заголовок. Его использование хоть и не ошибочно, но поднимает некоторые UX (прим.: «user experience») проблемы. Дело в том, что когда поле заполнено, пользователь не видит заголовка.

Заголовки необходимо видеть всегда. Поэтому они размещаются сверху.

Почему сверху, а не слева от поля ввода данных?

Когда заголовок слева от текстового поля, на экране телефона элементы будут съезжать относительно друг друга. Сначала думайте о том, как все будет выглядеть на экране телефона.
Помогите пользователю, указав пример в placeholder.

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


2. Сообщение об ошибке и предупреждения


Для стандартного текстового поля нужны сообщения об ошибках.

Вот 3 совета по их оформлению:

Ошибка возникает как из-за клиента, так и из-за сервера


С клиентской стороны обнаруживаются проблемы, когда обязательное поле не заполнено, либо email введен неверно:

  • Сервер проверяет, существует ли данный email;
  • Пользователь получает уведомление о клиентской ошибке до отправки формы. Ошибки необходимы для предотвращения отправки неверной информации пользователем.

Уточняйте сообщения об ошибке


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

Каждый раз как вы оформляете текстовое поле, проверяйте, как будет выглядеть ошибка до и после нажатия кнопки «отправить».

Используйте предупреждения


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

Укажите, насколько надежен пароль, зарегистрирован ли email на сайте, или не занят ли логин.


3. Используйте сочетающиеся формы


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

Если все поля – текстовые, пользователю придется постоянно раскрывать клавиатуру.
Для разнообразия предложите пользователю переключаться с текстового поля на dropdown (прим.: «раскрывающиеся списки») или на radiobuttonи обратно.

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



4. Radio Buttons, Dropdowns и Checkboxes


Иногда возникает путаница при выборе radiobutton, dropdown и checkbox.

Radiobutton прекрасно подходит для предоставления небольшого числа возможных ответов. Выберите возможный ответ заранее или пропустите это поле.

Radiobutton – лучшее решение в случае, когда можно выбрать только один вариант.

Когда нужно больше элементов, более подходящим вариантом будет dropdown (в практике – больше 5-6 ответов). Также можно выбрать элемент по умолчанию или задать placeholder «Выберите элемент».

Checkbox – лучший выбор, когда нужно заполнить только одно поле (например, условия и положения), или предоставляется больше одного варианта ответа. Если вы хотите выбрать, какие рекламные рассылки отправить пользователю, checkbox позволит сделать больше одного выбора.

Использование checkbox вместо radiobutton не должно ограничивать вас в решениях по оформлению пользовательского интерфейса.

Как у дизайнера, у вас достаточно свободы в выборе того, как UI (прим.: «user interface») элементы будут отображаться на экране. Даже если вы хотите как-то изменить checkbox, чтобы они были более интересными, это не должно влиять на восприятие пользователя.
Вместо того, чтобы писать текст напротив маленьких кружков, можно создать картинки или иконки для выбора.



5. По возможности исключайте поля необязательного ввода


Если цель бизнеса – продать товар, то ваша цель как дизайнера – устранить как можно больше неудобств между пользователем и системой.

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

Если отдел продаж хочет узнать предпочтения клиентов, можно сделать это при подтверждении email.

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

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

Затем вы можете предложить больше условий: количество сумок и т.д.


6. Используйте автозаполнение для больших форм


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

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



7. Используйте условную логику


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

  • Если известна страна пользователя, дизайн может содержать дополнительные поля («штат» если вы в США, «графство» — в Ирландии и т.д.)
  • Используйте почтовый индекс, чтобы ввести название города, штат или провинции
  • Если вы вычисляете страну пользователя по IP адресу, можно ли вставить код страны в поле для ввода телефона?

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

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

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



8. Используйте Placeholder правильно


Ранее мы обсуждали, что placeholder используется не всегда, так как исчезает при вводе информации. Но мы не рассматривали другие способы его использования, которые могут помочь пользователю.

Placeholder – прекрасная возможность показать пользователю, как вводить информацию. Хорошим примером является ввод телефона. Нужно ли пользователю вводить код страны? Или код города?

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


9. Сообщайте о следующих шагах


Если после заполнения последует еще одна форма для ввода, сообщите об этом пользователю.
Вместо «Далее» или «Оплатить» можно написать «Проверить заказ» или «Оплата PayPal».

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

Я раздражаюсь каждый раз при покупке на Amazon, потому что я не получаю всей информации, включая стоимость доставки, вплоть до последнего шага. Будьте честны со своим пользователем. Заслужите доверие, предоставляя необходимую информацию на каждом шаге заполнения, четко объясняйте, чего ожидать при дальнейшем использовании.


10. Продолжайте искать способы оптимизации


Однажды запустив яркую новую форму, продолжайте анализировать её. Если вы обнаружили, что многие пользователи покидают сайт, выясните причину. Проведите опрос, чтобы выяснить, почему пользователи испытывают дискомфорт, затем поработайте над устранением этого неудобства. Для дизайнера работа никогда не «закончена полностью».


Заключение


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

Подробнее
Реклама

Комментарии 52

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


    Но при этом обязательно дайте пользователю возможность поставить галочку «в гробу я видел ваши идиотские требования к паролям» и ввести такой пароль, какой он хочет. На свой страх и риск.
      +2
      Мне нравится, когда на сайте есть индикатор сложности пароля и нет критериев к паролю.

      Но в компаниях бывают правила безопасности, что не всегда можно обойти. Всякие начальники бывают ;)
        –1
        А потом ресурс оказывается задушен непрерывно летящим спамом от взломанных аккаунтов, которые «в гробу видели идиотские требования» и выставили пароль 111. Пользователь один раз пришёл и ушёл, а владельцам разгребать.
          +1
          Или пользователь потыкался с достаточно сложными паролями, но после третьей попытки угодить сумрачному гению плюнул на этот сайт и ушёл к конкурентам. Клиент потерян, зато сайт не задушен. И владельцам хорошо — разгребать нечего. Ни спама, ни выручки.
          Нужно иметь разумное чувство меры.
            0
            Тыкаться и гадать приходится не тогда, когда есть ограничения, а когда форма не считает нужным эти ограничения перечислить явным образом. Несомненно, это само по себе расстрельная статья, но она не имеет никакого отношения к собственно наличию или отсутствию ограничений.
            0
            «Пароль должен содержать, как минимум одну букву в верхнем регистре»
            ОК! Password
            «Пароль должен содержать, как минимум 2 цифры»
            Без проблем! Password77
              0
              Как тут не вспомнить
              — Извините, ваш пароль используется уже более 30 дней, необходимо выбрать новый!

              — Розы.

              — Извините, в вашем новом пароле слишком мало символов!

              — Розовые розы.

              — Извините, пароль должен содержать хотя бы одну цифру!

              — 1 розовая роза.

              — Извините, не допускается использование пробелов в пароле!

              — 1розоваяроза.

              — Извините, необходимо использовать, как минимум, 10 различных символов в пароле!

              — 1гребанаярозоваяроза.

              — Извините, необходимо использовать, как минимум, одну заглавную букву в пароле!

              — 1ГРЕБАНАЯрозоваяроза.

              — Извините, не допускается использовать несколько заглавных букв, следующих подряд!

              — 1ГребанаяРозоваяРоза.

              — Извините, пароль должен состоять более чем из 20 символов!

              — 1ГребанаяРозоваяРозаБудетТорчатьИзТвоейЗ@дницыЕслиТыНе ДашьМнеДоступПрямоБл%дьСейчас!

              — Извините, но этот пароль уже занят!

              Именно так я задавал пароль в скайпе.
                –1
                Извините, но этот пароль уже занят!

                Надеюсь без этого пункта? А то… я уже начинаю видеть… короче, проблемы.
                0
                Пароль не должен содержать слова из словаря
                  0
                  Содержать как раз может. Состоять из словарного слова не должен.
                  0
                  Я уже отметил, что наличие ограничений и внятное описание этих ограничений — разные вещи. Формы, описанные Вами, должны гореть в аду, но не потому, что там есть ограничения на пароль, а потому, что они не озвучены заранее. Кстати, то же относится и к ограничениям на логин.
                    0
                    Плюсую,
                    Да на мобилке читать сообщение о правилах генерации пароля может и не всегда удобно, но даже в виде мелкого текста это очень сильно способствует сохранению нейронов.
                      0
                      Я просто хотел сказать, что такие требования к паролю — это прошлый век, они малоэффективны.
                    +3

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

                      0
                      А это потому, что не надо требовать регистрацию пользователя там, где она не нужна.
                      Абсолютно и безоговорочно согласен. Но Вы же не будете утверждать, что регистрация не нужна вообще нигде? А среди сайтов, где регистрация нужна, имеется подмножество, в котором взлом аккаунта несёт серьёзные последствия. В этом подмножестве имеется подмножество, где двухфакторная аутентификация является нежелательной по тем или иным причинам. И вот в рамках этого итогового подмножества наличие ограничений на стойкость пароля является объективной необходимостью.

                      Вообще, интересно наблюдать, как фраза «существуют ситуации, когда пароль должен быть не слишком простым» вдруг трактуется людьми как «все сайты обязаны быть с регистрацией, и со сложным паролем, и с неудобной формой, заставляющей пользователя угадывать критерии сложности», и они начинают спорить с этим постулатом вместо того, что реально было написано в сообщении.
                        0
                        У меня есть мусорный адрес типа asdfghjkl@mai.ru
                        Из последнего что туда прилетало это извешение об проиграном деле об алиментах, из казахстана, и извещение что кто-то попал где-то на ~10 млн.рублей из россии.
                  0
                  Мне вот интересно когда веб-разработчики начнут наконец читать книги по GUI — в них накоплены знания за несколько десятилетий по построению интерфейсов.
                  А то перешли в другую и среду и давай все заново изобретать. Смотрю я за тем что в вебе творится и офигеваю — где 25 лет развития интерфейсов. Поколения сменились и все?
                  Просто надо приспособить все для других разрешений и способов ввода.
                    0

                    Посоветуйте, пожалуйста, хорошую книгу по GUI

                      0
                      Попробуйте книги Алана Купера. Это классик из Apple.
                      Есть ещё тот кто создал кнопку пуск в Windows, но книгу которую я от него читал никак найти не могу имя забыл к сожалению.
                        0
                        И вот интересная статья на хабре habr.com/post/348728
                          0
                          Спасибо!
                          0
                          сорри за некропостинг, но вот очень крутая вещь
                          refactoringui.com
                          0
                          Причём тут разработчики? Дизайнеры/маркетологи/продукт-оунеры/те_кто_ставят_задачи пусть лучше почитают.
                          0
                          п. 3. Выпадающий список стран без возможности клавиатурного ввода — ад.
                          п. 10. Поле для телефона со скобками и дефисами — ад горит в аду.
                            0
                            П.3 Вы правы, нужно всегда давать возможность написать все самому, но я не указала это на скетче, так как было бы слишком много деталей.
                            П.10 скобки и дефисы ставятся автоматически, чтобы пользователь не запутался в цифрах, многие запоминают номер телефона комбинациями.
                            Спасибо за замечания, все это действительно нужно учитывать ;)
                              0
                              Эти поля с телефоном нигде не работают правильно. Может сработать, если ввести все цифры с начала до конца. Может не сработать, если "+7" отображается не сразу, а при начале ввода, позавчера так вместо "+7(914)" получил +7(791)". А если я ошибся и хочу исправить цифру где-то в середине (я могу использовать для этого Backspace, Delete или просто выделить нужную цифру мышью). А если я хочу вставить телефон из буфера. А если я криво скопипастил, и первая цифра не вставилась, надо дописать её руками. А если я кликнул не туда и теперь пытаюсь переставить курсор стрелками вправо-влево. Обычно форматированное поле и в половине этих сценариев не ведёт себя адекватно.
                                0
                                вместо "+7(914)" получил +7(791)"
                                Это, кстати, мобильный сбербанк, вот опять эта ерунда. Вводишь "+", получаешь "+7".
                              0
                              Я ещё больший ад иногда встречаю: дату рождения выбирать выпадающим списком.
                                0
                                Я бы предпочел набирать дату на клавиатуре, всем этим спискам и датапикерам.
                                  0
                                  А мне больше по душе вариант с датапикером + инпутом. Гибридные варианты очень хорошие.

                                  Набил на клавиатуре, если ты постоянно вводишь дату или указал в календаре, если тебе на ходу диктуют.
                                    0
                                    Тут тоже дебилы встречаются. Было раз: вот тебе поле для даты, а в каком формате вводить — непонятно. Как ни введешь, всё неправильно.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      А стоит ли вообще дефолтным годом рождения выбирать 2018? Почему хотя бы не 2000?
                                  0
                                  Почему сверху, а не слева от поля ввода данных?

                                  А почему все решили что этот стиль правильный?
                                  Вот лично мне удобнее когда называние слева.
                                  Я не китаец, который привык сканировать сверху вниз взглядом…
                                  Мне лично как то удобнее, слева направо.


                                  Но почему то "все" решили, что "пользователям так удобнее..." Проводился опрос?

                                    0
                                    Им так проще. Не надо думать, как это поместится на экране телефона.
                                    0
                                    Когда заголовок слева от текстового поля, на экране телефона элементы будут съезжать относительно друг друга.
                                    Может, конечно, глупость скажу, но как же выравнивание?
                                      0
                                      Выпадающие списки — это, конечно, круто. Но до тех пор, пока в этом списке не больше 10 значений. Кто бы только знал, как меня бесят эти списки со всеми странами мира, где нельзя просто взять и отфильтровать, а приходится среди этого всего искать нужную мне Russia, в уме перебирая английский/русский алфавит. Мне нравятся гибриды текстового поля и выпадающего списка, где можно и выбрать, и ввести
                                        0
                                        Действительно, это не всегда удобно. Но далее в статье указано, что было бы не плохо определять страну по IP. Про гибрид текстового поля и выпадающие списки хорошее замечание, для пользователя всегда удобнее иметь возможность все написать самому. В статье это упоминалось ;)
                                          0
                                          У Ryanair при регистрации на рейс нужно указать гражданство. Так список (выпадающий!) состоит из двух независимых списков. Т.е. сначала идет типа «Андорра, Бельгия, Великобритания, Гватемала, Испания, Марокко» и т.д., а после этого «армянское, болгарское, датское, китайское, португальское» и т.д. По какой системе образованы эти две группы — непонятно.
                                          +1
                                          Сейчас модно размещатьplaceholder как заголовок.
                                          Вы хотели сказать обратное: «модно размещать заголовок как placeholder»?

                                          Горите в аду за placeholder звёздочками на месте пароля!

                                          ФИО — это совковый канцеляризм. Если вам нужна реально актуальная БД — разделяйте по полям. Если просто обратиться к человеку — так и назовите поле: «Как к вам обращаться».

                                          Формат номера +7 (город) номер — ещё одно бездумное следование «традиции».
                                            0
                                            Формат номера +7 (город) номер — ещё одно бездумное следование «традиции».

                                            Вообще есть стандарт E.164 (точнее рекомендация, но всё же), согласно которому номер рекомендуется вводить в формате ${страна} ${оператор} ${абонент}, и для России страна всегда +7, оператор — это код города или префикс оператора, а остальное уже идёт как номер абонента.
                                            Библиотека LibPhoneNumber от Гугла, при отображении номера в национальном формате, код оператора отбивает просто пробелами и разбивает номер абонента на три части через -.

                                              0
                                              Зачем вы мне это пишите?
                                              0
                                              Особенно круто, когда +7 невозможно изменить.
                                              0
                                              Правило 1 написания статей::
                                              если вводите сокращение с объяснением (например, «UI»), то вводите его как можно ближе к началу текста и используйте потом хотя бы пару раз.


                                              Ну в самом деле! Статья целиком про пользовательский интерфейс, но сокращение UI вводится только в середине (правило 4) и после этого НИ РАЗУ не используется.
                                                0
                                                Да, я как-то беседовал по скайпу с заказчиком, а жена в это время по телефону с бабушкой.
                                                Бабушка спросила, почему я матерюсь в разговоре с клиентами?
                                                Оказалось она слово GUI (ГУЙ) упорно слышала как Х%Й (простите мой французкий).
                                                  0
                                                  Это перевод. А по правилам достаточно расшифровать сокращение только первый раз.

                                                  Где можно прочитать правила? 1 правило, 4 правило.
                                                    0
                                                    Если бы вы внимательно прочитали мой комментарий, то поняли бы, что речь совсем не о том, сколько раз расшифровывать сокращение. Один раз достаточно, да. Я с этим и не спорю.
                                                    Даже перевод нужно делать с умом. И зачастую еще тщательнее, чем писать собственный текст. К тому же, в оригинальном тексте UI не расшифровывается, поскольку понятно, что это.
                                                    Правило 4 можете почитать в собственном переводе.
                                                    Правило 1 — очевидно, что я придумал это сам (что это Правило 1, а не то, что если дается аббревиатура, то нужно ее использовать, иначе какой в ней смысл?)
                                                  0
                                                  По соображениям безопасности, некоторые разработчики не указывают на ошибку в email или пароле при авторизации, и это абсолютно нормально.

                                                  Всегда удивляла эта глупость, когда можно в окне регистрации указать email/логин и увидеть, что он занят…
                                                    0
                                                    Веб который мы заслужили благодаря поисковым системам
                                                    и вроде бы все по делу, и вроде бы почти все верно, но абсолютно бесполезно и с диким привкусом SEO оптимизации.
                                                      0
                                                      Почему вы используете в примерах на макетах habr.com? на нем совершенно другие формы.
                                                        0
                                                        Чтобы пройти модерацию по пункту «реклама», мб?
                                                        0
                                                        Насчет второго пункта, иногда, в целях безопасности не стоит выдавать полную ошибку, например «Логин или пароль неверный», а не «Пароль не верный» и «Логин не верный»

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

                                                        Самое читаемое