I Know By Experience » PortfolioI Know By Experience

Positive Trends in User Experience: Panel Navigation

Jonathan Firestone — Mon, 01 Nov 2010 16:46:47 +0000

I refer to Mega dropdowns as “Panel Navigation”. It’s much more descriptive. But I do think of it as a huge opportunity to inform the user about the content that lies ahead. You might know this UX pattern by another name. In March of 2009, Jacob Nielson summarized mega dropdowns as “Big, two-dimensional drop-down panels [that are] group[ing] navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.”

Reuters navigation panel example: Opinion category panel

Reuters.com’s implementation of them (as you can see to the right) is probably one of the best and most widely used examples of how you would make use of this type of panel navigation. In this instance, we’re looking at a story within the Reuters site. Imagine that the user has clicked on a link posted to twitter to read an opinion article. The user examines the content seen here, and decides they’d like to see what else catches their fancy. The user then rolls over the navigation and instead of making the user guess as to what might be interesting to them based on simple titles, or more content categories (or topics), the user is presented with something that is entirely different and a hundred times more usable and appealing. A navigation panel that incorporates content into the mix is much more engaging and informative to the user. In this example, the navigation panel is divided into four columns. In the first a few of the biggest active stories within the category of Analysis & Opinion. It appears to be a short-list of stories dedicated to summaries which fall under the Analysis portion of the content. Columns dedicated to “Breakingviews” and “Opinion” feature friendly faces and names of columnists along with the title of their latest column. The column to the far right contains a list of various columns and varied sections of interest within this category set.

Typical Dropdown Navigation Example (From the Washington Post)

This kind of navigation improvement is much more usable than something like what you see to the left. The questions I have to ask are “Is this informative?”, “Does the user understand what will happen next?” I think anything you can do to help the user remain engaged is a good idea, and as you can see this news organization has a dropdown for navigation, but it’s pretty typical. Regardless of how good the information architecture is, the risk you are taking is that the user won’t want to look much farther for items of interest, nor will they have an interest in subsections which might have a lot more to offer the user than just a simple topic. Immerse the user in your world. You’ve got nothing to lose, and technology like this, once you have a syntax to follow can be very easy to implement and maintain. Regardless of what you do, you should test it against your users, just as Mr. Nielsen recommends.

Project: PeopleIQ

Jonathan Firestone — Mon, 01 Mar 2010 04:20:20 +0000

Objective

Build a Software as a Service (SaaS) Rich Internet Application (RIA). A client brought us an opportunity to help realize a product that would ultimately improve efficiency for employee review scenarios. The intent was to produce a Flash/Flex based interface that would allow employees to be graded against each other on a bell curve using 8-15 traits or “Dimensions”, such as accuracy, customer service, communications with peers, etc. All employees are asked to review 5-6 others from their same department or departments they interrelate with.

Overall Project Tasks

This project covered Web and branding strategy, product development, design, application programming and SaaS establishment.

Duration

First phase of the project lasted three weeks from start to finish.

Screenshots: Public Facing Site (PeopleIQ 2.0)

(IA Work JBF, Design/Improvements by Browsermedia, LLC 2004/2005)

Information Architecture

Jonathan Firestone — Mon, 01 Mar 2010 03:08:38 +0000

Task Summary: Information Architecture (IA) Development

When designing the structure of any Web site, application or service, the categorization of information is pretty important. My job involves the categorization of information into a coherent structure, and if it’s done well or the opportunity presents itself, you can develop something that most people can understand quickly. The ultimate goal is for users to understand this inherently. The information we present is usually hierarchical, but you can have other structures as well. I’ve organized a few information architecture projects by project:

Project: SAI Global Corporate Web Site (2009)

Task Summary: IA Diagramming, Format: OmniGraffle

