We’ve got a great guest post today from Johanna Lynn, who’s going to show you how we set up the mobile version of the BlackBerry® Management Center site! – Ed.
“Rules can be broken, but not ignored” – a truism that most assuredly applies to mobile web design. In this post I’m going to use the BlackBerry Management Center site as an example of how we revisited the mobile user experience of one of our websites, and how (I hope) you can learn from our reorientation of BlackBerry Management Center.
First, some background: BlackBerry Management Center is a web-based mobile device management service for small businesses. It has a website for use by both an administrator and device (handheld) user. Our requirement was to design a mobile version for BlackBerry smartphone users, targeting WebKit browsers, specifically BlackBerry® 6+ OS browsers on handhelds. The following are the design heuristics and the decisions we made.
Use a Separate Mobile Theme
Make it Simpler
Limit the Number of Links
The rule of thumb is to limit links to 10 per page since too many links make it difficult to navigate and read content. We also placed links flushed left for a better experience by ensuring that the eye scans the page in two directions (top/down) only instead of four (top/down/left/right).
To avoid zooming in every time a user wants to click on something, we made all fonts two points bigger than the website version of BlackBerry Management Center. Trying to click on tiny, barely-visible links is a real pain, so we also added extra padding for our links to make the clickable area greater.
Limit Scrolling to One Direction
Most users find it annoying to have to scroll in multiple directions on a page when on a desktop, and it’s easy to accidentally scroll the wrong way (horizontally or vertically) when using a touchscreen or a trackpad. We eliminated this hassle by fitting the content so that the user is limited to scrolling vertically whether in portrait or landscape mode on the mobile device.
Don’t Use Pop-Ups or Open New Windows
The website uses modals to display more detail or to display confirmations to the user. Pop-ups and new windows interfere with the browsing experience, so we got rid of this completely on the mobile version. Instead, we give user feedback by providing confirmation text inline.
Minimize the Use of Images
The BlackBerry Management Center website has a very rich UI with graphics, which means more processing and rendering that could be taxing to the system. A quick test of the mobile version versus the website (with minimal images and no pop-ups) showed a 60% performance improvement. This is significant since mobile devices have smaller bandwidth on cellular networks. We decided to leave the BlackBerry logo and eliminated images that served no added purpose other than to look pretty.
Provide the Option of Visiting the Standard Site
We decided against this option because switching from mobile to the full site would limit the UI on the phone. Unlike most sites, the BlackBerry Management Center device user experience is a flow from one state to the next as the user enters information about their device. There is also no value gained by switching to the full site from the mobile version because it already covers a majority of the functionality.
Use a Separate Domain or Subdomain
We did not register a separate domain for the mobile version. Once a mobile client is detected through its user agent, it is served the mobile version within the same domain. As mentioned above, the mobile version has full user functionality and the user would not need to switch to the full site.
Conclusion and Lessons Learned
From the beginning, we should have designed for the mobile device in parallel with the standard website. If we had the mobile version in mind from the get-go, the user experience would be more seamless and less jarring. Testing was quite a challenge, despite focusing mainly on BlackBerry browsers 6 and above. Creating a flow diagram and click stream helped during the design process; prioritizing content and deciding on what is essential proved to be an important exercise as well. Finally, a clean, semantic markup, along with separation of our content and presentation with CSS provided a solid foundation for a usable mobile site. Once the framework was set, we were off to a great start.
Good luck to you on your next mobile web design project! Let us know how it goes.