BMSTU/01-information-systems-interfaces-protocols.org

Алфимцев Александр Николаевич
Протоколы и интерфейсы информационных систем
* оргвопросы
фактически юзабилити человекомашинного взаимодействия, не ГУИ.
1 пользовательские интерфейсы
2 цифровая обработка изображения
3 искусственный интеллект
1-2 расширенная реальность
1-3 интеллектуальные интерфейсы
2-3 распознавание образов
центр интеллектуальные мультимодальные интерфейсы.

** расписание 
14,2809, 12,2610, 9,2311, 7,2112
рубежный контроль через 2 месяца. экзамен
нужно сделать ЛР
** компетенции
- обзор литературы, анализ исторических событий,важно  понимать своё место в технологическом развитии
- визионерские качества
** литература 
алан купер основы проектирования взаимодействия
* Введение: решаемые курсом вопросы
1. эволюция интерфейсов 
2. основные понятия человеко-машинного взаимодействия
3. инструменты проектирования
4. обучение с подкреплением животных и машин
5. ориентация на пользователя
** эволюция
количество инструментов растёт, но правила и требования обратной совместимости заставляют их оставлять. например компьютерная мышь 1963 придумал тот же человек, который придумал WYSIWYG, GUI Xerox Alto, систему передачи гипертекста. первый браузер 1990. понятие смартфон в 2000, айфон 2007. эволюция - это целенаправленное и необратимое развитие пользовательского интерфейса. юзабилити != дизайн. интерфейс - это линия раздела - совокупность средств и методов взаимодействия между элементами системы. геймификация.

теория решения изобретательских задач. 

** основные понятия человеко-машинного взаимодействия
доступность, 
условия использования, 
результативность, 
эффективность.
эргономика,
человеко-ориентированное проектирование,
интерактивная система.
образец
удовлетворённость
удобство использования
опыт взаимодействия
валилдация
верификация
*** типы пользовательских интерфейсов
веб-интерфейс
графический интерфейс пользователя
голосовой интерфейс
диалогово-агентный интерфейс
естественно-языковой интерфейс
жестовый интерфейс
задача-ориентированный интерфейс
звуковой интерфейс
интерфейс контролирующий внимание
инклюзивный интерфейс
командная строка
кроссовый интерфейс
масштабируемый интерфейс
мультиэкранный интерфейс
нулевой вход
объектно-ориентированный интерфейс
осязательный интерфейс
пакетный интерфейс
проблемно-ориентированный интерфейс
рефлексивный интерфейс
тактильный интерфейс
текстовый интерфейс
интеллектуальный интерфейс
*** общее
термин юзабилити критикуют потому что много не технических вещей.
** инструменты
функциональная стереотипность
аналогичные решения
фиксация решения
невозвратные затраты
** обучение с подкреплением животных и машин
многое изучено на основе поведения животных (примерно с Павлова, крысы, собакти обезьяны). 
пропадание свободы воли при создании правильных условий.
агент взаимодействует со средой, среда возвращает агенту награду и следующее состояние
** ориентация на пользователя
* Когнетика и эргономика
человеко-машинное взаимодействие. все проблемы - человек.
когнитивное сознательное и к-бессознательное. 1 - локус внимания. переход из сознательного в бессознательное можно замерить, например, какая последняя буква вашего имени? даже не имея в сознании этой информации можно идентифицировать своё имя.
к-с всегда включается чем-то новым, нестандартным, опасностью.
к-б возникает когда действия автоматизируются. задача разработки пользовательского интерфейса - вывести пользовательский интерфейс из поля зрения пользователя

ритмы мозга
бета-ритм мозга все когнитивные процессы (фокусирование внимания).
сон - дельта
просыпаемся тета
расслаблены альфа

деятельность мозга основана на нейронах и регулируется нейромедиаторами. нейронов много, а дофаминовых путей мало. дофаминовые реакции происходят от внешних позитивных стимулов, но главное не переборщить поскольку так формируется цифровой аутизм. 

есть исследование связывающее юзабилити и красоту, наша задача заставить пользователя пройти нашим маршрутом.

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

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

возрастные различия - например, после 30 мужчин сложно сдвинуть и на них сложно воздействовать

