1

enter image description here

I would love some advice on how to make this window as clean as possible. There are a lot of buttons and I'm trying to figure out how to display everything elegantly, keep it simple for the user, and make sure all major functionality is there.

There are 4 main options the user can take to configure their template and 4 options after it is configured. Ideally I'd like to display them all face up, so that choices are clear from the beginning, but is it overwhelming to open the popover and see so many decision points? Is it better to have 2 combo boxes and make the user select the dropdown to see all options rather than presenting so many buttons right off the bat?

Updated: The end goal here is to configure a view for a supply chain worklist. "View" is already a solution specific term that must be used, so I am calling these templates "displays". The worklist is a spread of information about item; lot #, status, etc. and the display that is chosen determines how that spread is configured. I don't have any mock ups of the columns in the spread yet, but am including the page header, where the user will select the display that is being configured in my first visual. As for the difference between "add" and "create new". No difference really, but I am looking for a way for the user to be able to "save and close" in one click. Because they will potentially be creating multiple displays at one time, I want a button that will save their current work and launch the add functionality at the same time. "Save" will simply save what they've done and allow them to review configurations/select another to edit, and save and close will save and close the dialog. I hope that is somewhat clear. I've been pondering over these actions; how to best name them and how to keep the number of clicks to a minimum and this is where I've landed so far. It would obviously be a training point for the end user, but once the difference is explained, does an "add" and "create new" seem redundant?

enter image description here

Improve this question
4
  • I think we need more context and an example of content, plus, some detail about functions, what is the difference between 'create new' and 'add'? Could you show us an example of the content this creates?
    – Toni Leigh
    Mar 7, 2016 at 22:01
  • Thanks for asking additional questions. I've added some more information to hopefully help clarify.
    – Christine Ketterlin
    Mar 7, 2016 at 22:19
  • 1
    I usually want to know what's the next step for 99% (or most) of the users and design to support that. The 1%'s steps can be made less salient or hidden in menus.
    – Ken Mohnkern
    Mar 7, 2016 at 22:40
  • Agreed. However, I don't know that I even have an 80/20 use case. The could create multiple displays all at once, and I assume that will be most common when first using the tool. After that, I assume it will be more one off, but this is a brand new tool and I'm not sure. So far feedback has been more from the view of the DBA, not the end user. "Rename" is the only option that I think will be used rarely. The others could potentially be used any time this popover is accessed. In a case like that, still hide some or put them all face up?
    – Christine Ketterlin
    Mar 8, 2016 at 16:46

3 Answers 3

Reset to default
1

updated

Here's a few points:

  1. Use icons: icons can say what would otherwise take a whole sentence.

  2. Group similar items: Show the relation of functions by grouping them together. Keep other items away, especially things like "delete."

  3. Keep UI away from the content: The content of this is the configuration, so make sure that content has plenty of padding around it, while the buttons and other UI can be bundled along the sides of a popup. The best UI is the UI you don't even notice, so keep it swept to the side so the user can focus on the task.

Improve this answer
3
  • 4
    Uh oh. I'm not too sure about point 1... Icons have a tendency to be ambiguous and vary meanings from one user to the next!
    – UXerUIer
    Mar 8, 2016 at 2:49
  • 1
    @Majo0od: That depends on the icon I think. But you make a good point. Some can be rather ambiguous.
    – invot
    Mar 8, 2016 at 14:58
  • About icons: I am wondering when the last diskette will leave our screens. I've used them, but then I'm past 50. None of the young folks has ever seen one, much less used one. And I couldn't interpret the middle one here, presumably for copy. My advice is to stick with text.
    – virtualnobi
    Mar 9, 2016 at 7:35
1

you can try using a natural language form. something like

http://tympanus.net/Tutorials/NaturalLanguageForm/

These kinds of form are particularly good when there's a lot of options and fields to fill out and you don't want to overwhelm the user with too much inputs.

Improve this answer
1
  • Loved this. Wouldn't be allowed under our style guide for this framework, but I'm going to keep it in mind going forward. Thanks!
    – Christine Ketterlin
    Mar 8, 2016 at 22:20
0

I may be entirely wrong, but... What I am wondering when I look at the two images you show, is this: Why ist there a "Display" setting at all?

The page header (second image) contains what I would call "filter conditions", such as "location=key west". The "display" also contains such filter conditions, i.e., "lot status=active". I wonder why the same stuff (filter conditions) should be put into two different places. Considering you have only three filters in the display (lot status, expiry, classification), I'd think about moving them to the page header, and get rid of the "display" concept entirely.

Frequently there are two different things to specify about tables, namely content (which rows to display, controlled by filters) and presentation (which columns to display, how to sort or group the rows). These two parts should be separate, and the presentation (your "display") should be moved out of the way (maybe in a pop-up as you have it here), since users will more often want to change the content, and less often change the presentation.

But from what I gather from your example, the "display" does not contain presentation information, but additional content filters. Maybe I am wrong?

Improve this answer
1
  • Yes, you're right. The dialog I'm showing is basically a way to set filters on the display. But, each of these displays has to be saved (due to technical constraints when refreshing) so they are not just additional filters being added to the overall page. Also, this framework is being used across several solutions, so while there are only 3 filters here, there are almost 15 that will be used in another solution, so we need to keep consistency in how it will be presented. Thank you for you question; I appreciate you trying to dig in a little more!
    – Christine Ketterlin
    Mar 10, 2016 at 15:49

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.