Information and Instructional Design

What is Information Design? According to Tech Head Stories it is:

"...is the practice of gathering, filtering, and presenting information in accordance with effective design principles in order to understand --- and communicate to others --- the essence, the meaning of that information."

That is, designing an effective way of communicating information without altering or loosing its meaning. Often the sort of information worked with is quantitative and results in diagrammatic representations, however this is not always the case.

Instructional design aims to convey an instruction, quite often pictorially. It encompasses things such as street signs which tell those reading them which way to go, or directional signs such as those found in an airport where a certain terminal is. Due to the large audience that these sorts of navigational and instructional signs have often they must be understandable by people who do not speak the language of the country the sign is in. If they did not meet this requirement then their purpose would be defeated as they are not conveying their meaning. It is for this reason that instructional design often makes use of signs and symbols that are internationally recognised.
EG: The Male and Female toilet signs are internationally recognised even if they are slightly changed to suit the culture they are in.

These two types of design are often applied to web design as without clarity of meaning and the ability to be understood by a large audience, the website would be confusing to most and useful to few. When the website in question is one which requires user interaction in order to be sucessfull and it lacks both quailties, the can user become confused and their desire to use the website can diminish.

Website navigation menus or links can be classed as instructional design and are perhaps the most common example of it. The body of information found on such websites can be classed as information design.

Take for example this website for MSY Technology. While this website is not interactive it demonstrates extremely well how off-putting badly designed navigation and content can be. I will let you click it and see why I say this, as words cannot express how disorganised and confusing it comes across as.

Ace of Cakes is a cooking show in UK about making cakes. It's website is interactive and is designed to draw its users through the website like they are there in the kitchen/tool shed with Ace. It's navigation down the bottom isn't the best as it doesn't explain what you are being shown, but if you've visited before and remember the shape of what you want to see then it becomes a fair bit more useful.

The way in which the information is presented is exceptional. When you hover over one of the coloured cutouts a yellow bar pops up. In it is the title of the information or of the link, and a little symbol on the right showing you whether it is a video, a picture, text, or an interactive close up. To see an example; click on the second last silhouette in the navigation menu and click on the dog. You'll see that when you hover over the red circles it brings up a text box describing a certain part of the cake, and a little animation that visually represents this.

With out putting into effect the principles of information and instructional design when creating interactive websites, Web 2.0 would not be what it is today. With the ability to expand through user involvement a higher level of organisation is required or the internet would become a maze of confusion and misleading information.

Interactive Design

The word 'Interactive' can mean a variety of things. According to the Random House Unabridged Dictionary interactive means:

...(of a computer program or system) interacting with a human user, often in a conversational way, to obtain data or commands and to give immediate results or updated information:

Thus, interactive design can be understood to mean the designing of, or the designed object, that involves the user in some way and requires them inputing information, that can be as simple as clicking a button. This sort of design can be found in program interfaces, games and quite often on websites.

The point of an interactive design is to:

• effectively communicate a system's interactivity and functionality
• defines behaviors that communicate a system's responses to user interactions
• reveals both simple and complex workflows
• informs users about system state changes
• prevents user error

These are guidelines that a designer must follow to ensure that the meaning of the website is not stripped away and does not discourage visitors from exploring its pages. Often the way in which all of these guidelines are met is extremely subtle and yet very effective.

The use of interactive design on websites has come to be a common thing these days, to the point that often one would come across an example and barely consider the fact that it is actually interactive. The previous post on AJAX began to address the idea of user interactivity with its example of images that can load without changing the page and the suggestion supplying search bar from Google. This sort of interactive design does not work or occur unless the user directly requests it, thus forcing the user to interact with the site. The advantage of this is that the websites load quickly which is often what users look for when 'surfing the net' and can most times guarantee multiple return visits.

Sometimes the same sort of idea is created using Adobe Flash. Primarily animation software, Flash has the ability to create whole websites that are fully interactive or to just make certain web elements (such as roll over buttons) that can be inserted into websites.

An example of an entirely flash animated website is 99Rooms. This is a beautifully made art project that which its creators describe as "...a unique internet art project that interweaves wall painting, photography, animation and sound...". While the website takes an extremely long time to load each 'room', the effectiveness of its design is immediately apparent. The focus of the interactive design of this website is more about the users emotional response to what they are seeing and hearing, but the need for them to click to continue on or to activate some hidden switch is what truly draws them in. This is because they develop an excitement of being able to click on something in the majority of the rooms and see a change occur and thus they continue on to the end of it.

As demonstrated by 99Rooms, often interactivity with websites can mean a deeper connection between the user and the website is formed and therefore a greater impact on the participant. 99Rooms demonstrates this as the user tends to simply click to the next room without studying the room in depth, where as when they must find the hidden switch the room is inspected top to toe. (Room 26 proves this alone, if the other rooms do not. Warning: it is not for the easily scared or jumpy types).

Despite all this sometimes the most simple function can be classed as interactive design. Using this blog as an example you'll notice that each post has a number of tags at the end of it. A tag is a descriptor added by a user to describe the content of what was posted. Through these, many connections and links can be formed, enabling the user to access more information than they perhaps would ahve in the first place. FOr example; by clicking on one of the tags attached to this post you can search the entire blog for all posts with that tag.

Interactive design combined with web design is vital to Web 2.0 as it is the users interaction with such websites that allows the web to expand. Wikipedia, for example, would not be quite as popular as it is, if its users did not have the ability to assist with the information it contains. And it is no doubt because of this interactivity that favor for Wikipedia spread, as it is not a boring old encyclopedia.

For another example of an interactive website head over to Whereis.com

AJAX

Ajax is a group of inter-related web development techniques used for creating interactive web applications. It stands for Asynchronous JavaScript and XML and is the basis on which many of the Web 2.0 applications are formed.

A primary characteristic is the increased responsiveness and interactivity of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that entire web pages do not have to be reloaded each time there is a need to fetch data from the server. This is intended to increase the web page's interactivity, speed, functionality, and usability.

Wikipedia

Long story short, AJAX is a combination of XML and JavaScript web coding languages that are used to build websites. They are not visible languages like HTML is. Instead they work behind the scenes to load data asynchronously. This then means that their use ensures that the website loads faster than if it were written entirely in HTML because it only loads certain parts in the background. AJAX also allows for things that are beyond the boundaries that encompass HTML, often resulting in a more interactive web experience for the user.

An example of this sort of boundary pushing is perhaps more obvious that it would at first seem. Ever been looking for an item of some sort on a website and found that when you click on the image, the image loads with out taking you to a new page? Yes? You've found yourself an example of AJAX! Basically the AJAX coding sends request data to the server on which everything loads from, and the server sends back that which was requested. So in this case you click on the button wanting to see the image so the coding sends a request for the image to be displayed to the server. The server then loads and displays the image on the webpage with out having to reload it or directing you to another place.

For an example of how to use AJAX head over here! And for an example of an AJAX website head over here!

Web 2.0

Webopedia, an online computer dictionary, defines Web 2.0 as "...the term given to describe a second generation of the World Wide Web that is focused on the ability for people to collaborate and share information online." Web 2.0 was the name was coined for the internet to emcompass the new generation of capabilites that had arisen as a result of advanced web 1.0 sites. This new generation of internet was made up of new type of applications and sites coming out that meant that users where able to interact with the internet and in doing so enabling it to expand beyond pervious restrictions of Web 1.0.

The best definition of Web 2.0 that I have found whilst I have trawled the web for information would have to be the following quote because it articulates exactly what Web 2.0 means.

Web 2.0 refers to technologies that allow data to become independent of the person who produced it or the site it originated on. It deals with how information can be broken up into units that flow freely from one site to another, often in ways the producer did not foresee or intend.

Robin Good - Kevin C. Borgia

Characteristics (with a few examples thrown in as well) of Web 2.0 include:

• Blogs - and other services available that allow the user to create a site and upload news, data and so on.
• Hyper linking - by this I mean, in content changeable sites such as blogs or personal websites, where the user might add a link. The another person would read it and add the link else where, thus creating a web that links multiple websites together that is continuously expanding.
• Wikipedia type websites - that allow the input of information by the general public (or at least professionals in the area of the topic being discussed). This means that knowledge can come from a larger variety of sources, but there is no guarantee that it is as accurate as it could possibly be as it relies on a great deal of trust that it will not be misused.
• Tagging - the ability to give a "post" or whatever the selected item is a category, which is then used for searches performed on the website or browsing, linking together the posts that have been tagged the same.
  
• User driven, 'most popular' functions or displays. Eg. When on a website and browsing at an item, sometimes the website will list what other shoppers had bought. Or, for example, on Amazon where they offer a top ten of what their users are buying. These sorts of displays make the website more interactive as they are driven by what the majority of users are most interested in and, chances are, will be of interest to any who visit the website as it would change on a regular basis.

A lot of the information that this blog post was based on came from O'Reilly's and part of my definition of Web 2.0 was based on the defination that i found on Webopedia.