2 reasons to think physical product when designing Web UI

February 22, 2015 by
Filed under: Business Analyst Skills, UX / UI, Web Sites 

Previously I have talked about tactile feedback in good product design. Today I want to suggest that anytime you design an interface you think of a physical product.

Why has this come about?

With the easy availability of touch screens, any web page is effectively a physical product as opposed to the days when we were limited to point and click via a mouse.

Some of you may argue that this is already being handled by having mobile versions of your web pages or mobile applications. This however does not take into consideration the larger touch screens that are coming into play as monitors or even when a user decides to browse your regular web site via their Tablet device. Some web sites are also assuming the network / server speed and graphic processing power will be able to cope with large pages (size in kb)without impact to the user but this is not the case.

Too illustrate the point of two bad touch interface design for a web site I will transfer the problems to a physical laptop.

1 – Laptop keys move around when laptop lid initially opened and every time a page button is clicked

Nobody is going to buy a laptop where the keys move as you try to use them but for some reason large web site owners such as CNN.com (page moves up by a row once it has finished loading) / abcnews.go.com + autotrader.com (banner advert expands and pushes page down) expect that users of their web sites will put up with this when the user opens a web page.

Why does this happen:

A – We see examples where banner adverts bounce page text up and down so when a user tries to select a link or read an article they are stuck with a moving target. In the worst case, the banner advert expands for a short while and then shrinks giving a user a double hit on a moving web page.

B – Web page has become bloated and parts of style sheet is loaded last meaning the layout location of some web page elements will move after the page has been presented to the user.

Page below initially loads without banner advert.

Bad UI - Banner advert causing web page moving text

Bad UI – Banner advert causing web page moving text

 

Then the banner advert appears pushing text on page down.

Bad UI - Banner advert causing web page moving text

Bad UI – Banner advert causing web page moving text

 

2 – Laptop keys made incredibly small that you can’t be sure which key is pushed.

Yet again, nobody is going to want really small keys on their laptop but we still see this on some web sites. Mainly it still crops up in paging where the site still focuses on using a small number to allow the user to select next pages. These small numbers are hard to touch accurately with your finger and even with a mouse it requires some dexterity.

www.Realtor.com is an example of this.

Difficult to select web links

Difficult to select web links

When designing for the web, think beyond the actual web page.

Ask yourself how well would the user interface on this web page work if the UI was part of a physical object such as  the keyboard on a laptop?

 

Comments

One Comment on 2 reasons to think physical product when designing Web UI

    […] at the facts –  BBC.com recently changed their website and introduced moving click points and lengthier navigation (top menu items now moved to sub menu). ABCnews.go.com prevents the user […]

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!