Facebook переработан: углубленный анализ независимых проектов

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

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

Читайте также: 33 Редизайн популярных сайтов для вашего вдохновения

Упорядоченная страница профиля
Эта редизайн страницы профиля происходит от Хариса Юсовича, дизайнера из балканского региона Европы.

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

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

В целом, эта концепция кажется компактной и более легкой. Было бы неплохо, чтобы Facebook уделял больше внимания интерактивным элементам и, возможно, также увеличил размер шрифта.
Временная шкала с несколькими столбцами
Поворот к вертикальной колонке Редизайн Алехандро Осорио, Этот макет представляет собой вид временной шкалы профиля, который пользователи Facebook видят при посещении страницы профиля пользователя.

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

Здесь мне больше всего нравится четкая структура данных на временной шкале. Все организовано четко и есть даже боковые ссылки для переключения между последними и популярными публикациями.
Content-Dense Редизайн
Более крупные веб-сайты, такие как Facebook, имеют дело с гораздо большим количеством данных и базой пользователей, которым нужен легкий доступ к этим данным. в редизайн домашней страницы от MagicVoltage вы найдете одну непротиворечивую особенность: множество контента втиснуто в один макет страницы.

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

Но в защиту этого дизайна он хорошо обрабатывает плотно упакованный контент. Между элементами имеется много свободного пространства, и он прекрасно работает в четырех колонках.
Объемная навигация
Это так называемый Редизайн Facebook 2.0 созданный Марсело Сильва действительно зрелище. Его демонстрационный макет отображает обновленную домашнюю страницу с временной шкалой и частично скрытыми контактами чата.
Большой частью этого дизайна является многоуровневая навигационная система. Мне нравится, как есть первичная навигация со значками ссылок, которые отображают вторичные ссылки. На приведенном выше снимке экрана пользователь выбирает значок профиля, на котором есть ссылки для просмотра недавней истории и редактирования профиля.

В отличие от традиционных квадратных фотографий в Facebook, дизайн Марсело сделан в пользу круговой фотографии. Этот стиль повсеместен как на временной шкале, так и в списке чатов.
M Assistant и список последних действий
Многое можно сказать о Редизайн FB Стивена МакКейба, Фактически, многие области, такие как игры и недавние мероприятия, были полностью переработаны с впечатляющим обновлением.

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

В самом низу вы увидите маленькую коробочку для Facebook’s Mэквивалент Siri для пользователей Facebook.

Этой функции не уделяется много внимания при редизайне, но Стивен действительно сделал все возможное, чтобы его концепция действительно отражала современные технологии Facebook.
Четырехколонная временная шкала
Вот еще один Редизайн домашней страницы 4-col сделано японским дизайнером Sho Kameya. Все эти столбцы охватывают всю страницу, как ширину, так и высоту.

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

Этот дизайн очень разнообразен, но остается верным основным функциям Facebook. Возможно, это не идеальный редизайн, но он показывает возможности четырехколоночного макета.
Упрощенный интерфейс с темным списком чатов
Цель Редизайн Бена Хартли это простота и тонкость. Макет использует комбинацию плоских концепций дизайна с несколькими тенями на более крупных элементах страницы.

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

В то время как редизайн Бена все еще выглядит немного загроможденным, он кажется намного проще. Это было бы непросто, чтобы оценить пользовательский опыт без UX-исследований в браузере. Но с первого взгляда кажется, что его легче просматривать и дает больше возможностей для использования контента временной шкалы.
Заворачивать
Хотя эти примеры в основном касаются Facebook, извлеченные уроки могут быть применены к любому веб-сайту. Отличный дизайн пользовательского интерфейса преодолевает все языковые барьеры и является жизненно важной частью цифрового творческого процесса.

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