Skip to content

Latest commit

 

History

History
424 lines (364 loc) · 21.4 KB

File metadata and controls

424 lines (364 loc) · 21.4 KB

Design-UX-UI Home

UX Design: From Concept to Wireframe

Table of Contents

Course Summary and Key Take-aways

Course Summary

  • The course opens with several definitions of design highlighting one of biggest misconceptions about design that it is NOT just what it looks like. There are several design quotes worth taking a look at
  • There are three main parts of designing anything that you must understand:
    • Purpose: what is the function of the object?
    • Context: in what situations will it be used?
    • Constraints: what determines how this thing can be made and used?
  • I also really like the core design skills as a good framework for what a designer should be able to do
    • TASK: create a toolkit around these skills. What tools have I learned (i.e. brainstorming, sketching, etc.) that can help in each of these? Lecture 2 has a great breakdown of those items here
  • Lecture 2 shows all those items (pretty much as I want it per the task above) and reiterates a lesson I've heard in all of these lectures is that design is iterative. It is messy and ambiguous and you have to get used to that
  • Framing Design Problems
    • a design frame is what the designer considers important and will focus on when doing the work / solving the design problem
    • There are two main items that must be kept in mind:
      • Scope: How big is the problem you are focusing?
        • is this a complete change of the previous "system" or are you fixing one aspect?
      • Design Space: What can vary in how you are thinking about the problem?
        • what are the variables that can change per type of user or solution?
  • Formative Research discusses how to research. It's another good list of all the methods used to learn about user needs, both formal and informal.
  • The Ideation lecture had a good explanation and introduction to the main methods of coming up with ideas. The notes on sketching were good and probably something I should do more but I really liked seeing IDEO's Rules for Brainstorming and should keep them in mind for this toolkit
  • I've read about Personas and I would probably benefit from re-reading my notes on this. They make sense on paper but would like to do more with them.
  • Scenarios and Storyboards are different means to the same end. Storyboards provide a bit more physical context and might paint a fuller picture but it sounds like only one or the other is employed in the design process, not both.

back to top

Course Syllabus and Learning Objectives

  • By the end of this course, learners will be able to:
    • Explain how designers approach complex problems
    • Describe the iterative nature of the design process and its main components
    • Recognize the central role of ideation and gain experience in sketching
    • Create personas, scenarios, and storyboards
    • Evaluate systematically tradeoffs of alternative ways you can design a component of a system
  • Design is a skill not just "knowledge"; you get better at design by designing.

Introduction to the Design Process

L1: What is Design?

  • Wicked problems...
    • are ill-defined / underspecified
    • don't have a right or wrong solution
    • are context-dependent
    • Don't have a clear test for solutions
  • "Design is how it works" - Steve Jobs
  • "Design is a plan for arranging elements in such a way as to best accomplish a particular purpose." - Charles Eames
  • Purpose: what is the function of this object?
  • "...every design problems begins with an effort to achieve fitness between two entities: the form in question and its context" - Christopher Alexander
  • Context: in what situations does this thing intend to be used?
  • Constraints: what determines how this thing can be made and used?
  • Design is about creating things that fulfill their purpose well while adhering to constraints
  • Core design skills
    • to frame, or reframe, the problem and the objective
    • to create and envision alternatives
    • to select from those alternatives
      • articulate trade-offs of other solutions, etc.
    • to visualize and prototype the intended solution
    • to synthesize a solution that brings all those together
  • Interaction design applies design skills to the creation of interfaces for computational artifacts

back to top

L2: Design Process - An Overview

  • Design is not just creative genius; design is a process
  • Design Process (In a Nutshell)

Design in a nutshell

  • Design is an iterative process and it is messy! Get comfortable with ambiguity

back to top

L3: Framing Design Problems

  • goal: formulate the problem and understand important constraints a solution needs to satisfy
  • A frame is an active perspective that both describes and perpetually changes the situation
  • Frame describes aspects of the design problem the designer considers to be important and will focus on
    • you are trying to learn what's in and what's out
    • Weight Loss App example
      • which will behaviors will target?
      • Who is the population?
      • Would this be time-limited or ongoing?
  • Scope: How big is the problem you are trying to focus on?
    • Weight Loss App
      • Affect all behaviors?
      • Comprehensive weight loss support or just one part of it?
  • Design Space: what can vary in how you are thinking about the problem?
    • More narrowly defined:

the Design Space is the range of alternative ways that a design solution can work. Design space refers to the dimensions on which a design solution can vary: size, complexity, intended population, etc.

  • Designers use the notion of the design space to articulate classes of design solutions they should consider and the tradeoffs they should analyze.
    • Weight Loss App:
      • population
      • level of motivational readiness
      • weight-loss behaviors
      • situations where the system is used
      • types of technology
  • No design problem exists fully formed. A key job a designer is to specify the exact problem that needs to be solved
    • Problem framing is an iterative process
      • project timeline changes, budget gets cut, designer's understanding of the problem changes

back to top

