Задумывались ли вы, почему многие дизайнеры UX (пользовательского интерфейса для сайтов или мобильных приложений) ранее достаточно активно занимались и графическим веб-дизайном (UI)? Многим кажется, что работать над пользовательским опытом, над функциональностью интерфейса очень сложно. Куда проще продумать сетку, расставить элементы и блоки и раскидать иконки. Но в реалии, именно чувство эстетики, умение решать, что лучше и как удобнее, дают очень хорошую базу для того, чтобы отойти от графического дизайна и начать создавать UX. Хотя и тут многих дизайнеров тоже ждут «подводные камни». Но давайте обо всем по порядку… и продолжим рассмотрение идей UX.
Внешняя похожесть
Графический дизайн в основном касается визуальной части всего дизайна проекта: цвет, типографика, расположение элементов в пространстве. Дизайн UX больше внимание уделяет созданию продукта в целом, как им будут пользоваться, как с ним будут взаимодействовать, какие этапы и шаги должен пройти пользователь, чтобы что-то купить/заказать. Оба этих направления можно сравнить с любым предметом, что имеет красивую и красочную обертку (фантик). Человек таким создан: красивая обертка привлекает и манит, но от того, каким создан внутри находящийся продукт зависит, будет ли человек пользоваться им. Именно поэтому дизайн проекта очень зависит не только от графического дизайна, но и дизайна UX.
Если иметь это ввиду, то именно дизайнерские и визуальные навыки становятся основой для начала работы над созданием различных UX. Проект mile27realty красив и удобен, а дизайны двух направлений тесно сплелись между собой.
Тонкости и нюансы
Но этих знаний обычно не достаточно. Как база – хороши, но для полноценной работы – нет. Дело в том, что работа над пользовательским интерфейсом включает в себя и психологию дизайна, дизайн взаимодействия, информационную архитектуру. И все это помогает понять и исследовать действия и мотивы пользователей, построить стратегию контента на сайте. Да, вот, так все необычно.
Невозможно создать удобный и понятный интерфейс, если не представлять, почему пользователь может нажать сюда, а не вооон туда. Нужно понимать, что его может заинтересовать, как ему это ненавязчиво предложить и прочее, и прочее. И за одну ночь, взявшись за заказ, ни один дизайнер не сможет этому научиться в полной мере.
Пиксели или размышления
Основная сложность перехода из графического дизайна в дизайн UX – изменить свое мышление и понимание своих задач. То есть, если раньше веб-дизайнер думал о сетках, цветах, типографике, теперь ему нужно думать о пользователе, о том, что ему интересно, почему он делает эти клики, а не вот те; почему ему нравится на этом сайте, а не на другом со схожей тематикой.
Иными словами, вся новая работа начнется с создания того, как вообще новый проект будет работать (в целом), а уже потом начнется его графическая визуализация. То есть, сначала пишем сценарий, а потом создаем кадры, снимаем сцены и создаем спецэффекты.
Проект сайта должен решать проблему многочисленных пользователей и предлагать разные возможности для того, чтобы они могли взаимодействовать с ним и хотели это делать. Да, несомненно, от графического дизайнера это тоже очень зависит, но и от дизайнера UX также в немалой степени.
Можно или нельзя
Представьте ситуацию, когда вы открываете красивую странницу сайта и… вдруг не знаете, а что на ней делать, куда нажимать, зачем. Вы прокручиваете её и прокручиваете, но контент вас все больше и больше вводит в заблуждение.
Хороший дизайн – плавное распределение и перетекание действий, взаимодействий и движений с одной страницы на другую. Но цель дизайнера UX продумать все таким образом, чтобы посетители могли по разным путям достичь нужной информации.
Именно поэтому призывы к действию и становятся главными на страницах. Таким образом, пользователи понимают цель каждой страницы в отдельности и что они получат/увидят, если нажмут кнопку, заполнят форму, купят продукт. Дизайн UX, в данном случае, может включать сторонние элементы для поощрения кликов, поделиться в соцсетях, оставить отзыв и прочее.
В данном случае интересен интерфейс проекта getvinebox, дизайн которого в целом выглядит привычно, но визуально оформлен таким образом, что сразу пользователями это не осознается. При этом существуют множественные понятные кнопки, ссылки, отдельные пункты меню. Даже под карточками возможностей существует не просто стрелочка (мол, листай дальше) а небольшое пояснение: Открой для себя больше. Разумеется, что с таким призывом гораздо больше пользователей кликнет по ссылке.
Интересен также проект laab-walde, где каждая карточка категории имеет стрелочку-ссылку, дополнительно поясняющую о том, что можно нажать и узнать еще больше информации.
За красивым оформлением скрывается функциональность.
Много элементов или мало
Не стоит топиться в проекте и везде, где только можно использовать супер-пупер-крутые элементы и эффекты. Если есть одна хорошая и подходящая иллюстрация, используйте её. Но при этом не нужно загромождать вокруг пространство мелкими по размеру изображениями, даже если они тоже тематически подходят.
И это относятся ко всем элементам дизайна в целом (графического или UX), даже к иконкам и значкам, что наиболее важные для привлечения внимания пользователей. Задача пользовательского интерфейса, опыта – побудить сделать больше кликов, больше переходов, больше заказов, но не перегружать пользователя избыточной информацией. Поэтому совместные действия графического дизайнера и дизайнера UX направлены всегда на то, чтобы продумать тот момент, когда уместно большее количество элементов, а когда нет, как расположить и как «обыграть» это самое количество.
Лучшим вариантом, в данном случае, становится идея малой стратегии. То есть использование только тех элементов, которые необходимы. Если дизайнер UX не может сообразить, что же действительно нужно, то проще простого самому попробовать с каждой страницы убрать по одному-два элемента и посмотреть, а что получилось? Самому-то удобно?
Вот наглядный пример проекта artloversaustralia, который обладает неимоверно огромным объемом контента. Но каждое изображение слайдера на главной станице имеет свое значение. Одно рассказывает о фестивале, другое – предлагает посетить магазин, третье – подписаться и получить скидку и так далее. Да, существует большое меню, перетекающее в вариант «гамбургера», несколько иконок и примеров арт-работ. Но главное, при большом обилии контента нет общей загруженности в дизайне. Вся информация рассортирована, распределена и убрана, но и остается доступной и словно бы «на ладони».
Стоит обратить внимание и на madebywest, что не только обладает анимацией (лучше посмотреть самостоятельно), но легкой асимметрией, которая позволяет визуально отделить части контента друг от друга и дает возможность глазам спокойнее и размеренно изучить его.
Мобильное взаимодействие
Мало кто оспаривает тот факт, что сайты должны создаваться на основе реагирования, отзывчивости. Но использование одного только адаптивного шаблона для сайта недостаточно, поскольку вся конструкция сайта должна быть четко отрегулирована для разных экранов. И это, увы, слишком часто игнорируется.
В результате можно увидеть некоторые проекты, которые во время открытия их на мобильных устройствах, имеют ужасную и невыверенную типографику, несоразмерные изображения, непропорциональность элементов. И даже если это не повсеместно встречается на одном конкретном сайте, то все равно раздражает пользователей.
Именно поэтому дизайнеры графические и UX стараются уделить немного больше времени на работу и отдельно позаниматься с мобильным вариантом. Таким образом, можно уже с уверенностью говорить о том, что мобильный вариант сайта будет более выверенным, более удобным, понятным и не только в плане визуализации, а именно в плане использования.
Для примера посмотрим на проект AND CO. Его десктопная версия широка и масштабна, хотя информации и не так много. Существует две кнопки, в середине и верхнем правом углу, несколько иконок и интересных анимаций ниже на странице (лучше увидеть своими глазами). Но если этот сайт открыть на мобильном устройстве, то увидим весьма интересный вариант и решения.
Кнопки уже используются другие, предлагающие сразу загрузить мобильные приложения. Кроме того, если продолжить пролистывать страницу, то эти две кнопки не исчезают из поля видимости пользователя, они, наоборот, перемещаются вниз экрана и всегда там находятся, как отдельная панелька. Интересен также момент внутренних страниц, где типографика создана в целом… удобной. На мобильных экранах читать мелкий текст не слишком удобно, поэтому разработчики сделали его крупным, хотя и может показаться, что уж излишне крупным. Но в десктопной версии он тоже немаленький. Почему? Если использовать большее разрешение экрана, то он уменьшится, а 1080р уже давно стал чем-то средним (а не ноу-хау), существуют у пользователей и большие разрешения и нередко. Но об этом мы уже говорили отдельно.
Выравнивание
Кстати, говоря, о крупном тексте в данном случае, рассматривая дизайн пользовательского интерфейса, необходимо затронуть такой момент, как выравнивание элементов в целом. С одной стороны, это касается графического дизайна, но и к UX, увы, это тоже относится.
По левому краю, по центру, по правому, по ширине – нет, мы сейчас не станем углубляться в вопросы преимуществ каждого выравнивания в веб-дизайне. Но отметим, что выравнивание должно быть последовательным, и это важно. Все элементы дизайна должны строго находиться в сетке и не допускаются рваные края.
Чтобы понимать и правильно создавать текстовые блоки макета рекомендуется использовать абзацы Lorem ipsum. Прочитать о них подробнее можно у Артемия Лебедева или в Википедии, а сгенерировать нужный вам абзац на сайте проекта lipsum. Такие текстовки помогают разметить и создать текст таким, каким он должен будет быть внешне, если его заполнить готовым и осмысленным. То есть, с уже выбранным шрифтом, кернингом, отступами, жирностью, выравниванием и прочим.
Стоит также обратить внимание на сайты cubavodka и catchfishandchips, где выравнивание текста создано по левому краю, а сами элементы размещаются то в правой части страницы, то в левой. Кроме того, несмотря на то, сверху и снизу есть отдельные элементы-ссылки, текст между ними не располагается посередине, а все равно выровнен по левому краю, тем самым создавая визуальную иерархию и позволяя глазам плавно перейти на изображения ниже.
Или обратите внимание на последовательность выравнивания на twindolphinloscabos
Мнения и отзывы
Создавая графический дизайн, вы просто отправляете его в интернет и, по сути, не знаете в дальнейшем о том, удобен ли он пользователям, интересен, все ли работает по назначению. Очень часто с дизайнерами нет обратной связи и способов оценки дизайна. Но как раз дизайн UX направлен на работу с обратной связью. И именно поэтому очень важны исследования мнений и взглядов пользователей. Для этого существуют разные методологии, результаты, инструменты. Честно говоря, этот момент может стать самым захватывающим и любопытным в дизайне пользовательского интерфейса.
Именно поэтому во многих интерфейсах сайтов можно видеть не просто значки соцсетей, мол, вот мы тут, а именно призывы к тому, чтобы посетители оставляли свои отзывы, писали мнения, задавали вопросы. И здесь зачастую становится неважно о чем: о продуктах/услугах или о том, что вдруг на сайте что-то не работает или появилась битая ссылка. Данным владельцам и дизайнерам интересно знать всё, им важно иметь обратную связь с пользователями.
Как пример - risere, обладающий несколькими вариантами контактов, которые могут использоваться для разных целей; portofmokha – подключен чат и существует почта, греческий портал Suzuki Hellas, несмотря на то, что направлен на продажи автомобилей, имеет немалое количество вариантов связи.
И как пример, сайт по продажам недвижимости bbg-fl. Их цель только продать товар, но обратная связь у них не слишком развита. Только если интересуют конкретные вопросы.
С чего начинать
Начинать переходить на разработку UX всегда надо с простого и постепенно. Попробуйте постоянно создавать новые интерфейсы на базе тех проектов, что уже есть. Начните с нуля и попробуйте переделать под свой вкус, возможно, у вас получится что-то лучше. Например, существует интересный проект dailyui, который каждый день предлагает новые проекты для создания нового интерфейса и который затем оценят известные личности. Но попробуйте испытать себя глубже. Не останавливайтесь на UI, а попробуйте создать новый реальный пользовательский опыт для этих проектов. Тогда и интерфейс будет в корне другим, нежели просто его перерисовать.
Выводы
Область дизайна UX растет каждый час и многие графические дизайнеры стараются, если не перейти полностью, то изучить это направление. Но любое новое, какая бы база уже не имелась для него, все равно требует времени для полного изучения, практики.
Некоторые могут запутаться между графическим дизайном, UX, опытом взаимодействия и прочими терминами. Мы оговоримся еще раз: сначала создается UX – опыт макровзаимодействия, то есть то, как продукт (например, информация о художниках Австралии) будет представлен в интернете, каков смысл проекта, что должно быть отражено на разных страницах, и прочее, и прочее. Уже затем начинается графический дизайн UI, когда художники расставляют элементы, рисуют их, пишут, добавляют спецэффекты. Но при этом ответственный за UX постоянно тестирует то, что создается, смотрит, чтобы графическая составляющая не сломала оговоренные идеи. Это если в общих чертах.
Именно поэтому у графических дизайнеров существует очень большая база для работы с UX, для оценки и анализа того, что они создают визуально. Хотя да, могут допускаться ошибки, могут оставаться вопросы о том, как и что делать. Этому можно учиться, можно общаться с коллегами, создавать собственные соцокружения и обсуждать с пользователями интернета идеи и новаторские мысли.