Eye Tracking for Design

I recently read an article on eye tracking and how it relates to usability in technical communication. Prior to reading this article, my only knowledge of eye-tracking was the issue it presented for some children that struggle with reading. Sometimes children with eye-tracking issues tend to read at a slower pace. Research has led to exercises and techniques to help resolve eye-tracking issues in children.

Eye-tracking technology

Eye-tracking technology uses two different systems to collect eye movement data. The information collected from eye tracking technology can unveil habits of the human eye that otherwise may not be detected in other data collection tools. Two different types of hardware, head-mounted and remote systems, are used to record eye movement at any given moment and for how long the eye spends looking in any one place. Head mounted systems measure pupil glint to distinguish eye movement from head movement. Remote systems measure the position of the eye compared to a fixed point of reference. Because of this, remote systems, require the person's head to remain motionless. Recent innovations in remote systems are allowing for more head movement.

After data has been collected it is run through eye tracking software. There is a range in the eye tracking software, but most have some common features. Data can be compared in a video format like ERICA's Eye Gaze (TM), where eye movements and fixations are measured with a moving, small read x. In another format, data is tracked on x/y coordinates on a computer screen.

Information acquired through this technology

Data retrieved from this technology can be organized in different ways, but focus on fixations and saccades, which in turn give us the path that the eye follows - scanpaths. Eye fixations are points where the eye is focused on a specific point on a screen for a period of time (250 to 500 milliseconds). Fixations are examined for duration and frequency. Saccades are the movement of the eye between fixed points, which can last between 25 and 100 milliseconds). Together in sequential order, fixations and saccades are organized into scanpaths that allow for the tracking of eye movement that may not be otherwise attainable. Scanpath analysis can then be used to interpret how people visually proceed through a document.

How eye tracking is used for web and user interface design

As designers seek to increase usability in their websites, eye tracking could be that missing element that they need to consider. Web designers should utilize eye-tracking studies that examine web page screens and layouts and their effects on usability in order to create more efficient sites.

A study conducted by the Poynter Institute in conjunction with Stanford University tested 66 online newspaper readers' eyes and the conclusion was that readers "prefer text over graphics as entry points into Web sites. The research team concluded "... it appears a (news)paper provider's first and best chance to engage the reader is through text," this kind of eye-tracking information can be invaluable to an online newspaper looking to increase its viewership.

There are several examples and conclusions that further illustrate the importance of eye-tracking for website design as outlined in later collaborative study by the Poynter Institute:

• another major conclusion of eye-tracking studies show that people's first scan of a website is performed in "z" pattern in order to view all of the content before they continue on in a website.
  

• smaller text resulted in attentive reading, while larger text encouraged browsing
  

• Underlined information created distraction, bolder text for headings is more effective
  

• users preferred shorter blocks of text
  

• links should offers descriptions

• larger images (210 x 230 pixels) were preferred over smaller ones, when images and text are paired together they should link to the same location

In commonly used drop-down menus, eye-tracking research has shown that people read in a common scan pattern. Users largely tended to read the first couple of choices, then skip to the bottom and then conclude by reading the middle. In application for designers, they would want to put their most commonly used options at the top or the bottom of a drop-down menu in order to increase their ability to be located.

Unlike in drop-down menus, people's scanpaths do not always follow a similar pattern. User' s scanpaths differ based on the type of the website. Different websites cause readers to view and scan in different patterns. The orientation and purpose of the website changes eye-tracking in the user. Current eye-tracking studies seem to suggest that form may need to follow function for web sites to increase usability. In other words, the nature of the site needs to be in harmony with the viewer's scanpath for optimal usability.

Now that eye-tracking research is documented to support usability, there are many emerging companies that are offering eye-tracking methods to evaluate websites. Etre Limited measures users' eye movement in real time and converts the visual activity into heat maps. Heat maps use a color scheme to show what users are paying attention to and what they miss. In this two minute video, Etre demonstrates an eye-tracking session and its effect on usability.



Designers have always linked form and function but until recently, habits of the eye had not been fully considered for usability purposes. As designers continue to seek greater usability for their sites and solve usability issues, eye-tracking adds another facet to create the most effective websites. Eye-tracking research has a firm place in usability design.

