Автор Hype.ru

Как создавался редизайн Reddit

Как создавался редизайн Reddit
Фото здесь и далее Reddit

Команда Reddit из 20 дизайнеров больше года занималась переработкой внешнего вида одного из самых популярных интернет-ресурсов в мире. В новом дизайне тоже используется талисман сайта инопланетянин Snoo. Редактор крупного издания о технологиях Wired Ариэль Пардес (Arielle Pardes) рассказала подробную историю редизайна Reddit.

В дождливый день в Сан-Франциско около дюжины человек сидели за конференц-столом в штаб-квартире Reddit, в кабинете, который они прозвали военной комнатой. Да, это был далеко не первый и не последний раз, когда группа дизайнеров собиралась здесь, чтобы обсудить подробности проекта, над которым она работала больше года, – пишет Ариэль Пардес. – Но этот день был особенным — дизайнеры подготовили обновление для сайта Reddit, который насчитывает 330 млн пользователей со всего мира. Ирония заключается в том, что до этого дизайнеры, работающие в Reddit, словно не осознавали — перегруженный текстом сайт был примерно так же привлекателен, как переполненный ящик электронной почты. В последние несколько минут перед анонсом все присутствующие критиковали язык обновления, а затем разместили на сайте новость, используя популярную на Reddit фразу: «Сегодня я узнал', что у Reddit есть команда дизайнеров».
'англ. TIL — today I learned. На Reddit есть целый раздел, где люди делятся тем, что узнали сегодня, используя эту аббревиатуру.

Это визуальное обновление Reddit стало первым почти за десять лет. Стив Хаффман, соучредитель Reddit и генеральный директор, сигнализировал о необходимости обновления ещё в прошлом году:

Многие из нас проповедуют Reddit и рассказывают людям, насколько это потрясающе, какое влияние ресурс оказал на их жизни, как он заставляет их смеяться и т. д. А потом новые люди решают зайти на Reddit в первый раз, — и они видят мрачный Крейгслист. Нужно это исправить.
'Крейгслист — популярный американский сайт с объявлениями.
Ариэль Пардес, редактор журнала Wired (фото: thinklab.com)

Итак, в течение последних полутора лет Reddit и его новая команда из 20 дизайнеров переделывали так называемую «главную страницу Интернета». Они приложили серьёзные усилия, чтобы использовать в новом дизайне то, к чему привыкли пользователи Reddit, и не заменять это чем-то незнакомым. Они спорили обо всём: от места размещения логотипа до того, как модераторы должны подогнать свои сообщества к доминирующему красно-оранжевому цвету всего сайта. Это был медленный и очень тщательный процесс, который каждый из участников воспринимал крайне серьезно.

Если вы перепроектируете Reddit, – говорит Диего Перес, глава отдела дизайна компании, – вы по сути меняете весь Интернет.

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

Reddit изменился впервые за десятилетие

На «новом» Reddit вы найдете панель навигации, заменяющую меню в левом углу, на котором были расположены ленты, подписки и профили. Три кнопки рядом позволят просматривать сайт тремя новыми способами: есть «карта» (card view), которая немного напоминает Facebook; классический вид (classic view), который заимствует язык дизайна из текущего Reddit; и компактный вид (compact view) для пользователей, которые хотят быстро прокручивать километры контента. Сообщения теперь открываются в «лайтбоксе» и пользователя не выбрасывает со своей страницы.

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

Благодаря новым шрифтам стало заметно, когда повторное нажатие на сообщение приведёт к переходу по ссылке или к новой странице. Под описанием для раздела r/all («Самые активные обсуждения на Reddit. Заходите, чтобы увидеть новые сообщения или поучаствовать в обсуждении») появится синяя кнопка для создания нового сообщения. И на всём ресурсе будут новые изображения Snoo, талисмана сайта, который исследует огромные планеты Вселенной Reddit.

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

История редизайна Reddit — это не просто одиссея, чтобы сделать Reddit немного приятнее. Это воспитательный роман' всего Интернета, – считает Ариэль Пардес.
Воспитательный роман или роман воспитания в литературе представляет собой жанр, подразумевающий психологическое, нравственное и социальное формирование личности героя на протяжении всего произведения.

Когда Хаффман с соучредителем Алексисом Оганяном запустили сайт в 2005 году, Reddit представлял собой анархистскую сеть, место, где вы были вольны сделать и сказать всё, что захотите, но только если сможете понять, как туда войти. Более десяти лет спустя Reddit вырос и стал чем-то другим, местом, где также можно обсудить игры и последние серии «Игры Престолов». Это ресурс не только для обмена информацией, но и для обмена идеями. Reddit много лет уверяет пользователей, что это сайт для всех. Но сейчас он впервые начинает так и выглядеть.

