0

I'm finishing an application and the UI of the approval was quite bad. Because the program is hitting production, I'm changing that UI.

Ignore the foreign language, this is just a code+description form and the images don't sync with the action, the first one is adding and the second is editing.

Here is the old and shameful UI:

Old

Here is the new UI:

New, in english

Notice that I changed the way that the user can navigate, the old form was using arrows with first/previous/next/last actions. The new form uses a TrackBar with a count of the items (6).

Should I still use arrows? stick with the TrackBar? or maybe both?

EDIT

Okay guys, my question is Should I use a trackbar to let the user navigate to a next item of a list of itens and populate the form with the data at selected index?

  • Could you give example images in English instead, so the majority of this site's users can understand the use cases? – Danny Varod Sep 9 '14 at 18:51
  • I don't know what your use case is, however, have you considered using a load on scroll down UX instead of a pages-like UX? – Danny Varod Sep 9 '14 at 18:52
  • The data is not important, it's just an example. If you click in the top-right button, it opens a dataTable with all itens. That's what you're asking? – Nicke Manarin Sep 9 '14 at 18:58
  • I did this page-like UX because the description of this form (the big textbox) can go wildly to 1000+ chars. – Nicke Manarin Sep 9 '14 at 19:01
  • 2
    No. The data itself isn't interesting, however, without it I can't tell what the flow is e.g. do you need to select one, do you view them all and edit some, ... ? – Danny Varod Sep 9 '14 at 19:02
1

Neither a trackbar nor first/previous/next/last buttons are intuitive ways to navigate a list of items. Reasons:

  • They are not idiomatic - these controls have other, well-defined uses. A trackbar is usually used to select a level of something. The buttons are more familiar for navigating media, such as songs or a slideshow. The user won't expect them to be used the way you have used them, making it confusing.
  • You can only see one item at once - normally, the user should be able to see all list items in some way to set the context.
  • It is unclear what happens to unsaved edits - In your interface, the user can edit one record, then move to another record without saving. What happened to those edits? Were they lost? Will they all be saved when you close the dialog? It is not clear (in most applications the user is prompted to save unsaved content before leaving the page it is displayed on).

While it isn't quite clear what your application does, you almost certainly should have a list that displays all items in some form. How much you display for each item and how you edit the items are questions that depend more on your specific use case.

  • My first reason to use a trackbar was that a user may get a little upset to press the search button everytime to edit another item. The user can see all items in the search button (top-right) and select one to edit in this page. You are right, it's unclear what happens with a unsaved edit. I'll make sure to warn the user about that. – Nicke Manarin Sep 11 '14 at 14:52
0

If the user needs to step through each of the records then I'd recommend treating this like a wizard wherein you have a next button at the bottom of the page in place of the save button. I would make that button larger or a different color than the other buttons to make it clear that that is the main action. With this change, you are asking the user to enter a code, enter a description and click next. In your example, where there are six records, the user can repeat this progression six times. When she reaches the final record, change the button label to Finish. If the records are optional, then include an extra button to finish and close out. A workflow that starts at the top right and moves down the page and ends bottom right is the usual flow for a page, at least in Western countries. The flow of the original screen is awkward because the user is expected to enter a code, move down to the description and then move back up to the next / prev buttons and then after entering all six, go all the way to the bottom to click the save button. This down, up, down, up, down all the way cycle is hard to figure out. The second screen shares this maze of a flow so whether regardless if a slider is a better control than arrow buttons, the workflow remains unnatural.

A source of problem here is in trying to stick six records into a form that would work much easier if there were one record. I assume the user is coming from a table etc. and you could greatly simply the form by only handling one record at a time.

Another issue is the Delete button who's purpose is unclear and seems kind of scary - like I'm deleting everything. If this button is meant to delete one of the records, then consider relabeling it.

The term records is database jargon. If you could come up with a more humanistic label then I think the users might have an easier time understanding the purpose of the form.

  • With that window, the user can edit 1 service at time, but there no need to edit all. So the delete and save buttons works only for the selected item. Yes, "records" can be replaced for "services". – Nicke Manarin Sep 11 '14 at 14:42

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.