Tag Archives: web design

Whats working on my website – getting useful info from Google Analytics

If you have had a site for a while you probably have google analytics tracking code on it. You may get a monthly report emailed to you with a summary of whats happened on your site. The interface is a bit complex though and if its not what you do all day its a bit of a chore. You can get a lot of useful information out though, to use when judging what you are doing right and wrong with your site. Its also a good factor to use when thinking about future plans.

Analytics executive summaries

I’ve been playing with their api and generating some custom reports for a client so he doesn’t have to bother with the means, he just gets the facts he wants in a executive summary.

  • The pages where most people enter your site?
  • Are they the same as the pages that are most popular?
  • Which pages do people leave your site on?
  • Which pages do people spend the most time reading?
  • What are the referrers who refer you the most sticky viewers.

The answers to those questions can be pretty valuable you could write more about that popular subject, provide links across to similar content from the post that people spend all that time on, or talk to your seo company on why people keep finding you under ‘monkey wrangler’, weird. Those successful pages could point you at where your site could be improved.

Failing page designs

Also the info has design implications are some pages or sections of your site failing to engage readers? or are lots of people entering your site on some obscure post that’s the equivalent of a back door and then leaving again because they can’t figure out whats going on here. Perhaps a custom report could help you identify that.

References

Web design – Don’t Make Me Think

I’ve finally got round to reading “Don’t Make me think” by Steve Krug. Although its now quite old, I was reading the second edition from 2006, I think much of it is still relevant.

Don’t make me think

“I should be able to just get it”, the purpose, how and why of each webpage should be obvious. It should be obvious what is clickable, what’s the navigation what the purpose of the site is and where you are in the site. To someone who has never looked at the website before and isn’t a webling. Anyone who has used a web browser before should be able to work it out.

How we really use the web

Designers think that people carefully look at their pages, they spend ages designing them after all. But people don’t, they just bash on through until they can’t figure it rather like blokes do with instructions. They scan pages just picking out what they need to accomplish their aims.

Billboard Design

So we need to design websites in the same way you think about billboards on a motorway. Something to be skimmed at speed. This is why headings are so important it gives a quick clue where to go in the page and how relatively important things are. So create a clear visual hierarchy and make it really, really obvious. In the same way conventions are great every designer wants to create this new/shiny navigation. To show how smart they are but that’s all rubbish. If thousands of other sites on the web use a similar navigation to your site then nearly all your users are going to just get it. Simples.

Animal Vegetable, or mineral

Make choices obvious don’t assume great knowledge of the subject. As long as your correct your not going to annoy an expert by making it simple.

Omit needless words

Omit needless words most people don’t read them anyway. Steve suggests removing half the words on each page. With the aim of reducing reducing noise, getting more content above the fold and making the aim of the page more obvious.

More…

He goes on to talk about navigation, why homepages go wrong and most interesting for me user testing on small budget. But in the spirit of “omit needless words” I’m stopping here.

References

Mobile web design

Android have published a guide to developing applications, despite being an advert for Ice Cream Sandwich, it is quite useful and provides good tips for how to design any small screen based application be that mobile apps or web sites to be viewed on handheld devices.

I’m trying to get my head around how to design things for very small screens at the moment so I found it quite useful.

  • Size of your fingers – aim to make usable bearing in mind the size of the end of your finger is 7-10mm, and you need to maintain a clear gap between each item.
  • Feedback – on interaction to try and indicate that something will happen, they suggest using percentage shades of the same colour.
  • Consistancy – across interface of the same visual clues if touching the arrow makes you move from screen to screen on one part. It shouldn’t suddenly switch to being a edit cue on another screen.
  • Describe only what is necessary – you only have a small screen and people don’t want to know the details. If you have an error message they don’t want to know that you have a parse error or some such.
  • Headline first – “Aliens have landed and you have 6 messages” rather than “You have 6 messages and Aliens have landed”.
  • Be familiar to the devices interface – don’t try and make your android app use iphone design elements, or vice-versa you should be taking advantage of your users familarity with their own device.
  • Pictures being more obvious than words -Real objects are more intuitive than buttons and menus, for icons I guess this comes down to not making people think.* They extend it into pictures being more obvious than words. Guess there is less brain action needed to go from picture of steve > steve! than from “steve the monkey” > oh yeah > steve > steve!. **
  • Only show whats necessary – don’t show whats not needed for that screen. This is ok as long as items are placed in familiar locations. You don’t want everything shuffling position when you go from page to page.

Most of this is the same as its always been but its always good to remind yourself. Sometimes I’ve ignored design reading this made me wonder how much of this is really about toys for adults.

* Never really been sure about using an envelope for an email icon but I suppose if that is what everything else uses then its the right thing to use.
**Wonder if this is the logic behind a visual search engine like Oolone.

References