mobile design principles

8/12/2019 Mobile Design Principles

1/10

raffaella s. isidori

Exercise 5:

Design Principles for Mobile

Digital Studio I

GRDS-720-OL

SCAD, Spring 2012

Professor: Rebecca HemstadApril 18, 2012


2/10

Table of Contents

Description

Emerging principles of

Mobile Web design

Analysis: demicreative.com

Conclusions


3/10

Description

Learning Outcome: After completing this exercise, students will be able to: Evaluate

responsive Web site design in terms of success or failure.

Instructions: Choose a responsive web site.

Read the following:

Note: The principles you read in these articles are applicable to both designing native

mobile apps and responsive web sites (web apps) - i.e.: rule of thumb. Please note that

when Josh Clark discusses the idea that there is no mobile web, he is talking aboutthe common myth you need to create two completely separate web sites, one for

desktop and one for mobile devices instead of just one responsive web site.

http://www.netmagazine.com/features/designing-touch

http://abduzeedo.com/mobile-web-design

http://sixrevisions.com/user-interface/a-quick-look-at-mobile-web-designs/

View the following presentation by Josh Clark:

http://metteg.dk/post/3599634436/an-interesting-presentation-from-josh-clark-abou-ta

text version of this is here:http://www.slideshare.net/MadPowHxD/josh-clark-hxd-

presentation

Evaluate your chosen site based on what you have learned in these articles as well as

the first two chapters from Mobile First.

Does it succeed or fail? Use images from the sites as appropriate to illustrate your

discussion.

Present your evaluation as PDF. Submit this exercise to the Exercise 5 link in the Sub-

missions before 11:59 p.m. U.S. EST/EDT on the last day of this unit and post in the

Discussion forum. If you have any questions, please do not hesitate to e-mail me.

1


4/10

Emerging principles of Mobile Web design

1. Mobile interaction functions through touchscreens. Touchscreens require an aware-

ness towards fingers, thumbs and manual gestures;

2. Fingers and thumbs turn desktop conventions on their head;

3. Primary tap targets should be placed in the thumb-thumping hot zones;

4. Thats an important reason why tool bars and navigation typically land at the

bottom edge of phone interfaces the opposite of what were accustomed to for

traditional screen interfaces.

5. The screen-bottom bias of the thumb is more important than left vs right. Turns

out most of us easily flip between left and right hands when we use our phones.

6. Frequently used buttons should occupy the bottom of the screen for easy tapping,

while other controls should be nudged out of harms way. Its a convention in

iOS, for example, to place Edit buttons at the top right, within easy view but just

enough out of reach to make accidental changes less likely.

7. Sinking primary controls to screen bottom isnt just a matter of thumb comfort,

but also the simple fact that fingers obscure the screen. The bottom is where hov-

ering hands are least likely to cover content. To keep content in clear view, position

it above your apps controls.

8. On an Android device, adding controls at screen bottom means stacking tool bars

on top of each other; alas, tap errors are especially common for stacked controls at

the bottom of the screen. In the high-traffic zone where the thumb tends to hover

and obscure the view, button collisions are inevitable.

9. Stacking controls in a touch interface should always be avoided, especially atscreen bottom.

2


5/10

10.For Android, app navigation and controls should float to the top.

11.On many mobile platforms, the browser has its own buttons and controls which

can likewise create UI conflicts for web navigation. That means you should avoid

pinning navigation to screen bottom for websites, since that would stack the

websites tool bar on top of the browsers.

12.Unlike Android, the solution for web apps isnt moving web navigation to the top,

but instead to the bottom of the entire page.

13.The rule of thumb still applies to the iPad, except that the thumb zone is different

because we hold it differently.

14.Unlike phones, primary controls and buttons should typically go at the top of iPad

apps. Specifically, they should stake out the top corners, where thumbs typically

hover when you hold the iPad.

15.Avoid placing controls at the top centre

16.Because that control reveals a tall list of headlines, its appropriate to place those

controls at screen bottom; placing them at the top would mean that your hand

would cover the list when you touched the controls.


6/10

17.So is it top or bottom? Heres the difference:

The iPads top corners are ideal for navigation buttons and one-tap tools for

actions like sharing, favouriting, or deleting.

The bottom of iPad apps is best for controls that browse or preview content in

the canvas above.

18. Tap targets should be a minimum of 44 points, or about 1/4 or 7mm. For the

web, a 44px minimum also works well

19.As long as a tap target is at least 44 points high or wide, you can squeeze the

other dimension as small as 30 points if you really must. That means: the practical

minimum size for any tap target is 44 x 30.

20.White space: The closer you squeeze buttons together, the larger those buttons

should be.

21.The success of small-screen interfaces relies on big elements, chunky buttons, and

airy spacing. Design with fat fingers in mind.

Source: http://www.netmagazine.com/features/designing-touch

4


7/10

Analysis: demicreative.com

This is the website of Demi Creative, Llc, a creative web design studio from Springfield,

Missouri. The site is responsive and the studios claim is that of providing exceptional

user experience.

Browser view


8/10

The sites width adapts to the windows resizing and the round elements (big buttons

that serve as link to some of the studios projects) align differently according to the

width.

The iPhone navigation


9/10

Navigation is located on the top and is very minimal. It follows the design of the

browsers version but on the iPhone is only partially functional, as the buttons are a bit

too small. It is likely, in fact, to end up touching the round button of the work links

below and migrate, this way, to a new page.

The links are anchors to lower parts of the iperpage, which is a good way to avoid

extra code and extra loading time.

The iPad navigation

The iPad version is basically a larger version of the iPhones one.

7


10/10

Conclusions

The basic motion and the navigation concept in this website remain the same in both

the mobile and the desktop versions.

The site is clean and looks nice in all environments, though on the desktop the big

round buttons are a bit clumsy looking.

On the other end the primary navigation (probably trying to remain elegant) is too

small, and, especially on the iPhone and (possibly due to anchor limitations - will ask

for Professors Hemstad technical feedback on it) doesnt always work correctly, giving

the sensation that one touches but nothing happens.

Overall the site passes the test, it is clean, pretty to look at and works pretty well on

different devices (I do not have an android-based device to test it with, unfortunately,

but I presume that all aspects would remain the same).

Yet something about it leaves me a bit puzzled, possibly the claim of delivering ex-

ceptional user experience...

mobile design principles

Documents