Guided Labs
July 28, 2023
5
min read

How Visual Organization Will Dramatically Improve the Effectiveness of Your Instruqt Challenges

Bob Reselman
Development Partner

The purpose of this article is to show you one thing that you can immediately do to improve the effectiveness of your Instruqt challenges. But first, let’s do an experiment.

Take a look at the photographs in Figures 1 and 2 below and then answer this question: which figure makes it easier to determine the number of legos by color?

disorganized legos
Figure 1
visually organized legos
Figure 2

I wager good money that Figure 2 is the easier one. Why? Because it’s visually organized. The legos are separated by color and arranged in a manner that makes counting each color easy.

Let's do another experiment. Between Listings 1 and 2 below, which listing is easier to understand in terms of a data structure?

disorganized JSON
Listing 1 Minified JSON
Formatted JSON
Listing 2 Formatted JSON

Again, I’ll wager Listing 2. The information in Listing 2 is formatted in a manner that makes it easier visually to distinguish the fields in the data structure as  well as the values assigned to each field.

So, what does visual organization have to do with improving the effectiveness of your Instruqt challenges? Read on, please.

Visual Organization Leads to Higher Retention

The fact is that when it comes to reading, the human mind absorbs and retains information that’s presented in a visually well organized manner faster than information that’s presented in a random or visually indistinguishable way.

Let’s do a last experiment. Take a look at the two excerpts of text below. Of the two excerpts to technical documentation presented below, which is easier to read and understand?

disorganized content
Excerpt 1
visually organized content
Excerpt 2

My vote is for Excerpt 2. The steps numbers are labeled in bold and the behavior that goes with each step is presented on a separate line. Also, each step is separated by a horizontal line. Subconsciously, the reader’s mind is making a distinction between steps using the visual cues provided even before reading the content.

The long and the short of it is that information that is presented in a visually well organized manner is easier to read, easier to understand, and easier to retain. Professional technical writers have had this drilled into them by technical publishing editors long before computers came along. Textbook design is a profession that’s been around for decades.

Yet, given the proliferation of easy-to-use web publishing tools, these days a lot of technical writing and publishing activities have been put into the hands of writers who might be good at wordsmithing, but don’t have a background in layout design. As a result, there are more than a few cases in which the skills that go with creating effective, visually appropriate technical documentation are absent. Applying CSS styles to a web page can only do so much. At some point those creating the document need to do the work of visually organizing their documents. Many times it’s easier said than done. Creating technical documentation that is visually well organized and formatted appropriately is as much an art as it is a science.

There’s a lot that goes into making technical documentation effective. At a high level you have to organize content in a way that presents information in a developmental manner in which concepts and practices are classified and introduced in a sequential, building block manner. (A term that’s used to describe the process is taxonomy.)

Building a cohesive taxonomy for technical content is hard work and beyond the scope of this article. And, it’s not something that can really be taught in a few sentences. (However, I do plan to cover the art and science of creating an effective taxonomy for technical content in future articles.)

But there is one thing that can be taught in a single sentence that will dramatically improve the effectiveness of your Instruqt challenges and here it is:

Visually segment each step a given Instruqt challenge by placing a line between steps, numbering and bolding each step while placing the step behavior on a separate line from the step description.

Excerpt 2 above demonstrates the principle. Also, here is a link to an Instruqt challenge I made that demonstrates the principle.

There you have it!

Putting it All Together

When it comes to making Instruqt challenges that work, it’s all about the reader. Keep in mind that when you ask readers for their attention, you’re asking a lot.

Therefore, it’s wise to use that attention efficiently and effectively. One fast, simple way you can improve your Instruqt challenges is to visually present steps in a challenge using the technique described above.

In terms of effectiveness, you’ll get a lot of bang for the buck. Yet, it’s only a start. But, it’s a good start, one that you can do immediately. 

Check out Instruqt's latest Product Update.

