Group Design Project: List with Functions

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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 Premise

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.

Let’s say the design is for the web, while considering the mobile web experience. The design is not for any specific mobile platform. JavaScript is fine but not required. Let’s also assume we are dealing with modern browsers here. This is about exploring a design pattern, not dealing with browser compatibility. There are ways to make things work in older browsers, don’t worry about dealing with it for this.

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.


If you have some ideas for how to handle this, please leave a link to your live example in the comments. Using tools like JS Bin or jsFiddle make this easy, but feel free to put your demo anywhere.

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.