Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The users have a table and in the last row they have 6 different text inputs, one per column.

enter image description here

This inputs will define a variable in the Database. I am trying to think how can I do it to avoid creating a "save" or "submit" button.

The simple way would be to create a combobox with the values, once they select an option, this would be sent to the Database and saved. The problem is that the values can go from 0 to 99 plus "no limit".

It sounds like a very large select box...

How would you solve this problem? Any ideas for a better user experience?

Since the save is carried out without reloading the page, when do I execute the save? Everytime I type a character?

Thanks.

share|improve this question
    
Related: Usability of hiding the submit button –  Matt Obee Mar 22 '13 at 11:31
    
You can use jeditable appelsiini.net/projects/jeditable/custom.html. On mouse over, or click out of the input box to save. See the demos. –  loops Mar 22 '13 at 16:25
add comment

4 Answers

up vote 8 down vote accepted

If not showing a submit button is a way of keeping your interface clean. You could also opt to show the submit only once the field is selected. When you submit or click anywhere else, the field is deselected and the submit is made invisible again.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Sounds interesting. –  Steve Mar 22 '13 at 12:18
    
You'd need to consider what happens when the field loses focus, without clicking submit. Does the number remain as 56 (as in the example), but somehow indicate that it hasn't been submitted, or does it reset to 0? You could also think about keystroke behaviours, does the entered value 'submit' if the user tabs to the next box? Does hitting return/enter have the same effect? –  paulseys Mar 22 '13 at 16:02
add comment

This sounds like a case of inline editing. We use inline editing across the app that we're developing. What it means is that the data is saved to the server via ajax without a page reload.

Since there is no page reload the user needs to get feedback to show him that he has triggered a save, which can be done by highlighting the saved field (our field flashes green when it's saved or red when there's an error) or by showing a notification somewhere on the screen that notifies the user of a successful or failed save.

The notification needs to contain appropriate error/success messages.

UPDATE: I think the appropriate time for an update to the server would be when the user finished typing, when the field is blurred (When the user clicks away from the field)

share|improve this answer
    
But, when does exactly the input is saved? On click out? On update? What if you are typing 1234? You will save 1, then 12, then 123?? –  Steve Mar 22 '13 at 11:18
    
Depends on the application. I'm updating my answer, you should update your question too to include these additional questions... –  nimrod Mar 22 '13 at 11:27
add comment

How about when the user clicks/tabs away from the field after entering the value, you change the color of the cell to green or something to indicate the value has been accepted.

share|improve this answer
add comment

We use some kind of solution which nimrod mentioned in his answer. The only difference is that we save data after some timeout, say 3-5-10 seconds of inactivity after beginning of typing in the first symbol into field or, of course after leaving the field. This timeout is configurable in our system.

Of course you should indicate to user what is current state of field being edited. We use the following scheme:

  • no border around input text box - value is saved
  • border around input text box - value is currently being edited

As for "no limit". Depending on particular system sometimes 0 can be used as "no limit set". If value of 0 means that corresponding entity is disabled, maybe you should add separate control to reflect this - checkbox or something else.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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