This project was particularly complex with a focus on parsing together taxonomies in use across the world, two distinct business divisions (Assurance and Compliance) with a third (Publishing) that supported the other two and had their own business to run, (and three more not so distinct sub-product lines that could easily be business divisions themselves.) The bottom line, ensure a Web site that currently looks and acts like it’s organized by department and country and turn it into a Johnson & Johnson or General Electric class of site. The new SAIGLOBAL.COM has to route people to the services they need and having a solid Web strategy combined with solid support from the executive team to drive implementation helped quite a bit. This was a huge success for our Global CIO, Brett Lenthall (who I answered to directly) and the worldwide management team. IA Diagram Examples:

Task Summary: Taxonomy Development, Format: Microsoft Excel

As a part of developing an Information Architecture for SAI Global, we had to look at the Taxonomy being used across a variety of business divisions, regions of the world, specific countries and identify the original source of the Taxonomy reference. This is just an example of what we ran across when looking at the word training and the meaning across various sources of content within the organization.

Project: PeopleIQ Promotional Web Site (1.0)

Task Summary: IA Diagramming, Format: Microsoft Visio

In producing this light Information Architecture, we didn’t go too deep, not in our thoughts about the product nor in the design. We felt something simple, to the point would be useful. It’s a brochure site after all, and the real meat is in the application. The results were very successful.

Workflows

Jonathan Firestone — Sun, 28 Feb 2010 04:19:16 +0000

Task Summary:

Establish a visual workflow showing a process. My focus tends to be on operational, task related or user focused workflows.

Project: PBS: The Business Channel Learning Management System

Format: OmniGraffle

I was brought aboard PBS The Business Channel specifically to architect a method for bringing the video training content we were delivering via satellite straight to the desktop using video streaming. By doing this we would be saving millions of dollars in satellite airtime and increasing our reach to the marketplace for corporate training. Part of the concept of this product was not just delivering video to the desktop, but providing testing with remediation built in, and a 360-degree service approach to the effort. This meant workflows had to be developed for everyone participating in the service:

Instructional Designers – Responsible for course design and require knowledge of where courses are not effective, so they may be improved.
Marketers – Responsible for establishing up to date copy and encouraging the sales of TBC courses.
Course Participants – Require the ability to start and stop a course, where the course can be continued where they left off.
Course Reviewers for Certification – They need validation that people taking a course will receive continuing education credits or certification.
HR Departments – Requiring confirmation that the participant actually took the course.

Two types of processes were developed for this, a simple process overview and a detailed process.

Operational Process Overview

Process Detail (Operational): Copy Content into WYSIWYG Editor

Task Summary:

Iterate critical functional task flows for a service or application. This can be an important process tool for everyone to understand and improve on the underlying process for any task. This is usually presented as a portion of a larger site-mapped workflow, or an outline or task analysis grid of the process in question.

Functional Task Flow Development

Project: PeopleIQ

Task Flow Development Example:

Functional Specifications

Jonathan Firestone — Sun, 28 Feb 2010 03:28:29 +0000

Task Summary:

Develop a list of functional specifications that are provided to the client and developer for approval, development and sign-off.

Project: PeopleIQ

Functional Specification Example

Annotated Wireframes

Jonathan Firestone — Sat, 27 Feb 2010 04:53:55 +0000

Task Summary:

Produce wireframes that were clean and easy to understand so even a developer not that familiar with the chosen technology could build the application quickly to specifications.

Project: PeopleIQ

Format: OmniGraffle & Microsoft Word

This application (PeopleIQ) is a Rich Internet Application based on Flash 2004 MX, with Java and a mySQL back-end. We went for Flash 2004MX in preparation for an eventual move to Adobe Flex after initial product launch. We’d include a Word based companion document, showing numbers in the Wireframe align with functionality notes help further explain the need for features and behaviors. This wireframe includes references to data elements that were found in a separate schema and reference list so data remains trackable in a convenient check-off list.

Project: Verizon Developer Center for Mobile Web

Format: Axure RP Pro, HTML, CSV

