This 2015 workshop at SXSW covered:
- Current state of UX, limitations of common deliverables (e.g. wireframes)
- POV on prototyping and why it's important in user experience design
- Available tools (Invision, Justinmind, etc)
- Case study: using the Tech Summit app as an example
- What about the spec?
Key Takeaways
- Wireframes are near obsolete
- Why prototype
- Available methods
- Learn about available tools, pros and cons
- Documenting detailed functionality (annotating the prototype)
In this three hour workshop I present an introduction to the UCD process, an overview of the basic technologies of the web and a survey of current Mobile Web Design trends.
Lecture on Interaction Design Prototyping and Evaluation taught by Mark Billinghurst as part of the COMP 4026 Advanced HCI class at the University of South Australia. Taught on August 11th 2016.
Agile and UX both put user's needs at their center, but their foundational beliefs have set them at odds over the years.
Presented at part of "24 Hours of UX" 2022.
Rapid Prototyping 2015: Its a Mad Mad WorldMarti Gold
Given at BigDesign 2015. Discussing the benefits of rapid prototyping, the stress of selecting a prototyping tool, and an overview of available apps for desktop and mobile.
In this three hour workshop I present an introduction to the UCD process, an overview of the basic technologies of the web and a survey of current Mobile Web Design trends.
Lecture on Interaction Design Prototyping and Evaluation taught by Mark Billinghurst as part of the COMP 4026 Advanced HCI class at the University of South Australia. Taught on August 11th 2016.
Agile and UX both put user's needs at their center, but their foundational beliefs have set them at odds over the years.
Presented at part of "24 Hours of UX" 2022.
Rapid Prototyping 2015: Its a Mad Mad WorldMarti Gold
Given at BigDesign 2015. Discussing the benefits of rapid prototyping, the stress of selecting a prototyping tool, and an overview of available apps for desktop and mobile.
This presentation is part of a Citrix Labs workshop introducing the concepts of rapid prototyping for developers. It focuses on the creation of early samples, models, or releases of a product built to test a concept or process or to act as a thing to be replicated or learned from.
Mobile & Tablet UX | NYU School of Professional Studies | Week 1 (Intro)Liz Filardi
These are my slides for the first week of the class "Mobile and Tablet UX" at the NYU School of Professional Studies. The course is taught online in 4 sessions.
Prototyping - 2015 PhillyCHI UX Workshop SeriesMatthew Thomas
Slides for prototyping workshop I facilitated for the 2015 PhillyCHI Workshop Series. Covers overview of prototyping, methods, and considerations when considering prototype fidelity.
Programming the Real World: Javascript for Makerspchristensen
Hardware is becoming easier to design and manufacture, approaching the ease of software. This presentation:
- takes you on a tour of the changes in hardware
- a crash course in building circuits
- teaches the basics of using and programming Arduino
- introduces Javascript libraries for controlling hardware and robots
- how to get involved with hardware projects
If you'd like me to present this or similar content at your event, please contact me: peter at pchristensen dot com
User experience (UX) is the basis for all Web activity, and thus underpins everything we do in Web design and development. Successful projects bake UX in from the ground up, from discovery through planning, iteration, testing and deployment. No matter how beautiful our code may be, of what use is it if it’s irrelevant to our users?
Taking your Site from One to One Million Users by Kevin RoseCarsonified Team
At The Future of Web Apps London, Kevin shares the secrets to digg.com and wefollow.com's explosive user growth. He covers ten unique strategies that turn passive users into passionate advocates.
You'll learn:
1. How to encourage users to tweet about your app
2. The concept of "The Circle of Life" in web apps and how it affects you
3. Growing your userbase: What worked and what didn't for digg, WeFollow and Pownce
4. And more ...
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.
This presentation is part of a Citrix Labs workshop introducing the concepts of rapid prototyping for developers. It focuses on the creation of early samples, models, or releases of a product built to test a concept or process or to act as a thing to be replicated or learned from.
Mobile & Tablet UX | NYU School of Professional Studies | Week 1 (Intro)Liz Filardi
These are my slides for the first week of the class "Mobile and Tablet UX" at the NYU School of Professional Studies. The course is taught online in 4 sessions.
Prototyping - 2015 PhillyCHI UX Workshop SeriesMatthew Thomas
Slides for prototyping workshop I facilitated for the 2015 PhillyCHI Workshop Series. Covers overview of prototyping, methods, and considerations when considering prototype fidelity.
Programming the Real World: Javascript for Makerspchristensen
Hardware is becoming easier to design and manufacture, approaching the ease of software. This presentation:
- takes you on a tour of the changes in hardware
- a crash course in building circuits
- teaches the basics of using and programming Arduino
- introduces Javascript libraries for controlling hardware and robots
- how to get involved with hardware projects
If you'd like me to present this or similar content at your event, please contact me: peter at pchristensen dot com
User experience (UX) is the basis for all Web activity, and thus underpins everything we do in Web design and development. Successful projects bake UX in from the ground up, from discovery through planning, iteration, testing and deployment. No matter how beautiful our code may be, of what use is it if it’s irrelevant to our users?
Taking your Site from One to One Million Users by Kevin RoseCarsonified Team
At The Future of Web Apps London, Kevin shares the secrets to digg.com and wefollow.com's explosive user growth. He covers ten unique strategies that turn passive users into passionate advocates.
You'll learn:
1. How to encourage users to tweet about your app
2. The concept of "The Circle of Life" in web apps and how it affects you
3. Growing your userbase: What worked and what didn't for digg, WeFollow and Pownce
4. And more ...
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.
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
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
SXSW 2015 Shredding Wireframes: Intro to Rapid Prototyping
1. Shredding the Wireframe
Intro to Rapid UX Prototyping
Kyle Outlaw / Group Experience Director @Razorfish
Photo source: Musician Buzz
2. To Shred */SHred/*
2
• Tear or cut into shreds."shredded documents”
• Play a very fast, intricate style of rock lead guitar. ”We want to hear
everything from country and western to blisteringly fast guitar shredding"
As defined by Google
3. Agenda
• Part 1: Intro – the death of wires, the rise of prototyping
• Part 2: Challenge question and sketching
• Short Break
• Part 3: Invision app tutorial
• Part 4: Usability testing
• Part 5: Show and tell, Q&A
3
4. Who the f*&# are we?
4
Kyle Outlaw
GXD at Razorfish
Clients: Mercedes-Benz, Smart Car, Motorola,
UNIQLO, AXE
Specialties: responsive design, digital commerce
Twitter: @koutlaw
Rachel Lovinger
*Special Guest/timecop*
XD at Razorfish
Clients: Mercedes, EMC, The Hollywood
Reporter, Travel Channel, MetLife, American Red
Cross
Specialties: content strategy, content modeling
Twitter: @rlovinger
9. Wireframes Have Several Limitations
• What you see is often not what you get
• Insufficient when describing nuanced interaction
• Approvals can never be final until the result is seen in
code
• It’s difficult to test wireframes
• Many clients have difficulty providing feedback on
wireframes
• Laborious, time intensive
• Inefficient for detailing responsive design
• Others??
9
12. What do we mean when we say prototype?
A prototype is an early sample, model, or
release of a product built to test a concept or
process or to act as a thing to be replicated or
learned from.
12
Source: Wikipedia
13. Advantages to Prototyping the UX
13
• Get early buy-in from business stakeholders
• Enables testing early and often with users
• Encourages multi-disciplinary collaboration
• Plays well with the agile methodology
• Shows not just what it will look like but how it will work
• Kills fewer trees
14. There are several categories
• Proof-of-Concept Prototype
• Form Study Prototype
• User Experience Prototype
• Visual Prototype
• Functional Prototype (a.k.a Working Prototype)
14
Source: Wikipedia
15. Who is the audience?
• Full internal team (UX, visual designers, tech)
• Third party vendors
• The client and other stakeholders
• Real users
15
16. The Spectrum of Fidelity
16
Medium High
Low
Sketches on paper. Cool/wow
factor is low. Wireframes or sketches, the
prototype is ‘clickable’ but not much
more interactivity than that.
Fully functional, but usually a
subset of features, the most
complex functionality. Also $$$
29. • It's often cost prohibitive to get a technologist just for prototyping
• You don't need to know code to do it!
• It's a better simulation of the end product!
• Clients will get that it's not the final product!*
• UX is the glue for product design – the focal point
• We still need a deliverable!
UX designers should own it!
30. The prototype shows how it will work.
“Design is not just what it
looks like or feels like.
Design is how it works.”
–Steve Jobs, Patron Saint of
User Experience Practitioners
33. Product Brief and Sketching
33
• In this part of the workshop we're going to solve a quasi-real world
problem. There are two challenges, each table has a product brief A
or B).
• Just to keep things simple we're going to pick a single form factor -
smart phone. Can be an app or mobile web, up to you.
• Introduce yourselves to your team mates.
• Take a look at your (intentionally vague) product brief!
34. The Teams*
34
• Slayer
• System of a Down
• Anthrax
• Metallica
• Pantera
• Megadeth
* Yes you may change your team name. Just let us know!
35. Product Brief 1
35
Create a Smartphone app that does the following:
We’ve all been on road trips where one individual (often unintentionally) monopolizes the
music selection. It can make for a tense ride. This app allows drivers to create a listening
room. Each passenger would be able to help build the playlist from their smartphone, with
an equal number of picks and vetoes given to each, depending on the length of the drive
and number of passengers. Picks would rotate as the ride progresses. Each listener
would be able to veto a pick, but the song would only be skipped if over half of the voters
gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would not
count towards anyone’s veto count. The game would take on a strategic element when
conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride.
(Matt Burton via Evolver.fm).
36. Product Brief 2
36
Create a Smartphone app that does the following:
This quick image-to-sound generator would use pictures from your smartphone’s camera.
Take a picture, and the image’s properties would be converted into control data for a sound
generator. Say, for example, the amount of blue in a picture would determine the frequency
of a particular oscillator. The synth could also “play back” the pictures from top to bottom or
left to right so that the sound evolves over time. If you had a picture of a blue sky over green
grass, you’d get a clip that starts with a lot of high frequency sound that moves lower over
time. Every kind of data about the picture could also be translated into sound in this same
manner for nice, complex results. This would just be a quick, fun way to create sounds.
There could also be a social aspect, with an Instagram-style feed of all of your friends
pictures and sounds. (Andy Cush via Evolver.fm)
37. Product Brief and Sketching (cont.)
37
• Spend 15 minutes discussing how to approach this request.
• Sketch out some key screens (15 min).
• We’re shooting for low fidelity prototypes here.
42. Now…
42
• Designate one person on your team (whoever has the best
smartphone camera!) to take a picture of your sketches.
• Designate someone from your team to be the prototype owner.
Email the photo to them so that they can have it on their desktop.
• If you need help taking pictures of your sketches we can help you
during break.
43. Now…
43
• Designate one person on your team (whoever has the best smartphone
camera!) to take a picture of your sketches. If you need help taking pictures
of your sketches we can help you during break.
• Designate someone from your team to be the prototype owner. Email the
photo to them so that they can have it on their desktop.
• If you need help taking pictures of your sketches we can help you during
break.
Break Time
45. Why Invision App?
• Easy to learn (not just UX, creative, client)
• Well designed! (Great UX)
• Using it currently for various Razorfish clients
• Again, encourage testing other tools first,
depends on the project
45
46. 46
Getting Started
• Go to invisionapp.com
• Username: kyle.outlaw [at] razorfish.com
• Password: SXSW2015
• Or give us your email and we will add you to
the project!*
66. Goals for usability testing
66
• Evaluate your product (easy, fast, satisfying?)
• See how real people use it, in their environment
• Test any assumptions or hypotheses you have about the design
67. Designate one person from your table to
go to another table (different challenge)
and take them through your app.
70. Call for volunteers!
70
• What was your challenge?
• How did you solve it?
• How was your overall experience?
• Is this something you could see using in your design process?
76. Product Brief for Team Pantera
Create a Smartphone app that does the following:
Democratize Playlists for Long Car Rides with Friends: We’ve all been on road trips where
one individual (often unintentionally) monopolizes the music selection. It can make for a tense
ride. The Echo Nest Q/A intern Matt Burton conceived of an app that allows drivers to create a
listening room. Each passenger would be able to help build the playlist from their
smartphone, with an equal number of picks and vetoes given to each, depending on the
length of the drive and number of passengers. Picks would rotate as the ride progresses. Each
listener would be able to veto a pick, but the song would only be skipped if over half of the
voters gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would
not count towards anyone’s veto count. The game would take on a strategic element when
conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride.
(Matt Burton via Evolver.fm).
http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
77. Product Brief for Team Slayer
Create a Smartphone app that does the following:
Democratize Playlists for Long Car Rides with Friends: We’ve all been on road trips where
one individual (often unintentionally) monopolizes the music selection. It can make for a tense
ride. The Echo Nest Q/A intern Matt Burton conceived of an app that allows drivers to create a
listening room. Each passenger would be able to help build the playlist from their
smartphone, with an equal number of picks and vetoes given to each, depending on the
length of the drive and number of passengers. Picks would rotate as the ride progresses. Each
listener would be able to veto a pick, but the song would only be skipped if over half of the
voters gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would
not count towards anyone’s veto count. The game would take on a strategic element when
conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride.
(Matt Burton via Evolver.fm).
http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
78. Product Brief for Team System of a
Down
Create a Smartphone app that does the following:
Democratize Playlists for Long Car Rides with Friends: We’ve all been on road trips where
one individual (often unintentionally) monopolizes the music selection. It can make for a tense
ride. The Echo Nest Q/A intern Matt Burton conceived of an app that allows drivers to create a
listening room. Each passenger would be able to help build the playlist from their
smartphone, with an equal number of picks and vetoes given to each, depending on the
length of the drive and number of passengers. Picks would rotate as the ride progresses. Each
listener would be able to veto a pick, but the song would only be skipped if over half of the
voters gave it a thumbs down. To prevent trolling, any song vetoed by all passengers would
not count towards anyone’s veto count. The game would take on a strategic element when
conserving your vetoes and picks, ensuring you’ll keep playing over the length of the ride.
(Matt Burton via Evolver.fm).
http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
79. Product Brief for Team Metallica
Create a Smartphone app that does the following:
Spectrum: This quick image-to-sound generator would use pictures from your smartphone’s
camera. Take a picture, and the image’s properties would be converted into control data for a
sound generator. Say, for example, the amount of blue in a picture would determine the
frequency of a particular oscillator. The synth could also “play back” the pictures from top to
bottom or left to right so that the sound evolves over time. If you had a picture of a blue sky
over green grass, you’d get a clip that starts with a lot of high frequency sound that moves
lower over time. Every kind of data about the picture could also be translated into sound in
this same manner for nice, complex results. This would just be a quick, fun way to create
sounds. There could also be a social aspect, with an Instagram-style feed of all of your friends
pictures and sounds. (Andy Cush)
http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
80. Product Brief for Team Anthrax
Create a Smartphone app that does the following:
Spectrum: This quick image-to-sound generator would use pictures from your smartphone’s
camera. Take a picture, and the image’s properties would be converted into control data for a
sound generator. Say, for example, the amount of blue in a picture would determine the
frequency of a particular oscillator. The synth could also “play back” the pictures from top to
bottom or left to right so that the sound evolves over time. If you had a picture of a blue sky
over green grass, you’d get a clip that starts with a lot of high frequency sound that moves
lower over time. Every kind of data about the picture could also be translated into sound in
this same manner for nice, complex results. This would just be a quick, fun way to create
sounds. There could also be a social aspect, with an Instagram-style feed of all of your friends
pictures and sounds. (Andy Cush)
http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/
81. Product Brief for Team Megadeth
Create a Smartphone app that does the following:
Spectrum: This quick image-to-sound generator would use pictures from your smartphone’s
camera. Take a picture, and the image’s properties would be converted into control data for a
sound generator. Say, for example, the amount of blue in a picture would determine the
frequency of a particular oscillator. The synth could also “play back” the pictures from top to
bottom or left to right so that the sound evolves over time. If you had a picture of a blue sky
over green grass, you’d get a clip that starts with a lot of high frequency sound that moves
lower over time. Every kind of data about the picture could also be translated into sound in
this same manner for nice, complex results. This would just be a quick, fun way to create
sounds. There could also be a social aspect, with an Instagram-style feed of all of your friends
pictures and sounds. (Andy Cush)
http://evolver.fm/2012/10/18/the-most-wanted-untapped-music-apps-round-three/