Введение в проблематику UI/UX#
Проектирование интерфейса пользователя – это комплексная дисциплина, требующая понимания психологии пользователя и принципов юзабилити. Мы анализируем потребности аудитории, проектируем интуитивные решения и тщательно тестируем результат, чтобы обеспечить удобство использования. В результате мы создаем не интерфейс, а инструмент, который помогает пользователям достигать своих целей.
Что такое графический пользовательский интерфейс (GUI)#
Представьте себе компьютер без привычных окошек, кнопок и меню. Работа с ним была бы крайне сложной.
Графический пользовательский интерфейс, или GUI (произносится как "гуи"), — это то, что делает взаимодействие с компьютером и приложениями интуитивным.
В основе разработки интерфейсов лежит создание наглядного и понятного способа управления.
GUI переводит сложные технические процессы в визуальные элементы, которые легко понять и использовать.
Это визуальный язык общения между пользователем и машиной, позволяющий управлять программами без знания сложных кодов.
Он делает работу с цифровыми продуктами проще.
Благодаря GUI компьютерные программы и приложения становятся доступными и понятными для обширного круга пользователей.
Что такое UX/UI?#
UX — это User Experience (дословно: «опыт пользователя»).
То есть это то, какой опыт и впечатление получает пользователь от работы с вашим интерфейсом.
Удается ли ему достичь цели и насколько просто или сложно это сделать.
А UI — это User Interface (дословно «пользовательский интерфейс») —
то, как выглядит интерфейс и какие физические характеристики он приобретает.
Определяет, какого цвета будет ваше «изделие», удобно ли человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное.
UX/UI дизайн — это проектирование любых пользовательских интерфейсов,
в которых удобство использования так же важно, как и внешний вид.
Что такое UX и UI дизайн, другими словами#
Прямая обязанность UX/UI дизайнера — это, например, «продать» товар или услугу через интерфейс.
Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?»
Нравится или не нравится. Купить или не купить.
Tip
На самом деле цели дизайнера могут быть разными.
Не обязательно что-то «продавать».
Но я специально не хочу использовать слишком абстрактные фразы, чтобы этот текст был понятен новичкам; чтобы стиль изложения не превратился в хрестоматию по языку программирования образца 90-х годов.
UX/UI дизайн не относится только к смартфонам и веб-сайтам.
Более того, профессия UX/UI дизайнера существовала с незапамятных времен.
Просто раньше она так не называлась. Точнее, раньше она вообще никак не называлась, а была частью других профессий.
Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.
Потому что именно он придумывал, какие тумблеры и в какой последовательности должен крутить человек, чтобы получить результат вычислений.
И он же придумывал, в каком логическом порядке они будут располагаться.
Да и вообще придумывал, как все эти ручки будут выглядеть.
Он создал интерфейс для взаимодействия с машиной.
Ещё один более древний и примитивный пример — точильный камень (колесо).
Уже даже в раннем Средневековье было много разновидностей и механизмов такого колеса:
- его можно было крутить рукояткой вручную
- колесо мог крутить другой человек
- или его можно было раскручивать даже без рук, нажимая педаль ногой
- и другие...
Всё это были разные типы интерфейсов.
Так вот, когда изобретатель очередного точильного камня думал:
будет ли он сидеть и сам нажимать педаль,
или он упростит механизм, но приставит раба, который будет раскручивать колесо рукой,
то в тот момент он был UX дизайнером.
А тот человек, который думал, какой величины будет камень, какого цвета выбрать дерево для подставки и чем скрепить деревянные жерди (гвоздями или кожаными жгутами?),
и какой длины будет ручка, был UI дизайнером.
И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.
Разница между UX и UI в том, что UX дизайнер планирует то, как вы будете взаимодействовать с интерфейсом и какие шаги нужно предпринять, чтобы сделать что-то.
А UI дизайнер придумывает, как каждый из этих шагов будет выглядеть.
Как видите из примеров выше, UX и UI так тесно связаны, что иногда грань между понятиями смывается.
Поэтому и UX, и UI обычно занимается один дизайнер, и его профессия пишется через «/».
В последнее время популяризация профессии UX/UI дизайнера связана скорее с развитием цифровых технологий.
А вот именно тот «бум» (когда мы стали видеть термин «UX/UI» в каждом втором объявлении о работе) связан с самим названием, которое кто-то придумал совсем недавно.
UI/UX дизайн — это сейчас одна из самых востребованных профессий в цифровой индустрии.
Сколько времени она будет востребована, зависит от развития этой отрасли.
И, судя по всему, она только набирает обороты.
UX и UI — это не тренды.
Технологии развиваются. Спрос на сайты растёт. Цифровые приложения появляются как грибы.
А инструменты дизайна и разработки упрощаются настолько, что уже практически любой человек без знания программирования может «на коленке» сделать сайт-визитку.
Вот только этот сайт должен как-то выглядеть.
И не просто как абстрактный каркас из текста и кнопок.
Тут программистам и нужна помощь UX/UI дизайнера.
Разделение на веб-дизайнеров и UX/UI дизайнеров появилось с развитием интернета.
Со временем понадобились более узкие специалисты, которые делали бы интерфейсы именно для веб-сайтов.
Да, UI/UX дизайн — это более широкое и емкое понятие, чем веб-дизайн.
Паттерны UI/UX, или что надо знать о людях#
В мире существует множество статей о том, как правильно делать интерфейс.
Все они наполнены полезными советами для различных ситуаций:
здесь нужна красная кнопка, здесь должна быть вот такая анимация и так далее.
Всех ситуаций не описать — их просто бесконечное множество.
Однако, если понять базовые принципы проектирования интерфейсов, необходимость в этих советах отпадает.
Главное — понять, почему эти советы работают и как устроен конечный пользователь.
А пользователь — это человек со всеми его особенностями.
Note
Паттерн — это повторяющийся шаблон, который может возникать в различных сферах жизнедеятельности.
Итак, рассмотрим задачу: создать максимально удобный интерфейс для человека.
Что значит максимально удобный? Это такой интерфейс, с помощью которого человек может решать свои задачи максимально эффективно.
Чем больше задач человек успеет выполнить за определённое время и чем выше качество его работы, тем лучше.
Этот процесс можно представить как обмен энергии человека на полезный результат.
Ключевой момент — затраты энергии.
Здесь важно учитывать особенности человека и его мозга.
Наш мозг потребляет большое количество энергии и, как и все остальные органы, стремится её экономить.
Сила привычки#
Есть такое выражение: человек — это сгусток привычек. В этом есть большая доля правды.
Как уже говорилось, мозг — это набор нейронов, нейросеть, проще говоря.
Эта нейросеть постоянно подстраивается и обучается.
Сначала новая задача требует большого количества энергии, ведь ещё не образовались нужные связи и мозг не обучен.
Но с каждым разом он подстраивается всё больше и больше, а энергии тратится всё меньше и меньше.
В конечном счёте появляются наиболее оптимальные связи для этой задачи. Это и есть привычка или навык.
Этот процесс хорошо объясняет петля привычки Юджина:
- сигнал (ситуация или триггер)
- действие (поведение, которое мы выполняем)
- награда (положительный результат, который закрепляет привычку)
Так формируется цикл, который позволяет мозгу экономить энергию, переходя к автоматическим действиям.
Это можно эффективно использовать при проектировании интерфейсов.
Пользователь, скорее всего, уже не впервые работает с компьютером и, возможно, видел похожие элементы в других программах.
Однако часто разработчики пытаются изобрести велосипед — перепридумывают уже готовые паттерны интерфейсов.
Все хотят внести частичку себя и проявить творческий потенциал, но, как говорится, главное не переборщить.
Поэтому важен принцип: использовать уже проверенные решения.
Пользователь видит знакомый интерфейс, узнаёт в нём элементы, с которыми уже работал, и может интуитивно понять, что делать дальше.
Например, сохранение файлов — казалось бы, банальная вещь.
Но иногда разработчики придумывают собственные способы сохранения, хотя давно существуют общепринятые паттерны.
Если задача уже решена кем-то и это решение широко используется, стоит присмотреться и сделать что-то похожее.
Древние инстинкты#
Помимо приобретённых привычек у человека есть и врожденные — их чаще называют инстинктами.
Это мгновенные реакции нервной системы на внешние раздражители.
В ходе эволюции они закрепились, потому что помогают выжить.
Например:
- увидел внезапно шевелящийся куст — возможно там тигр, и возникает страх, нужно срочно убегать;
- увидел неестественно яркую лягушку — лучше её не трогать, и так далее.
Конечно, в вашей программе не сидит тигр, и при внезапном появлении диалога пользователь не вскочит и не убежит.
Однако эти инстинкты влияют на эмоциональную стабильность.
Внешние раздражители, такие как громко беседующие коллеги, некачественный кофе и прочее, снижают эмоциональную стабильность.
Из-за этого мы начинаем думать хуже, выходим из состояния потока и вынуждены концентрироваться сильнее.
К этому добавляется то, как выглядит и ведёт себя интерфейс.
Если интерфейс не очень привлекателен, постоянно появляются раздражающие элементы или «что-то идет не так»,
мы инстинктивно это воспринимаем, и это снижает продуктивность.
Что можно сделать? Нужно избегать раздражителей.
- Используйте теорию гармонии цветов.
Правильные цвета создают ощущение спокойствия.
Существует множество статей о выборе приятной для глаз палитры.
Все они основываются на теории цветового круга и определённых паттернах, которые помогают подобрать гармонирующие цвета, не вызывающие раздражения.
- Применяйте плавные и реалистичные анимации.
Мы не любим, когда что-то внезапно появляется или исчезает, и всегда замечаем неестественные движения.
Например, дверь при открытии сначала ускоряется, затем замедляется.
Используйте реалистичные нелинейные функции движения для анимаций.
Период концетрации внимания#
Наш мозг не всесилен — мы не можем думать обо всём одновременно.
Количество вещей, которые мы можем одновременно держать в голове, колеблется примерно от 5 до 7.
Это называется рабочий объём памяти мозга.
Самое главное — рабочий объём памяти ограничен и весьма мал.
Мы не можем думать одновременно о десяти вещах. Чем меньше нам нужно держать в голове, тем меньше тратится энергии на мышление.
Важно учитывать, что переключение контекста тоже тратит энергию и время.
Если приходится постоянно переходить от одной задачи к другой, а затем снова возвращаться к первой — много сил уходит на перезагрузку рабочей памяти.
Что с этим делать?
Всё зависит от специфики программы, но в целом нужно контролировать фокус пользователя.
Задачи должны выполняться линейно. Например, редкие действия можно сделать по умолчанию, с возможностью дополнительной настройки.
Всё делается так, чтобы не заставлять пользователя часто переключать внимание.
Есть и более универсальный совет для удержания внимания: использовать геометрические паттерны.
Например, таблицы или списки легко читаются, потому что мы сначала формируем в памяти «модель» данных: знаем, какие значения будут в столбце, и можем предсказать расположение информации. Это облегчает восприятие.
В целом, это можно назвать геометрической правильностью интерфейса:
- общие элементы сгруппированы в блоки;
- основные блоки расположены сверху и слева;
- порядок элементов следует слева направо и сверху вниз, по важности или по шагам выполнения задачи;
- симметрия помогает мозгу легче выделять блоки;
- и важен предыдущий опыт — похожие части функционала должны иметь схожие геометрические паттерны, чтобы пользователь мог быстро сориентироваться.
Распознавание образов#
Работа с графическим интерфейсом во многом сводится к распознаванию образов. В этом процессе мы можем помочь человеку.
Рассмотрим упрощённый алгоритм того, как мы понимаем, что видим. Этот процесс похож на то, как компьютерные нейросети распознают, например, буквы.
Сначала из глаз приходит сигнал о том, какие колбочки сетчатки возбуждены тем или иным цветовым спектром — грубо говоря, какие пиксели какого цвета.
Из этого набора сначала выделяется цвет: чёрное отличается от белого. Этим занимается одна группа нейронов.
Затем, по разнице цветов, мы можем определить простые образы — линии, точки и т.п. Этим занимается другая группа нейронов, связанная с первой.
Далее эта информация передаётся на следующий уровень, где образы обобщаются. На каждом этапе нейроны всё больше связываются с теми, что хранят опыт распознавания ранее увиденных образов.
Например, увидели букву А на белом фоне: сначала выделили цвет буквы, затем распознали простые формы — линии, из которых она состоит, а затем сопоставили с прошлым опытом, что максимальное совпадение — буква А.
Процесс сложен и многоступенчат, и именно эту последовательность можно использовать для упрощения восприятия интерфейса.
Итого:
1. Сначала выделяется цвет,
2. затем форма,
3. затем содержимое формы.
Моторика#
Интерфейс взаимодействует с пользователем через устройства ввода — клавиатуру, мышь или сенсорный экран, и это следует учитывать при разработке.
Чем меньше движений нужно совершать — тем эффективнее. Меньше движений глаз ускоряет восприятие информации, а сокращение переходов между клавиатурой и мышью облегчает работу и снижает усталость.
При этом важно помнить о специфике разных пользователей. Например, программисты обычно работают преимущественно с клавиатурой, и частое переключение на мышь утомляет их. Обычные пользователи часто держат руки одновременно на клавиатуре и мыши, а дизайнеры могут использовать стилус или графический планшет. Эти нюансы влияют на удобство взаимодействия.
Кроме того, использование четких геометрических схем в интерфейсе помогает снизить количество ненужных кликов и сократить перемещение взгляда. Регулярное повторение таких паттернов формирует у пользователя привычки, благодаря которым действия становятся автоматическими и выполняются без лишних усилий.
Промежуточные итоги#
В конечном счете, размышления, которые здесь приведены довольно сложно формализировать в виде единой схемы. Да и большинство спецфиалистов в области UI/UX руководствуются интутивными прозрениями и накопленным опытом.
Чтобы глубже познакомиться с современными подходами к проектированию интерфейсов, рекомендую обратить внимание на два ключевых ресурса:
-
Material Design — это система проектирования, разработанная Google. На сайте представлены подробные рекомендации по созданию интерфейсов, включая цветовые палитры, типографику, компоненты и анимации. Material Design задаёт стандарты, которые помогают создавать удобные, понятные и красивые приложения для разных платформ.
Ссылка: Material Design -
Human Interface Guidelines (HIG) — это руководство по дизайну от Apple, которое содержит подробные инструкции и лучшие практики для создания приложений под iOS, macOS, watchOS и другие платформы Apple. Здесь описаны принципы построения удобного интерфейса, советы по взаимодействию с пользователем, работа с жестами, а также рекомендации по визуальному стилю. HIG помогает разработчикам создавать приложения, которые легко воспринимаются и интуитивно понятны пользователям Apple-устройств.
Ссылка: Human Interface Guidelines
Оба ресурса являются отличным источником знаний и вдохновения для тех, кто хочет создавать качественные и удобные интерфейсы. Они основаны на исследованиях и опыте тысяч специалистов, поэтому их изучение существенно поможет в освоении основ UI/UX-дизайна.