Blog Post #7 - Michele Loves Blogger, I Love Captivate, Ethan Loves Solar System

Nine Principles Of Software Usability

Conduct a usability test of blogger. Have someone try to set up a blog, and post your results.

I used the traditional method of getting an expert to review the design for the usability test of Blogger. The "Novice Expert" who has no prior training and experience in usability engineering is none other than my wife, Michele, who at the same time also wants to learn how to blog. She used the heuristic evaluation method to examine the user interface design of Blogger and how Blogger fairs against the Nine Principles Of Software Usability.

• Use simple and natural language - Michele finds Blogger uses simple and natural language such as Posting, Settings, and Templates in its main tabs. She knows what functions the tab will do at one glance. There is also a "Compose" mode that she prefers over "Edit Html" mode. Precise and concise instructions are also worded in simple English that are easily understood.
• Speak the user's language - Michele finds that Blogger speaks her kind of language. As mentioned above, the instructions are clearly understood. The icons for attach file, image, video, font style, font type, font color, etc. are all easily recognizable and understood by her.
• Minimize user memory load - What she likes most about Blogger is the Posting, Settings, and Template tabs, and all their sub-tabs because they present a very logical and user-friendly manner to guide her to do her blog. In this way, Blogger helps minimize the use of her memory load to find where are the tabs/buttons to do the functions that she needs to do. Also, the icons are very intuitive and she does not need to spend extrageneous cognitive load to decifer what tasks they are intended to perform.
• Be consistent - Michele finds Blogger uses lingos that are consistent throughout the software, e.g. Link, Comments, etc. She also noted that some technical jargons are consistent with other programs, which makes it easier for her (and users) to assimilate to, e.g. RSS Feed, URL, etc. This minimize her (and user's) effort to learn and re-learn.
• Provide feedback - Michele notes that after every function she performs, Blogger will provide feedback to her, e.g. "Successfully Published", "Successfully Saved", etc. These are useful feedback and they give her the assurance that whatever she does has been completed successfully.
• Provide clearly marked exits - Within each tab, there are clearly marked exits, such as "Publish Post" and "Save As Draft" buttons in the "Posting" tab, and under "Edit Posts" sub-tab. These clearly marked exits help her to know how to end the task that she is currently performing. And she knows that her works are saved when she exits through these clearly marked exits.
• Provide shortcuts - Although not a lot, Michele loves the shortcut features provided by Blogger. For example, when you click at the Blogger logo, it will bring you back to the dashboard. These shortcuts are very useful features, especially when a certain task needs to be done over and over again, and you do not want to traverse all the laborous steps all over again.
• Provide good error messages - Michele loves the error messages because they make sense, e.g. "Uploading takes longer time than expected". So, she knows what to do. They are unlike Microsoft's error messages that "tells a lot of everything, but actually they don't mean anything" to you.
• Prevent errors - Unknown to her, Blogger actually checks the Html codes at the background before saving or publishing. This is a very useful feature to prevent erroneous entry by novice blogger. I had to ask her to go into "Edit Html" to type her blog for her to discover that Blogger provides this principle in its design.

Overall, Michele loves Blogger. And she has succesfully created her first blog at http://www.michelehokl.blogspot.com/.

I have another blog at http://www.edublog101.blogspot.com/ to help Michele to create an EduBlog using Blogger. This will help her gain better knowledge on Blogger application.

Tutorial Design Using Captivate For ImageReady

In my Blog Post #6, I promised to design a tutorial to show you how to create an animated GIF file using ImageReady 7.0. Well, here it is ...

All the steps that Michele took in the above usability test were captured as individual screens, and then put together as an animated GIF file, as shown above. This tutorial was designed using Adobe Captivate 3 (narrated by Michele) to show you how these individual image files are put together as an animated GIF file using ImageReady. Let Michele take you through this little tutorial (yes, she learned Blogger and ImageReady in one goal!) ... and hope you'll find it useful.

~ Tutorial: How To Create An Animated GIF File With ImageReady ~

~ View Tutorial Design File ~

Storyboarding With Powerpoint

We can use Powerpoint for very basic and simple storyboarding. I've expanded on what we did in class last week, and Ethan absolutely loves it.

~ Learn About Our Solar System ~

Coming Soon To A Blog-Space Near You ...

Watch out as Disney World, Monsters Inc. and I bring to you Mission Space - the story-based version of this e-learning package - in Spring 2008! See you in Spring!

Blog Post #6 - Image Ready Or Not Ready?

Software Usability & User-Friendliness

Critique the usability/user friendliness of a software program that you use frequently. Illustrate with screen shots as is helpful.

Want to create images that can change like these?

I used Adobe ImageReady 7.0 to create layers and frames of overlapping images, tween or create transitions between the images, and then set the timings in between the transitions to animate the images.

Adobe ImageReady 7.0 is a very powerful software that allows user to create fantastic graphic effects such as layering, dithering, varying opacity, superimposing images, and animation, etc. However, I don't find that the software is user-friendly at all. There are many technical jargons such as dither, lossy, progressive, optimize, etc. that only make sense to graphic designers (but may be that the target audience of this software).

The main work area has a few floating palettes (see screenshot below). The floating palette on the left-hand side is very user-friendly. By looking at the icons, I know what are the functions that come with the icons, e.g. move, pen, brush, paint, text, etc. However, the four floating panels on the right-hand side are less straightforward. I don't know what they are used for and how to use them. All I want is to create images that change. But none of these tells me step-by-step how to do it. I have to read the Help menu to learn how to perform the tasks. But even so, it will take some practices to become proficient with the software.

I figured out that the Animation floating panel is the tool that will allow me to create images that change. So, I opened some photographs (see above screenshot) and tried to drag-and-drop them into the Animation panel. It didn't work! Errr ... this was frustrating! How will I be able to do it?

I went back to the Help menu only to learn that there is a hidden menu in the small arrow button at the top right-hand corner of the Animation panel (see screenshot below). "Who might have guess it?", I wondered. This hidden menu allows user to create new frames for animation, provided the different images have already been 'layered' in the original image file. Sounds confusing? Don't know what I'm saying? Yeah ... you must be thinking "Francis, what are you talking about?" This is exactly how I feel when I was reading the Help menu! Talk about user-friendliness!

GESTALT ANALYSIS

Despite my complains that the software has a lot of parts that will deliver what the user wants (I hope) but are not put in a user-friendly manner, it is congruent to Gestalt psychology (of how the whole is greater than the sum of its parts) to a certain extent:

• Law of Previous Experience - The overall layout of the work area, various floating palettes and panels, terminology used and symbols are the same for all other Adobe produces (e.g. Photoshop). Hence, it makes it easy for user to relate to this software due to their previous experience with Adobe. However, the drawback will be that new users who are not familiar with Adobe's symbols and terminologies will have a steep learning curve at the onset.
• Law of Similarity - Adobe uses the same icons and terminologies in all parts of the software, and some of them are also similar to those used by other software, e.g. the color palettes, shape selections and graphic tools are similar to those used by Microsoft Paint. This reduces the cognitive load placed on the users, even for new Adobe users.
• Law of Proximity- I thought Adobe scored well for this by putting all those related palettes/panels close together by default (see screenshot above), e.g. everything that does layering are put together in a panel, all graphic tools are grouped together in a palette on the left. This is just so that users know where to go to perform certain tasks.
• Law of Contiguity - I find Adobe did not score very high for this. Using the animation creation example I mentioned above, ImageReady 7.0 does not guide user step-by-step to perform this task. But there again, this software has many other functions (not limiting to animation creation alone) that it may be difficult to do so.
• Law of Closure - I think there are too many information gaps in this software and users may not be able to have 'information closure' based on what is presented on the screen. Unless you are very proficient with using it, the mind will be overloaded trying to figure out these gaps. Repeated referencing to the Help menu can frustrate the user.

WHAT JAKOB NIELSON MIGHT SAY?

Jakob will label a software a failure if it (1) solves the wrong problem, (2) has wonderful tools that does not solve the problem, or (3) has tools that are too complex. I don't think he will label Adobe ImageReady 7.0 a failure since it does perform the functions it was designed to do, and has wonderful tools that help users perform the necessary functions. He may argue that the tools are complicated for new users to understand how to use it at the onset, but not to the extent to render the software a failure. He may suggest to Adobe to examine how Pinnacle has made Studio 10 so easy and user-friendly to perform its movie making function with its simple "Capture-Edit-Make Movie" steps and see if such procedures may be customized for ImageReady 7.0.

COMING SOON ... FEB 28, 2008

So how to create images that change? Check out this blog posting this coming Feb 28 for a tutorial (created using Captivate 3.0) that will guide you step-by-step to create such animation.

HAPPY PRESIDENT'S DAY

Since today is President's Day, here is another treat ... another 2 Great American Podcasts by Sonya and Ethan ... to tell the stories of George Washington (America's first President) and Abraham Lincoln.

