5

I currently develop an app in UWP and I need to display some buttons on a page. All of those buttons are neccessary and I want them on the same page because they are for maintanance/debugging of a device connected via serial port.

So basically I have a bunch of buttons that I somehow need to display. But I don't want to put them just next to each other because I don't find that very good looking/user friendly.

Is there any possible way to display them in a user friendly manner?

Greetings, Daniel

EDIT:

The buttons are currently on two different pages. I focused on the functions of the buttons first but since they are done I need to bring in a bit of order/design.

I'm not a designer or any creative person at all. I normally just write code...

Page 1: enter image description here

Page 2: enter image description here

  • The easiest solution is to group the buttons by their functionality and order them according to the workflow. But it is also easier for us if you can give some examples of the buttons - not everyone is accustomed with debugging via serial port. – Mike Jun 8 '18 at 11:34
  • Wow, that's a lot of buttons! I sympathise! the first question I have is "do these all need to be buttons?" - You have 7 that start with "Request", 2 that relate to "Life Test", 3 reset buttons... - Is there any way they could be packed in together? Maybe you could have a single "Request" button that launches a modal window detailing the 7 different request options... or a "Life Test" button that opens a panel with start and stop buttons? Without knowing more about the contexts and functions of these buttons (seems like it would be a lot of info) that's about all we can suggest. – Andrew Martin Jun 11 '18 at 7:49
  • The problem I have when I make just one button which opens a modal window is that I will have just that one button on my page then. I already moved the Disconnect/Connect to my settingsPage and just made it a reconnect button now. I also made the 2 protocol buttons two seperate pages since I expect a load of data in return. So it makes sense. But the rest are mostly buttons used for debugging or maintainance so I would rather not have them in my normal UI because I dont really have a space for that. Maybe I will implement something like a dropdown menu which I can drag down from the top. – Daniel Jun 11 '18 at 9:41
11

Before I present some concept on how to sort those buttons I'd like to comment on your "I'm not a designer or any creative person at all. I normally just write code..." excuse. Off-topic, thus in a box.

Think about your software this way - you want people to use it, correct? Then you should make the UI appealing as you don't want to hear the comments "the software works good but the UI is horrible" or even "I couldn't get myself through the unfriendly UI so I don't know if the software is useful". Some people might have the patience to discover your mindflow (expressed in the proposed UI), some not. Trust me, I've been there, I've done that and I'm never coming back. And this site is a great place to gain some insight in designing user-friendly apps.

Now coming back to your original question. As I mentioned in the comment, you can group the buttons. In the first page I see two groups: Requests and Connection. There is also a general Cancel all tasks button that, I assume, cancels all request tasks. Use the DRY (don't repeat yourself) rule and add some dependency in buttons enabled status to present something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Now, the status info shows whether the device is connected or not and the button (one instead of two) changes its function between Connect and Disconnect depending on the status.

All the buttons that don't have a functionality at the moment should be disabled (greyed out), i.e. if the device is disconnected, it is not possible to request the Names, Margins etc. (if I assume your device's logic correctly). The same applies to Cancel all tasks - if there isn't any task pending, the button should be disabled.

This gives the user additional feedback on the software status. You may ask "why is there a general device status reported in the very beginning?" - I find this status crucial for the working of the software and that is why it has to be reported in the very beginning.

And now for the second page, again the buttons that are contradicting each other, like Life test and Stop life test can be combined into one that changes its label depending on the state of the device. The rest can be grouped logically, for example like this:

mockup

download bmml source

This time I've abstained from DRY rule a bit for a reason - for settings dropping "settings" word on each button would make them somewhat unambiguous - Set to new user or Reset to user can be misleading.

Perhaps an idea for repeating buttons (request protocol 1 and 2) - if there will be more protocols in the future, why don't you use a combo box (drop-down) to select which protocol to request?

Also the buttons that make irreversible changes (like deleting all protocols) should be named explicitly so the user knows what they are doing.


I hope that not only you can move on with your project but also you get the idea on how to approach the visible part of the development in general.

  • 2
    Thank you for this extensive answer. It really helps me a lot and I believe I can use it to improve the interface I have. Especially the part about the status and greying out the buttons makes sense. I haven't thought about that. The part about "I'm not a designer" was not meant to be an excuse. It was more like "I don't know what I'm doing and I would really appreciate some help to get better" :D – Daniel Jun 8 '18 at 13:05
  • 2
    @Daniel, I'm glad to hear that. Good luck wit your project and with improving your skills! – Mike Jun 8 '18 at 13:22
  • Thank you again for taking the tine to write this answer :) – Daniel Jun 8 '18 at 13:26

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.