Here are the scans of the design elements I drew out the other night as part of the design and requirements exploration for our agile project case study. There are seven images (with larger versions) showing design exploration.
Expecting a minimum of 1000 pixels in width, with the sidebar taking up a fixed portion of the width. Leaving 150 pixels for a fixed header, expecting 550 or more pixels visible without scrolling vertically.
Article Scoring Ideas
Some thoughts about rendering a digg-style score. Adding in a way to visualize beginner vs. expert articles, and some ways to reflect that ratings can result from both positive and negative reviews.
Article Display Ideas
Showing individual “standalone” presentation of each rated article, including rating ‘box’ on the left. Also having a “meta-bar” beneath the article where user can rate the article, see how big the discussion is, who submitted it, and when. Trying to put the most important information first when reading left to right (as most users will do).
First idea is having user login/logout always in the same place – just show the appropriate widget to the user. May work better in the header.
Second idea shows collapsing elements for browsing and searching – the idea is to have the tools in the sidebar.
First sketch of a way to present a tagging taxonomy or folksonomy. Showing hierarchy (with explicit counts) on left, and tag cloud (with implicit relative count) on right. Tag widget is under a collapsing menu bar.
Search box (again under expanding menu) on the left. After a search, allow user to replace or refine search (search within results) shown in center. Right box shows “replace or refine” being allowed after already refining once. Note that there might be a technology issue with this approach because “search for X then search within results for Y” is not the same as “search for X AND Y.” That’s how I drew it, but I realized the issue while typing this paragraph.
These are just sketches that I did while “thinking about the ratings site.” as one of the steps in the concurrent / iterative process of design and requirements documentation.