Самая большая UX-ошибка в формах создания контента
Создание нового контента в интерфейсе не всегда проходит просто. Всё начинается с того, что пользователь нажимает кнопку «Создать» и заполняет форму. Однако форма создания может быть затруднительной, особенно когда существует несколько вариантов контента.
Часто пользователи случайно выбирают неправильный тип контента и в итоге создают неполный пост. Это вызывает у них разочарование — приходится удалять пост и начинать всё сначала. Один из ярких примеров такой UX-проблемы — форма создания на Reddit. Обратите внимание на все варианты контента, представленные в виде вкладок сверху. На первый взгляд всё кажется понятным, но видите ли вы, где пользователь может допустить ошибку?
На изображении видно, что пользователь находится во вкладке «Текст». Он начинает с того, что вводит заголовок и текст поста. Затем он решает добавить изображение. Он замечает вкладку «Изображения и видео» и нажимает на неё.
Теперь он видит поле, куда можно перетащить изображение. Заголовок поста всё ещё виден, поэтому он предполагает, что просто добавляет изображение к уже начатому посту. Но после добавления изображения оказывается, что пост публикуется без введенного ранее текста.
Оказывается, что при нажатии на вкладку «Изображения и видео» создается совершенно другой пост, а не продолжается уже начатый. Это означает, что пользователи должны выбрать правильную вкладку ещё до начала заполнения формы. Но ведь и «Текст», и «Изображения и видео» технически являются верными вкладками, поскольку пост может содержать и текст, и изображения.
Пользователи не нажимают на «Изображения и видео» с самого начала, потому что их пост в первую очередь содержит текст. Они предполагают, что вкладка по умолчанию — правильная. В итоге им приходится удалять опубликованный пост и заново проходить весь процесс создания.
Дальше — хуже. Допустим, пользователь хочет сделать свой пост кликабельной ссылкой. Он видит вкладку «Ссылка», нажимает на неё и вставляет ссылку в нужное поле. Но это снова запускает создание совершенно другого поста, из-за чего из опубликованного поста исчезает весь введенный ранее текст. Это неожиданное поведение, которое сбивает с толку и вызывает раздражение.
Существует несколько решений этой проблемы. Простое решение — дублировать введенный пользователем текст из вкладки «Текст» во все остальные вкладки. Форма уже копирует заголовок поста между вкладками, но не делает этого с основным текстом.
Это работает, потому что пользователи не считают посты с текстом и с изображениями разными типами контента. Для них это одно и то же. Поэтому нет смысла разделять их на разные формы. Лучше разрешить пользователю добавлять изображения и видео прямо в текстовый пост.
Ещё одно решение — разместить под полем «Заголовок поста» переключатели (toggle-кнопки), позволяющие выбрать между «Текст», «Изображения и видео» или «Ссылка». При переключении между этими вариантами форма немного меняется. Это разные вариации одной и той же формы, но при этом они исключают друг друга.
Обратите внимание, как поля для загрузки изображений или вставки ссылок появляются при переключении. При этом заголовок поста и основное текстовое поле должны оставаться постоянно видимыми, независимо от выбранной опции.
Такие переключатели улучшают пользовательский опыт. Вместо ощущения, что им нужно выбирать между тремя разными формами, пользователи воспринимают это как один и тот же процесс с разными вариантами. Более того, они не теряют введенную информацию при переключении между типами контента.
Проблема Reddit заключалась в том, что вкладки использовались как переключатели. На первый взгляд они могут показаться схожими по функционалу, но вкладки предназначены для навигации между разными макетами отображения. Это не подходящий шаблон интерфейса в данной ситуации, потому что все три типа постов используют одно общее поле для заголовка. Следовательно, их не следует представлять в виде трёх отдельных вкладок.
Продумывая, как представить варианты контента при создании новых элементов на вашем интерфейсе, учитывайте: если элементы являются вариациями одного и того же, используйте переключатели. Если это совершенно разные сущности — используйте вкладки. Эта распространённая UX-ошибка может дорого обойтись, поэтому важно понимать разницу при проектировании форм создания.