13

I have a dashboard with a few tasks in a laboratory application, and each task has a large number of data displayed in the data grid. I need to implement the edit functionality of a record. What is the best way to do it?

  1. Double click the row to make it editable?
  2. Provide a edit icon in the end of the each record?
| improve this question | |
  • can you please add an image? – Eran Bar Jan 23 '17 at 9:47
  • Is it an app that runs as a desktop application or in a web browser? – Alvaro Jan 23 '17 at 9:50
  • provide an image..how your table looks like? – NB4 Jan 23 '17 at 10:00
  • Yes this is run in browser as web app with responsive layout. – NPN Jan 23 '17 at 22:50
10

You can do both:

Icon will serve for discoverability for first time users.

+ Visible and findable.

- Small click target.

Double click is a productivity shortcut for advanced users.

+ Large click target (whole row), fast.

- Invisible, needs explanation.

Don't forget a way to convert people from beginners to advanced users - for example, by a clue (row does react on hover) and by info (add a note to edit window opened by button 'Note: you can also edit rows by double clicking them.' or to button's title/tooltip).

EDIT: Also, what's the typical action? Will the user want to edit the whole record, or to fix a single attribute? If they often need to fix a single number, double clicking the table cell could do a fast inline edit (replace the table cell with input, save on <enter>, clicking outside, or on a small inline OK button).

Observe what people do, make a shortcut to tighten their interaction loops. For example:

Before:

  • find an edit button for a record
  • click it
  • wait for a window to open
  • orient myself in an opened detail (which is probably laid out vertically instead of horizontal row I was opening)
  • find a correct item
  • focus it
  • fix the value
  • find save button
  • click save

After:

  • point at number I want to change
  • double click
  • fix the value
  • hit enter or click save
| improve this answer | |
  • Thanks for the great explanation. this functionality will do editing for one or more fields, depend on the requirement of the user. So most of the time it will be more than one. – NPN Jan 23 '17 at 22:54
7

Don't rely on double click to edit.

Double click is almost not used on the web. As far as I know it is only conventional for zoom, because the single click already has an action assigned.

Use a cursor change (to pointer for example) when something happens on click. You can also use an edit icon for better affordance that can always be there or appear when the mouse hovers over the field.

| improve this answer | |
  • Yes, this. Axosoft uses double click for some things and it's ultra annoying (on top of many other things). Use an icon. – coblr Jan 23 '17 at 20:51
  • Initially I was thinking to minimise the time and mouse movement with double click. however, if I need to include edit icon, I have to do it in action column which is at the end of the right side of the table. – NPN Jan 23 '17 at 22:56
  • @NPN Why can't the edit be called with a single click? – Alvaro Jan 23 '17 at 22:59
  • @Alvaro well, I didn't really think about single click for edit purpose, from the user experience point of view, do you think that would be a good idea? – NPN Jan 23 '17 at 23:05
  • 1
    @KristiyanLukanov if there is a checkbox, the selection action could be assigned there..I'm thinking of something similar to this image. But as I said above..without more context (and some visual hint) it is hard to tell what is better. – Alvaro Jan 24 '17 at 9:33
2

I think it will be depending on your page functional - is it a regular data display or edit page? For clarity it is better to put small edit icon on the right of each row, but if you want to click it to edit you should put a note as a subtitle "click to edit".

| improve this answer | |
  • Thanks, yes i think note make sense for this situation. – NPN Jan 23 '17 at 22:57
1

Do both. For a MySQL database, there exists phpMyAdmin which allows people to view the contents of their database, phpMyAdmin supports both, and both are great!

If I want to change a lot of info I click the edit and then get a complete form to edit the whole row.
If I want to change a single value, I double click and the cell changes into an input.

The fact that both of the options exist, saves me a noticable amount of time.

In terms of UX, I suggest you make something like a tooltip or a small legend as double click isn't very common in websites. But, uncommon != impossible, nor unpractical. I'm assuming lab people are somewhat similar to power users, and we love this kind of data editting.

| improve this answer | |
  • yes, thanks for the input. I will take all of these as guidance. – NPN Jan 23 '17 at 22:59
0

I think you should display it icon so that user can easily understand oh i cal also edit it this is very important to show in User interface what is the purpose of the information and how we can use it.

Thank You

| improve this answer | |
0

It really depends on the platform.

You should avoid using double-click on the web as stated on nngroup:

double-click must die since it causes novice users great difficulties and since it conflicts with the single-click interaction style of the Web.

Taken from this answer.

| improve this answer | |
0

You can give check boxes for each record and give button at top of the table saying EDIT followed by an ICON. It'll be crystal clear for the user to select individual record and perform the operation. When multiple records are selected EDIT will become DISABLED.enter image description here

| improve this answer | |
  • 4
    This requires a lot of click and precise mouse moves to accomplish a simple task of editing a row, and also it's an indirect manipulation (edit action for row is elsewhere than the row itself). If that's done often, I'd advise against this. – Tomáš Kafka Jan 23 '17 at 9:55
  • This is also good way,Since lab tech are really busy on their data entering schedule, we might need to minimise the time they spend on each task. but this is clear to me. – NPN Jan 23 '17 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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