Сегодня Яндекс.Диск полностью обновил свой веб-интерфейс. Причём он получил не только новый внешний вид – он сменил концепцию и логику, которые за ним стоят. Более того, многие части этого — начало важных изменений для интерфейсов Яндекса в целом. Мы двигаемся к тому, чтобы перестать быть сборкой разных сайтов под одним логотипом, а стать в некоторой степени единым веб-приложением.
В первой версии Яндекс.Диска логика его веб-интерфейса мало чем отличалась от той, что используют другие облачные хранилища: это были такие же папки и файлы, но внутри нашей Почты. Теперь важен контент и его подача.
Меня зовут Сергей Томилов, я был одним из тех, кто работал над новым дизайном. Сегодня я хочу рассказать вам о том, как шла работа, какие у нас были сложности, какая за всем этим стоит концепция и как она влияла на дизайн.
Концепция
Сегодня у многих людей, даже не самых продвинутых, часто есть несколько устройств, на которых они открывают одни и те же сервисы. Их техническая реализация для ноутбуков, планшетов или смартфонов может быть разной, но смысл остаётся общий. И то, с чем люди имеют дело, это всё в меньшей степени файлы и форматы, и всё в большей — содержание. Вы храните не просто файлы в .jpg, .epub и .mp3, а фотографии, книги и музыку. И на каждом устройстве они будут фотографиями, книгами и музыкой.
Поэтому уже понятно, что и в облачных хранилищах обычные люди хотят работать не с файловой структурой, а с содержанием. Им нужно помогать строить структуру для их контента. Конечно, мы не первые и не единственные, кто это придумал. Например, в iOS всё, снятое на камеру, само раскладывается по альбомам с видео и фото, по годам и местам. Хотя одновременно сохраняется в общем потоке.
Так мы подошли к формулировке нашей идеи. Мы не хотим, чтобы Диск был комбайном, смешивающим всё в одну сущность. Он должен помогать человеку структурировать контент и уметь работать с любыми его типами, как приложение. Но сформулировать концепцию — это одно, а реализовать всё в красивом и удобном интерфейсе — другое.
Процесс
Теперь хочется рассказать о том, какой путь мы прошли. Редизайн — это первый шаг к новому Диску. Работа над ним идет уже практически год. Мы пробовали разные варианты, проводили эксперименты, раскатав бету на сотрудников Яндекса. Мы постарались облегчить интерфейс, сфокусировавшись на самом важном.
Прежде всего, Диск уже вырос из подраздела Яндекс.Почты. Пора было делать из него полноценный сервис.
Идея контентного деления появилась уже тогда, но, если честно, смутно. И заметно, что в таком дизайне ей будет тесно, а развивать её мы планируем долго. Нужно создавать интерфейс, в котором сразу будут заложены точки роста. Кстати, концепция правой панели со свойствами выбранного объекта появилась сразу и дошла до финала.
Важность полнотекстового поиска по Диску, содержащему несколько сотен файлов, переоценить сложно, поэтому мы отвели ему заметное место. Он переместился на привычные место — в шапку сервиса.
Дробление интерфейса на части получилось чересчур сильным, а поисковая строка привлекала слишком много внимания. Но Диск уже начал выглядить как приложение (особенно на планшетах), а внизу появилась панель контентых срезов, которые есть у нас в планах и о которых я расскажу ниже.
Панель справа стала содержать все основные возможности действий с файлами и получила место для крупных превью. Исчезло дублирование кнопок сверху и снизу — все они поместились на ней же. Создание публичных ссылок я тоже в итоге упростил — поделиться файлом теперь можно сразу после его загрузки. Чтобы отправить ссылку в социальную сеть, не нужно делать два клика — сразу нажимайте на иконку нужной соцсети.
В первых версиях превью картинок в самих папках я хотел сделать пропорциональными, но потом решил упростить всем жизнь, и они стали квадратными.
Работая над тем, как будут представлены в вебе разные типы контента, надо было помнить о разных важных моментах. Например, листалка картинок должна переключаться между ними по клику на само изображение — так, как пользователи привыкли к этому на сайтах. А исчезновение окна просмотра не должно быть для человека неожиданностью — закрываться оно должно легко и понятно.
Вместе с изменением дизайна мы постарались интегрировать в интерфейсы Диска все те действия, которые привычны для пользователю в ОС. Загружать и перемещать файлы можно простым перетаскиванием в нужную папку. Чтобы перетаскивать было удобнее, мы добавили выезжающее справа дерево папок.
Также в веб-интерфейсе Диска появились групповые операции. Для выделения нескольких объектов можно использовать стандартные комбинации клавиш: shift +, ctrl(cmd) +.
Выкатив бету на сотрудников Яндекса, мы практически не получили никакого негативного фидбека. Но неожиданно части наших коллег очень сильно не понравилась иконка папки, третья этой на картинке.
Было много примерно таких комментариев: «ЭТА ПАПКА РЕЖЕТ МНЕ ГЛАЗА», «Это же винда 3.1», «О, какое убожество». Папка и правда в живом продукте была излишне детализированной и подверглась дальнейшим модификациям. Наиболее заметные вы видите.
Но помимо этого мы получили от коллег большое количество отзывов, которые позволили нам многое допилить к публичному запуску. Например, я считал, что люди взаимодействуют с сайтом Диска, как с любым привычным сайтом — то есть набором веб-страничек со ссылками. Но мы посмотрели на цифры и удивились тому, что люди действительно пользуются диском по правилам ОС. Внутренним тестом мы нашли серьёзное упущение в дизайне. В его старой версии было дерево папок и люди перемещали их. Так появилось дерево для перемещения файлов и возможность удалять файлы и папки, перетаскивая их на слово «Корзина» в строке навигации.
Дальнейшие шаги
На самом деле, история о том, что для решения задач людей надо структурировать информацию и содержание, для Яндекса не новая. Наш поиск уже почти 17 лет находит, ранжирует и показывает людям то, что они ищут. И делает это так, чтобы им было удобно ориентироваться в найденном. Яндекс — одна из тех компаний в мире, которая умеет находить для человека ответы на его вопросы. И это не html-страницы и даже не сайты, а адреса, новости, изображения, объекты на картах, рецепты и т.д. Все эти знания и понимание людей найдут применение и в новом Диске.
Во-первых, это касается структурирования объектов. Для этого мы придумали сделать в Диске контентные срезы, которые будут определять их тип, в зависимости от него структурировать и «запускать» под каждый своё веб-приложение. То есть фотографии получают большие превью, музыка — плеер, архивы — структуру, в которой можно работать с привычными папками, видеофайлы — плеер, позволяющий просмотреть объект прямо в вебе. Первыми контентные срезы появятся в будущем у самого популярного типа объектов — фотографий.
Также в Диске изменилась фильтрация папок и файлов по каким-то общим признакам. Например, можно перейти к общим папкам, публичным ссылкам, вложениям из Почты. Мы только начали работу в этом направлении и будем двигаться дальше.
Такая логика работы уже распространяется и на клиент Яндекс.Диска. Например, вы делаете скриншоты, а они складываются в папку «Скриншоты»; подключаете камеру или телефон, и фотографии отправляются в папку «Фотокамера».
Во-вторых, будут развиваться глобальные провязки Диска с Яндексом. Уже сейчас объекты из него можно прикреплять к письмам в Я.Почте, добавленные песни слушать в приложении Я.Музыки, сохранять в него альбомы из Я.Фоток. Кроме того, технологии Диска обеспечивают синхронизацию в нашем Браузере, пользователи которого могут сразу сохранять из него прямо в своё «облако». И таких связей будет ещё больше.
Не всё реализовано сейчас. Эксперименты еще не закончились. Например, даже сейчас мы выкатываем новый интерфейс в двух разных вариантах: в одном из них навигация по типам объектов будет наверху, в другом — внизу. Внутри команды не все верят в выживаемость нижней чёрной панели, поэтому мы решили провести эксперимент. Уже через пару недель после первых результатов мы будем трансформировать Диск. И, кажется могу показать, как это будет в ближайшее время (всем нравятся картинки из будущего).
Но в итоге очень многое может измениться. Мы только начали работу над обновлением Яндекс.Диска, но думаем, что лучше раньше увидеть реакцию людей, чтобы делать сервис таким, каким он будет им нужен.
Автор: 3apa3a