The origin of this holiday was to commemorate George Washington's birthday (February 22, 1732) in 1796 (the last full year of his presidency). Later in 1865, the first formal observance was held in honor of Abraham Lincoln, another revered President, who was born on February 12. That was the year after his assassination. Eventually, the third Monday in February is designated as President's Day, a day for honoring both Washington and Lincoln, as well as all the other men who have served as president.

And yes, I got Sonya her little pony!

BRAIN POWER - A Multiple Intelligence & Total Brain Development Game

BRAIN POWER is a multiple intelligence and ultimate total brain development game. It covers both right brain and left brain activities to help learners to develop their intelligence in the following domain:

Photographic Memory – This right brain activity helps develop the learners’ ability to remember and recall objects that they see.

Spatial Orientation – This right brain activity helps develop the learners’ ability to visualize 3D through objects arrangements.

Pattern Recognition – This right brain activity helps develop the learners’ ability to recognize patterns and solve abstract pattern problems.

Mathematics and Logical Thinking – This left brain activity helps develop the learners’ ability to think logically and solve mathematical problems.

Music – This left brain activity helps develop the learners’ ability to recognize and read musical symbols and notes, and know what they mean.

Language and Encyclopedic. This left brain activity helps develop the learners’ linguistic skills, as well as encyclopedic knowledge in science, geography, history, etc.

