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

1. Human Mind and Usability
How your customers think

2. «99% времени ваши
пользователи проводят
на других сайтах»
Якоб Нильсен

3. • Внимание
• Визуальное восприятие
• Свойства памяти
• Чтение и понимание
• Решение проблем
• Социальная психология
• Чувства и дизайн

4. Насколько
мы внимательны?
Даны две команды: белая и черная
1. Выберите команду
2. Считайте внимательно количество пасов,
которые делает ваша команда
3. Разделите прямые пасы и пасы с отскоком
Видеоролик

5. Баннерная слепота

6. Теория внимания
• Ограниченная емкость памяти
• Фильтрация поступающих сигналов
• Выявление главного фактора
• Игнорирование второстепенных

7. Факторы,
влияющие на внимание
• Сложность задачи
• Мультизадачность

8. «Молодежь сейчас — это поколение
мультитаскеров: они могут
переписываться по емайлу, чатам,
параллельно разговаривая по
телефону и троллить в блогах»
USA Today

9. Табы используются
для составления порядка
***
Переключения
между задачами
снижают внимание

10. Как заполучить внимание
мультитаскеров?
• Используйте как можно меньше слов
• Используйте как можно более простой
язык
• Используйте картинки

11. Слова читаются целиком,
а не по буквам

12. Сложность отучаться от
уже выученной привычки
Назовите цвета, которые изображены
на следующих слайдах

13. Черный Оранжевый Красный Зеленый Синий

14. Синий Зеленый Оранжевый Черный Красный

15. Привычки пользователей
не сильно изменились за 15 лет
• Нуждаются в кнопке „Back“ в браузере
• Путаются с множеством открытых окон
• Закрывают самопоявляющиеся поп-апы
• Игнорируют рекламу
• Смотрят на элементы, которые выглядят
кликабельными
• Проводят очень мало времени на одном
вебсайте

16. • Внимание
• Визуальное восприятие
• Свойства памяти
• Чтение и понимание
• Решение проблем
• Социальная психология
• Чувства и дизайн

17. Критерии
• Могут ли пользователи видеть это?
• Могут ли пользователи запомнить это?
• Могут ли пользователи понять это?

18. Рекомендуемый
размер шрифта
• Обычная аудитория, тинейджеры
(10-12pt)
• Пенсионеры, люди с нарушением
зрения, дети, начинающие читатели
(12-14pt)

19. Масштабируемость шрифта

20. ИСПОЛЬЗОВАНИЕ
ВЕРХНЕГО РЕГИСТРА
ЗАТРУДНЯЕТ ЧТЕНИЕ

21. Использование цветов
• Красный, зеленый и синий чувствительны к
освещению
• Трихроматы: видят в целом нормально, но
различают около сотни оттенков
• Монохроматы: видят только
в чернобелом (очень редко)
• Дихроматы: сложности с различием красного
и зеленого (8% мужчин, 5% женщин)

23. Самые безопасные цвета —
черный и белый
***
Используйте цвета
для расставления акцентов,
а не повсеместно

24. • Внимание
• Визуальное восприятие
• Свойства памяти
• Чтение и понимание
• Решение проблем
• Социальная психология
• Чувства и дизайн

25. Модель запоминания
в долгосрочную память

26. Эхо
«Если у вас есть вопросы, звоните
свободно в любое время суток по
телефону 456-67-55-34. Хорошего дня!»
«Какой из тем вы больше всего
интересовались в последнее время:
здоровье, развлечения, политика или
образование?»

27. Магическое число 7
• Сколько должно быть буллетов
на слайде?
• Оптимальное количество опций в меню?
• Количество иконок?
• Количество табов?

28. «Люди помнят 7±2 куска информации»
George A. Miller
http://psychclassics.yorku.ca/Miller/

30. Где использовать
краткосрочную память?
• «Буфер обмена» во время работы над
задачей
• В поп-апах

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

32. Тест Беддли-Хитча:
Выполните два задания
одновременно
1. Верно ли утверждение: «А следует за B»
B A
2. Запомните ряд чисел
254269

33. Следствия
• Одна-две цифры во второй задаче не
влияют на качество выполнения первой
задачи
• Шесть цифр во второй задаче снижает
качество выполнения первого таска

