Flowcharts are a visual technique for exploring and communicating the path a user takes through an experience. Representing the experience in a hierarchical format can help a UX designer explore the navigation scheme. Visualizing the flow forces the designer to identify hierarchies, content relationships and the distribution of content. Flow diagrams reveal the balance of the content elements and cross-linking opportunities. They can also be helpful in revealing complexity and demonstrating imbalances.
Flow diagrams are an important tool for recognizing and committing to the user experience but also for communicating the experience to the development team to ensure the flow is understood. They can identify an overall scheme but are also useful for mapping individual paths that require user input.
A wireframe is a schematic view of a page. It is typically created to identify the elements on a page and the relationship among them. Wireframes typically are proportionate to true scale so you can see the relative size of elements. Wireframes are usually done in gray scale and intentionally do not address visual design issues so the focus is on identifying the elements on a page and their relation to each other and those sizes and relationships are not distracted by color, typography, photography or illustration.
REFERENCE
Flowcharting
Starting Out Organized: Website Content Planning the Right Way by Kristin Wemmer in Smashing Magazine
ASSIGNMENT
We are going to spend the next 2 weeks acting as User Experience designer for a hypothetical client: Great Buildings Collection. For next week please review the website Great Buildings Collection at http://www.greatbuildings.com . Great Buildings Collection is an existing site that misses the mark in terms of user experience. Please develop a flow diagram or other diagram that communicates your intention for a revised site architecture – similar to what we did in class for the existing site architecture. Do not focus on the design of the site but on the design of the experience. Read the hypothetical RFP associated with the project and use any tool you are comfortable with to describe your concept. You may want to start with sticky notes on a wall and then transition to Balsamiq flowcharts, PPT or Omnigraffle can work (though Omnigraffle is better for schematics than flow diagrams). Omnigraffle has been installed on the production laptops or you can get a 14 week trial. Your diagram should show the key content areas and their relative relationship and hierarchy as well as the user flow through the site. In addition, please bring to class one example of a website that you think organizes a large database of content in an effective way.
Here are some sample archives to look at:
AIGIA Design Archives
Google Art Project
MOMA Exhibit: Color Chart
Movie Title Still Collection
National Archives
Oscars History
SFMoMA
Ubuweb
and here’s a list of museums that have digitized their collections:
And some non-traditional sites that might inspire your thinking. Please come up with a few additional sites to share.
BagguBag
Pentagram
WikiSKY