0

The goal is for the user to be able to configure what they want, and then "Do something" to their selected "thing," usually more than once, and see the results.

enter image description here

This screen is getting very crowded and I'm at a point where I'm sticking things in any available white space; and it's getting somewhat arbitrary where things go. I've tried to group related things together but I was wondering if there are better ways of handling large amounts of information and controls that are all related and need(?) to be accessed at the same time.

I'm adhering to the consistent style we've used for things across the app, so I'm reluctant to e.g. make font sizes smaller to save space.

I could potentially hide bits of the interface at any given time but ultimately the user is going to want to see all of this because it's a very data and config focused app, and I don't think making the user go back and forth between different views and having to remember lots of things will work well here.

This is a desktop PC app with a resolution of 1366 x 768.

4
  • It's difficult to provide a good answer without a better understanding of your data. Is every other panel based on the selection in "Thing List"? Or are some panels based on the selection of other items? Basically, I am trying to understand the relationships between each element.
    – musefan
    Aug 19, 2020 at 9:00
  • 1
    @musefan I've updated the pic, hopefully it makes more sense now. Basically there is a selectable list of "things" about which we display info below. We also have separate config fields for what we're going to do to those things, as well as some info about what the user-entered values will result in. Everything has to be valid before the user can "Do something." Upon "doing something" the thing's attributes will change.
    – Touchdown
    Aug 19, 2020 at 9:09
  • That clears it up a bit, and explains why the current design is the way it is. Couple questions: Is the "Combined Info" like a preview panel that displays what the thing attributes will look like after the "Do Something"? Also, what is "Other Selections" purpose? Does that just determine how the "Do Something" function will work?
    – musefan
    Aug 19, 2020 at 10:24
  • @musefan The "Combined Info" is really just another part of the info based on the input fields that I couldn't fit horizontally below. It's not a "preview" as such; it's just some calculations that might inform the user as to whether they want to "Do something." The "Other selections" aren't directly related to the left-hand things or the right-hand config, but they must also be configured in order to "Do something."
    – Touchdown
    Aug 19, 2020 at 10:43

2 Answers 2

2

I think based on the comments, the key thing here is how to make it clear to the user how each component is related to each other.

As we typically read from left to right (with some cultures varying of course), it would be useful to layout the elements so that the information flows from left to right.

Here is one possible solution based on that concept. Obviously you can play around with the size based on what content you need in each element.

enter image description here


Or if you want to make more of the whitespace:

enter image description here

2
  • I really like that bottom design. I'll play around with it. One thing is that I may not be able to fit all the info into those compressed boxes, but I'll put a vertical scroll in and see how that looks.
    – Touchdown
    Aug 19, 2020 at 10:57
  • @Touchdown: Yep, deffo put the scroll bars there as you need them. I just didn't want to clutter the design, and instead focus on the layout of each component. I am sure you will suss out a solution anyway :D
    – musefan
    Aug 19, 2020 at 11:05
2

As written in the comment, it's not possible to give an exact answer without knowing at least the number of items of each option.

But doing a simple search in possible graphical interfaces, some common points can be gathered:

  1. Group components of the same type in the same window or area
  2. Avoid separating interaction elements and their respective information, i think there are to many windows
  3. Incorporate scrollbars into extended information
  4. Prioritize the reading direction from left to right, top to bottom according to the order of function selection

enter image description here

5
  • 2
    Looks good. The only thing I would suggest is keeping the scroll bars consistent by making them all vertical (instead of having a horizontal scroll for "thing list"). Well, I guess horizontal scroll would be find for "other selections" if required
    – musefan
    Aug 19, 2020 at 11:03
  • Out of interest, what tool did you use to create your wireframe?
    – musefan
    Aug 19, 2020 at 13:19
  • You can do that in any vector application like Inkscape
    – Danielillo
    Aug 19, 2020 at 13:39
  • 1
    Ah, I thought you was using a dedicated mockup tool. I like your scroll bars :D
    – musefan
    Aug 19, 2020 at 13:44
  • 1
    On the other hand, that little blue cross is really annoying me though! haha
    – musefan
    Aug 19, 2020 at 13:45

Your Answer

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

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