Viewing People Viewing Documents: Eye-Tracking and Usability

 
I just finished reading a very informative article, written by Lauren Cooke, about eye-tracking technologies and how they can be incorporated in usability studies.  It also details the patterns in which our eyes move when we read, whether the document in question is online or in print.

Eye-tracking data can be obtained through head-mounted or remote cameras.  In either case, the movement of the iris is recorded and subsequently analyzed using software that reveals the fixations (which "occur when the eye is focused on a particular point on a screen") and saccades (which happen when we "move the eye from one fixation to the next fixation") made by viewer.  The combination of fixations and saccades produce scanpaths that provide a more comprehensive picture of how that particular viewer went about visually analyzing the given document.  An example of what a typical scanpath of a printed text appears below.

(public-domain image, found here)

As Cooke explains, "Eye tracking as a methodology is based on Just and Carpenter's (1976) 'eye-mind' hypothesis: the location of a person's gaze directly corresponds to the most immediate thought in a person's mind."  Therefore, the data from eye-tracking studies can be applied in a variety of fields.  For example, such data has been obtained from pilots while they were flying planes, helping engineers to redesign cockpits to ensure maximum usability.  Studies are also being conducted to determine how people view PDA displays and other compact screens relative to how they go about visually analyzing material on standard computer screens.  Furthermore, eye-tracking data obtained from people reading printed documents reveal that font sizes smaller than 9 pts. and larger than 12 pts. tax the reader by degrading letter legibility and preventing words from being read as a whole entities, respectively.  People also tend to read at slower speeds, and temper their tendency to skip over words consisting of three letters or less, when reading complex material.

In addition to the information detailed above, eye-tracking data can, when combined with think-aloud studies, provide a great deal of insight into the problems people may experience when performing a particular task or looking at a given document.  People, in general, aren't very proficient at identifying and articulating their visual impressions, since people process visual data much quicker than they are able to consciously recognize and verbalize what they see.  Thus, eye-tracking and think-aloud data can be used to determine what areas of a document or interface are preventing them from accomplishing their goals.  Additionally, eye-tracking data can be used to determine people's general tendencies in their efforts to visually process the information that is in front of them.  For example, long paragraphs have been found to be less engaging than short ones, and people generally look at the top and bottom of a menu/list before looking at the middle portion.

If used properly, studies using eye-tracking technologies can provide valuable information for web and usability designers.  Data shows that people "do not necessarily follow the same scanpath for every type of Web site; instead, there appear to be universal scanpaths that people develop based on the function, genre, and design of a Web site."  Further research in this area may help designers to configure their sites to accommodate these various scanpaths.  Some of the findings detailed previously in the post can also be applied to web design, as can these conclusions drawn by researchers:

--People tend to read small type closely, but they're more likely to scan when reading text written in larger type.

--Readers often will not read the material that appears below an underlined headline.

--Eye movements are generally made in the shape of the letter "Z" when first looking at a website (i.e., starting at the top left-hand corner, then going to the top-right hand corner, etc.).  Readers are likely to make smaller "Z" patterns as they more closely examine the page after the initial scan.

--While objects that appear in isolation do draw attention, that attention is not sustained for as long as some designers may think.  Therefore, the isolated element that artists and designers want viewers to focus on should also be given another distinctive feature, like being drawn in a different color.

--People are more likely to read a story when they are given both its headline and summary than they are when presented with only its headline.

--Images 210 x 230 pixels or larger draw more attention than smaller images, and people are likely to click on images of the size 210 x 230 pixels.  This fact should be taken into consideration by web designers when creating icons and navigational links.

--If web designers want to provide related information (like a footnote or other explanatory note), they should place it near the text or image it is related to, instead of at the bottom of the screen.  The farther away viewers have to move their eyes in order to read the note, the less likely they are to read it. 