L4: Formative Research

  • Goals:
    • understand the existing context and domain
    • identify targets for design improvements
  • Methods: formal and informal
    • Formal Methods
      • interviews
      • surveys
      • participatory design grouops
      • systematic observations
      • shadowing
      • task analytsis
      • process mapping
      • etc.
    • Formal Methods are:
      • effective and data-rich
      • slow
    • Informal Methods
      • informal observations
      • targeted conversations with key stakeholders
      • Foraging on information about the domain
      • Asking social network for bug lists
    • Informal methods
      • tend to be quick, cheap, but you can miss important aspects of the problem (unless you are very good)
  • Whichever trajectory
    • collect a lot of stuff
    • put your materials together
    • immerse yourself in them
  • Finding Inspiration
    • "Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination."
    • take notes and sketch
  • Bug List
    • find examples of other technologies that address your problem
    • Try them
    • Compile list of frictions and frustrations that you discover in those tools
    • Come up with ways of addressing those limitations
  • Other Sources of Inspiration
    • Tech that solves a related problem
    • Non-tech solutions for your problem
    • Your population's context, habits, culture, infrastructure
    • Elegant artefacts and processes
    • Anything else that strikes your fancy!

back to top

Quiz 1:

  • Design is "compromise":
    • The issue is not that designers do low-quality work. It’s that most real-world design problems are complex enough that they often involve conflicting constraints — constraints that pull the design solution in different directions. A designer has to balance those conflicting demands, and this balancing usually means that some aspects of the design end up being done in a way that the designer wouldn’t have chosen if the constraints were not present.

back to top

Ideation

L5: Introdution to Ideation

  • Goal: Generate a lot of concepts from which you can generate a high-quality solution
    • large body of evidence showing that you if you start with a large set of different ideas, the final product is better
  • Basic Rules of Ideation
    • Make ideas cheap!
      • generate ideas as quickly as possible which ALLOWS us to quickly throw them away as well
      • fill in just enough details to get a sense of the idea
    • Generate both variations of an idea and very different ideas
    • Don't worry about idea quality or feasibility
  • Ideation Outcome: dozens or even hundreds of ideas
  • Tools for Ideation
    • sketching
    • Brainstorming
    • Mindmapping
      • concept is put in center of sheet
    • Timed idea generation (generate as many ideas as possible)
    • Generate a minimum of X ideas (i.e. 40)
    • The goal of this is to visualize and think about the problem in many different ways and you can use a number of tools to do that

back to top

L6: Sketching

  • "Sketching is not only the archetypal activity of design. It has been thus for centuries."
  • Sketching is about generating and communicating ideas
  • Sketch Attributes
    • quick
    • timely
    • inexpensive
    • disposable
    • plentiful
    • clear vocabulary
    • distinct gesture
    • minimal details
    • appropriate level of refinement
    • suggest and explore
    • ambiguity
  • Sketches don't have to be beautiful to be useful
  • Sketch vs. Prototype Summary:

Sketch vs. Prototype Summary

  • There are many different types of sketches
    • some are just for communicating sketch
    • thinking sketches generate large numbers of ideas
    • technical sketches are used in engineering
    • Presentation sketches have more polish
    • Emotive sketch are designed to be later stages of design
  • Recommends getting a design notebook

back to top

L7: Brainstorming

  • IDEO Rules for Brainstorming
    • Have a clear problem statement
    • Have clear rules (i.e. go for quantity)
    • Number the ideas
    • Build on ideas
    • Make ideas visible
    • Get physical (sketch, mind-map, make, act out)
  • Traps to Avoid
    • criticizing ideas;
      • Rule: don't criticize ideas, every idea is valid
    • Taking turns (or trying to make the process less messy)
      • Rule: let it be a bit chaotic, have people jump in when they have an idea
    • Getting sucked into developing an idea in depth
      • Rule: don't go too far down one idea
    • Going too far on tangent
      • Rule: don't go off-topic / off-scope
    • Stopping to do research
      • Rule: keep going for more ideas
  • How to Keep Moving
    • Brainstorm solutions to pain points
    • Determine steps in process, brainstorm on those
    • Identify loci for innovation
    • Identify solutions for different users
    • Have a facilitator
  • Brainstorming Facilitator
    • Make sure people don't go on excessive tangents
    • Notice when session participants feel stuck or have hit a dead end, redirect session by bringing up a new topic
    • To keep in check the critiquing of ideas
    • Prevent participants from diving too deeply into the ideas
  • Rapid Brainstorming with Structure Example
    • I. Brainstorm a list of 10 objects associated with snow and cold weather
      • write these objects along the top of a large piece of paper
    • II. Brainstorm 10 controls or techniques for controlling those objects
      • Write these objects along the left side of the paper
    • Populate as much of the matrix as you can in 10 minutes
    • Don't worry about whether the idea is good or not
  • Reward yourself after brainstorming; it's very hard

back to top

Design Constraints and Making Choices

