Giving the Finger to the WIMP : Mouse vs Touch in Web Design :

One of the metaphors of the computing that came out of the 1980’s was “WIMP” as in “Windows, Icons, Menus, Pointer” or sometimes “Windows, Icons, Mouse, Pull-down menus”.

With Mobile devices soon to be the default computer experience, we have lost the Mouse Pointer and need to adapt to a new world by losing some bad habits common in our web designs.

Today Mobile means Touch. Touch may be only a temporarily the dominant interaction mode, supplemented (or surpassed) by Touchless and Voice, but it is here for the near term.

If you’re building a native iOs or Android application in this Post-WIMP world you have 1 full screen window, no pull down menus and no mouse pointer.

If you’re building a web application in this Post-WIMP you might be expected to build for the “old” WIMP world, but I’ve argued (and bloged back in 2012 Why Mobile First for Responsive Web Design) that building for Mobile first makes so much more sense, and this just reinforces that view. (See also Avoiding Web Design Mistakes.)

Having lost the the Mouse Pointer, I see 2 major impacts on how we build web pages

No More Hover-overs

A common technique on many web sites is using CSS :hover to add interaction to elements (changing colours or images) and/or revealing information “just in time” ( tooltips being one example of this ).

Unfortunately hover came to used to add flashy “cool” effects for the sake of “cool” effects, and it was also used to hide crucial information in a overcrowded design (rather than deal with the overcrowding).

Mobile browsers can convert hover events to “taps” (just like they convert click events to “taps”) a hover event can work, BUT a hover and click then became a “tap tap”. If the hover was there to make the clickable element discoverable, then it not just useless but may make it hard to use (they only tap once and give up). (Adding Hover to make a link like a button was one bad habit I see all the time.)

See Are Hover Events Extinct?

The HTML input placeholder attribute can replace some use of tooltips. We can use also use progressive reveal of information in a touch world, but it wouldn’t save us for overcrowded design. And we can still have “cool” effects, they just can’t be triggered by hover.

Not using Hover will improve usability on clickable / mouse devices too!

Make Finger friendly targets

Shocking news : Fingers are bigger than Mouse Pointers!!
finger
44 points x 44 points are Appleā€™s guidelines for minimum touch target sizes, so make all clickable elements big enough for a fingertip. Maybe you could make them Thumb friendly? If you have made a clickable elements smaller that 44pt then someone should file your finger tips down to the size of your smallest target area.

See Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes (from which the finger image was cropped)

Remember to allow for different pixel density screens, so minimum 44 pixels targets might not be the best advice, but it comes out to 7 millimeters.

Small targets were actually a issue in too many web sites, even with a mouse pointer! (Making a link look like a button, but keeping only the text selectable was one bad habit I see all the time.)

Using CSS to add padding to anchor links and using labels and padding for checkboxes and radio buttons

For links not in a text paragraph you should also think about space padding between clickable targets.

Google talks about Size Tap Targets Appropriately.

Improving touch target sizes will improve usability on clickable / mouse devices too!

Leave a Reply