{"id":6543,"title":"\u041a\u0430\u043a \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u043d\u0435 \u0443\u0442\u043e\u043d\u0443\u0442\u044c \u0432 \u043e\u043c\u0443\u0442\u0435 \u043d\u0435\u043e\u0442\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0435\u043b","url":"\/redirect?component=advertising&id=6543&url=https:\/\/vc.ru\/promo\/290554-tysyacha-i-odna-zadacha-kak-na-starte-biznesa-ne-utonut-v-omute-neotlozhnyh-del&placeBit=1&hash=06bd19bac10eff65d557e51eff7ad526506f48be933870c667bd0bcd7a476220","isPaidAndBannersEnabled":false}
Дизайн
65pixels

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

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

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

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

«Магическое число семь плюс-минус два»

Существует закономерность, согласно которой кратковременная человеческая память, как правило, не может вместить и воспроизвести более 7 ± 2 элементов. Если объектов становится больше, человек избегает решения задачи. Либо сводит её к более простым способам решения.

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

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

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

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

Закон памяти: эффект края

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

Но что если и после этого шага — ассортимент огромен? Тут вступает в бой «эффект края». Это особенность восприятия, при которой человек лучше запоминает начальные и конечные элементы группы, и хуже — промежуточные. У пользователей нет времени изучать, где у вас что находится — информационный дизайн должен быть четко спланирован и продуман ещё на этапе проектирования. Если дизайнеры расположат важные объекты (рекламные банеры, товары, ссылки, кнопки) в начале и в конце страницы, то тогда «эффект края», безусловно, сработает. Еще один «лайфхак» — разделить товары над подгруппы, разделить список баннером с другим контентом или добавить страницы товаров с адекватным количеством товаров на каждой.

Больше внимания визуализации данных

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

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

Accessibility-дизайн

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

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

Принципы Гештальта

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

Негативное пространство

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

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

Сходство

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

Непрерывность

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

Завершение образа

Принцип гласит, что мозг заполнит недостающие части дизайна или изображения, чтобы создать цельную картину. Простыми словами, это сложные формы, которые можно увидеть на логотипе Adobe, Sun Microsystem, NBC, США Network и так далее.

Близость

Этот принцип относится к тому, насколько близки элементы друг к другу. В UX-дизайне принцип близости используется для того, чтобы заставить пользователей группировать определенные вещи вместе. Объединяя вещи, пользователи будут воспринимать это как нечто связанное.

Взаимодействие фигуры и фона

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

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

Если хотите больше — ставьте плюсик и мы напишем еще одну статью о том, как работать с визуальным восприятием пользователя :)

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

Ставьте лайки и подписывайтесь на нас тут и в Instagram: )

{ "author_name": "65pixels", "author_type": "self", "tags": [], "comments": 55, "likes": 78, "favorites": 337, "is_advertisement": false, "subsite_label": "design", "id": 211493, "is_wide": true, "is_ugc": true, "date": "Tue, 16 Mar 2021 17:50:14 +0300", "is_special": false }
0
55 комментариев
Популярные
По порядку
Написать комментарий...

Спасибо за статью. Было бы еще лучше, если бы показали реальные примеры.

17

На реальных примерах не получится лить воду.

8

И получится больше холивара )

–3

Спасибо за вашу обратную связь! 
Мы думали об этом, но решили, что так  будем субъективными и только собьём с толку читателей.

В следующей части будем рассказывать о конкретных инструментах при построении интерфейсов, возможно там вы найдёте больше ответов на ваши вопросы 😊

4

Заголовок не соответствует содержанию статьи.
Не понятно как известные визуальные феномены связаны с красотой

6

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

0

Плохая статья: заголовок не соответствует содержанию, иллюстрации слабые, примеров нет. Статью писала нейросеть? :)

4

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

Если тема вас затрагивает, оставляем ссылку на первую часть статьи :)
https://vc.ru/design/198754-pochemu-krasivoe-kazhetsya-udobnym-razbiraem-interfeysy-s-tochki-zreniya-nauki-chast-1?ref=vc.ru

0

В первой части тоже нет интерфейсов. В следующий раз пусть статью пишет дизайнер, а не желтый пиарщик-водолей.

3

🙂

–1

Материал крутой, но без реальных примеров интересен, ИМХО, только дизайнерам, которые понимают о чем речь. А с примерами было бы интересно и простым смертным.

5

Спасибо за вашу обратную связь!
Мы думали об этом, но решили, что так будем субъективными и только собьём с толку читателей.

В следующей части будем рассказывать о конкретных инструментах при построении интерфейсов, возможно там вы найдёте больше ответов на ваши вопросы 😊

0

С этими правилами и приёмами всегда сложно на практике. Сразу начинаются споры и вкусовщина. Потому, к сожалению, без примеров в этом всём мало толку.

1

Нам кажется, что споры, вкусовщина и развешивание ярлыков начинаются как раз таки на конкретных примерах.

1

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

3

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

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

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

