Facebook a repensé une analyse en profondeur des conceptions indépendantes

Il y a beaucoup à apprendre en étudiant le travail d'autres designers. Cela vaut tant pour les projets professionnels que pour les conceptions spécifiques des sites Web existants. Les grands sites comme Facebook servent une expérience utilisateur très particulière avec quelques bons éléments et d’autres moins bons. Dans ce post, je voudrais examiner les différentes conceptions de Facebook pour analyser les concepts d'interface qui pourrait améliorer l'expérience utilisateur actuelle.

J'ai tiré une poignée de modifications de FB personnalisées d'utilisateurs de Dribbble, chacun avec améliorations spécifiques et éléments d'interface utilisateur mis à jour. Prenez ces idées en considération pour leur apparence, leur fonctionnement éventuel et comment ils pourraient affecter la facilité d'utilisation si implémenté en direct sur Facebook.

Page profil simplifiée

Cette refonte de la page de profil provient de Haris Jusovic, un designer de la région des Balkans européens.

Dans cette conception, il met plus l'accent sur la simplicité en soulignant le propriétaire de la page avec un plus photo d'en-tête et photo de profil.

Les messages de la chronologie peuvent être triés par “récent” ou “populaire” en fonction de vos préférences. Ceci est important pour la convivialité, en particulier à la suite de la réaction brutale de Twitter contre le changement d'algorithme récemment imposé..

De plus, de nombreux boutons s’affiche plus gros avec rembourrage supplémentaire et typographie plus grande. Facebook étant censé être interactif, il est logique d'accroître la visibilité d'éléments tels que des boutons et des hyperliens..

Globalement, ce concept semble compact et plus léger. Ce serait bien de voir Facebook mettre davantage l'accent sur les éléments interactifs et peut-être aussi augmenter la taille de leurs polices..

Chronologie multi-colonnes

La refonte d'Alejandro Osorio est orientée vers une disposition verticale en colonnes. Cette présentation représente la vue chronologique du profil que les utilisateurs de Facebook voient lorsqu'ils visitent la page de profil d'un utilisateur..

Le design est frappant mais peut être rebutant pour certains utilisateurs. Il repose sur plusieurs colonnes de page à organiser les liens de profil de l'utilisateur, ainsi qu'une vue chronologique des publications récentes. Toutes les couleurs et tous les éléments restent fidèles aux styles de conception de Facebook. Cela ressemble certainement à une page de chronologie Facebook.

Cependant, certains éléments de la barre latérale sont un peu déroutants. Par exemple, un bouton vert avec un seul signe plus juste à côté d'un “suivre” bouton. L'un utilise seulement un symbole, l'autre juste du texte. Cela ne correspond pas au style de conception ni aux autres informations de profil..

Ce que j'aime le plus ici, c'est le structure claire des données dans la chronologie. Tout est organisé clairement et il y a même des liens latéraux pour basculer entre les publications récentes et les publications populaires..

Refonte de contenu dense

Des sites Web plus importants, tels que Facebook, contiennent beaucoup plus de données et une base d'utilisateurs qui souhaite accéder facilement à ces données. Dans la refonte de la page d'accueil par MagicVoltage, vous trouverez une fonctionnalité cohérente: de nombreux contenus regroupés dans une mise en page unique..

La page d'accueil de Facebook est la vue chronologique initiale que les utilisateurs voient lorsqu'ils se rendent pour la première fois sur le site Web. Il comprend des publications récentes d'amis, une liste de discussion, des jeux, des annonces et d'autres informations pertinentes, telles que les anniversaires à venir..

L'affluence de cette mise en page est ce qui la rend à la fois grande et potentiellement controversée. Avoir tout ce contenu sur une seule page le rend super facile à naviguer - une fois que vous avez réellement appris où tout se trouve. Et les liens en haut à gauche sont suffisamment vagues pour dissuader quiconque d’interagir avec eux..

Mais pour la défense de cette conception, il gère très bien le contenu dense. Il y a beaucoup d'espaces entre les éléments et il exécute brillamment une conception à quatre colonnes.

Navigation volumineuse

Cette refonte dite de Facebook 2.0 créée par Marcelo Silva est vraiment un spectacle à voir. Sa maquette de démonstration affiche une page d'accueil mise à jour avec une chronologie et des contacts de discussion partiellement masqués..

