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

2. Ментальные модели
• Ментальная (концептуальная) модель —
представление об объекте или явлении,
сформированное в сознании человека;
• Не бывает двух одинаковых ментальных
моделей, хотя бывают похожие;
• Полнота и точность ментальной модели
определяют способность человека
взаимодействовать с объектом.

3. • Любое обучение или освоение новых
областей знаний — это формирование
ментальных моделей;
• Ребенок, играя, строит ментальные
модели объектов окружающего мира;
• Некоторые объекты настолько сложны,
что один человек не может изучить его
целиком.
Например, один врач не может изучить
все части организма, поэтому у врачей
есть множество специализаций.
Разделение труда (и знаний) возникает
во многих других областях. В IT есть
программисты, есть проектировщики,
есть дизайнеры.
Построение ментальных моделей

4. Ментальная модель — пример
Держать здесь
Продукты класть сюда
Этой стороной на огонь
Базовые знания об объекте, его назначении и
возможностях формируются быстро. Они позволяют начать
применять объект по назначению, но не гарантируют
полностью корректного и эффективного применения.

5. Ментальная модель — пример
Осторожно! Долго остается горячим!
Антипригарное покрытие.
Масла много не надо
Ручка пластиковая.
В духовку ставить нельзя
По мере накопления опыта знания об объекте
расширяются. Ментальная модель уточняется и
дополняется новыми деталями, что позволяет
взаимодействовать с объектом быстрее, эффективнее,
безопаснее.

6. • Интерфейс становится интуитивно
понятным в силу ранее полученного
опыта. Изучение не требуется или
сводится к минимуму;
• Интуитивно понятный интерфейс —
для него в голове у человека есть
готовая ментальная модель;
• По мере получения опыта все
больше интерфейсов становятся
интуитивно понятными;
• Отступление от общепринятой
практики — отказ от
«интуитивности».
Интуитивно понятный интерфейс

7. • Чем более технически
сложным является объект,
тем меньше вероятность
того, что человек обладает
«интуитивными» знаниями
о нем и его интерфейсе;
• Даже небольшой объем
информации в сочетании с
предыдущим опытом
позволяет начать работать
с объектом.
Дополнительные знания
повысят корректность и
эффективность работы.
Нет модели — не понятно, что делать
При отсутствии ментальной модели (знаний об объекте) человек
не сможет корректно пользоваться предметом или интерфейсом.

8. Создатели продукта заинтересованы в том, чтобы
пользователь:
• Быстро освоил продукт;
• Использовал продукт без ошибок и без опасности
для результатов труда;
• Работал с продуктом эффективно.
Чем полнее и качественнее ментальная модель, тем
точнее выполняются эти условия.
Почему важна ментальная модель?

9. • На обучение работе с некоторыми
интерфейсами у пользователя есть всего
несколько секунд;
• Чем скорее пользователь освоит продукт,
тем скорее он сможет приступить к работе;
• Это особенно важно для сервисов, работе с
которыми пользователь не обучается
специально (поисковые системы,
платежные терминалы, паркоматы и так
далее);
• Чем полнее продукт использует
предыдущий опыт пользователя (ранее
построенные ментальные модели), тем
проще он в освоении.
Ускоряем формирование ментальной модели

10. • Информационная модель — совокупность
сведений о параметрах объекта, его
возможных состояниях, входных и выходных
данных и взаимодействии с окружающей
средой (общенаучное определение);
• Применительно к программным продуктам —
набор объектов, над которыми выполняются
действия, и набор доступных пользователям
действий (функций).
Информационные модели

11. • Для каждого сервиса или сайта
может быть подготовлена
информационная модель;
• В идеале она строится до начала
разработки 
• Упрощенный пример:
Информационная модель — пример
www.zootovar-spb.ru

12. Документированная информационная модель:
• Позволяет упорядочить процесс
проектирования и разработки;
• Помогает сгруппировать информационные
объекты и функции, делают продукт более
«прозрачным» для разработчиков и для
пользователей;
• Служит удобным исходным материалом для
проектирования интерфейса.
Зачем нам информационная модель?

13. Интерфейс (UI) — связующее звену между
информационной моделью, построенной
разработчиками и ментальной моделью, которая
формируется в голове пользователя.
Человеко-машинный интерфейс

14. • Информационная модель должна быть релевантной
задачам пользователя (программные классы и методы
интересны пользователям в рамках редких задач);
• Интерфейс должен максимально использовать
имеющийся у пользователя опыт, уже сформированные
им ментальные модели.
20 лет назад программисты создавали интерфейсы, опираясь
на внутреннюю модель устройства программы, которая не
всегда отражала задачу, решаемую пользователем.
А пользователи не имели опыта работы с компьютером.
Как создать понятный интерфейс?

15. • Подготовьте каналы получения информации о работе с
продуктом;
• Учитывайте время, которым располагает пользователь.
Помогите человеку изучить ваш продукт

16. • Используйте привычную пользователям терминологию,
подходящую к решаемой задаче;
• Объясняйте так, чтобы понял самый неопытный. Люди с
опытам простят вам многословие, а неопытные скажут
спасибо и смогут использовать ваш продукт (значит,
заплатят за него деньги ;)).
Говорите на языке пользователя

17. • Дональд Норман, «Дизайн привычных вещей»;
• Стивен Круг, «Не заставляйте меня думать!»;
• Дональд Норман, курс «Intro to the Design of
Everyday Things», Udacity.
Что стоит прочесть?

18. Спасибо за внимание ;)
Юрий Солоницын
www.facebook.com/yury.solonitsyn

19. В презентации использованы изображения, полученные из следующих
источников:
• http://pixgood.com/happy-child-playing-with-toys.html
• http://www.silitcookware.com/html/fry_pans_yellow.html
• http://www.aamautomatic.ru/production/pay/home/
• TASCAM Portastudio 246, Owner’s manual.
Изображения