В чем суть проектирования интерфейсов и отличие UI, UX, схем, карт, диаграмм перехода?

Когда клиенты говорят об интерфейсах, используя не к месту популярные слова UI, UX, юзабилити, это звучит привычно, понятно. Не дело клиента разбираться во всех тонкостях проектирования интерфейсов. Его дело понимать, что он хочет. Им-хо, этого более чем достаточно!

Сложнее, когда слова UI, UX, юзабилити-опыт, сценарии взаимодействия с интерфейсом используют профи и ожидают получить конкретный результат от проектировщика интерфейсов.

Сделала подборку материалов, которые расставляют понятия по своим местам. Надеюсь, мы будем лучше понимать друг друга в нашей работе :)

UI Design, UX Design

Вообще, пользовательский интерфейс (UI) — это все то, что позволяет рядовому пользователю управлять неким устройством или системой. Мышь, клавиатура, пульт от телевизора, экран айфона или руль автомобиля — все это пользовательские интерфейсы, UI. А на экранах мы видим GUI — graphic user inteface.
При это User eXperience (UX) - это опыт взаимодействия, характеризует личное восприятие человеком функциональных и эмоциональных характеристик продукта или услуги в процессе использования. Ключевое слово при этом - процесс.
Любой интерфейс может быть оценен с позиции usability - т.е. полезности и степени удобности интерфейса пользователями в процессе использования при достижении определённых целей. Т.е. интерфейс может быть удобным, а может стать еще удобнее, но при этом быть полезным (т.е. позволять достигать определенных целей). Традиционно считается более удобным тот интерфейс, который позволяет пользователю получить желаемое самым быстрым путем и с наименьшим числом ошибок.

По-сути UI показывает, где и что расположено, чтобы достичь желаемое, а UX отвечает на вопрос: можно ли сделать интерфейс более юзабильным?

Очень классно о разнице UI и UX здесь:

http://habrahabr.ru/post/190840/

Структурные схемы страниц (wireframes)

Структурные схемы страниц (wireframes) в деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системы. А также расставляют акценты — какие из элементов страницы более, а какие — менее важны. Wireframes также описывают поведение динамических элементов страниц.
http://www.uimodeling.ru/process/docs/wireframes.html

Карта и схема навигации

Карта сайта — это структура системы. На ней в виде дерева показаны все разделы, подразделы и страницы системы. Такая карта позволяет выстроить удобную информационную архитектуру продукта.
http://www.uimodeling.ru/process/docs/site-map.html

Диаграммы перехода между страницами

Диаграммы переходов между страницами — это схемы работы пользователя с функциональностью системы. Такая диаграмма показывает, как пользователь выполняет одну из своих задач, переходя от страницы к странице. 
http://www.uimodeling.ru/process/docs/flow-diagrams.html

US и UC

User stories говорят о том, что нужно сделать, а сценарии взаимодействия — как это работает.
US: Я как пользователь хочу <что хочу>, чтобы <для чего мне это нужно>

UC:
http://www.uimodeling.ru/process/docs/use-cases.html

И, на всякий, ссылка на Таблицу пользовательских ролей, которая не совсем US, но почему-то приводится на странице US и с названием "Перечень функций":
http://www.uimodeling.ru/process/docs/user-stories.html


Хороший материал по проектированию страниц с учетом психофизиологии
http://facte.ru/man/41194.html