Group Design Project: List with Functions
Published by Chris Coyier
Hey folks, let's design something together! I think it will be interesting and fun to try and tackle a simple design pattern as a group.
The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The secondary function of the list is that the list needs to be manageable. There needs to be some kind of functionality to edit and delete each list item.
The functionality also doesn't need to actually work, just be designed in such a way it is obvious how it would work.
Here's a very simple example of what I explained above.
I think this design problem is particularly interesting. For one, it's extremely simple, yet I find it deceivingly difficult at the same time.
The genesis of the idea started at this years Front End Design Conference. My favorite talk was by Sarah Parmenter who talked about iPhone app design. In one small bit of her talk, she mentioned not repeating functional design elements. I believe the example was a list with functionality just like this. Imagine if each list item had visible icons for editing and deleting. That's a whole lot of icons on your screen. Sarah said that could be visually overwhelming and there are cleaner ways to deal with it. I wholeheartedly agree. On the iPhone, there are native gestures like swipe-to-delete that can be utilized. Unfortunately we don't have that luxury (easily anyway) on the web.
My little demo above attempts to solve the overwhelming-icon issue by only displaying a little "gear" icon representing functionality on hover. Hovering the gear displays the actual specific functions. Clunky, don't you think? There is also this:
A very valid point by the Big Z. Source tweet.
So repeating icons are bad, and hover functionality is bad. Boy that makes this harder doesn't it!
I should also mention that I'm not trying to extort you fine folks for free labor here. I have no specific need for this right now. I just think it's interesting and wanted to try a group project like this here on the blog.
I'm going to pick one person after a week or so who I feel like did a particularly good job and declare them the winner. I have a 1 TB Time Capsule (WiFi Hard Drive Backup Thingy from Apple) I happen to not need right now, so I will send the winner that as a prize.