In Praise Of Mobile Browser Navigation Controls

Nokia E6 - WordPress Menu Nokia E6 - WordPress Drop Down Menu

My recent trial of a Nokia E6 reinforced something I’ve suspected for a long time. The current fad of removing navigation controls like arrow keys, D-pad, trackball or touchpad from touch screen 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 and buttons on the screen.  Maybe, but I run into some major frustrations trying to use touch screen browsers with mobile and desktop sites that aren’t touch aware. My pet peeves about pure touch browsing are:

  • Important functions that can only be accessed by tapping a tiny image  link with a too fat finger.
  • Radio buttons and check boxes that don’t toggle reliably when tapped.
  • Drop down menus that won’t drop down.
  • Problems with hidden links and buttons not appearing as they are supposed to when you mouse over them.
  • Accidently clicking links when scrolling.
  • It’s too hard to accurately select text to copy from a Web page.
  • Difficulties in positioning the cursor precisely for editing in a text box.
  • Problems scrolling through text that’s longer than the text box or text area it’s displayed in.

You could argue that it’s up to web publishers to fix their sites so that they work well in all browsers. But that’s not going to happen anytime soon. I believe it’s the job of device and browser designers to come up with touch interaction paradigms that work with today’s web sites.  Some like iOS do a fairly good job. But most do not.

On the other hand, both the Symbian Anna browser and Opera Mobile 11.1 on the E6 implement an on-screen mouse cursor that’s controlled by the arrow keys.  It’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.

Don’t believe me? Here’s a real world example that affects all WordPress blogs that have child categories and use the Twenty Ten or Twenty Eleven themes.   Twenty Eleven is the default theme in the current 2.3.1 version of WordPress,  so this issue potentially affects millions of sites.  Both themes let you assign categories to menu pads.  If a menu category has child categories they can be reached by dropping down the menu with a mouse-over.  That’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.  There’s an Twenty Eleven demo at twentyelevendemo.wordpress.com.  Open that page with a touch only browser and see if you can drop down the “A Parent Page” menu and select one of the child categories.  Unless you are using an iPhone, I bet you can’t. I had trouble with seven out of eight other mobile browsers that don’t have a pointing device. Here’s a table showing what happened when I tried:

Browser Behavior Usable?
iPhone 4 A single quick tap drops the menu, a second tap selects a menu pad Yes
N8 Browser (pre-Anna) Tapping drops the menu but opens the parent category, with no way to select a child category No
Opera Mobile 11.1 Symbian and Android Tapping drops the menu but opens the parent category, with no way to select a child category No
Android 2.2 Browser A long press drops the menu but also opens the browser context menu which must be dismissed before clicking  the child category Barely
FireFox Mobile (Android) Tapping drops the menu but opens the parent category, with no way to select a child category No
WebOS 1.4.5.1 Browser Tapping drops the menu but opens the parent category, with no way to select a child category No
Samsung bada 1.0 Browser Tapping drops the menu but opens the parent category, with no way to select a child category No

The Android, WebOS, N8 and bada browsers I tested are rather old but they are the latest that run on my phones.  I’m hoping the Anna browser which is due out this month will be more usable on the N8.

3 thoughts on “In Praise Of Mobile Browser Navigation Controls

  1. I do not agree with the premise of this summation. Touchscreen phones are much easier to use, more intuitive, and faster. I’d choose a touchscreen-only device any day over one with hardware keys.

  2. I think Dennis Bournique needs to appreciate the fact that there is not much inherently defective in the touchscreen mode. I shall show that it is actually superior over physical QWERTY, and the current trend even proves it.

    He took the time to enumerate what he does not like with the touchscreen – but most of those points hold NO water!

    I shall address some of these.
    ///
    ‘Tiny image links with too fat fingers’,
    ‘Radio buttons that do not toggle reliably’
    ///
    – the problem is NOT with the touchscreen as an input system. The problem is with the dumb software designers that do not try and actually USE the products they design BEFORE pushing them out.

    There are SEVERAL touchscreen apps that have no such issues. Dennis may want to try out the more recent incarnations of Uc Mobile (in ‘ADAPTIVE’ model) – as a sterling example.

    ///
    ‘Accidentally clicking links when scrolling’
    ///
    This is – still-merely a matter of choices made in the software design process. Nothing stops you in adopting the Uc Mobile approach of – click the first time to gain focus; then click again to select. It works.

    ///
    ‘too hard to accurately select text to copy from a webpage.
    ///

    Really? Has Dennis tried out the new Opera Mini 6.1? Uc Mobile 8? On ‘touch’. Copying is a breeze here.

    There is NOTHING wrong with touch input. It is inherently superior to physical QWERTY. What software designers need to do is to retrofit their apps to make wise use of the wider screen ‘real-estate’ available to them. Anybody writing an app for touchscreen should take a look at the best touchscreen apps around, and borrow LEAVES from their software design methodology.

    It is no accident that the fastest entry on a phone – by ANY human – was on a touchscreen device using ‘Swype’. Let ANY ‘Physical QWERTY’ protagonists equal THAT RECORD, and I will do a VOLTE FACE!

    I have been using a touchscreen device for a while. Despite my minor frustration with ’Swype’ (due its obtuse habit of automatically adding words to the dictionary – without options- [they want to emulate Dasur SlideIt]), I will ALWAYS pick ‘touch’ over ‘physical’

    To help Dennis, I could say that touchscreens consume relatively more battery power. I will agree to that. His other points, while valid, are NOT attributable to ‘touch’ as a system!

    To re-emphasize, the problem is not with ‘touchscreen’ as an input system – per se. THE PROBLEM IS WITH THE SOFTWARE DESIGN(ER)s.

    Why do I prefer ‘touch’ – over ‘physical’?
    //
    Input is faster (with an input system like ‘Swype’). The inaccuracy is not the touch’s problem. It IS the software’s.
    Less risk of Repetitive Motion Syndrope
    Less Weight / Less Fat
    More Screen Real Estate
    Drag$Drop / Swiping functionalities – allow you do more – faster.
    Not much to go wrong (hardware keypads have moving parts)
    ///

    There!

  3. Great points, Dennis.

    Permit me to add one use-case scenario that ALL touch-based browsers that I have used – including the iOS browser – fail.

    In the Widgets menu in WordPress, try dragging a widget from one box to a sidebar. I never got it to work even on the iPad running the latest version of iOS.

Comments are closed.