Chapter 15: User Experience and User Interface Design
USER EXPERIENCE (UX) DESIGN
UX design studies how users feel about an experience. UX designers typically evaluate an experience’s ease of use, perceived value, and how efficiently a user completed various tasks throughout the entire experience. User experience evolved from the user centric design philosophy—a philosophy focused on making design decisions that are rooted in the needs and desires of users. Many design disciplines can be included under the UX umbrella, including user interface design.
USER INTERFACE DESIGN
Within the practice of UX design, user interface (UI) design is typically a combination between interaction design and visual design. Simply put, a user interface provides the tools (‘interface’) for the user to get through an on-line experience. The user interface design process has different phases, each with different activities.
• User research (Discovery)
• Sketching/wireframing/prototyping (Design)
• Visual design (Design)
• Usability testing (Design)
• User interface development (Development)
A designer, information architect and a user interface developer (i.e., front-end developer) will typically own a particular piece of the user interface design process. In smaller organizations one person might be responsible for all activities within of the user interface design, while in a larger organization there might be one person responsible for every task.
User Research
User research is a key component of the user interface design process and is the main driver of the discovery phase. User research encompasses many different investigative methods to gain a deeper understanding of the problems, and needs, of potential users. User research occurs during both the discovery and design phases.
Ethnographic Research: A qualitative research method that studies people and how they work in a natural environment. Rather than asking target questions in a survey, ethnographic research requires a researcher to visit and watch people in an environment where the interface will be used. The primary benefit to ethnographic research is that uncovers underlying and previously unnoticed problems.
Focus Groups: A moderated discussion with a group of demographically similar individuals, who are considered potential users of a product. Specifically, focus groups give designers an opportunity to learn more about the target audiences’ thoughts and decision-making process. A focus group can help uncover general trends on how valuable a potential solution could be.
User Interviews: Face-to-face discussions, typically with current users, or someone who is likely to be a user. These interviews are typically focused on 5–7 key topics. The interviewer is usually a designer or product manager. The conversation is designed to be open ended, with the interviewer guiding the discussion. In most interviews the goal is to dive deep into a few topics to help surface existing problems or reveal new ones.
Sketching
A sketch is a fast and easy way to layout an initial user interface idea. The low fidelity nature of a sketch allows for a quick, visual articulation of thoughts, an increased number of potential solutions, and a opportunity for non-designers to participate in the design process. A sketch will force a designer to think about, and prioritize, the content and objectives of a particular and can help discover problems earlier in the process.
SKETCHING TOOLS
• Pen and paper
• Whiteboard and dry-erase markers
Wireframing
Wireframes in Web design are similar to a blueprint in architectural design. It provides all the details on structure, content, and functionality prior to the visual design of a user interface. A wireframe will define what goes on a page, where it goes, and why it goes there without having to worry about elements such as font and colors. Wireframes won’t outline every single page, instead key templates will be developed. The templates created will be used to extrapolate the rest of the experience.
Wireframes are meant to be shared, dissected, and iterated upon. Because wireframes are completed early in the process, designers have more freedom to make mistakes, learn, and make changes without incurring high cost for change.
• Prior to starting wireframes, designers should have a clear understanding of the products, users, and their goals, and a clear grasp of the projects business goals.
• Work in actual pixel dimensions
• Don’t use fonts that can’t be used on the Web
• Work in a grid (Chapter 6.)
• Be consistent in page numbering
• Track revisions
WIREFRAMING TOOLS
Visio (Windows): http://office.microsoft.com/en-us/visio/
Omnigraffle (Mac): www.omnigroup.com/products/omnigraffle/
Blasmiq: www.balsamiq.com/
Adobe Fireworks: www.adobe.com/products/fireworks.html
Mockflow: www.mockflow.com/
Protoshare: www.protoshare.com/
Prototyping
Prototypes are built by linking multiple wireframes together, through hotspots on a page, to simulate a particular experience. Typically the experience in a prototype is simplified from the full experience, but provides enough interaction to learn how a user will behave. Because of their simplistic nature, prototypes are a great tool to use during usability testing sessions.
BENEFITS OF PROTOTYPING
• Prototypes are tangible and offer users something to interact with.
• The in-process nature of a prototype encourages users and stakeholders to provide feedback without having to worry about hurting someone’s feelings.
• Prototypes are a clearer deliverable to business stakeholders or clients.
• A prototype can quickly reveal design problems, particularly those which were never considered.
Blasmiq: www.balsamiq.com/
Adobe Fireworks: www.adobe.com/products/fireworks.html
Invision: www.invisionapp.com/
Fieldtest: http://fieldtestapp.com/
Usability Testing
Usability testing is a technique used during the design phase and helps evaluate the usefulness with potential users. Usability testing is a method of user research typically occurring after an artifact (i.e., a wireframe or visual design comp) has been created. Usability testing is conducted by a designer—in a controlled setting—with a specific set of goals that need to be accomplished.
5 TRUTHS ABOUT USABILITY TESTING
Reminds designers that they aren’t the user: Usability testing will remind people that different people can interpret the same experience very differently, and often the people testing the site do not think the same way a designer thinks.
Testing a little is always better than not testing: Even if a design is tested with one user, it’s better than not testing at all. Usability testing, even with just one person, can reveal previously unseen problems with an experience.
Test early, test often: The more a design is tested, and the earlier it gets tested, the sooner a designer can gain insight and make adjustments to the experience.
Testing helps inform a decision: Testing a design will yield priceless insight. The insight, combined with the experience and judgment of a designer, will help designers and stakeholders make more informed decisions about a particular experience.
Reaction from a real user trumps everything: No amount of research, data, or design knowledge will ensure that a given design will be successful. Until people actually use the website, everything is based on thoughts and assumptions. User feedback gained during a usability session will help improve even the most well-intentioned experiences by validating some design decisions and by pointing out areas where the design must be improved.
User Interface Development
To create a working user interface a front-end (user interface) developer uses the visual design as construction plan to build the actual experience in code. The constructed user interface will support the exchange of information by giving the user a way, via the interface, to interact with back-end processes and databases.
USER INTERFACE DEVELOPMENT TOOLS
HTML (HyperText Markup Language): This is the most common language used in Web design. HTML is made up of tags or directions that specify how a Web page should be displayed in a browser. HTML is primarily concerned with presentation, structure, and linking rather than programming. HTML documents may also include JavaScript, CSS, and other coding languages.
The most recent version of HTML is HTML 5. While HTML 5 is still under development, its primary goal is to improve the language so that it better supports the latest multimedia while keeping the language easily understood by humans, computers and other devices. Combined with CSS3 and Java script, HTML 5 allows for more advance design options, particularly typography, advance graphics, animations, and transitions. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets.
CSS (Cascading Style Sheets): This is a method for controlling styling and formatting of HTML pages. It can be applied across multiple documents.
Java: A scripting language created by Sun Microsystems that can be used to create Web applications.
AJAX: Also known as Asynchronous JavaScript and XML, AJAX is a method of building interactive applications for the Web that process user requests immediately. This combination of techniques and programming achieves better interactivity mostly by transferring small amounts of data at a time so that entire Web pages don’t need to be reloaded each time a small action is performed.
MOBILE UI DESIGN CONSIDERATIONS
In recent years, the advent of the smartphone has pushed mobile UX into the forefront of design. No longer will people visit a mobile site, or download an app, for the novelty of the experience. Today’s mobile users won’t tolerate bad user experiences. Although the same design methods and processes used for developing desktop/laptop experiences can be used for mobile experiences, it’s important to remember “Don’t shrink, rethink (coined by Nokia)”.
Tips for Mobile Design
• Prioritize and feature key functionality from the desktop/laptop experience.
• Offer mobile-only functionality when it makes sense (e.g., give users the ability to scan barcodes when visiting their favorite retail store.)
• Navigation and content exploration is completed though touch. Because the finger isn’t as precise as a mouse, larger click targets may be needed
• Speed of page loading is critical regardless of how a user is accessing the content (computer, tablet, smartphone), but speed becomes more important on a mobile device. Simplifying the site structure and content can help increase speed.
• Mobile devices offer more opportunities for distraction. Make the experience efficient as possible by simplifying the experience.
User Responsive Design and Mobile
Responsive design is an approach where a website automatically responds to the environment and behavior of a user to present a website’s images, text, and navigation in the most appropriate manner. The flexibility of responsive design is supported through the use of flexible grids and layouts, images, and CSS media queries. Practicing smart design eliminates the need to design multiple experiences to support desktops, laptops, iPads, iPhones, etc.
Recommended Reading
Sketching User Experience
Buxton, Bill
Elsevier, 2007
Smashing UX Design
Allen, Jesmond; Chudley, James
John Wiley & Sons, Ltd, 2012
The Handbook of Global User Research
Schumacher, Robert M.
Elsevier, 2010
Designing Interactions
Moggridge, Bill
MIT Press, 2007
Web Hosting Companies