raffaella s.

isidori Exercise 5: Design Principles for Mobile Digital Studio I GRDS-720-OL SCAD, Spring 2012 Professor: Rebecca Hemstad April 18, 2012

Table of Contents

Description Emerging principles of Mobile Web design Analysis: demicreative.com Conclusions

 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 about the 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-abouta text version of this is here:http://www.slideshare.net/MadPowHxD/josh-clark-hxdpresentation Evaluate your chosen site based on what you have learned in these articles as well as the rst 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 Submissions 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.

 Emerging principles of Mobile Web design 1. Mobile interaction functions through touchscreens. Touchscreens require an awareness towards ngers, 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 ip 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 ngers obscure the screen. The bottom is where hovering 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-trafc 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 at screen bottom.

10. For Android, app navigation and controls should oat to the top. 11. On many mobile platforms, the browser has its own buttons and controls which can likewise create UI conicts 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. Specically, 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.

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 ngers in mind. Source: http://www.netmagazine.com/features/designing-touch

 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

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

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.

 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 exceptional user experience...