L'utilisation d'un filaire au lieu d'une capture d'écran est-elle acceptable dans les travaux techniques?
Lorsque vous mettez des captures d'écran d'une application dans un travail technique (comme un manuel pour les utilisateurs finaux), la plupart des captures d'écran devront être modifiées pour être utilisables. Les éléments d'interface utilisateur étrangers peuvent avoir besoin d'être supprimés, l'espacement peut devoir être modifié pour que l'image puisse tenir dans la zone désignée, etc.
J'ai vu quelques publications techniques qui utilisent des "wireframes" au lieu d'images réelles d'une application. Ce sont des formulaires qui existent déjà; ce ne sont pas des filaires destinés à des fins de développement. Ceux-ci incluent généralement la plupart des éléments d'interface utilisateur afin que l'utilisateur puisse reconnaître l'écran, mais par nature ne sont pas des représentations exactes de ce que l'utilisateur verra.
Voici un exemple. La première image est une capture d'écran d'une application (déjà éditée pour la taille, etc.) et un filaire vectoriel du même écran.
Le wireframe présente quelques avantages. Étant un fichier SVG, il sera mieux imprimé. Lorsque des parties de l'interface utilisateur changent (par exemple, une nouvelle fonctionnalité a été ajoutée à un écran), il est beaucoup plus facile de modifier le vecteur au lieu d'assembler une nouvelle capture d'écran modifiée. Les graphiques SVG peuvent également profiter d'un VCS comme git. Il est également possible d'apporter des modifications en masse intéressantes aux graphiques SVG (par exemple, en utilisant une expression régulière pour trouver toutes les instances de "Connexion" et la changer en "Connexion").
L'inconvénient est que l'image résultante ne montre plus l'application réelle qu'elle explique. Ma question est est-ce un problème?
- Existe-t-il des preuves qu'un filaire au lieu d'une capture d'écran pourrait embrouiller un utilisateur travaillant avec une application? (anecdotique ou autre)
- Existe-t-il des meilleures pratiques pour remplacer une capture d'écran par un filaire?
- En plus de ne pas ressembler exactement à l'application, y a-t-il d'autres pièges à utiliser un filaire au lieu d'une capture d'écran fidèle à la réalité?
Ne créez pas de traduction visuelle inutile.
Dans le cas des manuels de produits physiques (comme mentionné dans un autre exemple), les schémas sont assez courants. Cela est vrai pour deux raisons: le coût de la photographie et la complexité des visuels tridimensionnels dans les graphiques d'information. Le logiciel n'en souffre ni.
Lorsque vous prenez quelque chose qui est facilement représenté en deux dimensions et modifiez arbitrairement son style, vous créez une barrière pour le lecteur (si petite soit-elle). Ils doivent maintenant considérer votre application comme une collection de contenu plutôt que de s'appuyer sur les repères visuels que votre concepteur d'interface a créés pour eux.
Regardons un exemple dans vos visuels. Ici, nous voyons deux zones identiques représentées avec une hiérarchie visuelle considérablement différente. Il y a même un changement dans l'icône delete.
Le fait qu'une capture d'écran et une image filaire ne correspondent pas parfaitement n'est pas une surprise. En fait, c'est prévu. Faire de l'ingénierie inverse d'une structure filaire pour suivre les itérations d'une interface fonctionnelle n'est pas un mince effort. Je dirais que c'est un effort inutile, dans la plupart des scénarios.
Graphiques pédagogiques visuellement simplifiés
Cela dit, il existe des cas où des visuels d'interface simplifiés à des fins pédagogiques ont du sens. La meilleure façon de gérer cela est d'appliquer une légère altération de la peau à l'application. Évidemment, cela est plus facile à faire avec une application Web que ce qui semble être une application Windows dans votre cas. Mais ce n'est pas impossible, si l'application est construite correctement.
Les images filaires sont généralement créées bien à l'avance avant de générer l'interface utilisateur finale.
Tant que votre image filaire représente l'application sans aucun changement structurel, tout devrait bien se passer. Les éléments d'interface utilisateur tels que les cases à cocher et les boutons changeront selon la plate-forme.
Bien qu'il n'y ait aucune preuve de l'utilisation d'un filaire au lieu d'une capture d'écran, vous pourriez penser à manuels de produit de tout produit physique que vous commandez.
Ils ne représentent que la structure du produit que vous avez commandé et non des modèles de couleurs ou un modèle identiques 1: 1 . Pourtant, ils sont beaucoup plus faciles à lire dans le manuel et à comprendre la position des boutons, etc.
En ce qui concerne votre Wire-frame, je pense qu'il représente avec précision l'interface utilisateur finale , et pourrait certainement donner à l'utilisateur une idée de à quoi s'attendre .
En remplaçant la capture d'écran par un fil de fer, assurez-vous que la structure et le positionnement des éléments sont corrects . Lorsqu'elle est mise à l'échelle pour remplir un grand écran, la position peut varier avec l'espacement, mais tant que la structure est correcte et que l'utilisateur se souvient du positionnement à partir du filaire , ça devrait aller.
Le seul inconvénient auquel je pourrais penser est de ne pas recevoir suffisamment de validation de l'utilisateur sur les couleurs ou tailles des boutons que vous auriez pu utiliser. Ils pourraient être plus petits ou plus lumineux que vous auriez besoin de mettre en œuvre lors de la maintenance ultérieurement.
P.S. Si vous pouviez avoir des exercices interactifs pour les utilisateurs avec les wireframes, ils se souviendraient encore plus de la conception lorsqu'ils passeraient à la conception finale.