«Это палка о двух концах»

Дизайнер Три Во взял интервью у создателя меню «гамбургер» Норма Кокса — об истории иконки, преимуществах, недостатках и современной популярности визуального решения.

В рубрике «Интерфейсы» — перевод беседы.

Три Во: Расскажите о появлении иконки «гамбургер».

Норм Кокс: Иконка «гамбургер» 80-х годов была создана в силу необходимости. Цель была одна — удовлетворить определенные потребности в рамках парадигмы визуального и интерактивного интерфейса компьютера Xerox Star. Кроме того, виджет (графичеcки) был ограничен характеристиками дисплеев того времени (черно-белые, 72 dpi).

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

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

И хотя мы довольно быстро поняли, что идеальных виджетов или интерфейсов не бывает, Xerox Star смог в корне изменить то, как люди теперь работают и взаимодействуют с компьютерами. А виджет «гамбургер» просто стал еще одним механизмом в наборе инструментов компании Star — наряду с кнопками, полосой прокрутки, меню, иконками, флажками и прочими дизайнерскими кирпичиками, из которых складывались интерфейсы будущего.

С тех пор как дебютировал первый простой дизайн «гамбургера» прошло 35 лет. Интерфейсы естественно и органично изменились. Изменились и технологии, стоящие за ними, характеристики дисплеев, пользователи и их поведение, способы использования интерфейсов, их значимость.

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

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

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

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

Как вы пришли к такому UX? Почему вы решили, что меню следует спрятать за иконкой?

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

Нам нужно было место для того, чтобы (a) сбросить туда лишние командные кнопки и (b) собрать вместе кнопки, c которыми можно было бы взаимодействовать с помощью курсора. И в данном случае нам показалось, что лучше всего будет добавить целевую кнопку, под которой бы находился список кнопок «больше» или «другое» или «дополнительно». В результате и появился виджет «гамбургер» с тремя горизонтальными линиями, которые представляли собой выпадающее меню.

Каковы, на ваш взгляд, сильные и слабые стороны меню «гамбургер»? С точки зрения дизайна и пользовательского опыта?

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

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

Если честно, я даже не осознавал, что популярность иконки так сильно возросла, пока около двух лет назад мне не позвонил один парень и не попросил меня дать интервью в качестве дизайнера.

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

Мне лично кажется, что, скорее всего, какой-то UI-дизайнер где-то внедрил символ с тремя горизонтальными линиями, чтобы таким образом представить всплывающее меню, и вряд ли он в тот момент знал, что иконка была создана гораздо раньше для Xerox Star.

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

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

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

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

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

Некоторые компании используют различные инструменты для одинакового пользовательского опыта: Google пользуется иконкой «три точки», The Atlantic добавляет слово «меню» к иконке-«гамбургер» и так далее. Как вы думаете, все эти попытки успешны?

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

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

Например, почему мы до сих пор используем значок дискеты для функции «Сохранить»? Или «ножницы»? Или «планшет с зажимом для бумаги» для функции «вставить»?

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

Я советую прежде всего вооружиться глубокими знаниями теории и практики UI-дизайна, и не давать сбить себя с толку временным капризам дизайна и мнением непрофессионалов.

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

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

Например, иконки созданные для Xerox Star были спроектированы умышленно просто, в них прослеживается простота линий и картинки. Интересно то, что тридцать лет спустя в дизайне иконок снова наблюдается тренд в сторону упрощения линий и картинок (это относится к Windows 10 и Apple iPhone — прим. автора). Мощное свидетельство того, что время не властно над простотой.