Визуальная культура
Про вкус, идеалы, красоту, доверие, заботу, любовь и визуальную среду в окружении
Дизайн интерфейсов зиждется на понятиях красоты и простоты. Люди в индустрии обычно называют простоту и логику термином UX, а красоту интерфейса — UI, но мне не очень нравятся эти термины. Ведь смысл и форма — намного красивее, не правда ли? К тому же, UX формируется и из правильных цветов и шрифтов, а называть визуальщину User Interface довольно странно. Но мы отвлеклись.
Влад Зелинский задал вопрос в Фейсбуке про определение красоты и простоты. Попробуйте и вы для себя объяснить эти термины.
Вот что получилось у меня. Возможно, определения довольно наивные, но это то, как я вижу эти слова в данный момент жизни.
Красота — это прекрасные чувства и эмоции, которые у нас вызывает объект.
Простота — это отсутствие препятствий при взаимодействии, мгновенное понимание механизма взаимодействия с объектом.
Интересна история интерфейсов Apple. До iOS 7 приложения были скевоморфичны: заметки напоминали блокнот с настоящей бумагой, в калькуляторе были почти настоящие кнопки, везде блики и красивые тени. Но в седьмой версии ОС приложения резко стали проще в плане графики и сначала вызвали непонимание.
Скевоморфизм появился как способ научить людей использовать цифровые продукты, когда они были еще им в новинку. Человек привык к настоящему калькулятору, как его научить пользоваться приложением? Сделать интерфейс максимально похожим на реальный мир.
В реальном мире у кнопок есть тени, блики, мы можем понять их объем. Поэтому и калькулятор был похож на калькулятор. Элементы интерфейса предоставляют так называемый affordance — подсказку о том, как с ними можно взаимодействовать.
Со временем люди привыкли к контролам, паттернам, и в целом к цифровым штукам и уже было необязательно следовать правилам реального мира. Рюшечки и украшательства ушли на второй план, а на первый план вышла информация.
Из-за постепенного накопления опыта у пользователей в разные моменты истории простыми считались разные интерфейсы. Простота — она про минимальный набор средств для передачи сообщения.
Идеалы
Раз вкус — это инструмент для измерения красоты, значит можно построить некую шкалу «качества» работы. Сначала на ум приходит одномерный график, где отмечены разные работы. Чем выше работа, тем она «лучше».
На эту же шкалу можно разложить различные варианты текущей работы. В работу можно вливать больше времени и «подвинуть» её выше, а можно оставить сырой, где-то в середине. В общем, сейчас мы пытаемся немного формализовать фразу «потратить больше сил на работу».
Если подумать еще чуть-чуть, то в параметре качество работы скрыта не одна переменная (красота), а большое количество: эстетика, визуальная иерархия, понятность, контраст относительно других проектов. Нужно добавить эти переменные на график.
Тогда все возможные варианты работы можно представить как поверхность в N-мерном пространстве (где N — количество переменных, от которых зависит качество работы).
Любая неплохая работа находится в локальном максимуме качества. Если приложить усилия опытного арт-директора, то можно либо дотянуть работу ещё сильнее. А бывает, что работа настолько крутая, что попадает в глобальный максимум — и все ребята «а что так можно было?».
Отсюда делаем вывод, что в качестве работы участвует много переменных и более опытные ребята помогают попасть либо в локальный максимум (рабочее решение), либо сделать что-то невероятное (глобальный максимум).
Вкус
Неделю назад я задумался о природе и смысле вкуса в визуальном мире. Вот пишу комментарий в Фигме студенту: «подвинь текст, чтобы было аккуратнее». А почему аккуратнее именно так? Почему не нужен другой отступ, чем плох предыдущий?
Кажется, что это всё социальные конструкты, которые придумали люди. Например, представим, что в мире 0 дизайнеров. Появляется первый дизайнер и рисует картинки. Затем появляется второй дизайнер и показывает картинки первому. Первый говорит ему сделать так, как ему кажется, что правильно и красиво. Всё, они вдвоём начинают верить в эти картинки как эталоны. После этого появляются новые дизайнеры и верят в эти же эталоны.
Мне кажется, в нашем информационном поле как раз есть некий эталонный интерфейс, к которому мы все стремимся. В эталоне работает правило внутреннего и внешнего, контрастные цвета, мягкие тени, приятные фотографии.
Скорее всего, этот «эталон» уже есть в наших головах (раз мы можем сказать, какая картинка нам больше нравится, даже не разбираясь в дизайне), но обосновать его не получается. А дизайнеры с опытом начинают понимать, как привести картинку поближе к эталону, чтобы она с большей вероятностью понравилась людям.
Возможно, эталона никакого нет, и мы можем просто субъективно судить о красоте вещи, и, тем самым, итеративно, можно дойти до эталона.
Возможно, в отсутствии объективности и «абсолютности» вкуса нет ничего плохого: мы же рисуем картинки для людей, и важно, чтобы они нравились людям. Поэтому нам помогает общее понимание эталона, чтобы сделать любую картинку лучше.
Например, команда Яндекса ввела интересный инструмент — Side by Side, в котором обычным пользователям в Толоке предлагалось выбрать одну картинку из двух. Так дизайнеры тестировали интерфейс на тысячах людей, если в процессе решения задачи появлялись несколько хороших вариантов. По сути, это и был тест на «приятность» картинки, только более объективный.
Вкус — это наше мерило красоты. Вкус помогает за мгновение сказать, плохая картинка или хорошая. Навык можно тренировать, рассматривая много картинок и пытаясь анализировать, что в них хорошего.
Личный вкус дизайнера помогает делать ему или ей картинки на свой максимум (локальный, вспомните картинку из начала статьи), а помощь арт-директора заключается в дотягивании работы до более прокаченного вкуса.
У вкуса есть два уровня:
- Критика. Понимание, что картинка хорошая или плохая. Просто способность на картинку сказать, 1 или 0. Куча народа обладает таким навыком, но не ко всем нужно прислушиваться.
- Наставление. Намного сложнее. «Детектор» качества работы и умение сказать, что конкретно нужно исправить. Если «критиковать» умеют все, то выдать какие-то наставления может меньшинство.
Понятно, как развивать первый уровень вкуса: смотреть на картинки, анализировать интерфейсы, обращать внимание на окружающую среду. Ещё советуют ходить на выставки и приобщаться к классике.
А для второго уровня нужно много практики за плечами. Причём не только работы над своими интерфейсами, но и наставничества: большинство ошибок у дизайнеров типовые и за несколько лет у вас в голове появляется четкий алгоритм, как улучшить те или иные штуки.
Интересный факт: у разных людей разная «разрешающая способность». Когда вы сами создаёте макет, то пользуетесь своим вкусом. В какой-то момент вкус «отказывает» — вам кажется, что макет хороший, дальше нужно нести арт-директору (или кому вы доверяете). У арт-директора глаз сильнее намётан, он замечает косяки, и прописывает правочки. У более опытных арт-директоров и того «глаза острее». А у кого-то замылились.
Наряду со вкусом, у дизайнеров есть еще «здравый смысл» — то, что помогает измерять адекватность сценариев и делать интерфейс логичным.
Неслучайность и доверие
Мне кажется, что неслучайный дизайн с заботой вызывает доверие у пользователей. Неслучайность проявляется в следовании правилам, которые определены в интерфейсе: паттерны ведут себя всегда одинаково, обратная связь ожидаемая, метафоры выбраны осознанно и даже отступы помогают выстроить визуальную иерархию.
Все элементы дизайна получили достаточно любви от дизайнера: глазу не за что зацепиться (или есть, но это специально). В нужных местах расставлены подсказки, а иногда присутствует юмор, где он уместен. Потому что роботы не могут сделать человечный дизайн, они уважают только базы данных.
Интерфейс с выверенными отступами, аккуратными шрифтами, приятными цветами не кажется сломанным. Он такой, каким его задумал человек.
Визуальная среда в окружении
Хорошее благоустройство в городе помогает жителям быть в безопасности, не нарушать правила и комфортно жить. Улучшение городской среды подталкивает людей на изменение своих привычек.
Как и городская, цифровая среда действует тем же образом. Если рядом со студентом будут хорошо спроектированные и запрограммированные приложения, у студента выработается вкус. Он сможет отличить плохое приложение от хорошего, удобный интерфейс от неудобно (потому что рядом всегда есть пример классного), а затем — проголосовать рублём.
Если вузовские личные кабинеты, электронные курсы и расписания будут выглядеть как говно, отваливаться перед сессией и баговать через заход — пиши пропало, студент это запомнит и начнёт думать что это ОК.
Получается порочный круг: преподаватели и взрослые ребята делают некачественные продукты (сайты, презентации, интерфейсы), студенты это запоминают и учатся делать так же плохо. На смену преподавателям приходят уже «обученные делать плохо» студенты, и колесо Сансары даёт оборот. Обесценивается важность хорошего дизайна вещей и продуктов; всестороннему дизайну мало кто учит (обычно ограничиваются промышленным и графическим), проектирование не считают серьезным занятием (убедился на личном опыте).
Всё в руках молодого поколения, которое будет воспитывать свой вкус вопреки старших, и в руках дизайнеров, которые пойдут в образование с изменениями.
Рифмы
Смотрите, как дизайнеры Apple использовали Light-начертания шрифта, чтобы зарифмовать большой кегль времени и средний кегль даты. В Android же всё прыгает.
С помощью варьирования толщины шрифта можно регулировать иерархию и количество «чернил», чтобы надписи не выбивались, или, наоборот, были ярче.
Рядом с текстом часто живут иконки. Если разделить иконки условно на залитые и контурные, то контурные выполняют более «сервисную» функцию: образ вместо текста, усиление надписи, отображение каких-то параметров. Рядом стоящие контурные иконки легче образуют систему.
Если контурная иконка стоит рядом с текстом, то её тоже стоит рифмовать толщиной, характером скруглений и размером.
Также, можно рифмовать цвета в палитре между собой. Это делается подмешиванием цветового оттенка в набор серых цветов. Или же использовать одинаковый Hue во всех акцентных цветах. В общем, почитайте статью Ковчего про то, как осознанно он подбирает образы, цвета, выверяет компоненты и готовит красоту к разработке.
Детали
В дизайне важно показывать, что объект или интерфейс создан людьми, а не роботами. Чтобы была теплота, забота, а не бессердечность и холод. Потому что холод рождает только холод.
Недалеко есть понятие технозависимости — когда интерфейс продиктован внутренней архитектурой программы, базы данных или чем-то техническим, не в мире пользователя. В вузе мы рассматривали BPM-системы, в которых можно было смоделировать бизнес-процесс в виде диаграммки, мол, такие-то данные нужны в этот момент, потом нужно поставить задачу тому человеку, затем дождаться согласования директора и процесс завершен. А потом система на основе диаграммы генерировала нужные формы и страницы.
Вроде те же поля, иконки, картинки, как у дизайнеров. Но автогенерация не может продумать мелочи, потому что она универсальна. Она не понимает человека и создаёт бездушный, неинтересный, некрасивый и типовой интерфейс.
Та самая человечность и «уют» проглядываются в заботливом тексте, который в нужный момент рассказывает о комиссии, в понятных названиях кнопок, милых иконках, грамотно подобранных цветах, шрифтах и общем качестве интерфейса, в нестоковых фотографиях, в шутках там, где они уместны и вообще во всём, что нельзя «сгенерировать».
Прямая трансляция любви в сердца пользователей ❤️
Например, Gmail перед отправкой предупреждает, что файла нет, если в письме есть упоминание про прикрепленные файлы. Разве это сделано не для людей?
Иногда интересно перекинуться парой слов с продавцом в магазине. Иногда приятно, когда официант не молча принимает заказ, а вворачивает что-нибудь остроумное. Иногда садишься на переднее сидение в такси — просто охота поболтать. Частенько неожиданному собеседнику проще расположить к себе через юмор. Очень приятно получить дозу человеческой заботы в скучном гос. учреждении, где все на серьёзных щах.
Так и интерфейсы. Бывает, ты просто вбиваешь запрос в поисковик: тебе нужно быстрее проскочить этот этап, тут интерфейсу стоит помолчать. Но иногда интерфейс, волей не волей, занимает больше твоего фокуса. Приятно получить от него человеческий отклик.
Позырить на детали: Little Big Details, cult of details.
Баланс плотности и воздушности
Часто под красивыми интерфейсами понимают Дрибл — сочные картинки с классной композицией, воздушными отступами, невероятной типографикой и кайфовыми иллюстрациями. Но с теми картинками есть проблема — они не про реальный мир.
Реальный мир жесток:
- Анимация дорогая.
- Контент никто не сделал.
- Фоток не будет.
- Интернет плохой.
- Пользователи не знают про Unsplash : — )
Но есть секрет: к «дрибловой» красоте можно приблизиться, если варьировать плотность информации когда это уместно. Например, в сервисе, где много важных данных, которые нужно быстро «сосканировать» взглядом и принять какое-то решение, нужно вместить больше информации на один квадратный пиксель.
В более расслабленных (не утилитарных) приложениях, можно добавить воздуха и разрядить элементы.
Иерархия
Люди не читают текст, а сканируют. Глаз цепляется за цветовые пятна, большие кегли, контрастирующие элементы.
Элементы на макете живут в системе: кто-то более значимый, кто-то менее. Чтобы помочь человеку просканировать интерфейс и быстрее принять решение (и снизить нагрузку на мозг), нужно выстроить визуальную иерархию.
На макете слева нет истории: все элементы спорят и перекрикивают друг друга, снизу большое пятно чернил. Нагрузка на мозг возрастает, потому что сканирование перестаёт работать. В макете справа есть иерархия: заголовок, главная кнопка, текст и второстепенные кнопки.
Хорошая визуальная иерархия — это последовательная история
Визуальную иерархию легко проверить — прищурьте глаза и посмотрите на макет. Все яркие пятна будут видны, а то, что убрано на второй план станет менее заметно. После этого легко убрать лишние чернила и сделать ярче то, что важно.
Язык
Цвета, шрифты, детали и правила образуют язык, на котором объекты дизайна говорят с пользователем. Дизайнеры легко выявляют этот «язык», а вот обычные люди могут сказать, что объекты какие-то «особенные».
Легко угадывается язык мобильных операционных систем из-за гайдлайнов HIG и Material. Субъективно, материальные интерфейсы сильнее связаны с гайдами, нежели эпловые (в силу скудности HIG).
У гайдлайнов есть очень чёткие функции:
- Трансляция бренда ОС.
- Упрощение жизни разработчикам через нативные компоненты.
- Сохранение родных паттернов и «уюта».
«Уют» появляется, когда человек привыкает к системным приложениям, изучает, как они себя ведут, а они не обманывают его ожидания: всё работает как он привык. Попробуйте воспользоваться телефоном с другой ОС, сразу станет некомфортно.
Визуальный язык рождается не только из гайдов, но ещё и из правил и художественных ходов, которые использует дизайнер. Посмотрите на серии мебели из Икеи или на вещи из lot2046. А еще лучше — посмотрите выступление Вадика Мармеладова про сам сервис, его подход к ремеслу и Канье Уэста.
Если бы меня попросили описать все эти вещи одним предложением, то я бы сказал, что это достижение максимальной функциональности через минимум средств. Они немногословны, хотя и в текущем контексте вещи выглядят достаточно «дизайнерскими» (потому что все дизайнеры ходят в чёрном?).
ДНК
Когда создатели продукта по-настоящему любят людей, они транслируют эту любовь через свои продукты, часто даже неосознанно, просто выбирая формулировки, рисуя иллюстрации, не соглашаясь на плохой дизайн. Любовь задаёт стиль и настроение интерфейсу — это сложно формально описать, но можно почувствовать.
Ну вы посмотрите на прекрасное приложение Кухни на районе: ребята смогли сделать функциональное приложение невероятно красивым, с приятными деталями и любовью.
ДНК продукта собирается из иерархии, языка, стиля, типографики, цветов, деталей, слов и человечности. Вспомните о продуктах, которые вам нравятся и попробуйте описать для себя важные качества этих интерфейсов.
Передача деталей в разработку
Можно часами разговаривать про природу красоты в интерфейсе, но какой в этом толк, если непонятно, как это красоту сохранить в настоящем продукте?
Pixel Perfect
Чтобы разработчики «не испортили дизайнерскую красоту», придумали метод (и расширение для хрома) Пиксель Перфект. Работает так:
- Дизайнер рисует макеты, отдает в разработку.
- Разработчики верстают макет.
- Тестировщики или разработчики проверяют верстку наложением исходного макета на результат. Если картинки не совпали — разработчики возвращаются на шаг 2.
И вроде бы всё хорошо, но есть нюансы:
- Если дизайнер накосячил с отступами, разработчикам придётся костылить и делать много исключений в вёрстке.
- Разработчикам сложновато дотягивать интерфейс до «дизайнерской» красоты. А на мобилках, в отличие от веба, ещё сложнее.
- Затраченное время, скорее всего, не стоит того.
Чтобы не косячить с отступами и размерами, и не плодить костыли для разработчиков, нужно рефакторить макеты.
Visual Perfect и авторский надзор
Дизайнеры придумали проверять верстку самостоятельно (или вместе с тестировщиком), чтобы найти недочеты (в том числе в дизайне). У дизайнеров проверка получается быстрее, потому что им не нужно сравнивать верстку и макет: все косяки видны сразу.
Разработчик же всегда может спросить с дизайнера за странный отступ, новый компонент или текст без стиля. Потому что костыли не нравятся никому. Тут помогут UI Kit’ы и дизайн-системы (те самые, настоящие).
Когда я проверяю верстку, стараюсь не придираться к точности отступов до пикселя. Мне важно не сколько совпадение верстки и макета, сколько красота вёрстки в результате. Это я называю принципом Вижуал Перфект.
Построение системы
Уменьшению беспорядка помогает фиксирование каких-то договорённостей и правил. Что можно описать и зафиксировать: стили типографики, систему отступов, цветовую палитру, набор и стиль иконок, компоненты и правила их использования.
В простой форме это вытекает в стайлгайды, которые полезнее больше для дизайнеров. В более сложной форме — в дизайн-систему™.
Такие системы правил позволяют делать меньше случайного дизайна и легче сохранять выверенные картинки до разработки, а самим разработчикам становится легче, потому что многие параметры заранее определены. Ну, вы и сами знаете.
Доведение до красоты
Есть невероятный способ, который трудно себе представить: довести до красоты и благодати интерфейс самому. У меня про это уже есть статья «Картинки никому не нужны». Такие выкрутасы требуют от дизайнера неплохих скиллов в разработке (я знаю ребят, они-таки существуют).
Этой статьёй я хотел показать, что в наших силах поднять уровень визуальной культуры повсюду: в объявлениях, интерфейсах, плакатах, печатке, да вообще во всём.
Случайный дизайн, неопрятный, без должной любви к разработке — преступление, ведь с помощью красоты мы можем улучшать визуальную среду вокруг людей, прививать вкус, вызывать доверие и тёплые чувства.
Добавляйтесь ко мне в друзья в Фейсбуке. Еще у меня есть телеграм-канал, где я делюсь мыслями про работу, дизайн, продуктивность. Никаких подборок «полезных» ссылок:
