Back to School

Information Design—Week 6, Assignment 2

• Is this user-centered information design?
• Does the information design plan flow through the stages completely?
• Is the information design offering enough detail and clarity that another interactive professional could execute this project plan based only on this document?

John Stefanik

• John constantly talks of the user and the users’ needs and preferences in his presentation. He clearly understands that his site will require user-centered design principles to thrive.
• The information design plan flows through each stage of the information design process very well. I especially liked how clearly John mapped out the content requirements for the site.
• The information design plan that John has assembled for this project would, I think, be sufficient for a seasoned interactive professional to build a congruent, well-formed site.

John Bellflower

• In his presentation, John makes it clear to the alert reader that his potential users were the target in his information design process. I like the graphics he described, and the relevance they would have in the user interface.
• The information design plan flows through most of the stages completely, but I felt was a little lacking in the structure phase. It would be better if he would list topics in alphabetical order in a sidebar.
• Aside from a few small discrepancies and areas that would require clarification, John’s presentation would suffice to design the site. Some minimal communication would probably be required for a few small points, just for clarification, but these could just as easily be left to the judgment of the interactive professional creating the project. Overall, a good job.

Information design—Week 5, Assignment 3

…write four or five ABCD style project objectives for your own course information design project.

Objective 1

• Audience: Web site users
  
• Behavior: Learn about natural childbirth
  
• Condition: Information about natural childbirth will be organized chronologically, from conception to post-natal care
  
• Degree: A hierarchical list will make selection of a particular subtopic simple and intuitive

Objective 2

• Audience: Web site users
  
• Behavior: History of the clinic and qualifications of its staff
  
• Condition: Find background and educational information about each staff member, history of the clinic
  
• Degree: An index, a table of contents, at the top of the page will list staff members’ names and important periods in the formation of the clinic

Objective 3

• Audience: Web site users
  
• Behavior: Discover new products and services offered at the clinic
  
• Condition: Browse product listings and read about services at the clinic, see testimonials about the clinic’s offerings
  
• Degree: A sub-navigation menu will itemize products by category. Services will be listed underneath as a separate category.

Objective 4

• Audience: Web site users
  
• Behavior: Contact the clinic’s staff with questions
  
• Condition: Ask questions of staff members that are not or cannot be answered on the Web site
  
• Degree: A simple form will ask for basic information such as name, phone number, e-mail address, and topic, and will allow users to submit questions anonymously if they so choose.

Alaska Family Health & Birth Center

Prepared by Jon Bourne, February 2007

health insurance michigan

Information Design—Week 5, Assignment 2

…critique Information Design on the AiO online Classroom and write at least one page considering these issues:

• Navigation and interface design
• User centered design (from the viewpoint of the user - you, in this case)
• Use of interactive media for educational purposes in terms of rich media
• What type of learning styles is used here
• Identify the Global and local navigation
• Where are the features located

Navigation and interface design

Although the classroom interface took a while to get used to, it’s organization does make sense to me. Listing weekly assignments and course lectures in one, consistent location from page to page makes it easy to know where to look for that information.

It would be convenient for users and less interruptive if there were other ways to move linearly from page to page—in-page links to the next and previous pages in a lecture, for instance.

Being enrolled in a course in AIO’s Interactive Media Design baccalaureate program, I was surprised and disappointed to see that the very classroom environment in which I am learning Web design best practices does not adhere to the generally accepted recommendations of the W3C. The classroom environment’s underlying HTML and Javascript code doesn’t even come close to validating. ( http://validator.w3.org/ )

The discussion questions’ navigation is awkward. I don’t like drop-down menus for navigational purposes; they should be used only for selecting a value when filling out a form. Moving from one discussion question page to the next should be as easy as clicking a link. The questions themselves should be displayed in the assignment outline at the top of the page; a user shouldn’t have to visit each question’s individual page to find out what the question is.

I like the threaded-discussion concept, but it is poorly implemented here. Expanding and collapsing each post is terribly tedious; that you can expand all posts at the top of the page is the only redeeming functionality, but it is pointless to have. That particular “feature” should go away—or at the very least default to expanded—as it interferes with use of the classroom.

Also, a full-text search on the comments and/or lectures/lessons would be a great addition to the environment. Often, I’ve needed to recall another student’s comment, but couldn’t remember which lesson or assignment it was on. In the case of the discussion questions, it was particularly troublesome to find them because of the awkward navigation between them.

Use(s) of interactive media

I like the timelines and helpful graphics offered in the lecture, but this is nothing that can’t be done in a book. Occasionally, there is an interactive presentation which requires feedback from the user—inline quizzes or interesting presentations—which greatly add emphasis to the subject matter in a new and different way. These are good.

In my opinion, associating a face to the information I’m learning would be helpful; AIO should be utilizing video-recorded lectures. This would be a more full use of the interactive multimedia available on the Web.

I would appreciate more links to other good online resources within the lectures and lessons. It would be helpful if AIO would utilize some of the new link-sharing services available, such as http://del.icio.us , to share the links associated to a subject matter with their students.

While I’m on that subject of bookmarks… a method of internal bookmarking would be a handy, interactive alternative to note-taking. Image this: while reading a lecture online, a student reads a couple sentences which succinctly summarize the material. He wants to remember this information. Instead of copying and pasting these lines into a word processor as notes, why shouldn’t he be able to highlight the passage on the page, then click a button in a site-wide toolbar that sends the excerpted text, along with the lecture title, which page it was on, and other metadata, to a list of his in-course bookmarks? These could then be sorted by the time they were bookmarked, their location, alphabetically, or a number of other schemes that would help him to find the information he has saved in an efficient manner.

Learning/teaching styles

The AIO classroom utilizes mostly visual means of teaching. On occasion, there have been audio samples available, but they are few. Kinesthetic learners are, for now, out of luck in an online classroom environment, because their just isn’t currently a way to physically involve students with virtual topics in a virtual environment.

Identify global, local navigation and their locations

The global navigation is on top: Gradebook, Email, Chat, etcetera. The local navigation, which changes from course to course, depending on the material, is on the left in a hierarchical, collapsible list. Further, there are two more global navigation items at the bottom of every page for exiting a course or logging out of the system. These could be considered courtesy navigation items except that they don’t appear anywhere else in the UI.

online blackjack

Information Design—Week 5, Assignment 1

Examine how interactive games are used to educate: Are they effective? What is edutainment? Are interactive games catering towards one type of learner? If so, which one.

Interactive games are effective. Children and adults alike often enjoy being challenged mentally as much as they enjoy being entertained. The skill and knowledge necessary to excel in educational games is learned and honed in playing the game.

The Carmen Sandiego CD-ROM games were introduced in the 1980s. The computer games featured geography and history trivia, and players had to answer questions correctly (ie, learn the answers) in order to advance to the next round. The Oregon Trail is fondly remembered by many who played it as children, fording rivers, hunting wild game, and hoping no members of their entourage died of sickness. The game and its many derivatives taught players the perils of cross-country travel in the mid-1800s, from hostile natives to broken wagon wheels.

“Edutainment is a form of entertainment designed to educate as well as to amuse.” The Oregon Trail and Carmen Sandiego are examples of interactive edutainment—games that, in addition to entertaining players, teach. These types of interactive games cater best to auditory and visual learners. Kinesthetic learners are to some degree left out because there currently are few ways to physically interact with a computer—mostly just a keyboard and mouse.

Sources

• http://en.wikipedia.org/wiki/Educational_game#Video_and_PC_games
• http://en.wikipedia.org/wiki/Carmen_Sandiego
• http://en.wikipedia.org/wiki/The_Oregon_Trail_%28computer_game%29
• http://en.wikipedia.org/wiki/Edutainment

Information Design—Week 5, Assignment 1

Discuss the three different learning styles that are important to be considered for planning effective instruction. Provide sufficient examples and situations that involve each type of learning style.

There are three ways in which people learn:

• visual learners learn by seeing;
• auditory or verbal learners learn by hearing;
• and kinesthetic or practical learners learn by doing.

It is important to consider these learning styles in the information design process in order to best reach your intended audience.

Visual learning

Pictures, illustrations, graphs, charts, and diagrams will help visual learners to glean information from a project. An example of visual information design can be found at the Google Finance Web site, http://finance.google.com/finance. Users can easily see trends and analyze performance of individual stocks, options, bonds, and entire markets simply by viewing the graphs and charts. These visual aids supplement the raw data and make it easier to digest for the visual learner.

Auditory learning

Auditory learners learn best through hearing information. They are keenly aware of sound around them: a vehicle passing on the street, a child laughing in an upstairs room, crickets in the evening darkness, water dripping from a leaky faucet. Often they cannot concentrate in noisy atmospheres. The auditory learner easily memorizes information when it is put to song; they are inadvertent suckers for advertising jingles. They will often get songs “stuck” in their heads.

A good example of an auditory learning interface is Apple’s iTunes music store. If an auditory learner knows who sings a song, he can browse that artist’s music, listening to song samples until the tune is played that he is looking for.

Kinesthetic learning

Kinesthetic learning is learning by “doing,” physically participating in an activity to learn about a subject matter. An example of this could be when an instructor shows her class how to create a certain effect in Photoshop. The class will need to follow along not only with verbal instructions, but by actually repeating the steps on his or her own terminal.

Sources

• http://en.wikipedia.org/wiki/Learning_styles
• http://en.wikipedia.org/wiki/Visual_learning
• http://en.wikipedia.org/wiki/Auditory_learning
• http://en.wikipedia.org/wiki/Kinesthetic_learning

Information Design—Week 4, Assignment 2

…continue your proposed information project from the previous weeks, and add the following documents:

• Information Architecture Map
  • Define the structure through mapping diagrams and symbols
  • Label the type of branching used on this map (linear, radial, hierarchy or a mix) in each area it changes. You must use at least two different mapping strategies. In addition please write notation to why you chose this branching style.
• Sketch two possible layouts for the Main Page and two possible layouts for the Inner Wireframe layouts - in paper and pencil or through the computer software of your choice. You need to post your work as a jpeg, gif, Word .doc or PowerPoint file so your classmate can view your work.
• Give two options for the Main Global Interface by sketching in pencil and paper.
• Define the parameters that you will follow to develop an effective User Interface for the User group defined last week.

Continue compiling your information project elements developed weekly into a Power Point presentation.

Information architecture map

The information design for this project utilizes hierarchical branching.

And to fulfill this requirement, here’s a linear approach:

Layout 1

Home page

Inside page

Layout 2

Home page

Inside page

Global interface

This part of the assignment is redundant. See above.

Information Design—Week 4, Assignment 1

What is the difference between navigation and an interface? How are they related?

Historically, navigation generally means traveling physically between two points. Essential to navigation is knowing where both points are and knowing how to figure out where you are between them. This principle was applied to software design as a way to understand how to get around in an application.

An application’s navigation is part of the whole interface. Specifically, it is the part that informs users where they are, where they can go, and what they can make the application do. In desktop software, this is usually achieved through the use of buttons and menus. On the Web, hyperlinks are the usual and expected method of navigation.

Interface is a more general term that encompasses navigation. An application or Web site’s interface is the tangible side of an application that allows a user to interact with or extract information from itself. A Web site, for example, is an example of primarily visual interface, but interfaces are not necessarily visual. A telephone, for example, audibly alerts a user that someone is calling when it rings.

• http://en.wikipedia.org/wiki/User-centered_design
• http://en.wikipedia.org/wiki/User_experience
• http://en.wikipedia.org/wiki/Interaction_design
• http://en.wikipedia.org/wiki/Information_architecture
• http://en.wikipedia.org/wiki/Human-centered_computing
• http://en.wikipedia.org/wiki/User_interface

Information Design—Week 4, Assignment 1

Should Information Designers and Graphic Designers follow the design standards created by major companies such as Microsoft? Does this familiar metaphor enable more intuitive navigation in the virtual environment of software and interactive media? What are the User’s benefits? And what are the negative implications here for the industry at large?

Ultimately, the rule of thumb should be to follow what the major companies have done right and do better what they’ve done wrong. The hard part of that equation is figuring out where each element falls; is it good or bad?

While there are certain de facto standards that should be followed—cut, copy, and paste, for instance, and their existence in the Edit menu—whose ubiquity makes going against them asinine, other aspects of user interface design that are less common should be challenged. If a feature or concept is new to a market, challenging its methodology will ultimately only help in creating the best possible interface. Competition is good. Until a standard is widely accepted, choose the parts that are good and improve the parts that aren’t. Approach the challenge differently.

It is understandable to keep many items in similar places as in competitor’s products. From a business standpoint, it increases potential adoption by new users if they are able to readily and intuitively use and access information with minimal learning barriers. However, business strategy should not be the sole deciding factor when choosing whether to deviate from an accepted standard.

Information Design—Week 3, Assignment 3

Compare and critique information design on the two search engine giants, Google (www.google.com) and Yahoo ( www.yahoo.com). Please write a one page comparison of them.

You should consider these questions:

• How easy is it to locate information?
• Where are the search fields and search buttons located?
• For both search engines, how much information and options are available on each page, and how do you feel as a user when viewing each home page?
• Why do these search engines approach information architecture differently?
• Which interface design is built toward broad general searching of information?

It is easier to locate information on Google. Fewer items fight for the user’s attention, so the user feels more at ease to choose which item to choose. If performing a search is their sole objective, Google’s interface doesn’t get in the way; the search field receives focus by default, so that the user can immediately begin typing after the page is finished loading.

On Yahoo!, there are lists and ads and button and links all competing to draw the user’s attention. There is no clear call to action. The user subconsciously feels pressure to make a choice. It is more difficult for the user to locate the information for which he is looking because so much unrelated information is being thrust in his face. The search field is also given focus on page load.

On Google, the search field and button are located directly in the center, vertically and horizontally. The search form fields on Yahoo! are located nearly at the top of the page and slightly to the right of center.

The information and options on Google’s home page are intentionally limited to give significance and priority to those items which are most likely to be useful to the user. The information displayed is minimal and invites the user to them without causing distraction. There are no ads. Nothing moves. The page feels established, trustworthy, ready, powerful. It says, “I’m good, and I know it.”

Yahoo!, however, chooses to inundate the user with as much information as possible. Reviews, shopping, ads, news—it is all thrown on the page, each element trying to grab the user’s attention. Personally, I find Yahoo! to be stressful and inefficient. It says, “I know ‘the other guys’ are good, but look at all the stuff I have!” To me, Google’s approach to design—minimalistic and relevant—is more appealing than Yahoo!’s approach—shotgun, hit-as-many-as-we-can, something-for-everybody.

But I realize that the reasons for the two different designs are founded in the user base. The typical user for Yahoo!, in my own limited perception, is less ‘geeky’ than the typical Google user. Yahoo!’s users are generally less technologically savvy and are more prone to be swayed by its dramatic flair and gimmicky ads and promotions. Google’s users are more to-the-point, matter-of-fact, get-the-job-done people. They are on a mission, whereas Yahoo!’s users aren’t necessarily sure what they, so they browse and peruse and explore whatever the site has to offer.

For finding broad, generalized information, Google is a better search engine. If you know the topic you want more information about, Google is more apt to accommodate that search, offer suggestions to clarify or refine your terms, and in general give you better results.