I am building a GUI that needs to allow the user to:

  • Add entries
  • Remove entries
  • Modify Existing entries

Each of these "entries" hold very simple information:

  • Outlet Number (Non editable, incremented when new outlet is added)
  • Outlet Name (Non editable, name is chosen when adding a new entry)
  • Outlet value (Editable)

The user is not interested in knowing the outlet value, so it is not shown until the user clicks on the outlet (wherby another screen is shown to allow modification of the value). For the user, the most important information that should be immediately visible is the outlet number, and all the outlet names.

Edit: User background:

  1. The software is actually a configuration package for customized hardware. Think of it as similar to the software that comes with your graphics card.
  2. The users will usually be adults, 25+. They are technically inexperienced, so it is crucial for the software to be as easy to use as possible.
  3. The users will not accept a difficult learning curve as they will give up with it nearly straight away.

Edit: Software background: I have a limit to how much detail I can give here, but here is some more detail:

  1. "Outlets" are externally wired sensors that gather data and are connected to the main device labelled "your device". The user buys "outlets", that are a physical hardware package, and if the user bought five outlets, s/he will add five outlets to the UI. Then these outlets can be configured separately. So the user interface you see is a representation of what you would see in the real world: "Outlets" connected to a single station (labelled "your device").
  2. The button near "Your device" represents the mode of the device. By clicking the button "change mode", it will cycle through different modes.

Here's part of what I have:


  • 1
    It's not really clear what the UX issue is you're trying to get an answer to. You want a UI to allow you to Add, Edit, Remove entries? Entries of what? What are these 'outlets'? How much of this UI are you asking us to comment on? I don't see a specific answerable UX question in here, I'm afraid. Can you elaborate on what exactly it is you need to know? Remember that this is a Question and Answer site so we need questions that can be explicitly answered.
    – JonW
    Apr 8, 2013 at 11:13
  • With a description this generic you will get very generic answers. Real UX does not focus on the objects and the operations, as you have done, but on the users. Who are they? Are they experienced with technical products? Are old or young? What kind of learning curve will they accept? Is efficiency important? Are they customers or employees? These questions should drive the design process first of all. Once you've answered them, ask yourself what it is they want to accomplish, and then start thinking about the object model of your interface.
    – Peter
    Apr 8, 2013 at 12:28
  • @Peter This is my first time here, I appreciate your input. I've updated the question to reflect your and JonW's comments.
    – David
    Apr 8, 2013 at 13:12

2 Answers 2


Your users are inexperienced and impatient, so two things are absolutely vital:

  • Show the state of the system very clearly
  • Offer good disaster recovery (ie. undo)

I think you're pretty close with your mockup. I like the use of icons very much (though the sheen is a little over the top). I would show more of a connection between the outlets and the device. Having a button to toggle between modes is usually not the best idea, as it hides the modes that are not active.

I would recommend the following:

  • Show a (cartoon) picture of the device, with lines to the outlets
  • Use multiple buttons for the mode.
  • Use smaller icons for add and remove.
  • Give a good affordance for clicking the outlet to configure it.
  • If you can afford it, edit in place.
  • If you can afford it, have a bin of deleted outlets, so that you can use an undo instead of a warning.

I'm still not exactly sure about what the user would be configuring if the name and number aren't editable, and she isn't interested in the value, but lets assume that there are some things to configure. Here's a mockup:


download bmml source – Wireframes created with Balsamiq Mockups

The whole thing might be a bit complex to implement, but hopefully you can pick and choose form these ideas.

  • Also, one question: The reason I have avoided drawing an icon of the device is that when there are a lot of outlets, it's not a very good idea to stretch the image all the way to the bottom and draw lines to the outlets. What do you think is the best solution when there are, say 20 outlets and the user scrolls down? Hide the icon for the device?
    – David
    Apr 8, 2013 at 17:30
  • It depends. If there are often more than about ten outlets, you may need to forget about the lines. You could take inspiration from the way the lines are drawn in most treeviews. So, a single line from the device, then a single vertical line and horizontal struts from the vertical line to the outlets.
    – Peter
    Apr 8, 2013 at 20:02

If I understood your requirement properly, display all the records and provide the command buttons to Add / Modify and Delete as below

enter image description here

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.