9 принципов красоты, простоты и заботы в UX


    JotForm в марте рассказали в блоге, как они год старались «изобрести заново» формы и сделать их действительно user-friendly. Вот девять принципов красоты, простоты и удобства в UX, которые они сформировали за это время.


    Принципы красоты


    1. Красота — второй UX


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


    Дизайн в первую очередь должен работать, должен быть удобным и продуманным. Но его привлекательность — вовсе не последнее дело.



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


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


    2. Эффект прогресса


    Почти в каждой кофейне есть карта лояльности, которая напоминает игровые ачивки и отражает прогресс:


    image


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


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



    В JotForm индикатор прогресса мотивирует пользователей


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


    Принципы простоты


    3. Бритва Оккама


    Если есть несколько ответов или решений, правильным будет самый простой вариант.


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



    На главной «Хабрасторейджа» всего одна кнопка


    4. Закон Хика


    Если бы рестораны предлагали в меню по 500 блюд, мало клиентов справились бы с выбором. А когда все варианты сокращены до нескольких лучших (как обычно рестораны и делают), сконцентрироваться и сделать выбор будет легче.


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


    Уберем второстепенные страницы, лишние ссылки и перегружающие интерфейс детали.


    image
    Один вопрос на макет страницы JotForm Cards снижает смысловую нагрузку


    5. Фрагментация


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


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



    «Бюро» — отличный пример фрагментации всего макета с дизайнерским подходом


    6. Компромисс между гибкостью и удобством использования


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


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


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


    Не надо жертвовать простотой ради ненужных функций.



    Многие пользователи Excel даже не подозревают о существовании большинства его функций


    Принципы заботы


    7. Право на ошибку


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


    Как должна вести себя система, когда пользователь вот-вот нажмёт клавишу, и это приведет к непреднамеренным (и, вероятно, негативным) последствиям? Допускать эти последствия точно не стоит.


    Можно переспросить пользователя заранее, или, что ещё лучше, дать возможность сделать шаг назад.



    Удобная обработка ошибок и автокомплит в JotForm Cards


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


    8. Закон Фиттса


    Перед нажатием человек прицеливается к объектам на двухмерном экране. Тут закон Фиттса будет звучать примерно так: чем дальше объект, тем больше время прицеливания; чем больше объект, тем меньше время прицеливания.


    Обращайте внимание на размер элементов, нажимаемых областей и на их расположение. Понятно и подробно о законе Фиттса написал Илья Бирман.


    Клавиатура Айфона динамически подстраивает размеры кнопок на клавиатуре так, чтобы было легче написать существующее слово, чем сделать опечаткусмотреть видео {mp4, 0.9MB}.


    9. Наглядность


    Форма объектов дает нам понять, как они могут использоваться. Контейнер с носиком приглашает нас налить жидкость, а длинный ремень, прикрепленный к сумке, как бы намекает носить его через плечо. Это наглядность — термин, который популяризировал Дон Норман в «Дизайне привычных вещей».


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


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

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


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



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




    По мотивам Hacking usability with psychological principles.

    Поделиться публикацией

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

      +1
      JotForm очень красивый и хороший продукт, однако не лишен ряда недостатков, например:
      • Сложность интеграции с SPA-приложениями — необходимо использовать iFrame
      • Сложность интеграции с бэкендом — POST-запрос на вебхук приходит в достаточно некрасивом виде и приходится его преобразовывать
      • Общая нестабильность форм — достаточно часто слетают такие настройки, как PDF-формы или настройки писем
      • Очень слабая техподдержка
        +1
        Уже лет 5-6 периодически просматриваю всевозможные admin/dashboard/etc templates, невзирая на цену: 99,9% использовать as is просто нельзя, несмотря на то что советы и гайды подобно этому лежат на каждом углу.
        Например:
        — положение переключателя (стилизованного чекбокса) невозможно определить пока не щелкнешь туда-сюда
        — Таблицы ради красивости обвешаны отступами, скрулениями итд итп до такой степени, что серьезное количество колонок в них невозможно.
        — Таблицы вообще мало кто проверяет, такое ощущение что в мире существуют только таблицы 5 колонок, 10 строк, потому как фон/цвет/форма смотрятся красиво только пока таблица не заполнена данными. Ярчайший пример красивейший темелейт на манер золота, при заполненни данными в глазах просто рябит.
        — Очень многие идут на хитрость и выверяют вертикальное положение элементов так, чтобы небыло видно, как красивый и удобный фон делает нечитаемым элементы.
        — Полное или частичное отсутствие состояний у элементов (hover, focus, click)

        И так далее до бесконечности.
          0
          пример красивейший темелейт на манер золота, при заполненни данными в глазах просто рябит.

          Вы смогли заинтриговать, можно линк на пример «как делать не нужно»?
          Можно и в ЛС :)
            0
            Ну вот прям так сходу не найду, попробую пошукать как время будет.

            Как не надо делать вы можете посмотреть в любой темной теме. В IDE они вообще заставляют глаза кровоточить.

            Вот кстати так и так нужно делать, человек потрясающе работает с объемом. Но вы можете у него посмотреть пару золотых темных тем: смотрятся красиво но в реальной жизни абсолютно неприменимы.
              0
              человек потрясающе работает с объемом

              Выглядит и вправду круто, кажется я нашел новую ступеньку для себя (в качестве ориентира).
              Как не надо делать вы можете посмотреть в любой темной теме. В IDE они вообще заставляют глаза кровоточить.

              Эм, а тут смущен — у меня на компьютерах наоборот все «темное», что только возможно. От белого наоборот глаза текут (очень много времени провожу за экраном).
              Повсеместно использую взятый за основу Material UI для DataGrip/IDEA/PhpStorm (Plenight/Oceanic/Darker темы соот-но).
                0
                У меня тоже темное. Вы посмотрите темные дэшборды, темы для иде и прочего. Если с абсолютно здоровым зрением это еще переживаемо, то у меня глаза из орбит вылазят за 10 минут. У здоровых людей просто глаза устают сильно как правило. Хороших очень очень мало.

                Выглядит и вправду круто, кажется я нашел новую ступеньку для себя (в качестве ориентира).

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

                В этом плане попытка перейти на плоский дизайн с моей точки зрения выглядит достаточно неприятно, хотя объяснимо: за черт знает сколько лет большая часть веб дизайнера так и не поняла что солнце светит сверху и естественное положение тени довольно очевидно)
          0
          Термин «фрагментация» в IT имеет негативный оттенок. Возможно вы имели ввиду то-то типа парадигмы divide and conquer?
          Вспомним знаменитые швейцарские ножи. Сейчас там уже с пару десятков разных инструментов и если вы находитесь на вершине Гималаев, он явно вам пригодится.
          На кой он там? Ни один альпинист не возьмет с собой такую тяжесть.
            0
            Но если вам нужно срезать бирку со свитера, вы воспользуетесь армейским ножом или обычными ножницами

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


            По тем же причинам вместо копания в дружественном интерфейсе очередного банка или подобного, я предпочту скачать (возможно, отфильтрованные) данные в каком-либо формате и все же воспользуюсь тем, что у меня в кармане — Excel или альтернативами. Лишь в случае, когда последнее невозможно, я, вероятно чертыхаясь и посылая лучи ненависти продакт менеджерам, полезу исследовать интуитивный интерфейс. Или вообще сдамся.


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

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

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