Effective Intranets

Annika Naschitzki & Leif RoyEye trackingAll will be revealed.

1Weve run over 4500 user tests2

Most often on screenSHOW EXAMPLE DOCS3

Frequently on paper

On the moveSometimes thats in car5

In the work place

In the air

Low fidelitySHOW EXAMPLES8

Medium fidelityMedium fidelity

High fidelity

The value of user testingUser testing gives you:Insight into your users actual behaviour.Understanding of your users attitudes, feelings, and motivations.Understanding of what is and isnt working in your design.Subjective or anecdotal data. UT gives you + et gives you ->

more comprehensive understanding of their behaviouras close as you get to evidential data in user research12

Eye tracking is the eye-cing on the cake13What is eye tracking?14

Vision GmbHEye tracking can seem like something veeeery complicated15Actually, its not that complicated

usercentricBut actually, its not that complicated. It is a technique that is added to user testing or that can work as a standalone study. Practically, youre using a different monitor. It adds a new dimension to understand how your users perceive a website. 16How does it work?17How does it work?

in here, somewhereThe most powerful receptors in our eyes are called fovea, they live in the pupil. The pupil must focus on a point in order for the fovea to perceive colour, faces, writing, etc. That is called a fixation. When the pupil is in motion, its called a saccade. In this phase, visual perception is unlikely or even impossible.

18How we lookFixationSaccadeOur eyes go through several fixations every second (even if we think we stare at a point). Our brain then puts together the information layer by layer (e.g. colour, texture, depth). This is how our brain creates an experience.

Eye Tracking measures the speed of the pupil and can thus detect when a fixation is happening!

19So, what do these fixations tell us?You cannot move your eyes without moving attention.

Eye tracking can tell us which elements participants pay visual attention to, e.g. on a website.

Fixations are linked to attention! You cannot move your eyes without moving your attention

That is why we can make statements about what users see, based on the movement of our eyes

This does NOT mean that they definitely perceived that element! (e.g. Jared Spools Ketchup bottle problem) But it is fair to say that elements that draw visual attention have a higher change of being perceived (consciously or subconsciously). 20

But how can a monitor tell what I look at?! thats why!

Theres a layer in our eye that reflects infrared light. Thats why your eyes can look red when you take a picture.

22

What the eye tracker sees tobiiThe monitor uses infrared light to make the pupils of the person sitting in front of it light up and thus become detectable.

And by using formulas way over my knowledge of mathematics, the eye tracking programme can calculate the speed of the pupil and what it is focussed on.

23Monitors - No strings attached

tobiiUsing a monitor like that, the participant can move her/his head freely in a large area, the data accuracy is not lowered by natural head movement.

24Mobile eye tracking

In order to take eye tracking research to new fields of application, mobile solutions were created.

The development process went through a couple more of less clunky stages.25

Mobile eye trackingtobiiToday mobile eye trackers are light glasses like these. They are connected to a recorder in a belt, so you can freely walk around and explore physical spaces.

26The results: Heatmaps & GazeplotsSMI

Theres two main ways to visualise the results of eye tracking.

Heatmaps shows the accumulated data of all participants. Gaze plot ashows the visual path that individual participants took. Each bubble stands for a fixation. Theres other ways of analysing data, but they are in the form of tables.

When analysing, well always look at a number of different forms of data. Ill talk more about what you can read from the data later on. Before, I want to give you some examples where eye tracking is used. 27Where eye tracking is used28Eye tracking as an aid

KOMO News tobii

thecreatorsproject.comeyewriter.orgOriginally, eye tracking technology was used to help people who are paralysed.

This man is a famous English graffiti artist known as Tempt1. He was paralysed in an accident. With a programme called Eye Writer, so Tempt1 could continue to draw, using just his eyes.

On the left is a 9 years old who is using an eye tracking device to selectpre-programmed phrases, and she can type her own words as well.

29Gaming by Gaze

tobii

gizmodo.comIf this catches on, we may not even need to hold a controller in our hand or jump around in front of a Kinect or Wee if we want to get our game on. 30Psychology & Neurosciences

The biggest fields of research are Psychology, Sociology and the Neurosciences. In this example, eye tracking is combined with EEG a technique to measure activity in different areas of the brain. Psychologists try to understand human perception, thought processes and emotional responses. So, this kind of research improves the conclusions we can draw from eye tracking data. 31.. and more exotic fields

University of IndianaAnd there are other fields of research as well32Behavioural research

tobii tobiiEye tracking is used to learn more about how our closest relatives in the animal kingdom perceive their surroundings and how they behave. 33Behavioural research

This is a study that tobii did with a chimpanzee34Perception of faces

This is a case study by tobii:

The gaze plot shows face scanning patterns on human and chimpanzee faces. Chimpanzee focus on the mouth and sometimes at the eyes. Humans are mainly focussed on the eyes. With the exception of the smile. 35User research36Eye tracking in user researchAnswer questions such as: Do users see/notice this?Evaluate the effectiveness of a design Visualise what the users attention is drawn byAs a tool for observers, e.g. of a user testEye Tracking lets us know where the users visual attention is drawn to, therefore, it is useful to:37Mobile phones

miratech.com

simplyusability.comWith this special mounted eye tracking cameras that allow user testing of mobile phones. 38

Tabletsmiratech.comTablets can be tested as well. This picture is a nice example from Miratech.

The guys compared newspaper reading behaviour on an iPad and on printed paper. They showed that iPad users skipped more details. Plus, participants remembered articles better when reading it on printed paper.39Package design

visuality-group.co.ukYou can also test the design of packages. These are all different wines, you may normally test a number of different package designs that you have developed.40Packaging in the store

