Diaporama tactile

Description du projet

Ce projet est une démonstration technique que Float4 pourrait utiliser pour présenter à des clients potentiels lors de présentations ou dans des kiosques lors de conventions, afin de montrer qu'il était possible d'utiliser du contenu existant d'autres plateformes, telles que Vimeo, Flickr et Twitter.

Expérience utilisateur

Défis à résoudre

Float4 avait besoin d'une application capable d'afficher son portfolio dans le contexte de son logiciel, RealMotion™. Cette application devait se connecter aux différentes API des services qu'ils utilisaient : Vimeo, Flickr et Twitter.

L'application devait également démontrer les possibilités tactiles de ses installations. La manière dont Float4 gérait les applications tactiles ne consistait pas à utiliser des écrans tactiles, mais plutôt à détecter la coupure du faisceau infrarouge sur plusieurs axes. De cette façon, ils pourraient projeter leurs installations sur n'importe quelle surface, et garder l'interaction possible. Ce type d'installation posait parfois problème aux utilisateurs qui n'avaient pas fait face à ce type d'interaction auparavant.

Solution

Pour résoudre le problème du déclenchement trop rapide des boutons, nous avons implémenté une détection pour déterminer combien de temps l'utilisateur gardait sa main sur l'élément d'interface. Pour indiquer que l'interface était sur le point de se déclencher, nous avons ajouté un cercle animé qui se remplissait ; une fois le cercle rempli, le bouton était déclenché.

Il est intéressant de noter que cette fonctionnalité a été utilisée plus récemment dans plusieurs jeux vidéo, probablement pour la même raison ; pour éviter une action déclenchée trop rapide. Horizon Zero Dawn sur la PS4 de Sony a ajouté cet élément d'interface utilisateur pour de nombreuses actions dans ses menus. Tetris 99 sur la Switch de Nintendo a également implémenté cette fonctionnalité afin que les joueurs sachent quand ils sont sur le point de quitter le jeu.

Pour les autres parties de l'interface, nous voulions éviter d'avoir des éléments figés à un endroit, afin que tous les éléments puissent être déplacés n'importe où sur l'écran. Les gestuelles de pincement et d'expansion des doigts étaient devenus la norme sur les téléphones intelligents, nous avons donc implémenté cela pour agrandir les images, mais aussi pour les vidéos : agrandir la vignette d'une vidéo la mettait en plein écran et la démarrerait, la pincer l'arrêtait et la réduisait à son état de vignette.

Crédits

• Design UX, design graphique, programmation: Mat Janson Blanchet
• Programmation RealMotion™: Bruno Gohier

Tous les droits d'auteur et produits appartiennent à leurs propriétaires respectifs.