L8: Personas

  • The purpose of personas is to build concrete image of users that designers can design toward
  • They are based on all the research, skecthing, conversations, etc.
  • Personas are fictional characters that represent key types of technology's intended users that were discovered through formative work.
  • Key Characteristics of Personas
    • Based on data
      • they are based on formative research
    • Embody goals, traits, behaviors and context that could influence if and how the technology is used
    • Represent distinct classes of intended users
  • Persona Example
    • Picture
    • Demographics: age, occupation, location, life stage (married? children?)
    • Goals and Motivators
      • goals related to technology and motivators the could be leveraged or act as barriers
      • career-oriented? being a parent? novelty (unique about her), etc.
    • Behaviors and Constraints
      • routines an dother behaviors (e.g. work practices) that create opportunities or barriers for technology
      • weather? access to technology? personal traits (i.e. need structure / routine), hectic schedule?
    • Context
      • living and working environments and other aspects of physical and social context that may affect technology use
  • You would be constantly checking your design ideas to ask: would this work for this Mary? Would this work for John?
  • Benefits of Personas
    • personalize and summarize a lot of data
    • Provide a mental shortcut for design considerations
    • Allow discussion of and agreement on who intended users are
    • Easy to understand by non-designers
    • Help check tendencies to design for oneself or the "elastic user"
  • Some final considerations
    • personas should feel "real" - they should accurately summarize available data
    • They should focus on common rather than idiosyncratic traits/characteristics
    • Content should be relevant
      • family situation might not be relevant for design of a workplace technology

back to top

L9: Scenarios

  • Scenarios are short stories about specific users who are using technology being designed to accomplish specific goals in a specific context
  • Scenarios bridge findings about user needs and ideas about how a technology may support those needs
  • Why use scenarios?
    • support reflection during the design process
    • open-ended and easily revised
    • anchor design discussion
  • Elements of a Scenario:
    • Setting: situation (state of the system, context of use) in which activity occurs
    • Agent(s): people performing the activity described in the scenario
    • Goals: objectives agents are trying to accomplish
    • Actions: activities that agents do to accomplish their goals
    • Events: things that happen to users while doing the activities in the scenario
  • Types of Scenarios
    • problem scenarios: describe features of the current situation
      • the users' current problem and what they are trying to accomplish
    • goal or task-based scenarios: what the user wants to do
    • activity scenarios: transformt he current practice into new design features
    • full scale task scenarios: steps to accomplish a task
    • information scenarios: how users perceive, interpret and make sense of information
    • interaction scenarios: physical actions and system responses that respond to users' tasks
    • When to use
      • problem scenarios are typically done first to understand the problem they are trying to sovle
  • Some final considerations
    • you don't need to be a great writer; provide enough detail to understand the scenario
    • scenarios should be quick; more rough scenarios
    • scenarios are process artifacts. Do only as much as is helpful
    • scenarios can help uncover unwanted technology effects

back to top

L10: Storyboards

  • A storyboard is a series of sketches that visually conveys how a user engages in an activity that involves the technology that is being developed.
  • Why storyboards (if you have scenarios)?
    • they help you think more deeply about:
      • environments where the system is used
      • physical constraints
      • user's motivation and emotion
      • relationships among multiple people
  • Elements of a Storyboard
    • Zoom: how wide/narrow is the focus of the frame?
    • Angle: from whose point of view is the content in the frame? User's? Observer's?
    • Detail: what is the frame focused on?
    • Emotion: what emotion is the user expressing?
    • Setting: Where does the action take place?
  • Storyboarding considerations
    • How many panels are needed?
    • What interactions will be represented?
    • How will time be represented?
    • How will the user ("character") fit?
    • What text will be used?
  • Some final thoughts
    • You don't need to be a great artist to draw useful storboards
    • storyboarding quickly allows you create more storyboards
    • storyboards most helpful for conveying physical environment, emotion, and relationships
    • Play to your strengths - often either a scenario OR a storyboard will work

back to top

L11: Design Rationale

  • Design rationale is articulation and analysis of tradeoffs of different alternatives to guide design
  • Goals: to understand the design options, their pros and cons, and to make principled decisions about which design options to pursue
  • Questions, Options, Criteria
    • A feature is represented by multiple possible options which answer a particular question
    • Criteria help articulate their tradeoffs and guide the choice of which option(s) to go with
  • Questions:
    • provide structure to the design space
    • Help uncover and define alternatives
  • Options
    • Different potential design answers to the same question
      • e.g. How should consumed food be entered into the food log?
  • Criteria
    • Required and desirable properties the design should satisfy
    • Differ in importance and generality
    • Help determine reasons for decisions
  • Sources of Criteria
    • Formative work with target users
    • Usability broadly construed
      • integration with daily routines, privacy, social acceptability, user expectations, etc.
    • Previous studies
    • Behaviorial studies
    • Requirements from other parts of the design
  • Things to Consider
    • There might not be one clear answer
    • It's important to know the most important criteria
    • A design decision can affect many other aspects of the project
    • Empirical data (from surveys, focus groups, small studies) can inform design decisions
  • SUmmary
    • deciding which option to pursue is a key design activity
    • design decisions need to be intentional and reasoned
    • QOC (Question-Option-Criteria) enables designers to make decisions in a systematic way

back to top