Design for touching

Design for touching

As Aaron Gustafson described in his book that thinking of the user not the browser is what the term “progressive enhancement” is about, we also need to consider how to show our care about our users. For the current users, the approaches of accessing to the website are various: laptops, tablets with different screen sizes, touching mobile phones, etc. And as forecasted, the mobile devices are becoming the largest share in following years. Jake Rocheleau, field in web designer, believed that mobile users aren’t on keypad phones like BlackBerrys anymore. (www.hongkiat.com/blog/responsive-for-mobile-screens/) The reason we need to consider interaction design in the mobile devices twice is mainly because the differences between the ordinary interface design of web and the design of mobile devices.

 

Web

Mobile

Outputs

Relies on browsers

Relatively smaller screen

Inputs

Mouse and keyboards

Fingers and thumbs

Style

Limited by the browser and network performance

Limited by hardware and operation platform

Application Scene

Home, office, café, and other indoor space

Indoor, outdoor, in cars, horizontal or portrait screen

What are the users’ needs?

Understanding users is the foundational step, whether for mobile users or laptop users, when we do web design.

The most common needs of mobile users can be concluded into two points.

1)    They want to get more information in the narrow screen.

Mobile devices can provide service any time and place; however, users still cannot loss quantity of information. At the same time, the relationship between every block in the mobile devices may not so clear or obvious as that in laptop screens. So the problem about limited screen should be solved in design.

2)    Easy to use.

Users always hold their phones on one hand to control the screen and a thumb have limited range and flexibility. The hot zone of the screen is at the bottom of it on the side opposite the thumb. And other area is not easily to reach.

Fingers are bigger than mouse. If controls like drop-down list, link button are not resized in mobile devices, fingers cannot hit them accurately.

 

How to improve the design to meet users’ needs and satisfy them?

1)    Create “infinite” space in the limited space.

a)     Show different status in a same area.

b)    Show different tips or functions in a same area.

c)     Hide web decoration outside the central stage.

Many website are designed as full-screen page to cater to the wider screens nowadays. Some websites still use the central stage as the important area and decorate the area on either hand. When the width of devices is becoming smaller, the first thing is to reduce the decoration on both sides.

EXAMPLE

www.designweekportland.com/ & www.thesearethings.com/

d)    Hide additional functions.

e)     Rearrange horizontal menu.

If the horizontal menu (or global navigation) is arranged fully in a whole line of the full site, it should be rearranged when the width of the screen is less than 960px. The general solution is to put them into a drop-down box floating on the top layer.

EXAMPLE Time.com & www.macdonaldhotels.co.uk/

f)     Consider common visual stream

Visual stream means the eye tracking when users scanning a web page. Generally, it is from top to bottom and from left to right. This is the famous visual mode, “F” mode, defined by Jakob Nielsen. So the information should be arranged from top to bottom according to their importance.

(Jakob Nielsen’s finding)

2)    Design operation area.

The easy thing we can do for the controls is to enlarge them. We can enlarge the textbox, button, tabs and almost every things need touching. However, we can use some techniques to do these things in some case.

First is “page break”. We always use “1” “2” “3” “4” as a link button for users to click. When it comes to mobile devices, I think “last page” and “next page” are easy to touch. We can also design a gesture like swipe for flipping over.

EXAMPLE:

(The second is relatively larger for touching)

In mobile devices, we always put items in dropdown box. Or we find it is inconvenience to touch calendar control in the web page. Here, we can make full use of selector inside mobile devices.

3)    Guide users through visual design.

(reference: webstyleguide.com/wsg3/7-page-design/3-visual-design.html)

Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral.

Define functional regions of the page.

Group page elements that are related, so that you can see structure in the content.