There are many examples of elements in everyday life that are perfectly constructed but fail when it comes to usability. Have you ever tried to put together a piece of furniture and found the directions to be overly confusing? Or have you ever been driving around town and found an intersection particularly awkward? Those are examples of bad User Experience Design. Just like a printed document or road sign may lead to a bad experience, so can a web or mobile application. Applications can be great functionally with all the necessary tools, but can provide a horrible overall user experience.
What is UX?
User Experience (UX) Design is the process of enhancing user satisfaction by improving usability, accessibility, and the overall experience provided in the interaction between the user and the product. Our goal, as developers and designers, should be to create applications with intuitive navigation, maps, accessible tools, clear content, and an overall experience that keeps users engaged.
The Problem. Technology, if left unchecked, can run applications into an unnavigable ocean of tools, buttons, and features. Users can easily get lost and become frustrated. Taking the time to focus on the application’s UX can be a huge time saver, provide cost savings, and help guarantee the application’s success. In my years of UI/UX design experience, I’ve seen many applications that are built with no structure to the navigation or data causing all features to be accessible at all times. This creates clutter and dilutes the focus of the task at hand. This could be the result of developing purely off of a list of requirements without any thought to design or hierarchy.
Some applications are built based off of what stakeholders or the creators want rather than the needs of the actual end user. This can be seen through tools that may not be intuitive to the public or displaying information that’s not relevant to those users. When going from paper workflows to digital workflows, take advantage of technology and look for opportunities to simplify tasks. In some applications, the digital form ends up looking similar to the original paper form. This still requires 100% user entry rather than taking advantage of auto populating fields, type aheads, dropdown lists, date pickers, or building in rules to simplify data entry and avoid errors.
The Ideal Scenario. It’s imperative that project teams filter application features through user stories, data hierarchy, technology, design, and scope. Modern web applications have transformed from internal desktop applications to sleeker public facing web applications. These modern applications help users focus on individual tasks rather than bombarding them with an overly complex user interface. Don’t just re-implement an existing workflow. Take the opportunity to improve workflows by cutting out unnecessary steps and taking advantage of the technology available, as mentioned earlier.
How to Implement UX
1. Create Personas – “Who will be your end user?”
This can be done by interviewing potential users or working with a subject matter expert to identify who the users will be. Identify facts about potential users, their behaviors, and their goals. WHAT do they want from your app, and WHY do they want it? Their personas will be used to justify the relevance of design decisions as well as tools and functionality as the project moves forward.
2. Create User Stories and Feature Lists – “What will your user want to do with the app?”
User Stories help in identifying the needed functionality within the application. During this process, it’s best to focus on WHAT the user wants and not worry so much about the HOW. What may seem logical during development may not always be the best solution; It is important to center priorities on user requirements. These will later be developed into acceptance criteria.
3. Plan Workflows – “How will you deliver these features to your user?”
Focus on hierarchy of data (Hierarchical Designer). Look for parent/child relationships within the workflows. These relationships will determine your application’s navigation. Use this opportunity to weed out any unnecessary navigation, features, or tools. My motto to design by: “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” – Antoine de Saint-Exupery
4. Create Wireframes – “How will your user navigate through your app?”
A well designed UX will guide user interaction from both a visual and functional perspective within both mobile and web applications. Review the hierarchy within the user stories and make decisions on what the user wants to see and where they want to see it.
- Maximize findability
- Design based off of interface behaviors
- Decide on how information is best navigated and displayed; map vs. list view.
Some applications we’ve done are more map centric while others allow the use of filterable lists as a viable way of showing data. This can be tricky – I’ve seen individuals request that features be placed in particular areas of the application based off of personal biases or past legacy applications. Doing this can cause the new application design to miss out on opportunities to really simplify the workflow and features. A new app should never look like an older application. Technology is changing too rapidly to justify that.
5. Design Mockups – “How will your app look?” Mockups are not always necessary if a good amount of effort is put into wireframes and gathering acceptance criteria. Creating high-fidelity mockups can help generate any custom graphics that are needed such as logos, icons, or images. Mockups allow the opportunity to run style requirements past the client/stakeholders. And once again, there’s another opportunity to review the application’s features, navigation, and user experience and make any final edits before beginning development.
The purpose of effective UX Design is to create an experience that is unique yet enjoyable, while eliminating elements that may confused the end user. One interesting case of UX re-design is an e-commerce site that was struggling to make sales to online customers. They hired a UX design team for a solution who later discovered that the issue was with their check-out workflow. Customers would go to purchase an item and then be prompted to create a profile or login to an existing account in order to proceed to the checkout. The step of requiring users to “create a relationship” was causing a large number of users to abandon their shopping. The designers replaced the “Register” button with a “continue” button and a simple message that read: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.” This simple change in the user interface and workflow allowed a $300,000,000 increase in sales! (www.uie.com “The $300 Million Button”).