Simplified User Interface: The Beginner’s Guide

It can be difficult to onboard users to new and complex interfaces and workflows. Too much information can easily overwhelm the user and make it difficult to keep the focus on the essential feature or functionality.

Additionally, software updates tend to be frequent. These regular updates, coupled with localization processes, can make documentation work in the software industry quite demanding for technical content creators. How can we face these challenges without having to constantly update supporting content?

What if we designed our visual content in a way that is easy to follow, and is able to withstand future UI tweaks?

Let us introduce a design technique used by TechSmith’s User Assistance team and others – it’s called simplified user interface.

Simplified User Interface: What is it?

A simplified user interface (SUI) is a visual representation of a software interface that removes  unimportant elements and reduces them to simpler shapes.

Simplified User Interface graphic showing PowerPoint UI

An example of SUI (pronounced “sue-ee” by the TechSmith User Assistance team).

The elements that are fundamental to the instructions or for the user to understand are purposefully kept visible and the SUI graphics serves as a visual aid to support the instructional content given via the sub- or figure text. Using this method, we can create easy-to-follow instructions that help the reader to get to the point and avoid distractions.

SUI graphics allow for easy-to-follow instructions which enable the reader to get to the point quickly and avoid distractions.

 

Keep it simple, Stupid!

SUI graphics leverage the famous K.I.S.S. (Keep it simple, Stupid!) principle: systems perform better if they are kept simple and when unnecessary complexities are avoided. By reducing the graphics to a simpler state and by removing distractions, we can allow the user to focus on only the essential information, which creates a better experience.

Josh Cavalier,an eLearning expert, describes cognitive load as the “amount of information being processed by the brain”. When you reduce the amount of distractions for your audience, they are better able to focus their attention on what is important.

Simplified User Interface graphic with one menu item exposed

In this example, only a single menu item is shown so as direct user attention to something specific.

In a recent blog post from The Interaction Design Foundation, it’s explained that a user is focused solely on how useful something will be for them. This is true for both the product design itself but also for the how-to documentation and instructions.  If it’s hard to understand how to use a product, the value that it has to offer, or how a product can solve a particular problem, then users will struggle.

SUI graphics build upon these principles: Using a simplified user interface in help documentation can aid in user success by giving them only the information they must have in order to be successful, increasing their success and satisfaction with a product.

 

Keeping content up to date

Keep your content current, longer. A quick survey with attendees at STC Technical Communication Summit revealed that keeping content up to date is one of the biggest challenges faced by technical communicators today. And that makes sense, if we look to software as an example: release cycles are shortening and new features and functionality are being added frequently. And with each feature addition and related tweaks to the user interface, the instructions that the technical documentation team laboriously put together are at risk of becoming quickly out of date, even if only slightly. So what is a technical communicator to do?

Again, simplified user interface graphics can play a strategic role in one’s content strategy. The removal of a button or addition of a feature will easily confuse the user if this change is not reflected in a precise screenshot. However, a simplified user interface graphic can often sustain multiple software versions and updates before needing further updates. The simplified design is more forgiving to minor interface changes and additions as it is already an abstract representation of the interface. Technical content creators can use this technique to extend the shelf-life of their visual content or even for repurposing content in similar scenarios.

 

Faster content localization

Any content creator who has been through the localization process knows that it can be time-consuming and expensive to create screenshots and graphics for each locale. Yet, the localization of onboarding materials and other graphics can be trivial for any organization that wants to be successful internationally. As Day Translations points out, we should all “scrap the idea that English is the language of business”. It’s important to cater to different customer bases by providing them with content that speaks to them…in their native language.

Most technical communicators know the effort it takes to create and manage unique screenshots for each language. In order to simplify this task, one can design the content to use SUI images instead of language-specific screenshots. The same graphic can often be repurposed across multiple languages with little to no adjustment. Additional information or instructions can be conveyed through the sub- or figure text.

Simplified User Interface used in both German and English dialog boxes.

In this example, the same SUI graphic is used in the software preference dialog for all languages.

Again, this is another area that helps to reduce creation and maintenance efforts while still providing the user with clear instructions.

 

How to create a Simplified User Interface Graphic

Creating a simplified user interface is a manual process that can take some time. We find it easiest to start with a real screenshot, and transform it into a SUI graphic. For this, you will need a screen capture software and image editing software.

At TechSmith, our current tool of choice for creating SUI images is Snagit, though any other capable image editor will also do. Below, you’ll find the process we typically follow.

 

Step 1: Capture the screenshot

Using Snagit, capture a screenshot of the user interface you want to turn into a SUI graphic and open it in the Snagit Editor.  Edit the screenshot down to the right area and dimensions so it reflects the desired output.

Screenshot showing a screenshot of Skype for Business within the Snagit editor

Step 2: Simplify the screenshot

Once the screenshot and the colors are set up, it is time to simplify the graphic. First, remove visual noise like unrelated menus, buttons, or tool tips to reduce the complexity. This is easily achieved using the Selection Tool in Snagit, with Background Auto-Fill enabled.

GIF showing the selection tool in Snagit

Step 3: Add shapes

Use the shape tool to place colored rectangles over blocks of text and labels. Use other shapes, such as circles, to simplify other screen elements. Remember to keep elements or features that you need to highlight visible in their original state.

GIF showing shapes being added to a screenshot in Snagit

Bonus Tip: Set up a Quick Style Theme in Snagit. A theme is commonly used to save brand colors, but you can also save any effects to tools, such as the thickness of shapes. Pre-load the colors you plan to work with, so you can easily and consistently select the necessary tone. Plus, once a theme has been created, it will be available for you to use in the future.

Step 4: Save it

When you are done, save your file as a .png or .jpg file to be used in your documentation. We highly recommend also saving your final image as a .snag file. This is the Snagit project file type that will allow your future self to reopen the project and edit and adjust all simplifications. This makes potential updates and graphical variations easy and you won’t need to recreate your SUI image each time.

Bonus Tip: use a tag to easily access this file within the Snagit library at later time.

 

Key takeaways

The benefits of using Simplified User Interface graphics in your technical documentation is twofold: One the one hand, these graphics can visually enhance your instructions and improve the onboarding experience for your users. On the other hand, the graphics also benefit technical communicators as they can reduce the need for screenshot updates and aid with  localization. Integrating SUI graphics into part of one’s content strategy is therefore a smart business decision that all content creators should consider, regardless if your favorite aspect is the improved user experience, having evergreen content, or faster localization. Even a few Simplified Graphics can make a difference.

If you aren’t using Snagit yet, download the free trial today, and get started created your own SUI screenshots!

Editor’s Note: This post was originally published in May 2012 and has been updated for accuracy and comprehensiveness.

The post Simplified User Interface: The Beginner’s Guide appeared first on TechSmith Blog.