Dialog Box, a bad user interface design element-Part 2( Alternative to a dialog)

In part-I, I wrote about how dialog boxes can make your application look infested with bugs. In order to solve this, as a designer your aim should be to minimize dialog boxes as much as you can and if a dialog box is really a need then think about making it a modeless dialog box.
Let us assume you have a web application where you want to create a web page to display a list of items. Consider its design; you need a list page and an button to add items to this list. Now, as a designer, in order to provide the add functionality, you will either create another webpage or you will create a dialog box depending on the information you need to display and capture. If the input form has less number of fields (3-4 fields), then most probably you will choose a dialog box. Reason being, by using a dialog, you are letting the user to add the item and also letting the user to view the list of already added items at the same time. Now think what happens if there is a pop-up blocker and pop-ups are not allowed on your site? User clicks on the ADD button and your web page will probably blink and that’s it. Your well thought dialog will be eaten by the blocker. Now you can rely on the user to figure it out or expect to get a maintenance call. In the first scenario, you are relying on user’s consciousness and yeah, he should know what you were thinking while designing your application.
My suggestion is let’s try to be innovative and let’s design for the user and not for the application.
Now regarding the above dialog issue, we can add input fields, which we were displaying in the dialog, at the top of the list page and provide button and a button next to it (See fig. below).


----------------------------------------------------------------
Headers--> First Name Last Name Email Address
----------------------------------------------------------------
Inputs--> Field1 Field2 Field3
----------------------------------------------------------------
List-->
First Name1 Last Name1 Email Address1
First Name2 Last Name2 Email Address2
First Name3 Last Name3 Email Address3
First Name4 Last Name4 Email Address4
First Name5 Last Name5 Email Address5

For editing you can either provider edit image/button in each row or a EDIT HTML link.


In the list above we achieved the same functionality as of a dialog box and much more. Much more? Well using this approach you can easily provide copy row functionality also. Consider the list below; a user can enter values in Field1, Field2 and Field3 for First Name, Last Name and Email Address and press to add a new row. User can also click on edit button/link next to each row, which will copy the row data on Field1, Field2 and Field3. Now user can edit the data and press to save changes or change something and press to create new row (copy functionality).
Hope this helps. I will be back soon with more user interface design issues.