Chris Becker, profile picture
Uploaded byChris Becker
180 views

UX/Design Thinking Prototyping Workshop

The document presents a comprehensive overview of prototyping in UX design, detailing various types of prototypes including proof of concept, user experience, visual, and functional prototypes. It emphasizes the importance of user-centered design and iterative testing to develop and refine ideas effectively. Additionally, it highlights the role of methods such as paper prototyping and rapid prototyping in the design process.

Embed presentation

Download to read offline
Chris R. Becker Copyright 2019 UX/Design Thinking: Prototyping Lo-Fi > Hi-Fi Hello interaction education systems art/design Chris R. Becker UX Design @cbecker 1
Chris R. Becker WHO IS THIS GUY? @cbecker I have a background in I have done projects for Graphic Design - BFA : Colorado State University MFA - Art Center College of Design : Media Design Program Apple, Nissan, LAUSD, Art Center, Jet Propulsion Laboratory (NASA), VW, CB2, Adobe, Toyota, EA, Mattel, Kraft Foods, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO and more. I am a Lead Curriculum Architect / Sr. User Experience (UX) I have worked for Red Design Consultants, JPL, Art Center, Schematic, Syynlabs, Saatchi & Saatchi, Phenomenon, Innocean, Blitz, DeutschLA, the Ayzenberg Group, Handmade Mobile, Boombang, TBWA/Chait Day and Two Bit Circus, Tool of North America, 100 Years
 Currently - Lead Curriculum Architect @ Trilogy Education Services I who dabbles in physical computing experiences 2
Chris R. Becker Copyright 2019 3 SOME OF MY PROJECTS mens warehouse - Tux Rental Redesign CB2 - Physical Interactive Campaign OK GO music video - Interaction Builder Apple - Macintosh 30 years
4 Human Center Research (Discovery) > Definition > Ideation> Prototype Design Thinking + UX Chris R. Becker Copyright 2019 http://www.nurun.com/en/what-we-do/
HERMENEUTICS & UX Chris R. Becker -App -Website -Product - UI - Interactions - Features -Task / Scenario Testing Prototyping / Testing !5
TEST A SCENARIO LEAD TO ITERATION Chris R. Becker !6
Chris R. Becker Copyright 2019 prototyping Brainstorm 1 Storytelling Prototyping 7
Chris R. Becker Copyright 2019 Prototyping A laboratory for testing ideas 8
UX Definition Chris R. Becker Paper Prototyping & Rapid Prototyping 9 Copyright 2019
10 Concept Title Chris R. Becker Copyright 2019 Definition Prototype An early sample, model or release of a product built to test a concept or process. A made object to act as a thing to be replicated or learned from. Prototyping is used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is designed to test and trial a new design to enhance precision by system analysts and users. Prototyping serves to provide specifications for a real, working system rather than a theoretical one translucent concrete Makes an idea tangible
Chris R. Becker Copyright 2019 prototyping At first fast and cheap 11
Chris R. Becker Copyright 2019 Brainstorming & Ideation Idea > Product 12
Chris R. Becker Copyright 2019 13 http://www.embedded.com/design/prototyping-and-development/4008852/Why-When-and-How-The-basics-of-embedded-systems-prototyping Prototyping
Chris R. Becker Copyright 2019 14 http://www.innovationship.com/blog/the-value-of-early-prototyping https://www.slideshare.net/InfoQ/build-to-learn-rapid-prototyping-methods Prototype First Strategy
Chris R. Becker Copyright 2019 Prototyping Idea > Service 15
16 Prototyping has user centered value that is make ideas tangible Prototyping : Not just about the numbers Chris R. Becker Copyright 2019
Chris R. Becker Copyright 2019 Prototyping Ray & Charles Eames 17
Chris R. Becker Copyright 2019 Prototyping Douglas Englebart 18
EXERCISE (5 MINS) Chris R. Becker PART 1: GET OUT A SHEET OF PAPER PART 2: DESIGN A WATCH !19
Chris R. Becker Copyright 2019 Prototyping 5 basic categories of Prototyping: 1.Proof of Principle 2.Form Study Prototype 3.User Experience Prototype 4.Visual Prototype
 5.Functional Prototype 20