Axure is a wonderful tool that allows you to produce wireframes that you can build simulated functionality into. From the build you can generate screenshots, object tables containing footnotes on all actions as well as plenty of other usable documentation, in several formats. One of the best aspects of this an export of HTML wireframes you can use to actually experience the results. You can make the wireframes as low or high fidelity as you care to manage. This project was perfect for Axure — it called for a new website, community forum and social media campaign built around the concept of Verizon supporting the development of pages for the Mobile Web 3.0. You can see the results of this work at: http://developer.verizon.com/jsps/devCenters/Mobile_Web/index.jsp

Documentation Example:

Mobile Web Dev Center Home The Home Page represents everything that’s planned for coverage in this particular “Dev Center”. The expectation has been set by the content team that as far as navigation (and IA) is concerned, we can take away any one menu item, but not add any. Nor can we visibly tree the list like you see in the “Community and Support” pod. Once you’re past the primary sub-navigation, you can do whatever you like below that point. One of the conceptual problems is trying to promote Mobile Web 2.0 and 3.0 at the same time. We’re unable to have more than one dev center for it, so we must merge the two at this time. For this round of submissions, the three sections our team is responsible for in terms of supplying content are “Getting Started”, “Technical Resources” and “Go-To-Market”.

Persona Development

Jonathan Firestone — Fri, 26 Feb 2010 21:54:33 +0000

Task Summary:

Develop a set of personas designed to provide situational examples of potential users for pre-testing usability. The chosen environment is the ER Nursing & Technical Team for a local hospital. Replacement images have been used to replace original photos. We developed a Brief and individual profiles as a part of this project.

Personae Brief Lead Page (Portion)

Personae Full Page Example

Branding and Creative Briefs

Jonathan Firestone — Fri, 12 Feb 2010 20:56:55 +0000

Task Summary:

The branding and creative brief covers an overview of the project and provides the necessary background to produce effective branding and a look-and-feel for the PeopleIQ application. It outlines the objectives, audience, and assumptions for the project and details the creative concept the team intends to use moving forward.

Document Template for RFP Responses

Jonathan Firestone — Mon, 18 Jan 2010 21:05:37 +0000

Hi Folks.

A friend commenting on Social media blog asked if anyone knew of any templates that might be freely available for what I presumed was an interactive company responding to an RFP. I wanted to help him out, so I threw a template together based on some of my successful attempts at producing a workable RFP response. I don’t warrant the work or the results, but have at it. If you’re interested I provide you with: a Template for RFP Response, version 0.4A, off a page reserved for templates off my blog. I hope it’s worthy of praise or gentle criticism. Would love to get your feedback. I’ll update it and I will provide others at this location as I go. Also, feel free to tweet and retweet as necessary.

http://jonathanfirestone.com/document-templates/

Cheers.

Posted via email from consider your source

Project: Political Cartoon Widget

Jonathan Firestone — Fri, 09 Nov 2007 18:10:54 +0000

I was asked by some people I know who happen to produce political cartoons (we’ll call them “WilsonToons.com” , which is a fiction to protect the client) to consider a Widget that could be presented on Facebook as well as other social networking services. The design is fairly simple. The Widget displays the title, the author’s name of course, the image of the political cartoon, the title (if one exists) and a dropdown menu with the day and the date. The main site’s URL is available with the copyright in the footer. The client was interested in a very simplistic method of upload and removal of a cartoon currently planned for the future, and a method to quickly see when a cartoon has not been uploaded for a particular date. The ToonManager tab permits browsing through the archives of previous months, as well as managing the current state of affairs. In the example if you can suspend your disbelief for a moment, you’ll note each image thumbnail will have the number of views listed beneath, this makes for a nice shortcut if you wanted to verify how your hits were doing aside from what you can find in the Statistics tab. The service will also support a 15-day calendar for quick review of recent and upcoming postings for the next seven days, what’s up today and what happened in the previous seven days (as an event list view). We also have Flash and Video postings tied to their home page/blog, Merchandise sales, Advertising (they have a google adwords account, this just opens a portal to that site, the API will come later for inline management.) and as mentioned previously, statistics. Have a peek, just a one pager: [WilsonToons.com Concept PDF]