Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

This one is for CMS. The user should be able to add,delete,update and search through a table in a single page.

enter image description here

The buttons

Initially ADD is visible,
If the edit pencil icon is clicked only UPDATE button is visible,
If any of the checkboxes are checked only DELETE SELECTED button will be visible

The "message/form for editing" box

  1. It shows the acknowledgements of all the actions (Like Row(s) Deleted Successfully!)
  2. It shows prepopulated form for updating on the click of the edit pencil icon
  3. It shows info abt the row on click of the respective heading in the table

Now where and how do I fit the search controls without crowding the page? The search is based on multiple parameters hence will have multiple inputs. Any ideas please? Any thoughts on the current layout is also welcome.

share|improve this question

2 Answers 2

up vote 3 down vote accepted

Some thoughts of the design.

  • Use select header as a control for Select all / Clear selection action
  • Combine Headline and Link columns
  • Re-organize rare/dangerous actions by removing it from each row and applaying them to selection only. It creates longer path to eliminate mistakes and slips
  • Use pop-up dialogs for Add, Edit, Advanced search to isolate complex interactions
  • Display additional info about selected row close to selection (in-place rather than at fixed position in a top)
  • Use disappearing messages, they overlap content but auto-dissapear or closed by user. It's not only more natural but also saves the space.
  • Don't hide primary tools, as it requires more cognitive load to discover hidden rules.

enter image description here

share|improve this answer
    
Thank you so much :) ! For pagination say there is a lot of rows hence a lot of pages, What do you think is the minimum no. of links that can be shown like 1 2 3 10 11 12, should there be first page and last page links all the time? –  rps Dec 10 '13 at 16:32
    
I think « ‹-Prev 3 Next-› » is enough. It's scalable and not scares users with big numbers. –  Alexey Kolchenko Dec 10 '13 at 17:25
  1. Introduce Search Criteria. User can input some or all fields in the criteria and click Search button. The below grid / table will be refreshed every time Search button is clicked.

  2. Selection of a row in the grid / Table will show the row details in the below Details frame.

  3. If user wants to add a record, he clicks New button. It shows a blank Details frame. After user enters the details, he clicks Add button

  4. If user selects Delete option in any row of the table, corresponding row details are displayed in the Details frame and user can click Delete Selected button to finally delete the record.

  5. If user selects Edit option in any row of the table, corresponding row details are displayed in the Details frame and user can click Update button after making changes to existing details.

Hope this is useful ...

enter image description here

share|improve this answer
    
+1 Thank you very much for posting an answer but the page looks a bit crowded now, which is exactly what I am trying to avoid –  rps Dec 10 '13 at 16:34
    
you may place the Details frame in a dialog to gain space –  rags Dec 11 '13 at 4:11

Your Answer

 
discard

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.