Un gros morceau à cette conception est le système de navigation à plusieurs niveaux. J'aime la façon dont il y a un nav primaire avec des liens d'icônes qui affichent des liens secondaires. Dans la capture d'écran ci-dessus, l'utilisateur sélectionne l'icône de profil qui contient des liens pour parcourir l'historique récent et éditer le profil.

Contrairement aux photos carrées traditionnelles de Facebook, la refonte de Marcelo opte pour la photo circulaire. Ce style est omniprésent dans la timeline et la liste de discussion.

Assistant M & Liste des activités récentes

Il y a beaucoup à dire sur la refonte du FB de Steven McCabe. En fait, de nombreux domaines tels que les jeux et les activités récentes ont été complètement repensés avec un lifting impressionnant..

La conception de Steven est beaucoup plus sombre que la palette de couleurs actuelle de Facebook. J'aime cela parce qu'il crée plus de contraste entre les barres latérales et le contenu de la page principale. La page d'accueil actuelle de Facebook contient la majeure partie de ce contenu, mais avec le temps, elle peut se fondre dans l'arrière-plan.

L'en-tête utilise toujours des bulles rouges pour signifier les notifications. Il y a aussi des articles tendance et un fil d'actualité avec la possibilité de trier les activités récentes d'amis dans la barre latérale droite..

Tout en bas, vous remarquerez une petite boîte pour le M de Facebook, le équivalent de Siri pour les utilisateurs de Facebook.

Cette fonctionnalité n'a pas beaucoup d'attention dans les nouvelles conceptions, mais Steven s'est vraiment donné à fond pour que son concept représente vraiment la technologie moderne de Facebook..

Disposition de la chronologie à quatre colonnes

Voici une autre refonte de la page d'accueil en 4 colonnes réalisée par le designer japonais Sho Kameya. Toutes ces colonnes couvrir l'intégralité de la page, à la fois largeur et hauteur.

La barre latérale extrême gauche accorde une grande importance aux liens Facebook traditionnels pour les jeux, les applications, les pages, les ressources de développement et autres éléments similaires. Vient ensuite la colonne de contenu qui est la plus diversifiée parmi toutes les modifications apportées. Cela ne conserve pas les liens traditionnels pour le statut de la mise à jour / ajouter une photo, mais utilise un approche minimaliste avec des options cachées.

Les deux barres de droite incluent tout le reste avec plus de photos comme les avatars des utilisateurs et les icônes de jeux. Cette conception conserve toutes les mises à jour telles que les anniversaires, les chats et les recommandations d'amis..

Cette conception est très diverse mais reste fidèle au noyau des fonctionnalités de Facebook. Ce n’est peut-être pas la refonte parfaite mais montre les possibilités d'une mise en page à quatre colonnes.

Interface utilisateur simplifiée avec liste de discussion en noir

Le but de la refonte de Ben Hartley est la simplicité et la subtilité. La mise en page utilise une combinaison de concepts de design plat avec quelques ombres portées sur des éléments de page plus volumineux..

De nombreux articles de marque restent les mêmes et il s'appuie sur le schéma de couleurs bleu / gris traditionnel de Facebook. Mais vous remarquerez que certaines des icônes ont été repensées soit plus petit ou plus simple (ou les deux).

Cette mise en page repose également sur avatars circulaires et donne beaucoup d'espace pour les images partagées avec des poteaux. J'apprécie vraiment son liste de discussion mise à jour avec le jeu de couleurs plus sombre et des icônes de statut plus petites.

Bien que la refonte de Ben se sente toujours un peu encombrée, cela semble beaucoup plus simple. Ce serait une conception difficile à évaluer l'expérience utilisateur sans études UX dans un navigateur. Mais en un coup d'œil, il semble plus facile à parcourir et donne plus d'espace pour utiliser le contenu de la timeline.

Emballer

Bien que ces exemples se concentrent principalement sur Facebook, les leçons apprises peuvent être appliquées à n’importe quel site Web. Le design de l'expérience utilisateur transcende toutes les barrières linguistiques et constitue un élément essentiel du processus de création numérique..

N'hésitez pas à emprunter des idées à cette analyse et même à mettre en œuvre des idées similaires dans votre propre travail de projet. Aussi, si vous trouvez des modifications de conception Facebook, n'hésitez pas à partager les commentaires avec votre propre analyse..