34. Долгосрочная память
• Хранит большое количество
информации за бесконечный период
времени
• В основном семантическая

35. Иисус
Библия
Моисей
Ной
Животные
Зоопарк
Миссисипи
Потоп
Ферма

36. • Внимание
• Визуальное восприятие
• Свойства памяти
• Чтение и понимание
• Решение проблем
• Социальная психология
• Чувства и дизайн

38. Осторожно с семантическими
ассоциациями!
***
Заходя на сайт,
пользователи хотят выполнить задачу,
а не наслаждаться дизайном

39. Степень
принадлежности
Насколько типичен представитель для
категории "птицы"?
(1 — очень типичен, 7 — совсем не в кассу)
• синица: 1.1
• курица: 3.8

40. Рекомендуется использовать
типичные заголовки

41. «Вызов» против
«узнавания»
— О чем мы разговаривали с вами 3
минуты назад? (вызов)
— В чем заключалось задание Бэддли-
Хитча? (вызов с намеком)
— Задание Бэддли-Хитча исследует
способность человеческого мозга решать
несколько задач одновременно.
Да или нет? (узнавание)

43. Не переусердствуйте с узнаванием
(Человек может определять только лица знакомых ему людей)

44. Постоянство
в навигации сайта
• Использовать одни и те же правила в
навигации внутри сайта
• Имплементировать веб-стандарты
(помните, что на вашем сайте пользователи
проводят 1% времени нахождения в
интернете)
• Не располагать одних элементов
интерфейса, где пользователи привыкли
видеть другие

45. Cхемы и скрипты
(ментальные модели)

46. Порядок слов
важен для понимания
Капли расплавленного серебра
наполняли ночное небо
(абстракция + конкретика) время чтения 4.2 секунды
***
Ночное небо наполнено
каплями расплавленного серебра
(конкретика + конкретика) время чтения 3.5 секунд

47. Для создания
понятных текстов
• Начинать с ключевых слов
• Не бояться повторения слов
• Начинать предложения с уже данной
информацией, заканчивать с новой
информацией

48. Двухколоночная
верстка

49. Трехколоночная
верстка

50. Отвлечение пользователей
не помогает в помощи

52. • Внимание
• Визуальное восприятие
• Свойства памяти
• Чтение и понимание
• Решение проблем
• Социальная психология
• Чувства и дизайн

53. Процедурализация:
Люди решают задачи,
разбивая их на таски и подтаски
1. Цель: вождение
1.1. Таск: включить зажигание
1.2. Подтаск: вставить ключ
1.3. Подтаск: поставить ногу на педаль
тормоза
1.4. ...

54. Адаптивные меню разрушают
схемы процедурализации

55. Полезность =
Ожидаемая польза – Затраты

56. Задача улучшения UI:
снизить стоимость взаимодействия
• Упростить путь к цели
• Указать путь ясно
• Снизить объем чтения
• Снизить переключатели внимания
• Сделать нужную информацию легкой
для восприятия

57. «Несколько»
против «Много»
• Уравнивающая модель
(compensatory model) — разрешить
позитивным атрибутам компенсировать
негативные атрибуты
• Дискредитирующая модель
(noncompensatory model) —
отклонять опции с негативными
атрибутами, не смотря на наличие
позитивных атрибутов

58. Используйте уравнивающую модель,
когда есть несколько альтернатив
***
Используйте дискредитирующую
модель, когда есть много альтернатив

59. • Внимание
• Визуальное восприятие
• Свойства памяти
• Чтение и понимание
• Решение проблем
• Социальная психология
• Чувства и дизайн

60. Стоимость убеждения
Задача:
Студентам были выданы кружки стоимостью
$6 и сказано их продать другим студентам
— Первая группа студентов сказали
однокурсникам, что они были среди
выбранных в случайном порядке
— Вторая группа студентов убеждали, что
они получили кружки за заслуги в учебе

61. Результат:
Первая группа — $4.71
Вторая группа — $6.35
(Средняя стоимость продажи кружек)

62. • Внимание
• Визуальное восприятие
• Свойства памяти
• Чтение и понимание
• Решение проблем
• Социальная психология
• Чувства и дизайн

63. „Attractive things
work better“ Norman D. 2004
Emotional Design: Why we love or hate everyday things