Designing Web Application User Interfaces
In creating web applications we almost always turn to creating static prototypes so that we can present to a client or a prospective audience a picture of what the web application will look like when it is complete. When designing applications for a variety of clients and audiences this is a critical step.
So why create prototypes? The answer is obvious from the developer’s viewpoint - we want to give our client the best possible shot at seeing the finished product without have to invest all of the time required to build the finished product. Rework and rethinking at this stage is far less costly then later on in the process. For the client or prospective audience, they get to see the web application long before it actually works which can provide them a look at what is to come, and hopefully ensure that all of the required information and thoughts are taken into account as early as possible.
So how do we create prototypes? I think we can throw out the scribbles on a cocktail napkin method, although hand-drawn sketches when done correctly can be an important part of the process for the designer.
The biggest hurdle we seem to face is the idea that either prototypes are not usable (Photoshop, Visio or other drawing tool) or, they are done so rapidly in HTML and CSS that they are essentially throw-away because they are not built properly or in a fashion that makes them easy to build upon.
Photoshop designs are great for presenting a visual medium like the web for many reasons:
- Visual designers excel with this software allowing them to create great looking designs and interfaces with their drawing tools
- The visual design need not worry about coding, something designers are generally not very good at
- The visual quality of the output is excellent
They are also bad for many reasons:
- Somebody has to code them eventually, hopefully the designer drew up something that can be coded using some form of standards based code that doesn’t take ten times as long as it should
- Maintenance can be a huge challenge, changes to these things can be very time consuming as the designer has to drag and slide around multiple controls that they have drawn
- You can’t use a Photoshop file or the image produced from it in the application sense, so interactivity is basically zero
- Text in Photoshop is visually perfect, and depending on the browser and platform, the text on the web generally isn’t visually as perfect or spaced the same
Some of the negative elements are taken from this post, from an organization that doesn’t bother creating Photoshop mockups and simply goes straight to HTML. Although some are advocates of bypassing the Photoshop route, it does have its place in applications that are highly visual and don’t have a multitide of screens and layers that would make it nearly impossible to see a productivity gain by using this method. In cases where the application is perhaps larger in scope, more technical and not needing individual visual attention to a great detail on every page, going straight to HTML can really save time.
Other benefits of the HTML prototyping approach include (as noted in this post):
- it looks just like the finished product…because it is!
- clients and prospective users can actually interact with it - not necessarily to the full level of functionality, but buttons, menus and links can be clicked and used
- there are no surprises when making the conversion from the visual prototype as sometimes happens when the client sees that beautiful Photoshop output and then is dismayed at the reduction in visual quality and appearance of the final HTML product
Creating HTML prototypes is not without its challenges. One needs to be a knowledgable HTML and CSS developer and may need an understanding of JavaScript or an appropriate library. In addition, this individual needs to have visual and interface design experience. This individual is not easy to find and is a great asset to companies like ours.
No matter what the approach or the exact method used, Prototyping websites and web applications is an important step in ensuring that a project is on the right track and that issues are caught as early in the process as possible. Seeing the end result early provides valuable insight for both clients and developers so they can reach the end as quickly and efficiently as possible.