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.
Example
Here’s a very simple example of what I explained above.
Why?
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.
Participation
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.
Time capsule supports a whole gigabyte!? :)
Fixed, thanks.
Great idea. In the applications we make we come across these lists a lot. I don’t know if there is a single method which works for every list.
If you look at 37signals products they have 2 solutions.
One where the icons hover in front of the line. This works because the controls are always near to the content (because the content is left aligned) and you can fill up the entire line without covering something when controls show up.
The other solution is having a button which toggles the controls for an entire list on and off. That’s probably what Zeldman would like best.
Twitter (and a lot of other websites) uses hover controls which appear at the end of a line.
I personally like hover controls but understand the problems with it.
Hi,
I don’t have much time at the moment, but: why not just do that the iOS way?
I mean:
1. above the list, top-right a button: “edit”
2. user clicks the button, button becomes “save”, list items have d&d handlers on the left and delete buttons on the right; if a renaming is required – they can have click-to-edit action on text
3. hit save to save everything
It’s easy and versatile solution and – when done properly – can be very pretty.
I would prefer we not take Zeldman’s advice too seriously for this assignment. In fact, I’d go so far as to say that tweet is a bit of a troll if he’s saying that it outright “FAILS.” You can’t click something without hovering it, and we’ve had this convention on the web for several years now. I think it’s extremely presumptuous to suggest that users are going to run home crying because additional functionality was revealed on hover. Besides, fallbacks like the second one Paul S. mentioned can be used as a fallback for mobile devices.
I agree with you Kevin. However in this example I believe you have to take a step back and look at the visual cues that are supposed to enable the user to modify this list. Chris has given us an explanation of what the gears do exactly. But would you have been inclined to move your mouse pointer over the gear to reveal the edit/delete menu, without knowledge of the functionality? From a UI perspective this is the right idea, but the wrong solution to the problem. I believe that there should be a stronger visual cue that really lets the user know immediately that he/she can modify this list. Either eliminate the gear and have text only(boring), or keep the gear and have text appear without having to hover over the gear, or have a hidden element behind the name slide down with options and graphics to edit/delete. The choices are endless, but I believe its how we get the user from point A to point B.
You can click something without hovering. You can tab to it and hit Enter.
I agree. Don’t take my inclusion of Zeldman’s tweet to indicate that hover functionality should be abandoned or not even attempted for this project. Just that it should be considered.
So in all reality it just needs to have a reliable fallback, as Kevin said.
Visual feedback when hovering something is only useful when you get extra information. The implementation of the hover function in the comments I’ve seen so far don’t give any extra information after the first hover. Once you hovered one of the list items, you’ve seen it all. All the other items will show the same edit/delete/… functions over and over again. Repetition?
When the user wants to interact with a list item the first thing he will do is just click it. This is when he should be given the option to view, edit or delete it.
Unless the hover gives extra information about the hovered item it’s very useless.
Is it good to have a fallback “for mobile devices”? Aren’t they the most rapidly expanding market? There are more and more desktop touchscreens on the shelves nowadays, too.
rapidly expanding market != big market
You could easily have two icons instead of the one up at the top or bottom. A pencil icon for the edit, and a X for the delete. Like Herhor said, the icons could then become the save button.
Also, instead of hover, you could just switch it to be a click to show the Edit/Delete buttons.
I agree on Kevin Sweeney
For that kind of functionality, hover is a perfect and clean solution for devices that support it. And it should not be a problem to provide fallbacks for other devices – even if this means that the edit/delete icons are always visible for them.
Not using hover because some devices don’t sopport it is like not using CSS because there are some people using ScreenReaders ;)
Not using hover because some devices don’t sopport it is like not using CSS because there are some people using ScreenReaders
Very well put!
I like the comment
“Not using hover because some devices don’t sopport it is like not using CSS because there are some people using ScreenReaders”
but I don’t think it speaks true. I mean ScreenReaders are not near as numerous as iPhone, Android, iPads, and other devices that wouldn’t make use of hover. Plus this device market is growing exponentially where the number of people that use ScreenReaders is not.
I think the point of this Group Project is to see how we can solve the problem for the future. It’s to expand and experiment with the possibilities, not try to make exceptions.
Just my two cents
I think the Google Reader method is the best way of solving this problem. I’m talking about the list of subscriptions on the left. Without hovering, it’s just a list of links. When you hover over an item, a downward-pointing arrow appears, and you click on this to get a menu for that item.
This isn’t ideal for touch devices without hover, but presumably Google have a different interface for those devices anyway. I think hover is a very useful tool – it’s not FAIL, but we should be aware that it won’t work on all devices.
I think it’s really important to strive towards having a list of actions (eg. Edit/Delete) appear based on the user selecting that data row (whether it’s a click or hover). I’ve found that depending on the CMS, you may have many more actions other than 2, so leaving your options open for a solution which easily supports additional actions is ideal.
What about having the actions appear as a tooltip bubble just above the data row. This way the actions are not far from the current position of the pointer and the data of that row is still visible.
I totally agree on Jessica, in fact I was writing a similar comment while I saw hers :)
For only 2 actions, keep it simple, X and pencil icons should do the trick and you don’t need anything else. But I disagree on the save button for each element (maybe a global save button for the entire list would be better?)
However, if the number of actions could increase, this no longer applies…
i dont really understand why everybody tries to make one version for mobile AND normal… if you have a website/app which has so fancy functionalities like inline-edit, build a second version for mobile.
for normal browsers, hover is an awesome possibility to add semi-important actions which would mess up the layout, if you really want to cover an iPhone(/similar) on such pages, make these elements always visible and build a second version which uses the iOS way — which is awesome to use with fingers, but imho would suck with mouse (swipe for deletion with finger? awesome, but with mouse? no way.)
to say something useful here:
the best way to cover both worlds without the iOS way (edit button on top) would be to double click an element to edit, singleclick to trigger the link and hold down to delete. (with promt). but you need an explanation for this behavior above the list (overlay which has to be closed with click).
Couldn’t have said it better myself.
I have some concerns about the use of double-click for additional functionality. I am prone to double clicking constantly while reading things (a habit I have for marking my place when reading), and it frustrates me no end when it forces some other functionality in there (I’m looking at you, dictionary definitions…).
Maybe if it simply acts the same as hover (showing the 2 edit options – i think that’s what you suggested), but locks the options in place so they remain after you stop hovering, and disappear when you click outside the row.
But the explaining of this functionality (if not possible in the graphic design of the rows themselves) could be very annoying to the user. If I got an overlay that I needed to close every time I visited the site I would not be returning to that site very often.
If your UI needs explaining before people can start using it, it has already failed.
Style as you want, but this has to be the easiest and most obvious solution.
http://jsbin.com/obusi3/6
Why should you have the same policy for desktop and mobile? I think there’s nothing wring with using hover when the client is a desktop browser. And when it’s a mobile browser, one click instead of hover and/or a kind of edit mode for the list is what I’d rather have as a user.
I really don’t see the problem with repeating functional design elements. We tend to hang on usability and best practices and ignore what people are used to often times is what works best. This is not a question that should be asked from a global standpoint by any means. There are (and should be) many solutions.
If I’m building an interface which has an audience of typical white-collar, Excel spreadsheet junkies I’ll build it with repeating function elements in a table-style structure. More tech-savvy, or mobile application, I’ll build in transitions that slide in elements on click or use a hover pop-up.
As with any design the consideration should be on audience, the complexity (what if there are 10 functions), and how the interface is going to be used – is it something people will spend a lot of time on, or just something the access quickly and want to fly through.
I think one of the easiest methods (which I’m surprised isn’t mentioned) is the fact that you’re already displaying the list as a list of links. Users know these are links simply because they should be styled to present that idea.
It is simply a matter of allowing the user to click on a username before bringing up an “Edit/Delete” modal dialogue.
If the link is currently linking to a profile page, just let it continue linking there, but if you have the ability to edit/delete then all displayed fields that CAN be edited should be displayed as input boxes with their values filled out and Edit/Display buttons clearly displayed.
http://jsbin.com/ayola4/2/
Quick and ugly but it gets the job done. I ran out of time to style it.
But I completely left out any delete option. Durr.
While I submitted my own solution, I like this one a lot as well.
I guess for simplicity sake, just assume that if the text input is cleared out the list item will be deleted.
At first I didn’t like this solution, but now that I’m messing with it, it’s really handy.
I know Steve Jobs would approve if this were an iPad settings screen, but I can’t stand this. Thanks for laying it out, b/c when it was mentioned before I almost thought it was a good idea. However, this strategy makes is more confusing. If you click edit, what are you editing? The first person on the list, the whole list, the widget holding the list? It’s so unclear. You could say click edit and then the person to edit, but now you’re adding clicks where the point of the design is to save time and clicks.
I’m not sure I get what you’re driving at. How is this adding more clicks? It’s a pretty simple concept that after reading your post made me realize that it is saving the user clicks.
Click edit. Edit any name in the list you want (could be just one or it could be all of them).
Click save when you’re done.
Two clicks is all you need to edit one item or 5 items. No extra clicks are even needed for a delete. Just delete the name you want to remove before your “save” click.
add delete and your set to go :)
How about using drag-and-drop functionality so you just have the Edit & Delete buttons at the bottom of the list. When dragged into Edit, you’d have it appear in a text box also at the bottom. When dragged into Delete, it would be removed from the list. You could then use hover to identify the action as it’s being edited (in green) or deleted (in red). No repeating icons and avoids using hover for functionality.
I think the problem with this method is that the user doesn’t know that they need to do that instinctively.
Great Idea Chris. I already have an Idea in my head. Going to start working on it right now!
http://uxmyths.com/post/715009009/myth-icons-enhance-usability
An interesting article about th research that has gone in to how intuitive icon-only functions actually are. I also agree that hover is perfectly acceptable if mobile is not a primary concern. Zeldman was obviously in a mobile state of mind.
Couple that with the idea of wanting to put the most destructive button the furthest away from the main point of focus, and here is what I would do:
http://www.designingdotgov.com/examples/list-with-functions/
There is a minor bug with IE7 showing the delete button, but I don’t feel like tracking it down right now.
That’s entirely too simple of a solution – therefore it is probably correct!
Damn you. That’s exactly what I was going to do, but I had to work yesterday. :(
Although, I think for mobile, those buttons could be permanent.
Yes, functionality on hover keeps it clean and collected. For this specific example you could have the name link to edit, get rid of edit on the hover options and put a header on it that says edit users.
That way 1. you have clear functionality labeled if they don’t see the hover, 2. making the hover a shortcut to deleting them with out clicking into the person and optional and 3. Not critical if they can’t use hover.
I would love to see desktop develop some standard actions for these kinds of functions. Here’s my proposed solution:
http://jsbin.com/obusi3/18
It’s interactive but as we all know users want to get where they want as fast as possible, this is kind of to much clicks and movement for simple stuff as edit an delete.
And instead of a modal window for the edit why didn’t you simply go with replacing the text with an input.
Another prob i see is that you need to see the info text to figure out how it works, and unless you make the info stick out from the rest of the design people won’t know how to use it.
This would make them think too much. “Don’t make me think” :)
I disagree here. I think the point of this exercise is thinking about ways we could introduce new actions to this kind of interface, ones that work on the desktop. That was how I approached it, anyway.
Too many icons is the problem I’m trying to solve, so adding icons is exactly how not to solve it. Just like we all sort of know that swipe to delete works on the iPhone, I’d like to think that people would get that dragging off would delete here.
As for modal window, I think that’s pretty much irrelevant, because it would depend on what needed to be edited. If it’s just the title, then inline replacement would be great, but if it’s editing their profile, say, then a modal window would be best.
Well i’m always a bit sceptic about introducing new ways for doing things on the web, people are used to a few specific ways of doing things.
I don’t have an iPhone (don’t see a purpose in it lol, all i need from a mobile device is to call and receive calls), but as far as i understood most apps do things the same way and have some design rules so user interacts in the same way with all of them, which is not the case with the web where we have too many ways of achieving some action.
When you first start iPhone i presume you are guided through the usage of it, but when you first come to a website you need to figure out things yourself, so the designers and developers need to create it as easy to understand as possible, or else they will leave.
So, i think, instead of figuring out new ways to do actions on the web, we should try to improve the ones people are already used to, such as the icons.
That’s just my opinion.
You’re right, convention is definitely a good thing. And while the iPhone experience is definitely something you have to figure out as you go, it’s more natural for new actions because the idea of multi-touch is itself a new action already.
For this specific challenge, I wanted to think through new actions, because convention seems to be creating a problem in some scenarios where icons or text links for standard application action items just aren’t working for the reasons Chris describes in his set-up.
In the right scenario (web app perhaps), creating those new default actions can be a good thing. Once your users learn them, their experience can be a lot better for it.
Yeah, new way of interacting with a web app can improve the experience and productivity if properly made, but i would still rather use simple ways they already know about.
But still if i’m not making an app just for techi users or at least young users (which is actually the same these days), i wouldn’t be so sure about using something new and unfamiliar, even if it would improve experience and productivity at a certain point (when they get the hang of it).
And sometimes not even techi user will be able to understand how it works without having a trouble doing it. A funny thing happened to me today, my mother wanted me to show her pics of her grandchild which are on my sister’s facebook account. So i asked my sister for the user and pass, logged in and there i was starting at that darn thing for 5 minutes trying to figure out how to get in the darn photo gallery of here account. Eventually i called her again and asked her for instructions, turned out i have to go to the external profile, then go to photos.
So why that happened? Well first of all i don’t use that time eating machine, social killer, stupid thing. But the main thing is that i expected to be able to see my photos from the homepage, it had all that crappy widgets and no way to access the photos, and that simple issue i had turned me even away from creating my own account.
It turned out Michelle (fake name) joining the “If you don’t join you’ll never find true love” group is more important then photos on the account. I just don’t get that.
Before i start losing it and find myself in 4 hours still writing about how facebook failed in the most important thing, which is to allow me to compete my objective efficiently (my opinion, don’t kill me facebook fans).
So, back to the new actions discussion. I would always, always, always rather have 4 icons on each item, know what they are, be one click away from my objective, then use for example an interactive drag to remove, double click to edit concept which means more time and more effort. I just took your concept as an example, no hard feelings :)
I know on Windows you can double click the file/folder title to rename it, and that you can drag a file/folder to the trashcan to delete it, but the thing is 90% (wild guess) use F2 to initiate renaming and delete to, well delete. Now we can’t really use those 2, can’t we? So the way we interact with the OS can not be used as a concept for interacting with a web app.
Probably the most boring comment, and noone will read it but what the heck. Submit comment…
Boba, I read it. :)
I approached the challenge trying to figure out the best way to achieve the result without visible icon clutter and without a “hover-to-appear” solution.
PS I don’t know anyone who uses F2 to rename a file — in fact that’s the first I’d ever heard that you can do it!
:) Hell even i didn’t have the courage to read it after i wrote it, i just submitted it.
Yeah, i always use F2, and i rarely use the mouse to select a file/folder, mostly i use the arrows or the letters, mileage on my mouse is really really low, most of it comes from playing Counter Strike online. I simply don’t like moving the mouse, maybe that’s why i wasn’t happy with the delete functionality (drag&drop). :)
Or maybe i hate mouse movement so much is because when i have to move it i don’t use a mouse, i use the touch pad or whatever it’s called on a laptop.
Ohh and are you sure about the double click to rename, i tried double clicking the title on a folder on my desktop to rename it but it kept opening the darn thing.
Boba: you have to double-click *slowly* – it’s more like “clicking twice” than “double-clicking.”
I also find keyboard commands very convenient, but I think we’re probably in the minority. People just don’t learn that way anymore – it’s all point-and-click oriented.
Ohhh, thx, got it :) Slow double click.
Buy F2 rules :)
If you really hate clicking that much, you will love my solution. It does everything, view, edit and delete with just one click! yeah you read it right, ONE CLICK! Scroll down to my comment or just go to http://jsfiddle.net/7y8Bx/1/
Hey, nice solution! I didn’t see it when I made mine which is pretty much the same as yours…
http://jsbin.com/obusi3/79
DOUBLE CLICK = EDIT
turns the text into an editable, prepopulated text input… “blur” to accept changes. (Would think about using ESC to cancel out of edit mode keeping it the way is was before entering)
PRESS & DRAG OFF PARENT = DELETE
creates a cloned drag instance that if moved outside of the bounds of the parent (denoted by the red border), the will be removed from the list. (Would think about using ESC here too to cancel the dragging)
I choose this.
with a touch screen must be the best option.
+10
I have put up a little example.
http://jsbin.com/obusi3/20
Icons with 0.2 opacity, which turn to 1 when the list item is hovered.
1) Yes, Sarah said repeating icons are a NO NO, but they’re barely visible (but still visible, so user can figure it out), so they are not visually overwhelming.
2) Zeldman should be happy with this, no hover is needed to see the icons.
Don’t see nothing wrong with this one, it’s simple and effective.
I like that. I’d just like to see actions for the simple, common tasks so that the right side is free for icons for the more specific tasks of the site or application.
Thanks.
Well in my opinion, if an app includes the options for delete and edit they will be equally as important as those specific tasks, so they should be placed in the same area, and since the icons are small that shouldn’t be a prob.
Now, in case an option can’t be easily described using a small icon like that, the alt tag will help them figure it out, or since those alt tag tooltips are ugly (in my opinion) a nice little jQuery tooltip would get the job done.
this is just my two cents.
1) opaque’d icons generally signify non-availibility of actions in a situation where they would generally be present.
2) also having the icons non-opaqued when hovered will be distracting, particular in a scenario in using touch based devices where you swipe up/down to scroll the list.
Hi Chris!
Here is my revision.
Simple but effective imho.
http://jsbin.com/obusi3/23/
Whoa, just clicking on a list item in “Modify” deletes it! Is that intentional? Seems like a dangerous unexpected action, otherwise I like it.
Wow, this is pretty great, maybe because of the effect. The discoverability is good and it doesn’t rely on hover.
http://jsbin.com/obusi3/21/
Why have the options on every single element? I have made a single menu that activates and positions itself when the person clicks on the list item. So that the menu will work for every element I am storing the index of the active LI, but this could be some other more useful identifier for the list item.
as far as my experience this is as close to expected, and a simple solution except, no matter what zeldman says,(touch interfaces need different solutons) it would be more easily discovered if on hover, not click and the buttons were within the list item
David, the expectation is that for the edit menu, at least, there will be content relevant to that list item only. You could load that content into the one container via AJAX, or you could have it on each li. For a small example like this it probably makes very little difference, since the point is about interface design.
No where in the description does it suggest that the edit menu would be custom per element; as such, I think my reasoning stands.
Thanks for your comments.
It was just proof of concept… buggy ;)
Here is another idea (double-click a row):
http://jsbin.com/obusi3/26
What I don’t like about your solution is that it requires an additional (and effectively unuseful) click from the user. IMHO, it is annoying for the user, expecially if he/she needs to edit a few items in a row (like click, click edit, edit, return to the page, reclic, reclick edit, and so on).
The solution I like the best is the one with opacity on over.
Very stimulating topic and discussion :)
good idea, but that won’t work an an iPhone… to be exact, it doesn’t work on an iPhone, just checked
Very interesting solution Jay.
One issue i see is that you separated the icons too much, i guess the best place for them is as closest to the modify button as possible (less movement is better), so in this example they should both be on the right side.
Another issue i see here is that you will need to make the modify link stand out (as you did in this example) so it gets noticed, which puts the modifying function in the first place, and if the users main objective wasn’t to modify then it will probably distract him from his main objective.
You’re probably going to get a lot of over-engineered solutions. Here’s a pure CSS solution:
http://jsbin.com/edibe4
In case i misunderstood the whole reason for this, then i want to say sorry in advance.
As i understood, the concept should be made in such a way that user will figure out that you can edit/delete those items without the need to hover over it to figure out it’s editable, and your concept requires the hover.
“Let’s say the design is for the web, while considering the mobile web experience.”
Mobile should not get the same experience/code, IMO. The mobile version could get a single right-sided icon (like Chris’ gear icon), which when touched/clicked, would take you to a separate screen where you can edit or delete the entry on the same page. When you save or delete the entry, you’re returned to the list page.
Here’s a dual version, webkit browsers get the faux mobile, FF and IE get the desktop:
http://jsbin.com/eteme4
hover is way more easily ‘discovered’ than click…think about it. Many solutions tendered show NO evidence of individual editability. at leas on hover you find if your looking easily. the link ‘underline’ suggests an action
Yeah. Nice, simple expected, discoverable, usable
Love all the different ideas at approaching a project list with the edit and delete functions, and found some sort of instruction to the user definitely helps. LT
I’ve always liked the Mac-style hold the mouse button for the context menu idea, so here’s my attempt.
http://jsbin.com/ewiti3/3
Just click and hold on a row and the “Edit” and “Delete” buttons show up. It’s a bit hacky, but you get the idea. I’ve tested in Chrome and Mobile Safari.
It may be non-obvious, but if you built a whole app with that paradigm, it might just work out.
I was gonna write something similar, but generally, that’s the idea…
Ahm, this one isn’t very usable in my opinion.
I think its very weird to expect a user to know to hold down the mouse-button on an item. For one, there is no indication whatshowever that your list is editable, not to mention that one needs to keep it pressed for a period of time.
And the same as with others, this one requires two click actions in order to get something done.
how about do what apple does and have a separate button that takes you into edit mode. Then you can edit text by clicking on it and it turns into a textbox (contenteditable maybe?), you can sort by drag’n’drop and delete by pressing a close button. the reason that repeating icons are bad is because it’s distracting, if they only appear when the user is focusing on the list, then it’s not a problem.
This issue is very interesting and I really enjoyed trying to solve it. I got to the solution that works this way:
– in case of hover enabled device, it shows the tools for each item on hover, by CSS. classics.
– in javascript I implemented simple showing/hiding of the tools on click of the list item for touch devices.
– after that, I try to detect hover on body element and in case it fires, the click event for list item is unbound
– I also added a small “help” for touch devices’ users. it says something like “Click the list item for tools” and will be hidden on body hover. this part could be most likely done more elegant but I just wanted to show the principle.
I didn’t polish the tools part or implemented deleting of items from list or editing the names inline since I guess that’s not the actual part of the problem. You can take a look http://jsbin.com/obusi3/36/
this is my own, so ultilize css
simple
http://jsbin.com/obusi3/44/edit
sorry
http://jsbin.com/obusi3/47
Seriously, i would do it with some JS and jQuery…
http://jsbin.com/obusi3/54
works with the iPhone to, and looks nice
i just think that’s the obvious way to do it…
Could be better but… best I could do in a few min. :D
http://jsbin.com/obusi3/57/
Like it. Love your inline edit code.
Entry @ http://sandbox.syntaxmonster.net/uilist/index.html
I’ve stuck some notes on the stuff used here on that page as I actually went to my other half and got her opinion as someone who doesn’t do anything with computers! She definitely did it differently to how I would, but looking at it now. I like the simplistic design of it.
this one is nice too.
i’ll put the add button at the bottom.
(or to the right, but only if INSERT the new row between 2 rows.)
and already tested with one neutral human [(A non technical-orientated-being)]
I do the same, but is not ideal for me, ‘cos I work one week in a proyect and then when I show to her, is like, “uhm, is pretty”.
Here’s what I came up with after reading this:
http://jsbin.com/obusi3/60
A simple edit mode which turns all the list items to text-boxes and shows a delete icon next to each row. Of course in reality it doesn’t handle where the link is going but that could just be a second text-box.
When your finished editing you can just toggle edit mode off and you’re done!
Kinda like this.
Nice one, but it would be better if the gear icon changed to “save”. That way it’s clear how to save the edited data.
my question is, why would you make for example PC user click once more just to show the editing options. she has mouse so we’d better use that fact and therefore hover events.
Here is my try!
I think that the discussion is focused in to hover or not to hover and almost everybody forgot the simplest UI element: checkboxes!
http://jsbin.com/udama4
Interesting take, Marcelo, although I feel radio boxes would be a better choice (or a single-select checkbox list). This will allow you to avoid the use-case of having to edit multiple items at once.
I think that’s the point – to be able to edit or delete as many or few.
For a small list though, seems kinda overkill on steps required to make a change.
Thanks for the feedback! Like Cory says, that’s the point :)
And Cory, it’s one more step, but is a much more intuitive and common way to edit than other options like double-click or hover. I think is the only method I saw where the user can edit or delete multiple items at once.
Boy, threaded comments make it kind of hard to follow a discussion, don’t they?
Well threaded comments are made to make discussion easier to follow :) Maybe a little hide link to hide all threaded comments would be of help.
But i noticed a little bug here, you see that last comment (i made it a long time ago as a reply on a comment), it seems something went bad and now it’s the last comment all the time.
Here’s my try at what seems intuitive to me:
http://jsbin.com/obusi3/79
DOUBLE CLICK = EDIT
turns the text into an editable, prepopulated text input… “blur” to accept changes. (Would think about using ESC to cancel out of edit mode keeping it the way is was before entering)
PRESS & DRAG OFF PARENT = DELETE
creates a cloned drag instance that if moved outside of the bounds of the parent (denoted by the red border), the will be removed from the list. (Would think about using ESC here too to cancel the dragging)
nice implimentation
I have begun a small demo that I thought I would share. At this point, it’s very top level and really only shows how to display the options. I’ll be beefing this up more to show the individual interactions for editing and deleting list items.
I also think that “Add” functionality might be something to consider for this as well, so I’ll be including that also. :)
http://www.reconstitute.net/demos/css-tricks/editable-lists/index.html
Hi Kevin
Like the mobile version a lot! though i expected a new menu sliding out pressing the text/arrow. But it’s very clear what to do. not an issue.
Personally, i believe that yes, icons/text should be visible ( your normal/small version) without hovering and be clearer when hovered. No clicks. Clicks are for actions, not for making actions only available.
I think this is the most complete example and flow i’d go for right now.
thanks!
Bah. Everyone getting to this competition before me. :)
Well played Kevin. I think you’ll win.
http://jsbin.com/obusi3/83/
My solution is this: click to edit – http://css3art.dvp.sk/edit_list/ – using pure CSS.
Do you differentiate between a click on the text (to view to items details) and somewhere else to edit?
This problem can by solved with other design techniques. This was not main problem of article (click on text).
I think the double-click concepts are interesting, but not at all obvious. It’s very hard to show this in icon form, and even animation would be hard to show the action. This leaves you relying on a text description which requires more thought on the user’s part.
One method that someone might want to consider incorporating is to have the cursor change to the text selection cursor and have double-click (or maybe even single click is better) toggle the edit mode of the text by turning it into a textfield.
Again, this really depends on what needs to be edited.
It may have a slightly longer (think seconds) learning curve, but the double-click eases the cognitive load of the user by visually eliminating their many options/choices, creating a nice clean presentation, especially if the main intent is for content consumption versus editorial. And the drag interactions are more intuitive as it matches the mental model of most. I don’t think we have to represent everything in little icons on every actionable element for the actions to be obvious. If the user takes a few seconds and reads a short sentence ( “Just double-click it to edit and drag it away to delete.” ) and can interact with the items successfully, I feel from that moment on they are free to interact with the content themselves (get their hands dirty) as opposed to them relying on an interface of representative icons to act as their middleman.
And I do like the toggle, like Peter Druska (and I believe one other) have posted. The only argument I can see is the requirement for an extra click. Personally, I would find that functionality an easy point to argue for should someone like a client ask why such a choice was made.
I’m not a fan of splitting the icons up because it breaks the fundamental design principle of proximity (keeping similar items together). In this case, both “edit” and “delete” are actions that you can perform on a record in the list. If you’re worried about mistakes being made, then you differentiate further with the design, and add an confirmation step in the user flow.
Here is my concept (no code) that might solve the problem:
http://www.flickr.com/photos/mrharrison/sets/72157624877563691/detail/
Interesting idea. I can see someone accidentally deleting something if their finger slips off the mouse button. Plus you’re making them have to drag precisely which could slow things down.
Nothing happens here if your finger slips off the mouse. You are required to click once the icon snaps onto the active location of the crosshairs which also makes the precise dragging a non-issue.
http://jsfiddle.net/daB9C/
My idea: Works without JS/jQuery, but I don’t really like my solution… to much “delete” buttons.
( Just tested in Chrome and FF )
Depending on how much info there is to show for each list item.
I like to expand and highlight the selected list item along with “edit” and “Delete” options.
This method makes sure the user knows which list item they are dealing with.
Here is a quick(rough)demo – http://jsbin.com/obusi3/86
I pretty much would choose your solution over all with a list with hidden contents. Fast way of edditing/deleting, with mouse or with your fingertips.
Maybe for a list without hidden contents i would use some kind of indicator or something like this :
http://jsbin.com/obusi3/89/
As i see it, this works with hover and with touch interfaces, being really simple.
Notes: The edit section is roughly adapted , on chrome recently edited element edit button moves down :S cant figure out why
I improved my version to support multiedit, and that.
http://jsbin.com/obusi3/94
I just noticed that as a consequence of putting the ‘Delete’ button just below the ‘Edit Me’ one, deleting items in the list is instantly learned as a doubleclick action, which when you have used this list for 30 seconds becomes really intuitive.
This may be something to keep in mind on this kind of things.
Also, i dont like the ‘Done’ button when editing, too big and it should go absolutely positioned left, but i havent time to do more right now.
Nice work everyone
Im testing in the iPhone and it looks great, except that it’s badly missing the small x button somewhere to clear the text value
Ps: nice autochat I’m having here :p
Hi there,
Here is another idea:
http://jsbin.com/obusi3/90
First ones (with some enhancements) :
http://jsbin.com/obusi3/92
http://jsbin.com/obusi3/93
I’m not seeing your icons at all, if there are icons to the left.
Hi Jason,
When you double-click a row, the line slides to the left and two icons + a cancel link appear.
It works on all my browser.
When I click “Modify” for all of your examples, I get this: http://drp.ly/uWx3
I don’t understand:
The result is: http://img210.imageshack.us/img210/1812/csst.png
The images just take a little time to load.
I like this solution. Nice and simple.
Looks nice, but there are 2 downsides in my opinion:
1) I don’t like any double click option, it’s hard to discover and will definitely lead to phone calls from confused customers.
2) The controls slide over the content. This way you it’s harder to double check what you are about to delete.
Nice Solution for Desktop Devices, but doesn’t work at all on mobile Devices like the iPhone.. just tried it.
Although I think it’s the best looking solution in the comments up to now.
Hi,
here is my version: http://jsbin.com/umagu4/2/
Just like an iPhone (Edit and Delete Buttons).
Even with some nice CSS3 Gradients :)
Hope it pleases you.
Greetings from Germany,
Jonathan
I like this a lot, it solves most of the problems without creating too many new ones.
Nice execution, Jonathan. One way you might push it a step further would be to apply focus to the text field as soon as you click the “Edit” button!
I also think the iPhone list approach is the best option.
– It does the job and does it well;
– Most people are familiar with it, and if not, it’s quite intuitive;
– Does not require hover states;
– Only repeats icons in edit mode;
– Can only delete something in edit mode, so no accidental deletes in view mode.
Just my two cents.
Forgot to mention: It does not require separate desktop and mobile solutions, it works equally well for both.
Thank you for your comments.
I updated my version with the focus idea.
And now it fits pretty nice into the iPhone:
http://jsbin.com/idemu3/
A last one (I promise, last one) :
Iphone Ui style:
http://jsbin.com/obusi3/96
(not my favorite)
This is just one of the reason am contemplating changing my career and just developing for fun because we make things difficult by tweets like the one by Zeldman.
How can you say hover is a bad idea? Please explain
The hover effect itself isnt a bad idea, the problem is that there is an increasing number of internet-enabled devices on the market that do not have an intuitive way to natively support hovering, ie mobile devices without mouses/pointers thus if your applications primary functionality rests with this effect then its not going to be very accessible to a mobile audience.
In my opinion though it’s a vendor issue not a developer issue as the hover effect is a W3C standard (and has been for a while) and it should be up to the device and browser vendor to impliment standards-based browsers with suitable fallbacks.
Although mobile is extremely important market for many things lets not forget its < or = 1% of browsing http://gs.statcounter.com/#os-ww-monthly-200908-201008
If the application is geared towards mobile devices, functionality should not depend on the hover state, since there is no hover state for touch devices.
No one said hover is a bad idea.
Well, yeah, actually they (Chris) DID say it was a bad idea. Especially given the non-hover capabilities of the touch interface (iPhone).
I’m pretty sure Chris was summarizing the quote directly above his comment, from Zeldman. “Functionality that is only revealed by hover” which is pretty different than “hover is bad” full stop.
My take on this uses some of the iPhone style. Where you click on a button at the top that says “Edit” and it adds a minus symbol next to all the items to delete them. And then if you click on an item you can edit it.
I haven’t tried this on a mobile device yet, but I’m assuming it should be fairly strait forward. Both on a desktop browser and a mobile browser.
http://jsbin.com/obusi3/101
My take on “list with functions”.
It follows the “not repeating functional design” and “no functionality on hover”.
Click the link to follow it :)
Click anywhere inside the list item to enter edit mode, new value will be saved on blur. If the new value is empty, list item will be deleted.
The “only” question is: is it obvious how it would work? :)
I don’t want to have to erase it and hope it saves as my delete option. And I’m nervous about the single click edit mode vs. the single click ON the link to visit the link. Room for accidental wrong clicks there I think (though the same might be said for the double click action, since many older users still double click on links).
I think the whole point of this article was to encourage ppl to move away from the standard design patterns (dbl clicking, hovering, etc.) and try to create something different.
Sure, my demo from the usability stand of view fails, becouse of the users chance to click on the link instead of entering edit mode and vice versa, but at the same time every function is “one click away”.
Besides, IMHO it’s not about creating “one version fits all cases” but rather “this version fits my case perfectly”.
BTW I modified my demo :)
http://jsfiddle.net/Lzss5/130/
@r3d: Creativity is fine and all when you’re talking about design, but design patterns are a different beast. People expect to see certain things. If they don’t recognize how something should work immediately, or if it’s not easy to pick up, then they’ll dislike it.
UX groups prove this time and time again.
I think the point of this/these will be to find the -best- method that everyone can figure out/use immediately/elegantly.
I think that for simple lists the Toggle option is the best. It’s easy to discover, every action is clearly labeled, doesn’t rely on hover and you can perform bulk-edits.
But still there are some problems.
1) What happens when the content is very wide and the actions (edit – delete) appear? Does the content reflow (probably on a new line)? Or do they float over the content?
2) It requires an extra click if you want to edit a single item (but I can get over that)
But does it work for more complex lists? Lists with multiple actions for each row such as, move, create child, edit, delete and status (active / non-active) as you might have in a CMS. Hover might be an option, but then reflowing will be an even bigger problem. Maybe an idea for the next Group design product?
Here’s mine:
http://blog.pressedweb.com/demos/list_design_pattern/
See Chris’ brief (from above):
“So repeating icons are bad, and hover functionality is bad. Boy that makes this harder doesn’t it!”
Eh, I think Chris is just looking for the best design pattern. He was just hinting at problems experts have ran across.
How about this:
Mobile (solves the hover problem) – http://blog.pressedweb.com/demos/list_design_pattern/mobile.php
Web (solves the repeating icon problem) – http://blog.pressedweb.com/demos/list_design_pattern/web.php
I like them. I really do. BUT (and it’s a big one), it doesn’t solve the proposed issue, which is why this whole page was posted. How do you do it elegantly without repeating icons AND eliminate the need for hover? ..Together, within the same solution/gui…
At least that is my take from the brief.
5th comment from the top:
“…Don’t take my inclusion of Zeldman’s tweet to indicate that hover functionality should be abandoned or not even attempted for this project. Just that it should be considered.” – Coyier
Yeah, I just saw that he highlighted it. But it still says it is “Bad”… if you can avoid it therefore, it would be “good”, or at least “better” for the sake of universality.
Here’s my stab at it. Sorry if what I did has been done already, I didn’t have a lot of time to look at all the previous demos. Done using jQuery.
http://jsbin.com/obusi3/110
Added some functionality. I know it’s not the most efficient way to traverse the DOM, but I’m still learning.
http://jsbin.com/obusi3/115/
My idea for the editable list:
Image on Picasa Web Album
This is just an image representation as my coding is lousy lately, although my image creation is equally cheap :-)
Notes:
* Use the form box to add a new entry.
* Drag an existing item to the form box to edit an entry.
* Drag an existing item to the bottom to delete an entry.
Issues: this design will fail on longer lists, unless the edit and delete areas are fixed to the viewpoint – otherwise you could be scrolling forever to get to the top/bottom.
Inspired by what Apple says about it in the Human Interface Guidelines:
“In the first step of this manipulation, the user sees the desired object onscreen. In the second step, the user selects or designates that object. In the final step, the user performs an action, either using a menu command or by direct manipulation of the object with the mouse or other device.”
here is my entry:
http://jsfiddle.net/MG2XE/1/
I do like that Raspo.
Hey,
Here is a try:
horizontal left or right draggable
Use of Jquery UI Draggable
(@Miles Harrison: liked the pics design with vertical sliders)
Love this one. Clever and intuitive.
Had a very similar idea as you: http://jsfiddle.net/wkERr/3/
v 0.2:
http://jsfiddle.net/R9kbF/
.3
Slighly styled version.
(confirm() removed)
to do:
– add viewing of deleted items.
– real edit mode
– something completely different
Do you guys know how to disable text selection when the mouse is down when not using the .draggable() function?
I really like the idea of having all the item options just a flick of the wrist away. But I don’t want to drag stuff all over the place.
I’m not that much of a mobile device user but I think there will be a very obvious problem with this dragging design when using a touch screen.
Say you have a list of 100+ items that you want to display on your mobile, you will have to be able to scroll through the list.
I’m not sure how most device do this, do you just swipe the screen up and down or is there a scroll bar on the side you have to use?
With swiping, how will the device know if you want to just scroll the list or drag an item when putting down your finger.
When scrolling is used your screen gets cluttered with yet another sidebar.
Please have a look at my dialer prototype. It uses dragging without having to clutter the screen when just viewing the list.
As with the other dragging designs I still have to figure out a way to may clear to a mobile device if I want to scroll er manipulate an item when the gesture starts. Double tap and hold, too many clicks. Tap and hold, pop up the options after 1 sec? This would cause some delay in the interaction… I still have to figure this one out.
I’ve managed to fix the selection problem. If anyone’s interested here is the new Fiddle.
I think there will be a very obvious problem with this dragging design when using a touch screen.
With swiping, how will the device know if you want to just scroll the list or drag an item when putting down your finger.
I’m sure there are issues.
In my design proposal, I ‘d assume the actions are triggered when horizontally dragging while you can still scroll vertically.
Regarding draggable, I guess you can manage the releasing of the dragging if the … can you? … have to digg into that…
Wait a minute.
You use two fingers to scroll and that is equivalent to a mouse wheel.
Just need multitouch support for any touch device. That should happen soon.
Would be nice to have the advice of a touching devices power user.
“Would be nice to have the advice of a touching devices power user.”
This would indeed help a lot as I don’t have any touch enabled devices to test my designs on.
Some of the things I’m worried about on a touch device:
-the dialer conflicting with scrolling
-the finger covering the dial icons (I already left out 90° at the bottom of the dialer because your finger will cover this area anyway)
-is the average tough screen sensitive enough the support this kind of interaction
If you want to make your own adaptations please fork the fiddle first. Else my update numbers can become a mess.
I actually have no problem with hover functionality on my phone. I have an HTC Aria (runs Android which is irrelevant) which has an optical trackball which acts like a mouse, but you can also “long press” on areas where you want the hover to show. Obviously other phones don’t have this feature though so I agree that it should be considered on making the UI appear on hover. I still think that hovers shouldn’t be abandoned, it’s a great minimalism tool and there are usually no better alternatives besides just showing it on default.
Here is my version.
I tried to make something more dynamic and easy to use.
The edit and delete buttons works properly.
http://jsbin.com/amequ3
I like the effects, but what if someone actually wanted to click the link?
Yeah. I am working on a better way to enter the edit mode.
I don’t think editing the whole list on the same time is the better way. I am working on a better position of buttons, the missing cancel edit button e then the design stuff.
I hope Chris will not finish this until I post the new version.
OK…. new one: http://tinyurl.com/24z7vgg
(Scroll to bottom to reveal last 3 photos here)
This is an interesting semantics problem, because we’re clearly dealing with list data, but the “edit” and “delete” functions, which need to be accessible and semantically placed, don’t really belong in that data set. At first I was averse to the idea of nesting those functions as a list below each individual name list item, but seeing as they’re some of the main functions of the little application, that may be the best way of doing things, after all.
I think what some people have said here is probably right, moving away from standard conventions is going to get you in a lot of trouble unless you’re 37 Signals or someone big enough to explain yourself to all your loyal followers.
I’ve had the problem where I’ve had a list and too many actions, so icons were incredibly cluttered. I also think relying on hover to reveal actions is problematic, too.
So basically, I think the single “Edit” button at the top, which toggles you into Edit Mode, letting you perform actions on each list item, is probably the most visually obvious, clean, and reliable solution of the ones I’ve seen here and played with on my own.
http://tinyurl.com/256ep37
It’s a little jerky but works for all intents purposes.
The solution is simple, this does not use any hover or combine a singular Edit Button for all entries.
Instead, it works on highlighting the word you want to update. It’s jerky now because if you only highlight half the word, thats what you can edit. Also, sometimes when its highlighted you have to click on it, which I kinda like.
But it gets the job done and I might actually find use for this somewhere.
Works only one time, but nice one ^^ didn’t think about highlighting for edit purposes…
It works repetitively for me, just have to click on the highlight. Either way, that’s something that can be perfected. Thanks!
My bad :D I didn’t understand what you truly wanted to do ^^ Nice one !
One hour work,
Still trying to bind the Remove and Modify… will work on it tonight or tomorrow.
http://jsfiddle.net/zjz9N/3/
All comments are welcome ^^
Just returned to home ^^ Change list
– Added remove capacity
http://jsfiddle.net/zjz9N/4/
Still working on the modifying… lil’ bastard is hard to design…
Hmmm I’m getting near the final version… still have to work on the buttons to show/hide them.
Change list :
– Up & Down arrows for form
– fully editable and removable entries
– Clean the form if mouse leave (trigger if the mouse enter the form)
– Optimization of JS code
http://jsfiddle.net/zjz9N/15/
Any idea is welcome :D
http://www.devseo.co.uk/examples/chris-coyier-example/ – here’s my take. Simple “click-to-active” function, just click the links. You can then change the text and update, or delete the person.
I figured that with the event tied to a link people are likely to realise that it does something when you click it. With javascript enabled it’ll put a nice modal box over the top allowing you to make the changes.
Without javascript you could just link it to an edit function. Tested it on my iPhone and works just fine :-)
I thought, as an improvement you could fade out the whole screen and leave the editable section ‘un-modal’. Will implement that later and post again!
Nice one but here’s the bugs I found :
– You can’t modify an entry twice
– If you try to modify an entry AND you click on another one, the buttons will show on both entries
– You can’t add entries (I’m not sure it’s necesseray though…)
Good work otherwise :D I wasn’t able to use images since I used JSFiddle.
Think I’ve fixed all the bugs now, thanks for finding them! Shows how little time I spent on it :-S
http://www.devseo.co.uk/examples/chris-coyier-example/
I’ll look at adding the functionality to add more list items later on
http://jsbin.com/obusi3/126/
Ok last try I swear. (But then again I’ll wake up in the middle of the night with a better idea)
I love challenges like these and find them really helpful.
I wanted my design to have a simple user level, project flexibility and simple functionality.
Hopefully I achieved this. :D
Pretty straight forward UI (could use some additional styling or larger buttons) and it’s cool you have all the functions working correctly. One thing though I noticed from a user standpoint is that there is no clear way to “save” or exit out of editing a name. Eventually I realized it only actually “saves” when you edit a name and then blur, but if you don’t edit a name that you click (say a user is just messing around) there is no way to exit out of that editing mode. Once you include that it will be pretty solid I think.
Here is my version, works best in Firefox, didn’t test anything else because of time.
Clean List
I fixed up a prototype of a concept I have had on my mind for quite some time. It’s for from finished but I think it’s functional enough to prove its usefulness.
I’m not really sure how to described it. I call it a ‘dialer’ just to give the child name. But enough with the chit chat, like with any good UI there shouldn’t be any explanation needed to use it so click away: fiddle
Like most of you will notice, the selection of text when trying to ‘dial’ really messes up the experience. If someone knows if there is a way to disable the selection of text please let me know. This would be a huge improvement already.
Just to be clear, the 3 dials represent: read, update(edit) and delete. So the only thing I’m still missing is a create function to make it a full crud.
My unclosed link tag just closed itself, awesome!
For all the click haters in here, check out my fiddle and be amazed. view, delete and edit with just one click!
Nice!
I’ve managed to fix the selection problem. If anyone’s interested here is the new dialer v0.2, enjoy!
The only working action so far is delete, for which I’ve added a conformation to prevent accidental deletion.
The other actions aren’t functional yet. I think I’m just going to leave them open. Their implementation depends on what’s inside the list. I assume you won’t just be putting names of people in a list. I’ll try to put up an example to illustrate one possible way of viewing/editing.
There seem to be some problems with the dial popping up when not using Firefox. So if your experiencing any troubles try viewing in ff.
Great! Looks very fine in FF.
I was thinking maybe:
-action on fast click
-dialer appearing on few ms maintained click
But maybe, it is just fine.
I also find the dialer masking the content a bit troubling, I’d suggest:
-smaller dialer
-dialer appearing slightly above the cursor
Gambatte!
Concerning the dialer size:
At the moment I’m still using png’s but I plan on using lossless svg images instead. I have all the illustrations as vector graphics so this shouldn’t be much of a hassle.
Once the png’s are replaced with svg’s I can scale as high or low as I want without losing image quality. Which would allow to scale the dialer size with the size of dialable element that called it and it will always look great!
Regarding the draggin/scrolling issue.
– The dialer appearing after a few milisec maintained click
– The dialer being released on a move > to dialer size
“The dialer appearing after a few milisec maintained click”
This looks like the best solution at the moment. What bothers me about is it though, is that it will delay the user. So I’m not that sure about this yet…
“The dialer being released on a move > to dialer size”
Like you mentioned before the size of the dialer size needs some fine tuning so it is smaller and in proportion with the dialable element.
A smaller dial and the restriction to only release inside the drawn dial would require the user to be a lot more precise when selecting an option.
Now you just flick your mouse/finger in the right direction and not worry about perfectly hitting the dial icons. Which is one of the biggest strengths of this dial interface. You can make a sloppy gesture but as long as it’s in the right direction you get the wanted result.
This is my approach…
http://jsbin.com/eleqo4/2
Sorry if something goes wrong, I’m new to jsBin…
Keypoints:
– Gesture: Only click/tap (no drag, double click, etc)
– Color language: Green for Save, red for Deletion (with confirm) and black for Undo (neutral).
– Keys: ESC for Undo, Enter for Save.
Regards!
Sorry about filling only three LI’s… I’m so lazy… :P
CHROME tested only…
Update/bugfix
First version was a little buggy.
Here’s new:
http://jsbin.com/eleqo4/4
– Before you needed three clicks to confirm a deletion: click, delete, confirm. Now it’s click, delete, but you have an Undo option on the feedback message.
…and here is my contribution:
http://jsfiddle.net/fRD6h/
There is one repeated element in there but I thought it was necessary in the end. In this case, the checkbox is subtile enough to avoid distraction, but at the same time visible enough if you actually want to delete something.
Checkboxes are also something we all are used to. Don’t make me think!
I tried some different approaches but I ended up with this one because of these three key functions:
1. Easy to edit one or multiple items. It toggles html5 contenteditable on the links.
2. Easy to delete one or multiple items.
3. Works great for both mouse and touch devices.
I’m aware of that this example currently works only in modern browsers, but it’s just a concept and can easily be IE6 compatible with some extra work.
I hope you all like it and would love to hear your thought on it!
What if you’re scrolling a list filled with 100+ items and you just reached item number 101 and decide to edit it. You will need to scroll all the way up again, unlock the list and scroll back down again to look for item 102, oh wait or was it item 99?
We can use position fixed on the header with the buttons, and that problem would be solved.
Fixed header, can’t think of a better solution! I really like your approach, at least some worthy competition!
The only thing that still bothers me about it, is how many clicks it would take to delete just one item. 1:unlock, 2:select, 3:delete, 4:lock again.
I’m stunned at how much interesting stuff is going on here. Great work everyone! I’ll plan to do a wrap up of this early next week and highlight all the interesting ideas. Unfortunately, only one can win. Next time I’ll have to get more prizes.
I really like the approach that Jonathan came up with and feel that it solves many of the issues that we’re trying to solve for without any overkill. It provides a great experience in browsers capable of processing CSS3 but is still good looking and functional in older browsers (um… IE). This approach is also a single solution for both desktop and mobile devices and could be made to be scalable using percentage or em-based widths.
Switching the “Edit” and “Delete” buttons seems more intuitive to me… there’s less chance for an accidental delete when attempting to edit (I’m thinking mobile fat fingers here). If there is an accidental delete, I thought it might be good to provide some way to get back to that data and restore it if needed. Anyway… here’s my slightly tweaked take on Jonathan’s list:
http://jsbin.com/ebama/2
Great work! Has a nice look and feel, and is intuitive to use. Thumbs up; add the possibility of submitting further list-entries, and this will be my #1 :)
Well I’d thought I’d try a quick mockup of my idea, but oddly enough once I started I enjoyed learning the jQuery enough that I went along and made it an almost complete thing. It is fully functional though the layout and styling is not fully refined. What I did do was remove all of the presentation from the markup and made it so it can be placed multiple times on the same page while storing the saved values in a cookie which is read when the page is accessed.
Here’s a sample of the markup (full source can be grabbed from the link below)
http://chartreuselabs.homelinux.org/csstricks-list/list.html
Please tell me what you think of the design and if I should do any improvements on it.
Wow ! 21 fiddle and I’m nearing the end…
http://jsfiddle.net/zjz9N/21/
Just have to work on enabling the control if the list is big so you don’t have to go back to the start to use it :D
The one thing I would say about this (other than really liking it!) is I would make the icons a little clearer before hover because I could hardly see them on my monitor :-)
Thanks :D
It’s the legacy of the first versions, the controls were slightly faded so you had to hover them to use them. In the newer version I changed the way it works and didn’t change the color :P
Thanks for the observation ^^ Will add it to the next version.
Dig that one.
That’s it for me :D
http://jsfiddle.net/zjz9N/25/
I can’t get any further than that (and I love 25 ^^). Can work on smartphones since it don’t use hovers (switched with :active for clicks, fancy :P) but not easy to use if the list is long…
Further upgrages :
– Adding jQuery function for modifying – scroll to the form, modify and then go back to the list item (index is easily fetchable)
– Icons…
– Capacity of adding links instead of plain text, just have to change the indexOf() to fetch the second “<a " and not the first.
– Coloration of the text maybe :D Color wheel time!
Any other ideas ?
This one is very strange to handle: First you have to guess, what this arrow in the right corner might be. The “X” and “#” symbols are badly chosen too – icons would be a lot better!
Sorry, but because of the number of usability problems this wont be the solution.
May be something like that (it’s just a mockup, nothing there works)
http://jsbin.com/obusi3/134
Side note there: if list gets long, those labels/droppables have to be always visible when list is being scrolled.
It doesnt rely on user figuring out additional gestured on his own (double click, right click etc.) and it doesnt rely on hover, which means that you can have just one version for both desktop & mobile.
Quite good :D
Didn’t thought about that ^^ But will it works on mobiles ? For iPhone sustained click is considered as “COPY”… dunno for other smartphones.
Otherwise, nice one :P
Thank you :)
As for mobiles – no idea, one can only hope… :) Perhaps they use some sort of touch events instead of mouse ones.
I made a PDF, it’s here => http://cl.ly/60a7e23f3252abe33f9c
Here’s what I came up with: http://jsfiddle.net/Jfcum/8/
Hovering over each list item displays the action buttons and also underlines the text indicating that it is also clickable.
For users of touch screen devices, the same functionality is also bound to clicking/tapping each item which makes it usable for them (tested on my iPhone), although an extra action is required.
My favourite so far! It does everything, and looks really good. Nice job!
Verry nice indeed!
My contribution:
http://jsfiddle.net/HAgz5/5/
Some points to highlight:
– You can edit and delete multiple itens (good for experienced user)
– The Buttons appear in the top and in the end of the list.
– Just used four icons
– To mark the checkbox, just click some area of item
Like this idea, got me thinking…
here is my take on it: http://dl.dropbox.com/u/6774619/List%20Functionality/test.html
iPhone portrait view ready… (landscape would just take more css tweaking, images not optimized so you may see them magically appear on 3G)
Unlimited adding. Deletes on empty & prevents adding of empty elements. Inline editing and multi delete. Doesn’t play great in IE (7 likes it the best though, strangely enough)
relies only on single clicking making it touch friendly.
Wow ! Best one I think ^^
Works like a charm, quite smooth and no execution bugs :D Mine still have a long way before getting to this level…
Anyway good work on this ! Hope you’ll win !
Thanks Damien… don’t worry all it takes is some time and practice until it gets easier to turn the ideas into tangible solutions.
Also I made a few improvements:
Added keyboard shortcuts for browser users to enable speedy changes and creation of items.
Made improvements to some minor hangups usability wise for browser and phone.
Blank or empty items delete themselves automatically.
haven’t decided about tackling sorting yet.
Thanks for the tips :D
Just one little thing I noticed with new version :
– When you click to modify, current value is selected and if your press n(or N) it adds a new row instead of putting the new value.
That’s all I found since you updated ^^
I got enough to learn about jquery now just starting from jsbin/obusi…. has wonderful posts. Nice work guys. You already gave me lots of gifts. I hope now I can become a good beginner of jquery. :)
How about having one item preselected with all the extras showing. The aim is to be visually intuitive without the need to read instructions.
Here’s a visual mockup of the type of thing:
http://img.skitch.com/20100924-k22tec1u2ujtafursrda2wcuqe.jpg
I don’t have the coding skills to know how realistic this is.
Code wise this would be very doable.
Do you want those big floating triangles on the side to stay in the final design or are these just for illustration? Because I think that giving the selected item a more contrasting background and text color than the other items, would already do the trick.
The triangles, and more importantly the arrows, are to make it look like the whole selector thing is moveable, and also that there is no particular relevance as to which of the items is preselected.
It should just look obvious that clicking on a different name will highlight that name and the buttons will appear.
If it’s not obvious, then the design has failed.
They look a bit clunky as I’ve drawn them. Maybe something more elegant. Perhaps just a lozenge with arrows and a highlighted background.
I’m going to include a link once I’m done with the JavaScript. But I think that Jim’s Idea is pretty good. I think that this idea should use keyboard shortcuts as well. For example the first one is already preselected and all the images are preloaded (through CSS Sprites to reduce HTTP requests and increase page-loading speed).
Then you just press the ‘Down Arrow’ Button and it selects the one below, and if you press the ‘Up Arrow’ Button it selects the list item above it. And 1-9 list items can be selected with the shortcut “Ctrl + (1-9)” And 10-20 list items can be selected with “Ctrl + Shift + (1-9). And the last item can be selected with “Ctrl + 0 [this particular and other odd shortcuts will be in the instructions above/below]”. To choose to Edit or Delete, once the desired list item is selected, you can press “Ctrl + Up Arrow” to select Edit and “Ctrl + Down Arrow” to select Delete. And delete will have a prompt box. And If you select Edit then the text will be shown in a text box in place of the text.
To use the mouse on computers that support mouse-over’s, you could use hovering for showing functions. Like if you hover over an item list, then the list item background changes color and the edit and delete buttons become visible. For iPhone users, there will be a radial slider beside the list items, and it will work just like the physical touch-enabled slider-thing in the classic iPod (the iPod with about 160 GB storage). You draw circles with your fingers around the radial slider and then the next item is select. It should be like for circular movement of 1/16 of a circle, the next item should be selected. So if you draw a full circle with your fingers, then you will be 16 items ahead of the item that was selected before you drew a circle (on the slider of course). And for other non-smartphones, there would be a version where there are repeating icons on clicking the edit button, which would always stay on top of the phone (this should be implemented so that it is supported in all basic phones also).
I hope everyone understand what I am talking about and I hope I finish making this thing before someone else makes it.
And the iPhone version of the list should also be served to Android phones and other touchscreen phone devices.
“this particular and other odd shortcuts will be in the instructions above/below”
Nobody will bother reading the instructions or use the shortcuts. Keyboard shortcuts could be a nice addition but if you want people to use them they should be as obvious as possible. Enter to confirm something, backspace to delete, ctrl+s to save. Using some exotic key combinations that need instruction manual to use don’t make much sense, you want your interface to work out of the box.
“For iPhone users, there will be a radial slider beside the list items.”
I’m very curious about this. Would it be possible to use it in a normal computer environment as well? I hope you get it working so I can see it in action!
Android inspired http://jsbin.com/obusi3/158
How will a first time user know there are extra options available when he holds down his mouse-button/finger?
Maybe you could blink the edit and delete buttons when a normal click occurs? So the user at least gets a clue of extra functionality being available.
Revision 2 with your suggestion :) http://jsbin.com/obusi3/160
The biggest take away for me is this: Design for mobile first, then have a backup for screen.
I agree… make it as functional as possible for the mobile since it has the most limitations… you can always take advantage of the browser’s functionality later without hindering the mobile version.
My contribution
Only html+css, so buttons don’t work.
Here’s a [very cheeky*] example:
Example 1
Key points:
1. One item is preselected. All the gubbins showing, the rest of the list is clear.
2. No unfamiliar elements. We know what to do with a button.
3. No instructions. We tend to just click and see what happens before we read anything.
4. Appears interactive and predictable. Without clicking anything we know what will happen if we do.
It would be interesting to do some usability testing. Find someone who hasn’t seen this article (preferably not tech-savvy), put them in front of the web page and tell them to edit one of the list entries. See what happens.
[*apologies to Chris for lifting his code….so soon after the scraping article.]
wow nice approach, very good for a list which involves different contact locations or places.
here is my go it utilizes drag and drop for the actions
it gets the user to think of the utilities and what they can apply them to rather than
than the other way round thus getting rid of the multiple edit delete buttons
http://jsbin.com/akora3/18
Hey Chris! Hope it is not too late. I have been trying to keep up with the AP classes with my High School. Anyhow, I have used what time I have had to make this example:
http://www.exampleforchris.caulfielddesign.com/
I figured that if I knew only a little about a list and wanted to edit, it should be as easy as “the click of a button”. So I stuck with the basic click the name and options drop down in their own division. Click the name again to hide your options.
For these types of things I feel that we sometimes go too far. We try soo hard to make something simple for people, that it becomes too complex for them.
HOme this isn’t too late! Thanks,
Kevin Caulfield
Hello Chris,
Hope it’s not too late to submit… here’s my entry:
http://listdemo.igramsey.com/
I used standard edit and delete icons, and as you can see, clicking the edit button shows the editable input for each name. The whole thing was done with jQuery.
Note: the names can also be re-ordered in the list by dragging (thanks to the jQuery UI).
a little too late but i hope you guys like it anyway.
http://jsbin.com/ecima3
functionality works for both mobile and desktop browsers by clicking the gray block on the right.
special functionality on desktop devices:
mousedown on the gray block to access the funtionality of delete and edit.
mouseup on the buttons edit or delete to access them.
for the primary functionality click the linked names(Jimmy Rockysocks, Suzy Sandstorm, … )