Во время первой недели работы дизайнера Переса в Reddit Оганян отправил ему заархивированную папку со скриншотами. Скреплённые друг с другом изображения представляли собой всю историю дизайна Reddit в хронологическом порядке. Там был вид сайта непосредственно перед запуском, когда на нём числилось только два пользователя: u/kn0thing — Оганян, u/spez — Хаффман. Правда, у u/kn0thing уже был отрицательный рейтинг — результат отметки пользователя u/spez в ответ на первое сообщение.

Прилагался и вид Reddit после того, как были добавлены комментарии в 2005 году, а после этого подразделы (сабредиты) в 2008 году. Не забыли и о том, как выглядел Reddit во время самого драматического редизайна рабочего стола, также в 2008 году, который включал новые способы сортировки постов и индикаторы (стрелки), показывающие, увеличилось ли количество сообщений. А вот скриншотов, охватывающих последнее десятилетие, в папке не оказалось. Проблема заключалась в том, что последнего десятилетия истории дизайна Reddit фактически не было.

За прошедшие годы Reddit кардинально изменился как в качестве компании, так и в качестве интернет-ресурса. После того, как Оганян и Хаффман ушли из компании в 2009 году, она пережила нескольких новых руководителей, один из которых уволился из-за того, что работа оказалась для него слишком напряженной и выматывающей, а другой ушёл после одной из самых больших тролинг-атак в истории от пользователей Reddit. В 2008 году сайт вырос: количество его пользователей увеличилось от 2 до 330 млн. Новые пользователи принесли с собой и новую волну: появились сообщества, часть из которых бросала вызов репутации Reddit, выступающего за свободу слова в разных острых ситуациях. Однако дизайн всё равно не поменялся.

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

Редизайн любого крупного веб-сайта — это стресс. Но изменение внешнего вида Reddit, который не трогали почти десятилетие, оказалось даже чем-то большим.

Сначала, помимо Переса, у компании даже не было команды дизайнеров, – рассказывает Ариэль Пардес. – В Microsoft, где раньше работал Перес, он возглавлял команду из 60 дизайнеров. В первое время разработчики Reddit работали буквально в пустой комнате на четвёртом этаже штаб-квартиры компании. Они затащили туда телевизор, пару стульев, небольшой передатчик ​​Wi-Fi, кучу бумаги и начали прикидывать, как сделать Reddit современным.

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

Когда вы спросите дизайнера: «Что вы мечтаете изменить в Интернете?», то ответом всегда будет: «Reddit больше всего нуждается во внимании», – говорит дизайнер Перес.

Однако Перес оказался не просто дизайнером. Он также был давним пользователем Reddit — «редитором», как он выразился. Поэтому он знал, что «редиторы» — находчивые существа.

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

Спросите любого из самых активных пользователей Reddit, как они просматривают сайт, и они, скорее всего, упомянут хотя бы одно стороннее приложение. Например, Reddit Enhancement Suite, один из самых популярных инструментов, был запущен в 2010 году, чтобы предоставить пользователям некоторые необходимые функции, которых нет в веб-клиенте Reddit. Он обычно используется модераторами Reddit, которые ежедневно проводят часы за модерацией онлайн-сообществ. Наиболее вовлечённые из них (они ещё остались в нескольких сообществах) потратили огромное количество времени, чтобы сделать специальный стиль своих подразделов в CSS и создать ботов для автомодерации.

Команда разработчиков вдохновилась этими решениями. Перес и его команда проводили множество часов в течение нескольких недель, обсуждая с модераторами сложные случаи — они разбирали их вместе. Также некоторых юзеров попросили создать дневники с описанием того, как они использовали сайт. Было изучено 2000 лучших сообществ Reddit: дизайнеры отследили, что сделали их модераторы, чтобы настроить стиль сообществ.

У нас была огромная таблица со всеми настраиваемыми параметрами, которые модераторы меняют в сообществах, – говорит Бен Раш, руководитель направления UX по редизайну.

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

Так выглядит главная страница Reddit сейчас

Пользователи Reddit не любят перемен

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

Больше не нужно кодировать или использовать сторонние дополнения, чтобы сделать что-то, что выглядит круто. Этот момент и представляет собой наиболее важное обновление во всём редизайне Reddit. Это не просто доведение сайта до вида образца 2018 года. Это уже подготовка сайта для следующего поколения «редиторов», – считает Ариэль Пардес.

