How Good Instructional Design Can Help You Build Better Web Content

I’ve been reviewing GUI Bloopers to reaffirm some of the design issues I’ve been facing lately, and I ran across the following principle:


Basic Principle 2: Consider function first, presentation later.

Jeff Johnson goes on to better define what this means in this quote:

“A software application embodies certain concepts and relationships between concepts. Designers should fully define the concepts and their relationships before they design how to present the concepts to users.”

Applying Instructional Design principles used to do a simple task analysis can help facilitate better design. Simply, you should be able to clearly define the tasks you want the users to complete in interacting with your site, application, or GUI.

I have a somewhat simple example.

Say you’re creating a site for users with the purpose of informing them how to effectively podcast.

You do a simple task analysis that asks the following:

  • What knowledge do the user/learners need?
  • What behaviors do they need if any to do this?
  • What skills do the need to be able to perform?

After you answer these questions (identifying the content items for your site),  you will need to create formal learning objectives to guide users through the content they need to be able to accomplish the task, activity or perform the skill that the site is teaching.  There is an art to writing good learning objectives that are measurable, and there are whole websites and books devoted to this subject, but for the purpose of this exercise, I am writing them in a very simple form. In the podcasting example, a set of learning objectives may look like this:

Learner will be able to:

  1. Define what a podcast is and how it is used by both podcasters and listeners.
  2. Identify tools needed for downloading podcasts.
  3. Use a simple audio recording tool/software to record a podcast.
  4. Publish their podcast.

In this scenario you could organize the learning content by the learning objectives. Let’s say you create a simple schematic/wireframe for your web page that looks like this:

This, of course, is a very simple example but the same steps could be used to determine the page layout or content for a site or sub page to a site. From this point you could treat all four of the items above as main categories in the site and determine sub or enabling learning objectives and content items needed to meet these over-arching objectives.

It may seem like this method is over thinking the development of content for the web, but I have found that this method of determining content by ‘Task Analysis’ actually helps better address learner needs rather than simply spilling out a pile content items and then trying to figure out an organizational structure around your pile after wards.

The same task analysis methods can be applied to GUI design of a tool.  Just ask yourself (bear in mind some of these questions are over-simplifying things but but there are still users out there who don’t know these things):

  • What to the users need to know to be able to use this application?
    • Example question – Do they know how to use a file menu?
  • What skills do the need to successfully work with the tool?
    • Example question – Do they need to know how to upload a file such as a .gif or a .wav file?
  • Are there any behaviors or attitudes about technology your audience has that may impact how they use and view the tool?
    • Example question – Do the users in your audience like to read printed materials? (Though personally I think we should discourage this as much as possible)

I believe that if you answer some of these questions up front before you start designing the tool, you win at least 80% of the the battle when it comes to conceptualizing design effectively.  The result: More happy users.

Happy User vs. Sad User

Happy User vs. Sad User

Advertisements

0 Responses to “How Good Instructional Design Can Help You Build Better Web Content”



  1. Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Why?

My place outside of work to explore and make connections with the ideas and things (sometimes work-related) that I'm passionate about.

My Tweets

Blog Stats

  • 282,655 hits

%d bloggers like this: