User Interface: Scenarios, Design Requirements & Designing for the Web (Week 3)
Updated: Mar 10, 2021
"Define what the product will do before you design how the product will do it." - About Face
This week I read chapters 4 and 20 of About Face: The Essentials of Interaction Design by Alan Cooper, Robert Reimann, David Cronin, and Christopher Noessel, These two chapters talk about the importance of persona scenarios, phase 3 of goal-directed design (Requirements Definition), and some information about how to design for the web.
Scenarios & Narratives
To summarize the first half of Chapter 4 in About Face; Scenarios and narratives help get the point across about the who, what, when, where, why, and how of a user that uses the digital product you're designing. A narrative acts as a storyboard that "creates a plot for the design of a product." It provides the details of the persona that can be analyzed to create a high-level design with ease by picking out the motivations, pain points, and goals that are described in a short 1-2 paragraphs. Scenarios are quick prompts that depict a specific situation of when, where, why, and how a user would be using the product. Using both scenarios and narratives can help define the features and behaviors of a product that would best suit a specific type of person.
About Face mentions three types of Persona-Based scenarios:
1. Context Scenario: Used to explore, at a high level, how the product can best serve the needs of the personas. This is created before any design sketching. It is written from the persona's perspective focusing on human activities, perceptions, and desires.
2. Key Path Scenario: Describes the user interactions with the product and by introducing the design's vocabulary and focuses on the most significant user interactions. It always pays attention to how the persona uses the product to achieve their goals and is written after the design team has defined the product's functions and developed a Design Framework.
3. Validation Scenarios: Less detailed and typically take the form of a number of what-if questions about the proposed solutions.
Design Requirements
This is the third phase in the Goal-Directed Design process as mentioned in the previous post: User Interface: Goal-Directed Design & Persona (Week 1-2). Some important points the second half of Chapter 4 in About Face uses to describe this phase are:
1. "You want to rigorously define the human and business needs your product must satisfy", but don't get them confused with the features that will attract your persona.
2. Separating problem and solution is an approach that provides maximum flexibility.
3. "By clearly defining user needs, designers can find the best viable and feasible solutions without compromising the product's ability to help people achieve their goals."
With the Requirements Definition phase there is Framework Definition which answers questions about what a product is and what it should do. Below are the steps to take in this process (Taken from About Face):
STEP 1: CREATE PROBLEM AND VISION STATEMENTS
PROBLEM STATEMENT: defines the purpose of the design initiative. Reflects a situation that needs changing for both personas and business.
VISION STATEMENT: an inversion of the problem statement that serves as a high-level design objective or mandate. In the vision statement, you lead with the user’s needs, and you transition from those to how the design vision meets business goals.
STEP 2: Explore and Brainstorm
● PRIMARY PURPOSE: eliminate as much preconception as possible.
● Get all the ideas you've been considering out of your head and document them for later.
● Explore different concepts and scenarios to share with stakeholders.
● Spend only a few hours to a couple days brainstorming and exploring.
STEP 3: Identify Persona Expectations
It is important that the represented model of our interface matches what we understand about the users' mental model. To do this, we need to identify the following:
● Attitudes, experiences, aspirations, and other social, cultural, environmental, and cognitive factors that influence the persona’s expectations
● General expectations and desires the persona may have about the experience of using the product
● Behaviors the persona will expect or want from the product
● How that persona thinks about basic elements or units of data (For example, in an e‑mail application, the basic elements of data might be messages and people.)
STEP 4: Construct Context Scenarios
Context Scenario: tells the story of a particular user persona, with various motivations, needs, and goals, using the future version of your product the way that is most typical for that persona. CONTEXT SCENARIOS ADDRESS THESE QUESTIONS:
● In what setting(s) will the product be used?
● Will it be used for extended amounts of time?
● Is the persona frequently interrupted?
● Do several people use a single workstation or device?
● With what other products will it be used?
● What primary activities does the persona need to perform to meet her goals?
● What is the expected end result of using the product?
● How much complexity is permissible, based on persona skill and frequency of use?
STEP 5: Identify Design Requirements
After completing a context scenario, analyze it and extract persona needs or design requirements:
● Data Requirements: Accounts, people, addresses, documents, messages, songs, images, as well as their attributes, status, dates, creator, subject, etc.
● Functional Requirements: Defines places or containers where objects or information in the interface must be displayed.
● Contextual Requirements: Describe relationships or dependences between sets of objects in the system. Which objects in the system need to be displayed together to make sense or meet persona goals.
OTHER REQUIREMENTS:
● Business requirements can include stakeholder priorities, development timelines,
budgetary and resource constraints, regulations and legal considerations, pricing
structures, and business models.
● Brand and experience requirements reflect attributes of the experience you want
users and customers to associate with your product, company, or organization.
● Technical requirements can include weight, size, form factor, display, power
constraints, and software platform choices.
● Customer and partner requirements can include ease of installation,
maintenance, configuration, support costs, and licensing agreements.
Designing for the Web
This section of the reading this week (chapter 20 in About Face) focuses on the structure of a page on the web and page interactions.
NAVIGATION AND WAYFINDING
Navigational tools on a website is a key element that helps the user get from one part of the website to another. There are multiple ways a user can navigate a website:
PRIMARY NAVIGATION - how the user gets to the major areas or sections of a website or application. Located along the top or left side of the screen.
TOP NAVIGATION - superior approach, but can only hold so many items that fit the length of the screen. - Limits the designer to reduce the number of major areas and to keep titles "short and punchy.
LEFT SIDE NAVIGATION - makes the page crowded and occupies page's visual entry point. - Can fit more items and is easier to scan because they are left aligned.
SECONDARY NAVIGATION - "Best to keep your navigation space as flat and compact as possible to make it easier for users to create a useful mental model of how your application is organized. Left-hand menu or second stripe of horizontal navigation links."
FAT NAVIGATION: when user clicks on primary navigation and it expands to reveal more options, aka "drop down". (Image taken from About Face)
BREADCRUMBS: a sequence of links that represent the user's path through the site hierarchy. (Image taken from About Face)
CONTENT NAVIGATION - Photos and Articles. Most commonly presented in listings or feed formats. Featured content shown through more prominent typography, change in size and position, or by using a carousel.
SEARCH NAVIGATION - another form of navigation where the user can type key words into a search bar to find a specific part of the website. There are multiple types of useful tools that come with the search navigation:
AUTO-COMPLETE (TYPE AHEAD): when someone starts typing into the search engine and choices appear to complete the sentence. Based on previous searches or actual results.
DISAMBIGUATION (AUTO-SUGGEST): when someone types into the search bar and a list of suggested words that are similar to the spelling the user is typing appears.
FACETED SEARCH: allows the user to specify the attributes of the item they are looking for.
CATEGORIZED SUGGESTIONS: when a search term is applicable across many different categories or domains.
SCROLLING - A common method of navigating a single page simply by using the mouse to scroll up/down/left/right to view more content on that page.
HEADER AND FOOTER
HEADER: first thing user sees - brand element (logo) and some persistent navigation items including primary navigation. Also tells user whether they are signed in or not. And the search function lives here as well. Located at the top of every page.
FOOTER: Suggests where users should go next after reaching the bottom. Access to rarely visited parts of the site (legal notices or a complete fat navigation that includes all top level and second level pages. Need to consider the circumstances of why the user would need these pages.
Other Important Terms To Consider When Designing For The Web
FOLD: the invisible line at the bottom of the page where content is not visible, but if designed correctly, can imply that there is more content below.
RESPONSIVE DESIGN: when a webpage is designed to format itself appropriately to the user's screen on any device.
PARALLAX EFFECT: different onscreen elements respond to the user's scrolling at different speeds.
SCANABILITY: effective visual rhythm through white space and typography when the user scrolls.
INFINITE SCROLLING: Literally in the name. It's a continuous scroll, never hitting the bottom of the page. A couple examples would be Instagram and Facebook feeds.
PAGING: The use of different pages on a website and using navigation bars to get to them.
BREAKPOINTS: key screen widths
Thank you for reading!
View my User Interface Page for more!