1

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.

Improve this question
0

2 Answers 2

Reset to default
2

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

Improve this answer
2
  • 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?
    – user36789
    Dec 10, 2013 at 16:32
  • I think « ‹-Prev 3 Next-› » is enough. It's scalable and not scares users with big numbers.
    – Alexey Kolchenko
    Dec 10, 2013 at 17:25
0

  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

Improve this answer
2
  • +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
    – user36789
    Dec 10, 2013 at 16:34
  • you may place the Details frame in a dialog to gain space
    – rags
    Dec 11, 2013 at 4:11

Your Answer

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