Aujourd'hui, nous allons examiner 15 bits d'interface utilisateur et une conception d'expérience qui augmente réellement l'expérience d'utilisation d'un site ou d'une application.
Utilisez ces exemples d'applications de site Web, iPhone et de bureau comme source d'inspiration pour créer vos propres expériences utilisateur addictives.
introduction
Ce message servira de mon propre petit temple de la renommée. C'est un méli-mélo complet de différents types d'interfaces et d'éléments que je trouve utiles et inspirants.
Chaque exemple a pour but de vous amener à réfléchir à de nouvelles possibilités que vous n'avez jamais envisagées et de vous encourager à toujours chercher à maximiser la valeur de l'expérience que vous offrez à vos utilisateurs.
Effet de parallaxe à défilement latéral
Ce petit morceau est purement superflu du point de vue purement visuel, mais il améliore réellement l'expérience d'un site à défilement horizontal.
Le défilement parallaxe est un effet dans lequel l’arrière-plan est découpé en différentes couches qui se déplacent à des vitesses différentes au cours d’un défilement. Les couches situées plus en arrière se déplacent plus lentement que les couches rapprochées et une illusion 3D est créée.
Le portefeuille de Charlie Gentle ci-dessus est un excellent exemple de cet effet. Le site Web est divisé en sections distinctes, accessibles en cliquant sur les boutons de va-et-vient situés sur le côté de l'écran.
Lorsque vous cliquez sur un bouton, le site passe en douceur à la section suivante. L'effet de parallaxe se déclenche alors que le bokeh se trouve en haut de l'écran. C'est un truc simple qui donne vie au site.
iPhone Dérouler pour rafraîchir
La plupart des applications sociales pour iPhone disposent d'un système permettant d'actualiser leur flux de données. Certains vous secouez, d'autres vous appuyez sur un bouton, mais la méthode qui semble avoir le plus de sens pour moi est la suivante: "Réduire pour rafraîchir".
Des applications comme Gowalla, Foursquare et Tweetie l'ont adopté comme moyen principal d'actualisation. La raison pour laquelle cela fonctionne si bien est à cause de la franchise de l'interaction. Vous consultez et feuilletez une liste avec votre doigt et lorsque vous souhaitez la mettre à jour, vous ne devriez pas avoir à quitter cette zone.
Le fait de placer un bouton à n’importe quel autre endroit de l’écran crée une déconnexion et une rupture dans le flux des actions de l’utilisateur. Ils doivent quitter la liste, interagir avec un élément distinct de l'interface utilisateur et revenir à ce qu'ils faisaient. De cette façon, il s’agit d’une action unique, localisée dans un emplacement principal unique.
La leçon à tirer est d’examiner dans vos propres interfaces utilisateur les éléments qui interrompent inutilement l’attention de l’utilisateur. Déterminez s'il est possible d'améliorer l'interface en intégrant des éléments distants dans la zone concernée.
HUD accessibles globalement
Certaines de mes applications Mac préférées sont celles qui s'exécutent discrètement en arrière-plan, mais peuvent apparaître à tout moment avec un raccourci clavier spécial, puis disparaître lorsque vous avez terminé.
Dans le cas de The Hit List, l’affichage tête haute (HUD) n’est pas l’interface principale de l’application, mais plutôt un élément réduit de l’application qui est utile pour noter des éléments qui vous viennent à l’esprit.
Ce type de fonctionnalité globale (accès de n'importe où) les fait ressembler moins à des applications qu'à des fonctions directement intégrées à mon système d'exploitation.
Considérez comment vous pouvez utiliser des HUD dans vos propres interfaces pour étendre les fonctionnalités de certaines parties de vos applications et de vos sites Web.
Menus circulaires Convertbot
Convertbot est l’un des rares exemples de conception d’UI qui est sans doute plus difficile à utiliser tout en étant beaucoup plus agréable.
Cette application iPhone utilise un menu circulaire étrange mais magnifique pour convertir des unités de base. Il existe de nombreuses applications dans la boutique d'applications pour iPhone qui effectuent cette tâche de manière beaucoup plus directe et facile à comprendre, mais elles ne sont également pas amusantes à utiliser.
Avec Converbot assis sur mon iPod, je suis constamment à l'affût de scénarios qui méritent que je retire l'application. L'interface utilisateur propose des animations fluides, des couleurs et des textures magnifiques et des fonctionnalités fluides qui en font un plaisir à utiliser.
Cette application prouve que dans de rares occasions, donner aux utilisateurs l'opposé de ce qu'ils attendent peut être exactement ce que le médecin de l'interface a ordonné. Assurez-vous simplement que vous avez les compétences de conception nécessaires pour le sauvegarder, comme le font manifestement les gars de Tapbots.
Jeu de diapositives
Les curseurs jQuery ne manquent pas sur le Web, mais quelques-uns se distinguent vraiment des autres par une implémentation utile et unique. SlideDeck est l'un d'entre eux.
SlideDeck utilise un format d'accordéon soigné pour stocker des tonnes d'informations dans un espace étonnamment petit, organisé et parfaitement accessible. Le contenu est divisé en sections qui sont ensuite masquées dans des barres verticales qui se développent lorsque l'utilisateur clique dessus. Au fur et à mesure que l'une des sections se développe, la section précédemment ouverte se réduit en une animation fluide et agréable.
Ce qui le rend si formidable est la facilité avec laquelle il est facile d’obtenir la bonne partie du diaporama que vous voulez voir. Ces types de curseurs utilisent généralement des icônes ou des points minuscules pour accéder à des pages spécifiques, mais cette méthode est beaucoup plus descriptive et plus évidente.
Strongbad Emails: allez Rando!
Tout d'abord, si vous ne savez pas qui est Strongbad, honte à vous. Il est de loin le personnage le plus populaire de la longue caricature Internet mettant en vedette Homestarrunner et ses amis.
Chaque semaine, Strongbad répond au courrier électronique d'un téléspectateur et il en découle une ultime hilarité. Les épisodes du passé sont conservés dans une énorme liste fastidieuse que vous faites défiler lorsque Strongbad chante sa dernière chanson sur le défilement.
Récemment, les développeurs ont ajouté un? Go rando? bouton. En cliquant sur ce petit extrait de texte, vous auriez pu simplement vous renvoyer à un courrier électronique aléatoire, mais cela ne suffisait pas pour Strongbad. En cliquant sur ce bouton, vous faites défiler la liste entière de la même manière que Wheel of Fortune (avec ralentissement et arrêt), tandis que Strongbad fournit les effets sonores hilarants.
Évidemment, c’est tellement incroyable que vous deviez l’utiliser plusieurs fois avant de pouvoir vous considérer comme fini.
Le fait est que parfois, mettre un peu de pensée (et même de comédie) dans votre plus petite fonctionnalité peut transformer cette chose en fonctionnalité préférée de tout le monde sur votre site. En outre, faire de votre site Web un véritable plaisir à utiliser est un moyen sûr de gagner et de fidéliser des utilisateurs.
Fabriqué par Tinder Color Picker
Tinder est quelque chose de super secret que le réseau de marques de carburant leur cache. Bien que je n’aie aucune idée de ce que c’est, j’adore la petite page teaser qu’ils ont développée.
Les petits rectangles en haut de l'écran vous permettent de visualiser le site en sept combinaisons de couleurs. En cliquant sur une couleur, l'arrière-plan change et le contenu de la page est mis à jour pour optimiser le contraste sur le nouvel arrière-plan.
J'ai passé plus de temps que ce que je vais admettre sur ce site et à jouer avec ces jolis petits boutons. Chapeau bas à l’équipe Fuel pour la création de l’une de mes pages préférées à venir.
Pixelmator: Cordes attachées
Pixelmator est une excellente solution de retouche d'images abordable et abordable par rapport à Photoshop. Bien que loin d’être aussi puissant, Pixelmator apporte beaucoup d’innovations à la table et se vend mieux que n’importe quel concurrent de Photoshop que je n’ai jamais rencontré.
Une de mes fonctionnalités d'interface utilisateur préférées dans Pixelmator est ces petites chaînes suspendues qui apparaissent lorsque vous appliquez des effets. Dans le cas ci-dessus, vous pouvez faire glisser le point pour repositionner le centre de l'effet appliqué. Le point est attaché à cette chaîne qui le lie à la fenêtre de filtre. Au fur et à mesure que vous déplacez le point, la corde rebondit pour une conduite réaliste.
Honnêtement, je ne vois même pas le besoin de ces petites chaînes, car il est évident que la fenêtre et l'effet sont liés, mais leur présence sert de renfort visuel à ce fait et rend l'application de filtres tout simplement plus amusante.
Effets volants énormes
À peu près tous les sites Web que vous visitez ont une sorte d'événement de survol appliqué aux liens. Habituellement, c'est quelque chose de petit et pas trop distrayant; juste assez pour nous dire qu'il y a un lien là-bas.
Riot Industries a eu raison de décider qu'il était nécessaire de casser cette tendance en donnant à l'effet de survol la majorité de l'espace disponible sur la page et au lien une petite quantité d'espace.
Lorsque vous survolez la petite bande verticale de vignettes, l’énorme texte à droite commence à effectuer un zoom avant et arrière. Il s'exécute et atteint le haut de l'écran où il affiche un nouveau message correspondant à l'icône sur laquelle vous passez la souris, puis redescend pour s'arrêter à côté de cette icône.
Je n'ai jamais vu un autre site avec un effet similaire à celui-ci auparavant et j'aime beaucoup la fonctionnalité centrée sur la typographie.
Drag and Drop en ligne
En tant qu’utilisateur avide de Mac, j’ai tendance à penser que tout dans la vie devrait fonctionner avec? Glisser-déposer? fonctionnalité. De plus en plus ces derniers temps, je vois cette idée reflétée dans un environnement en ligne.
Dans l'exemple ci-dessus, cliquer sur une icône vous mènera à la page dédiée de cette application. Toutefois, si vous souhaitez éviter cela et télécharger l'application immédiatement, il vous suffit de faire glisser l'icône de l'application sur le bouton de téléchargement. Nifty non?
Le panier d’achats IconDock est un autre endroit où vous remarquerez une excellente fonctionnalité de glisser-déposer en ligne. Ici, il vous suffit de faire glisser les icônes que vous souhaitez acheter sur le dock pour les conserver pour un achat ultérieur.
Pile de photos Photoshop.com
Ceci est un autre exemple qui est vraiment inutile du point de vue fonctionnel, mais représente une belle touche supplémentaire qui gardera les visiteurs intéressés plus longtemps.
Lors du chargement de la page Photoshop.com, une pile de polaroïds est déposée à l'écran et rebondit dans toutes les directions. La pile devient alors totalement interactive. Vous pouvez cliquer et faire glisser des zones de l'écran pour lancer des photos à tout va et les regarder s'écraser sur d'autres.
La physique semble fonctionner assez bien et le tout ajoute définitivement une excellente interaction à la page.
Suivre la souris
Le site ci-dessous est un autre qui propose un bel effet de parallaxe, mais cette fois, je souhaite me concentrer davantage sur la façon dont vous interagissez avec cette scène.
Dès que vous chargez cette page, vous réalisez que quelque chose de bizarre se passe. Lorsque vous déplacez votre curseur à gauche et à droite, l’arrière-plan réagit comme si vous bougiez la tête. Au fur et à mesure que la page glisse sur le côté, une plus grande partie du paysage est révélée.
Bien que cela ne soit pas approprié sur la plupart des sites, cette méthode de recherche unique fonctionne vraiment bien ici et ajoute vraiment à l'effet 3D. J'ai même vu d'autres sites pousser cette méthode encore plus loin en en faisant le moyen principal de parcourir tout le contenu de la page.
Double curseur
Celui-ci est un autre curseur jQuery qui se démarque vraiment par son design particulièrement brillant.
Le modèle WordPress de ThemeForest ci-dessus comporte une sorte de double curseur d'image. Le premier curseur contient des images et le second contient des descriptions de l'image.
Lorsque le curseur d'image se déplace verticalement, le curseur de description défile horizontalement. L'effet obtenu est similaire à l'observation d'une machine complexe. les deux animations ont l’impression d’être une seule et même fonction.
C'est un moyen exceptionnel de présenter des images et du texte qui m'ont vraiment laissée abasourdie et désireuse d'en avoir plus.
Défilement avec Momentum
Lorsque j’ai mis la main sur un iPhone il ya quelques années, je suis immédiatement tombé amoureux de l’idée d’une interaction utilisateur dynamique. Lorsque j'ai effleuré Safari, il n'y avait pas un rapport de mouvement de 1: 1, mais l'appareil a utilisé mon effleurement comme si je glissais un morceau de papier qui créerait un élan, un pic, puis ralentirait en fonction de la force de mon action.
Depuis lors, je voulais plus de technologie pour reprendre cette idée, en particulier sous OS X. Heureusement, la souris Magic Mouse d'Apple a apporté cette chose-là.
En allumant? Défiler avec élan? vous pouvez imiter la fonctionnalité de défilement de l'iPhone. Cependant, si vous effleurez un iPhone, l'écran s'éteint, tandis qu'une souris Magic Mouse fait monter l'écran. Cela a du sens en raison du caractère indirect de la souris, mais j’aimerais quand même que vous puissiez changer la fonction de survol de la souris pour refléter l’iPhone.
La leçon à tirer est que chaque fois que vous pouvez intégrer une partie de la réalité à une expérience utilisateur simulée, cela accroît la crainte du spectateur et lui donne un aspect encore plus magique (je ressemble maintenant à un employé d'Apple).
Vraiment Minimal
Bien que j'aime les interfaces magnifiquement complexes, il y a des moments où vous devez simplement être productif avec vos pensées et presque rien d'autre. De temps en temps, une interface survient qui concrétise vraiment cette idée, et je ne peux en penser une meilleure que celle de WriteRoom pour Mac.
En dépit de son apparence, WriteRoom est un éditeur de texte assez puissant contenant de nombreuses fonctionnalités et options de personnalisation. Il cache simplement tout cela sous une interface magnifiquement simple qui donne l'impression de taper des chiffres dans une hachure sur LOST.
Aussi fou que cela puisse paraître, c'est le type d'expérience utilisateur que je trouve le plus addictif. Quelque chose d'unique et d'immersif qui vous emmène presque à un autre moment et à un autre endroit où tout tombe à l'eau et où vous pouvez vous concentrer entièrement sur la tâche à accomplir.
Conclusion
C'est ma liste d'éléments et d'interfaces inspirants. J'espère que cela vous aidera à faire naître d'excellentes idées sur la manière d'améliorer encore vos propres conceptions, à la fois grandes et petites.
Utilisez les commentaires ci-dessous pour nous parler de ces petits éléments d’UI que vous jugez vraiment bons et de ce que vous pensez des exemples ci-dessus.