User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have little knowledge about user interface design and I just started building a public website.

I wish to display an editable list of complex objects that include a list of elements. My initial thought was to use a grid layout as this seemed adequate.


However I'm finding it difficult to create a user friendly interface without using a pop-up. What would be the common practice to display this sort of data ?


share|improve this question
I'm just gonna steal a comment from someone else: Hi and welcome to As your question stands it's essentially asking for a review. However, reviews aren't part of the philosophy of this site as they have limited use to other users. You can still get useful feedback if you rephrase the question and focus on the specific UX problem. – Koen Lageveen May 27 '13 at 18:35
up vote 0 down vote accepted

You can create space between rows of the grid and use that.


download bmml source – Wireframes created with Balsamiq Mockups

But there also isn't really a problem with that popup. Popups aren't evil, forcing yourself to avoid them can push you into solutions that are worse.

share|improve this answer
Yep I figured out it was either a popup either increase the row height while in edit mode. Was hoping for some magical alternative ^^ Will probably go for the popup. Thanks – ThunderDev Jun 18 '13 at 20:02

=>The mock up is quite neat and self explanatory, it seems to be a generic solution though, as it does'nt specifically talk about the module being a part of Desktop or web app. Solutions can vary based on that knowledge. =>Using Pop or an extended side panel is not a bad solution but in this particular scenario since you have only 3 items to be entered/selected by user, you can very well use the original space in the column 4 (Roles) of the data grid. Once a user clicks edit, that particular cell should expand so that the user can select the role, date and level somewhat like this -

COLUMN 4 ............................................................. COLUMN 5

Role Drop down ...... Date Picker

Level Slider

=> Also, you could use icons for save,edit& delete instead of big buttons that unnecessarily use up more space.

Hope this helps... Regards, Supriya

share|improve this answer
Just realized that you have mentioned about building a site, in that case, pop ups should not be there unless absolutely necessary as it is cumbersome for users to interact with something popping up every time he needs to enter/edit a record. – Supriya Rathi May 27 '13 at 16:57
I just updated the mock up, as you can see I don't have quite enough space for extending the grid. Thanks for the input – ThunderDev May 27 '13 at 17:20
Happy to help... – Supriya Rathi May 27 '13 at 17:24

Your design quite reasonable. I just want to point a little detail.
Choosing level
As level has discrete values it is better to display fixed values. Also it is important that all the values are visible for user. And too many choises are complicated for users!

share|improve this answer
That does look much better, I only have 3-4 choices so radio buttons seem to be the way to go. Thanks – ThunderDev Jun 18 '13 at 19:54

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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