m2

Mobile input controls at a glance

Site Genre: Pattern Group m

magnify imageFigure M2.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 Figure M2.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

Comment now | One Commments >>

Have an idea? Tip? Suggestion? Share it!
  • 23339

    […] Sites5 Optimized Mobile Sites Posted in mobile SHARE THIS Twitter Facebook Delicious StumbleUpon E-mail « Canadian Mobile Network Operator WIND Mobile and TRANSFERTO Announce Launch of CanadasFirst SMS Based International Credit Transfer Service No Comments YetLeave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name *Email *WebsiteCommentYou may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> […]

    Posted by 8 Mobile Input Sites

    June 6th, 2011 | UNM

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.