Первая версия Reddit напоминала некий агрегатор ссылок. Это было место для просмотра ленты новостей, обмена мемами и шутками. Вскоре после запуска сайт разрешил комментарии для обсуждения этих ссылок. Каким был первый комментарий? В нём говорилось, что комментарии разрушат Reddit. В 2008 году, когда сайт запустил подразделы, пользователи снова воспротивились нововведению. По их мнению, новая функция отражала «шизофренический подход» Reddit к отображению контента. Далее последовало больше изменений: более крупная кнопка «комментировать», новые способы сортировки сообщений… Остается догадываться, каким «успехом» это всё пользовалось у юзеров.

Пользователи Reddit, как, впрочем, и большинство людей в Интернете, сопротивляются даже малейшим изменениям. Редизайн почти всегда вызывает ярость — посмотрите на примеры таких ресурсов, как Facebook, Snapchat или Digg. А на таком сайте, как Reddit, с 13-летней историей, сопротивление юзеров изменениям больше, чем обычно.

Самая большая ошибка — это революционный подход, а не эволюционный. Я согласен с тем, что текущий дизайн Reddit является отвратительным, но он работает, — пишет пользователь u/vusys в своём комментарии к посту про новый дизайн.

Однако для новых пользователей в старом дизайне Reddit было мало приятного.

Даже процесс создания первого сообщения мог сбить с толку. Там есть две кнопки: «Отправить новую ссылку» и «Отправить новое текстовое сообщение», и правильный вариант не сразу становится очевидным. Когда вы публикуете пост, вы не можете быть уверены, что он соответствует правилам сообщества. А, может быть, вы хотите создать собственное сообщество? Ну, удачи вам, — пишет Пардес.

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

Перемены нужны новым пользователям

В то время как пользователи Reddit всегда сообщали, что им нравится или нет в дизайне, компания никогда не проводила опросов за пределами собственного сообщества пользователей относительно удобства использования сайта. Теперь же была сформирована исследовательская группа из двух человек, которая изучала, почему некоторые люди присоединились к Reddit, но никогда не публиковали посты и не писали сообщений.

Эти исследователи, Аджит Кришна (Ajit Krishna) и Амуля Арадхула (Amulya Aradhyula), начали изучение поведения людей в конце прошлого года. Они разослали опросные листы и провели интервью с «редиторами» вместе с дизайнерами команды Переса. Затем каждую неделю Кришна и Арадхула приезжали со своими ноутбуками на Юнион-сквер в Сан-Франциско, где они обнаружили большое скопление людей со всего мира, просто сидевших и ничего не делавших. Исследователи подходили к человеку, сидящему на скамейке в парке, показывали ему страницу на Reddit и спрашивали: «Всё ли вам тут понятно? Вы понимаете, как добраться от точки A до точки B?». Так они обнаружили, что большинство людей понимает концепцию Reddit, но не догадывается, как и для чего использовать ресурс.

Новый дизайн подразумевает упрощённый интерфейс для создания постов, вставки картинок, видеороликов и ссылок

Исследования Кришны и Арадхулы помогли сделать выбор между разными вариантами дизайна: теперь на сайте есть большая кнопка, чтобы показать, как вы можете создать сообщение. Раньше форматирование текстовых сообщений требовало использования Markdown, облегчённого языка разметки, а теперь есть панель инструментов WYSIWYG. Раньше вы не могли комбинировать текст, изображения и ссылки в одних и тех же сообщениях, а сейчас можно залить это всё в один пост вместе со встроенными видеороликами. В новом варианте также видны рекомендации сообщества, в которое вы публикуете пост, что помогает новым пользователям понять правила, чтобы их публикацию не забанили. Да, трудно себе представить, что ветеран Reddit заботится обо всём этом, но новичкам сайта нововведения придадут уверенности, когда они будут писать своё первое сообщение. Возможно, они больше не захотят уйти, не возвращаясь.

Да, Reddit — это не для всех. Анонимные пользователи регулярно посещают сайт, чтобы читать контент, но никогда не публиковать свой. Другие каждый день пишут сообщения в подразделах, которые они знают и любят; кто-то продолжает создавать сообщества на сайте.

Reddit — очень личная вещь, – говорит дизайнер Перес. – Мы не принимаем ничего вокруг как должное. Люди должны иметь возможность настраивать сообщества и контент так, как им нужно.

Чтобы сделать это возможным, при редизайне были представлены три способа просмотра сайта, как уже и было сказано. В классическом виде сайт больше всего похож на прежний Reddit. Компактный вид помогает, прежде всего, модераторам быстро пролистывать содержимое. А просмотр в виде карты предварительно увеличивает контент, например, фотографии и сообщения, что упрощает прокрутку раздела, например, r/pics, без необходимости кликать по каждому отдельному сообщению для прочтения. Это напоминает Facebook или Twitter, что, по словам Переса, было сделано преднамеренно.

