UI (user interface) - пользовательский интерфейс. Это определённые элементы сайта (т.е. оформленные графически и органично вписанные в дизайн), позволяющие пользователю взаимодействовать с этим самым сайтом. Кнопочки, поля ввода и т.п. Есть несколько правил UI дизайна:
- Организованность элементов интерфейса. Это означает, что они должны быть логически структурированы и взаимосвязаны.
- Группировка элементов интерфейса. Подразумевает объединение в группы логически связанных элементов (меню, формы).
- Выравнивание элементов интерфейса. Сложно представить, что плохо выровненный интерфейс может быть для кого-то удобным!
- Единый стиль элементов интерфейса. Стилевое оформление играет не последнюю роль, ведь именно оно сохраняется в памяти пользователя.
- Наличие свободного пространства. Это позволяет разграничивать информационные блоки, сосредотачивая внимание на чем-то одном.
UI повышает юзабилити, притом являясь чисто техническим решением.
UX (user experience) - опыт взаимодействия. Если сравнивать с UI, UX - более обширное понятие, включающее в себя комплексное отношение пользователя к используемой им системе в целом - информационной среде, её иерархии и навигации, юзабилити, непосредственно дизайну и пр. Помимо собственно дизайна, то есть инженерного и графического решения, здесь применяются методы из психологии, социологии, маркетинга и т.д.
В качестве не совсем корректного примера приведу такой: даже если меню сайта организовано строго и логично, позволяет сделать вообще всё, что может понадобиться пользователю (т.е. UI на уровне), но при этом оно избыточно и занимает слишком много места на экране смартфона - а бОльшая часть пользователей этого сайта заходит на него со смартфонов - значит, с точки зрения UX сайт сделан не лучшим образом. Возможно, какие-то вещи следует упростить, а какие-то элементы переструктурировать, расположить в том порядке, в котором пользователь применяет их во время исполнения неких стандартных процедур.
Если UI пляшет от функциональности, UX пляшет от конечной цели всей системы в целом.
Дж. Гарретт предложит модель, описывающую проектирование web-приложений с точки зрения опыта взаимодействия.
Основные вопросы, решаемые UX дизайном:
- Постановка целей и задач – чего в итоге нам необходимо достичь?
- Подбор подходящих UX инструментов для реализации целей
- Разработка продукта, максимально удобного и легкого в восприятии целевой аудиторией
- Анализ конечного результата – соответствует ли продукт ожиданиям заказчика и насколько высок уровень удовлетворенности пользователей.
Отсюда вывод. Сперва запускается UX-дизайн. Формируются цели и задачи продукта (сайта, информационной системы), анализируется аудитория, прорабатываются варианты взаимодействия, которые максимально удовлетворили бы пользователя и соответствовали задачам. На основе этого делаются выводы о требованиях к функциональности, наличию той или иной информации (IA - Information Architecture - то, как информация структурирована с точки зрения пользователя, определяет размещение элементов на странице и связь между страницами сайта), и, опираясь на них, разрабатывается UI.