расположение информации - первое это верхний левый угол, затем центр, потом верх-центр. нужно таким образом формировать локус внимания. ЛВ - это место, где сосредотачивается внимание пользователя. внимание нельзя распылить. если мы делаем что то многозадачно - это не эффективно и часто имитация параллельности. ЛВ должен быть перевед§н в автоматизм, привычку. ЛВ нужно формироватьу пользователя чтобы привязать к продкукту, например, статусбар копирования или другие анимации долгих процессов. идеальный интерфейс формирует полезные привычки

но есть цена, например, подтверждения действий

Тест Люшера
* Квантификация интерфейсов
При разработке интерфейсов или ПО есть некоторый условный классический подход: задача, требования, дизайн, и получаем оптимальный интерфейс после опроса пользователей. Строгое математическое обоснование сложно найти, обычно в разработке ПО подходы эвристические. 
Квантификация - это сведение качественных характеристик к оличественным, чтобы можно было измерить и получить некоторое число. 

Количественный анализ осуществляется по модели GOMS (goals, objects, methods, selection rules) - целей-действий-порядка-правил. Есть много разновидностей моделей GOMS. Зависят от разных характеристик пользователя и использования. (читать хабр гомс). модели гомс оценивают время которое потребуется пользователю для выполнения задачи в рамках интерфейса. разделяет задачу на этапы:
- нажатие клавиши
- указание - время которое необходимо пользователю чтобы пользователь указал на нужную позицию
- перемещение
- действие
- ответ компьютера.
задача: описать интерфейс (фотка слайда)
решения:
1. опшн на С-Ф и Ф-С, два поля ввода между ними стрелка, 7.15сек.
2. шкалы слева и справа С и Ф, если установлены верно, 3,25сек. вариант когда шкалы нужно прокрутить 16,8сек.
3. просто два поля направим пользователя на клавишу ентер. 3.7с
4. одно поле ввода, два поля с результатом. 2,15с. но одно поле будет содержать ошибку, так мы переложили много работы на пользователя.
абстрактно, насколько должен быть быстрым интерфейс? информационно-теоретическая и информационная производительность. некоторые методы могут иметь одинаковую информационную производительность, но совсем разное фактическое время, человекоориентированность и юзабельность. 

Закон Фитса и закон Хита.
закон Фитса: чем дальше объект от курсора и чем меньше объект, тем больше потребуется пользователю времени, чтобы попасть в объект. Закон Хика говорит о том, что чем больше вариантов, тем дольше. По этим законам осуществляется оценка сложности интерфейса. Метрики QUIM.

Применение методов машинного обучения. 
составили критерии оценки по пользовательским опросникам, поняли можно ли в интерфейсе решить больше количество задач, гибко ли, всё ли загружается, активность, обратная связь, итд. Получив оценки по всем фактоам их объединяют дают на вход многослойного персептрона и получают распределение по правилу Парето 20/80. где 20 процентов интерфейса выполняют 80 процентов функциональности. 

* Унификация интерфейсов
Если сделать устройства одинаковыми - пользователю будет легче ими пользоваться. Если избавиться от известных человекомашинных элементов (модлаьных ошибок) интерфейсы станут одинаковыми. унификация - это приведение к единообразию. в рф понимается приведение документации, технических характеристик. в рф принимается базовый агрегат, разнообразие достигается присоединением частей, компаундирование, модифицирование (изменение дорогих частей, обновление), принцип модульности - собираем из частей, как конструктор. унификация - это разновидность систематизации.

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

Основывается трёх понятиях: на согласованности(consistency), видимости и состоятельности. эти факторы должны приводить к удовлетворению пользователей и соответственно лояльности. 

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

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

режимы - часто применяемая при создании интерфейса механика. интерфейс может находиться в нескольких состояниях, от этого может меняться режим использования. много исследований связано не только со внешним видом, но и с подписями для переключения режимов. опыт пользователя не избавляет от ошибок порождаемых режимами. режим - плохой индикатор состояния, он приводит к необычному для системы поведению. предотвратить можно: 1 не использвать режимы, 2 обеспечить чёткое различие, 3 не использовать одинаковые команды в разных режимах. режимы присущи и джойстикам управления (непонятно, летит вертолёт вверх по нажатию вверх как мы думаем, или вниз как думаю пилоты). постепенно в режимы внедряют адаптивность (перемещение часто используемых функций в начало меню, например). применяют опыт "лягушка в кипятке".

