Loading ...
Jack Zheng
Technology & Engineering
Mobile and Web Lecture Notes
49
0
Try Now
Log In
Pricing
Mobile Web Design General Principles and Best Practices IT 4213 Mobile Web Development Dr. Jack Zheng Spring 2021 Overview Two key differences of mobile web use are the small screen and touch-oriented operations. This lecture notes discuss some general design principles and best practices based on these two key differences. 1. Design for small (multi) screens 2. Design for touch UI 2 Small Screens • The DeviceAtlas reported in 2019 that 5.5-inch and 4.7-inch screen sizes most popular – https://deviceatlas.com/blog/viewport-resolution-diagonal-screen-size-and- dpi-most-popular-smartphones • statcounter reports the dominant resolution is about 400x700 – https://gs.statcounter.com/screen-resolution-stats/mobile/united-states-of- america/#yearly-2019-2019-bar 3 Design for Small Screens • The grand general principle of small screens is to keep the page short – Most mobile websites are viewed in portrait mode with narrow width. Stretching a normal multi column webpage will make the page extra long. Long stretching pages are more likely to get user lost and difficult to navigate. • Major issues (see https://www.viget.com/articles/do-responsive-sites- have-to-be-so-tall-on-mobile/) – Scrolling quickly becomes sluggish and boring – Navigation can be unfriendly – Hindrance for the footer elements • Some general design practices (details on following slides) – Content/feature prioritization: identify main content and give more screen area to the main content. – Extra on demand: more content with additional actions – Layout adjustment: change how content is arranged and grouped – More at https://www.sitepoint.com/6-ways-to-improve-long-scroll-mobile- websites/ 4 Content Prioritization • Content prioritization is a process to assess and determine the importance of content, and in turn determine how they will be displayed on the page. • Generally – The most important content and features need to be on the first screen or fixed (docked) on screen. – Non-major content needs to be minimized, shortened, or completely off screen (or activated by command). • Common examples of non-major content (also depending on situations) – Informational or presentational: hero image/video/carousel, greetings, background, date/time, weather, etc. – Supporting (including those usually in a fat footer): menus, social actions, quick links, related/recommendation, contact info, footer – Promotional: ads, sponsors, etc. • Other best practices: – Remove background image; use smaller images. – Hide navigations like menu, footer texts – Use shorter titles Example Menu is minimized. Ads are gone (or moved to background in the latest Yahoo) Headline image is shrunk. Carousal is shortened Trending is rearranged. Greeting is removed. Extra-on-Demand • Content prioritization commonly works together with Extra-on-Demand, which is a general information seeking practice that leads users to additional content only upon explicit request. • First some sign or limited information is shown. It can be – An icon – Beginning part of the text – A few summary words – First a few items in a list – First part/page of the content • Then, some additional actions/gestures – Simple tap (on a button or icon) – Horizontal swipe: horizontal scroll is much easier with finger than mouse. – Edge swipe • Last, more content will be reached – In a second screen – In a tab of the same page – In-line expansion of a page section – Items listed horizontally off-screen • Be responsive and adaptive: extras can be hidden on smaller screens only, but revealed in larger screens 7 Extra-on-Demand Examples • Use an icon or an edge swipe gesture for menu or commands – see module 6 as well • Horizontal swipe (scroll) for carousal items or wide tables – see module 6, 7, 9 • Use Accordions • Bing more in-line expand • Google horizontal scroll 8 Layout Adjustment • Adjust the layout to content to be suitable for vertical narrower screens. – Including page layout and local layout • Example – https://www.viget.c om/articles/do- responsive-sites- have-to-be-so-tall- on-mobile/ • More layout patterns will be covered in module 5 and module 7 9 Instead of simply rearranging items vertically, the image and texts are put side by side to save space. Touch Oriented UI • Understand the difference of touch-oriented input. Some are weaknesses, some are advantages, and some are, just different. • Major differences – Finger touches are generally less precise and less accurate – Direct input, generally lack of external input devices like mouse and keyboard • No hover, no right-click, no scrolling wheel • No keyboard shortcut – Easy to use gestures, direct action, smoother movement • Touch UI does offer opportunities to design better interaction methods and enable additional functionalities than traditional UI. • Finger’s advantages vs. mouse – Accuracy: less accurate on pointing/tapping, but more accurate in movement (moving, dragging, drawing, etc.) – Multi-point input – Flexibility: gestures are richer and more advanced – Direct action: easy to directly tap on a target; horizontal scroll is easy • Use of soft (on-screen) keyboard on mobile devices – Allows various keyboard types based on contexts: alphabet, number, special characters, etc. 10 Review module 2 on this. Mouse vs. Fingers as Input Device Mouse Fingers Precision High Low Number of points specified 1 usually 1 2–3 with multi-touch Number of controls 3: left/right button, scroll wheel 1 Homing time? Yes No Signal states Hover, mouse-down, mouse-up Finger-down, finger-up Accelerated movements Yes No Suitable for use with big desktop monitors (30-inch or more) Yes, because of acceleration No: arm fatigue Visible pointer/cursor Yes No Obscures view of screen No, thus allowing for continuous visual feedback Yes Suitable for mobile No Yes: nothing extra to carry around Ease of learning Fairly easy Virtually no learning time Direct engagement with screen and "fun" to use No: an indirect pointing device Yes Accessibility support Yes No 11 https://www.nngroup.com/articles/mouse-vs-fingers-input-device/ Design for Touch-Friendly UI • Grand principle – Avoid touch weaknesses and maximize its advantages • Best practices (details in the slides followed) – Aware of hot touch area – positioning of common commands and actions – Set the right touch target style and size – Provide interaction feedback – Ease user input/typing – Take advantage of touch gestures (NOT covered in this class; gestures represent the future UI opportunities - http://www.lukew.com/touch/) 12 Hot Touch Area • Rule of the thumb: thumb (one or two) oriented operation is common – The bottom of the device is the easy area for thumb operations https://alistapart.com/article/how-we- hold-our-gadgets – Put most often used actions and commands at the bottom, such as navigation menu, tool bar, action button, etc. http://www.lukew.com/ff/entry.asp?1649 (more details in module 6). 13 Image from http://www.uxmatters.c om/mt/archives/2013/0 2/how-do-users-really- hold-mobile- devices.php Touch Target Style • Use regular shaped areas (square, rectangle, circle, etc.) instead of textual links – Tap the whole area not just the text/link – Icons/Boxes/Buttons – Yes – Stacked/list of links – No • Give clear visual clues about touchable target – Use button styles or explicit action terms so users know what to expect. See an example problem here https://baymard.com/blog/mobile-product-list-hit- areas – Also use visual cues to show touch states (touched, not been yet touched, disabled, etc.) • Use consistent style • Examples: next slide • CSS tip:display links (URL, “a” tag) as block or inline-block so the whole area can be tapped. 14 Image (screenshot) from https://www.youtube.com/watch?v=V9hkxQx8t-M Tap Area Examples • More examples – https://baymard.com/blog/mobile-product-list-hit-areas 15 Dealsea.com Anywhere in the rectangle area can be tapped for each item for more details. Apmex.com Only the title can be tapped for each item. There is no visual clue that the title can be tapped for more details. Touch Target Size • Sizes affect touch accuracy • Recommendation – https://www.lukew.com/ff/entry.asp?1085 Images from http://www.smashingmagazine.com/20 12/02/21/finger-friendly-design-ideal- mobile-touchscreen-target-sizes/ Feedback • Feedback is an import general user experience principle, and especially important for touch UIs as fingers are less accurate in hitting the target correctly. Clear visual feedback shows that a user is hitting the target accurately. • Key practices – Style changes after tapping or holding (in dragging actions). For example, change of background color, border, size, etc. – Or some physical indication like a vibration or sound. – No pop-up pages; instead, use in-page div (modal) for feedback 17 Hover/MouseOver Replacement • The difficulty on touch interface is the lack of preview (usually the hover action using mouse). • Common hover applications – Content preview – Tooltip or quick help – Dropdown menu – Expandable region (for additional information or operations) • Best practices – Use direct actions that gives command directly. For example, display a button for direct actions. – Use on-tap context menu or toolbars. – Replace with long press. – https://ux.stackexchange.com/questions/14257/re-thinking- hover-functionality-with-touchscreens-in-mind 18 Ease User Typing • Almost all mobile devices use soft (on-screen) keyboards. Soft keyboards have several difficulties – The keys are usually very small and too close to each other. – There is no physical feel or feedback – Users are often in motion when using a mobile device. • Best practices – Activate the most appropriate keyboard type based on contexts: alphabet, number, special characters, etc. – Use selection from a list instead of typing where possible (more details on designing forms will be covered in module 8) 19 Key Readings and Resources • Design for small screens – https://www.viget.com/articles/do-responsive-sites-have- to-be-so-tall-on-mobile/ – https://www.sitepoint.com/6-ways-to-improve-long-scroll- mobile-websites/ • Design for touch – https://alistapart.com/article/how-we-hold-our-gadgets – http://www.smashingmagazine.com/2012/02/21/finger- friendly-design-ideal-mobile-touchscreen-target-sizes/ – http://www.uxmatters.com/mt/archives/2013/03/common- misconceptions-about-touch.php – https://www.4ourthmobile.com/publications/designing- for-touch – http://fatfingertest.com 20
