Geeks With Blogs
CodeSeeker Just another developer trying to do the right thing

When designing a page in a web application, I have found that a page is more intuitive for end users if the page has a clear "Edit Mode" and "Read-Only Mode". With this design, the default mode of the screen is Read-Only, and the user clicks an Edit button to make the fields editable. The user then edits values as desired, clicks a Save button to save the values, and if everything saves properly, a success message is displayed along with the page in Read-Only Mode once again.

I have seen a number of designs where, when the user views the page, a number of page elements are immediately available to be edited. There are a limited number of times where this is expected. For example, a login page. Users don't expect to have to click an Edit button in order to edit the values in the textboxes for Username and Password. Another example would be a page that is one of a series of steps (Login is like this but is only one step) where the user enters the steps, and submits all of the information at the end of the steps. These pages follow the Read-Only/Edit/Read-Only design, but the Read-Only Mode is before and after the series of steps. Most other pages where information is being viewed and may or may not be edited should have an Edit Mode and a Read-Only Mode. Without this usability design, it is easy for the user to become confused.

This is not just a personal preference. We got some feedback recently from users who said that they entered information on a certain page, and when they went back to view the information later, it was not saved. These pages were designed without an Edit Mode and Read-Only Mode. Fields on those pages were always editable. The pages had a Save button at the bottom, but unless the user clicked it, they could edit the values then navigate away from the page and the new values would not be saved.

One possible fix for this would be to detect whether or not the user had made any changes on the page, then alert them with a (Javascript) popup when they navigate away from the page that they will lose any unsaved changes. The argument I have heard is that having an Edit Mode-only screen means less clicks for the user. But with this "warning on navigate away" solution, you have not reduced the number of clicks. It is also well known that users frequently ignore popup messages. But if you were to use this kind of solution, I would recommend making your error (and possibly, other) messages appear in popups throughout the application.

Posted on Monday, August 18, 2008 3:10 PM | Back to top

Copyright © Mike Ellis | Powered by: