Un bouton «supprimer l'image» doit-il être en haut à gauche ou en haut à droite?
Je travaille sur une application qui permet des mises à jour de statut liées à l'application. C'est très similaire à la publication d'un statut Facebook, j'ai donc utilisé une disposition similaire à leur écran de publication.
Vous pouvez ajouter/supprimer des images. J'allais mettre le x supprimer le bouton image en haut à gauche des images car cela me semble intuitif pour moi et mon équipe, cependant, facebook utilise le bouton x en haut à droite.
Lequel devrais-je utiliser si non plus, et pourquoi?
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
En haut à droite
La plupart des utilisateurs perçoivent l'image et le texte associé dans leur ensemble, puis les traitent en commençant en haut à gauche, puis en descendant et en traversant si nécessaire.
Pour les combinaisons image + texte (anglais/langues de gauche à droite), le flux visuel ressemble à ceci à partir d'études oculaires:
Voici à quoi ressemble ce flux pour une image Facebook + un flux de texte:
Étant donné que la plupart des utilisateurs liront plutôt que supprimer, placer le bouton Supprimer en haut à gauche est intrusif car il interrompt simplement le flux visuel pour la plupart des utilisateurs qui souhaitent simplement lire l'image et le texte.
En plaçant le x en haut à droite ou en bas à droite, vous le placez bien à l'écart du flux visuel principal, mais toujours dans une position accessible aux utilisateurs qui ont besoin de trouver et d'appuyer sur le bouton Supprimer.
De cette façon, vous créez un meilleur flux UX pour la majorité des utilisateurs.
En haut à droite. Comme la plupart des gens sont droitiers (environ 90% des gens sont droitiers) et en utilisant les formules de loi de Fitts, c'est la meilleure option.
Scott
Tout d'abord, je vous suggère de vous demander "Est-ce que je veux que mon utilisateur supprime une photo aussi facilement?"
Les actions qui provoquent une sorte de perte ne doivent pas être rendues aussi faciles à atteindre. Ils doivent être intuitifs mais pas faciles. La suppression d'une photo en fait partie. Je voudrais également que mon utilisateur conserve les photos aussi longtemps que possible pour créer un profil sonore. Peut-être que quelqu'un à un moment donné se sentira tenté de supprimer une photo, mais regrettera de le faire. Croyez-moi, ce cas se posera plus fréquemment. En rendant ce type d'action un peu difficile à réaliser, vous travaillez en faveur de l'utilisateur.
Donc, tout d'abord, ne rendez pas les actions de "suppression de photo" aussi faciles d'accès. Une chose que vous pouvez faire est de trouver un moyen de sélectionner l'image. Une fois qu'une image est sélectionnée, l'écran passe en mode édition et un bouton de corbeille apparaît dans la barre de navigation pour supprimer les photos sélectionnées.
Ne suivez pas aveuglément d'énormes applications comme Facebook, elles ont une base d'utilisateurs énorme et fidèle. Il est très rare qu'un utilisateur remarque quelque chose comme ça dans de telles applications étant donné que d'autres choses y sont présentes pour le distraire, ce qui pourrait inciter les ingénieurs de Facebook à penser que ce qu'ils ont fait est bien.
Si vous voulez toujours vous en tenir à votre bouton x, vous pouvez le vérifier http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices .php pour comprendre où placer un élément d'action.
Je pense que vous confondez les choses. Ce que signifie X (sur Facebook comme dans presque tous les sites ou applications) est de FERMER une fenêtre, pas pour supprimer. Les actions de suppression sont importantes et ne doivent pas être placées dans un endroit où l'utilisateur peut cliquer dessus accidentellement, et encore moins s'il clique dessus à dessein en pensant qu'il va réellement FERMER = une fenêtre.
Je pense que vous devriez clarifier ce que vous voulez faire en premier. Si vous essayez de fermer une fenêtre, alors oui, en haut à droite est l'endroit parfait parce que la plupart des gens sont droitiers, donc ils n'auront pas besoin de traverser la fenêtre pour effectuer l'action de fermeture (cela est particulièrement évident dans le mobile: si vous appliquez le bouton de fermeture en haut à gauche, puis vous couvrirez l'écran avec votre main pour effectuer cette action)
Cependant, si vous voulez SUPPRIMER , comme le dit votre message, alors AUCUN de vos options est recommandé. Au lieu de cela, vous pourriez avoir une barre d'action au-dessus de l'image qui comprend une icône de suppression appropriée et/ou une supprimer du texte , ou un bloc "actions" sous la photo ou dans le cadre d'un contenu supplémentaire (comme le titre de la photo, la légende, la description, etc.), comme le fait FB). Et une fois que vous effectuez une action aussi importante, vous devez avoir une boîte de dialogue de confirmation.
En bref: si c'est CLOSE, alors vous devriez utiliser votre deuxième maquette, en haut à droite, comme l'a dit Tohster. Si vous souhaitez SUPPRIMER, voici une maquette rapide montrant les deux options que j'ai mentionnées (évidemment, vous devez en utiliser une, pas les deux en même temps)
EDIT Je n'ai pas compris de votre question que cela allait être appliqué sur une action en cours (ajouter une image), mais une action déjà effectuée, puisque vous ne peut pas supprimer ce qui n'existe pas. Ce que vous faites est annulation d'une action, ce qui est différent, mais mon raisonnement s'applique toujours. Voir l'image pour l'application FB où vous pouvez voir clairement l'icône annule une action, et par rapport à votre image (et FB travaillant sur du contenu déjà téléchargé) où votre icône FERME la fenêtre. Conceptuellement, ils sont toujours un bouton ANNULER. Dans le premier cas, ils annulent l'action de téléchargement d'une image, dans le second cas, vous annulez la visualisation de l'élément qui a été déclenché par un précédent on_click un événement
En haut à droite, il s'agit d'un modèle de conception d'interface utilisateur général auquel les utilisateurs sont habitués. Faire quelque chose de différent ne serait pas conseillé.