Workflow Design - Using User Interface Design Conventions

When creating user interface designs for websites and applications it is important to think of the use cases necessary for users to accomplish tasks. Good user interface design is not just a matter of creating a page with the correct layout and pretty UI design elements but also the interactions and workflows that are required to achieve tasks. According to usability guru Jakob Nielsen workflows are more abstract because they are not as visually tangible as, say, a tab button or a link but they are crucial in getting the user experience right.

Getting Workflow Design Right Using User Interface Design Conventions

One of the ways of doing this is to match a users expectation of a user interface design by having things happen when a user would expect them. This is where existing web and user user interface design conventions come in handy. A common example of such a web user interface design convention would be the use of a logo on the top left of a website that also serves as a link to the homepage. There can be a temptation among certain UI designers to be unique and aesthetically different but this should never come at the expense of usability. Web users are notoriously fickle with an attention span that is measured in milliseconds.

Getting Workflow Design Right Using Instructions

The other way of having things happen when users expect them is to provide clear and concise instructions. However this needs to be done with care because instructions negatively impact user experience by diverting from a user's main task. Progressive disclosure is also important in making sure instructions have the lowest footprint possible on a user interface design. Progressive disclosure is when the most important options are included in the user interface design for simplicity. Advanced (or rarely used) options and features are moved to other screens in order to create a cleaner and leaner user interface design that is much easier to take in. An example of this is with Facebook. When users sign up to Facebook the amount of information required is small but once users have signed up they can access the full set of options under the site's utilities.

Incorporating Workflow into the UI Design

Incorporating workflow into a user user interface design is very much about timing. However useful an option is it must not be prompted before users are ready for it. At the beginning users naturally have a low level of commitment so it is better to first build up credibility. Asking for too much information about users is a perfect example of the need for progressive disclosure. Although more information on a user might allow you to better tailor your services and user interface design you do not want to scare away clients to the willing hands of the competition this trivially. For e-commerce websites, for example, users should be allowed to add items to the cart and purchase without having to sign up first.

Using Wireframes to Incorporate Workflow into a User Interface Design

One of the best ways to ensure great workflow design is to use wireframe software that can create clickable wireframes. The main advantage with clickable wireframes, over plain wireframes (also known as mock ups), is that they provide the most natural way to test workflows. Testers can undergo usability testing of a clickable wireframe as if it were an actual website or application. Wireframes can be created with different user interface designs incorporating various workflow designs allowing UI designers to experiment early on in the development process.