Changement de vue efficace lorsque l'espace est limité
J'ai une zone dans laquelle l'espace est à une prime absolue et j'ai un très petit espace pour basculer entre une adresse postale et une adresse de facturation.
J'ai du mal à décider d'un mécanisme d'interface utilisateur serré mais efficace/micro-interaction pour changer la vue d'adresse.
Il s'agit d'un système d'entreprise qui a une formation, une intégration, etc., et sera utilisé par les utilisateurs expérimentés - bien que, bien sûr, j'ai toujours besoin que les choses soient aussi auto-détectables que possible.
Le premier exemple est un alignement vertical des icônes à côté de l'adresse. La deuxième icône a été intentionnellement décalée afin de ne pas correspondre avec une ligne d'adresse spécifique. L'objectif est de rompre toute association visuelle spécifique entre l'icône de facturation et la ligne d'adresse 2.
Le deuxième exemple est le même, mais j'ajoute plus d'une visualisation d'élément de style bascule.
Enfin, dans le dernier exemple, j'abandonne l'alignement vertical et je vais à l'horizontale.
Vous pouvez voir que l'apparence est généralement inspirée de GMD, bien que je l'utilise librement car je ne pense pas que GMD soit la meilleure approche pour un système d'entreprise, du moins dans mon cas.
Quoi que je fasse deviendra plus que probablement un modèle qui est parfois répété dans un système d'entreprise qui (après de nombreuses années) ne fait qu'attirer l'attention sur l'UX et une normalisation de l'interface utilisateur.
Vous pouvez utiliser des onglets sectionnels (par opposition aux onglets au niveau supérieur) avec un soulignement:
Si vous ressentez le besoin d'un équilibre typographique, une autre option consiste à ajouter un sous-en-tête sur la section contact (pas trop sûr de cette alternative):
Les utilisateurs n'auront pas à discerner les icônes, qui ne sont pas claires pour le moment (Pectoralis Major l'a souligné dans les commentaires). J'ai poussé la section de contact vers le bas pour l'aligner avec le contenu de l'adresse, mais la ligne de tabulation montre la fin de la section de gauche.
Aussi, je me demandais juste; devez-vous dire "Modifier le client" lorsque vous avez ces panneaux contenant? J'ai essayé de raccourcir pour simplement "Modifier". Au moins à mes yeux, les panneaux contenant suggèrent ce qui va être édité (juste mon avis).
J'ai utilisé les majuscules pour une distinction typographique, qui est similaire aux onglets dans le matériel et mobile:
Je suppose que les icônes ne seront pas numérisées en tant que boutons lors des tests. Par conséquent, le deuxième design, mettant les icônes dans quelque chose de plus reconnaissable (une bascule) testerait probablement le meilleur des trois. Une autre option consiste à utiliser des onglets. Pour éviter d'utiliser les anciens onglets familiers:
Tout type d'innovation entraînera un coût pour les utilisateurs et les concepteurs. Pour les utilisateurs, car ce sera un nouveau modèle qu'ils doivent apprendre et qui les emmènera sur un chemin lent et inexploré. Pour les concepteurs, car ils doivent fournir des échafaudages supplémentaires tels que des conseils contextuels et une divulgation progressive pour aider les utilisateurs à naviguer sur le nouveau chemin. Le coût de mise en œuvre de ces outils peut être important. Réfléchissez à deux fois à ce que vous essayez de réaliser - cela vaut-il la peine de sortir des sentiers battus? Est-il judicieux d'innover ou serez-vous tout aussi bien servi par un design traditionnel?
Ceci est un cas d'utilisation parfait pour les onglets. La spécification de conception Material Design pour les onglets a un certain nombre d'options pour les mises en page. Vous pouvez essayer quelque chose comme ceci:
Ou comme ça:
Les icônes que vous avez utilisées dans vos exemples ne sont pas clairement des aides à la navigation , et elles ressemblent aux icônes de téléphone et de courrier électronique. Peut-être que les utilisateurs expérimentés les comprendront, mais leur fonction n'est pas évidente.