Comprehensive Study Notes on Envisionment and User Interface Design
Fundamental Principles of Envisionment
Envisionment is the process of turning ideas into experiences that can be explored and tested. It involves externalizing design ideas so they become visible, allowing for discussion, evaluation, and improvement. This is a core component of effective human-centered design, enabling designers to see things from the perspectives of others and to explore concepts collaboratively. The ultimate purpose of envisionment is to explore numerous possibilities before committing to a final solution.
The process requires representing design work to oneself and to others using a variety of formats. These representations include scenarios, sketches, storyboards, interaction maps, wireframes, and prototypes. Different representations are appropriate at various stages of the design process, helping with the generation, communication, and evaluation of ideas. For instance, a quick sketch might be useful for a colleague but insufficient for a client presentation.
Goals and Competencies in Envisionment
Designers must master several competencies to effectively use envisionment. These include explaining the purpose of envisionment in user interface design and comparing various design representations. It is essential to understand the specific roles of sketches, wireframes, and prototypes, as well as the overarching role of prototypes within the design process. Designers must be able to choose a suitable representation based on the specific design purpose.
Practical skills involve generating multiple possible solutions through quick sketching, using scenarios and storyboards to explore user experiences, and mapping main interactions while creating low-fidelity wireframes. Designers must also distinguish between low-fidelity and high-fidelity prototypes and evaluate the advantages and limitations of each representation. The goal is to make designs increasingly concrete through iterative testing and refinement.
Choosing Suitable Design Representations
The choice of representation should always suit the intended purpose of the design phase. A quick sketch is ideal for generating or comparing ideas rapidly. Storyboards are used when context and sequence are critical to the experience. Mood boards are employed for exploring the visual direction and aesthetic feel. Interaction maps are necessary for checking routes and decision points within a system. Wireframes are used to plan the screen structure and navigation, while prototypes are essential for allowing people to try out the interaction firsthand.
The Outline Envisionment Process
The envisionment process follows an outline that moves from abstract ideas to concrete implementations through seven key steps:
Review the Brief: Check requirements, constraints, and scenarios to establish a foundation.
Generate Ideas: Sketch many possible experiences to broaden the range of solutions.
Explore Concepts: Try different metaphors and design concepts.
Shape the UX: Define the look and feel, touchpoints, channels, and navigation.
Involve Users: Explore ideas with the people who will actually use the system.
Build Wireframes: Add specific detail to the structure and navigation.
Prototype, Evaluate, and Iterate: Make the design increasingly concrete, allowing for continuous feedback and improvement.
Sketching for Fast Ideation
Sketching supports fast ideation by making early ideas visible without the need for polished detail. Sketches are designed to be created, changed, and discarded quickly. A functional sketch should communicate the layout, content, and main action of the interface. Drawing skill is not the focus; rather, the quality of the concept is being assessed. Often, generating three different ideas is sufficient for this initial stage.
An example of an interactive shopping service sketch includes instructions to "Touch a different color or scan another item." The layout features the item, the user's selection (e.g., JPG Stroller), style options (e.g., Green, Red, Blue checkboxes), and cost breakdowns such as a cost of , tax at , and a total of . Actions such as "Order," "Print," "Delete," and "Discard" are represented as simple buttons.
Storyboarding for Context and Flow
Storyboarding is a technique adapted from filmmaking that uses a cartoon-like structure to represent key moments in an interactive experience. This method allows designers to get a feel for the "flow" of the experience economically, as a single page can typically hold scenes. Storyboarding is often based on concrete scenarios, and using the two together is helpful for working through ideas with customers.
Visual techniques for storyboards include specific shot types:
Extreme long shot (wide shot): Shows setting and location details.
Long shot: Shows the full height of a person.
Medium shot: Shows a person's head and shoulders.
Over-the-shoulder shot: Looks over a person's shoulder.
Point of view shot (POV): Displays exactly what the person sees.
Close-up: Shows details of a user interface or a device being held.
Types of Storyboards
There are three main types of storyboarding used for interactive systems:
Traditional storyboarding: Sketches are accompanied by notes below each scene expanding on the relevant steps from a scenario and explaining interactive behaviors.
Scored storyboards: Used for applications with heavy motion graphics. Sketches are annotated with specific notation regarding type, colors, images, sound, and other issues.
Text-only storyboards: Useful for very complex sequences. These specify images, text, accompanying media, and general notes about tone and flow.
Visualizing Look and Feel with Mood Boards
Designers must envision various touchpoints and user journeys to establish a consistent look and feel across the entire user experience. Mood boards, common in advertising and interior design, are used for this. They involve gathering visual stimuli to capture the "feeling" of the design, such as photographs, images, colors, textures, shapes, newspaper headlines, person quotations, and fabric samples.
Interaction Mapping
Interaction maps focus on the structure of the information space and the paths users can take. These forms of envisionment include:
Navigation maps: These focus on how pages are structured and linked. For example, a Venmo App Map might include elements like the Hamburger menu, Search, Contacts, Social Page, Transfer to Bank, and Charities.
Menu maps: These detail hierarchical items. A mobile phone navigation map (e.g., Mitsubishi/Trium) lists categories such as Internet, Games, Connectivity, Office Tools, Settings, Calls & Times, Phone Book, and Messages.
Journey maps: These describe the user’s path. A user journey map might include stages like Awareness, Consideration, Purchase, Retention, and Advocacy. A Customer Journey Map tracks touchpoints across multiple channels such as Newsletter, Social ads, Reviews, Community forums, Blogs, Direct mail, Store, Word of mouth, FAQ, and Ecommerce.
Wireframing for Structure and Navigation
Wireframes are outlines of the structure of a software system, focusing on interaction design and information architecture. While once primary for websites, they are now essential for mobile and tablet apps. Wireframes used in conjunction with navigation maps provide the basics of an app design. They should start in grayscale to avoid premature aesthetic decisions.
A useful wireframe must answer five critical questions:
What information appears?
Which action is most important?
How does the user move next?
What feedback or error is needed?
How does this screen support the task?
Examples of wireframe elements include navigation buttons, search engines, logo placement, image placeholders, content links, and help sections.
Prototypes and Fidelity
A prototype is a concrete but partial representation or implementation of a system design. The defining characteristic of a prototype is that it is interactive; something happens when a user "presses" a "button." Prototypes may be made of paper, cardboard, or sophisticated software.
Low-fidelity (Lo-fi) prototypes, often called paper prototypes, explore structure, content, and navigation quickly. They are economical and highly flexible. High-fidelity (Hi-fi) prototypes provide a realistic visual and interactive experience. A risk with Hi-fi prototypes is that stakeholders may believe they are finished products, which is dangerous if the underlying details have not been clearly thought out.
Practical Issues with Paper Prototypes
When using paper prototypes, designers must consider:
Robustness: The materials must be tough enough to survive handling by multiple people.
Scope: The prototype should focus on broad issues and key elements rather than getting lost in excessive detail.
Instructions: There is a trade-off between providing enough detail for independent use and needing a designer to talk the user through the process.
Flexibility: Parts should be adjustable (e.g., using sticky notes) to allow for real-time redesign based on user feedback.
Prototyping Tools and Best Practices
Fidelity should be chosen according to the design stage. Early stages use sketches; developing stages use connected lo-fi screens; and later stages use hi-fi screens for visual clarity. Polish should not be applied to a weak idea. Current tools like Figma can be used for both lo-fi wireframes and hi-fi components, while whiteboards and sticky notes are better for collaborative sequences.
A good prototyping tool should:
Allow easy and rapid modification of details or functionality.
Facilitate direct manipulation for non-programmers.
Allow for the reuse of code in incremental or evolutionary prototypes.
Avoid forcing default styles for interface objects.
Iterative Practice and Studio Application
Envisionment is an iterative practice consisting of reviewing the user and task, sketching three possible ideas, selecting one direction, mapping the primary interaction, creating low-fidelity wireframes, applying a visual system, and testing with a person to make improvements. In a Design Studio setting, evidence of this development—showing how the design evolved—is as important as the final screens. Prototyping is the heart of human-centered design, allowing for the exploration of ideas rather than the building of a parallel product.