{"id":10950,"date":"2011-08-03T15:16:43","date_gmt":"2011-08-03T23:16:43","guid":{"rendered":"http:\/\/blog.wapreview.com\/?p=10950"},"modified":"2011-08-10T07:15:50","modified_gmt":"2011-08-10T15:15:50","slug":"in-praise-of-mobile-browser-navigation-controls","status":"publish","type":"post","link":"https:\/\/wapreview.com\/10950\/","title":{"rendered":"In Praise Of Mobile Browser Navigation Controls"},"content":{"rendered":"<p><a href=\"https:\/\/wapreview.com\/10950\/scr000008-4\/\" rel=\"attachment wp-att-10957\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-10957\" title=\"Nokia E6 - WordPress Menu\" src=\"https:\/\/wapreview.com\/wp-content\/uploads\/2011\/08\/Scr000008-240x180.jpg\" alt=\"Nokia E6 - WordPress Menu\" width=\"240\" height=\"180\" \/><\/a>\u00a0<a href=\"https:\/\/wapreview.com\/10950\/scr000009-3\/\" rel=\"attachment wp-att-10956\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-10956\" title=\"Nokia E6 - WordPress Drop Down Menu\" src=\"https:\/\/wapreview.com\/wp-content\/uploads\/2011\/08\/Scr000009-240x180.jpg\" alt=\"Nokia E6 - WordPress Drop Down Menu\" width=\"240\" height=\"180\" \/><\/a><\/p>\n<p>My recent trial of a <a href=\"https:\/\/wapreview.com\/tag\/nokia-e6\/\">Nokia E6<\/a> reinforced something I&#8217;ve suspected for a long time. <strong>The current fad of removing navigation controls like arrow keys, D-pad, trackball or touchpad from\u00a0touch\u00a0screen phones is bad for usability.<\/strong> Designers seem have fallen in love with the idea of a smooth, all-screen front face on their devices, which means removing as many buttons as possible.<\/p>\n<p>But, you may say, navigation controls are redundant on a touch device as you can just tap links and buttons on the screen. \u00a0Maybe, but\u00a0I run into some major frustrations trying to use touch screen browsers with mobile and desktop sites that aren&#8217;t touch aware. My pet\u00a0peeves\u00a0about pure touch browsing are:<\/p>\n<ul>\n<li>Important functions that can only be accessed by tapping a tiny image \u00a0link with a too fat finger.<\/li>\n<li>Radio buttons and check boxes that don&#8217;t toggle reliably when tapped.<\/li>\n<li>Drop down menus that won&#8217;t drop down.<\/li>\n<li>Problems with hidden links and buttons not appearing as they are supposed to when you mouse over them.<\/li>\n<li>Accidently clicking links when scrolling.<\/li>\n<li>It&#8217;s too hard to accurately select text to copy from a Web page.<\/li>\n<li>Difficulties in positioning the cursor\u00a0precisely for editing in a text box.<\/li>\n<li>Problems scrolling through text that&#8217;s longer than the text box or text area it&#8217;s displayed in.<\/li>\n<\/ul>\n<p>You could argue that it&#8217;s up to web publishers to fix their sites so that they work well in all browsers. But that&#8217;s not going to happen anytime soon. I believe it&#8217;s the job of device and browser designers to come up with touch interaction paradigms that work with today&#8217;s web sites. \u00a0Some like iOS do a fairly good job. But most do not.<\/p>\n<p>On the other hand, both the Symbian Anna browser and Opera Mobile 11.1 on the E6 implement an on-screen mouse cursor that&#8217;s\u00a0controlled\u00a0by the arrow keys. \u00a0It&#8217;s a simple, intuitive solution that works far better than any touch only alternative, particularly on sites that use mouse-overs to un-hide navigational elements.<\/p>\n<p>Don&#8217;t believe me? Here&#8217;s a real world example that affects all WordPress blogs that have child categories and use the Twenty Ten or Twenty Eleven themes. \u00a0\u00a0Twenty Eleven is\u00a0the default theme in the current 2.3.1 version of WordPress, \u00a0so this issue potentially affects millions of sites. \u00a0Both themes let you assign categories to menu pads. \u00a0If a menu category has child categories they can be reached by dropping down the menu with a mouse-over. \u00a0That&#8217;s easy and intuitive with the E6, just position the mouse cursor over the menu using the arrow keys and the menu drops down, then position the cursor over the desired child menu pad and click. \u00a0There&#8217;s an Twenty Eleven demo at\u00a0<a href=\"http:\/\/twentyelevendemo.wordpress.com\/\">twentyelevendemo.wordpress.com<\/a>. \u00a0Open that page with a touch only browser and see if you can drop down the &#8220;A Parent Page&#8221; menu and select one of the child categories. \u00a0Unless you are using an iPhone, I bet you can&#8217;t.\u00a0I had trouble with seven out of eight other mobile browsers that don&#8217;t have a pointing device. Here&#8217;s a table showing what happened when I tried:<\/p>\n<table border=\"0\">\n<tbody>\n<tr>\n<td>Browser<\/td>\n<td>Behavior<\/td>\n<td>Usable?<\/td>\n<\/tr>\n<tr>\n<td>iPhone 4<\/td>\n<td>A single quick tap drops the menu, a second tap selects a menu pad<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>N8 Browser (pre-Anna)<\/td>\n<td>Tapping drops the menu but opens the parent\u00a0category, with no way to select a child category<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Opera Mobile 11.1 Symbian and Android<\/td>\n<td>Tapping drops the menu but opens the parent category, with no way to select a child category<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Android 2.2 Browser<\/td>\n<td>A long press drops the menu but also opens the browser context menu which must be dismissed before clicking \u00a0the child category<\/td>\n<td>Barely<\/td>\n<\/tr>\n<tr>\n<td>FireFox Mobile (Android)<\/td>\n<td>Tapping drops the menu but opens the parent\u00a0category, with no way to select a child category<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>WebOS 1.4.5.1 Browser<\/td>\n<td>Tapping drops the menu but opens the parent\u00a0category, with no way to select a child category<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Samsung bada 1.0 Browser<\/td>\n<td>Tapping drops the menu but opens the parent\u00a0category, with no way to select a child category<\/td>\n<td>No<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The Android, WebOS, N8 and bada browsers I tested are rather old but they are the latest that run on my phones. \u00a0I&#8217;m hoping the Anna browser which is due out this month will be more usable on the N8.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 My recent trial of a Nokia E6 reinforced something I&#8217;ve suspected for a long time. The current fad of removing navigation controls like arrow keys, D-pad, trackball or touchpad from\u00a0touch\u00a0screen phones is bad for usability. Designers seem have fallen in love with the idea of a smooth, all-screen front face on their devices, which means removing as many buttons as possible. But, you may say, navigation controls are redundant on a touch device as you can just tap links &hellip; <a href=\"https:\/\/wapreview.com\/10950\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":10957,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,39],"tags":[145,1234],"_links":{"self":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/10950"}],"collection":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/comments?post=10950"}],"version-history":[{"count":19,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/10950\/revisions"}],"predecessor-version":[{"id":11072,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/10950\/revisions\/11072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media\/10957"}],"wp:attachment":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media?parent=10950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/categories?post=10950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/tags?post=10950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}