Лого vc.ru

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

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

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

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

Поделиться

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

Норм Кокс: Иконка «гамбургер» 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 — прим. автора). Мощное свидетельство того, что время не властно над простотой.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

это у вас случайно не стартапщина? в которой я оставил этот комент?

Это три палки о двух концах.

0

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

Ну назовите ее, «Как появилось меню-гамбургер» или «ui: Меню “гамбургер” история возникновения и тенденции.»

0

«Меню-гамбургер — палки, концы: охуительные истории от мужика на фоне градиента»

Вы же сами понимаете, что заголовки — это палка о двух концах.

Про спонсорские палки действительно смешно :)

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

Что за гамбургер?

0

Интервью - кошмар. Интервьюер задает тупые вопросы, показывающие его некомпетентность в этой области. Почему? Потому что он бы не задал эти вопросы, если бы задумался над первым ответом своего респондента. Посдедний, кстати, порадовал - настоящий профессионал, и на удивление сдержанный, так как терпеливо ответить на такое количество тупых вопросов не просто. В конце уже вырывалось "Тебе же сказали, что все зависит от контекста!!!".

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Антон Адамов

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

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Yus Teryukalov

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

«В кризис банк никто не купил, пришлось развивать самому»
0
Philip Salnikov

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

«Я потратил $10 млн и два года на то, что мог выяснить за 4 недели»: основатель Twenty20 об ошибках проекта
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Показать еще