Often, when we think of design, we think about how something looks. On the Web, the first matter of business is designing how the site works. Before picking colors and fonts, it is important to identify the site’s goals, how it will be used, and how visitors move through it. These tasks fall under the disciplines of Interaction Design (IxD), User Interface (UI) design, and User Experience (UX) design.
There is a lot of overlap between these responsibilities, and it is not uncommon for one person or team to handle all three. The goal of the Interaction Designer is to make the site as easy, efficient, and delightful to use as possible. Closely related to interaction design is User Interface design, which tends to be more narrowly focused on the functional organization of the page as well as the specific tools (buttons, links, menus, and so on) that users use to navigate content or accomplish tasks.
A more recent job title in the web design realm is the User Experience Designer. The UX designer takes a more holistic view—ensuring the entire experience with the site is favorable. UX design is based on a solid understanding of users and their needs based on observations and interviews. According to Donald Norman (who coined the term), user experience design includes “all aspects of the user’s interaction with the product: how it is perceived, learned, and used.”
For a website or application, that includes the visual design, the user interface, the quality and message of the content, and even overall site performance. The experience must be in line with the organization’s brand and business goals in order to be successful. Some of the documents an IxD, UI, or UX designer might produce include:
User research and testing reports
Understanding the needs, desires, and limitations of users is central to the success of the design of the site or web application. This approach of designing around the user’s needs is referred to as User Centered Design (UCD), and it is central to contemporary design. Site designs often start with user research, including interviews and observations, in order to gain a better understanding of how the site can solve problems or how it will be used.
It is typical for designers to do a round of user testing at each phase of the design process to ensure the usability of their designs. If users are having a hard time figuring out where to find content or how to move to the next step in a process, then it’s back to the drawing board.
A wireframe diagram shows the structure of a web page using only outlines for each content type and widget (Figure 1-1). The purpose of a wireframe diagram is to indicate how the screen real estate is divided and indicate where functionality and content such as navigation, search boxes, form elements, and so on, are placed, without any decoration or graphic design. They are usually annotated with instructions for how things should work so the development team knows what to build.