Does any of the data here (or presented in the article, if you've read it) surprise you?  Do you have any personal experience with eye-tracking and its applications?  Do share.

The Usability Wars: Mac vs. PC

"Mac or PC?" is possibly one of the most loaded questions you can ask of a techie.  My computing experience has largely been PC-driven...until recently.

I had the very good fortune of winning free tuition, through a sweepstakes that I found out about on Twitter (good things come to those who tweet!), for NJIT's iPhone Application Development course.  This victory necessitated the purchase of a Mac.  Being a student with limited income, I chose the cheapest Mac model that would get the app-development job done, namely the MacBook (with Mac OS X Snow Leopard pre-installed).  I was excited about getting the opportunity to play with/use the Mac OS, since I wanted to see, firsthand, what all the Mac-vs.-PC fuss was about and to make my own informed opinion.

There was definitely a learning curve for the first few days.  For example, I had to re-learn how to do basic things like "right click," copy and paste using keyboard shortcuts, take screenshots, and find a window among all those that were open (thank the Lord for the "expose" feature...ok, He probably didn't have much to do with that one, but you know what I mean.).  Particularly bothersome to me was the lack of a "maximize window" button at the top of my windows.  I thought, "If I can't even maximize a window easily, what hope is there for everything else I have to do on a computer?"

And then it came time to install some programs.

When I ran the installation for the iPhone SDK software, I was shocked at how smoothly the process went.  Basically all it asked me was, "Where do you want this?" And after I told it the installation location, *poof!* there it was.  Then when I installed other programs (for instance, some basics like Adobe Reader), sometimes all I had to do was click and drag an icon from one location to another.  When I got the confirmation that the program was installed, I didn't believe it.  I had to open up my Applications folder and see it for myself.  The confirmation message didn't lie.

I also noticed that, in general, things were more streamlined on the Mac: virtually no error messages, and no constant software updating required.  The two-finger scrolling feature became a favorite of mine (so much so that I would be disappointed to find it missing when shifting my focus back to my Vista-based laptop).  Startup and shutdown were quick, and graphics really were richer on a Mac display.  And you gotta love the little multicolored, pinwheely thing that replaces the cursor pointer when the computer is in the middle of processing something.  I'm also a sucker for bouncing icons at the bottom of my screen.

Seriously, though: it would seem that Mac has defeated the PC in this usability battle.

But, you can lose a battle and still win the war.

Word on street is that Windows 7 gives Mac a run for its money when it comes to usability.  I haven't installed it on my Windows laptop yet, since I have lots of stuff due in the coming weeks and don't want to run the risk of having to do a lot of extra, unforeseen downloading and updating when I really need to focus on my work.  But I'll make an assessment when the time comes.  I have to say that I do like little Kylie and her presentations in the Windows 7 commercials, and her ability to accomplish such artistic feats on a Windows 7-based machine does make a strong case for the OS's usability.





I'll post about this topic again when I get the chance to test out Windows 7.  Will I break little Kylie's heart and name Apple the victor in The Usability Wars?  Or will I, too, feel the irresistible urge to make slideshows praising the miracle that is Windows 7 (featuring kitties and bunnies, of course)?  We'll just have to wait and see.

In the meantime, have you tried Windows 7?  Are you a Mac or a PC?  Share your thoughts by leaving comments.

My Voyage of Self-Discovery using Google Sites

If you have a Google Account (and if you don't, you should consider getting one), you probably know that Google offers its users the opportunity to create sites (called Google Sites), for free, using its server space and web design tools.

Before I launch into my explanation about how much I learned about myself during the design process, as well as a description of my experience with Google Sites, I should really give some background information on why I designed the site the way I did.

I started out by taking this quiz on learning styles.  The quiz assesses you on four scales: active vs. reflective, sensing vs. intuitive, visual vs. verbal, and sequential vs. global.  Try taking the quiz and seeing what kind of results you get.

Here are my results:

My results make sense to me, especially when I consider them in combination with my Myers-Briggs type (INFP).  Perhaps I'll explore the connection between learning styles and Myers-Briggs types another time.

Based on my results, a person familiar with the scoring system (or someone who, at least, read this overview of the learning styles) would correctly say that I:

--  prefer to work alone, and I also like to take time to think about any topics presented and to process them sufficiently before taking action.

--  enjoy discovering connections between concepts and thinking about possibilities rather than merely learning facts.  I deal well with abstractions and appreciate innovation, and I don't like repetition or going through routine steps or calculations.

--  don't have any strong preference for visual presentations (videos, charts, illustrations, etc.) or verbal instruction (written or spoken words).  I appreciate both types of communication.

--  work best when I can see the "big picture" with regard to the topic at hand.  Then, I'm better able to understand the details and what those finer points do to "complete the picture."

Put it all together, and what does it spell?

I'm a very conceptual thinker who may not always pay attention to or appreciate the finer points of the topics presented.  I like to have time to absorb the material at hand before acting on it, and I also enjoy connecting concepts across disciplines and having the opportunity to structure my own "learning path."  Being exposed to the "big picture" before delving into a topic can be helpful, as well.

True, true.

So after I processed both the details and the overview of my learning style, I tried to figure out how a website designed specifically for someone like me would look.  I'd like to think that I did a pretty good job of not only coming up with a list of factors to consider, but also addressing those factors in the design of my new website, Before You Tweet…

Here's how I went about it.  Appropriately enough, I've included a screenshot illustrating each of these nine design factors.

-- To address my impatience with details, I put some quizzes on my site to compel the viewer to take some extra time to look over the finer points of the material covered on each quiz's reference page.

-- Reminders to attend to certain details, like saving one's changes on their Twitter Settings page, are also offered.  I find that I also benefit from receiving similar reminders in real life (more on that later).

-- I put important terms and main ideas in bold, allowing a global learner like me to quickly scan a page and get an overview of the major points covered on that particular page.   Bolding these items may also help the viewer to remember them, whether they be main ideas or details.

-- Because I have almost-equal preferences for visual and verbal presentations of information, I tried to include both in my site.  Illustrations are offered, along with written descriptions, for the step-by-step instructions, and videos are shown, where appropriate, as they can offer both visual and verbal representations of information.  Even if the video does not actually illustrate ideas through pictures, the audio portion of it does satisfy the word-related requirements of verbal learners.

-- Since global learners benefit from having the freedom to construct their own "learning path," I wanted to make sure that all subpages of the site were easily accessible from any page.  Thus, I put links to these pages in the left-hand sidebar of every page.

-- Global learners may also find it helpful to look at an overview of what they can expect to learn in a particular section.  Therefore, I made sure to include such overviews at the beginning of sections including multiple pages.  An overview of the entire site's contents is provided on the site's homepage.

-- To address the needs of reflective learners, I wanted to ensure that viewers did not feel rushed through the tutorial.  I encouraged them, at certain points, to take some time to play around/test out the featured aspects of Twitter before moving on.  At the same time, I tried to get viewers to see the benefits of looking at other sections, as well.  I also recognized that reflective learners prefer to "lurk before they leap" in online settings, since they like to think about things before speaking up or taking action.  Because of this, I reminded the audience that they can use Twitter as a strictly information-getting, rather than information-giving, resource.

-- On the "About This Site" page, I encouraged viewers to take notes, which help can help reflective learners to retain information by putting it in their own words.  In this way, they can take "ownership" of the material.

--  A right-hand sidebar, containing "Related Resources," is included on certain pages to address intuitive learners' need to imagine possibilities and discover relationships.  This sidebar can also be helpful for global learners, who appreciate seeing topics from different perspectives and discovering how they relate to things they are already familiar with.

To accommodate the thinking style of intuitive learners, I planned on having information about the theories behind a topic be linked to that topic's page but appear in a separate window.  That way, the supplemental information would be optional reading rather than part of the lesson, itself.  However, I decided not to implement this design factor in my site, since I thought that having extra information in both a sidebar and an extra window might result in "information overload" and, possibly, viewer confusion.  Furthermore, I felt that such an approach would be more appropriate for a site covering a broader topic, like social networking as a whole.

I also wanted to give users the opportunity to take notes directly on the site and save them in a private account, but Google Sites doesn't support this functionality.

While I was designing and creating the site, I, by necessity, had the results of my learning-style quiz very much in mind.  As I mentioned before, my results definitely made sense to me, and I related to the provided descriptions of my four scores.  However, these traits were never at the forefront of my thoughts, and I didn't have specific names for the ways in which I think, work, and learn.  As I reflect on my experience with discovering my learning style and designing my Google Site, I was reminded of the idea of "you have to name it to claim it," which basically means that once you have a name for some aspect of yourself or your life, you're in a better position to address it.    

As I worked on my site, I became more aware of how much my learning style affects how I complete tasks.  For example:

-- I took some time to really think about what I wanted to accomplish and how I was going to accomplish it, which is typical of a reflective learner.  I also made notes about possible layouts and things to include,  which helped me to map everything out before taking action.

-- I really enjoyed the process of looking for content for the "Related Resources" sidebars.  As I was adding those links to the site, I thought to myself, "I *would* actually like a site designed like this."

-- I had some frustrating experiences with retaining the changes I made on the "Manage site" page.  Why weren't the edits I made being reflected on my site?  Thankfully, it didn't take me too long to figure out that it was because I wasn't saving my changes before navigating away from each editing page.  I don't know what gave me the idea that I would just have to hit "Save changes" once before clicking "Return to site."  (Maybe it's because I'm a conceptual/global rather than detail-oriented thinker?)

-- I was also reminded of how helpful I've always found it to read the "In this section" overviews in my textbooks.  I just took it for granted that everyone benefited from such previews, but it's probably more accurate to say that some people find them more helpful than others.

Now that I have a greater awareness of my own personal way of going about things, I can do more to make greater use of my assets and compensate, where necessary.  I'll keep you posted on how these revelations affect how I go about doing the rest of my work.

I'm afraid Google Sites provided a few bumps in this road of self-discovery:

--  Finding an appropriate gadget for my site was harder than it should have been.  There are *so* many Twitter gadgets, and yet only a small percentage of them had any real practical use or relevance.  Does there really need to be a gadget for every celebrity (or "celebrity," as the case may be) with a Twitter account?  And every time I pulled the scroll bar down in hopes of revealing a useful gadget, the bar crept upward a little bit, indicating that there were still more gadgets to evaluate.  Google could have at least provided a count of how many gadgets matched my search criteria.  I know they can: they can count up how many millions of hits things get when someone does a search on Google's main page.

--  I had problems viewing my customized background image when I was logged in as the site's owner.  It's not that I couldn't see it: it's that I couldn't see it the way that I visitor would see it.  After I had finalized and uploaded my background, I panicked when I couldn't see the cute little birdie that was supposed to appear at the top of the page.  It turns out that the header that appears on the Editing pages encroaches on the background image, thus covering up the bird.  Much to my relief, when I selected "Preview page as user," the bird reappeared.

-- I had another problem with my background image.  When I tried to upload it, the "Custom" option for the background image was grayed out, making me think that I couldn't upload my own image when using the particular theme I had selected.  I then went through most of the other themes to see if the "Custom" option was available on them.  It wasn't.  I then went back to my original theme and hit the "Browse..." button.  It turns out that I could upload a background image under my original theme, after all.  Why would Google imply that that particular option wasn't available when it really was?

-- While creating quizzes was easier than I thought it would be in many ways, the directions for how to create one could have been more clearly written.  For instance, they should have covered the issue of permissions (i.e., how to allow or restrict access to the quiz), and they could have given the reader a more complete idea of what a "Form" is on a Google Spreadsheet.  I was left to figure out those details on my own.

-- I also didn't like how I couldn't change the font of the page header.  I could change the color and the header background, but not the lettering appearing in it.  Why?

I don't mean to trash Google Sites.  It's just that there are some frustrating aspects of using it.  But when I navigated through all the features and ways you can edit them, I thought it was pretty incredible that Google allows you to do all that without knowing any code whatsoever, and the WYSIWYG interface is incredibly helpful, as well.  I guess they do have to make some site features off-limits, since giving users any more power may compromise the security of Google's servers.

A few things that I particularly liked:

-- Editing the navigation sidebar was very simple.  I could indicate that a page was a subpage merely by pressing a few arrows on the "Configure Navigation" screen.

-- Google Sites has a special feature that makes it very easy to display YouTube videos on your site.  All you need is the code that appears next to the video.

-- Typing content on the pages was very easy, thanks to the word-processor-like interface.

-- Creating a new page for your site takes less than a minute, although I'm not quite sure why attachments and comments are enabled by default.

So that's my Google Sites story.  Be sure to check out the site and let me know what you think.  Or you can even Twitter about it.