Eye tracking research into South African websites
•Als PPTX, PDF herunterladen•
2 gefällt mir•677 views
Using Eye Tracking technology we conducted research into how users experience and use 10 South African websites. Here are the top 5 tips from our research
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Empfohlen
Empfohlen (20)
Eye tracking research into South African websites
- 1. * The reason why are we losing s Liron Segev Twitter: @Liron_Segev #EyeTrack
- 2. * My Website – I am Unique Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 3. * Navigation - at the top Search box - at the top Sliders - with pics Logo - top left Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 4. * CEO: “I sign the cheque Designer: Marketing : cause I am CEO “I rock Paint “I know BI*CH” Shop, Photo above the Shop, Coral line, below Draw & have the a Paint brush line, through DUDE” the line” IT Techie: “I am certified in C++, MCSE, A+, PHP, J AVA, SQL, TCP/IP” Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 5. * Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 6. * “Best Practice” “Industry Standard” Ironic that the search for the perfect website designed has lead us to the point that every site looks exactly the same. Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 7. * Stats tells us WHAT the web user does, We need to know HOW the web user does it Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 8. * Great Minds A like think Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 9. * Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 10. Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 11. Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 12. * 10 Websites: We Measure: • What people instantly see on the site • In what order people view the information • Where people’s eyes fixate • What people don't see at all Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 13. * Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 14. * “Make headlines BIG so users see the information. User don’t read small print” Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 15. * • Smaller font encourages people to read • Large font encourages people to scan • People read both headline AND text when headline is bold and the same size as the text • People only look at the left one-third of the text Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 16. * “Divide the web page into clear, separated blocks otherwise the user will be confused” Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 17. * 8ta News24 • Visual Break discouraged further reading Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 18. * “People read from LEFT to RIGHT as we are used to in the real world” Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 19. * iol • People scan down a list of headlines on the left • Headlines have less than 1 second of attention Liron Segev - Twitter: @Liron_Segev
- 20. * “Navigation must be at the top – that is where people expect it to be” Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 21. * Vodacom DSTV • Right-hand navigation received more attention than top navigation • Up to 29% more user engagement than top-navigation Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 22. * “Charge top money for Headline Banner as it’s the first thing people see” Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 23. * MTN Ster Kinekor iol • Banners at the top = least attention • Text + Pictures ads = most attention @ 6 seconds (on avg) • Text-only ads received attention for 1.2 seconds (on avg) • Bigger ads = better chance of being seen • “Skyscraper” did not fare well and largely ignored unless part of content Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 24. * News24 DSTV • Right-hand adverts received more attention • Ads in the middle of the page were received well • Ads on the left not so well • Ads close to popular content did well Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 25. * “Usage of images must be sparse and generic images are best” Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 26. * Cell DSTV Compticket - Face Compticket – No Face • Large images hold the attention longer • Images at least 210x 230 pixels viewed by more than half the testers • Clear faces attract attention • Images were often ed - repeatedly Liron Segev - Twitter: @Liron_Segev #EyeTrack
- 27. * 1. Info that requires reading should be the same font & size as the headline 2. Place catchy headlines on the left where people scan 3. Play with navigation to keep attention 4. Ads do work if placed strategically and on the right 5. Large clear images with people’s faces work well Thank you for your time ! Liron Segev – www.EyeTracking.co.za Email: Liron@SwiftConsulting.co.za Blog: TheTechieGuy.com Cell : 0837881911 Twitter: @Liron_Segev
Hinweis der Redaktion
- The web has been around for a while now. We are no longer passive consumers of companies brochure-ware but we interact, touch and feel the web everyday and on multiple devices.Designers have been building and evolving websites for years. So by now you would think that they would be so good at it that no two website looking alike.Yet this is not the case. So why is that ?
- Websites are looking the same everywhere we Navigation, - Search – Slider – Logo – Its no wonder that the attention span of our users are fading fast and our sites are no longer effective.So why is that ? How did we land up with each site mimicking the other ?
- In all my years in Consultancy work, this is thetypical method companies select a web design. It is a smack-down wrestling match between Marketing – Graphics designers - The IT tech people - and the CEO
- Often there is a choice between two or three designs - - and the final decision is made based on personal “gut” feel and what is the best industry practice.
- And here is the root of the problem. “Best Practice” and “Industry Standard” Every site wants to be the prefect industry standard, slick and user friendly – so we look at our competition and get our designers to redesign the site according to the best practiceThen look on in horror as the time spent on the site drops significantly and watch as customers take their s elsewhere.The irony is that the search for the perfect website designed has lead us to the point that every site looks exactly the same.
- We started to panic when users were not engaging with the site. So we started measuring everything and produce stats. Loads of stats. s, images, entry point, exit points etc.etc. and we became experts at drawing pie charts and graphs.Even when we do look through all those information overload-death by data- stats we are sill not not getting our user’s attention for long enough.And here is the key of what we are doing wrong.Stats tells us WHAT the web user does, but what we need to know is HOW the web user does itIn other words: We need to stop measuring what the user is ingon and start measuring how the user experiences and consumes the website. We need to see the site through the user’s eye and measure their invisible experience.
- So how do we measure experience ?When we read this our minds immediately recognise the phrase and put it together for us – it ignores the typoWe experience it without thinkingWe experience it without consciously knowing that we are doing itWe simply experience itThis is what we need to measure – how our user experiences the visual. How our user experience our websiteBut how do we measure experience ?We use Eye Tracking Technology which is a combination of hardware and software that is able to lock on the subject’s eyes and track theexact movement of their pupilon the screen. We are able to determine where the user eyes started to look and where the eyes move on the site. This data is then collated and analysed.
- Let me show you what I meanHere is how you saw that last slide. Push PlayThe white circle represent where the eyes were looking at. The larger the circle the more time you spent focused on that location.This is slowed down to ½ speedNotice how you read the header, followed by the orange text. Note how you read in a circular clockwise motion as your mind puts together the phrase so it makes sense. Notice how the eyes don’t actually land up on the text but rather in close proximity to it ? This reveals awesome info
- By gathering all the data of the test subjects, we were able to see distinct pattern emerge. We are able to build Heat-maps showing where the hot spots are – in other words where people focused all their attention.This is indicated in red.Equally important we are able to determine where there is no attention at all
- If I gave you a torch and you used it to shine on what you saw this is the result.Using Eye Tracking and our software we are able to see where people looked and where they didn’t. What they saw and what was ignoredIf I analyse this slide, I can see that no one saw the slide’s heading…Important information for me to know that you didn’t read the header.
- So over the past 3 month we set out to measure and test how users experience the web.Recognising that everyone is doing best-practices there is a need to create the next evolution of website benchmarking.A move from website best usage to website best experience.So we embarked on this research project together with Arthur Goldstuck of World Wide Worx who created the first benchmarking strategy for website in SA 14 years ago. What we did:We invited test subjects to come into the lab and use 10 of South Africa’s popular websites including : News24, IOL, Vodacom, MTN, Cell C, 8ta, SterKinikor, Nu Metro, DSTV, ComputicketWe used our customised Eye Tracking tool to scientifically measure & track person’s eyesWe measured: What people instantly see on the siteIn what order people view the informationWhere people’s eyes fixateWhat people don't see at all
- Once armed with this information we were able to build heat-maps that clearly show websites strength and weakness.We were able to see distinct pattern emerge. What became clear is just how wrong relying only on Best Practice actually is.It becomes obvious that web needs to change in order to keep user’s attention for longer. Don’t’ abandon best practice but need to now add Best Experience too.here are some findings of our study
- We were always told: “Make headlines BIG so users see the information. User don’t read small print”
- Our research reveals that when a headline is larger than its accompanying text, it is perceived as the important bit-- so people decide that viewing the headline is sufficient and they skip the text. Skipping over your message.If you want people to read information and not simply scan your site then you must use smaller font. We found that smaller font encourages focused viewing behaviourie reading the words, While larger fonts promotes lighter scanning. Test participants tended to read both the headline and text when the headline was bold and the same size as text Partial viewing of headlines & text found to be common - we found that when people look at only the left one-third of the text only. If you haven't grabbed their attention in the first couple of words they move on
- We were always told: Divide the web page into clear, separated blocks otherwise the user will be confused
- Our research shows that when there is a visual break (ie. a line, shading, clear separation) it discouraged people from looking at items beyond the break.8ta site shows this clearly. Nothing was read below the line Visual Break (black line) which is where 8ta posts their critical information such as their contact details.Incidentally, our testers commented that even when they actively looked for contact information they could not find it ~News24 site – The floating banner causes people to stop reading below it. This is an irritating trend that website owners are doing thinking that the floating banner encourages people to interact more with the site. Our research shows that people were actively looking for a way to “make it go away”
- We were always told: “People read from LEFT to RIGHT as we are used to”
- We expected to find that people view websites like they do any written work ie from Left to Right.This was incorrect.People typically scan down a list of headlines, on the left and don't view entire headlines. On average, a headline has less than 1 second of a site visitor's attention. So if you want something to be seen, put it on the left.
- We were always told: “Navigation must be at the top – that is where people expect it to be”
- We expected to see that navigation placed at the top of a homepage performed best.In our testing we observed better usage, in other words more eye fixations and longer viewing duration, with right-column navigation. While this might have been the novelty factor at play as people aren't used to seeing right-side navigation – it indicated that there's no reason not to put navigation on the right side of the page and use the left column for content. Subjects edon more menu options and stayed on the site on average 29% longer on sites that had navigation on the right hand sideVodacom and DSTV are examples of effective right hand navigation
- We were always told: “Charge top money for Headline Banner as it’s the first thing people see”
- A banner ad above the Logo didn't draw attention.NONE. Examples here are IOLOf all the types of adverts we tested, the combination of Text and Picture ads were viewed most intently.An average eye duration time of nearly 6 seconds on picture based adverts verses the best text-only ad got only 1.2 secondsSize matters- Bigger ads had a better chance of being seen. "Skyscraper or background" ads (thin verticals running in the left or right column) did not fare so well and were largely ignored.However when MTNincorporated their skyscraperas part of their background this received a lot of time and attention as it was deemed part of the contentVerses SterKinekorwhose skyscraper was just tagged on the right and received virtually no attention.
- When ads are placed in strategic spots they tend to attract more Eye attention and our testers recalled the advert.We found that ads in the right portions of a homepage received the most eye fixations. Followed by Ads in the middle of the pageAds on the left did not do so well.Close proximity to popular content really helped ads get noticed. We saw that when an ad was separated from content matter by either white space or a border, the ad received fewer fixations than when there was no such barrier. News24 is a great example of placing advert in their “most read” sectionDSTV – places adverts in the middle of the page seemingly as part of their content using pictures
- We were always told: “Usage of images must be sparse and generic images are best”
- Larger online images hold the eye longer than smaller imagesWe found that images that are at least 210 x 230 pixels in size were viewed by more than half of the testers. Clear faces in images attract more eye fixations on homepages.Interesting research tidbit: We noticed that people often edon photos -- even though on our test pages that got them nowhere they stilled edon other images.Cell C – uses large blocked images with little textDSTV use faces in their pictures and are inline with the accompanying text. This works well.On Compticket site when closeup imaged of faces were used they received attentionHowever when far away pics were used they were ignored.
- Don’t be a “me too” siteWebsites do not need to be the sameWebsite that are different to the norm retain more attentionAudience is sophisticated and is no longer afraid of technology