Что такое UX/UI дизайн?

Ответить
Ответить
Комментировать
0
Подписаться
1
2 ответа
Поделиться

Будет не очень точный ответ.

Есть дизайн, веб-дизайн, юзабилити, UI и UX. Они связаны.

Дизайн это слово, которое в английском относится к конструкции, инженерной части, интерфейсу, внешнему виду и оформлению. В русском языке конструкция и инженерная часть обозначаются другими словами. Дизайн может быть у гигантского человекоподобного робота, канализационного люка, логотипа, постера, сайта. Относится ли внешний вид Вселенной к дизайну, пока ещё нет единого мнения, но я бы с наслаждением взял интервью у дизайнера. Соответственно:

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

Юзабилити — это в широком смысле устройство интерфейса, схемы навигации, локальной экосистемы с точки зрения удобства пользователя. Юзабилити-тестирование — это процесс тестирования *ИНТЕРФЕЙСА* — сайта, приложения, а вовсе не пользователя. Конкретные концепции юзабилити и способы тестирования я здесь не буду рассматривать. Это всё в точках исследования готового продукта и проектирования нового.

UI — User Interface. В отличие от интерфейса, который соединяет программный продукт или систему с чем-то ещё, и может быть схемой API, например, в данном случае это именно интерфейс пользователя. К которому мы сейчас вернёмся.

UX — это дизайн опыта использования с точки зрения взаимодействия. В этом и разница. UI и usability без UX это может быть адаптация дизайна с исправлением косяков. Подход UX→UI это конкретная последовательность разработки от потока пользовательского взаимодействия к интерфейсу. Сейчас поясню, и будут примеры. Восприятие работы пользователя с системой как потока взаимодействия проводит нас к формулировке типовых задач и возможных последовательностей действий, которые будут удобны и понятны пользователю в его терминах. Так, при переходе от командной строки к графическому интерфейсу GUI появились папки, чекбоксы, вкладки и манипулятор типа мышь/крыса. Мышь это аналоговое устройство, которое позволяет переносить объекты или курсор путём перемещения манипулятора в ту же сторону. На советских персональных компьютерах имела тактическое значение, оборудовалась четырьмя стальными шарами, делалась из листового чугуния толщиной в сантиметр, весила три тонны и называлась крыса. Вкладки заслужили обожание пользователей, потому что были интуитивно понятны в том числе и тем, кто не имеет дела в офисах с папками и блокнотами со вкладками. Папки и файлы тоже оказались удобными сущностями.

Довольно долго интерфейсы делались из соображений соответствия стереотипам или эстетике. Одним из идеологов нового подхода был Дитер Рамс, долгое время трудившийся на благо компании Braun. Он призывал делать красивые, эстетичные, чистые интерфейсы с акцентом прежде всего на удобство использования, на функционал. Один из его горячих последователей — Джони Айв. Подход UX предписывает нам учитывать чувства, которые вызывает интерфейс у пользователя, формулировать задачи, которые он обычно решает, и упрощать последовательность действий, одновременно усложняя переход к ошибочным действиям.

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

Поток юзерского взаимодействия. Выстроим взаимодействие с системой для решения задачи. Билет на электричку. Введите дату и время или выберите из расписания. Для этого зайдите на сайт, зарегистрируйтесь, активируйте код с телефона или емэйла, создайте пароль, залогиньтесь, введите дату. Если Вы ввели 30 февраля, расписание будет пустым. Затем выйдите на первый экран и введите другую дату и направление.

Юзабилити это искусство задавать неудобные вопросы. Зачем регистрация для просмотра расписания? Почему решение о регистрации нельзя отложить до момента заказа или вообще вывести из локуса внимания? Зачем два раза вводить пару населённых пунктов? Почему пункт отбытия не находится вверху списка и не заполняется по умолчанию?

Разработка от конструкции: вывод таблицы всех поездов плюс строка фильтрации, где можно набрать запросы типа даты или направления.

Разработка от UX: предзаполнен пункт отправления — где мы сейчас, дата — сегодня. Таблица подсвечивает поезда нужного направления с остановкой в пункте назначения начиная с текущего времени плюс 15 минут. Всё что раньше бледно. Под таблицей есть ссылка на расписание обратных поездов. При заказе билета выводится комбинированная форма, где можно ввести нужные данные либо залогиниться. Ну и так далее.

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

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

Конструктив: предупреждения У вас есть несохранённые документы!!!

UX: некоторые редакторы, включая саблайм, которые выводят запрос сохранения из числа необходимых действий. Редактор у себя сохраняет текущее состояние всех документов. Если Вы его закроете и потом снова откроете, в нём снова будут Ваши 5 несохранённых и 24 сохранённых документа, прокрученных к местам, где Вы их оставили.

Ну и так далее.

Иногда сложности не разрешаются, потому что это дорого и сложно. Например, сделать кран, который сразу включается с нужной температурой воды.

Поле смены пароля. Согласно современным требованиям, должно содержать явные указания на то, каким должен быть пароль, и индикатор его сложности. Неправильно: «Вы ввели неподходящий пароль». Неправильно: «Пароль слишком простой». Лучше: «Ошибка! Введённый пароль короче 8 символов». Норм: «Слишком простой пароль. Требуется больше 8 символов, содержащий минимум одну цифру, одну букву верхнего регистра, одну строчную букву, один знак препинания». По стандарту, все эти требования нужно писать ещё до того как пользователь начинает придумывать пароль.

Дизайн формы от Monkey-Boy, отсюда https://www.monkee-boy.com/blog/2013/05/freebie-friday-glassy-login-registration-forms/ :

Dieter Rams (brAun):

Всяк Сверчокотвечает на ваши вопросы в своейПрямой линии
2
0

Респект! Очень подробное описание!

0
Ответить
Прокомментировать

Этот ответ написан и доступен на

Этот ответ написан и доступен на Яндекс Кью

UX и UI дизайн не стоит смешивать.

UX Design часто воспринимается дословно - проектирование пользовательского опыта.

Дело в том, что опыт нельзя создать, спроектировать или разработать. Опыт можно только получить.

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

Таким средством является любая система, приложение, сайт.

У большинства из них есть интерфейс - то, посредством чего человек "обращается" к системе.

В России традиционно выделяют проектирование интерфейсов (то, что должно в нем быть, как он должен работать) - это UX дизайн.

И выделают визуальное оформление интерфейса (цветовые палитры, фирменный стиль, оформление элементов и композиция) - это UI дизайн или Visual дизайн.

Подробно раскрываю эти темы в канале: https://t.me/poyasnizaux

0
0
Прокомментировать
Ответить
Читайте также на Яндекс.Кью
Читайте также на Яндекс.Кью