Как их избежать и что мне хотелось бы знать

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

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

Хотя я не дизайнер UI/UX, я работал с ними много лет и, как следствие, научился создавать более полезные приложения. Есть определенные принципы, которым нужно следовать, и мой проект практически не следовал ни одному из них. Например, просто думая как пользователь, я мог бы избежать большинства ошибок.

Давайте углубимся в 5 главных ошибок UI и UX, которые я совершил в первые дни работы веб-разработчиком, и как их избежать.

1. Непредоставление пользователям четкого потока

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

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

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

2. Предпочитайте таблицы карточкам

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

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

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

Вот как выглядит веб-страница, содержащая данные, хранящиеся в таблице:

А вот как выглядит та же веб-страница с карточками:

Какой из них вы считаете более интуитивным и предпочитаете как пользователь?

3. Отзывчивость не так уж и сложна

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

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

Кроме того, существует несколько библиотек, которые можно использовать для создания адаптивных компонентов, автоматически подстраивающихся под любую ширину экрана. Это особенно важно, потому что позволяет создать портфель адаптивных компонентов, которые можно повторно использовать во многих проектах. В частности, я нахожу библиотеку JavaScript react-textfit особенно полезной. react-textfit позволяет автоматически адаптировать шрифт текста к доступному пространству. Узнайте больше о том, как использовать его для создания многоразовых адаптивных компонентов здесь.

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

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

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

Затем я начал использовать модальные окна для обратной связи с пользователями. Модальные окна являются более универсальными, красивыми и продвинутыми инструментами по сравнению с родными оповещениями. Тем не менее, они все еще слишком агрессивны. Кроме того, модальные окна могут занимать много места и могут быть хорошим решением только на рабочем столе. В мире мобильных устройств, в котором мы живем, они могут быть не лучшим решением.

В частности, я использовал модальные окна, как показано ниже:

Когда пользователь выполняет действие, которое вызывает API через AJAX, я использовал для отображения модальное окно загрузки, чтобы заблокировать взаимодействие с пользователем до получения ответа от сервера. Затем я использовал тот же модальный режим, чтобы показать результат операции. Это взаимодействие я украл с нескольких сайтов.

Однако вызовы AJAX обычно асинхронны. Другими словами, вызовы AJAX не должны блокироваться. Это означает, что запрет на взаимодействие пользователей с веб-страницей до получения ответа является неправильным. Это верно в большинстве случаев. Особенно, если учесть, что ответ сервера может занять много времени. Пользователь не хочет тратить время на ожидание и не должен этого делать с пользователями.

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

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

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

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

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

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

Заключение

Здесь вы рассмотрели 5 самых важных ошибок UI и UX, которые я допустил в первые дни работы веб-разработчиком. Когда я недавно запускал свое первое веб-приложение, разработанное много лет назад, у меня была возможность обнаружить их все. Здесь я поделился ими со всем миром. Большинство ошибок пользовательского интерфейса и пользовательского интерфейса, которые я допустил, определенно можно было избежать, и в этой статье вы увидели, как их избежать.

Спасибо за прочтение! Я надеюсь, что вы нашли эту статью полезной.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь: