m2

Mobile input controls at a glance

Site Genre: Pattern Group m

magnify imageFigureM2.1 Google’s mobile Web site keeps the navigation simple, offering only a text box and a radio button panel for the relevant features of the desktop site. This makes the site usable on a mobile phone with limited input capabilities.

Background

Although most Web pages can be rendered on mobile Web browsers, this does not mean that they’re easy to navigate. Mobile devices have limited input capabilities, making it hard to do things like entering text and scrolling. This pattern looks at how to design your Web pages to improve mobile navigation. Together with MOBILE SCREEN SIZING (M1) and LOCATION-BASED SERVICES (M3), this pattern forms the basis for mobile applications. This pattern is also useful for SITE ACCESSIBILITY (B9).

Close

PROBLEM

Web page designs need to take into account the often limited input capabilities of mobile devices.

buy the book to find out more

SOLUTION

magnify image FigureM2.5 A style sheet can reconfigure your site’s inputs for your customers’ mobile devices.

Mobile devices have limited input capabilities, making Web page navigation a challenge. To make mobile navigation easier, minimize the number of links and buttons on your Web pages and make the position convenient, minimize text entry, avoid pick lists and image maps, and limit rich interactions from AJAX technologies to those that can be easily used on small devices.

Other Patterns to Consider

MOBILE SCREEN SIZING (M1) and LOCATION-BASED SERVICES (M3) can be used in conjunction with mobile navigation to create effective mobile applications. Use STYLE SHEETS (D11) to rearrange navigation elements and content, helping to ensure that the most important navigation and content are ABOVE THE FOLD (I2), and that the positions of links and buttons are convenient. Minimize text entry with PERSISTENT CUSTOMER SESSIONS (H5) when your customers use the SIGN-IN/NEW ACCOUNT (H2) form, with PREDICTIVE INPUT (H11), and with techniques that reuse previously entered information such as QUICK ADDRESS SELECTION (F4) and QUICK SHIPPING METHOD SELECTION (F5).

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.