Интенсив в Британке по UX/UI. День 1

[vadimgoncharov]

Интенсив начался с того, что куратор курса Ярослав Шуваев рассказал нам о том, как правильно слушать курс. Нужно быть максимально открытыми и давить в себе скептицизм, чтобы не блокировать, но впитывать сочный поток мыслей от разных лекторов. На мой взгляд, это очень хорошая позиция. Даже если не согласен с каким-то мнением, лучше, как позднее сказал второй куратор курса Никита Обухов, дать этому мнению шанс. В любом случае, мы ничего не теряем, а только приобретаем.

Психофизиология
Ярослав начал курс с рассказа про психофизиологию. Эта дисциплина рассматривает поведение человека, опираясь на физиологию мозга (к примеру, рассматривается как работает память или внимание).

Магическое число 7+-2

• С точки зрения работы памяти человеку удобнее всего держать в голове 7+-2 объекта. Если объектов становится больше 9, то человеку будет некомфортно, и он будет всячески стараться избегать такого запоминания.
• Для запоминания более 9 объектов применяются специальные схемы запоминания (какие?).
• Если объектов очень много их группируют так, чтобы групп опять же было 7+-2. В группах можно также группировать объекты.
• В ходе обсуждения возникла интересная беседа по поводу форм. Допустим, есть форма из 3-х полей и форма из 20 полей. В формах пользователь заполняет информацию о себе, чтобы компания приняла какое-то решение на основе этих данных. Какую форму выбрать? Логичнее ту, в которой меньше полей, так как пользователю придется меньше информации удерживать в уме, да и заполнять меньше. Но в то же время пользователь даст компании слишком мало информации, и сотрудникам придется тратить больше времени на то, чтобы созвониться с человеком и выяснить остальную информацию. А это затратно. Поэтому иногда проще сделать форму из большего количества полей, когда у компании не так много времени и денег на обработку данных.

Геометрическая память

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

Группировка

• Человек умеет объединять рядом располагающиеся объекты в группы. Это умения есть у него с рождения.
• Слабая группировка напрягает пользователя, потому что ему сложно отделить одни объекты от других. Например, колонки могут быть слишком прижаты друг к другу. Или заголовок следующего абзаца может прилипать к предыдущему. Или подписи к иконкам имеют слишком большое расстояние от самих иконок и прилипают к иконкам, стоящим ниже.

Контраст

• Если у нас имеются объекты простой формы (круги) и среди них есть один объект сложной формы (звезда), то этот объект сложной формы сразу же привлечет к себе внимание.
• Но если у нас будет много объектов сложной формы, то внимание пользователя может рассеяться. Именно поэтому очень хорошим решением может являться отсечение всех лишних сложных объектов с оставлением только одного или двух главных сложных. Пример: сайт Эппла с рекламой Айпада, где на белом фоне показана картинка Айпада (сложный объект) и текст о том, что это за продукт (второй и последний сложный объект).
• Обратный контраст не работает: простая форма в куче сложных форм сразу же затеряется.
• Есть такое понятие "баннерная слепота". Пользователь автоматически отсекает контент, который ему не нужен. Это как люди, которые живут рядом с красивым водопадом, они скоро начнут его не замечать.
• Если нужно выделить какой-то объект, можно заблюрить все остальные.

Лицо

• Человек всегда является самым важным в композиции. Если показано лицо человека, то мозг сразу же начнет изучать форму этого лица. Это одна из форм привлечения внимания.
• Человек следит не только за лицом, но и за взглядом. Куда смотрит персонаж, туда же и будет смотреть пользователь.

Контраст цвета

• Всегда привлекает внимание, когда один цвет сильно отличается от другого.
• Есть группа людей, которые не воспринимают определенную группу цветов, так что этот пример может не сработать на них. К примеру, если человек плохо воспринимает красный, а все ссылки красные, то пользователю будет тяжело отличить обычный текст от ссылки.
• Можно применять и обратный контраст цвета: блеклый цвет всегда будет резко выделяться на фоне ярких, но психологически это некомофртно.

Контраст размера

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

Анимация

• Важно использовать микроанимации.
• Анимация может объяснять.
• Анимация должна быть к месту.
• Анимация также показывает, что приложение живо. Человек может тупить и не понимать интерактивный ли интерфейс перед ним или нет.
• Рывки воспринимаются, как плохо проработанный продукт. Если все плавно, то возникает ощущение комфорта и крутости приложения.