Chris R. Becker Copyright 2019 Prototyping 1.Proof of Principle / Proof of Concept A Proof of concept prototype is used to test some aspect of the intended design without attempting to exactly simulate the visual appearance, choice of materials or intended manufacturing process. Such prototypes can be used to "prove" out a potential design approach such as range of motion, mechanics, sensors, architecture, etc. These types of models are often used to identify which design options will not work, or where further development and testing is necessary. (in electronics sometimes built on a breadboard). 21
Chris R. Becker Copyright 2019 Prototyping: Proof of Principle 22
Chris R. Becker Copyright 2019 Prototyping <6> Allows designers to explore the basic size, look and feel of a product without simulating the actual function or exact visual appearance of the product. They can help assess ergonomic factors and provide insight into visual aspects of the product's final form. Form Study Prototypes are often hand-carved or machined models from easily sculpted, inexpensive materials (e.g., urethane foam), without representing the intended color, finish, or texture. Due to the materials used, these models are intended for internal decision making and are generally not durable enough or suitable for use by representative users or consumers. 2. Form Factor Prototype 23
Chris R. Becker Copyright 2019 Prototyping : Form Factor <6> 24
Chris R. Becker Copyright 2019 Prototyping Frank Gehry Sketches Prototyping is sketching through making 25
Chris R. Becker Copyright 2019 Prototyping <6> 3. User Experience Prototype A User Experience Model invites active human interaction and is primarily used to support user focused research. While intentionally not addressing possible aesthetic treatments, this type of model does more accurately represent the overall size, proportions, interfaces, and articulation of a promising concept. This model allows early assessment of how a potential user interacts with various elements, motions, and actions of a concept which define the initial use scenario and overall user experience. 26
Chris R. Becker Copyright 2019 Prototype: User Experience Prototype 27
Chris R. Becker Copyright 2019 prototype 4. Visual Prototype Capture intended design aesthetic and simulate the appearance, color and surface textures of the intended product but will not actually embody the function(s) of the final product. These models will be suitable for use in market research, executive reviews and approval, packaging mock-ups, and photo shoots for sales literature. 28
Chris R. Becker Copyright 2019 Prototyping Idea - Prototyping As these models are fully intended to be used and handled, more robust construction is key. Materials typically include heavy weight paper, plywood, foam, and CNC machined components. Construction of user experience models is typically driven by preliminary sketches / narrative or CAD drawing which may be constructed from scratch or with methods such as 3D printers etc. 29
Chris R. Becker Copyright 2019 Prototyping 5. Functional Prototype / Working Prototype will, to the greatest extent practical, attempt to simulate the final design, aesthetics, materials and functionality of the intended design. The functional prototype may be reduced in size (scaled down) in order to reduce costs. The construction of a fully working full-scale prototype and the ultimate test of concept, is the engineers' final check for design flaws and allows last-minute improvements to be made before larger production runs are ordered. 30
Chris R. Becker Copyright 2019 Prototyping: Functional Prototype 31
Chris R. Becker Copyright 2019 Prototyping 32
33 Bill Buxton: Principle Design Researcher at Microsoft Prototyping : Not just about the numbers Chris R. Becker Copyright 2019 https://blogs.microsoft.com/next/2015/03/11/the-next-at-microsoft-podcast-ep-2-philosophy-of-design/
34 UX Definition Chris R. Becker Copyright 2019 Paper Prototyping Methods
Chris R. Becker Copyright 2019 35 Concept Title An paper model that pulls content through an open window in the device context to simulate scrolling. Pro: Connected 1 flow experience Good for long pages and testing scrolling. Con: Harder to iterate and patch Harder to hide the next step Method 1: 
 The paper strip scroll model
Chris R. Becker Copyright 2019 36 Paper Prototyping An paper model that pulls through an open window in the device context from side to side. Pro: Good for flowing experience Good for swiping interactions Good for stepped sequence Con: Harder to iterate and patch Harder to hide the next step Method 2: 
 The paper strip pan model
Chris R. Becker Copyright 2019 37 Paper Prototyping An paper model that stacks Paper is in a stacked list from A to B sequence for a device. Pro: Easy to organize. Good for iterating on individual screens. Good for stepped sequences. Con: Forces user through a linear interaction A through (n) Harder to show interactions / transitions. More components to redraw. Method 3: 
 The paper flip / stack model
Chris R. Becker Copyright 2019 38 Paper Prototyping An paper model that has uses a flipping interacting through the sequence of an interface. Pro: Good for lots of screens. Good for organization. Looks considered and more robust for testing. Con: Harder to represent interactions. Forces user through a linear interaction A through (n) More components to redraw. http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping Method 4: 
 The paper fan / book model
Chris R. Becker Copyright 2019 39 Paper Prototyping An paper model that pulls through an open window in the device context. Tabs establish the steps associated with the user interactions. Pro: Connected 1 flow experience Allows steps to be skipped Easier to guide a user and test a sequence. Con: Harder to iterate and patch Harder to maintain over time Method 5: 
 The paper tabs model https://vimeo.com/38256134
Chris R. Becker Copyright 2019 40 Paper Prototyping An paper model that has individual elements as floating cut out shapes that can layer and stack for context. Pro: Can handel multiple interactions. Can indicate internal interactions. Can stack on top of other interactions. Con: Harder to iterate and patch. More components and pieces to maintain. Method 6: 
 The paper sticky / card model http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping
Chris R. Becker Copyright 2019 41 Paper Prototyping An paper model that use how paper can be folded to hide and reveal content based on interactions. Pro: Can handel multiple interactions. Can indicate internal interactions. Good for showing stepped interactions. Con: Harder to iterate More components and pieces to maintain Harder to reveal context Method 7: 
 The paper fold model http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping https://www.youtube.com/ watch?v=GrV2SZuRPv0
Chris R. Becker Copyright 2019 42 Paper Prototyping An paper model that has uses both directions for how a user interacts with a interface. Pro: Can handle multiple interaction directions. Addresses animation functionality of devices. Looks considered and more robust. Con: Harder to think about and build. More components and pieces to maintain. Harder to understand the sequence during testing. Method 8: 
 The paper directional UI model
Chris R. Becker Copyright 2019 43 Paper Prototyping An paper model that uses the spacial experience and 1 to 1 context of an interaction. Pro: Can simulate group interactions. Addresses ergonomic contexts. Applies a duel handed touch interface. Con: Harder to think about and build. Larger surface to draw. Harder to understand the sequence. http://sva.isotope221.com/mta-map-paper.html Method 10: 
 The large format model
