2

I am designing a UI that includes a list of items that you can add to or edit. When you click on an item it turns into a text dialogue. When you click off or hit "enter" it saves the changes. Does there need to be a placebo "ok" button as well?

Similarly when you click on "Add new item", do I need a placebo "add" button as well as a cancel? Should the placebo confirm button be in both or just one mode?

enter image description here

Improve this question
1
  • 3
    I would not call "Add" a placebo in this situation. It seems to be pretty necessary and can go along with your "Hit Enter" functionality. Also, when user clicks off, I think it should cancel the operation rather than adding a new item. User may click outside if he accidentally hit the add button.
    – Mohit
    Apr 4, 2013 at 3:27

4 Answers 4

Reset to default
2

Whether or not you need to be able to cancel an action (edit or insert) is dependent on the consequences of the action. Does adding or editing an item have immediate consequences for the user (i.e., is business logic executed, etc.)? If not, it may be OK to leave out the cancellation option - the user can always delete the item, change the value, or go back.

If the action has significant consequences, an additional confirmation and way to cancel the action is desirable from a UX perspective.

Improve this answer
2
  • To add on to Joshua, in general, I think that anything that is not able to be undone easily (i.e. no Undo button), there should be a confirmation.
    – Dave Luciano
    Apr 4, 2013 at 5:35
  • To Dave, this could be frustrating and annoying if this is an application that single users use frequently to undertake repeated tasks, especially if the item is small and easy to re-add
    – Valeria Spirovski
    Apr 8, 2013 at 8:57
1

In one of the heavy applications in my company I have developed almost identical UI as you have provided.

  1. There is only one button that I provide (Add a group) which immediately shows an input field without a confirmation.
  2. To cancel, a user may press an Esc key.
  3. To save, just like you said, press an Enter key or remove focus from the input field.
  4. To delete, a user needs to hover over an item, in which case the Delete button appears. When a user clicks on Delete, only in this case a confirmation box appears and asks to confirm this action.

Here are the goals behind this implementation.

  1. I want a user to be able to perform actions as quickly as possible using keyboards. All of the above actions can be performed with keyboard shortcuts. This also means that to achieve a certain result, I don't want users to click several buttons. It's best if you can accomplish a certain task with as few steps as possible.
  2. After using Asana task management system for almost two years, I realized how powerful it is to control the flow via keyboard. So, I want to provide this benefit to the users of our company service.
  3. As @Joshua Barron mentioned, you need to consider the consequence of the actions. In my case, nothing happens when a user adds a group. In case he changes his mind, he may easily remove the group.

No matter which pattern you choose, I hope it will serve you its best.

Edit:

Forgot to mention that there is a "Guide" which is launched the first time a user logs in to the system. The guide walks the user through the common actions as well as introduces the keyboard shortcuts. During their work, users can display the shortcuts by pressing a specific Help button at the top right of the page. This makes sure that every user is familiar with shortcuts.

Improve this answer
5
  • Add on enter I understand, but on focus loss? That would mean I need to delete something that was added because focus was accidentally taken away from my text box? (May have had to switch to another application because someone interrupted what I was doing). And I even have to hover to do so?
    – Marjan Venema
    Apr 4, 2013 at 16:55
  • Marjan, I don't think that's a big problem. It's consistent with idiom. If you create a TXT file on your local machine, and you're naming it then accidentally click off, the file remains created but you can easily delete it. It's an inconsequential and reversible action.
    – JClaussFTW
    Apr 4, 2013 at 18:37
  • Not just when you create a file, even when you rename a file and switch the window, it gets renamed. So, this behavior has been adopted long ago. It's intuitive and requires less actions to accomplish the user's goal. One disadvantage is that you have higher load on the server, but this is a different story. In our case, we prefer to provide a better UX and handle the server load no matter how bigger it is.
    – esengineer
    Apr 5, 2013 at 3:04
  • This is great for expert users, but has a high learning curve and low security for beginner or casual users. You should maintain keyboard short cuts but provide obvious cues for new users.
    – Valeria Spirovski
    Apr 8, 2013 at 8:59
  • Forgot to mention that there is a "Guide" which is launched the first time a user logs in to the system. The guide walks the user through the common actions as well as introduces the keyboard shortcuts. During their work, users can display the shortcuts by pressing a specific Help button at the top right of the page.
    – esengineer
    Apr 8, 2013 at 9:02
0

Users tend to do things in their own way. So you interface must be able to cope with both keyboard and mouse interaction

forcing a user to confirm his action also gives the user the opportunity to verify the input/action. Forcing a confirmation when deleting data that can't be undone is considered almost standard because they will blame you when data got lost in this way.

I would use a common "Add" button like you "Add new Item" and then in the new line a "Save" (Not add) and a "Cancel" button. Leaving out a "Cancel" button is, I think, not an option as you will generate unnecessary traffic to first add and then delete the item. Especially when you have auditing in you solution. Audit log should be kept as clean as possible to better be able to trace changes The "Cancel" button is also important when allowing to change an item. The user must be able to undo his work before saving

When deleting I would show a popup for confirmation.

Improve this answer
0

Firstly, you should do some usability testing with your interface to see how well users pick up the functionality. Highly recommended and effective.

However to give some advice regarding your interface:

You should provide a more obvious way to enter edit mode. Users are unlikely to recognise invisible or hidden features. They will not likely guess that clicking on an item will edit it. Also they should be able to delete it without going into 'edit mode'.

A great way to overcome these issues is to show an edit and delete button next to each item on hover. You can keep the 'on click' edit mode but provide more obvious access to your users.

You should add a functional 'save' button to your edit and add modes and keep them consistent. Users will not know for sure that hitting enter will save their content, having a save button will give them security. Some users are not familiar with hitting enter and will instinctively look for a save/add/confirm button.

Keep the interfaces the same - hitting 'add new item' in the first instance creates an item, thereon after the user is editing this item. To illustrate - when you 'create new folder' in windows explorer you don't need to hit another 'add' to add the folder. If you exit the name definition field without changing the name the folder still exists as it's been added.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.