Графический интерфейс
Эмоция в форме, сообщение в ясной системе.
Представлюсь. Я дизайнер интерфейсов в Яндексе. За это время мне повезло поучаствовать в работе над картами, поисковой выдачей, иконками сервисов, промо-материалами, документациями, планировщиком проектов, общепортальными элементами интерфейса и системой быстрого прототипирования. Кроме того, у меня есть возможность наблюдать за работой своих коллег: главная страница, маркет, новости, картинки, видео, диск, авто, недвижимость — все эти штуки разрабатываются на моих глазах.
Так в процессе я сделал для себя ряд выводов и открытий, а теперь хочу поделиться некоторым опытом и взглядами, проверенными на больших числах. Это будет обзорный рассказ. Сочинение на свободную тему писать не собираюсь; хочу затронуть вопросы:
- Нужно ли дизайнеру интерфейсов уметь рисовать и разбираться в шрифтах?
- Работа с текстом — отдельная профессия?
- Нужно ли уметь писать программы и верстать?
- Как оценивать интерфейс?
Перед погружением пара освежающих память слов о часто используемых терминах:
Интерфейс — модель взаимодействия с продуктом.
Дизайнер — тот, кто определяет тип и содержание интерфейса.
Примеры типов интерфейса:
- графический
- программный
- командная строка
- речевой
Очевидно, речь пойдет о графическом типе.
Другими словами, в моем понимании интерфейс — это не кнопки, а дизайнер — не антипод разработчика.
И ещё: я не так много читал книг по теме, нигде специально не учился, а на третьем курсе технического вуза я просто начал этим зарабатывать на жизнь. Так что мой опыт — это, в основном, практика и наблюдение за окружающим миром.
Форма
В детстве я воспринимал рисование как проекцию образов из головы на бумагу. Когда начал срисовывать персонажей комиксов или предметы окружающего мира, рисование стало для меня навыком правильно подметить и рассчитать детали объектов.
Ценность формы я уловил сразу, а вот более внимательное отношение к цвету пришло ко мне гораздо позже. Когда школьниками мы рисовали Flash-мультики, друг меня ругал за примитивный набор цветов, вроде: #F00 для красного и #00F для синего. Сейчас мне сложно это представить, но в то время я совершенно спокойно смотрел на кислотные оттенки, которые были для меня просто сигналами цвета: «это синий», «а это красный». Я считаю, что виной всему убогий дефолтный набор цветов на пантоне Flash-редактора, который не располагал к поиску новых интересных сочетаний.
Наверняка после пары уроков рисования я бы узнал о существовании цветового круга и HSV-модели. Но учиться этому было некогда и знакомиться с цветом приходилось на уроках физики, когда проходили световой спектр волн. Ну и спасибо моему другу.
Одно время я даже собирался стать иллюстратором. Скачал все выпуски журнала 2D-artist, повторял по шагам уроки рисования всякой фантастики, анимэ-персонажей, животных с густой шерстью, снега на ветках и прочего. Это оказалось не так сложно, если ты рисуешь десятого волка и двадцатое дерево. Рисовать что-то своё гораздо сложнее, конечно же. Нужна практика, как и во всём.
Но первую зарплату мне дали не за картинки, а за работу над веб-интерфейсом научно-популярного ресурса Whoyougle — такая вот ирония судьбы. С той поры я быстро поменял фокус на то, чем занимаюсь по сей день.
Графику я не бросил, но вместо сюжетной она стала понятийной: иконки, схемы и конструкции из блоков разной формы.
Эмоция в форме. Сообщение в ясной системе.
Так нужно ли дизайнеру интерфейсов уметь рисовать? Себе я отвечаю так: нужно чувствовать форму, чтобы подбирать подходящие контексту выразительные средства и распространять заданную систему на все случаи. А рисовать я так и не научился. Но могу поймать нужную форму после пары десятков cmd+Z.
Если основу формы в продукте задал кто-то до тебя — ты на верном пути, если первая мысль не создать новое, а понять, в чём система и как с этим жить дальше. Это как с интерьером: необязательно уметь создавать предметы самостоятельно, но нужно видеть гармоничные сочетания и уметь дополнить их в случае чего.
Форма выражает настроение и характер интерфейса. Это система координат, в которой развивается набор выразительных средств. Она рождает первое впечатление и оставляет характерный осадок в памяти, а потому является отдельной ценностью для любого продукта.
Цвет является отчуждаемой частью формы. Он подчеркивает единство элементов на экране, выставляет акценты, создает узнаваемое пятно. Цвет обычно извлекается из логотипа или доминирующей формы.
Шрифт — это тоже форма. А значит, он может быть уникальным для продукта и представлять отдельную ценность.
Так в своё время ВКонтакте выбрали системный, но редко используемый в вебе, шрифт Tahoma и получили узнаваемые мелкие буковки.
C каким-нибудь Arial набор уникальных черт был бы скромнее:
Интерфейсы MacOS безошибочно узнаются во многом благодаря округлым строчным и контрастным заглавным шрифта Lucida Grande:
Уверен, благодаря Roboto, каждый узнает платформу:
Однажды мой коллега пошутил: «У нас в рекламе вместо голых девушек голый текст». Букварный Textbook надежно закрепился за Яндексом.
Другими словами, шрифт даже неподготовленные люди чувствуют и соотносят с брендом. Рисунок букв имеет не меньший вес, чем форма или цвет логотипа — когда из поля зрения пропадает лого, когда никуда не лезет фирменный цвет, остается шрифт.
Почему я так много говорю об идентификации продукта? Потому что это рамки: форма, цвет, шрифт — они задают правила игры, которых следует придерживаться, чтобы продукт не терял лицо в ряду с остальными, чтобы не было стилистических колебаний и человек мог сосредоточиться на самом важном, на содержании.
Содержание
Любой интерфейс — это иерархия элементов. Формой, размером, цветом, расположением и контекстом можно объяснить, что главное, а что второстепенное, на что стоит обратить внимание, а что можно пропустить.
Текст тоже имеет иерахическую структуру. Заголовки, подзаголовки, абзацы, вложенные списки. В тексте тоже есть важные и второстепенные вещи. Многие приемы, которые проделывают с интерфейсом, можно проделывать и с текстом: делать его проще, понятнее, интереснее, короче, избавляться от двусмысленности и так далее.
Текст — частный случай модели данных, вокруг которой проектируется интерфейс. Если отойти на шаг назад, то можно увидеть, из чего вообще состоит процесс визуализации продукта. Простой пример с интерфейсом формы нового письма в почтовом клиенте. Для начала формализуется модель входных данных письма:
Поверх данных рисуется интерфейс. Модель данных одна, а форм их представления может быть бесконечно много. Одна из них, в данном случае, форма нового письма:
Из данных отбросили поля «от» и «дату», а «копию» спрятали в опции. На основе этой же модели данных можно создать еще пару представлений: само письмо и его сокращенная версия в колонке выбора тредов.
Таким образом, перед началом работы над интерфейсом дизайнер должен досконально изучить модель данных, для которой он собирается делать представление (интерфейс).
Возможно, из-за слишком простого примера последнее утверждение звучит неубедительно. Вот кое-что похитрее. Я упоминал, что работал в научно-популярном ресурсе программистом и, в последствии, дизайнером. Так вот чтобы создать такой калькулятор калорий, мне пришлось прочитать кучу статей о правильном питании и собрать нужные данные о 360 популярных продуктах:
Для реализации онлайн фитнес-инструктора мне вообще потребовалось прочитать небольшую книжку по физ. подготовке.
Далеко не всегда модель входных данных имеет четкий и аккуратный вид. И часто задачей дизайнера является её формализация и доработка.
Для промо-экрана входными данными обычно являются потребность подчеркнуть определенные свойства продукта, создать нужное настроение вокруг покупки. Грубой ошибкой для дизайнера будет нарисовать так называемую заготовку, которую кто-то потом заполнит рекламным текстом. Дизайнер и копирайтер должны сплетать в единый образ слова и графику, чтобы получалось так:
а не так:
Ведь весь интернет завален одной той же конструкцией «картинка + текст»:
И во-многом от дизайнера зависит, станет ли эта конструкция чем-то большим:
или нет:
Система
Далеко не у каждого дизайнера есть опыт длительного сопровождения сложного продукта. Наверное, ещё меньше тех, кто стоял у истоков. От этого столько непонимания и недоверия к системному подходу: структуры данных, логические схемы, сложные прототипы и так далее.
Много ли дизайнеров могут перечислить все типы и состояния кнопок, использованных в их интерфейсе? Могут ли вспомнить линейку размеров: какая высота у маленькой кнопки, а какая у средней или вон той большой?
Мне всегда нравилось разглядывать детальки Lego, пытаться соединить разными частями друг с другом. Иногда казалось, что их создатели сами не знают всех комбинаций, но следуют ряду каких-то строгих правил, и в результате любой выступ на куске пластика можно соединить с любой выемкой. Так из ограниченного числа простейших элементов можно собирать бесконечное количество объектов любой сложности.
Как я перенес основную идею Lego в интерфейсы. Вот простейшая кнопка:
У кнопки есть состояния. Много состояний:
У системного подхода есть особенность: в самом начале приходится повозиться, зато потом сплошные бонусы.
Теперь из нескольких слипшихся кнопок можно собрать радиогруппу:
Выпадающий список — тоже кнопка типа «dropdown»:
Всё из той же кнопки собирается слайдер:
Тумблер — это белая кнопка внутри checked-кнопки:
Чекбокс — это checked-кнопка с галочкой:
От элементарных элементов можно переходить к составным (ещё один простейший элемент — поле ввода). Поисковая форма:
Комбо-бокс:
Форма оплаты:
Часто возникает задача подсветить какой-нибудь элемент формы, указать на ошибку ввода, например. Для этого можно использовать контрастный popup:
До этого была заявлена линейка размеров: 24, 28 и 32 px. Теперь все контролы от кнопки до слайдера имеют именно такую высоту, и всплывающим подсказкам логично встать в эту же линейку. Так в форме всплывающие подсказки даже напротив каждого поля не будут мешать друг другу, и все элементы встанут по вертикальным и горизонтальным направляющим.
Отступы между элементами тоже можно зафиксировать в линейке. У меня это 6, 10, 16 и 20 px — чтобы каждый делился на два.
С одной стороны, это очень дисциплинирует и помогает. С другой, набор выразительных средств и их модификаций со временем увеличивается, связи между элементами усложняются, и следить за такой растущей моделью становится всё труднее. В графическом редакторе такие тонкости не зафиксировать, многое приходится держать в голове. Когда пытаешься кому-то рассказать, часть смысла теряется. Через время о многом забываешь сам.
Ещё раз объясню, почему все так непросто устроено. Представьте себе интерфейс поиска, который должен что-то отвечать на любой запрос. Отвечать не просто ссылками с текстом, а объектами, музыкальным плеером, видео, картинками, картой, телефонами и адресами, товарами с ценой и кнопкой купить, рекламными объявлениями, формами, калькуляторами и конвертерами, графиками и счетчиками. Теперь представьте, что каждый ответ интерактивный: его можно трогать, тот разъедется или покажет новый блок рядом. Это только интерфейс основного поиска. А еще есть поиски по типам данных: видео, картинки, музыка, карты, товары, люди, новости, словари, автомобили и так далее — эти поиски должны быть выглядеть и работать, как основной, но каждый из них обязательно привносит что-то своё. Кроме поисков есть просто сервисы, которые тоже должны выглядеть и работать, как… Думаю, теперь вы понимаете.
Возникает потребность в инструменте, который позволит управлять конструкцией без экспоненциального роста стоимости добавления в систему новых компонент. Но Титаником тоже управляли. Мне больше нравится слово жонглировать.
Я вижу, как коллеги постоянно ищут серебряную пулю с графическим интерфейсом. В inDesign есть классы стилей для текста, в Axure из переключающихся экранов можно собирать прототипы, в Sketch можно создавать библиотеки объектов и собирать экраны из их копий. Рано или поздно каждый из инструментов упрется в потолок: в редакторе нельзя определять поведение элементов, а в среде прототипирования, скажем, нельзя иметь библиотеку объектов и нельзя определять другую динамику, кроме переходов между экранами.
А я вместо потолка уже который год вижу открытый космос. И чем дальше я лечу к звездам, тем больше мне кажется вселенная. Первый уровень просветления у человека наступает, когда он учится HTML-верстке. Работа со списками, объемными текстами и таблицами наконец-то становится для него удовольствием: можно играть со множеством настроек, добиваться нужного баланса и просветов, проверять множество вариантов представления с разными наборами данных без малейших усилий.
Иногда в тестовых заданиях мы просим прислать макет красивой таблицы с данными по 170 сотрудникам или собрать пару страниц документации с разделами и подразделами, кусками кода, списками, таблицами методов и прочим форматированием. Тут либо человек маньяк, который руками в фотошопе аккуратно расставит 170 разных портретов, либо напишет скрипт, который размножит верстку на 170 друзей из фейсбука — оба типа людей нам интересны.
Уверены ли вы, что вас такая сложность не коснется? А стоит ли такой сложности избегать, или это новый уровень? Уверены, что ваш проект через пару месяцев не обрастет парой десятков новых экранов? Если вы работаете с потоком однородных заказов, вроде банковской сферы, неужели, вам никогда не хотелось вынести общие знаменатели за скобку? А другому дизайнеру из команды доверяли когда-нибудь соседние экраны делать?
Я не стану здесь показывать примеры кода, которые экономят часы и дни ручного труда; глупо в наш век давать ссылки на книги или ресурсы про CSS и JavaScript. Здесь мне очень хотелось показать перспективы такого развития своих навыков. Освоить инструменты разработки не ради того, чтобы что-то доказать окружающим, не ради того, чтобы уметь всего по чуть-чуть, не ради того, чтобы понимать, о чем шутят разработчики, а ради того, чтобы пробить тот единственный потолок, за которым космос.
Критика
Так как отличить хорошую работу дизайнера? Выше я рассказал о ее составляющих: о внятной и эмоциональной форме, о чувстве языка и о системном подходе. И каждая составляющая должна следовать цели продукта. В хорошей работе вы должны увидеть однородные, правильно подобные и близкие продукту формы, в которых словами или образами расставлены верные акценты; вы должны ясно увидеть сообщение.
Это штука с другой планеты, она может всё:
Немного сбить с толку и обезоружить критические фильтры читателя перед началом статьи:
Раз человек сюда зашел, нам нужно его чем-то задеть — стреляем шрапнелью:
У нас для тебя очень много музыки, не стесняйся, заходи:
Сейчас ты этот досмотришь, а у нас тут ещё куча похожего, тоже в этом году выходит:
Наш кругозор шире, чем ты думал — просто спроси:
Давай смотреть картинки; поверь, тебе не надоест:
Просто ткните пальцем, какой стиль вы хотите:
Теперь, если увидите красивое здание в Киеве, наверняка окажется, что это мы его построили:
Вы только что сэкономили час своего времени:
У меня всё.
Надеюсь, вы узнали что-то новое об интерфейсах, о том, чем мы занимаемся в Яндексе, и о том, чем занимаются мои коллеги в других проектах по всему миру. Надеюсь, вам было интересно.