модель "глагол-существительное" и "существительное-глагол". как применять команды (действия к объекту), например мы в редакторе у абзаца меняем шрифт, это сущ-глаг. если в пеинте сначала выбрать краску, а потом инструмент - это глаг-сущ. выглядит одинаково, но является разными с точки зрения юзабилити. лучшие показатели и безопасность показывает сущ-глаг. глаг-сущ приводит к модальным ошибкам, то есть к режимизации интерфейса. ГС проигрывает и в скорости, не нужно переключать внимание пользователя. при использовании глаг-сущ должна быть предусмотрена возможность отмены команды.

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

читать джефф раскин (интерфейсы)

* Шаблоны в пользовательских интерфейсах
шаблон должен описывать общие знания о том как человеку работать с искусственно созданным артефактом. технологии меняются, постоянно появляются новые принципы. Шаблоны тесно связаны с когнетикой.

первые шаблоны появились в архитектуре.
** поведенческие
   1. обратимые изменения (наиболее гуманитарный) связан со страхами пользователя - есть возможность вернуть систему в предыдущее состояние.
   2. быстрое достижение цели люди не любят ждать это заложено в природе. нацелен на получение успешного опыта в первые 2-3 секунды
   3. рациональное исследование - разумная достаточность. пользователи предпочитают достаточно хорошее, а не лучшее. don't make me think
   4. неформатированный ввод
   5. структурированный ввод
** представления информации
   1. поиск, контент, категории
   2. стек - отображение связанной со временем информации в обратном порядке (что-кто-когда-где)
   3. разнообразный поток, редакторский микс (новости, интервью, ссылки, мнение, письма, аудио, итд)
   4. вертикальный макет (полезное содержимое - первые 100 пикселей) прокрутка предпочтительнее долгой загрузки
   5. редактор настроек (часто используется для просмотра, а не редактирования настроек) важен случайный доступ к информации и деление на категории
** шаблоны взаимосвязи
   связаны с дизайном, навигационной моделью, позволяет более чётко подойти к дизайну.
   1. ограниченный вход
   2. мастер (назад, вперед, разделы, включение, обнаружение)
   3. пирамида - уменьшает количество переходов по приложению + явно отображает логическую связь (назад вперёд вверх)
   4. модальное окно - несёт деструктивный характер, не используется для малозначительных данных.
** визуальной иерархии
   - первичными являются целостные структуры. Гештальт принципы:
     1. сходство
     2. близость
     3. регулярность
     4. замкнутость
     5. непрерывность
   - базовый макет используется когда есть много окон, лучше сделать их в едином стиле но главное окно можно выделить особо
   - базовая сетка содержимое размещается в матрице. аккуратно, рационально. элементы сетки можно подсвечивать или давать ссылки
   - аккордеон: множество панелей инструментов, позволяет упорядочить длинные списки
   - группировка (клика) кнопок лучше не использовать больше пяти кнопок. объединяется по схожей функциональности WYSIWYG.
** сложных категорий
   деревья или графы? деревья лучше для новичков, а графы для продвинутых.
   1. двухпанельность - уменьшает визуальную нагрузку, физические усилия, время загрузки. не используется на маленьких устройствах
   2. общая картина - общее представление показывается рядом с детальным. большой набор надо видеть одновременно с детализацией
   3. атрибутивная фильтрация часто применяется к результатам поиска и фильтрации
   4. круговая визуализация упрощает визуализацию отношений особенно длинных таблиц.
   5. горизонтальная панель удобно визуализирует действия, размещается обычно снизу или сбоку
   6. история изменений показывать постоянно не обязательно, но помогает повторять действие, вспомнить порядок
   7. совокупность включений (макросы).
** шаблоны действий и контекстов
   антишаблоны: перемещение, размещение инструментов, внешний вид инструментов.
   
