Hi, this (very short) deck is mainly meant to help with my Design Studies lessons to undergraduate students at NABA, Media Design and Multimedia Arts School, Milan. These slides are supposed to come with a live commentary for the class, so sorry if you wish to have more explicit context and liaisons. Please see referred sources to this purpose.
Learn how to see beyond typical agile user stories that annoy instead of inspire when building the “unknown”. Pave the way forward for your team by writing design stories that break down a complex problem into “tiny pulses” that when put together make up a complex system. Apply “Design Thinking” to not lose sight of the big picture and avoid leading your team down the wrong path of development and stifle innovation. See how thought leaders in Lean startup and Experience design are already re-evaluating their methods when measuring complexities of a system.
Most importantly see how design stories can be the uniting factor for cross-functional teams: everyone “owns” the design, inspires developers to tackle complex and feature rich digital products with selective planning and architecture that include UI patterns, Lean methods, and promotes holistic thinking that makes everyone more effective and efficient in their work.
This is an overview of the tools used by User Experience Designers. Software is important, but in UX you need to master a wide variety of techniques. This presentation covers an overview of the UX workflow, Discovery, Synthesis, Interaction, and Refinement, and outlines the tools that are critical to each step. In the end, the emphasis is not on mastering all the tools, but understanding their strengths and weaknesses, so the right tool can be chosen based on the situation.
Hi, this (very short) deck is mainly meant to help with my Design Studies lessons to undergraduate students at NABA, Media Design and Multimedia Arts School, Milan. These slides are supposed to come with a live commentary for the class, so sorry if you wish to have more explicit context and liaisons. Please see referred sources to this purpose.
Learn how to see beyond typical agile user stories that annoy instead of inspire when building the “unknown”. Pave the way forward for your team by writing design stories that break down a complex problem into “tiny pulses” that when put together make up a complex system. Apply “Design Thinking” to not lose sight of the big picture and avoid leading your team down the wrong path of development and stifle innovation. See how thought leaders in Lean startup and Experience design are already re-evaluating their methods when measuring complexities of a system.
Most importantly see how design stories can be the uniting factor for cross-functional teams: everyone “owns” the design, inspires developers to tackle complex and feature rich digital products with selective planning and architecture that include UI patterns, Lean methods, and promotes holistic thinking that makes everyone more effective and efficient in their work.
This is an overview of the tools used by User Experience Designers. Software is important, but in UX you need to master a wide variety of techniques. This presentation covers an overview of the UX workflow, Discovery, Synthesis, Interaction, and Refinement, and outlines the tools that are critical to each step. In the end, the emphasis is not on mastering all the tools, but understanding their strengths and weaknesses, so the right tool can be chosen based on the situation.
"L'espressione latina dramatis personae, tradotta alla lettera, significa maschere del dramma e quindi è usata per indicare i personaggi."
"In user-centered design and marketing, personas are fictional characters created to represent the different user types that might use a site, brand, or product in a similar way.
Personas are useful in considering the goals, desires, and limitations of brand buyers and users in order to help to guide decisions about a service, product or interaction space such as features, interactions, and visual design of a website. Personas may also be used as part of a user-centered design process for designing software and are also considered a part of interaction design (IxD), having been used in industrial design and more recently for online marketing purposes.
A user persona is a representation of the goals and behavior of a hypothesized group of users. In most cases, personas are synthesized from data collected from interviews with users. They are captured in 1–2 page descriptions that include behavior patterns, goals, skills, attitudes, and environment, with a few fictional personal details to make the persona a realistic character. For each product, more than one persona is usually created, but one persona should always be the primary focus for the design."
(Wikipedia)
This open forum panel discussion for AIGA UCLA was presented by Lynn Boyden, Chris Chandler, Jose Caballer and Lara Fedoroff. Deemed "UX for Dummies" this discussion focused on the definition, process, deliverables and challenges of User Experience verses Information Architecture.
Design Fixation for UX Professionals in 10 Minutes or Less! (Dec. 11, 2013)robyoumans
A talk given by Professor Robert Youmans of George Mason University (http://humanfactors.gmu.edu/research/cdux) to the NOVA UX Meetup group about Design Fixation, how Design Fixation affects UX, and some research about how Design Fixation might be prevented.
This presentation gives a brief overview of user experience design and important principles of user-friendly design. Meant for those just starting in the UX space or looking to improve their knowledge!
Topics covered include:
What is user experience?
Different research techniques: when to do what type of research, how to formulate strong questions
Creating a persona
Problem statements
And more!
Read the presenter's notes to get the full experience.
Undeniably 2020 has been an unpredictable year. This originated some creativity for innovation as much as adaptation and acceleration of existent ideas.
Every so often at Cocoon we feel the need to review these technologies and approaches and filter what we feel is relevant for us and our clients into a document that we share internally and externally.
This year we gave this document a linear context: Digital Global Humanism.
Up until recently people were the central focus in digital businesses and ecosystems.
Businesses started by embracing humanism to achieve their results and to enable clients to access their products in the easiest ways possible.
But now we also need to remind people about their own responsibility for the Earth. We added this to our process of business transformation.
Designing our future overlords or: How I Learned to Stop Worrying and Love Ro...Progress UX
Presentation delivered to Austin UXPA chapter meeting - October 2013. Speaker: Jon-Eric Steinbomer, Principal and Research Director at Progress UX Research in Austin, Texas.
Optimizing for a faster user experience Pt 2: How-to.James Christie
From my presentation "I feel the need..the need for speed: Optimizing the User Experience", given at UXPA Boston 2014. This is the second half of the talk. The first half (are we slow? How slow? Why? And Why That's a Problem) used a ton of animation and rapid patter, and just doesn't make much sense on SlideShare without audio. I need to upload that to YouTube, someday.
This is the 5th (fifth) lecture of the "Designing Interactions / Experiences" module I’m teaching at Köln International School of Design of the Cologne University of Applied Sciences, which I’m honored to give by invitation of Professor Philipp Heidkamp. In this presentation we discuss the different design artifacts typically produced during the ideation stage
Find the Interface Design trends for 2014 by - now freelance - Petra Sell on:
http://www.slideshare.net/volpelino/id14
Prophets Agency presents "ID13": the trends in Interactive Design for 2013. Third year in a row, after the ID11 and ID12 trends. Written and designed by our Design Director Petra Sell.
Starting at the emerging trends in 2012 moving to what is happening in interaction design in 2013. the consolidation of ongoing trends up to future thinking and some advice on how to keep up.
Take your time to browse through the 147 slides of this impressive deck. Brands who fancy a 'live' presentation in their offices can contact us to make an appointment. Do spread along, cause sharing still is caring.
How do you know if your target audience is having a good or bad experience? How do you gather their input and engage audiences effectively? Learn to put yourself in your users’ shoes in order to better understand their motivations, so that you can create welcoming experiences and make something that is useful, easy to use, and enjoyable. Exhibit designers and developers, curators, content developers, museum technologists, and marketers can all benefit from this workshop on Community Engagement through User Experience. You don’t need to be an expert to attend—we’ll cover the fundamentals of user experience, why it matters, and ways to convince others in your organization to invest. We’ll detail a typical UX journey and common methodologies that are useful for museum professionals, emphasizing ways to engage new and existing communities along the way.
The workshop was led by Michael Tedeschi, Creative Director of Interactive Mechanics, an award-winning interactive design firm that builds digital projects and leads workshops for arts, culture, and educational institutions including Eastern State Penitentiary, Ford’s Theatre, and Smithsonian Institution. Mike has over a decade of industry experience in design, development, and user experience, having worked on over 125 digital projects throughout his career.
An intro to what people (and myself) think UX is. Also who is "doing" UX and how you can do it better. Originally presented at Product Camp Nashville - Sep 2018
Explore this presentation to comprehend the essential design theories, popular concepts, methodologies, and ideologies of UX Design. To explore more about UX, you can visit our UX/UI Design courses page - https://www.admecindia.co.in/ui-and-ux-courses
What do UX specialist and PHP developers have in common? Probably more than you are aware.
I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info.
So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.
PDF Submission for Checkux prototypes vs wireframes.pdfpetter son
In this comprehensive blog post, we will delve deep into the world of wireframes and prototypes, understanding their unique characteristics, benefits, and when to use each one.
"L'espressione latina dramatis personae, tradotta alla lettera, significa maschere del dramma e quindi è usata per indicare i personaggi."
"In user-centered design and marketing, personas are fictional characters created to represent the different user types that might use a site, brand, or product in a similar way.
Personas are useful in considering the goals, desires, and limitations of brand buyers and users in order to help to guide decisions about a service, product or interaction space such as features, interactions, and visual design of a website. Personas may also be used as part of a user-centered design process for designing software and are also considered a part of interaction design (IxD), having been used in industrial design and more recently for online marketing purposes.
A user persona is a representation of the goals and behavior of a hypothesized group of users. In most cases, personas are synthesized from data collected from interviews with users. They are captured in 1–2 page descriptions that include behavior patterns, goals, skills, attitudes, and environment, with a few fictional personal details to make the persona a realistic character. For each product, more than one persona is usually created, but one persona should always be the primary focus for the design."
(Wikipedia)
This open forum panel discussion for AIGA UCLA was presented by Lynn Boyden, Chris Chandler, Jose Caballer and Lara Fedoroff. Deemed "UX for Dummies" this discussion focused on the definition, process, deliverables and challenges of User Experience verses Information Architecture.
Design Fixation for UX Professionals in 10 Minutes or Less! (Dec. 11, 2013)robyoumans
A talk given by Professor Robert Youmans of George Mason University (http://humanfactors.gmu.edu/research/cdux) to the NOVA UX Meetup group about Design Fixation, how Design Fixation affects UX, and some research about how Design Fixation might be prevented.
This presentation gives a brief overview of user experience design and important principles of user-friendly design. Meant for those just starting in the UX space or looking to improve their knowledge!
Topics covered include:
What is user experience?
Different research techniques: when to do what type of research, how to formulate strong questions
Creating a persona
Problem statements
And more!
Read the presenter's notes to get the full experience.
Undeniably 2020 has been an unpredictable year. This originated some creativity for innovation as much as adaptation and acceleration of existent ideas.
Every so often at Cocoon we feel the need to review these technologies and approaches and filter what we feel is relevant for us and our clients into a document that we share internally and externally.
This year we gave this document a linear context: Digital Global Humanism.
Up until recently people were the central focus in digital businesses and ecosystems.
Businesses started by embracing humanism to achieve their results and to enable clients to access their products in the easiest ways possible.
But now we also need to remind people about their own responsibility for the Earth. We added this to our process of business transformation.
Designing our future overlords or: How I Learned to Stop Worrying and Love Ro...Progress UX
Presentation delivered to Austin UXPA chapter meeting - October 2013. Speaker: Jon-Eric Steinbomer, Principal and Research Director at Progress UX Research in Austin, Texas.
Optimizing for a faster user experience Pt 2: How-to.James Christie
From my presentation "I feel the need..the need for speed: Optimizing the User Experience", given at UXPA Boston 2014. This is the second half of the talk. The first half (are we slow? How slow? Why? And Why That's a Problem) used a ton of animation and rapid patter, and just doesn't make much sense on SlideShare without audio. I need to upload that to YouTube, someday.
This is the 5th (fifth) lecture of the "Designing Interactions / Experiences" module I’m teaching at Köln International School of Design of the Cologne University of Applied Sciences, which I’m honored to give by invitation of Professor Philipp Heidkamp. In this presentation we discuss the different design artifacts typically produced during the ideation stage
Find the Interface Design trends for 2014 by - now freelance - Petra Sell on:
http://www.slideshare.net/volpelino/id14
Prophets Agency presents "ID13": the trends in Interactive Design for 2013. Third year in a row, after the ID11 and ID12 trends. Written and designed by our Design Director Petra Sell.
Starting at the emerging trends in 2012 moving to what is happening in interaction design in 2013. the consolidation of ongoing trends up to future thinking and some advice on how to keep up.
Take your time to browse through the 147 slides of this impressive deck. Brands who fancy a 'live' presentation in their offices can contact us to make an appointment. Do spread along, cause sharing still is caring.
How do you know if your target audience is having a good or bad experience? How do you gather their input and engage audiences effectively? Learn to put yourself in your users’ shoes in order to better understand their motivations, so that you can create welcoming experiences and make something that is useful, easy to use, and enjoyable. Exhibit designers and developers, curators, content developers, museum technologists, and marketers can all benefit from this workshop on Community Engagement through User Experience. You don’t need to be an expert to attend—we’ll cover the fundamentals of user experience, why it matters, and ways to convince others in your organization to invest. We’ll detail a typical UX journey and common methodologies that are useful for museum professionals, emphasizing ways to engage new and existing communities along the way.
The workshop was led by Michael Tedeschi, Creative Director of Interactive Mechanics, an award-winning interactive design firm that builds digital projects and leads workshops for arts, culture, and educational institutions including Eastern State Penitentiary, Ford’s Theatre, and Smithsonian Institution. Mike has over a decade of industry experience in design, development, and user experience, having worked on over 125 digital projects throughout his career.
An intro to what people (and myself) think UX is. Also who is "doing" UX and how you can do it better. Originally presented at Product Camp Nashville - Sep 2018
Explore this presentation to comprehend the essential design theories, popular concepts, methodologies, and ideologies of UX Design. To explore more about UX, you can visit our UX/UI Design courses page - https://www.admecindia.co.in/ui-and-ux-courses
What do UX specialist and PHP developers have in common? Probably more than you are aware.
I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info.
So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.
PDF Submission for Checkux prototypes vs wireframes.pdfpetter son
In this comprehensive blog post, we will delve deep into the world of wireframes and prototypes, understanding their unique characteristics, benefits, and when to use each one.
BA 453 Business Strategy & Planning Spring 2014 1 .docxikirkton
BA 453: Business Strategy & Planning | Spring 2014 1
Case D: MakerBot
Your Mission
You have been hired by Bre Pettis, CEO of MakerBot, as the newest member of their strategic
planning team. Meet Bre through this video: http://www.engadget.com/2013/09/20/bre-pettis/
The recent acquisition of MakerBot by Stratasys has changed everything compared to its
beginnings as an entrepreneurial start-up. Mr. Pettis would like you to offer – or validate – the
strategic direction for his innovative 3D printing company MakerBot. Who should the MakerBot
become? A manufacturer? A retailer? A technology facilitator? Does our school program make
sense?
Mr. Pettis asks you to accomplish the following:
• Summarize your assessment of MakerBot’s current situation by discussing the
opportunities and challenges of being on the cutting edge of this technology.
• Integrate Porter’s Five Forces, the PESTL Analysis and other applicable class
content into your executive brief to clearly communicate and support your
findings.
• State and define a strategic direction that provides focus for MakerBot.
• Describe the actions steps to implement your recommendations.
Mr. Pettis encourages you to visit MakerBot’s website to learn more about the organization and
its products at www.makerbot.com.
He expects you to use the template format for your executive brief that is no more than 1,200
words.
In addition to handing hard copy in at the beginning of class
on the due date assigned, please submit it to associated Safe Assignment link.
http://www.engadget.com/2013/09/20/bre-pettis/
http://www.makerbot.com/
BA 453: Business Strategy & Planning | Spring 2014 2
Case D: MakerBot
Its physical presence appears in the glass box from nothing. No one was touching it and no other
tools were visible. It just slowly, gradually, and almost magically appears.
View this video to see MakerBot’s latest product in action:
http://www.youtube.com/watch?v=AKTSdW7-H3Q
3D Printing
Additive manufacturing, also referred to as three-dimensional or 3D printing, is a process of
making a three-dimensional solid object of virtually any shape from a digital model. 3D printing
is achieved using an additive process where successive layers of material are laid down in
different shapes. 3D printing is also considered distinct from traditional machining techniques,
which mostly rely on the “subtractive processes” of removing material by methods such as
cutting or drilling. A 3D printer is a limited type of industrial robot that is capable of carrying out
an additive process under computer control.
Additive manufacturing takes virtual blueprints from computer aided design (CAD) or animation
modeling software and “slices” them into digital cross-sections for the machine to successively
use as a guideline for printing. Depending on the machine used, material or a binding material is
deposited on the build bed or platform until m ...
Assignment of Design Research Method (Chen Mengdie)cocoachen1992
The assignment of Design Research Method is based on the book "Delft Design Guide". Pro. Tan, the tutor of this course, asked each students to chose a method from this book and then make a presentation about the design selected method. Besides, we were also asked to find at least three academic papers related to the method accordingly. What I'm focus on is Three-dimensional Models, which are also called prototypes. The whole presentation could be divided to six parts, as following.
Part 1: What Are Three-dimensional?
Part 2: When Can We Use Three-dimensional Models?
Part 3: How to Use Three-dimensional Models?
Part 4: Why Do We Use Three-dimensional Model during Design Process?
Part 5: Three related papers/case studies, which is FingerReader, LaserOrigami and FaBrickation. All the three papers come from the CHI conference.
Part 6: Design thinking and my own design brief by using this method.
Industrail Design Portfolio 2020 Ryan MerrixRyanMerrix
Please take a look at my portfolio I am enthusiastic and driven design engineer graduate with diverse experience across projects lifecycles, including human-centred design, design for manufacture and assembly and project leadership. Working as part of many cross-disciplinary teams has led to teamwork, leadership, and an analytical mind to be able to tackle and solve problems.
Lecture 2 from the MHIT 603 course on Human Interface Technology. This lecture provides an introduction to Prototyping. Taught by Mark Billinghurst at the University of Canterbury, July 17th, 2014.
Collaborative 3D Modelling and Printing: What you See is not Directly What Yo...Farid Mokhtar Noriega
The aim of this collaborative 3D printing workshop is to define the production specifications, the teaching-learning pedagogical strategy aspects to help architecture students acquire: the basic competences of building representation, the pre and post processing of printing procedures (printing materials, paint, epoxy, accessories, etc...), defining the missing functions in BIM and Architectural Modelling software and determining the benefits of enhancing them for better 3D prototyping productivity. Two teams (A and B) adopted
specific working scenarios based on real world printing jobs. Team A worked on an in-house scenario and Team B on an outsourcing scenario. Tasks successfully completed showed: the wide range of prototypes that could be produced in an architectural studio and the need for a collaborative network to organize the knowledge and good practices developed by research teams (professional or academic) involved in developing rapid prototyping for architecture. This knowledge network could be a discussion forum and a development partnership of 3D printing manufacturers and CAD/BIM software developers.
Buildingscapes - Immersive Worlds and the Built EnvironmentDavid Burden
This is a presentation version of our white paper on Buildingscapes, - Immersive Worlds for the Built Environment. Working form the specifics of our work on the Library of Birmingham it looks at how immersive models can bring benefits to almost any building project - and save costs.
Buildingscapes - Immersive Worlds and the Built EnvironmentDaden Limited
This is a presentation version of our white paper on Buildingscapes, - Immersive Worlds for the Built Environment. Working form the specifics of our work on the Library of Birmingham it looks at how immersive models can bring benefits to almost any building project - and save costs.
Visual Style and Aesthetics: Basics of Visual Design
Visual Design for Enterprise Applications
Range of Visual Styles.
Mobile Interfaces:
Challenges and Opportunities of Mobile Design
Approach to Mobile Design
Patterns
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Connect Conference 2022: Passive House - Economic and Environmental Solution...TE Studio
Passive House: The Economic and Environmental Solution for Sustainable Real Estate. Lecture by Tim Eian of TE Studio Passive House Design in November 2022 in Minneapolis.
- The Built Environment
- Let's imagine the perfect building
- The Passive House standard
- Why Passive House targets
- Clean Energy Plans?!
- How does Passive House compare and fit in?
- The business case for Passive House real estate
- Tools to quantify the value of Passive House
- What can I do?
- Resources
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
PDF SubmissionDigital Marketing Institute in NoidaPoojaSaini954651
https://www.safalta.com/online-digital-marketing/advance-digital-marketing-training-in-noidaTop Digital Marketing Institute in Noida: Boost Your Career Fast
[3:29 am, 30/05/2024] +91 83818 43552: Safalta Digital Marketing Institute in Noida also provides advanced classes for individuals seeking to develop their expertise and skills in this field. These classes, led by industry experts with vast experience, focus on specific aspects of digital marketing such as advanced SEO strategies, sophisticated content creation techniques, and data-driven analytics.
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
1. 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
2. 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
3. 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. 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
Chris R. Becker
-App
-Website
-Product
- UI
- Interactions
- Features
-Task / Scenario
Testing
Prototyping /
Testing
!5
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
13. 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
14. 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
19. EXERCISE (5 MINS)
Chris R. Becker
PART 1: GET OUT A SHEET OF PAPER
PART 2: DESIGN A WATCH
!19
20. 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
21. 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
23. 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
25. Chris R. Becker
Copyright 2019
Prototyping
Frank Gehry Sketches
Prototyping is sketching through making
25
26. 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
28. 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
29. 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
30. 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
33. 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/
35. 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
36. 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
37. 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
38. 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
39. 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
40. 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
41. 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
42. 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
43. 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
44. 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
45. Chris R. Becker
Copyright 2019
Prototyping
<6>
Rapid Prototyping
Laser Cutters
3D Printers
3D modeling software
45
46. 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
47. 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
49. 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/
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/
55. 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
56. 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.
58. 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
59. 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
60. 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
62. 62
Clickable prototyping is about speeding up design to market
Prototyping Tools
Copyright 2019
http://www.prototypr.io/
63. 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
64. 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