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.
Screen Layout
[larger]
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
[larger]
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
[larger]
[larger]
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).
Sidebar Ideas
[larger]
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.
[larger]
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.
[larger]
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.
Summary
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.
Side bars:
More room for “add article”: no, links will be copy-pasted anyway.
Rating:
That leads me to the problem (?) that a reader has to read an article in order to then rate it. He has to leave the site and come back again? That’s kind of a hurdle.
Beginner/Expert:
I’d like to filter articles by these categories.
Login:
I’d put it in the header, so it is out of the way once im loggen in. If I decide to “keep me logged in” I can completely forget about it.
Hierarchy vs. cloud:
I like the cloud better. Hierarchies tend to have lots of levels (at least the ones I create :-). Then they don’t fit in the window any more und I have to use a horizontal scrollbar, which is a really awkward thing to do in small sidebar windows and without Mac Mighty Mouse or a Mac Touch Pad.
Idea: on my mobile phone some text items will be scrolled if they are too long to be fit completely on the screen, and to avoid line breaks.
Thanks Rolf – dude, you are a machine. The feedback and suggestions are awesome – keep them coming!
More room for add article – was with you when I drew it, but then I thought that the need to write an abstract, and desire to write a review require more space. Will churn on the UI presentation of this.
Leaving the site – yup, that’s a hurdle. I’ll make sure that people can rate the article “site unseen”, and maybe code the links to the articles to open into new windows. That way, if you’ve already read the article you can rate it. And coming back will be easier (you never left, you just forked).
Filtering – excellent – intended that. Didn’t draw it.
Login – the design is evolving – there are three modes (login, logout, sign up). Wherever we put it, I want people to perform any of these actions without leaving the page they are looking at. I hate the “redirect to signup” thing most sites have. But we may have issues with email-address-authentication (something else I think I want to prevent automated accounts, and to “credentialize” the site).
One vote for cloud recorded. As you can see from the Tyner Blain categories – I have the same behavior with taxonomies.
Thanks again, Rolf, for the AWESOME feedback and suggestions!
Thank you too for this exciting project, Scott. Fascinating to work with s.o. that far away.