Многим нашим новым пользователям это нравится. Они пришли с этих ресурсов.

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

Инопланетянин Snoo старый новый символ Reddit

Редизайн призван вновь сделать Reddit современным интернет-ресурсом. Однако маркетологи компании застряли в 2005 году.

Одна из тех вещей, которые я делал на раннем этапе, просто заключалась в проверке того, что было у Reddit в то время, — говорит Тэвиш МакЛеллан (Tavish MacLellan), креативный директор бренда в Reddit.

«Официальные» рекомендации бренда оговаривали палитру цветов, логотип и инопланетный талисман Snoo. Материалы, которые Оганян отправил дизайнерам по почте, сопровождались припиской:

Повеселитесь с этим! Если вы используете это где-нибудь в Интернете, напишите мне.

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

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

История Snoo заключалась в том, что он был путешествующим во времени пришельцем, – говорит Оганян.

В первые дни существования Reddit эта история как бы подразумевала, что сайт останется на плаву.

Если мы потерпим неудачу, Snoo не сможет вернуться в настоящее.

Сначала «редиторы» взяли Snoo и «присвоили» его. Модераторы загружали пользовательские рисунки Snoo в различных вариантах, чтобы использовать их для отдельных сообществ. Настало время символизировать Reddit и вместе с ним пользователей ресурса. Сейчас же Reddit нуждался в другой стратегии брендинга, а Snoo казался очевидным якорем.

Идея Алексиса со Snoo заключалась в том, что это пришелец, который прибыл на Землю, чтобы открыть для себя человечество, – говорит МакЛеллан. – Вопрос был в том, как мы возьмём особенности этого персонажа и фактически превратим его в иконку для Reddit?

Команда наняла художников, чтобы они нарисовали нового Snoo. Они старались выдержать оригинальные пропорции, сохраняя эстетику ручной работы, но добавляя персонажу трёхмерность. Snoo появился на обновленном сайте в виде значка в углах и в новом наборе «Snoomoji», который пользователи могут применять в чатах и сообщениях.

Когда вы заходите в чат Reddit, вам теперь назначается один из Snoo в качестве аватара. И когда вы создаете новое сообщество, на баннере по умолчанию показывается одна из нескольких новых иллюстраций со Snoo, исследующим новую планету. Для старых пользователей Snoo — друг, который был с ними все эти годы. А новичкам Snoo показывает, какой может быть Вселенная Reddit. Сначала вы можете ощутить себя инопланетянином, но со временем начнёте чувствовать себя, как дома.

Snoo уже стал своим среди нынешних пользователей Reddit, и я думаю, что они с удовольствием найдут для него еще больше вариантов применения. Но это также возможность обзавестись «послом» от имени ресурса во всём Интернете, – говорит Оганян. – Я рад видеть, что новый Snoo теперь приветствует новое поколение «редиторов».

В штаб-квартире Reddit есть комната, где стены заполнены первыми макетами, сделанными дизайнерской командой — это дань их прошлогоднему прорыву. На стенах развешаны возможные версии того, каким мог бы быть Reddit: есть макеты с максимальной визуализацией, в некоторых случаях дизайн, напротив, стремится к минимализму, а между ними расположены варианты с самыми нестандартными дизайнерскими идеями. Многие макеты очевидно заимствуют язык дизайна у других популярных сайтов — Twitter, Twitch и Facebook. И совсем немногие из макетов выглядят так, каким в итоге стал Reddit.

В одном углу комнаты Перес приколол некоторые из скриншотов, которые Оганян дал ему в первую неделю работы. И на противоположной стене есть распечатка сабредита r/all уже в том дизайне, что Reddit представил на днях. Интересно, что если вы стоите посередине комнаты и смотрите на две стены издалека, то трудно сказать, что эти дизайны заметно различаются. Однако Перес возглавил крупнейшую и самую амбициозную переделку дизайна в истории Reddit.

Раш, разработчик UX, говорит, что веб-сайт, который они создали — это тот же Reddit, только чуть взрослее.

Мы помогли ему стать проще и эффективнее, сделав его более доступным, но не меняя «строительные леса», – считает Раш. – Наша цель, конечно же, не в том, чтобы что-то радикально переделывать. .

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

На новом Reddit все мы — пришельцы, исследующие обширное сообщество других планет, и пытаемся найти наше место во Вселенной.
Один хлопок? Или же бурные овации? Хлопая больше или меньше, вы показываете, какой пост действительно чего-то стоит.
Katerina Key Автор Hype.ru
Комментарии