Facebook переробив глибокий аналіз незалежних проектів

Досліджувати роботу інших дизайнерів можна багато чого. Це стосується як професійних проектів, так і специфікацій існуючих веб-сайтів. Великі сайти, такі як Facebook, служать певному користувачеві з деякими хорошими елементами та іншими не дуже хорошими елементами. На цій посаді я хотів би вивчити різні перепроектування Facebook для аналізу концепцій інтерфейсу що може покращити поточний досвід користувачів.

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

Оптимізована сторінка профілю

Редизайн цієї сторінки відбувається від дизайнера з Балканського регіону Європи Харіса Юсовича.

У цій конструкції він більше уваги приділяє простоті, виділяючи власника сторінки на більше видатне фото заголовка і профіль pic.

Часові повідомлення можуть бути відсортовані за “останні” або “популярний” на основі ваших уподобань. Це велике значення для зручності в користуванні, особливо на тлі негативної реакції Twitter у зв'язку з нещодавно зміненим алгоритмом.

Також багато хто з кнопок відображаються більше додаткову оббивку та більшу типографію. Оскільки Facebook має бути інтерактивним, він має сенс збільшувати видимість елементів, таких як кнопки та гіперпосилання.

В цілому ця концепція відчувається компактний і легше набухати. Було б приємно бачити на Facebook більше уваги на інтерактивних елементах і, можливо, збільшити розмір шрифту.

Багатоколонна шкали часу

Повернення до вертикальної розкладки є редизайном Алехандро Осоріо. Цей макет відображає вигляд часової шкали профілю, який користувачі Facebook бачать, коли вони відвідують сторінку профілю користувача.

Дизайн вражає, але може бути відштовхує деяких користувачів. Він спирається на організувати кілька стовпців сторінок посилання на профіль користувача, а також часовий перегляд останніх публікацій. Всі кольори та елементи залишаються вірними дизайнерським стилям Facebook. Це, звичайно, відчуває себе як сторінка сторінки Timeline.

Але деякі елементи бічної панелі злегка заплутані. Наприклад, зелена кнопка з одним знаком плюс поряд “слідуйте” кнопки. Один використовує тільки символ, інший просто текст. Це не відповідає стилю дизайну та іншим профілям.

Найбільше мені подобається тут чітка структура даних у часовій шкалі. Все організовано чітко і існують навіть бічні панелі для перемикання між останніми публікаціями та популярними повідомленнями.

Редизайн вмісту

Великі веб-сайти, такі як Facebook, мають набагато більше даних і користувальницької бази, яка хоче отримати легкий доступ до цих даних. На редизайні домашньої сторінки MagicVoltage ви знайдете одну послідовну функцію: багато контенту, забитого в один макет сторінки.

Домашня сторінка Facebook - це початковий вигляд часової шкали, який користувачі бачать під час першого відвідування веб-сайту. Вона включає в себе останні публікації від друзів, список чатів, ігри, оголошення та іншу відповідну інформацію, як-от майбутні дні народження.

Зайнятість цього макета - це те, що робить його великим і потенційно спірним. Це вміст на одній сторінці супер простий в навігації - як тільки ви дійсно дізнаєтеся, де все знаходиться. А ліворуч посилання ліворуч досить розпливчасті, щоб переконати будь-кого від взаємодії з ними.

Але в захисті цієї конструкції він добре обробляє контент. Є багато прогалин між елементами та це бігає чотири-колони проект блискуче.

Об'ємна навігація

Цей так званий редизайн Facebook 2.0, створений Марсело Сільвою, дійсно є привабливим. Його демонстраційний макет відображає оновлену домашню сторінку з тимчасовою шкалою та частково прихованими контактами чату.

Великою частиною цього дизайну є багаторівнева навігаційна система. Мені подобається, як існує основний навігатор з посиланнями на іконки, які відображають вторинні посилання. У наведеному вище знімку екрана користувач вибирає піктограму профілю, на яку є посилання перегляд новітньої історії та редагування профілю.

На відміну від традиційних квадратних фотографій Facebook, реконструкція Марсело вибирає кругову фотографію. Цей стиль є повсюдним як у часовій шкалі, так і в списку чатів.

M Список асистентів і останніх дій

Ще багато чого можна сказати про редизайн FB Стівена МакКейба. Насправді, багато областей, таких як ігри та нещодавні заходи, були повністю перероблені з вражаючим підйомом.

Дизайн Стівена набагато темніше, ніж поточна кольорова схема Facebook. Мені подобається, тому що він створює більше контрасту між бічними панелями та вмістом первинної сторінки. Поточна сторінка Facebook має більшу частину цього вмісту, але з часом вона може змішатися з фоном.

Заголовок все ще використовує червоні бульбашки для позначення сповіщень. Існують також повідомлення про тенденції та стрічку новин з можливістю сортувати останні дії від друзів у правій бічній панелі.

У самому низу ви помітите невелику коробку для Facebook M, the еквівалент Siri для користувачів Facebook.

Ця функція не привертає великої уваги в редизайнах, але Стівен дійсно вийшов з усіх сил, щоб зробити його концепцію справді сучасною технологією Facebook.

Макет часової шкали з чотирма стовпцями

Ось ще один редизайн домашньої сторінки 4-col, зроблений японським дизайнером Шо Камея. Всі ці колонки охоплює всю сторінку, ширина і висота.

На крайній лівій бічній панелі основну увагу приділено традиційним посиланням на Facebook для ігор, програм, сторінок, ресурсів dev та інших подібних елементів. Далі стоїть колонка вмісту, яка є найрізноманітнішою серед усіх переробок. Це не зберігає традиційні посилання на стан оновлення / додавання фотографій, але використовує a мінімалістський підхід з прихованими варіантами.

Два правих бічних панелі містять все інше з більшою кількістю фотографій, як аватари користувачів та ігрові ігри. Цей дизайн все ще зберігає всі оновлення, такі як дні народження, чати та рекомендації для друзів.

Цей дизайн дуже різноманітний, але залишається вірним основним функціям Facebook. Це не може бути ідеальний редизайн, але він показує можливості чотирьох стовпців макета.

Спрощений інтерфейс користувача зі списком темних чатів

Метою редизайну Бен Хартлі є простота і тонкість. Макет використовує комбінацію плоских концепцій дизайну з кількома тінями на великих елементах сторінки.

Багато фірмових елементів залишаються такими ж, і він покладається на традиційну схему синього та сірого кольорів Facebook. Але ви помітите, що деякі з ікон були перероблені або менший або простіший (або обидва).

Цей макет також спирається кругові аватари і надає багато місця для спільного використання зображень з повідомленнями. Мені дуже подобається його оновлений список чатів із темнішою колірною схемою та меншими значками стану.

Хоча редизайн Бен все ще відчуває себе трохи заплутаним, він відчуває себе набагато простіше. Це буде жорсткою конструкцією, щоб оцінити досвід користувачів без дослідження UX у веб-переглядачі. Але з першого погляду здається простіше переглядати і надає більше можливостей для використання вмісту часової шкали.

Підведення підсумків

Хоча ці приклади зосереджені в основному на Facebook, отримані уроки можна застосувати до будь-якого веб-сайту. Чудовий дизайн користувальницького досвіду виходить за межі всіх мовних бар'єрів, і це життєво важливий елемент цифрового творчого процесу.

Не соромтеся запозичувати ідеї з цього аналізу і навіть реалізовувати подібні ідеї у своїй роботі над проектом. Крім того, якщо ви знайдете будь-які ретрансляції, пов’язані з Facebook, не соромтеся поділитися коментарями з власним аналізом.