Что такое UX/UI дизайн на самом деле?
Очень много недопонимания в среде дизайнеров и разработчиков. Также много глупых вопросов, связанных с UX и UI у новичков. Часто просто из-за того, что люди не знают сути понятия UX/UI и, не зная о чем говорят, называют вещи не своими именами.
Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».
Разные типы интерфейсов для заточки лезвий.
Нажимаете ли вы кнопки на арифмометре, крутите рукоятку точильного камня или делаете свайп по экрану смартфона — все это интерфейсы, с помощью которых вы взаимодействуете с механизмами. При этом интерфейс совсем не обязательно должен быть цифровым. Просто само слово «интерфейс» было заимствовано из английского совсем недавно и докатилось до нас в только цифровую эпоху.
Цель UI/UX дизайнера — довести пользователя до какой-то логической точки в интерфейсе. Сделать так, чтобы пользователь достиг своей цели.
Что такое UX/UI, прямым текстом
(в этом разделе будут банальные фразы)
UX/UI дизайн — это проектирование любых пользовательских интерфейсов в которых удобство использования так же важно как и внешний вид.
Что такое UX и UI дизайн, другими словами
Прямая обязанность UX/UI дизайнера — это, например, «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.
UX/UI дизайн не относится только к смартфонам и веб-сайтам. Более того, профессия UX/UI дизайнера существовала с незапамятных времен. Просто раньше она так не называлась. Точнее, раньше она вообще никак не называлась, а была частью других профессий.
Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.
Потому что именно он придумывал, какие тумблеры и в какой последовательности должен крутить человек, чтобы получить результат вычислений. И он же придумывал, в каком логическом порядке они будут располагаться. Да и вообще придумывал, как все эти ручки будут выглядеть. Он создал интерфейс для взаимодействия с машиной.
Ещё один более древний и примитивный пример — точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:
- его можно было крутить рукояткой вручную
- колесо мог крутить другой человек
- или его можно было раскручивать даже без рук, нажимая педаль ногой
- и другие.
Так вот, когда изобретатель очередного точильного камня думал:
- будет ли он сидеть и сам нажимать педаль
- или он упростит механизм, но приставит раба который будет раскручивать колесо рукой,
А тот человек, который думал, какой величины будет камень, какого цвета выбрать дерево для подставки и чем скрепить деревянные жерди (гвоздями или кожаными жгутами?) и какой длины будет ручка, был UI дизайнером.
И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.
Разница между UX и UI в том, что UX дизайнер планирует то, как вы будете взаимодействовать с интерфейсом и какие шаги вам нужно предпринять, чтобы сделать что-то. А UI дизайнер придумывает, как каждый из этих шагов будет выглядеть. Как видите из примеров выше, UX и UI так тесно связаны, что иногда грань между понятиями смывается. Поэтому и UX, и UI обычно занимается один дизайнер и его профессия пишется через /.
UI/UX дизайн — это сейчас одна из самых востребованных профессий в цифровой индустрии. Сколько времени она будет востребована зависит от развития этой отрасли. И, судя по всему, она только набирает обороты.
UX и UI — это не тренды. Технологи развиваются. Спрос на сайты растёт. Цифровые приложения появляются как грибы. А инструменты дизайна и разработки упрощаются настолько, что уже практически любой человек без знания программирования может «на коленке» сделать сайт-визитку. Вот только этот сайт должен как-то выглядеть. И не просто как абстрактный каркас из текста и кнопок. Тут программистам и нужна помощь UX/UI дизайнера.
Introduction to UI Design. Что такое UI?
Дизайн пользовательского интерфейса играет важную роль в том, чтобы ваши интерфейсы выглядели привлекательными, но в то же время полезными и интеллектуальными.
What is User Interface (Что такое UI (пользовательский интерфейс))
Перевод статьи Introduction to UI Design (Введение в UI)
Начнем с пути Йоды. Попробуйте вспомнить то чувство, которое вы испытывали после использования веб-сайта, приложения или продукта, которое вызывает восторг при просмотре и использовании. Давайте откроем вам секрет, что этот продукт представляет собой смесь различных исследований, мозговых штурмов, принципов/правил, обратных связей и многих бессонных ночей.
UI (пользовательский интерфейс), как следует из названия, — это соединение / пространство, где пользователь взаимодействует с системой, физической или программной, чтобы выполнить определенную задачу. Его также можно назвать точкой интерактивности для продукта. И это взаимодействие должно быть потрясающим.
С другой стороны, UI дизайн гарантирует, что взаимодействие хорошо адаптировано и эффективно для выполнения задач пользователя.
Вам не нужно ломать голову, это только начало. Все станет более ясным, когда мы продвинемся дальше.
Сохранение слишком большого количества вариантов, напротив, сбивает пользователя с толку. Например, игровые приставки, доступные в наши дни, предлагают слишком много вариантов, с различными комбинациями. Это затрудняет их запоминание, что затрудняет пользователю наслаждаться игрой.
Понравилась статья? Завтра в 12:00 продолжение!) Подписывайся на группу вк и блог в Medium чтобы не пропустить.
Если вам нужен сайт, переходите в группу вк чтобы узнать подробнее или сразу пишите в сообщения группы, я отвечу на любые вопросы и помогу вам сделать правильный выбор.
Делаем пользователю красиво… и удобно: что такое пользовательский интерфейс и как происходит разработка UI
Мы не устаем писать о том, как важен дизайн в разработке мобильных приложений, в особенности если это MVP. Однако вокруг данной темы остается довольно много недопонимания и путаницы. Где заканчивается дизайн интерфейса и начинается UX дизайн? Какой этап важнее? Что такое вайрфреймы и прототипирование? Давайте разбираться по порядку.
Время чтения: 6 минут
Что такое UI и зачем он нужен
Начнем с понятия «интерфейс». Простыми словами, это набор средств, которые позволяют взаимодействовать двум системам и решать какую-то задачу. И если посмотреть внимательно, то интерфейсы повсюду.
Возьмем, к примеру, смеситель в ванной. Есть 3 варианта: установить ручки-крутилки, рычаг или сенсорный кран. Материалы и внешний вид тоже бывают разными. Но во всех случаях речь идет про элемент управления краном, позволяющий регулировать напор и температуру воды — это тоже своего рода интерфейс.
Если вы сантехник, то, конечно, можете сами выбрать один из вариантов. Но лучше узнать у хозяина квартиры, какой способ взаимодействия с водопроводной системой он предпочитает. Также вам вряд ли придет в голову установить посреди ванной комнаты водоразборную колонку: такой вариант уж точно не является современным, и к тому же плохо решает задачи пользователя.
Так же и с приложениями: то, что пользователь видит, запуская ваш продукт, и есть интерфейс, он же UI (User Interface). Задача дизайнера — через интерфейс показать пользователю, как работает приложение, и привести его к желаемому результату, будь то заказ продуктов из магазина или установка будильника. Но как узнать, что именно пользователь ждет от приложения? Как он будет с ним взаимодействовать? Какие у него предпочтения? Ответы на эти вопросы находятся в плоскости UX дизайна (User eXperience).
Почему UI неотделим от UX
UX дизайн — это так называемый «дизайн пользовательского опыта». Из него следует UI дизайн — «дизайн пользовательского интерфейса ». У каждого из них свои задачи.
| ⚙️ Задачи UX | �� Задачи UI |
| Изучить прошлый опыт и потребности пользователей | Создать интерфейс на основе этих потребностей |
| Разработать user flow — маршрут пользователя на пути к цели | Разработать графическую часть интерфейса (шрифты, цветовые схемы, кнопки, иллюстрации, анимацию) |
| Создать прототип | Визуализировать прототип |
| Сделать удобно | Сделать красиво и понятно |
| Подарить персонализированный и запоминающийся опыт | Подарить эстетическое удовольствие |
Если вернуться к примеру про смеситель, то все, что касается материалов, цвета, формы и маркировки, относится к UI, а принцип работы — к UX.
Как вы можете видеть, UI и UX тесно связаны. UX не воплотить визуально без UI-дизайна. Но и красивый интерфейс, разработанный без глубокого понимания пользователя, скорее всего окажется неудачным.
Неудивительно, что сейчас UI не рассматривают в отрыве от UX, а соответствующая профессия звучит как UI/UX дизайнер .
Как происходит разработка UI
Как правило, процесс разработки пользовательского интерфейса начинается с исследования пользователей и конкурентов, а завершается тестированием и передачей разработчикам необходимых материалов. Однако у каждого агентства могут быть свои «фишки» и своя последовательность этапов.
Один из вариантов организации процесса проектирования UI
Мы уже писали об особенностях нашего дизайн-процесса в целом ⤵️
А в этой статье мы хотим шаг за шагом показать этапы разработки пользовательского интерфейса на примере одного из наших проектов — Friday , мобильного приложения для организации вечеринок с друзьями. Оно дает возможность пользователям создавать свои ивенты, а также присоединяться к мероприятиям друзей — посиделкам в баре, походу в кино, домашней вечеринке. Итак, первый шаг…
Проводим предварительные исследования
Процесс проектирования интерфейса стоит начать с аналитики. Ключевые задачи при этом следующие:
- определить проблему, которую будет решать приложение;
- понять целевую аудиторию , их цели, мотивацию, стиль жизни, а также опыт решения проблемы и взаимодействия с аналогичными приложениями;
- выяснить, как решают данную проблему конкуренты, и что можно улучшить.
Более подробно об анализе конкурентов и исследовании целевой аудитории можно прочитать в нашем блоге ⤵️
В ходе работы над приложением Friday мы провели количественный и качественный конкурентный анализ, а информацию о потребителях нам предоставил заказчик.
Интересно, что на рынке почти не было приложений, которые решали бы те же задачи. Были приложения для организации больших ивентов, а для маленьких компаний мы нашли буквально 1-2. Поэтому пришлось анализировать косвенных конкурентов, например, соцсети.
Проектируем UX
На основании собранной информации аналитики прорабатывают пользовательские сценарии, а UX UI дизайнеры создают карту пути пользователя. У нас в Purrweb ключевым инструментом на данном этапе является диаграмма связей, она же — карта функциональности или «майндмэп».
Майндмэп — это схематичное изображение всех функций продукта и навигации между ними.
Майндмэп позволяет увидеть весь маршрут взаимодействия пользователя с приложением, что очень удобно, ведь перед дизайнерами стоит задача упростить навигацию. Так, в приложении Friday мы сократили процесс создания вечеринки до трех шагов.
Разработка карты функциональности занимает всего лишь 8-10 часов, зато позволяет избежать недопонимания с заказчиком и подготовить основу для полноценного дизайна.
Работаем над первыми макетами
Когда карта функциональности утверждена, начинается работа над вайрфреймами — грубым наброском структуры и содержания продукта.
Итоговый дизайн может отличаться от вайрфрейма
Вайрфреймы нужны для того, чтобы более подробно проработать навигацию, продумать расположение основных элементов на экранах приложения и понять, как пользователь будет взаимодействовать с этими элементами.
Создаем концепт для клиента
Данный этап присутствует не у каждого агентства, но мы опытным путем пришли к тому, что концепт — лучший способ утвердить дизайн будущего приложения.
В презентации концепта представлено несколько ключевых экранов, уже воплощенных в графике. То есть в ходе работы над концептом закладывается основа UI-дизайна всего приложения. На этом этапе мы в Purrweb также создаем UI-киты из ключевых элементов интерфейса (кнопок, иконок, виджетов, индикаторов, шаблонов). Эта полезная практика впоследствии существенно облегчает труд разработчиков и экономит бюджет стартапера.
Мы прорабатываем экраны, которые наиболее наполнены контентом, чтобы максимально отразить визуал. Потом собираем UI-кит из того, что есть, чтобы задать дальнейший вектор. По сути, цветовая гамма, шрифты, какие-то карточки, кнопки уже готовы на этапе концепта.
Для разработки концепта мы используем сервис Readymag. Это удобный онлайн-инструмент для создания лендингов и презентаций. Такое представление идеи будущего продукта намного нагляднее и понятнее для клиента, чем просто демонстрация нескольких экранов.
Рисуем UI-дизайн всего приложения
Вместе с концептом обычно утверждаются цветовая схема и шрифты. Затем все это необходимо масштабировать на остальные части приложения и доработать, например, отрисовать иконки или иллюстрации.
Не стоит забывать, что UI-дизайн также должен учитывать предпочтения пользователей. Изначально интерфейс Friday был спроектирован в темной теме, так как она сильнее ассоциировалась с вечеринками. Но многим людям в целом не нравится темная тема, поэтому мы добавили и светлую тоже, чтобы у пользователей был выбор.
Разрабатываем интерактивный прототип
Прототип — это интерактивный макет, который отражает внешний вид и функции приложения. Благодаря его «кликабельности», можно оценить логику работы продукта . Поэтому он в первую очередь нужен самим дизайнерам, чтобы убедиться в отсутствии ошибок в user flow . Чем еще полезен прототип:
- с ним сверяются разработчики в ходе реализации проекта;
- его можно представить потребителям в целях тестирования;
- он позволяет потенциальным инвесторам убедиться в жизнеспособности идеи.
Существует множество программных продуктов для проектирования интерфейсов , с помощью которых можно создать и прототип. Дизайнеры Purrweb используют облачное решение Figma, поскольку оно идеально подходит для командной работы: можно работать вместе в одном файле и синхронизировать изменения. Помимо этого, Figma содержит много функций, упрощающих работу над интерфейсом, например, автоматическое выравнивание всех отступов и массовое редактирование компонентов.
Как только прототип закончен, согласован, и внесены последние коррективы, наступает время передать его разработчикам. Purrweb — агентство полного цикла, поэтому наши дизайнеры работают бок о бок с разработчиками, и после передачи всех материалов получают обратную связь. Они всегда в курсе того, какие недочеты дизайна всплывают в ходе разработки, и это позволяет предотвращать подобные проблемы в будущем.
Вот уже 7 лет мы помогаем стартапам создавать красивые и удобные приложения. Если у вас есть идея, но вы не знаете, с чего начать — заполните форму ниже, и мы свяжемся с вами.
Разработка пользовательского интерфейса: зачем её заказывать
Прежде чем начать говорить о разработке графического интерфейса пользователя, давайте на всякий случай уточним, что это такое.
Интерфейс — общая граница между двумя функциональными объектами, требования к которой определяются стандартом; совокупность средств, методов и правил взаимодействия (управления, контроля ) между элементами системы (источник: wikipedia.org).
Это точное, но скучноватое определение.
А вот иными словами, но интереснее: пользовательский интерфейс (UI) — это «способ, которым вы выполняете задачу с помощью продукта, а именно совершаемые вами действия и то, что вы получаете в ответ» (источник: Джеф Раскин, «Интерфейс. Новые направления в проектировании компьютерных систем»).
В повседневной жизни мы постоянно сталкиваемся с интерфейсами. Это и сайты соцсетей, и элементы управления в салоне автомобиля, и пульт ДУ для телевизора, и голосовое управление умным домом, и панель кнопок в лифте.
Выходит, мы используем один продукт для управления другим продуктом. Но давайте не будем перечислять все явления в нашей жизни, а поговорим непосредственно о и приложениях и о том, как сделать их использование удобным.
Зачем нужен UI-дизайн
Мы разобрались, что такое пользовательский интерфейс, но пока неясно, насколько он нам нужен и стоит ли тратить деньги на его разработку и дизайн. Поэтому на минуту вернёмся к лифтам.
Лифт удобен. Он позволяет добраться до верхних этажей с минимумом временных и физических затрат. Но какой от него был бы толк, если бы мы не могли легко его открыть, выбрать этаж и при необходимости остановиться раньше времени? Всё перечисленное осуществимо, но каким путём? Позволит ли рычажное управление сделать пассажиру необходимые действия или разумнее будет использовать кнопочное управление? Тут и появляется важный момент: какой интерфейс управления лифтом выбрать.
Современные и системы в корне меняют работу людей. Существуют, например, системы управления театральными механизмами, которые упрощают работу с электронным оборудованием, лишая необходимости постоянно находиться у аппаратуры. Но едва ли работа упростится, если у таких систем будет слишком сложный интерфейс.
Получается, что программный интерфейс не только решает нашу проблему взаимодействия с приложением, но и делает это взаимодействие максимально комфортным. Нам важно наличие интерфейса, позволяющего при меньшем количестве усилий ознакомиться с возможностями приложения и понять основные принципы работы в нём.
Разработка UI-интерфейсов
Чтобы у нас с вами не возникло проблем при использовании приложения, умные люди визуализируют его функциональные возможности в виде понятных элементов, и за этой визуализацией кроется целая кухня UX/UI-дизайна.
Грань между UX (User Experience) и UI (User Interface) очень тонка, но если разобраться, то становится ясно, что UX помогает понять пользователя. В больше психологического аспекта, нежели технологического. UX изучает пользователя: как пользователь живёт, что он думает, как и что делает и что его окружает. Перед дизайнером ставится задача — помочь обычному человеку легко разобраться с вашим программным продуктом и получить при этом удовлетворение от работы с ним.
А понять пользователя очень важно. Никому не захочется заполнить двадцать полей формы для регистрации на сайте или перещелкать штук пятнадцать вкладок, прежде чем добраться до нужной функции. «Пользователя не следует заставлять взаимодействовать с программой дольше, чем абсолютно необходимо для решения той или иной задачи» (Алан Купер, «Психбольница в руках пациентов»).
Это реальная проблема, которую должен решить дизайнер, и с этапами решения этой проблемы мы познакомимся немного ближе.
Концепция
Сначала нам необходимо сориентироваться в элементах будущего интерфейса. Для этого мы определим задачу, исследуем предметную область, аудиторию и то, как она пользуется продуктом.
Создание мокапа
Этот этап позволяет быстро понять видение клиента и внести уйму изменений до начала разработки интерфейса пользователя. Мы намечаем расположение кнопок, форм и других нужных элементов, а уже потом подбираем цветовую палитру, шрифты, изображения, преобразуя всё это в удобный и красивый макет. То есть начинаем с варфрейма (план расположения элементов на странице), а заканчиваем созданием из этого плана красивой картинки. В случае разработки приложений под Android и iOS труд дизайнера облегчается гайдлайнами — правилами оформления и расположения элементов интерфейса, регламентом UX/UI, который был создан непосредственно экспертами по дизайну из Google и Apple.
User Flow Diagram (карта экранов)
Как только мы разобрались с эскизом, самое время приступить к карте экранов и понять, как же будет вести себя обычный человек при использовании будущего инструментария приложения и какое состояние будет принимать интерфейс при каждом взаимодействии пользователя с ним.
Утверждение структуры
Клиент утверждает разработанную структуру и пользовательские сценарии, а разработчик движется дальше. Этот этап позволяет исключить будущие изменения или сделать их незначительными. Если структура потеряет баллы в логике или дизайн потребует глобальной переработки, это не пойдёт проекту на пользу.
Выбор стиля UI
Существует множество различных концепций, например: material design, metro, skeuomorphism При выборе стиля интерфейса следует учесть текущие тенденции в дизайне, адаптивность, время на разработку и внедрение дизайна, и много других не менее важных моментов.
В любом или приложении дизайн помогает пользователю решить его насущную проблему, поэтому нестандартные фишки и яркие цвета отходят на второй план.
Согласование стиля
Наконец, клиенту можно показать версию разработанного нами дизайна, попутно обосновывая стилевые решения. На этом этапе мы обрабатываем любые замечания клиента, ведь наша работа на то и направлена, чтобы прийти к обоюдному решению. Когда стиль выбран, дизайнер рисует макет, опираясь на правила гайдлайнов и фирменную стилистику клиента. На выходе мы получаем удобный и красивый дизайн мобильного приложения. В этой статье, кстати, мы немного рассказали о этапах работы наших дизайнеров.
Интерактивный прототип интерфейса
«Прототип — это наглядная модель пользовательского интерфейса. В сущности это функционирующий „черновик“ интерфейса, созданный на основе ваших представлений о потребностях пользователей» (источник: Эд Салливан, «Время — деньги. Создание команды разработчиков программного обеспечения»).
Для более наглядной демонстрации работы приложения инвесторам и потенциальным пользователям можно заняться разработкой интерактивного прототипа. Хотя стоит отметить, что это не обязательный этап, так как мокап+user flow diagram вполне себе является прототипом, описывающим будущий продукт с точки зрения UX. Однако интерактивный прототип даст более полное представление и о возможностях приложения, и об объеме работ по их реализации.
Варианты прототипа зависят только от ваших временных ресурсов и от уровня желаемого качества. Это может быть тестовый стенд, на котором оператор вручную выполняет изменения состояния приложения в зависимости от выбора пользователя, или это может быть уже программная реализация, которую можно запустить на смартфоне или в браузере, прокликать все экраны, оценить логику работы продукта.
Задача процесса проектирования интерфейсов мобильных приложений — неотъемлемая часть прототипирования. В нашей компании дизайнеры изучают будущих пользователей, используя для этого разные методы: обсуждение вопроса с ближайшим окружением, разговор непосредственно с нашим клиентом, обсуждение с потенциальной аудиторией (вживую или на форумах) и интервью для выявления актуальности проблемы и поиска путей её решения пользователем.
Результатом такого изучения становится описание целевой аудитории и более ясное понимание того, какие трудности могут возникнуть при использовании сервиса, и как эти трудности преодолеть.
Утверждение результата
Вот он, последний этап работы над UI. Здесь всё очень просто: клиент оценивает результат, даёт комментарии и предложения, а мы при необходимости вносим правки.
К этому моменту у нас должно быть готово техническое задание, заключающее в себе всю информацию, с которой мы работали на этапе прототипирования и проектирования пользовательского интерфейса. Имея на руках готовый дизайн и ТЗ, мы приступаем к разработке приложения.
Вывод
Поэтапное создание графического интерфейса приложений и сложных систем экономит время, структурирует всю работу, уменьшает вероятность дополнительных денежных вложений. Думаю, из всего вышенаписанного уже понятно, что интерфейс в принципе необходим для удобного взаимодействия пользователя с приложением. Но что самое главное — это умение разработать интерфейс, в котором пользователь найдёт ключевые функции продукта за минимально необходимое для этого время.
Согласитесь, что эта задача не из лёгких, потому что и слишком сложный, и наоборот, непродуманный простой интерфейс могут здорово испортить всё впечатление от любого или мобильного приложения.
В «Психбольнице» Алана Купера говорится, что излишняя экономия на UI в дальнейшем выливается в трату на техподдержку, исправление ошибок, обучение новых сотрудников. Красивая обёртка в виде современного дизайна не есть человечный интерфейс; ключом к этой человечности служит проектирование под реального пользователя.
Проектирование интерфейса пользователя уменьшает время проектирования и упрощает взаимодействие пользователя с продуктом. Хорошо разработанный UI = благодарный пользователь = счастливый вы.