Neil Hokanson Technological Understandings

What is Instructional Technology?
(Personal Reflection, May 2005)

What is instructional technology?  A good question to ask, consider, and answer if one is pursuing a master’s degree in this particular field of study!  Read on and find out what instructional technology is and where the field is headed in the future.

In 1977, the Association for Educational Communications and Technology (AECT) defined educational technology.  However, this paper is defining instructional technology; so, what is the connection?  The AECT states:

Instructional technology is a sub-set of educational technology, based on the concept that instruction is a sub-set of education.  Instructional technology is a complex, integrated process involving people, procedures, ideas, devices, and organization, for analyzing problems, and devising, implementing, evaluating and managing solutions to those problems, in situations in which learning is purposive and controlled.  In instructional technology, the solutions to problems take the form of Instructional System Components which are prestructured in design or selection, and in utilization, and are combined into complete instructional systems; these components are identified as Messages, People, Materials, Devices, Techniques, and Settings.  The processes for analyzing problems and devising, implementing, and evaluating solutions are identified by the Instructional Development Functions of Research-Theory, Design, Production, Evaluation-Selection, Utilization, and Utilization-Dissemination.  The process of directing or coordinating one or more of these functions are identified by the Instructional Management Functions of Organization Management and Personnel Management.  (Ely & Plomp, 1996, p. 4)

Technology broken down into its root words techne—the Greek word for art and logos—Greek for word, technology is the art of applied science (Hatcher, 2002, p. 28).  Based on this definition Hatcher states:

Art implies human creativity and skills with an aesthetic and even spiritual basis, yet our contemporary concept of technology is aligned more with scientific problem solving, communications, and the cold dissemination of information in support of rational economics than with some inspirational goal….Technology is an activity that applies the principles of science and mechanics to the solution of problems.  It includes tools, resources, processes, people, and systems.  Its goal is to accomplish tasks and provide an advantage to humans within a specific social, economic, or environmental context.  (p. 29)

The Master of Science in Instructional Technology program at the University of Wyoming states:

The purposes of the master's program in instructional technology are to help students to acquire the competence to design and develop effective learning systems and environments and to manage information and learning resources. Specific competencies in the program include (a) application of principles of human learning and psychology, (b) use of research and evaluation techniques, (c) application of principles of effective communications, (d) use of instructional design for delivery systems, (e) use of print and non-print media and technologies for instructional product development, and (f) information management and retrieval.  (http://www.uwyo.edu/alt/master.asp, 2005)

With these definitions and explanations of educational and instructional technology, technology per se, and an example of a master’s program statement of purpose one sees the complexity of what an instructional technologist is and what they do.  Instructional technologists are specialists that follow systematic processes and methods to facilitate and improve learning.  Furthermore, instructional technologists draw upon educational learning theories, system design processes, diffusion of innovation and change, principles of ethical human resource development, research and development, and work to achieve, create, and disseminate best practice materials and skills in varied learning situations.

References

Ely, D. & Plomp, T.  (1996).  Classic Writings on Instructional Technology.  Englewood, Colorado:  Libraries Unlimited, Inc.

Hatcher, T.  (2002).  Ethics and HRD.  USA:  Perseus Publishing.

University of Wyoming, Laramie, Department of Adult Learning & Technology.  (2005). Masters Program:  Description of Degrees.  Retrieved May 31, 2005, from the College of Education Department of Adult Learning & Technology Web site: http://www.uwyo.edu/alt/master.asp

*The following is a critique of web usability criteria used in ITEC 5660 to evaluate and assess web based interactive learning systems particulary web sites from various fields of study.

Web Usability Criteria
(Adapted from “Great Tips from CNET Designers,” on the Builiders.com web site, 2002 and further adapted by Team B from the University of Wyoming ITEC 5660 course, Spring 2005:  Joalyne Steinhausen, Benjamin Curran, and Neil Hokanson)