Target Learner/Player - BRAIN POWER is suitable for learners of age 5 years old and above. It is suitable for parents to play with their children, or for children to play among themselves. When played as a family, BRAIN POWER helps to foster closer family bond.

Learning Objectives - BRAIN POWER is to develop learners’ intelligence in the following domain:

• Photographic Memory – Learners will be able to remember a series of objects that they see within a short time and able to recall them accurately in the correct sequence.
• Spatial Orientation – Learners will be able to visualize 3D objects and to arrange the objects in the correct manner as shown in the instruction.
• Pattern Recognition – Learners will be able to recognize patterns and to arrange puzzle pieces to solve abstract pattern problems as shown in the instruction.
• Mathematics and Logical Thinking – Learners will be able to think logically and to solve mathematical problems.
• Music – Learners will be able to recognize and read musical symbols and notes, count the beats, and know what the symbols and notes mean.
• Language and Encyclopedic – Learners will be able to answer a wide spectrum of questions that relates to language, science, geography, history, current affairs, etc.

Goal Of The Game - To be the first player to become 'a genius'! To attain this goal, i.e. to win this game, learners must be the first player to reach ‘Congratulation!’ where Einstein and the trophy is.

Interrelation Between Learning Objectives & Goal - To attain the goal of the game, learners must begin at ‘Start’ at the right brain, traverse through the right brain and left brain (by following the little red arrows) and participate in the activities successfully. Each time the learner lands on a place on the brain, he/she will need to perform the cognitive activity (either Photographic Memory, Spatial Orientation, Pattern Recognition, Mathematics and Logical Thinking, Music, or Language and Encyclopedic).

The learner will remain at the same spot if he/she is unable to perform the task successfully. He/She will only be able to proceed forward if he/she has successfully performed the task. Therefore, reaching ‘Congratulations!’ will mean that learners have successfully performed all the cognitive activities of the game, and hence, achieved the learning objectives.

Garris Et Al.'s Game Classification

Cognitive Type - BRAIN POWER can be classified as both Declarative and Procedural. In terms of Declarative, learners must have the knowledge of the subject (e.g. Mathematics and Logical Thinking, Music, or Language and Encyclopedic) in order to successfully perform the activities. In terms of Procedural, learners must know how to perform a task (e.g. Mathematics and Logical Thinking, Photographic Memory, Spatial Orientation, or Pattern Recognition) in order to successful perform these activities.

Learner Interaction - To play BRAIN POWER, learner will interact with the other players of parents. Learner will take turns to throw the dice and perform the activity. There are also rules that learners need to follow to play the game.