The purpose of this article is to show you one thing that you can immediately do to improve the effectiveness of your Instruqt challenges. But first, let’s do an experiment.

Take a look at the photographs in Figures 1 and 2 below and then answer this question: which figure makes it easier to determine the number of legos by color?

disorganized legos
Figure 1
visually organized legos
Figure 2

I wager good money that Figure 2 is the easier one. Why? Because it’s visually organized. The legos are separated by color and arranged in a manner that makes counting each color easy.

Let's do another experiment. Between Listings 1 and 2 below, which listing is easier to understand in terms of a data structure?

disorganized JSON
Listing 1 Minified JSON
Formatted JSON
Listing 2 Formatted JSON

Again, I’ll wager Listing 2. The information in Listing 2 is formatted in a manner that makes it easier visually to distinguish the fields in the data structure as  well as the values assigned to each field.

So, what does visual organization have to do with improving the effectiveness of your Instruqt challenges? Read on, please.

Visual Organization Leads to Higher Retention

The fact is that when it comes to reading, the human mind absorbs and retains information that’s presented in a visually well organized manner faster than information that’s presented in a random or visually indistinguishable way.

Let’s do a last experiment. Take a look at the two excerpts of text below. Of the two excerpts to technical documentation presented below, which is easier to read and understand?

disorganized content
Excerpt 1
visually organized content
Excerpt 2

My vote is for Excerpt 2. The steps numbers are labeled in bold and the behavior that goes with each step is presented on a separate line. Also, each step is separated by a horizontal line. Subconsciously, the reader’s mind is making a distinction between steps using the visual cues provided even before reading the content.

The long and the short of it is that information that is presented in a visually well organized manner is easier to read, easier to understand, and easier to retain. Professional technical writers have had this drilled into them by technical publishing editors long before computers came along. Textbook design is a profession that’s been around for decades.

Yet, given the proliferation of easy-to-use web publishing tools, these days a lot of technical writing and publishing activities have been put into the hands of writers who might be good at wordsmithing, but don’t have a background in layout design. As a result, there are more than a few cases in which the skills that go with creating effective, visually appropriate technical documentation are absent. Applying CSS styles to a web page can only do so much. At some point those creating the document need to do the work of visually organizing their documents. Many times it’s easier said than done. Creating technical documentation that is visually well organized and formatted appropriately is as much an art as it is a science.

There’s a lot that goes into making technical documentation effective. At a high level you have to organize content in a way that presents information in a developmental manner in which concepts and practices are classified and introduced in a sequential, building block manner. (A term that’s used to describe the process is taxonomy.)

Building a cohesive taxonomy for technical content is hard work and beyond the scope of this article. And, it’s not something that can really be taught in a few sentences. (However, I do plan to cover the art and science of creating an effective taxonomy for technical content in future articles.)

But there is one thing that can be taught in a single sentence that will dramatically improve the effectiveness of your Instruqt challenges and here it is:

Visually segment each step a given Instruqt challenge by placing a line between steps, numbering and bolding each step while placing the step behavior on a separate line from the step description.

Excerpt 2 above demonstrates the principle. Also, here is a link to an Instruqt challenge I made that demonstrates the principle.

There you have it!

Putting it All Together

When it comes to making Instruqt challenges that work, it’s all about the reader. Keep in mind that when you ask readers for their attention, you’re asking a lot.

Therefore, it’s wise to use that attention efficiently and effectively. One fast, simple way you can improve your Instruqt challenges is to visually present steps in a challenge using the technique described above.

In terms of effectiveness, you’ll get a lot of bang for the buck. Yet, it’s only a start. But, it’s a good start, one that you can do immediately. 

Check out Instruqt's latest Product Update.

Sign up for newsletter

Here you'll get a quarterly newsletter made for growth-minded people

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sign up for newsletter

Here you'll get a quarterly newsletter made for growth-minded people

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Try Instruqt Yourself

Get a closer look at how Instruqt can help you sell smarter and train better.

Take a self-guided tour of Instruqt