Mark’s Site

When I first started web development, one thing I was always torn on was how to design my screens. I had loads of information that I needed to display it all in some meaningful, easy to search format. After many years of trial and error, I’ve now got my ‘template’ screens that I use for all my content management screens.

What follows is how I layout standard screens in my system. You may love it, you may hate it, how you choose to layout your screens is completely up to you, but hopefully you will see the reasoning behind my screen layouts and adopt a similar approach for yourself.

I find the combination of list and add/update screens to be sufficient for usability purposes. Some developers like to include an intermediary ‘info’ screen before users can get to the update screen, but I did not feel this useful for my CMS, so I exclude the info screen and go straight to the update screen when a record is clicked in the list screen.

List Screen

My list screens show me all of my records, paginated, with enough information on screen for users to find what they are looking for. I also have search available per list screen to filter results.

You can see on this list screen you have an ‘add’ button, allowing you to get to the add screen FROM the list screen. I find this useful for cutting down on menu items. I just have a ‘Manage Page Categories’ menu item, which gets the user to the list screen where the user can then choose to add a new record, or click an existing record.

I’ve mentioned the paging, this is very important, otherwise you’ll have a massive list screen and your system won’t scale By this, I don’t just mean your system won’t scale in terms of usability, but imagine you suddenly have a 1000+ list of records. That’s a massive amount of pressure to put on one screen. The performance of your system would suffer. So that is the primary reason we use paging, so cut down on the SQL results returned from the database, so as not to affect system performance. As paging is outside the scope of this article, I’ll discuss paging in a future article.

I’ve got Select All javascript options and actions to set active/hidden and delete, allowing you to bulk hide/activate records. I’ve found this useful when importing records.

An example list screen is shown below:

Add/Update Screen

My add/update screens are one PHP page that dynamically changes depending on whether I am adding a new record, or updating an existing record. I add buttons to the top and bottom of the form. For small forms this may seem a bit unnecessary, but I still find myself clicking top and bottom buttons, so I’ve decided to leave them in.

This is an example add screen: