Главным событием Yet another Conference 2012 стала перезентация Яндекс.Браузера. В ней участвовал и его главный дизайнер Костя Горский. Он рассказывал о том, каким получился интерфейс браузера Yandex. А в интервью, которое мы успели взять у Кости перед началом его собственного доклада «Что разработчикам интерфейсов надо знать о дизайне», он рассказал, как принимались решения во время работы над интерфейсом Яндекс.Браузера и почему он получился таким, каким мы его теперь видим.
На презентации ты говорил о том, что когда мы начинали проектировать наш Браузер, то смотрели и на те, которые уже существуют и что так мы поняли, как слабо отличаются их интерфейсы. Казалось бы, если все выглядят одинаково, можно делать так же и это вроде бы простая задача. Почему нас это не устроило и мы всё равно решили подойти к дизайну серьёзно?
Ну, это бы было неинтересно. Они как бы выглядят одинаково — на самом деле это не так. То есть их интерфейсы построены по одинаковому формату, но есть очень много различий в нюансах. И есть множество мест, которые можно улучшать. Кроме того, мы наблюдали за тем, как люди работают, пытались подсмотреть, что ещё можно улучшить. И так пришли к идее о том, что браузер должен быть как можно более невидимым. То есть это просто такое окно в мир, и чем меньше там интерфейса, тем лучше. И стали копать в эту сторону.
Есть два подхода к тому, как сделать что-то новое. Можно посмотреть на то, как люди решают нужную задачу существующими способами. Ты говоришь, что мы это сделали. А можно изучить то, как это уже было реализовано. И, как было сказано, мы изучили историю развития браузеров. Скажи, что принесло больше каких-то интересных открытий лично тебе, например?
Сложно сказать. Наверное, сейчас больше пищи для размышлений пришло из наблюдений за тем, как люди работают с браузерами в наши дни. Но и историческая часть была очень важной. Благодаря тому, что мы заглянули в прошлое, сложилась цельная картинка. Кое-что об этом мы сказали на презентации, но в целом исследований было гораздо больше.
Мы посмотрели на все версии всех основных браузеров. Посмотрели на то, что в них изменялось, выстроили их в таймлайн, соотнесли с долями на рынке на тот момент. То есть мы изучали, как дизайн интерфейса влиял на индустрию. Это определённо помогло нам собрать некую картину. А наблюдения за людьми дали какие-то конкретные вещи.
Например?
Например, видно, насколько мучительно людям было открывать новый сайт. Сначала нужно было прицелиться мышкой в какую-нибудь кнопку с плюсиком. Она открывала страницу, на которой нарисованы скриншоты сайтов. Нужно было навести курсор на скриншот, а потом вновь прицелиться мышкой на крошечный крестик, чтобы закрыть вкладку, в которой человек находился. То есть мы увидели много лишних действий, и стало сразу понятно, как это улучшить.
В итоге мы решили какую-то из их трудностей?
Думаю, да. Те сайты, до скриншотов которых нужно было добраться, в Яндекс.Браузере показываются под адресной строкой в любой вкладке. Не надо ходить на страницу нового таба.
Ты говоришь, что было много мелочей, с которыми пришлось работать. Можешь рассказать историю какой-нибудь одной, которая тебе кажется самой важной или показательной?
В Браузере есть кнопка «Назад». На ней нарисована иконка — стрелочка, которая ведёт влево. Поскольку мы рисовали всё с нуля и очень тщательно думали о том, как это сделать, перебрали несколько десятков вариантов таких стрелочек. Конечно, нам хотелось как-то творчески самовыразиться, найти отличия в этом месте. Мы пробовали и какие-то экзотические варианты. Сделать, например, стрелку в виде треугольника, похожего на кнопку play, смотрящую назад. Даже попробовали пожить с таким браузером.
Такая, кажется, у Safari.
Да, но там их две. Кнопки «Назад» и «Вперёд» объединены, поэтому там просто два треугольника, которые считываются как стрелки. Когда он у нас был один, это выглядело как-то дико. Хотелось рядом с этим треугольником поставить круг, квадрат и другие фигуры. Примерно в период работы над этими элементами я читал интересную книжку про историю русской иконописи. И в ней затрагивались схожие вопросы. Иконописцу всегда хотелось творчески выразиться, что-то привнести, но существовали строгие каноны — некоторые правила, по которым нужно рисовать иконы. И этому было объяснение: рисовались лики святых, которых художник уже не видел в реальности. Он и так рисовал, грубо говоря, по рассказу, и даже при небольшом изменении могло получиться совсем не то. Канон должен был обеспечивать достоверность изображения.
В какой-то момент мы поняли, что и у нас то же самое. Эта стрелка — каноническое изображение, принятое во всём мире. Человечество решило, что если есть горизонтальная палка и уголок, то это стрелка. И чего мы, собственно, мучаемся? Надо взять канон, оттолкнуться от него, а свободу найти в том, как его красиво вписать.
Но где взять канон стрелки?
Он нашёлся. Нашёлся среди пиктограмм, которые в 70-х годах разрабатывал для систем навигации Американский институт графического исскуства (AIGA). Эти пиктограммы используются сейчас как референс для большинства навигационных систем в аэропортах, выставочных и торговых центрах — там, где нужно как-то направлять людей.
Они их именно рисовали или тоже на чём-то базировались?
Они, как я понимаю, очень глубоко изучили мировые коммуникационные системы и пытались разработать универсальный язык пиктограмм, который был бы понятен во всём мире и простыми выразительными средствами обозначал бы основные вещи. То есть те, которые важны в незнакомых местах: как куда-то пройти, где туалет, где выход, где кафе. Среди всего ими нарисованного были и стрелки, над которыми очень долго работали. У них потрясающе выверенные пропорции, соотношения сторон, углы. Всё было просчитано и многократно переделано. И мы взяли их стрелку в качестве образца и вписали в интерфейс браузера. Конечно, её нельзя было просто «налепить». Мы её переделывали, вмешивались в пропорции, вписывали в пиксельную решётку. В итоге у нас появилась такая стрелка для кнопки «Назад», которой самой по себе, мне кажется, можно гордиться.
Да, нам нравится. А что в нашем Браузере заставляет тебя гордиться, какие решения кажутся самыми правильными? Пусть они могут не отличать нас от других, но мы к ним, например, тяжело пришли и поняли, что это действительно то, как должен выглядеть интерфейс браузера.
Мне нравится, что нам удалось решить некоторые задачи очень изящно. Как раз в духе минимализма, которого мы придерживаемся. Например, адресная строка, которая в то же время и поисковая. Это реализовано сейчас почти во всех современных браузерах, но перед всеми ними стоит проблема того, как приучить человека ею для поиска пользоваться. Изобретено много разных способов, объясняющих человеку, что в омнибокс можно вводить не только адреса сайтов, но и запросы. Появляются обучающие страницы, подсказки, видеоролики, в самой строке пишут Search, «Вводите сюда запрос», что-то еще.
Нам, как мне кажется, удалось найти гораздо более элегантное решение: мы просто рисуем вокруг строки жёлтую рамку в форме стрелки. А практически у каждого человека, живущего в нашей стране, бывавшего в интернете и пользовавшегося Яндексом, есть ассоциация жёлтой стрелки с Поиском Яндекса. Получается, ничего не нужно приписывать. Строка просто сама подсказывает, что она поисковая и в неё можно вводить запрос. Мне очень нравится это решение.
Классная штука получилась с кнопкой «Вперёд», которую мы не показываем большую часть времени. Но нельзя сказать, что это мы изобрели.
То есть иногда хорошо не показывать?
Да. Но в ней кайф в том, что её вроде как нет и в то же время всегда, когда она нужна, она есть. То есть удалось сделать какую-то такую штуку, которая позволяет сделать интерфейс чище и меню минималистичней и не вредит привычкам. Такие решения мне очень нравятся.
Расскажи про логотип. Откуда? Что это?
С логотипом было интересно.
Для начала: почему он круглый?
Потому что логотип браузера должен быть круглым. Это тоже такой канон. Всё началось 20 лет назад, когда все только рисовали логотипы браузеров и использовали изображения земного шара. Интернет — всемирная паутина, которая оплетает его. И надо было земной шар и рисовать. Потом потихоньку этот шарик размывался, но форма все равно оставалась. Все логотипы браузеров круглые, и сейчас это уже дань традиции, с одной стороны. С другой, тоже следование формату, потому что люди привыкли и на подсознательном уровне чувствуют, что круглый логотип на рабочем столе – это браузер. Если бы мы сделали что-то другое — шестиугольное или еще какое-нибудь, — то люди бы привыкли, но было бы ощущуение, что что-то не то.
Мы пытались сделать логотип довольно долго, обращались к разным дизайн-агентствам, в том числе и зарубежным. А в итоге совершенно случайно идея родилась у одного из наших менеджеров, Дмитрия Тимко. Он ручкой на бумаге изобразил идею логотипа. Это был шарик и его лапками обхватывала буква Y. Нам сразу же понравилось и мы отправили картинку нашему дизайнеру из питерского офиса Мике Нежданову. Он нарисовал пять вариантов, последним из которых был арбуз, который уже тоже ходит в интернете.
Но, на самом деле, над ним ещё работали какое-то время, да?
Конечно. В эскизе была идея сама по себе. Мы долго выбирали, как именно буква должна обхватывать шарик, и долго работали над тем, чтобы всё было идеально. Построили трёхмерную модель, фоткали её в разных ракурсах, вращали, голосовали за то, какой вариант выбрать. Остановились на том, который, как нам казалось, был более динамичным и сбалансированным. Его уже тщательно перерисовывали.
Мне, конечно, странно такой вопрос задавать, но кажется, что людям извне это непонятно. Как долго мы работали над дизайном, как подробно, сколько людей этим занималось?
Три человека работали над Браузером фултайм и ещё трое парттайм. Они тоже вносили очень серьёзный вклад. Можно сказать, что всего шесть человек, если говорить о дизайне. У нас замечательная команда очень талантливых профессионалов.
А время?
С февраля. Где-то в начале февраля мы стали делать пробные эскизы, рисовать схематичные картинки того, как разложить интерфейсы. И потом по-тихоньку детализировали, отрисовывали внешний вид, пробовали бесконечное количество разных вариантов.
Но нужно понимать, что эти они только рисовали, а было еще много людей, которые изучали старые интерфейсы, пытались проводить какие-то исследования.
Да-да. Все дизайнеры тоже в этом участвовали. Да, в итоге, конечно, гораздо больше над этим работали. Плюс наши менеджеры, которые проделали сумасшедшее количество работы, были очень глубоко в теме, подсказывали и направляли нас. Без них мы бы копались бесконечно.
Видишь ли ты, куда дальше может идти интерфейс Браузера? Необязательно говорить о каких-то конкретныех фичах. Просто кажется, что он настолько простой, что ничего нового добавить в него нельзя. Что еще можно упростить? И нужно ли?
На само деле, нужно и, конечно, мы будем этим заниматься. Есть разные варианты развития. Может случиться так, что браузер вообще заменит операционную систему. Это путь, по которому, кажется, собирается идти Chrome. Может быть, и мы пойдём туда же. А если не пойдём, есть множество вещей, которые можно делать. Потому что уже сейчас понятно, что мы, Яндекс, знаем всё про все сайты в интернете. Это знание совершенно точно может улучшить Браузер во всех мелочах. И я думаю, что сейчас мы этот потенциал используем процентов на 10. Грубо говоря, мы столько знаем про каждую ссылку, что это может драматические изменить user experience. Будем пытаться это сделать. Самое классное, что этой технологии нет больше практически ни у кого. Подобное могут делать лишь Google и Microsoft — и всё.
То есть очень большие компании, которые знает очень много про людей в интернетах.
Да, те у кого есть поисковые технологии и мировые индексы.
Автор: anton