eyetracking.meEven better is to test packages in an actual store. Again, you could work with a number of design variations. You can see which design drew more attention.41Point of Sale Shelf tests

rwconnect.esomar.orgvisuality-group.co.ukAnother thing you can test in an actual shop is the placement of your product on the shelf in what position does it draw more attention?42Point of Sale Ads and banners

visuality-group.co.ukAnd finally, you can test banners and any kind of extra advertising that you can place in a supermarket and see whether shoppers actually notice it and whether it makes them more likely to buy your product. 43Eye tracking and UX44User testingYou run user tests to get:Insight into your users actual behaviour.Understanding of your users attitudes, feelings, and motivations.Understanding of what is and isnt working in your design.Subjective, or anecdotal, data. Lets just recapture User testing can give you45Why use eye tracking in UXYou add eye tracking to get:Deeper understanding of users actual behaviour. Insight into users subconscious or instinctive behaviour.Better understanding of why your design does or doesnt work.Evidential (quantitative) data And if you add eye tracking to this, you can get:

Theres two typical scenarios for doing eye tracking and user testing studies. The first one is:46How is my website doing?47Purpose: Kick the tires

The first one is used when you just want to know where your website is at.

48User testing with eye tracking

These kind of studies are very much alike normal user tests. Youll use a similar number of participants, 6-12, and youll use the eye tracking data to understand the users general behaviour. It helps you understand what people miss and helps the facilitator ask the right kind of questions (example). Its good if you have some specific design questions you want to answer along the way.

49An example: How is my site doing?

The 2 Degrees homepage50An example: How is my site doing?

The visual attention on the 2degrees homepage is evenly distributed between all main elements within the first 20 seconds. Participants may therefore pay attention to the central message, as well as to the navigation options and the option boxes at the bottom.It is likely that users find it easy to overview their options on the homepage and navigate from here.

51An example: How is my site doing?

The participants gaze moves back and forth between the top, centre and the bottom of the homepage which is not problematic when perceiving pictures, but not ideal for reading messages .The main navigation and the three boxes at the bottom receive a lot of long fixations. It is likely the options were consciously read.

Overall, the visual design of this homepage appears to be working well. The next step would be to check how the visual attention works when the participants would actually perform a task, e.g. look for a certain item. Wed see how functional the design actually is and by listening to the comments and reactions of participants during the task, wed also learn about the subjective perception of the site.

52Animations its alive!

53Animations its alive!

54Differences in behaviour

This is a great example of different user behaviour. 55

And our favourite exampleHeres another example, the OLD Telstra Clear website.

Ask: What do you reckon will draw attention on this page? 56Our favourite example

Ask: Anything stands out? What do you think that box is?

If youre a customer with a non-technical query and you are having trouble getting through to us on the phone, please click here to email us, well get back to you within 2 business days. 57Inform your design58Purpose: Develop and design

When testing designs, you will use a more quantitative approach to user testing: More participants (10-25), short sessions, just a couple of short tasks, no or limited interaction with the facilitator, time-limit for tasks. So you give the participants a context and then you just collect eye tracking data.

Ideally you test a couple of different design versions and youre testing which design is more effective in whatever it is supposed to achieve. 59

Purpose: Develop and designWill users notice this stuff if I put it down here?Where should the Pay now button be?And these are some examples of what kind of questions you could answer with eye tracking. In fact, eye tracking will be most helpful if you have clear questions that you need answered rather than how is this design stage doing.

However, it is possible to just give your design status a general check. 60Design principlesRunning tests like that, theres some principles that could be uncovered61The Face effect

The face effect as you have seen before at the monkey eye tracking results human attention is drawn by faces and by eyes in particular.62The Face effect

bunnyfootIn this example we can see, a number of physical features draw the attention of people looking at the statue of David but the centre of attention is on Davids face!63

Using the Face effecthumanfactors.comThis effect can be used to direct attention, for example on an ad. Here two different versions of an ad were eye-tracked. In this case, the model is looking directly at the viewer. 64Using the Face effect

humanfactors.comAnd in this version, the model looks at the product, forming a straight line between her eye and the product name on the package. 65Ways to focus attention

humanfactors.comAsk: What can you see in comparison?66Ways to focus attention

usableworld.com.auThis is an great study done by our friend James Breeze from Usable World in Australia. Same effect the baby looking at you captures all the attention, but when its looking at the ad message Its a bit like when youre point a finger at something67Ways to focus attention

Heres an example of the opposite: The face catches the attention, the key blurbs get some attention as well, but its very unlikely that anyone read the name of the company or their contact data.

So clearly, you should all go to work after this and pop lots of babies on your websites and ads, staring at your key content. 68The F-Design

Dropping the F-bomb now69The F-Design

Nielsen ResearchIn 2006, Nielsen Research blogged about their observation, that content on websites is read following an F-shaped pattern The term F-design has caught on ever since. 70The F-Design

tutsplus.comThis is what the F-design means. This principle is considered standard for most content writing today and it was uncovered by eye tracking.

71Talking about colours

Colours is another important topic. Eye tracking research has shown that saturated colours draw the users attention best. 72Using saturated colours

This is NOT a joke, this is the website of an actual business.

This may not be the best advice73Using saturated colours

This is a better example. Saturated colours, high contrast. 74Using saturated colours

75The bottom line

76User testing+ eye trackingI think many of you made the experience that user testing can give you amazing insights into what your users want and need. And that hopefully helped you improve the user experience of your service which ultimately benefits your business or organisation.

What I hope to have shown you today is what kind of deep and sometimes surprising insights eye tracking can provide. Especially when its combined with user testing.77a more complete understanding of your users experience.=78

Annika Naschitzki & Leif RoyThank you.

79