My Blog's Revision

When I started blogging a few months ago, I entered a new medium in which I knew little about. At that time, I had only read a handful of blogs, none of which made a lasting impression. I began this blog for several reasons but specifically to explore the technical aspects of blogging. Simply put, how better to learn about blogging than to become an actual blogger.

I also started this blog to share information that I encounter as I continue my education in the field of technical communication. My intent "to explore and simplify the new innovations of technical communications in order to provide a valuable resource for others" has remained the same. However, while my intent has not changed, my blog's design and layout has evolved. As I learn new elements in relation to design, typography, color and css (cascading style sheets) I have incorporated these fundamentals in my blog.

For those of you that are following my blog, you may remember my initial design.

My first template was dark blue with a contrasting lighter text. I added "about me", "followers", and "blogroll" widgets to my sidebar. Initially, I added an image to further explain the title of my blog. I did not want it to be mistaken for a blog about food. I expanded the width of the blog by changing the outer wrapper 's html code to 792 pixels to move it away from the standard template. I created a personalized banner but adding it to the header was challenging. It would not fit correctly and was visually unappealing with this template. So in order to add the banner, I changed the template. This was my first revision.

Here is the basic new template without the banner.














Here is the revision with a banner. I used this design for several weeks. As I read more blogs and learned more about design, I simplified the header and removed the image as it did not add anything to the overall appearance.


















Once again I had to expand the width of the blog by changing the outer wrapper 's html code to move it away from the standard template and also to fit the width of the banner. I changed the banner to black and the font text to Gil Sans to make it easier to read. I moved the blog archive widget up to the sidebar for easier accessibility. I also changed the main background color to white to provide a better contrast.





















I also added a delicious tag so that my readers could access more information on the technical elements and topics that I blog about.



Here is an image of the next revision. I changed the titles and link text colors to blue to offer more distinction.

















As I continued my blog entries I included more links to outside resources and learned how to incorporate images from my computer and other websites. I used Snagit software to capture images that would enhance my posts and then uploaded them to blogger. I chose the size and layout of each image from this editing window.














My first screenshots were smaller and some of the details were not visible.






I started using the zoom button on my toolbar and creating larger screenshots for better images. I also added a border to frame some of the images for a more finished look.
In my final revision, I enlarged the text to a larger point size, increased the weight and changed the typeface to Times Roman to make it easier to read. I also changed my posts to archive daily so only one will be visible at a time. I also, started using meta tags to make it easier to find my blog. All of these modifications are apparent in this post.

My blog will continue to change as I discover new design techniques and other important aspects of technical communication. I hope it will provide a unique perspective on new information and provoke more food for thought.

Do You Know Your Learning Style?

Do you know your own learning style? Do you prefer text or pictures? Do you learn better by doing? If you're curious, you can find more about learning styles and complete a questionnaire to determine how you learn here. I completed the assessment and now have a better understanding of the learning methods that work best for my style.

I have developed a training website on the interview process that includes the methods that best reflect my style of learning. Based on my results, I am an active learner and learn best by doing. I have included a quiz on my site to engage active learners.

I am a sensing learner and prefer learning facts and connecting information to the real world. I have included facts on how to research prospective employers and provided a graph that makes a connection to the real world using current statistical information.

As a visual learner, I absorb more through images, charts and graphs. I have incorporated several visual examples. The graph above will help learners remember that researching a prospective employer is an important step of the interview process. On my home page, I included icons to to aid in navigation.

There is also a video that presents a visual representation of how to dress for an interview.



Throughout the site, I have used images of professionally dressed individuals to emphasize the importance of attire for the interview process.
























I included a color coded graph for important questions to ask on an interview. These questions can be role played with a partner for better retention and will further benefit active learners.







I am also a sequential learner and learn better when information is presented in linear steps. I added numbers to the various steps to help users when preparing for an interview.





Understanding and addressing different learning styles can determine the success of a website. With modern technology and software, websites can offer much more than text and can appeal to larger audiences by doing so. I have tried to accomplish this with my training website on The Basics of Interviewing.