Help! I’m in a Dilbertian, looking-glass world

I’ve spent an hour struggling with a web site trying to download some files and was amazed at the poor usability of the web site. I tried an alternate supplier, and this was just as bad.

It feels like I am in a world which is upside down, and what is obvious to me, is clearly not obvious to other people who design build these web sites.

I was talking to someone who lives in an “architect designed house” which looks very smart, but is not very practical. There is an open plan kitchen, flowing into the seating area, and upstairs to the open plan master bedroom. When smelly food is being cooked, you smell it in the lounge and in the master bedroom ; just imagine waking up the the smell of last night’s curry. The master bedroom has very little privacy. The master bedroom has a bath in it, with views over the town and hills. Your bedroom will be full of damp air! An “architect designed” does not mean practical and useful. Perhaps the same architect also builds web sites.

The design brainstorm

I can visualise the conference room where Dilbert’s Pointy Haired Boss is telling the team about the goals of the new web site for ordering CDs

• “A good measure of a web site, is how much time people spend on it. I hear people spend all day on Facebook and that is popular”
• “Real estate is valuable – so use as much as you can”
• Use the latest Java Script tools to make it look really modern; Can we display lines where nothing is displayed until you move your mouse over it? That would be really cool.

Marketing terms

“These are the “upside down” terms we will use in our Marketing material – please ensure you follow them”

• “Improved” : worse;slower
• “Intuitive”: When you’ve used the interface for a few weeks, you know how your way around, and know the pitfalls.
• “Elegant”: we use the design for a mobile phone on a web page, so the users have a narrow column of data, and do not use the available space in the web browser.
• “Modern”: more (or less) rounded corners; different fonts (which make it harder to read – do not use the fonts which dyslexics find easier to read).
• “Uncluttered”: provide less information on the screen; remove visual clues.
• “Dynamic”: we use a lot of interactive scripts which look cool; such as windows that disappear when you move your mouse over them.
• “Smart icons”: for example FEEDback is about FEEDing which is about food – so use a knife and fork for the icon – clever idea isn’t it?.

A Jelly Bean for the person who can use the greatest number of these terms.

The outcome

• Allow search for some topics, such as Pop group – but not the name of the CD.
• Use lots of space on the web page. For example we could easily display 40 items on a page – let’s display just 10 and make them ask for the next page by a “more”button. Though having just one line per screen would be silly – wouldn’t it?
• List information like “Beatles hits by year” – but not the name of the CD. You have to select on each line to see what the CD is.
• When they click to see what is in each CD, do not display all of the contents, just display 3 entries “inline” and give them another “more button”
• When you click on a line you can select “Buy”. When they use the browser back button – do not go back to where they came from, go to the start of the web site, and so more clicks on our site. They stay logged on – it would be stupid to make them logon every time wouldn’t it?
• Make the site inconsistent. Sometimes you can click on a line for more information, sometime you have to click on the button at the end of the line – that only appears when you hover over it.
• Have buttons on the page which have no description or hover text, until you have clicked on it. For example ‘contact us’.
• Use really big fonts to use more space.
• Can we sell a course on how to use our interface? If people who have never used our web site before can quickly order things this counts as a failure because they didn’t spend much time on the web site.
• Make it slow – so people spend more time on the site – but provide some good animation (such as a greyhound racing) to make people think it is doing something useful.

Back in the real world.

I remember having a talk about 20 years ago by  a UI expert.  I cannot remember all of it, but the points I remember were….

• Make it easy for the end user
  1. Minimise the actions the user has to take (clicks, scrolls etc). Put the “up arrow” adjacent to the “down arrow”- not at different ends of the screen. If they have to keep clicking a button – put the buttons close to the same place on each page.
  2. Make actions obvious
  3. If the web site is slow, and you have to keep doing “next” this will frustrate the user.  Is it better to have one page to load slowly with all of the information – or have smaller pages which take seconds to load?
  4. Test it in a typical environment.  I remember trying to use the IBM documentation web site from a customer using a dial up in Indonesia,  going to the UK, to go to the US.  IBM support said the response time was “ok” because they were in the same building as the server!  For me it was taking me minutes per page.
  5. Creating a dyslexia friendly workplace is a very useful site.
• Make the best use of available space
  1. Use the appropriate font.  For one page – do you need a big font?  No.    For a 50 “page” you need bigger fonts to make the sections visible.
  2. Try to provide the most information on the screen as possible – without going too far.   For a list of items consider colouring every 3rd or 5th line to help the user keep their eye on the line.
  3. Make all information visible – do not hide it.  Do not make users move the mouse over something to display it.
  4. If you have icons, make sure the icons are “standard”.
  5. Consider how much you display before having a “more” button.  If you expect people to “find” data, then have more lines, and make it scrollable.  Too much data ( > 1000 lines) can make it slow to load.   I think 100 -200 lines is acceptable.
  6. Provide information the end user wants.  If all the items in a list are for “ABC Wonderful software product for new users”. 
     • This would be clearer
       • ABC Wonderful software product for new users English edition
       1. version 1
       2. version 2
       3. version 3
     • than
       1. ABC Wonderful software product for new users V1English edition
       2. ABC Wonderful software product for new users V2 English edition
       3. ABC Wonderful software product for new users v3 English edition.

• Make it clear what each part is, for example a link (it is underlined).   it should be obvious from looking at it – the end user should not have to move the mouse to display it.  ( I know modern “standards” seem to say do not underline a link – let the end user guess). Consider  people with screen readers and how they read and navigate it.
• Less is more.   I know of this from my acting.  A character who is still, with small moves, is often more powerful than big gestures.  People expect a web site with response time of around 1-2 seconds.  The BBC new web site https://www.bbc.co.uk/news/uk displays for me in under 2 seconds ( usually 1 second) with full graphics.  Some sites I use frequently take over 5 seconds, sometimes 10 seconds.  Do we really need clever animation etc.?
• The word “Intuitive” is often abused.
  1. If you use windows 10 as your primary work station then move to windows 11; the GUI is the same as before.   You find it “intuitive”.   I come from Linux, and having to use Windows, a lot is not intuitive.   Similarly someone going from Windows to Linux will not find it entirely intuitive.   You have to allow for people who are not familiar with the web site as well as people who use frequently use the web site (eg the web site developer and testers).
  2. Icons are often not obvious.   Giving them useful information via a hover is a good start.
• When testing usability of web pages, use people who have never used your site before. The worst people for testing the new user experience, are those who use it every day and who work round the problems.