: Is using a wireframe instead of a screenshot acceptable in technical work? When putting screenshots of an application in technical work, most screenshots will require editing to be usable. Extraneous
When putting screenshots of an application in technical work, most screenshots will require editing to be usable. Extraneous UI elements may need removed, spacing may need to be altered so that the image can fit into the designated area, etc. As an application changes, screenshots need to change to, which can be tedious when all of the screenshots are raster images.
I've seen some technical publications that use "wireframes" instead of actual images of an application. These are form applications that already exist; these aren't wireframes intended for development purposes. These usually include most of the UI elements so that the user can recognize the screen, but by nature are not exact representations of what the user will see.
Below is an example. The first image is a screenshot of an application (edited already for size, etc) and a vector wireframe of the same screen.
The wireframe has a few advantages. Being an SVG file, it will look better in print. When parts of the UI change (e.g. a new feature was added to a screen), it is much easier to modify the vector instead of stitching together a new, edited screenshot. SVG graphics can also take advantage of a VCS like git. It is also possible to make interesting bulk changes to SVG graphics (e.g. using a regex to find all instances of "Login" and change it to "Sign in").
The downside is the resulting image no longer shows the actual application it is explaining. My question is is that a problems?
Is there any evidence that a wireframe instead of a screenshot would confuse a user working with an application? (anecdotal or otherwise)
Are there any best practices when substituting a screenshot with a wireframe?
Besides not looking exactly like the application, are there any other pitfalls to using a wireframe instead of a true-to-life screenshot?
More posts by @Pierce403
3 Comments
Sorted by latest first Latest Oldest Best
When I am creating training materials, I use screen shots.
If I want to demonstrate flow of a page or specific interactivity, I create a prototype. I have often found that in the initial stages of a project using generic b/w wireframe using either Arial or Geneva are the best way to go. That way my client or colleague can focus on the big picture.
When all interactivity, page flow, and sitemaps have been created than I introduce color in the the medium fidelity wireframe.
If the screen shots are there to assist a user in using the app, then they should be literal screen shots. Making them wireframes just adds another layer of translation the user has to do.
Wireframes are used for the purpose of illustrating user flow, storyline and basic foundation of each page i.e. image placeholders, text placeholders, etc....
It gives an initial foundation and shape to the project...it captures basic elements of the project ahead...what the basic layout of each page, how many clicks it takes a user to perform a task.
From personal experience I used to do screen shots but as you have mentioned yourself its tedious, unnecessary work of making a screenshot fit a specific narrative, getting rid of unnecessary portions, formatting...to me it would take twice as long than to do a wireframe from a get go. Plus screenshots usually already have a design done and it may not be the finalized design, thus creating further confusion for client, developer and anyone else involved in the process.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.