This week we released some really cool and important updates to the CNET mobile experience. Since the recent deployment of our iPad app – we have been very eager to replace the existing iPhone product to insure a unified experience for our users.
Most folks by now are very familiar with the adaptive web. It is an industry buzz that promises to solve the issue of accessibility across the mobile spectrum. We all have limited resources to solve the issue of access for a what is becoming an avalanche of both platforms as well as the size form factors in each. Lets face it, it is not just iOS and Android.
The hope at the most basic level was to create a product framework that is truly device agnostic for content, yet device or platform aware for the user experience. Our users have a relationship with us through these screens of various shapes and sizes. They access us both directly, or indirectly through search and the social graph. Thus, creators of media or utility can not rely on having a product on a single platform. Even content shared from a native experience will always lead to a mobile enabled WAP environment since you can not define what folks on the receiving end will have to view what is being broadcast.
So while this article will specifically walk through the visual design and function of our iPhone app – the most exciting part is that with our new framework, users will have a tough time distinguishing between our native app and the mobile site. The path we have taken is devise navigational paradigms, consumption sequences and touch behaviors based on the size of the form factor rather then to focus specifically on platform specific products. This frees a small team up to think about the best ways to consume a product in a 4″ 6″ and 9″ environment. To determine the features and paths that make best use given the spacial limitations and then develop and optimize the experience for each regardless of whether it is done in HTML or a native environment.
The iPhone app is our 4″ form factor – Similar to the tablet experience, we simplify the experience into 2 simple but distinct views – Discovery with aggregation – Consume with utility or access to a deeper experience. Thus upon opening the app (or the m.cnet.com) users are greeted with lead content curated by editorial. Folks can swipe left and right to see more of what editorial believe are the key stories / products that users may want to see. Below sits a list of the latest news, product reviews, videos and photo galleries based on the day’s publishing. At the base of the page, users can click to load “more” date relevant content.
In the upper left, you can access the main navigational drawer which allows you to distill the latest by a given topic of interest or content type. Once you have chosen, the drawer will close and reload your list view panel with the latest from the given selection
In the example above, I chose to see the latest for Tablets. My discovery view is now populated with the latest tablet content within CNET. However, for users looking for something more specific – you can access the filter function in the upper right.
Doing this will allow you to distill the explore experience further by “type” – reviews, news, photos or video content. Keeping our options to aggregate within these varied drawers allows us to maximize the available space towards surfacing as much viewable content within the explore panel.
A typical news story delivers a fairly standard article type led with large headline, date and author attribution followed by a quick summary of what is found below in the story. Within the article itself resides any specific art, charts and graphics that the editor used in the desktop product to better visualize their narrative. Share options are found in the upper right for folks to distribute or broadcast items of interest to their friends and social graph. (Far more features are planned for additional functions moving forward)
For folks who are looking for content at a more granular level, search sits at the top of the main navigational drawer. Once a user taps the text input, they are prompted with the keyboard to either enter something specific – OR – tap the Scan an item function to access the devise camera. (note: this function is the main functional difference between the m.cnet and native experience.)
For folks searching on a specific – the results deliver the latest available per the given query. However, the results can be refined further by narrowing these down based on the core content available on CNET.
Should you tap the “Scan an item function”, this triggers the iOS camera which then allows you to focus on a product bar code. Hold still as the result will take you directly to the CNET review of the specific product. A pretty nifty feature when you are in the store and hoping to walk out with a given gadget!
Folks familiar with a CNET reviews know the depth of coverage available. Mobile users are greeted by a short but sweet overview of the product. What it is, What it costs followed by our signature Good, Bad & Bottom Line. Much of our catalog has a video review which you can watch on the spot, or can simply swipe left and right to see a gallery of images which illustrate things about the gadget you may be interested to see.
Should you want more then just a summary – The top of each product review provides access to a deep dive of more comprehensive information such as the full CNET technical & editorial review. Each opens a new “panel” that allows you to read more without leaving the main page with it’s access to the other silos of information
In addition to the full CNET review, tech specs and buying information – we also surface the crowd sourced information of what our many users are always willing to share both with ratings and reviews of their own. Thus, you are never far from what either the experts or your peers think of the gadgets that we all love.
For our photo galleries, we reverse out the the content panel for a theater display. This maximizes the contrast to allow the photos the best opportunity to stand out. To get a closer look, tap the photo to bring up to full screen in a landscape view.
So there you have it – version 1 of our next generation mobile experience. However as I mentioned above, our goal was to solve issues of accessibility more broadly. As a result, this first offering is light on features by design. By insuring our ability to distribute more broadly, we hope to have quicker and more incremental launches that will not be limited to a few users – but available to our entire audience regardless of what screen you choose to access it with.
I am an avid student and evangelist of user-centered design principles - I have created or overhauled some of the world's largest online Business & Technology properties. My focus has always been on building functional design systems that creatively solve business problems. Solutions that convey brand & messaging, but more importantly, are intuitive to maximize the possibilities of an interactive medium. 