Learner Feedback - Learner obtains feedback from two sources: (1) Parents or the other players will provide feedback to the learner if he/she has performed the activity correctly, or (2) Learner can check the answer provided on the game card to see if they have performed the task correctly.

Learner Control - Learner has active control of the game. Learners will take turns, throw the dice and perform the tasks as stipulated.

Learner Motivation

• Attention – Learners are attracted to the game because of the brightly colored game board, six types of interesting cognitive activities, and of course, Dora and Boots! The stickers given for successful performance of a cognitive task are also ‘pullers’ to the game. The six cognitive activities are also of different nature, thereby reducing the monotony of the game.
• Relevance – Learners view the game and various cognitive activities as to be relevant to them because they are part and parcel of their daily learning objectives at home or in school.
• Confidence – To play with younger children, parents can select cognitive activities that are simpler. As the children grow older or when their knowledge/skill levels elevate, parents can purchase more difficult activities to help the children develop further. This gradual approach helps to build the children’s confidence in performing cognitive tasks.
• Satisfaction – The gradual approach as mentioned will help learners to feel successful. This feeling will give the learners greater sense of satisfaction to play the game.
  
  

Blog Post #5 - Dalgarno Tells Why Ethan Loves That Game

Dalgarno's Classification For Learner-Computer Interaction

Return to the game you looked at in Blog Post #3. This time, use the classifications from Dalgarno's article discuss the interactions that take place within the game.

Cognitive Tasks: The game interacts with Ethan by getting him to 'Answer Question' and then 'Attend To Question Feedback'. For example, the game will ask Ethan to 'Answer Question' like 'You need to catch 4 fish'. Each time Ethan catches a fish in the net, the fisherman will get him to 'Attend To Question Feedback' by telling him (in the dialog bubble) how many fish he still need to catch. See the screenshot below ...
If Ethan catches the wrong fish type, the game will also get him to 'Attend To Question Feedback' by showing him a broken net, a shocking face and 'Ouch'. See screenshot below ...

If Ethan catches the correct number and type of fish, the game will also tell him 'Good One' as a form of feedback.

Input Technique: The game gives a short instruction for the interface. There are 'Buttons And Icons' like 'GO!', 'PLAY AGAIN' and the fishes where Ethan needs to do some 'Selecting' and clicking with the mouse. See below screenshots ... To catch the fish, Ethan will be 'Selecting' the correct fish type, and then 'Dragging' it into the fisherman's net.
System Response: The game 'Displays' various things on the screen - response to what fish Ethan has chosen, numbers of fish left to catch, etc. It also 'Presents Media' such as the animation of fishs. The game also 'Assesses Answers' by comparing what Ethan has caught to an expected answer (generated by the game), and then 'Generates Feedback' to Ethan by telling him what he has caught is right or wrong (as in the screenshots above). Another System Response is 'Processing Data' where the game will calculate the numerical data (either generated by the game or the number of fishs caught by Ethan) and then producing a graphical representation of the data (showing the number of fishs in the net, and also the number of fishs left to catch in the dialog bubble).

Here is a checklist to summarize the classification of the game (interactive learning object) according to Dalgarno's article:

Cognitive Tasks
[ ] Attending To Static Information
[ ] Controlling Media
[ ] Navigating The System
[X] Answering Questions
[X] Attending To Question Feedback
[ ] Exploring A World
[ ] Measuring In A World
[ ] Manipulating A World
[ ] Constructing In A World
[ ] Attending To World Changes
[ ] Articulating
[ ] Processing Data
[ ] Attending To Processed Data
[ ] Formating Output

Input Technique
[ ] Typing
[ ] Valuators
[ ] Key Pressing
[ ] Pull Down Menus
[ ] Menu Lists
[X] Buttons And Icons
[ ] Check Boxes And Radio Buttons
[ ] Hot Spots
[ ] Hypertext
[ ] Scroll Bars
[ ] Media Controls
[X] Selecting
[X] Dragging
[ ] Drawing
[ ] Mouse Rollovers

System Response
[X] Displaying
[X] Presenting Media
[ ] Presenting Cues
[ ] Branching
[X] Assessing Answers
[X] Generating Feedback
[ ] Updating World
[ ] Generating World
[X] Processing Data
[ ] Searching
[ ] Saving And Loading

