Sketching Mockups for the Application's User Interface The final step in the design process is creating mockups for the application's proposed user interface. The user interface is the forward-facing portion of an application, the means by which the end user interacts with the system. For web applications, the user interface is the set of the site's web pages. Because end users judge the merit of an application by its usability, it's important to ensure that your application's user interface is intuitive. When trying to decide on a user interface, I often return to the use cases outlined in the earlier stages of the design process and ask myself, "What sorts of controls and layout would I need on this web page to make it easy for a user to accomplish this particular use case?" The reason behind creating mockups is to generate ideas about the user interface, assess a proposed user interface's usability, and make sure that you and the customer are on the same page regarding the look and feel of the application. These mockups do not need to be functional web pages; in fact, many designers prefer to create their user interfaces using pencil and paper. Another option is to create dummy ASP.NET pages. These pages lack any sort of functionality, but include the Web controls that will make up their user interface. The photo album application site will need the following web pages: A home page From this page anonymous users should see a Login link, while authenticated users should be able to quickly jump to an administration page from which they can manage their photo album. Additionally, the home page should list all users in the system, with a link to view their photo album. A photo album page The photo album page will list the categories and pictures for a particular user. The pictures listed would include the picture and its title, category, and uploaded date. Furthermore, the visitor viewing the photo album can filter the pictures by category. Clicking on a particular photo will take the user to the photo detail page. A photo detail page From here, a user should see the picture, its title, category, uploaded date, description, and comments. Furthermore, if the user is authenticated, he can add a new comment. A photo administration page Authenticated users can visit the photo administration page to upload new pictures to their account and to manage their existing pictures and categories.
I invite you to take a few minutes to sketch out some mockups for the proposed list of web pages. There's no right or wrong user interface, so feel free to try out various designs and ideas. When creating these mockups, try to put yourself in the shoes of the end user, asking yourself how you would accomplish the particular tasks outlined in the use cases. Strive to make your user interface as streamlined as possible for the use cases we identified earlier. Did you Know? To help assess the quality of your user interface design, recruit some people unfamiliar with your project to assist in evaluating your user interface. Sit these volunteers in front of the mockups and read a use case to them. Then ask them how they would accomplish that task. If your use cases are simply sketches on paper, the volunteers might just show you where they would click or what functionality they'd expect to have happen when they performed some action. Pay attention to the way the users interact with the user interface. Do certain aspects about the interface confuse or distract users? Are the volunteers having difficulty determining what they need to do to accomplish a given task? These are clues that can help you create a truly usable and intuitive user interface. |
By the Way When you're dealing with actual customers, remember that the design process is typically an iterative one. After creating the mockups, you'd return to the customers, presenting to them your understanding of the requirements and your mockups. At this point the customers may give you the green light to start implementing the system, but more than likely they'll have some refinements of the requirements and some ideas on how to tailor the user interface to fit the way they anticipate using the application. |
|