We as Team B felt the Web Usability Criteria were adequate and in need of some tweaking or clarification.  What you will find in this document are link examples, “In other words” quotes, hints, utilities, and some additions or suggestions.  We felt Dr. Swisher’s explanations throughout the course clarified the items that we struggled with as a team; hence, the “in other words” items.

Some other ideas we had for the course that would add to the criteria or can serve as alternative assignments include:

Example links or examples per se would be beneficial to give students a look at what the criteria is explaining; however, after a bit of searching the web it would take some time. It would be a good project for a course like this, but would need to be at the beginning of the course to allow for time needed. An example item could be like what Renee produced and posted concerning grid layers. In creating examples specific criteria could be assigned to each group and in the end all of the items could be put together as a whole class project.

The Brinck text obviously provides visual examples of various web elements that can be tapped into and checklists that can be utilized to enhance the criteria used or at least supplement it.

Another idea for an assignment is students could alternate assignments between the criteria checklist we used one week and then, for example, use the Postproduction Checklist from Brinck Chapter 11 (p. 384) or the General Purpose Checklist in Chapter 12 (p. 412). Granted, these would not follow a linear path of building line upon line and precept upon precept, but the Brinck text is flexible enough to allow for growth. As students use the Brinck checklists multiple times, they would refine their efforts by the end of the course as we have using the checklist criteria.

By no means do we consider this to be the “be all and end all” of what should be done, and we recognize the other teams will have some wonderful ideas as to how to approach this or even replace what we have used throughout the course.  Much of what we have included here are clarifications Dr. Swisher mentioned to other teams over the course of the semester.

Thanks goes out to all the other teams for your questions, clarifications, and encouragement during this course.

Site Design

1.   Clear, consistent naming conventions
2.   Locate logos consistently
3.   Reduce load-time for prospective users
4.   Reduce the user’s technology burden
5.   Use same image on multiple pages
6.   Consistent page design
7.   Clarity of content priorities

Navigation

8.   Offer multiple navigation approaches
9.   Write good text links
10. Design navigation icons wisely

Page Design

11. Create a grid layer for page design
12. Create interesting pages
13. Keep vital elements “above the fold”
14. Blur backgrounds for clearer text
15. Use subheads for effect (“chunking”)

Page Layout

16. Lay out type in a narrow column
17. Avoid nesting and long vertical tables
18. Avoid scrolling text (and other “dancing baloney”)
19. Use white space

Site Design

1.  Clear, consistent naming conventions 

Decide on clear naming conventions for images, and stick to them. For example, on the front page of one site several years ago, there were two template layouts, one with two small images and the other with a single big image. These images promoted featured stories.

It used this naming convention for the small image:

sm.0326kahn.gif

Where sm indicated small, 0326 indicated the date the story posts, and kahn indicated the name of the author. The same was true for large images, which started with bg in the naming convention:

bg.0326kahn.gif

Images should be identified with a naming convention that is site-wide and, if possible, department- or company-wide. That way, people are less likely to get confused.

Contributor: Gareth Finucane, former senior art director, Corporate Creative Services.

Example: How to -http://www.bc.edu/offices/techsupport/fac-staff/web/webitsupport/docs/content-panels/inserting/images/

In other words:  “What this one has to do with, as they imply in the writeup about it (that "19 criteria doc"), is a level of naming consistency among those who are maintaining and changing the site--use a naming system for the site's images that assists the designers and code writers in identifying the images (their file names) in a way that makes sense to them.

Now, I'm not altogether sure that we, as outside evaluators of sites, can know for sure if a particular method of naming the graphics files is working or not, BUT we can at least tell if there is no consistency at all among the site's naming conventions.

Also, when viewing an image's properties through your browser, it should tell you (when you right-click on it) its

1. name
2. size
3. dimensions (in pixels)
4. format (gif, jpg . . .)

What you are looking at, for Item 1, is the name of the image.”  Dr. Bob Swisher