Chris R. Becker Copyright 2019 44 Paper Prototyping An paper model that considers a unique application of a screen or other physical interface. Pro: Can simulate the form and function of a product. Approximates components and physical interaction Applys a duel handed touch interface. Con: Harder to think about and build. More complicated construction. Harder to understand the sequence. Method 11: 
 The non standardized screen model https://www.youtube.com/watch?v=k_9Q-KDSb9o
Chris R. Becker Copyright 2019 Prototyping <6> Rapid Prototyping Laser Cutters 3D Printers 3D modeling software 45
Chris R. Becker Copyright 2019 Prototyping Microprocessing Ubiquitous Computation (ubicomp) is an advanced computing concept where computing is made to appear everywhere and anywhere. In contrast to desktop computing, ubiquitous computing can occur using any device, in any location, and in any format. A user interacts with the computer, which can exist in many different forms, including laptop computers, tablets, terminals and phones. The underlying technologies to support ubiquitous computing include Internet, advanced middleware, operating system, mobile code, sensors, microprocessors, new I/O and user interfaces, networks, mobile protocols, location and positioning and new materials. 46
Chris R. Becker Copyright 2019 47 Paper Prototyping Bruce Sterling Michael Bruce Sterling is an American science fiction author known for his novels and work on the Mirrorshades anthology. This work helped to define the cyberpunk genre. Recommended Reading https://mitpress.mit.edu/books/shaping-things Shaping things http://wtf.tw/ref/ sterling_shaping_things.pdf
EXERCISE Chris R. Becker PART 1 : DEFINE A METHOD PART 2 : BUILD A PAPER MODEL PART 3 : !48
Chris R. Becker Copyright 2019 49 Prototyping Prototyping has user centered value that is make ideas tangible & Should be Tested Class Responsibilities https://humanfactors.jmir.org/2016/1/e12/
Chris R. Becker Copyright 2019 Brainstorming & Ideation Story > Prototype Make>Test>Make Again 50
51 Prototype / MVP / Software should use an Agile process for better results Design Thinking Chris R. Becker Copyright 2019 http://intellicagroup.com/how-not-having-a-prototype-can-ruin-a-startup/
PAPER WIREFRAME SKETCHES Chris R. Becker !52
DOUBLE DIAMOND PROCESS Chris R. Becker We Are Here !53
Chris R. Becker Copyright 2019 Sketch > Wireframe 54 Wire Sketch Digitized Wireframe
Chris R. Becker Copyright 2019 Interaction Model & Framework 55 Empathy MapPING Shows & Features Content Depth 1. Card Model 2. Scroll Model 3. Hub & Spoke Model 6. Directional Model 4. Unfold Model 5. Mosiac Model
Chris R. Becker Copyright 2019 UX Wireframing 56 1. What is your Interface? A phone, a computer, a kiosk, a car dashboard, etc. 2. Know your Pixel size ( Sketch 1 to 1) When learning to wireframe always sketch 1 to 1 to help build muscle memory and sketching interface understanding. 
 
 3. Sketch sequence first then versions. You are prototyping interactions with an interface so all sketches should be 2 or more screens. 4. Define State Change with Color . You are prototyping interactions with an interface so defining active states and areas of interaction with a color can assist in discussion and presentation.

