On The Go and Ten Ticks Study Guides:

Wedding Invites

Veuve Clicquot
This cut-out vinyl window graphic was designed for Hemisphere nightclub to promote Veuve Clicquot champagne.

R.O.K.
This brochure was designed for an international production company to market a new TV series.

Le Creuset Brochure

Client: Tiger Brands
Project: E-Learning Platform or LMS – A customised Moodle platform where their internal training can take place with remote users studying with case studies, videos, quizzes, tests, essays and more.

Client: FirstCape
URL: http://www.firstcape.com/
Project: Flash website. FirstCape is one of the best-known and popular South African wine brands in the United Kingdom and Europe and as their digital agency Side B enjoys keeping their website as fresh as their wines.

Client: Jennifer du Plessis
URL: http://www.jenniferduplessis.com/
Project: Flash Booklet website to showcase the highest quality food and service you will receive when dealing with Jennifer du Plessis. Her website needed to show-off the passion, creativity and fun with which she approaches everything she does, whilst still holding the professional service in high regard.

To contact Side B or view Side B’s complete portfolio on Cape Town Creatives, click here.

1. Side B
2. Surface Digital
3. The Fire Room
4. Full Stop Media
5. 4 Design
6. NB Media

www.nbmedia.co.za

We often think that the prettier a website is, the better it’s gonna be? Right?
Wrong!
Good web usability is something that’s always been of great interest to me and is always a major element that I aim to have on the sites I create. There are plenty of blogs and articles out there that can give great tips and pointers for all web designers, however I recently came across something that took my understanding of how to create a good-looking website to the next level. And for once it cannot be done with just some good old Photoshop and code!
It’s a form of research that is very pricey, but has astounding results. It is known as Eye-tracking and uses some special hardware to basically track a user’s eye movements with infra-red beams. It provides information on how users consume web pages and scan over them. Results are then produced with a heat-graph to show where users mainly focused their attention. These results from the Nielsen Norman Group’s recent usability studies were very interesting to say the least.

1. Users read content in an F-shaped pattern

We found that users’ main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:
• Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
• Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
• Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

What we can deduce from the results:
1. Web users definitely do not read text thoroughly. They rather scan and run down a page, as compared to reading a book where they read everything line for line.
2. Your important information needs to be stated at the start of your article/webpage.
3. Since users scan mainly down the left hand side of the page, use your more important words near the beginning of paragraphs or write at the start.

2. Users rarely look at display advertisements on websites

At all levels of user engagement, the finding is the same regarding banners (outlined with green boxes in the above illustration): almost no fixations within advertisements. If users are looking for a quick fact, they want to get done and aren’t diverted by banners; and if users are engrossed in a story, they’re not going to look away from the content.

What we can deduce from the results:
1.Don’t rely on the fact that your ads are always being seen if you advertise on websites!

3. Fancy formatting and fancy words = Ignored.

At first, the heatmap seems fine:
• users scanned the main parts of the page,
• the categorization of the main content area worked particularly well, and
• users gave considerable attention to the Population Clock and the Population Finder.
On closer inspection, however, it’s clear that users only fixated on the first third of the number that shows current population. In other words, people scanned that area, but didn’t actually read the number. (Only a small percentage — as indicated by blue coloring — looked at the last 2/3 of the number.)

What we can deduce:
1.Don’t rely on those different coloured headings (which are pretty old school to say the least!) to draw attention to a certain heading/section.

4. Show numbers not numerals

It’s better to use “23″ than “twenty-three” to catch users’ eyes when they scan Web pages for facts, according to eyetracking data.

5. Email newsletter tips

We found that users are extremely fast at both processing their inboxes and reading newsletters: the average time allocated to a newsletter after opening it was only 51 seconds. “Reading” is not even the right word, since participants fully read only 19% of newsletters. The predominant user behavior was scanning. Often, users didn’t even scan the entire newsletter: 35% of the time, participants only skimmed a small part of the newsletter or glanced at the content.
People were highly inclined to skip the introductory blah-blah text in newsletters. Although this text was only three lines long on average, our eyetracking recordings revealed that 67% of users had zero fixations within newsletter introductions.

These are some basic pointers from just one study, but it’s still amazing to see how this technology works. If I had thousands to spend on making all my sites better I’d definitely go for this option. However… this isn’t really the case!
The fact that you are reading this line means you’re probably one of a select few! Well done.

Furthur resources on web usability:

• www.usability.gov/guidelines
• www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines
• www.userfocus.co.uk/resources/guidelines.html

Blog posted by Full Stop Media
www.fullstopmedia.co.za
www.brucemeissner.com