Базовые UI/UX паттерны

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

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


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

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



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

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

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




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

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

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




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

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

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

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

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




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

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

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

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

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

    ОЗУ мозга




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

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

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

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

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

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




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

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

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


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

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

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

    Моторика


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

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

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

    Итог


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

    Подробнее
    Реклама

    Комментарии 12

      +2
      использовать распространенные ранее придуманные решения.

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


      Количество вещей, которые мы можем одновременно держать в голове, варьируется где-то между 5 и 7. Это называется рабочий объем памяти мозга.

      https://outofline.ru/%D1%81%D0%B0%D0%BC%D0%BE%D0%B5-%D1%80%D0%B0%D1%81%D1%82%D0%B8%D1%80%D0%B0%D0%B6%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80%D1%81%D0%BA%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B1%D0%BB%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8%D0%BB%D0%B8-%D1%81%D0%B2%D1%8F%D1%89%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F-%D0%BA%D0%BE%D1%80%D0%BE%D0%B2%D0%B0-7-2-a900c6937d13


      Сразу понятно, что красная змея чертовски опасная.

      А красное яблоко — ядовитое, да.


      красный — отмена

      Вы действительно хотите уйти, не сохранив изменения?
      Да (зеленый) | Отмена (красный)


      синий — положительно

      https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D0%B8%D0%B9_%D0%BA%D0%B8%D1%82_(%D0%B8%D0%B3%D1%80%D0%B0)

        0
        Это позволит снизить порог входа, но не позволит сделать интерфейс удобнее, чем у конкурентов.

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

        А красное яблоко — ядовитое, да.

        Оно может быть красное оттого, что не хочет быть съеденным. Есть масса примеров, когда что-то в природе предпочитает быть более угрожающим, чем оно есть.

        Вы действительно хотите уйти, не сохранив изменения?
        Да (зеленый) | Отмена (красный)

        Намеренно перевернут смысл. Учитывая это, этот пример только подтверждает теорию.

        Спасибо за ссылку, кстати, весьма подробный разбор откуда взялось это число! Хотя все же мой посыл именно такой — человек не может думать о многих вещах одновременно. И чем меньше, тем комфортнее.
        0
        Вы действительно хотите уйти, не сохранив изменения?
        Да (зеленый) | Отмена (красный)

        Когда-то на хабре была статья, где рассматривалась тема вопросов в диалогах. Насколько я помню суть — пользователь не хочет читать сообщение в диалоге и варианты выбора должны быть предельно понятными. То есть в приведенном вами примере, кноки должны иметь надписи «Выйти без сохранения» и «Остаться». Мало кто следует таким советам, но хочу заметить, что такой диалог действительно можно не читать без негативных последствий
          +1
          Это позволит снизить порог входа, но не позволит сделать интерфейс удобнее, чем у конкурентов.

          Тут нет противоречия, если смотреть в корень. За любой удачной «новой» фишкой стоит заимствование из смежных отраслей или глобальных человеческих привычек. Это тоже использование поведенческих паттернов)

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

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

          Это никак не ограничивает попытки сделать интерфейс удобнее, чем у конкурентов. Выбор тех или иных паттернов и определяет UX. Кто точнее попадет в привычки своих [потенциальных] пользователей, у того и получается удобнее. Собственно, это и есть суть UX в чистом виде. Мостить дорожки там, где люди уже ходят.
            0

            Есть два типа людей:


            1. те, кто двигают индустрию, пока другие боятся сделать шаг.
            2. те, кто плетутся в конце, считая, что всё уже изобретено до них.
              0
              Есть два типа людей:
              2.те, кто плетутся в конце, считая, что всё уже изобретено до них.

              В яндексе уже об икались.


              Есть ещё третий тип — те кто ежедневно делают посредственную хрень — тупо работают пока не выгонят. И их большинство.

                0

                Да ладно, в Я много велосипедов, так что они скорее к первому типу относятся. Другое дело, что судя по появлению у них Реакта, у них набралась критическая масса вторых.

          0

          Не согласен с теорией гармонии цветов. Ее не существует или она авторская. Цвета сами по себе не гармонируют. Гармонируют цветные формы. И в зависимости от формы цвета могут гармонировать или нет. Это чувственное ощущение, в котором участвует лёгкость распознавания объектов.

            0
            В 80-х была книжка научпоп про волны (квадратная с картинками), так там была хорошо показана взаимосвязь между различными явлениями в природе, в основе которых лежит волна. Гармония цвета, гармония нот в музыке, короче всякие противофазы, сдвиги по фазе и резонанс — человеком воспринимаются как гармоничные и дисгармоничные сочетания. А т.к. у каждого восприятия разное («на вкус и цвет все фломастеры разные» ©), то мы в основном говорим о средней температуре по больнице.
              0
              интерфейс то волной не интерпретируешь
            0
            Отличная статья, спасибо.

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

            Самое читаемое