Chris R. Becker Copyright 2019 Know your Size 57
Chris R. Becker Copyright 2019 Sketch with a grid “the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” 58
Chris R. Becker Copyright 2019 Parts UX Wireframing Ut ac venenatis odio. Donec pellentesque felis in purus consectetur, sed interdum nulla commodo. Etiam augue neque, tempor quis nulla eu, ultricies iaculis ligula. Morbi tincidunt scelerisque nulla, ut luctus justo rutrum sit amet. Nunc nec tellus rutrum orci sagittis imperdiet. Aliquam sit amet mauris et nisl eleifend venenatis vel dignissim orci. Duis quis nulla sit amet ante posuere bibendum. Stay Connected Basic Callout Box Quisque viverra metus non dui egestas, ac dignissim risus sollicitudin. Vestibulum eu nisl vel libero suscipit interdum id et orci. Cras imperdiet in neque vitae. Read More 1. Structure Navigation & Current State (Tabs, UI - Hamburger, 2. Layout and Composition Using a logic to design based on a grid. 
 
 3. Content Boxes with x’s equal images / video. Lines can represent copy 4. Define State Change with Color . You are prototyping interactions with an interface so defining active states and areas of interaction with a color can assist in discussion and presentation. 4. Define State Change with Color . You are prototyping interactions with an interface so defining active states and areas of interaction with a color can assist in discussion and presentation.
 59
Chris R. Becker Copyright 2019 Responsive Web Design “the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” A Website design process that adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries (an extension of the @media rule) RESPONSIVE WEB DESIGN 60
Chris R. Becker Copyright 2019 Layout / Navigation UI Elements User Interface / GUI Development 61
62 Clickable prototyping is about speeding up design to market Prototyping Tools Copyright 2019 http://www.prototypr.io/
Chris R. Becker Copyright 2019 Part 1: Paper Sketches + Invision “the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” 63
EXERCISE Chris R. Becker PART 1 : ADD PROTOTYPE WALK THROUGH TO INVISION PART 2 : LEAVE COMMENTS ON NEIGHBORS PROTOTYPE PART 3: ITERATE AND DIGITIZE YOUR WIREFRAME !64

More Related Content

PDF
DFA brainstorming lecture
byChris Becker
 
PDF
Why UX is Important
byChris Becker
 
PDF
INDIAHCI2016_DesignThinking&Innovation_Workshops_Aboli
byAboli Maydeo
 
PDF
Design process & methods
byLuca Galli
 
PDF
Design Theory - Lecture 02: Design processes & Problem solving
byBas Leurs
 
PDF
Grid Systems
byBas Leurs
 
PDF
Design Stories Are The New User Stories
byLuis Daniel Rodriguez
 
PDF
Tools of the UX Trade
bydpanarelli
 
DFA brainstorming lecture
byChris Becker
 
Why UX is Important
byChris Becker
 
INDIAHCI2016_DesignThinking&Innovation_Workshops_Aboli
byAboli Maydeo
 
Design process & methods
byLuca Galli
 
Design Theory - Lecture 02: Design processes & Problem solving
byBas Leurs
 
Grid Systems
byBas Leurs
 
Design Stories Are The New User Stories
byLuis Daniel Rodriguez
 
Tools of the UX Trade
bydpanarelli
 

What's hot

PDF
User Experience Design: A Primer for Marketers
byJason Brush
 
PDF
Design Process | Tool 01" personae"
byGessica Puri
 
PPTX
UX for Dummies
byLara Fedoroff
 
PDF
Design Theory - Lecture 03: Design as Learning / Methods & Tools
byBas Leurs
 
PPTX
Design Fixation for UX Professionals in 10 Minutes or Less! (Dec. 11, 2013)
byrobyoumans
 
PPT
Interaction 09 Introduction to Interaction Design
byDave Malouf
 
PPTX
Introduction to User Experience Design
byKiera McMaster
 
PDF
Technology,
 visual Trends 
& References
byCocoon Experience
 
PDF
Creating an Online Community for User Research
byTom Vollaro
 
PDF
Designing our future overlords or: How I Learned to Stop Worrying and Love Ro...
byProgress UX
 
PDF
Ixd15 egoodman
byegoodman
 
PDF
Optimizing for a faster user experience Pt 2: How-to.
byJames Christie
 
PDF
Building a (good) UX Portfolio
bycraigmmacdonald
 
PDF
Designing Interactions / Experiences: Lecture #05
byItamar Medeiros
 
PDF
Trends in interactive design 2013
byProphets Agency
 
PDF
BA Thesis_Boris Gantz_DMI Lucerne_2015
byBoris Gantz
 
PDF
Community Engagement through User Experience
byInteractive Mechanics
 
PDF
What is UX v1
byMike Gallers
 
PDF
UX Design Essential Theories
byRavi Bhadauria
 
PDF
Introduction to UX for Developers
byJacques Woodcock
 
User Experience Design: A Primer for Marketers
byJason Brush
 
Design Process | Tool 01" personae"
byGessica Puri
 
UX for Dummies
byLara Fedoroff
 
Design Theory - Lecture 03: Design as Learning / Methods & Tools
byBas Leurs
 
Design Fixation for UX Professionals in 10 Minutes or Less! (Dec. 11, 2013)
byrobyoumans
 
Interaction 09 Introduction to Interaction Design
byDave Malouf
 
Introduction to User Experience Design
byKiera McMaster
 
Technology,
 visual Trends 
& References
byCocoon Experience
 
Creating an Online Community for User Research
byTom Vollaro
 
Designing our future overlords or: How I Learned to Stop Worrying and Love Ro...
byProgress UX
 
Ixd15 egoodman
byegoodman
 
Optimizing for a faster user experience Pt 2: How-to.
byJames Christie
 
Building a (good) UX Portfolio
bycraigmmacdonald
 
Designing Interactions / Experiences: Lecture #05
byItamar Medeiros
 
Trends in interactive design 2013
byProphets Agency
 
BA Thesis_Boris Gantz_DMI Lucerne_2015
byBoris Gantz
 
Community Engagement through User Experience
byInteractive Mechanics
 
What is UX v1
byMike Gallers
 
UX Design Essential Theories
byRavi Bhadauria
 
Introduction to UX for Developers
byJacques Woodcock
 

Similar to UX/Design Thinking Prototyping Workshop

PDF
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
byMark Billinghurst
 
PDF
MHIT 603: Introduction to Prototyping
byMark Billinghurst
 
PPTX
Paper Prototyping
byDavid Lamas
 
PPTX
2014 Paper Prototyping by David Lamas
byEuropean Innovation Academy
 
PPTX
20210821151927_ISYS6619-UX for Digital Business Topik 09.pptx
byradiantknight008
 
PDF
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
byAnton Chandra
 
PPT
Interface prototyping 2014
byMariana Salgado
 
PPTX
User Vision Breakfast Briefing - Prototyping
byUser Vision
 
PDF
The ultimate guide to prototyping
byMarcelo Graciolli
 
PDF
MHIT 603: Lecture 3 - Prototyping Tools
byMark Billinghurst
 
PPTX
Paper prototyping
byEuropean Innovation Academy
 
PDF
COMP 4026 Lecture3 Prototyping and Evaluation
byMark Billinghurst
 
PPTX
Rapid Prototyping in UX Design
byStephen Denning
 
PPT
10Prototyping.ppt
byEleonoraPrits
 
PPTX
Prototyping
byEman Abed AlWahhab
 
PPTX
Prototyping
byEman Abed AlWahhab
 
PDF
Paper Prototyping for Agile Development
byMaxim Gaponov
 
PDF
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
byScott McCormick
 
PPT
Paper Prototyping
byDevesh Jagatram
 
PDF
Introduction to prototyping
byAlexis Antonelli
 
Rapid Prototyping for XR: Lecture 1 Introduction to Prototyping
byMark Billinghurst
 
MHIT 603: Introduction to Prototyping
byMark Billinghurst
 
Paper Prototyping
byDavid Lamas
 
2014 Paper Prototyping by David Lamas
byEuropean Innovation Academy
 
20210821151927_ISYS6619-UX for Digital Business Topik 09.pptx
byradiantknight008
 
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni Mahariasha
byAnton Chandra
 
Interface prototyping 2014
byMariana Salgado
 
User Vision Breakfast Briefing - Prototyping
byUser Vision
 
The ultimate guide to prototyping
byMarcelo Graciolli
 
MHIT 603: Lecture 3 - Prototyping Tools
byMark Billinghurst
 
Paper prototyping
byEuropean Innovation Academy
 
COMP 4026 Lecture3 Prototyping and Evaluation
byMark Billinghurst
 
Rapid Prototyping in UX Design
byStephen Denning
 
10Prototyping.ppt
byEleonoraPrits
 
Prototyping
byEman Abed AlWahhab
 
Prototyping
byEman Abed AlWahhab
 
Paper Prototyping for Agile Development
byMaxim Gaponov
 
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
byScott McCormick
 
Paper Prototyping
byDevesh Jagatram
 
Introduction to prototyping
byAlexis Antonelli
 

Recently uploaded

PDF
International Journal of Information Technology, Modeling and Computing (IJITMC)
byZac Darcy
 
PPTX
Stylish & Elegant Office Wear for Women.
bydmcchhayajii
 
PDF
L003 Lower Limb Bone / Lower Limb Bone .pdf
byProf. Dr. Ahmed Ashour
 
PDF
Aakanksha Clothing – Premium Shirt Manufacturing Factory Profile
byhraakankshaclothing
 
PDF
Final task jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
byLinaBouhlel
 
PPTX
Top Security Mistakes Modern Workplaces Make — and How to Avoid Them
byanurag anand
 
PDF
SigmaIT - Website Development Company in Lucknow.pdf
bySigmaIT Software
 
PDF
MGV History-3 Classical .pdf Two single family residences designed in classic...
byManny Vesa
 
PPTX
Lesson 1 - Natural and Immersive Interaction.pptx
byboyjainalabirin
 
PPTX
Understanding the built environment, in which the built environment is describe
byssusera14985
 
PPTX
LESSON 4 CP.pptx 2d animation for grade 12
byboyjainalabirin
 
PPTX
Numerical Expressions Education Presentation in Orange Green Red Nostalgic Ha...
byLoveMaribao
 
PPTX
CAD-II Lab (Week-07) Design Table and Configurations.pptx
byjhjhtrtr34
 
PPT
MitosisandMeiosis.ppt Reporting 2025- 2026
byLoveMaribao
 
PPTX
Reaching Adolescence is very important sorry copright
byimmanuelfide
 
PDF
Sorbonne Clusters Systems Diagram and Blurb
byThomas GIRARD, MA, CDP
 
PPTX
CRAYON OFFICE PPT.pptx which is very use
byruchitakatre17
 
PDF
L005 Lower Limb Muscles of gluteal region / Lower Limb Muscles of gluteal reg...
byProf. Dr. Ahmed Ashour
 
PDF
A Graphic Designing Project on "Microinteraction Centric Design"
byRed Apple Learning
 
PPTX
This presentation is about basic designing to website using basic html and css
byChristopherPurcia1
 
International Journal of Information Technology, Modeling and Computing (IJITMC)
byZac Darcy
 
Stylish & Elegant Office Wear for Women.
bydmcchhayajii
 
L003 Lower Limb Bone / Lower Limb Bone .pdf
byProf. Dr. Ahmed Ashour
 
Aakanksha Clothing – Premium Shirt Manufacturing Factory Profile
byhraakankshaclothing
 
Final task jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
byLinaBouhlel
 
Top Security Mistakes Modern Workplaces Make — and How to Avoid Them
byanurag anand
 
SigmaIT - Website Development Company in Lucknow.pdf
bySigmaIT Software
 
MGV History-3 Classical .pdf Two single family residences designed in classic...
byManny Vesa
 
Lesson 1 - Natural and Immersive Interaction.pptx
byboyjainalabirin
 
Understanding the built environment, in which the built environment is describe
byssusera14985
 
LESSON 4 CP.pptx 2d animation for grade 12
byboyjainalabirin
 
Numerical Expressions Education Presentation in Orange Green Red Nostalgic Ha...
byLoveMaribao
 
CAD-II Lab (Week-07) Design Table and Configurations.pptx
byjhjhtrtr34
 
MitosisandMeiosis.ppt Reporting 2025- 2026
byLoveMaribao
 
Reaching Adolescence is very important sorry copright
byimmanuelfide
 
Sorbonne Clusters Systems Diagram and Blurb
byThomas GIRARD, MA, CDP
 
CRAYON OFFICE PPT.pptx which is very use
byruchitakatre17
 
L005 Lower Limb Muscles of gluteal region / Lower Limb Muscles of gluteal reg...
byProf. Dr. Ahmed Ashour
 
A Graphic Designing Project on "Microinteraction Centric Design"
byRed Apple Learning
 
This presentation is about basic designing to website using basic html and css
byChristopherPurcia1
 

UX/Design Thinking Prototyping Workshop

  • 1.
    Chris R. Becker Copyright2019 UX/Design Thinking: Prototyping Lo-Fi > Hi-Fi Hello interaction education systems art/design Chris R. Becker UX Design @cbecker 1
  • 2.
    Chris R. Becker WHOIS THIS GUY? @cbecker I have a background in I have done projects for Graphic Design - BFA : Colorado State University MFA - Art Center College of Design : Media Design Program Apple, Nissan, LAUSD, Art Center, Jet Propulsion Laboratory (NASA), VW, CB2, Adobe, Toyota, EA, Mattel, Kraft Foods, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO and more. I am a Lead Curriculum Architect / Sr. User Experience (UX) I have worked for Red Design Consultants, JPL, Art Center, Schematic, Syynlabs, Saatchi & Saatchi, Phenomenon, Innocean, Blitz, DeutschLA, the Ayzenberg Group, Handmade Mobile, Boombang, TBWA/Chait Day and Two Bit Circus, Tool of North America, 100 Years
 Currently - Lead Curriculum Architect @ Trilogy Education Services I who dabbles in physical computing experiences 2
  • 3.
    Chris R. Becker Copyright2019 3 SOME OF MY PROJECTS mens warehouse - Tux Rental Redesign CB2 - Physical Interactive Campaign OK GO music video - Interaction Builder Apple - Macintosh 30 years
  • 4.
    4 Human Center Research(Discovery) > Definition > Ideation> Prototype Design Thinking + UX Chris R. Becker Copyright 2019 http://www.nurun.com/en/what-we-do/
  • 5.
    HERMENEUTICS & UX ChrisR. Becker -App -Website -Product - UI - Interactions - Features -Task / Scenario Testing Prototyping / Testing !5
  • 6.
    TEST A SCENARIOLEAD TO ITERATION Chris R. Becker !6
  • 7.
    Chris R. Becker Copyright2019 prototyping Brainstorm 1 Storytelling Prototyping 7
  • 8.
    Chris R. Becker Copyright2019 Prototyping A laboratory for testing ideas 8
  • 9.
    UX Definition Chris R.Becker Paper Prototyping & Rapid Prototyping 9 Copyright 2019
  • 10.
    10 Concept Title Chris R.Becker Copyright 2019 Definition Prototype An early sample, model or release of a product built to test a concept or process. A made object to act as a thing to be replicated or learned from. Prototyping is used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is designed to test and trial a new design to enhance precision by system analysts and users. Prototyping serves to provide specifications for a real, working system rather than a theoretical one translucent concrete Makes an idea tangible
  • 11.
    Chris R. Becker Copyright2019 prototyping At first fast and cheap 11
  • 12.
    Chris R. Becker Copyright2019 Brainstorming & Ideation Idea > Product 12
  • 13.
    Chris R. Becker Copyright2019 13 http://www.embedded.com/design/prototyping-and-development/4008852/Why-When-and-How-The-basics-of-embedded-systems-prototyping Prototyping
  • 14.
    Chris R. Becker Copyright2019 14 http://www.innovationship.com/blog/the-value-of-early-prototyping https://www.slideshare.net/InfoQ/build-to-learn-rapid-prototyping-methods Prototype First Strategy
  • 15.
    Chris R. Becker Copyright2019 Prototyping Idea > Service 15
  • 16.
    16 Prototyping has usercentered value that is make ideas tangible Prototyping : Not just about the numbers Chris R. Becker Copyright 2019
  • 17.
    Chris R. Becker Copyright2019 Prototyping Ray & Charles Eames 17
  • 18.
    Chris R. Becker Copyright2019 Prototyping Douglas Englebart 18
  • 19.
    EXERCISE (5 MINS) ChrisR. Becker PART 1: GET OUT A SHEET OF PAPER PART 2: DESIGN A WATCH !19
  • 20.
    Chris R. Becker Copyright2019 Prototyping 5 basic categories of Prototyping: 1.Proof of Principle 2.Form Study Prototype 3.User Experience Prototype 4.Visual Prototype
 5.Functional Prototype 20
  • 21.
    Chris R. Becker Copyright2019 Prototyping 1.Proof of Principle / Proof of Concept A Proof of concept prototype is used to test some aspect of the intended design without attempting to exactly simulate the visual appearance, choice of materials or intended manufacturing process. Such prototypes can be used to "prove" out a potential design approach such as range of motion, mechanics, sensors, architecture, etc. These types of models are often used to identify which design options will not work, or where further development and testing is necessary. (in electronics sometimes built on a breadboard). 21
  • 22.
    Chris R. Becker Copyright2019 Prototyping: Proof of Principle 22
  • 23.
    Chris R. Becker Copyright2019 Prototyping <6> Allows designers to explore the basic size, look and feel of a product without simulating the actual function or exact visual appearance of the product. They can help assess ergonomic factors and provide insight into visual aspects of the product's final form. Form Study Prototypes are often hand-carved or machined models from easily sculpted, inexpensive materials (e.g., urethane foam), without representing the intended color, finish, or texture. Due to the materials used, these models are intended for internal decision making and are generally not durable enough or suitable for use by representative users or consumers. 2. Form Factor Prototype 23
  • 24.
    Chris R. Becker Copyright2019 Prototyping : Form Factor <6> 24
  • 25.
    Chris R. Becker Copyright2019 Prototyping Frank Gehry Sketches Prototyping is sketching through making 25
  • 26.
    Chris R. Becker Copyright2019 Prototyping <6> 3. User Experience Prototype A User Experience Model invites active human interaction and is primarily used to support user focused research. While intentionally not addressing possible aesthetic treatments, this type of model does more accurately represent the overall size, proportions, interfaces, and articulation of a promising concept. This model allows early assessment of how a potential user interacts with various elements, motions, and actions of a concept which define the initial use scenario and overall user experience. 26
  • 27.
    Chris R. Becker Copyright2019 Prototype: User Experience Prototype 27
  • 28.
    Chris R. Becker Copyright2019 prototype 4. Visual Prototype Capture intended design aesthetic and simulate the appearance, color and surface textures of the intended product but will not actually embody the function(s) of the final product. These models will be suitable for use in market research, executive reviews and approval, packaging mock-ups, and photo shoots for sales literature. 28
  • 29.
    Chris R. Becker Copyright2019 Prototyping Idea - Prototyping As these models are fully intended to be used and handled, more robust construction is key. Materials typically include heavy weight paper, plywood, foam, and CNC machined components. Construction of user experience models is typically driven by preliminary sketches / narrative or CAD drawing which may be constructed from scratch or with methods such as 3D printers etc. 29
  • 30.
    Chris R. Becker Copyright2019 Prototyping 5. Functional Prototype / Working Prototype will, to the greatest extent practical, attempt to simulate the final design, aesthetics, materials and functionality of the intended design. The functional prototype may be reduced in size (scaled down) in order to reduce costs. The construction of a fully working full-scale prototype and the ultimate test of concept, is the engineers' final check for design flaws and allows last-minute improvements to be made before larger production runs are ordered. 30
  • 31.
    Chris R. Becker Copyright2019 Prototyping: Functional Prototype 31
  • 32.
    Chris R. Becker Copyright2019 Prototyping 32
  • 33.
    33 Bill Buxton: PrincipleDesign Researcher at Microsoft Prototyping : Not just about the numbers Chris R. Becker Copyright 2019 https://blogs.microsoft.com/next/2015/03/11/the-next-at-microsoft-podcast-ep-2-philosophy-of-design/
  • 34.
    34 UX Definition Chris R.Becker Copyright 2019 Paper Prototyping Methods
  • 35.
    Chris R. Becker Copyright2019 35 Concept Title An paper model that pulls content through an open window in the device context to simulate scrolling. Pro: Connected 1 flow experience Good for long pages and testing scrolling. Con: Harder to iterate and patch Harder to hide the next step Method 1: 
 The paper strip scroll model
  • 36.
    Chris R. Becker Copyright2019 36 Paper Prototyping An paper model that pulls through an open window in the device context from side to side. Pro: Good for flowing experience Good for swiping interactions Good for stepped sequence Con: Harder to iterate and patch Harder to hide the next step Method 2: 
 The paper strip pan model
  • 37.
    Chris R. Becker Copyright2019 37 Paper Prototyping An paper model that stacks Paper is in a stacked list from A to B sequence for a device. Pro: Easy to organize. Good for iterating on individual screens. Good for stepped sequences. Con: Forces user through a linear interaction A through (n) Harder to show interactions / transitions. More components to redraw. Method 3: 
 The paper flip / stack model
  • 38.
    Chris R. Becker Copyright2019 38 Paper Prototyping An paper model that has uses a flipping interacting through the sequence of an interface. Pro: Good for lots of screens. Good for organization. Looks considered and more robust for testing. Con: Harder to represent interactions. Forces user through a linear interaction A through (n) More components to redraw. http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping Method 4: 
 The paper fan / book model
  • 39.
    Chris R. Becker Copyright2019 39 Paper Prototyping An paper model that pulls through an open window in the device context. Tabs establish the steps associated with the user interactions. Pro: Connected 1 flow experience Allows steps to be skipped Easier to guide a user and test a sequence. Con: Harder to iterate and patch Harder to maintain over time Method 5: 
 The paper tabs model https://vimeo.com/38256134
  • 40.
    Chris R. Becker Copyright2019 40 Paper Prototyping An paper model that has individual elements as floating cut out shapes that can layer and stack for context. Pro: Can handel multiple interactions. Can indicate internal interactions. Can stack on top of other interactions. Con: Harder to iterate and patch. More components and pieces to maintain. Method 6: 
 The paper sticky / card model http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping
  • 41.
    Chris R. Becker Copyright2019 41 Paper Prototyping An paper model that use how paper can be folded to hide and reveal content based on interactions. Pro: Can handel multiple interactions. Can indicate internal interactions. Good for showing stepped interactions. Con: Harder to iterate More components and pieces to maintain Harder to reveal context Method 7: 
 The paper fold model http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping https://www.youtube.com/ watch?v=GrV2SZuRPv0
  • 42.
    Chris R. Becker Copyright2019 42 Paper Prototyping An paper model that has uses both directions for how a user interacts with a interface. Pro: Can handle multiple interaction directions. Addresses animation functionality of devices. Looks considered and more robust. Con: Harder to think about and build. More components and pieces to maintain. Harder to understand the sequence during testing. Method 8: 
 The paper directional UI model
  • 43.
    Chris R. Becker Copyright2019 43 Paper Prototyping An paper model that uses the spacial experience and 1 to 1 context of an interaction. Pro: Can simulate group interactions. Addresses ergonomic contexts. Applies a duel handed touch interface. Con: Harder to think about and build. Larger surface to draw. Harder to understand the sequence. http://sva.isotope221.com/mta-map-paper.html Method 10: 
 The large format model
  • 44.
    Chris R. Becker Copyright2019 44 Paper Prototyping An paper model that considers a unique application of a screen or other physical interface. Pro: Can simulate the form and function of a product. Approximates components and physical interaction Applys a duel handed touch interface. Con: Harder to think about and build. More complicated construction. Harder to understand the sequence. Method 11: 
 The non standardized screen model https://www.youtube.com/watch?v=k_9Q-KDSb9o
  • 45.
    Chris R. Becker Copyright2019 Prototyping <6> Rapid Prototyping Laser Cutters 3D Printers 3D modeling software 45
  • 46.
    Chris R. Becker Copyright2019 Prototyping Microprocessing Ubiquitous Computation (ubicomp) is an advanced computing concept where computing is made to appear everywhere and anywhere. In contrast to desktop computing, ubiquitous computing can occur using any device, in any location, and in any format. A user interacts with the computer, which can exist in many different forms, including laptop computers, tablets, terminals and phones. The underlying technologies to support ubiquitous computing include Internet, advanced middleware, operating system, mobile code, sensors, microprocessors, new I/O and user interfaces, networks, mobile protocols, location and positioning and new materials. 46
  • 47.
    Chris R. Becker Copyright2019 47 Paper Prototyping Bruce Sterling Michael Bruce Sterling is an American science fiction author known for his novels and work on the Mirrorshades anthology. This work helped to define the cyberpunk genre. Recommended Reading https://mitpress.mit.edu/books/shaping-things Shaping things http://wtf.tw/ref/ sterling_shaping_things.pdf
  • 48.
    EXERCISE Chris R. Becker PART1 : DEFINE A METHOD PART 2 : BUILD A PAPER MODEL PART 3 : !48
  • 49.
    Chris R. Becker Copyright2019 49 Prototyping Prototyping has user centered value that is make ideas tangible & Should be Tested Class Responsibilities https://humanfactors.jmir.org/2016/1/e12/
  • 50.
    Chris R. Becker Copyright2019 Brainstorming & Ideation Story > Prototype Make>Test>Make Again 50
  • 51.
    51 Prototype / MVP/ Software should use an Agile process for better results Design Thinking Chris R. Becker Copyright 2019 http://intellicagroup.com/how-not-having-a-prototype-can-ruin-a-startup/
  • 52.
  • 53.
    DOUBLE DIAMOND PROCESS ChrisR. Becker We Are Here !53
  • 54.
    Chris R. Becker Copyright2019 Sketch > Wireframe 54 Wire Sketch Digitized Wireframe
  • 55.
    Chris R. Becker Copyright2019 Interaction Model & Framework 55 Empathy MapPING Shows & Features Content Depth 1. Card Model 2. Scroll Model 3. Hub & Spoke Model 6. Directional Model 4. Unfold Model 5. Mosiac Model
  • 56.
    Chris R. Becker Copyright2019 UX Wireframing 56 1. What is your Interface? A phone, a computer, a kiosk, a car dashboard, etc. 2. Know your Pixel size ( Sketch 1 to 1) When learning to wireframe always sketch 1 to 1 to help build muscle memory and sketching interface understanding. 
 
 3. Sketch sequence first then versions. You are prototyping interactions with an interface so all sketches should be 2 or more screens. 4. Define State Change with Color . You are prototyping interactions with an interface so defining active states and areas of interaction with a color can assist in discussion and presentation.

  • 57.
    Chris R. Becker Copyright2019 Know your Size 57
  • 58.
    Chris R. Becker Copyright2019 Sketch with a grid “the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” 58
  • 59.
    Chris R. Becker Copyright2019 Parts UX Wireframing Ut ac venenatis odio. Donec pellentesque felis in purus consectetur, sed interdum nulla commodo. Etiam augue neque, tempor quis nulla eu, ultricies iaculis ligula. Morbi tincidunt scelerisque nulla, ut luctus justo rutrum sit amet. Nunc nec tellus rutrum orci sagittis imperdiet. Aliquam sit amet mauris et nisl eleifend venenatis vel dignissim orci. Duis quis nulla sit amet ante posuere bibendum. Stay Connected Basic Callout Box Quisque viverra metus non dui egestas, ac dignissim risus sollicitudin. Vestibulum eu nisl vel libero suscipit interdum id et orci. Cras imperdiet in neque vitae. Read More 1. Structure Navigation & Current State (Tabs, UI - Hamburger, 2. Layout and Composition Using a logic to design based on a grid. 
 
 3. Content Boxes with x’s equal images / video. Lines can represent copy 4. Define State Change with Color . You are prototyping interactions with an interface so defining active states and areas of interaction with a color can assist in discussion and presentation. 4. Define State Change with Color . You are prototyping interactions with an interface so defining active states and areas of interaction with a color can assist in discussion and presentation.
 59
  • 60.
    Chris R. Becker Copyright2019 Responsive Web Design “the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” A Website design process that adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries (an extension of the @media rule) RESPONSIVE WEB DESIGN 60
  • 61.
    Chris R. Becker Copyright2019 Layout / Navigation UI Elements User Interface / GUI Development 61
  • 62.
    62 Clickable prototyping isabout speeding up design to market Prototyping Tools Copyright 2019 http://www.prototypr.io/
  • 63.
    Chris R. Becker Copyright2019 Part 1: Paper Sketches + Invision “the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” 63
  • 64.
    EXERCISE Chris R. Becker PART1 : ADD PROTOTYPE WALK THROUGH TO INVISION PART 2 : LEAVE COMMENTS ON NEIGHBORS PROTOTYPE PART 3: ITERATE AND DIGITIZE YOUR WIREFRAME !64