Да, для большинства профи, возможно, эти правила уже давно находятся на интуитивном уровне. Но мы хотим рассказать о них простым языком для всех остальных )

4

Ваши картинки вырвинахуйглаз ред.

2

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

4

:)
На то они и иллюстрации )

0

Есть такая книга "Дизайн для не дизайнеров", там понятным языком с хорошими примерами проилюстриовано то, о чем вы пишите.

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

4

Евгений, спасибо за вашу обратную связь!
Хотим не согласиться на ваш упрек про сложный язык)
На тему сложного языка и канцеляризмов советуем обратить внимание на книгу Норы Галь «Слово живое и мертвое». Это вещь!

1

Есть такая книга "Дизайн для не дизайнеров"

и правда классная книга)

0

На свете очень много похожих хороших книг и публикаций, хотите рейтинг/дайджест/обзор?)

1

Статья хорошая, иллюстрации огонь, комментаторы как обычно - злобное мудачьё.

3

Андрей, спасибо за вашу поддержку! 
Это правда очень ценно! :)

1

Здорово, что для вас иллюстрации оказались не слишком сложные ;)

0

Перестал читать после "магического правила семи элементов". Человек может держать в голове 7±2 совершенно не связанных между собой вещей. А внутри контекста там могут быть десятки элементов. Особенно внутри логичного и грамотного интерфейса

2

🙄

0

Класс! Очень интересно!

2

Юлия, спасибо!
Скоро будет третья часть )

0

Кайфанули глаза, спасибо))

1

Спасибо вам!
Рады, что вам понравилось )

0

Спасибо, очень полезный материал. Иллюстрации тоже очень понравились :))

1

Анастасия, спасибо!
Очень приятно :) 

1

Ужасно воспринимается глазами выделение фраз в тексте серым цветом (темная тема)
Читать невозможно

1

Спасибо за вашу обратную связь! 
К сожалению, это стандартные фичи vc.ru. Варианта выбрать другой способ цветового выделения в редакторе нет 🖖

0

Можно использовать стандартную фичу VC - писать без выделения :)

0

Так не интересно )
Выделение текста же не просто так

0

И где тут разбор интерфейсов? Ни одного интерфейса не показано.

1

Евгений, судя по вниманию к нашей статье, нам кажется, что вам она очень интересна!

Хотите вместе замутим подробный проект, разберём существующие интерфейсы?

0

Давайте.

0

Супер! Расскажите пожалуйста, какой у вас опыт в проектировании интерфейсов?

0

Минимализм тоже важен

0

хм, а что такое "красивое"?
"Черный квадрат" Малевича красивее, чем "Кувшинки" Клода Моне?

0

Ну это все же искусство.
Сравнивать искусство и дизайн интерфейсов - дело тонкое )
Мы пока не будем таким заниматься 😊

0

окей - а, что такое КРАСИВЫЙ интерфейс?

0

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

Если вам интересно, то оставляем ссылку на предыдущую часть статьи.
https://vc.ru/design/198754-pochemu-krasivoe-kazhetsya-udobnym-razbiraem-interfeysy-s-tochki-zreniya-nauki-chast-1

–1

Ребята молодцы!
Столько хейта вокруг статьи собрали, снимаю шляпу.

0

Спасибо )

0

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

0

❤️

0
Читать все 55 комментариев
Задания от самого титулованного программиста в мире и 3,72 млн призовых: каким был VK Cup в этом году

Зачем в VK Cup ежегодно участвуют тысячи специалистов из разных стран и чем запомнится турнир в этом году? Отвечаем на главные вопросы.

Utair разрешила пассажирам перевозить своих кошек и собак на соседнем кресле Статьи редакции

Придётся купить два билета — на себя и животное.

#20вопросов Сергею Костюку, советнику заместителя председателя правления Московского кредитного банка

В середине сентября МКБ и GenerationS, платформа по развитию корпоративных инноваций, запустили корпоративный акселератор "МКБ Реактор". Для МКБ это первый полноценный проект, включающий сразу несколько важных этапов, по итогам которого будут определены проекты для дальнейшего долгосрочного сотрудничества.
Финтех сегодня востребован как никогда –…

Пять брендов, которые выпускают одежду, аксессуары и декор из мусора

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

Еду к деду
Как использовать облачные технологии для роста бизнеса в 2022 году: расскажем на Yandex Scale

А ещё представим новые продукты.

Как облегчить планирование в редакции: опыт «Лайфхакера»

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

Microsoft представила Surface Laptop Studio — гибрид планшета и ноутбука с клавиатурой на шарнире Статьи редакции

Устройство можно использовать как ноутбук или планшет или надвинуть экран на клавиатуру.

Белорусский сервис PandaDoc для управления электронными документами стал «единорогом» — оценка превысила $1 млрд Статьи редакции

За год оценка компании выросла почти в четыре раза.

Microsoft представила свой второй складной смартфон с двойным экраном — Surface Duo 2 Статьи редакции

Компания проделала работу над ошибками и оснастила его тремя камерами, обновлённым процессором и новым шарниром.

null