Чтение

• Это поздний навык, который не работает бессознательно, как реакция на свет.
• Положительная динамика слева направо.

Изображения и текст

• Сначала картинки
• Мозг всегда идет по самому ленивому пути
• Если контент картинки нерелевантен, то картинка мозгом пропускается.
• Картинка экономит место относительно текста.
• Картинка контекстно-зависима.
• Целевое действие может спокойно выполняться на основании одной картинки (к примеру, репост на основе картинки).

Иконки

• Шестеренка и облако для некоторых людей может быть непонятна.

Читаемость

• Контраст фона. Фон не должен сливаться с текстом и наоборот, так как требуются усилия мозга для того, чтобы отделить один цвет от другого.
• Длинную строку тяжело читать. Приходится напрягать геометрическую память.
• С плохим интерлиньяжем можно легко ошибиться и запутываться в строках.
• Важно группировать на параграфы, так как человек прыгает по параграфам во время чтения.
• Для статей должен использоваться принцип обратной пирамиды.

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

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

Так как у заказчика может быть большой жизненный опыт, его комментарии по проекту могут оказаться очень хорошими и дельными.

Еще Никита говорил о том, что очень важно говорить "да" чужим идеям, кажущимися плохими. Очень часто эти идеи в итоге могут оказаться очень даже хорошими.

Дизайн-исследования
I. Первичное
1. Этнография:

• Наблюдение за людьми (идем в банк и наблюдаем за людьми, как они берут кредиты).
• Self-reflection (анализ собственного опыта).
• Shadowing (следование за другим человеком и фиксирование его действий).

2. Качественные исследования (открытые вопросы) и количественные исследования (закрытые вопросы да/нет).
3. Проще когда двое ведут интервью. Один говорит, другой записывает.

II. Second research
1. Чужой опыт

• Скриншоты сайтов.
• Смотрим какие блоки чаще встречаются

2. Narrative board (lifestyle research)

• Это набор картинок, которые рассказывают о мире заказчика. К примеру, если мы рассказываем о загородной недвижимости, то мы покажем картинки людей, у которых есть загородные дома, как им круто и хорошо, как они клево проводят время и так далее.
• Нарративборд выделяет ключевые визуальные образы для зрителя.

3. Style board
Это набор картинок для задания настроения. Берутся картинки уже готового чужого дизайна.

Расширенный бриф
Заполняется после глубинного интервью

Основные топики брифа
1. Research conclusion

• Написание вывода по каждому этапу исследования
• Отчетом может быть статья на тему. Пример f-i.com/fi/airlines

2. Stickers Session

• С помощью point of view задачи конкретезируются

Дальше опять продолжил Ярослав.

Основные элементы пользовательского интерфейса

• Xerox -- mac os 1 -- появился скевоморфизм (папка, корзина).
• Постепенно начинаем упираться в скеоморфизм (когда мы берем "Поиск друзей" и обертываем его в кожу, то получается трешак). ОС упирается в концепцию скевоморфизма.
• Микрософт сделали прорыв с метро-UI, уйдя от скевоморфизма.
• Но что сейчас можно считать кнопкой? Сейчас кнопку можно перепутать с полем ввода
• В Айос 7 контекстозависимые инпуты, которые сливаются с фоном.
• Для консервативного пользователя нужно по-тихоньку внедрять новые решения, с каждой итерацией внедряя все больше и больше.
• Узнать про расположение кнопок "Ок" "Отмена".

Юзабилити-тестирование

• Айтрекинг, мысли вслух.
• Таблица количества выполненных задач, сколько ошибок и так далее.
• Таблица эффективности, где мы четко можем увидить, в каких разделах все печально.
• Удовлетворенность, по которой можно видеть боль.

Карточная сортировка
Про каталоги

• Всегда существует проблема классификации, но юзеры про эту классификацию ничего не знают (например юзеры в одном разделе ищут то, что мы переместили в другой)
• Чтобы преодолеть эту проблему юзается карточная сортировка

Закрытая карточная сортировка
Даем набор категорий и просим отсортировать

Открытая карточная сортировка
Собрать собственные группы и отсортировать

Возможно стоит юзать теговый способ сортировки, а не ирерхаческий

Полезно:
gov.uk/design-principles
sixux.com