Technical Articles
What’s the Buzz about Simplified User Interfaces (SUIs) and Screenshots?
Have you ever considered incorporating screenshots in your product documentation? Worried about maintenance issues if you use screenshots? Do you feel that screenshots might be overwhelming for your users because they capture too much complexity?
Image Source: Adobe Stock
Screenshots are probably the easiest way to incorporate images in software documentation. The problem is that they come with a fair share of maintenance issues. Every time there’s a change to a user interface or the components in your screenshot, you’ll have to take a new screenshot and update your software documentation. Not to mention translation nightmares and accessibility problems due to screenshots being static images.
In my previous blog post, I gave insights about what kind of graphics you can create in software documentation and when. In this blog post, we talk about an easier way to achieve a screenshot-feel and incorporate such images in documentation by exploring something called Simplified User Interfaces or SUIs.
So, what is a Simplified User Interface? It is pretty much what its name suggests – a graphic of a user interface that is simplified to such a level that you focus the user’s attention only on the most important elements. This way, your users will immediately know where to click and what to do. Also, in a SUI, you hide less important elements by reducing them to simple shapes.
For example, this is the original:
A screenshot of an application with a menu item highlighted
And here’s a SUI for the original:
In this graphic, only a single menu item is shown to focus the user’s attention
In the example, the first screenshot shows the original user interface, while the second one shows a simplified version a SUI. In both the graphics, the menu item Home –> Shapes is being referred to. Which image do you think a user would prefer for clear instructions or when performing a task?
The elements that are required for the user to understand the graphic are kept visible, and you explain the graphic in the surrounding content as usual. This way, the image feels like a screenshot, but you avoid unnecessary distractions and complexity, and ensure that the user interface is still recognizable. Also, if you realize, creating a SUI is very similar to writing good quality documentation – by this I mean, you’re giving your users the required information at the right time and in the right context. This also improves your users’ experience with documentation.
Advantages of SUIs
- If you create SUIs without any text and explain the graphic in the caption and surrounding text, you can use the same graphics for any language you support. The maintenance and translation efforts are drastically reduced in this case.
- What happens if the UI changes due to an additional feature, or a UI element is removed or moved? In a screenshot, this would’ve posed a problem, but a SUI can sustain such changes for a longer period of time since it’s an abstract representation of the interface. If your SUIs contain text, you do have a certain amount of maintenance and translation efforts, but they’re not as high as that of screenshots.
- New users can be overwhelmed with busy user interfaces. In a traditional screenshot, you can use visual instructions and design tools such as different shapes or highlighted text to focus the user’s attention. A SUI on the other hand enables you to reduce the content by hiding or abstracting less important information and show only what’s required for the user.
- SUIs can be used for static images as well as in video content.
Examples
Here are some examples of SUIs incorporated in different kinds of documentation:
- Product Documentation: Creating a Service Instance for Basic Authentication
- Tutorials:
Creating Simplified User Interfaces
You can easily create SUIs using software that have tools to simplify your user interfaces. One such software is Snagit. Snagit has a tool called “Simplify” that helps you in designing your SUIs.
Just as with other graphics, create guidelines for your SUIs and document them in your style guide. Guidelines can be regarding colors, shapes, sizes, line thickness, blurring to hide confidential information, highlighting, and managing different screen sizes. These guidelines will ensure consistency in your SUIs and help with a seamless user experience.
Image Source: Adobe Stock
With software delivery cycles becoming shorter, SUIs provide a great way to create better visual content quickly and easily, and also extend the lifetime of graphics against software updates. SUIs can be very valuable for users trying to navigate new and complex software, and they can be effective in your users’ learning journey and experience.
Did this blog post motivate you to simplify graphics and incorporate them in your documentation? Tell us what you think about it using the comments. Do share this blog post with a friend who might benefit from it.