PLI /// Recommandations de conception d'interface utilisateur
PLI /// User Interface Design Guidelines
PLI /// User Interface Design Guidelines
Pliage et dépliage. Combinaison, rangement et développement. Comment penser l'interface d'une OS (système d'exploitation comme Android, Windows ou encore Mac OS X) autour du principe du pli, de l'origami ? Ce projet explore le fonctionnement et les modes d'interaction de l'interface d'une OS mobile ayant pour principe le pli.
Folding and unfolding. Combination, classification and development. How to conceive the interface of a mobile OS referring to the principle of folding, of origami? This project explores the behaviour and the principles underlying such an OS.
Détails
2017, ESAD Amiens.
Tanguy Deniel - iconographie, grille
Florian Le Gall - principes de navigation, animations
Tanguy Deniel - iconographie, grille
Florian Le Gall - principes de navigation, animations
Details
2017, ESAD Amiens
Tanguy Deniel - iconography, grid
Florian Le Gall - navigation principles, animations
Tanguy Deniel - iconography, grid
Florian Le Gall - navigation principles, animations
Principes visuels
Visual principles
Support
_
Le support de base de l’application est d’un gris doux, neutre, avec une légère ombre en son contour. S'il y a superposition, un effet de profondeur est nécessaire pour suggérer un premier et second plan.
The application's base support is of a gentle neutral grey, with a soft shadow for its edges. If there is superposition, a depth effect is necessary to suggest a fore- and a background.
_
Le support de base de l’application est d’un gris doux, neutre, avec une légère ombre en son contour. S'il y a superposition, un effet de profondeur est nécessaire pour suggérer un premier et second plan.
The application's base support is of a gentle neutral grey, with a soft shadow for its edges. If there is superposition, a depth effect is necessary to suggest a fore- and a background.
Structure de la grille
Grid structure
_
Dans les bases de l’art du pliage, afin de réduire de 50% la dimension de la feuille, il faut en plier les angles pour les ramener au centre, puis reproduire l’opération. Les lignes de pliage vont servir de base à la grille.
According to the basics of paperfolding, to reduce a sheet dimension by half, one needs to fold the corners towards the center, and to repeat the operation once again. The folding lines are used to define the grid.
Grid structure
_
Dans les bases de l’art du pliage, afin de réduire de 50% la dimension de la feuille, il faut en plier les angles pour les ramener au centre, puis reproduire l’opération. Les lignes de pliage vont servir de base à la grille.
According to the basics of paperfolding, to reduce a sheet dimension by half, one needs to fold the corners towards the center, and to repeat the operation once again. The folding lines are used to define the grid.
Les lignes de structure s'appuient sur les principaux pliages possibles sur un format carré pour réaliser un origami. Sur cette grille de structure, les zones de coin sont réservées exclusivement à l’animation du support de l’application. Le pictogramme n’y a pas sa place.
The structure lines are based on the main possible folding with a square format to realize an origami. On this structure grid, the corner areas are exclusively reserved for the application's support animation.
The structure lines are based on the main possible folding with a square format to realize an origami. On this structure grid, the corner areas are exclusively reserved for the application's support animation.
Formats
_
Les différents formats de base de la structure peuvent se présenter sous forme de pourcentage :
_
Les différents formats de base de la structure peuvent se présenter sous forme de pourcentage :
• 100% correspond au format total du support
• 75% correspond au format après le premier pliage des coins
• 50% correspond au format après le second pliage des coins
• 75% correspond au format après le premier pliage des coins
• 50% correspond au format après le second pliage des coins
The structure base formats can be presented as percentages :
• 100% correspond to the support total format
• 75% correspond the format after the first corner folding
• 50% correspond au format after the second corner folding
• 75% correspond the format after the first corner folding
• 50% correspond au format after the second corner folding
Principes paradigmatiques
Paradigmatic principles
Paradigmatic principles
Canevas
_
_
L’espace de travail est considéré comme un canevas. Lorsqu’une application s’ouvre, elle déploie le sien par dessus le canevas primaire de l’OS.
The workspace is considered as a canvas. When an application opens up, it deploys its own canvas above the OS primary one.
The workspace is considered as a canvas. When an application opens up, it deploys its own canvas above the OS primary one.
Navigation
Navigation en profondeur
Depth navigation
_
La navigation en profondeur fonctionne sur un système de strates dans lesquelles on entre métaphoriquement. Les différentes strates sont des canevas indépendants. L’usage de la navigation en profondeur est préconisée pour le lancement des applications et dans le cas où l’application sert d’interface vers un autre médium (vidéo, musique, document).
The depth navigation relies on a level system in which we metaphorically enter. The different levels are independant canvas. Depth navigation use is advised for application launch, and when the application behaves as an interface towards another medium (video, music, document).
Depth navigation
_
La navigation en profondeur fonctionne sur un système de strates dans lesquelles on entre métaphoriquement. Les différentes strates sont des canevas indépendants. L’usage de la navigation en profondeur est préconisée pour le lancement des applications et dans le cas où l’application sert d’interface vers un autre médium (vidéo, musique, document).
The depth navigation relies on a level system in which we metaphorically enter. The different levels are independant canvas. Depth navigation use is advised for application launch, and when the application behaves as an interface towards another medium (video, music, document).
Navigation linéaire
Linear navigation
_
La navigation linéaire s’apparente au fil d'Ariane (breadcrumb), à un chemin d’accès. La métaphore se constitue autour du déroulement horizontal pour progresser dans l’application. Cette navigation est préférée dans le cas où le contenu est avant tout textuel et non modifiable.
Linear navigation is similar to the way breadcrumbs works, to a file path. The metaphor embodies the horizontal scrolling to navigate within the application. This mode of navigation is prefered when the content is mainly textual and non-editable.
Linear navigation
_
La navigation linéaire s’apparente au fil d'Ariane (breadcrumb), à un chemin d’accès. La métaphore se constitue autour du déroulement horizontal pour progresser dans l’application. Cette navigation est préférée dans le cas où le contenu est avant tout textuel et non modifiable.
Linear navigation is similar to the way breadcrumbs works, to a file path. The metaphor embodies the horizontal scrolling to navigate within the application. This mode of navigation is prefered when the content is mainly textual and non-editable.
Barre de navigation
Navigation bar
_
Elle permet l’accès à trois fonctions liées à l’application et au canevas principal : retour arrière dans la hiérarchie des pages, retour au canevas principal, et carrousel des applications ouvertes. Il est possible de faire apparaître la barre de navigation en glissant son doigt depuis la base inférieure de l’écran, de manière à le déplier au-dessus de la page active.
It allows the access to three functions related to the main canvas and the application: backtracking, return to main canvas, and overview of open applications. It is possible to bring back the navigation bar with a small swipe from the bottom of the screen, as to unfold it above the active page.
Navigation bar
_
Elle permet l’accès à trois fonctions liées à l’application et au canevas principal : retour arrière dans la hiérarchie des pages, retour au canevas principal, et carrousel des applications ouvertes. Il est possible de faire apparaître la barre de navigation en glissant son doigt depuis la base inférieure de l’écran, de manière à le déplier au-dessus de la page active.
It allows the access to three functions related to the main canvas and the application: backtracking, return to main canvas, and overview of open applications. It is possible to bring back the navigation bar with a small swipe from the bottom of the screen, as to unfold it above the active page.
Icônes de la barre de navigation
Navigation bar icons
_
L’icône « retour au canevas principal » comporte deux états, selon que l’utilisateur soit sur le canevas principal (état replié) ou bien dans une application (état déplié).
The "return to main canvas" icon involves two states, depending on the user being on the main canvas (folded state), or being in an application (unfolded state).
Navigation bar icons
_
L’icône « retour au canevas principal » comporte deux états, selon que l’utilisateur soit sur le canevas principal (état replié) ou bien dans une application (état déplié).
The "return to main canvas" icon involves two states, depending on the user being on the main canvas (folded state), or being in an application (unfolded state).
Animations
Activation
Expansion
Fil d’Ariane
Breadcrumbs
Breadcrumbs
Ouverture de contenu textuel
Text content opening
Text content opening
Notification et fermeture à un doigt
Notification with one-finger closing
Notification with one-finger closing
Notification et fermeture à trois doigts
Notification with three-fingers closing
Notification with three-fingers closing
Menu-bouton extensible
Extensible menu-button
Extensible menu-button
Menu latéral
Lateral menu
Lateral menu
Navigation en onglet
Tab navigation
Tab navigation
Suppression
Deletion
Deletion