В мире существует множество статей как правильно делать интерфейс. Все они наполнены полезными советами на различные ситуации: здесь нужна красная кнопка, здесь должна быть вот такая анимация и так далее. Всех ситуаций не описать, их просто бесконечное множество. Однако, если понять базовые принципы проектирования интерфейсов, необходимость в этих советах отпадает. Главное понять почему эти советы работают и как устроен конечный пользователь. А пользователь — это человек, со всеми его особенностями.

В этой статье я постараюсь описать то, как работает человеческий мозг и как это использовать в проектировании интерфейсов.

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

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



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

Ключевой момент здесь — это затраты энергии. И здесь как раз таки стоит учитывать специфику человека и его мозга. Наш мозг потребляет очень много энергии, и, как и все остальные части тела, экономит ее. Рассмотрим вкратце работу мозга.

Мозг человека

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

Все наши мысли, обращения к памяти — все это затраты энергии. То есть нам нужно чтобы пользователь пользуясь интерфейсом думал как можно меньше. Тут можно было бы и закончить. Это — основная метрика эффективности интерфейсов. Но, все же, этот совет довольно сложно интерпретировать. Поэтому углубимся дальше. Как сделать так, чтобы человек меньше думал при использовании интерфейса? Какие особенности мозга использовать?

Сила привычки

Есть такое выражение: человек — это сгусток привычек. В этом есть большая доля правды. Как и говорилось ранее, мозг — это набор нейронов. Нейросеть, проще говоря. И эта нейросеть постоянно подстраивается и обучается. Сначала новая задача требует большого количества энергии, ведь еще не образовались нужные связи и наш мозг не обучен. Но с каждым разом он подстраивается все больше и больше, а энергии тратится все меньше и меньше. В конечном счете появляются наиболее оптимальные связи для этой задачи. Это и есть привычка, или навык.

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

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

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

Древние инстинкты

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

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

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

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

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

ОЗУ мозга

Наш мозг не всесилен и мы не можем думать обо всем одновременно. Количество вещей, которые мы можем одновременно держать в голове, варьируется где-то между 5 и 7. Это называется рабочий объем памяти мозга. Очень похоже на ОЗУ компьютера по своему принципу. Для того, что бы над чем-то подумать, нужно это извлечь из долгосрочной памяти в рабочую, затем прооперировать над этим, и вернуть в долгосрочную память. Конечно, по-настоящему этот процесс гораздо сложнее, но для простоты будем его воспринимать так. Самое главное здесь то, что рабочий объем ограничен. И он весьма мал. Мы не можем думать о десяти сущностях одновременно. И чем меньше нам нужно держать в голове, тем меньше тратится энергии на мыслительный процесс.

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

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

Но есть и более общий совет, как удерживать внимание человека на одном и том же: это геометрические паттерны. Например, возьмем таблицу или список. Почему они легко читаются? Потому что мы сначала загружаем в память «модель» данных. Мы знаем что в этом столбце такие значения, а в этом такие. И последующее восприятие данных происходит довольно легко, так как мы знаем где что будет дальше.

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

Распознавание образов

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

Сначала из глаз мы получаем сигнал о том, какие колбочки в сетчатке глаза возбуждены тем или иным спектром цвета. Грубо говоря какие пикселы какого цвета. Из этого набора информации сначала выделяется цвет. Черное отличается от белого. Этим занимается одна группа нейронов. По разнице цветом мы можем определить простые образы: линия, точка и так далее. Этим занимается уже другая группа нейронов, связанная с первой. Затем эта информация передается на следующий слой, где эти образы обобщаются и так далее, на каждом уровне нейроны все больше и больше связываются с теми нейронами, которые уже хранят наш опыт о ранее увиденных образах. Увидели букву А на белом фоне, сначала выделили ее цвет на фоне, затем распознали простые образы — линии, из которых она состоит, затем сопоставили это со всем своим предыдущим опытом, и максимальное совпадение выпало букву А. Перед нами — буква А.

Этот процесс сложный и разделен на несколько этапов. Это и можно использовать. Можно использовать эту последовательность распознавания образов для упрощения восприятия интерфейса. Итак, еще раз: сначала выделяется цвет, затем форма, затем содержание формы.


Из этой последовательности видно, что проще всего повлиять на распознавание образа через цвет. Этим и пользуются живые существа на земле, чтобы заявить кто они такие. Сразу понятно, что красная змея чертовски опасная. Это гораздо проще понять, чем если бы на ней было написано «опасная змея».

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

После цвета идет выделение простых образов, лишь затем их содержание. Сначала мы понимаем что это кружок, а потом понимаем что это нолик или буква О. Поэтому иконки лучше чем текст. К тому же занимают меньше места.

Моторика

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

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

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

Итог

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