2.  Locate logos consistently 

Placing logos in a consistent location is a very simple rule-of-thumb, but many sites ignore it. If you have a logo or symbol for your service, use it on each page in the same location and make it the same size.

Contributor: Fred Sotherland, senior vice president, creative director, Creative Services.

In other words:  “Well, I have a bias on this one, so let me just get it out right away: not only do I believe that sites need to locate logos consistently, I believe (in our particular reading culture) that the logos should be immediately visible (above the fold), and same from page to page (consistent), and (preferably) found on the left top side. Now, I say "preferable" because I ALWAYS make allowances for violating the rules of thumb IF THERE IS A COMPELLING REASON TO HAVE DONE SO. So, I must say, I would qualify my personal rule of thumb above to end with the expression, "if it makes sense not to violate the rules for some special, specific reason that is defendable."  Dr. Bob Swisher

3.   Reduce load-time for prospective users 

Most Web servers call up four GIFs at a time, so it's a good idea to limit GIFs to fewer than four per page. By avoiding multiple server calls for GIFs, your pages will load much faster.

Contributor: Fred Sotherland, senior vice president, creative director, Creative Services

Add:  JPEGs too.

Example:  Problem - http://www.quiltsofgeesbend.com/quilts/ (multiple images)

Utility:  http://www.websiteoptimization.com/services/analyze/

4.  Reduce the user’s technology burden 

If you want to reach a broad audience, don't depend on optional plug-ins or quirky, browser-specific technologies when people first come to your site. You run the risk of scaring them off before they even get started.

If you care about keeping people at your site, don't put audio, video, or animations on your front door or home page. JavaScript rollovers are another technique to use with care if you don't want to alienate users. Rollovers require users' browsers to support their coding.

You should offer the same kind of convenience concerning plug-ins.

Contributors: Fred Sotherland, senior vice president, creative director, Creative Services; Gareth Finucane, former senior art director, Corporate Creative Services; Joseph Tucker, technical designer, Corporate Creative Services.

Hint:  Provide links to sites that enable the user to get a particular plug-in if needed.  Avoid huge video files, or provide a warning!

5.  Use the same image on multiple pages 

Using the same image files in different places on your site lets users pull them from their browser caches rather than from the server. That makes pages download faster and puts less stress on the server.

Another trick is to reuse portions of images that change only slightly from page to page. For example, if a navigation bar is repeated across several pages of a section, break it up into its discrete elements so that most of it will be cached as users surf your site.

But reusing images goes beyond navigation bars: Repeat as many graphics from previous pages in a section or site as possible. Whatever the user can load from the cache is a huge advantage. At the same time, repeating elements helps create a consistent look and feel.

Contributors: Regan Gradet, associate art director, CNET.COM; Erik Waterman, senior designer, Television, Creative Services; Gareth Finucane, former senior art director, Corporate Creative Services.

6.  Consistent page design 

Some sites use database templates to serve their stories. While it's not practical for every site to generate pages from a database, you should still strive to maintain page-to-page consistency wherever possible.

If your site has a set style with some repeated elements, it's much easier to make changes--to text and pictures, for example--when you don't have to rebuild the entire page from scratch each time. Consistency also makes it easier for other designers to come in and make changes without having to redo the design.

Contributor: Jeff Quan, associate director, Information Graphics, NEWS.COM.

7.  Clarity of content priorities 

Use the site's visual design to establish a hierarchy of content. Lots of sites seem cluttered and confusing because the site designer failed to identify what was most important.

When thinking about the relative importance of your site's content, the issue of scale often arises: How big should each element be? Many sites make every element the same size, but this doesn't help the user figure out what's most important. You (possibly in consultation with your client, whether internal or external) need to figure out what's important: make that big and make what's less important small. Once you determine the priorities, it will be much easier to figure out where the pieces are supposed to go.

Contributor: Lane Hiers, art director, Gamecenter.

Navigation