* Маркетинг человекомашинного взаимодействия, конверсия.
конверсия - это отношние посетителей, выполнивших целевое действие к общему количеству посетителей сайта. для увеличения
1. понять для кого интерфейс предназначен;
2. формирование у пользователя чувства доверия;
3. использование стадий покупки;
4. преодолеть страх пользователя;
5. ощущение вовлечённости;
6. протестировать;
7. запустить снова.

** процесс конверсии
   минимизировать рекламу, сделка - это одновременно и покупка и продажи. считается, что первопроходец волмарт. конверсия в интернете всегда быстрая, скорость прихода компенсируется скоростью ухода. процесс конверсии начинается с определения количественных показателей. Если лендинг спроектирован плохо - пользователи не терпят а уходят уже через 5 секунд.
** коэффициент конверсии
   всё зависит от того, чем мы занимаемся, не всегда конверсия это продажи. сложно сопоставить онлайн и офлайн.
** макро и микроконверсия
   макро это общая финальная, а микро к небольшим шагам, этапам макро. любая конверсия начинается с постановки цели. конверсию обычно связывают с KPI.
** бюджетирование
   бюджет это схема доходов и расходов организации на определённый период. 
** показатели выходов/отказов
   монетизация - это процесс конвертации чего-либо в законное платёжное средство
** среднее время и качество трафика
   всегда предпочитаются прямые посетители, из-за лояльности
** создание персон
   понимание ЦА помогает убеждать к конверсии. главное качество инноватора - эмпатия. для качественной конверсии нужно создать аппроксимацию своего пользователя. влияет сочетание факторов - гео, демо, психографические, поведенческие. есть и отрицательные моменты - ошибки аппроксимации, слишком много информации.

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

диаграмма инглхарта

интеллектуальный мультимодальный интерфейс - множественный ввод включая человеческую составляющую
* Принципы визуализации данных с помощью диаграмм
  от того, как выглядит презентация человека - делается вывод о его компетенциях. диаграмма это графическое представление данных отрезками или геометрическими фигурами для быстрого сравнения некоторых параметров. быстрее воспринять, лучше запомнить, увеличение вовлечённости, привлекает бОльшую аудиторию. бывают линейные, круговые, линейчатые, стопчатые, точечная, пузырьковая, лепестковая (wheel), диапазона (свечки). 
  правила
    если есть динамика - график, если структура и сравнение долей - круговая, линейчатая. важно использовать правильный тип и формат графика. Если в круговой диаграмме больше 3-5 долей - используем линейчатую. если сумма долей не 100% в круговой - это грубая ошибка.
    если время расположить сверху вниз человек не сможет воспринять эту информацию. неудачный тип и формат снижает доверие к информации.
    данные надо выстраивать логично, от большего к меньшему, от да через затрудняюсь ответить до нет, важен фокус на цели.
    дизайн должен быть минималистичный.
    дизайн должен быть единообразный и должен быть в цветах фирмы.
    должно быть удобно сравнивать данные (2 и более показателей). если разбить на много отдельных графиков - сравнение невозможно
    на диаграмме не должно быть неинформативных элементов (сетка, дублирование значений, и другой мусор).
    необходимо следить за отсутствием визуальной загромождённости, чтобы не было многоярусных диаграмм. целесообразно разделить
    числа должны быть с разделителями разрядов и не должно быть знаков после запятой.
    у диаграммы должны быть название и легенда, иначе появляется риск неверного истолкования. надо ставить себя на место человека, который видит диаграмму впервые.
    использование правильных цветов.
    использовать один вид диаграммы для однотипных данных. 
  примеры
    диаграммы можно и нужно преобразовать от одного типа к другому.
  приёмы
    выделение цветом:
      ответы да-нет (зел-кр)
      минимум-максимум согласно логики (зел-кр)
      мужчины-женщины (гол-роз)
      неважное (серым)
      прогноз (прогнозные серые или полупрозрачные)
      год (текущий ярко прошлый бледно)
      фирменный стиль, бренд
    визуальная составляющая
      пространство (желательно занимать всё)
      среднее (в часто меняющемся графике иногда хорошо показать аппроксимацию)
      одна подпись
      дополнительная ось
      логика + здравый смысл
      экз 12-13 янв 426ю