We have worked on functionality in our application to this point. Now we can start to create a user experience, so those functions are accessible and intuitive. We will begin with a clickable demo that makes it easy to see how to navigate through the features.
No Place Like Home
Every application has a “home” or “start” page. This type of page is the one users see first in most cases. Accordingly, they tend to spend more time on it than any other screen. That makes this a critical page to “get right” and provide the needed information to start using the application. This is a page you should start with for your demo. The users will see it a lot, so you want it in front of customers for feedback as early in the implementation process as possible. That holds for when you are just creating an application for yourself. It will help you test the heavily used screens early and often.
Copy And Paste
Template pages are not merely a copy and paste exercise. However, it is highly valuable to create some templates that you can use throughout your application. These will be a way to speed development as well as a way to stick to a well-defined look-and-feel. Focus on the first page that uses a template to make sure you get it exactly as you want. Then you should be able to reproduce that style over and over as you build the application.
Communication
Your communication framework and related user experience should be started on early in the process. This goes well with developing your templates. When you have messages or user communication implemented on a template page, then it should provide the kind of experience a user can expect. The actual content of the messages is not yet significant. Focus on the look-and-feel. You can leave the details for later.
Reports
In a fashion similar to page templates, take a stab at how your reports will look. When you have this formatting challenge handled and expected early on, the end product will seem that much more comfortable to the user. There will be plenty of time to make adjustments and craft a robust format for reporting the application data or output.
Your Homework – Create The User Experience
It is time to build a clickable demo. Create a framework of the pages and navigation detailed in the requirements. You can hook up some of the functionality you implemented in prior steps. However, this is where you want to focus on the presentation. You can marry the display to the features in future phases.
A sample of my on-going project source is linked below. This is pretty far along the way on the user experience and tying in functionality. The testing is still a bit thin, and usability still has work to do.