Mobile User Experience of the National Broadband Map

By: Ivan Djordjevic

A few days ago, the National Telecommunications and Information Administration (NTIA) along with Federal Communication Commission (FCC) released the mobile, optimized version of the National Broadband Map website. Computech led the development and completed all phases, from design, information architecture and user experience, to data integration, geospatial and back-end development.

Early in the information architecture phase we all agreed to leverage the unique features of the mobile devices, such as geo location capabilities, touch screen, gesture input and interaction, as well as the lower connection speeds, transfer and data usage,  and different nature of the mobile user experience.  This meant that the effort would not only produce the mobile version of the website, but a completely new user experience.

Users on-the-go do not require all of the features of the desktop version of the website.  However, if they, would like to access all the pages found on the desktop version of the website, they are still able to do this through a link provided on every page.

In addition, mobile users typically do not spend the same amount of time reading long description pages.  The attention span of a mobile user is even smaller than that of a regular desktop user.

The ability to access desired information through the least number of interactions is essential.  More specifically, ease of navigation by utilizing touch and gesture device capabilities makes the whole experience pleasant and enjoyable.

Design and Information Architecture

In the spirit of transparency and open data, following the principles of information design, Computech designed the information architecture of the mobile site around the philosophy of distraction-free content delivery.  The main content of the site captures the primary focus of the user.  Our design hides every other feature on the page into sections via slides.

Consistency in branding and design assures user familiarity with the overall experience, as it follows already established information flow.  However. slight variations in the secondary element treatments allow a subtle distinction between the sites.

Our technical implementation includes the maximum usage of CSS-defined design styles, allowing the User Interface to include a low number of HTTP requests, leaving the connection for the data integration.

Focus on performance

Data power both the desktop and mobile versions of the site, streamed through the same APIs.  Backbone Framework of the website, written specifically to solve the unique nature of the collected broadband data, allowed us to reuse a fair amount of back-end and data integration modules.

All four levels of our caching mechanism proved essential in assuring high performance for both versions of the site.  Nature and frequency of the data collected, along with caching at the Database, Application Server and two levels at the Web server, make both sites up to 100 times faster than if we had developed them in the most conventional way.

Front-End and User Interface

The architecture of the MVC+ Framework, which we developed specifically for the National Broadband Map, gives us the control of every feature and every aspect of the site.  This holds true due to the fact that we power the site by a large number of small deployable unites or modules that we connect and interweave in many ways to achieve the desired effect.  Further, flexibility and vast number of combinations allows us to insert any new modules in any place and at any level.  This is the main driving power to a lean development process, one that was crucial in delivering the project in time and to the customer’s satisfaction.

With such a framework in place, expanding the front-end with additional modules to drive the mobile user experience took much less time than anticipated.  The decision to add an additional framework to back the front-end side of the website played an important role in delivering the product on time.

While we strongly considered limiting the utilization of the trendy responsive design techniques, given the limited focus of the device support (iOS and Android powered devices) we needed to target, and to assure lowest amount of front-end code that needs to download via mobile connections, we decided to separate the desktop and mobile version of the site.

Liquid layout leveled the slight differences in the viewport sizes of the screens.  It turned out to be a good decision as we have saved enough kilobytes to speed up the overall performance of the site.

JQuery Mobile was a clear choice as the web framework for development of the mobile site.   JQuery mobile performed with excellence in complementing the current framework, taking the lower level tasks of front-end development, leaving us to focus more on the integration of the modules.

JQuery Mobile also allowed us to add swipe gesture to the pages, which were required in order for the user to easily flow from one screen to another.  We left pages with text longer than the width/height with the usual up/down scroll, as this would be the most natural assumption of the mobile user.

Tablet

Computech built the desktop version of the site to nearly full compliance, and with slight upgrades to some of the UI elements, we were able to deliver the mobile version quickly.  Our initial strategy when building the desktop version included considerations that ensured tablet devices would have no major issues with most of the pages.  Map pages also worked well, even though they do not use the bundled technology, but a custom base map and desktop version of the mapping technology.

The Future is Mobile, powered by Computech.

Experience our latest mobile solution.
Visit nbm.gov on your iOS or Android powered devices.


Posted on Friday, January 27th, 2012 at 11:03 am and is filed under Broadband Map, FCC.

By: Ivan Djordjevic

« — »