When designing user experiences, it's important to understand how we humans take in information about the world around us. Of course the way we do that is through our senses. Through sight, hearing, touch, smell, taste, and a few others that we don't talk about nearly as often. In this lecture, we will focus on visual perception, because most information that we receive in general is conveyed visually and that's especially true when we're talking about graphical user interfaces. So we'll try to understand how visual perception works and how we can use that information to design interfaces that work well for delivering information to users. So here you see a graphic representing the human field of vision, and what I want you to notice is, here over on the side, we have peripheral vision. This is the part of our field of vision where we don't pick up very much detailed information. In fact, we can only see essentially contrasts light and dark, black and white in our peripheral vision. We can't do things like read text or recognize faces if things are only appearing in our peripheral vision. Right here in the center, in this area that's labeled, central vision, the five degrees of central vision, is essentially the only part of our field of view where we can pick up that kind of detailed information, where we can read text, we can recognize faces, we can recognize images and things like that. So, how do we read or pick up information from more complex visual stimuli such as form on a web page or something that we might see on a graphical user interface? Well, we do it by jumping our eye around to pick up different parts of the image that we're looking at. Because we can only really get detailed information from that central part of the field of view, we have to jump around to different parts in order to pick up information from each of those different parts. So what we see here, is an example of a person looking at a web form. What you see, starting with the green right here and jumping here, here, here and so forth and ending right here, is the sequence of eye fixations or saccades as they're called, that the user performed when picking up information from this web form. So in order to see all the different parts of this form they had to jump around, through multiple eye fixations to pick up the information. Now what's interesting about this, is you'll notice that not everything on this particular form was actually ever even looked at by the user in this particular instance. So for example, this Cancel button or this Cancel link right here, was never even looked at nor were any of these options up here. Now probably it's because they were not relevant to this task, but when designing a visual presentation, you need to recognize that just because you put something on the page or on the screen or on the image, doesn't mean that your users are necessarily going to look at it. So this process of sequential eye fixations or saccades, is also how we read text. Because we've learned how text is supposed to flow, so in Western languages like English they tend to flow from left to right as shown in this screen, we know to fixate our eyes in a particular sequence. So here we see that the reader has fixated here and then here and then here and so forth and moved throughout the page. So saccades or sequential eye fixations or how we pick up information from a lot of static images like pages of text or web pages that we perceive online. A series of research studies have shown how people tend to process a web pages online. So this is interesting to note, that people don't necessarily read all parts of web pages equally. What's been shown through a series of studies mostly performed by Jakob Nielsen, is that people tend to follow an F shaped reading pattern when looking at different types of web pages. So if we start over here on the right, you can see a Google search page and you can see that there's kind of an F pattern that people follow. What this is showing by the way, is a heat map of many people looking at a web page they're using eye tracking technology to pick up where people are looking and then the red regions are places where a group of users through multiple studies spent the most time looking at the page, yellow is a little bit less, blue is even less than that, and the areas that are gray are places where essentially nobody looked at all. So what you can see, is that a lot of people look in this region up here, top left, because this is a place where the first search result shows up and most people expect there to be high value information there. A relatively smaller number of people read the entire first line, but a lot of people go down to the second line, the third line and by the time you get to the fourth search result, you're seeing a significant drop-off in the number of people that even look at that page. So, you can see this as kind of an F-shaped pattern where most people will follow the first line and the second line and maybe scan a little bit down the left-hand side of the page looking for potentially valuable information, but these areas over here are not going to get very much attention at all. We see a similar pattern on other types of pages. So these are information pages not search result pages but we still see that people spend time at the top reading across, reading down looking for information and then maybe selectively picking one or two places to actually read further into the page, and we can see a similar pattern over here. So, given what we just talked about with regard to the human visual system and how it works in terms of eye fixations and the fact that people don't necessarily see everything that's put in front of them, we can think about some principles for design and evaluation that can help guide us towards delivering better user experiences. So first and probably the most obvious, is that we need to make important information and actions visible. So, we didn't even need this whole lecture to know that if something is not visible on the screen, people will not be able to perceive it, but it's important to remember that, that's the case and I'll show an example in a minute. The second principle is that we can leverage "the read", the natural order that people use to progress through different parts of visual presentation such as the F-shaped pattern that people use for reading web pages. Third, when evaluating through user testing and things like that, ask yourself, "Did users actually see the information that I was trying to present to them or did they miss it entirely." So first, making important actions and information visible. So let's imagine maybe I'm interested in pursuing a master's degree at the University of Michigan. Well, I might come here to the School of Information web page and start looking for information about the Master's program that would be related to user experience research and design. Well, the first thing that we notice looking at this page is there isn't any information or specific action that leads me directly towards the pursuit of that task. So, already we can see that it's a problem when the things that users want to do are not immediately visible or perceivable on the screen that's presented to them. Well, if I look a little bit more carefully, I can start to reason about where I might like to go, I might look in programs, I might look for the master's program up here or I might notice that there's resources for prospective students and look there. So here, I'm looking for information again about the Master's degree and if I look at all of the options that are clearly available to me, I can see that there is admissions information. However, it's not clear to me which of these links is going to tell me more about the program that I want to apply to. It turns out that that information, is visible just below the bottom of the screen or as UX designers often refer to it, below the fold, and I need to scroll down in order to get to it. If I scroll down, I can see why pursue an MSI, and that might give me more information about what I would get if I did that. But what I want to point out, is that information that is not immediately visible and perceivable by users, is less likely to be noticed and if extra effort is required to find it, the number of users that will find it and take action on it is going to be reduced significantly. So, our next principle, is leverage "the read" or the natural progression that people follow when taking in information from a static page in particular a web page. For this we can look at the edX homepage. This is the page that I see when I go to edX, and you can see that they're taking advantage of the natural reading pattern that people tend to pursue when they visit a web page. As you remember from before, people tend to pursue an F-shaped pattern where they start at the upper left corner and read a bit over here to the right, they maybe go down the page, look for other promising areas and read to the right from there. You can see that the information that edX has laid out, is the information that they believe is going to be of interest to the largest number of users that come to the site. So when you start here in the upper left, you have an eye-catching graphic with a very clear call to action which is going to deliver value for most of the people visiting the site. Over here to the right, you have another call to action that's also going to deliver value for perhaps a smaller number but still a large number of users. Then down here, you see a number of preselected courses, that are going to appeal to certain users that maybe didn't find what they want at the top of the page. Finally, something to keep in mind when you're testing user interfaces in potentially seeing issues that people have, is ask yourself, "Did people ever actually see the information that you are trying to present to them?" So for example, when we looked at this page on the SI website, we might ask ourselves if people were unable to find that particular link which was the one we determined would be the most valuable for the task we were trying to accomplish, is it because they saw it and they didn't know what it meant or is it because they follow the F-shaped viewing pattern and they never actually saw it because they gave up before they got there? So we can take advantage of this knowledge of how people read the page when conducting usability evaluations as well. So that's a basic introduction to the human visual system and how we perceive information, and in the next few lectures we're going to get into more detail about how the visual system works and how we can use that to design better interfaces and better experiences.