Blog Post #4 - Look, The Bear Is Dancing!

User-Centered Design

As you read Cooper's Inmates are Running the Asylum, think about how you relate (or don't) to his discussion of user-centered design (or lack thereof) in high-tech products. What kind of computer user are you? (apologist? survivor? etc.) Are there any high-tech products that you find particularly counterintuitive? What are they, and what about them frustrates you?Describe a high-tech product you think is particularly well-designed and why.

Gong Xi Fa Cai Happy Chinese New Year

Listen To My Podcast For Blog Post #4 If You Don't Want To Read On

"Look,the bear is dancing!"

So, what about "user-centered design" that Cooper has discussed in his book? Personally, I feel that all product design must be user-centered. You don't want to pick up your morning newspaper and wonder "Where is the page for Local New?"; you don't want to pick up an electric kettle and wonder, "Hmm, how do I turn this thing on?"; and you certainly don't want to put your Gumbo into the oven and start to figure out which button to press to cook it. It is all about design!

Consider a car. The steering wheel is always in front of you so you can see the front and steer the car where you want the car to go; the horn is always at the center of the wheel for easy and quick access in times of emergency (and you can still look in front); and all fault lights are in the dashboard in front of you so that you can see them when they come on. Of course, it helps when the 'ding' comes on with the fault lights. You do not want to have to turn your head to the left to press the horn on door , or look to the right for the dashboard, right? It is all about design!

If you have driven a manual-shift car, you will know that you need to push the gear-shift to the left and up to engage the first gear, left and down to the second gear, center and up to the third, center and down to the fourth, right and up to the fifth, and finally right and down to engage the reverse gear. That's what most car designers design their cars. Or at least those I know of. In 1996 when I went to London, I rented this cosy Peugeot and drove to Stonehenge. Upon arrival and when I was trying to reverse park, I realized that I could not push the gear-shift to the right and down to engage the reverse gear. I tried several times and eventually gave up, convinced that Peugeot was designed with no reverse gear. I asked another driver in the car park anxiously, "Can you help me? My car does not have a reverse gear." He then calmly moved over and showed me ... put the gear to the left, then more to the left again and push up. "That's how you do it with Peugeot!" he said. Now how user-centered can that be?

A piece of high-tech equipment that frustrates me a lot is my LG external DVD burner cum drive. I'm using a HP tablet PC that does not come with any peripheral. I connected the external DVD drive to my HP tablet PC's USB port to install it, only to find that the installation comes in a CDROM or a 3.5" floppy disk. I'm thinking "dah!" How can I run the CDROM if my external DVD drive is not working in the first place? And who on earth at this present era still use a 3.5" floppy disk anyway? That's totally counterintuitive!

Like all other product designs, software designs must be user-centered too. Of course it must work in the first place. That's the job of the programmer. But more importantly, it must be easy to use by whoever is using it and make sense to the user why it should be that way. That's the job of the designer. Consider a computer game for little children. If you put the child in front of the computer and he/she can start clicking and playing it, without any instruction given, that is a good user-centered design game. Of course, the game must be attractive and interesting to begin with! It is all about design!

I particularly like Playhouse Disney website. It is very user-friendly, well thought and well designed. The target audience are little children and it was designed in a fashion that little children knows how to use it. My 6- and 5-year-olds have no problem surfing that website, find what they want, and play the very interesting games. Check it out at http://www.playhousedisney.com/!

I've a Bachelor degree in Computer and Information Sciences, and I love programming a lot! No, I'm not a geek, but I'm certainly a what Cooper will call 'apologist'. Yes, I defend the computer because it can accomplish a task that was impossibly difficult (p. 30). Like all programmers, all I want to do is to get the software to work. "Never mind about design. Let's get it to work first. We will figure out the design later." That's what I usually tell myself. You see, programming is such an absorbing task that it dominates all other considerations, including the concerns of user (p. 16). The creation of software is so intellectually demanding, so all consuming (p. 16) that I can even forgo my sleep when I was doing programming!

I guess I have to do what Cooper did ... to extricate myself and start looking from the interactive designer's perspective.

Reference:

Cooper, A. (1999) The Inmates Are Running The Asylum: Why High-Tech Products Drive Us Crazy And How To Restore The Sanity. SAMS Publishing.