8.   Offer multiple navigation approaches

Remember that the Internet isn't a passive medium like TV: Your visitors are active and have their own approaches to getting around the sites they visit. Nobody has figured out the ultimate user interface. In any case, it's costly and time-consuming to create totally unique interfaces for each user or group of users. But you can offer multiple approaches to getting at the same data.

Some sites have arrows leading from page to page. This caters to users who want to proceed through stories sequentially. At the same time, those stories may also have a list of HTML links so users can bounce among different pages in a nonlinear fashion.

At one point, a particular news service's web site offered both forward and back navigation arrows to help users go from story to story. This ultimately proved awkward, so the site turned to related links--three or four links at the bottom of the page that take readers to pages associated with the one they're reading at the time.

Contributor: Fred Sotherland, senior vice president, creative director, Creative Services.

9.   Write good text links 

When creating navigation links, be brief and to-the-point. Avoid wordiness. Don't make users read something like click here to get to modems. The link should just say modems, as an example.  

At the same time, be sure to choose words that convey what the reader can expect on the other end of the hyperlink. Cute or vague links don't work either. Users want to know exactly where they're going before they click a link. The link language should entice the reader to click, and the link itself should deliver on the promise.

Contributor: Heike Rapp-Wurm, art director, Snap Online.

10.   Design navigation icons wisely 

Graphics for navigation--little icons or photographs that link users to particular pages--are often unnecessary. If you can come up with an icon that by itself denotes what the page stands for, use it. But all too often, Web designers simply combine a cute image with text to create the icon. In most cases, this is overkill. The link will be just as prominent, and the page will load faster, without using the image at all.

The same is true of icons on the pages themselves. For instance, if you want to design a phone book, use an A as a design element to start the alphabetical list, not a smiley face or something meaningless.

Of course, some sites use icons simply and well. Apple's Macintosh built its success on proper use of icons. And some symbols, such as the cross-bar through a circle meaning "no," can be more immediately recognizable to an international audience than a plain text link would be. But unless icons have been clearly defined--either particularly to your site (in which case they should be very obvious) or more generally to a large audience--they're ornamentation, not navigation.

Contributor: Heike Rapp-Wurm, art director, Snap Online.

Examples:  Problem http://www.frysteel.com/data/index.html (This is actually Flash navigation and may not fit here).

Hint:  Navigation buttons or bars with text are considered icons (they are images).  If they are used, how wisely have they been used?  If not used = DNA.

Page Design

11.  Create a grid layer for page design 

Instead of creating separate elements of a page--the title banner, navigation, menu bars, and so forth--work on the whole page at once and save it as a single file. Sure, the file can grow large and unwieldy, but it will prevent problems if your individual elements turn out to be the wrong size or shape to fit your page.

Once you've got the page more or less laid out, create a new, top-most layer in your graphics software and set it to low opacity. Draw blocks of color on that layer to mark the boundaries of the individual images you'll use on the page. Then use the blocks as guides for cropping, copying, or redesigning the images underneath. (You can also draw one-pixel-wide grid lines to separate the various page sections.)

Keep the guide layer around for as long as you're using the same layout. This is particularly helpful for pages that must keep a constant layout even though the elements change frequently. These guides also can be useful in HTML production, as they make it easier to follow table layout and cell dimensions.

Contributors: Gareth Finucane, former senior art director, Corporate Creative Services; Dennis Crothers, senior designer, Corporate Creative Services.

See Renee Tafoya example

In other words: “Clearly, this is aimed at designers of pages, but it is the reason that we (as assessors) should sensitive to its use: in the criterion writeup for this one, designers were advised to keep the same grid layout "for as long as you're using the same layout. This is particularly helpful for pages that must keep a constant layout even though the elements change frequently." 

You are looking to see that all the site has consistency on the placement of its material. Users get confused, and lose orientation if the previous expectation of placement is lost or violated. Dr. Bob Swisher

12.   Create interesting pages

To avoid confusing readers, content that is meant to be read linearly from page to page should be designed with a consistent color scheme. The flip-side is that the design can become monotonous. One way to keep things interesting is to use similar elements that change slightly from page to page.

For instance, on a particular commercial site, the web designer has a picture of a small man in workout gear on the top of each page. Looking carefully, we found that we noticed he looked slightly different from page to page. In one section, he was wearing a tie, while in another section he was lifting a dumbbell.

You can also use text as a design element to differentiate various parts of your site. Simply changing things like the thickness of letters and the font styles can help each section develop its own identity.

Contributors: Dennis Crothers, senior designer, Corporate Creative Services; Karyn Pascoe, designer, BUILDER.COM.

“This is a design element and does not necessarily focus on content.”  Neil Hokanson

13.  Keep vital elements "above the fold"

Many CNET pages were designed to fit in a space 480 pixels wide by 315 pixels tall, not including the a toolbar (which was 110 pixels wide). The 315-pixel height measurement comprises the online version of what the newspaper world calls above the fold.  Readers see this area first, so it's where the most important information should appear. That typically includes:

* the name of the site
* the title graphic of a story or section
* the areas of the site that you want to promote. (Newspaper sites would, for example, promote the day's top story with a large image in this space.)

It's also a good idea to place some sort of navigation above the fold. Readers should know where they are the moment they jump to a new page. Uncluttered, easily understood, above-the-fold navigation is extremely helpful to the user.

But don't clutter up the space above the fold with too many graphics. If you want people to read a text message or narrative, no more than half the space should be graphics. Make sure to have some text visible to give people the chance to start reading right away.

Contributor: Erik Waterman, senior designer, Television, Creative Services.

In other words:  "Above the fold" is a phrase we got from newspaper publishing. It refers to the fact that newspapers, when folded up for shipment, or (now) when placed in coin-operated racks, are folded in half. The side (half) that is up (viewable to prospective readers) is called the "above the fold" side of the front page. What goes on the "above the fold" side of the page are, of course, the headlines of what the editors of the paper think are the biggest news stories.

Well, follow that rationale over from printed newspapers to web pages. What is says is: put the most important--or most looked for or the most engaging--elements of your site in automatic view of the web site viewers.

How do you do that? Well, you concentrate on the use of the "prime space" in our reading culture (the upper left corner), and left side of the viewable portion of the page (we read left to right), and the upper portion of the viewable portion of the page (we read top to bottom).

You notice I kept using the phrase "viewable portion of the page?" Well, I was referring to what we call the "above the fold" portion of the web page. In other words, if you (the user) have to scroll down through your browser to see the remainder of the page, that remainder is considered "below the fold."  Dr. Bob Swisher

14.  Blur backgrounds for clearer text 

Many inexperienced designers make the mistake of placing image-based or patterned backgrounds under text, making it difficult to read. By blurring the background, you can make it easier to read text over busy, full-strength backgrounds with high production values. Blurring the background also lets you compress the image to a smaller file size.

For instance, in the examples below, the text on the blurred image is much easier to read than on the deeply saturated version of the same image:





Another way to ensure readable text is to lower the contrast between light and dark background
images and then play with the light and dark qualities of the foreground text to make sure it's legible.

Contributor: Joseph Tucker, technical designer, Corporate Creative Services.

Include an example website that uses and does not use this effect.  Although we did not encounter this in our course, it has its place in web design.

15.  Use subheads for effect ("chunking")

Insert subheads to break up large blocks of text and make each section stand out according to subject. Your pages will be more visually appealing and accessible to readers. Subheads also let readers scan the entire page to find the portions that interest them. Subheads are almost essential when a single Web page holds more than 500 words or so.

Sometimes colored subheads can split up a large amount of text into more easily digestible chunks. If you choose to use color to help make your subheads stand out, make sure the subheads are in the same palette as the graphics in that section of your site.

Also, try to use plain text or HTML for subheads so the pages load faster.

Contributor: Erik Waterman, senior designer, Television, Creative Services.

Page Layout

16.  Lay out type in a narrow column 

It can be intimidating for readers to be presented with left-to-right, margin-to-margin blocks of text. Big blocks of text located above the fold are especially hard to read. To keep from scaring off readers, many sites' designers lay out their sites' stories--even long ones--in a relatively narrow column.

Just don't get carried away with columns. While a single, wide column can be a problem, it's an absolute no-no to lay out lengthy columns side-by-side so the reader is forced to scroll down and then scroll back up to keep reading. Narrow columns may work in newspapers printed on large sheets of newsprint, but it's simply unacceptable on a cramped computer screen.

Contributor: Erik Waterman, senior designer, Television, Creative Services

Add:  “30 to 50 characters per line, with vertically closely spaced lines.” (Dr. Swisher suggestion)

Example:  http://dsv.su.se/jpalme/layout

17.  Avoid nested and long vertical tables 

Nested tables (tables within tables) can slow performance drastically. Stay away from them whenever possible.

In addition, try to avoid long vertical columns of tables. Instead, stack tables on top of each other. That way, pages appear to load faster because the top table loads first; users can read it while waiting for the other ones to appear.

Contributors: Fred Sotherland, senior vice president, creative director, Creative Services; Regan Gradet, associate art director, CNET.COM.

In other words:  “This piece (at least the "nesting" piece) is technical, and makes reference to the fact that browsers are slowed down in their ability to efficiently "parse" a page's html if tables are created within tables in the code. You can't "see" it, other than get the sense that the page seems very, very slow to load (and you don't think there are graphics that could have been slowing down the browser the first time around).

But, in general, tables take longer to load, because browsers need to plan for their full size. That is why Item 17 also recommends that the designer "try to avoid long vertical columns of tables. Instead, stack tables on top of each other. That way, pages appear to load faster because the top table loads first; users can read it while waiting for the other ones to appear."  Dr. Bob Swisher

18.  Avoid scrolling text (and other "dancing baloney") 

Unless you have good reason, avoid gimmicks such as Java tickers and scrolling text in the status bar at the bottom of users' browsers.

Gratuitous scrolling text often amounts to little more than showing off, and it can slow access to your pages. If you can't fit the words you're trying to scroll on the page itself, ask yourself if you really need them.

Contributor: Jeff Quan, associate director, Information Graphics, NEWS.COM.

In other words:  “Scrolling text, in Item 18, is referring to the gimmicky visual eye-candy like marquee text ("ticker-tape" horizontal scrolling text) or animated gifs, or . . . well, you see what I'm talking about now.

I am the one who added the subhead "dancing baloney" to Item 18; it is a phrase that refers to the same distracting nonsense that deflects users from their original purpose in making an attempt to enter and use a site.

What Item 18 is referring to is NOT the need for a user to scroll DOWN (off of the above-the-fold page display) to follow the page's content down.”  Dr. Bob Swisher

19.  Use white space 

Handling white space properly can help fight clutter on your Web pages. Of course, you've got to put the content where it needs to be, especially if you're designing for a template. But even within those constraints, things will look better if you can maintain a little bit of white space.

It's particularly important to avoid stuffing too much content above the fold. If things get too busy, readers may get confused and simply leave the site. Even if you have to move some copy down the page, it's a good idea to leave some white space between the bottom of the lead-in graphic and the initial text.

Contributors: Karyn Pascoe, designer, BUILDER.COM; Erik Waterman, senior designer, Television, Creative Services.

In other words:  “Don’t put something there just for the sake of putting something there.”  Joalyne Steinhausen

Reference

Brinck, Gergle, & Wood. (2001). Usability for the Web: Designing Web Sites that Work. Morgan Kaufmann Publishers.

Sample Web Site Assessment with "Web Usability Criteria"

2004-2006 © Neil Hokanson