Download to read offline
![William James on User Research?
“[I]n a delicate inquiry like this, little is
to be gained by distributing circulars.
A single patient with the right sort of
lesion and a scientific mind, carefully
cross-examined, is more likely to
deepen our knowledge than a
thousand circulars answered as the
average patient answers them, even
though the answers be never so
thoroughly collated by the
investigator.”
– William James, “The Consciousness of Lost Limbs,”
1887
Discovery: User Research](https://image.slidesharecdn.com/introtouxdesign062219-190623191352/85/Introduction-to-User-Experience-Design-06-22-19-88-320.jpg)
![Twitter
Design: Sketching
[This sketch] has very special significance – it's hanging in the office
somewhere with one other page. Whenever I'm thinking about something, I
really like to take out the yellow notepad and get it down.
– Jack Dorsey, Twitter](https://image.slidesharecdn.com/introtouxdesign062219-190623191352/85/Introduction-to-User-Experience-Design-06-22-19-128-320.jpg)
Uploaded byRobert Stribley
Introduction to User Experience Design 06/22/19
The document provides an overview of a workshop on user experience (UX) design presented by Robert Stribley, focusing on the principles and processes involved in UX design. It covers various topics including user research, design methodologies, and key deliverables like wireframes and usability testing, while also touching on the history and evolution of UX. The agenda outlines both morning and afternoon sessions dedicated to foundational concepts, practical exercises, and a project case study.
More Related Content
Similar to Introduction to User Experience Design 06/22/19
Introduction to User Experience Design 06/22/19
- 1. Introduction to UserExperience Design School of Visual Arts | 22 June, 2019 Robert Stribley
- 2. Today’s presentation willbe available on SlideShare following the workshop: www.slideshare.net/stribs
- 3. Robert Stribley Associate CreativeDirector, Experience Introductions Sample clients: • Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds, Prudential, Wachovia • Boston Scientific, Nasonex • AMResorts, Choice Hotels, RCI, Sotheby’s International Realty • Computer Associates, EMC • Ford, Lincoln • Mercedes-Benz, MBFS, Mercedes-Benz Vans, smart • AT&T, Nextel • Red Cross, Smithsonian National Air & Space Museum • Pearson, Travel Channel, Women’s Wear Daily • I’m an Associate Creative Director, Experience at Publicis Sapient/Razorfish • I enjoy literature, cinema, music, photography • I drink coffee
- 4. About You • What’syour name? • What do you do for work? • What do you do for fun? • Coffee, tea or bottled water? Introductions
- 5. Goals for ourworkshop today: • Understand the basic concepts of user experience (UX) design • Review the basic deliverables a UXer develops within a project • Experience the general process and techniques used on a design project Introductions
- 7. Morning • History &Definition • UX Principles • Design Process • Agile • Deliverables • Our Project • User Research Agenda
- 8. Afternoon • Competitive Review •Card Sorting • Site Maps • Page Types • Navigation • Sketching • Break • Wireframes • Usability Testing • Responsive Design • Q&A Agenda
- 9.
- 10.
- 11. Image by OliverReichenstein on flickr
- 12.
- 13. A Brief Historyof UX 1975 • Richard Saul Wurman coined the term “information architecture” to describe the field now more often described as “information design” 1994 • Argus Associates founded in Ann Arbor, MI, the first firm devoted to IA 1998 • First edition of Peter Morville and Lou Rosenfeld’s Information Architecture for the World Wide Web, affectionately known as “The Polar Bear” book 2000 • First IA Summit, Boston, MA – Defining Information Architecture History of UX
- 14. Partially adapted from:“A brief history of information architecture” by Peter Morville and Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon A Brief History of UX 2002 • Boxes & Arrows, online journal for UX and design goes live • 3 new books on UX published, including Jesse James Garrett’s The Elements of User Experience 2014 • Capital One purchases Garrett’s UX-consulting firm Adaptive Path 2020 • The 20th IA Conference will be held in New Orleans, April 2020 History of UX
- 15. in•for•ma•tion ar•chi•tec•ture n. •The combination of organization, labeling, and navigation schemes within an information system. • The structural design of an information space to facilitate task completion and intuitive access to content. • The art and science of structuring and classifying web sites and intranets to help people find and manage information. • An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.Information Architecture for the World Wide Web (1st Edition), p. 4, Rosenfeld and Morville Navigation Interaction Art/Science Discipline/ Community Defining UX
- 16.
- 17.
- 18.
- 19. metaphor: architectural plans DefiningUX Flickr.com: Cornell University Library
- 20.
- 21.
- 22. 3 Clicks? Amyth Designing for scent is more successful than designing for navigation. – Jared Spool, UIE If there is a scientific basis to the Three-Click Rule, we couldn't find it in our data. - User Interface Engineering, April 2003 Self Study “Designing for the scent of information” - Jared M. Spool, Christine Perfetti & David Brittan, User Interface Engineering
- 24.
- 25. Tease users. Then drawthem to the details.
- 26. “Progressive disclosure defers advancedor rarely used features to a secondary screen, making applications easier to learn and less error-prone.” - Jakob NielsenSelf Study “Progressive Disclosure” - Jakob Nielsen, December 4, 2006
- 27. Self Study “Progressive Disclosure”– Jennifer Tildwell
- 30.
- 31. “Designers can create normalcyout of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” —Jeffery Veen, The Art and Science of Web
- 32. When information is clusteredappropriately on a screen, users can scan and quickly come to terms with the intent of the content.
- 33. 1. Group features andcontent by type
- 34. 1. Group features andcontent by type 2. Position them according to an intuitive hierarchy
- 35. 1. Group features andcontent by type 2. Position them according to an intuitive hierarchy 3. Drop or demote the less important content
- 37.
- 38. Reduce the fieldof view Once users commit to a path, remove irrelevant navigation
- 39.
- 40.
- 41. The Tyranny ofConsistency 5
- 42. Consistency is animportant but sometimes over-rated tool It’s key in maintaining a coherent experience But develop an eye to know when to break from it
- 43. Clarity trumps consistency. – SteveKrug, Don’t Make Me Think
- 45. Related: Design pagesso they’re scalable Suppress modules or sections of the page until they're needed Don’t labor to create content just to ensure every screen or element is “consistently” populated
- 46. Death of theHome Page 6
- 47. People may cometo your homepage But more and more likely not They’re more likely coming from Google or social media Many sites report only 20% of visitors landing on their homepages Some as few as 10 or 5% • 88% of traffic coming to The Atlantic not hitting home page • More than 50% of visitors to the NYT not arriving at the home page Have you ever bought a book on Amazon.com
- 48. More Important? • SEO* •Taxonomy • Metadata + Tagging • Mobile friendly *search engine optimization
- 49.
- 50. There Is NoFold 7
- 51.
- 52. Large Apple desktopmonitor iPhone 6S
- 53. “Web users spend80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.” - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
- 54. “People will lookvery far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll. Finally, while placing the most important stuff on top, don't forget to put a nice morsel at the very bottom.” - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
- 55.
- 56. Consider the amount ofattention an audience needs on a particular screen* *It may be zero
- 57. Recapping: • Scent ofInformation • Progressive Disclosure • Information Clustering & Hierarchy • Remove Paths Not Taken • The Tyranny of Consistency • Death of the Home Page • There Is No Fold • Know Your Audience
- 58.
- 59. Discovery Definition DesignDevelopment Design Process
- 60. Discovery Definition Development •Stakeholder Interviews • Business Requirements • Feature Prioritization Matrix • Competitive/Comparative Audit • User Research • Analytics • Site Inventory • Site Map Design Process Design
- 61. Discovery Definition DesignDevelopment • Personas • Content Audit • Card Sorts • Use Cases • Site Map • User Journeys • Sketching • Conceptual Wires/Design • Experience Brief Design Process
- 62. Discovery Definition DesignDevelopment • Site Map • Content Matrix • User Flows • Sketching • Wireframes • Stakeholder Reviews • Functional Specifications • Visual Design • Prototype • Usability Testing Design Process
- 63. Discovery Definition Development •User Acceptance Testing (UAT) • Quality Assurance (QA) • Usability Testing Design Process Design
- 64.
- 65.
- 66. Design Process Self Study “DesignThinking 101” by Sarah Gibbons on July 31, 2016 -Nielsen Norman Group
- 67. Design Process Self Study “Howto solve problems applying a Design Thinking, UX, HCD or any Creative Process from scratch V2” – Dan Nessler, February 6, 2018, Medium
- 68.
- 69. What is “agile”? relatingto or denoting a method of project management, used especially for software development, that is characterized by the division of tasks into short phases of work and frequent reassessment and adaptation of plans. "agile methods replace high-level design with frequent redesign” —Oxford English Dictionary, contrast with “waterfall” Agile Methodology
- 70. What is “agile”? points stories epics scrum sprints standu p backlog backlog grooming kanbanboard Agile Methodology
- 71. Bug fixing forpast sprints Sprint Diagram by Sasha Tsimbler Agile Methodology
- 72. Lean UX Agile Methodology “LeanUX … is less focused on deliverables than traditional UX. It requires a greater level of collaboration with the entire team. The core objective is to focus on obtaining feedback as early as possible so that it can be used to make quick decisions. The nature of Agile development is to work in rapid, iterative cycles and Lean UX mimics these cycles to ensure that data generated can be used in each iteration.” —A Simple Introduction to Lean UX, Interaction Design Foundation
- 73.
- 74.
- 75. Personas Definition TOP NEEDS FastFueling, Parking, Showers Minimal Out of Pocket Costs TOP NEEDS Safe and Clean Services Variety of Food Options TOP NEEDS Assurance (parking, dumping, fueling lanes) Saving Money on the Road PROFESSIONAL DRIVERS RVERS 4-W HEELERS
- 76. User Journeys Definition SelfStudy “An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows
- 77.
- 78.
- 79. Sketching > Wireframe> Design Design
- 80.
- 81.
- 82.
- 83. Our Project Events.com Events.com wantto revamp their website to become the go-to online resource for people wanting to attend or promote a large variety of events across the United States. It should default to the city you’re in—New York—but allow users to change to other cities within the U.S.
- 84.
- 85. User Research User Researchin Copenhagen’s Elderly Homes
- 86. “Through research, weaim to learn enough about the business goals, the users, and the information ecology to develop a solid strategy.” – Louis Rosenfeld & Peter Morville Discovery: User Research
- 87. Goal Identify patterns andtrends in user behavior, tasks, preferences, obstacles. Methodology • Focus Groups • Surveys • Interviews Discovery: User Research
- 88. William James onUser Research? “[I]n a delicate inquiry like this, little is to be gained by distributing circulars. A single patient with the right sort of lesion and a scientific mind, carefully cross-examined, is more likely to deepen our knowledge than a thousand circulars answered as the average patient answers them, even though the answers be never so thoroughly collated by the investigator.” – William James, “The Consciousness of Lost Limbs,” 1887 Discovery: User Research
- 89. Class Exercise: SurveyQuestions • How do you learn about events in NYC? • What type of events are you interested in? • What’s more important to you: – Price – Type of Event – Location – Date • Do you ever need to promote an event? • Do you ever invite people to an event? Discovery: User Research
- 90.
- 91. Afternoon • Competitive Review •Card Sorting • Site Maps • Page Types • Navigation • Sketching • Break • Wireframes • Usability Testing • Responsive Design • Q&A Agenda
- 92. Competitive Review image bybrandon schauer
- 93. “This type ofassessment helps set an industry ‘marker’ by looking at what the competition is up to, what features and functionalities are standard, and how others have solved the same problems you might be tasked with.” – Dorelle Rabinowitz Discovery: Competitive Review
- 94. Heuristic Evaluation … involvesevaluators examining the interface and judging its compliance with recognized usability principles (the “heuristics”) —Wikipedia Self Study For a more detailed explanation of heuristic evaluation, see Jakob Nielsen’s Ten Usability Heuristics. Discovery: Competitive Review
- 95. Sample Usability Criteria Theseexamples aren’t comprehensive. Appropriate criteria will depend on the project to be completed. Home Page • Elements are appropriately weighted and distributed • Information is clustered in meaningful ways Navigation • Navigation structure is concise and consistent • Paths to important information are intuitive and unobstructed Content • Content is content chunked appropriately • Headings and titles are scannable • Content is current. There are visible indications of content freshness. Design • Colors are appropriate for the Web. White space is used appropriately. Text is readable. Search • Search results are relevant and cleanly presented Functionality • Functionality and forms are efficiently designed Messaging • Errors messages are presented in clear language. Help readily available contextually to users • Appropriate channels are provided for user feedback Discovery: Competitive Review
- 96. Methodology • Review andanalyze competitor sites according to particular criteria (heuristics) • Draw key findings, which can influence and guide IA through the design phase • Include a scorecard for high-level comparison of points across all sites Also: Comparative Reviews Discovery: Competitive Review
- 98.
- 99. Key Findings • Searchis fairly prominent on each site • Filtering on events is valuable, but not always easily available • Calendars are helpful, but not always prominent • Profiles and social features are handled with varying degrees of detail • Free events are often highlighted • Event detail pages may have maps, RSVP, sharing, rating, commenting functionality • Displaying other venues and restaurants adds utility • Option to add or promote an event isn’t always prominent Discovery: Competitive Review
- 100.
- 101.
- 102. “There are oftenbetter ways to organize data than the traditional ones that first occur to us. Each organization of the same set of data expresses different attributes and messages. It is also important to experiment, reflect, and choose which organization best communicates our messages.” – Nathan Shedroff, Experience Strategist Definition: Card Sorts
- 103. Methodology • Grouping andlabeling with index cards, post it notes • Two types: Open – Participants sort cards with no pre-established categories. Useful for new architectures Closed – Participants sort cards into predetermined, provided groups. Useful for fitting content into existing architectures • Online card sorts – E.g. OptimalSort Goals • Organize content more efficiently • Find names for categories based on users’ perspectives Self Study "Card sorting: a definitive guide" by Donna Spencer and Todd Warfel, Boxes and Arrows, 2004/04/07 Definition: Card Sorts
- 104. Case Studies: • WachoviaWealth Management Group • American Red Cross • Mercedes Benz Definition: Card Sorts
- 105. Card Sort As individuals: •Take 5 minutes to think of all the events a person could attend • Write each event you come up with on a Post-It note Definition: Card Sorts 5mins
- 106. Card Sort Now, asa group: • Take a few minutes to organize your events into categories (group & label them) • Then we’ll share some categories Definition: Card Sorts 15mins
- 107. Characteristics & Findings •Looking for redundancies • Lumping and splitting • Outliers and miscellaneous items • Placing items in multiple categories • Categories versus filters –E.g. Free, Family, Outdoors • Unique but intuitive labels –E.g. Geeks, Relax Definition: Card Sorts
- 108. Next Steps With theresults of a card sort we then can: • Build consensus • Refine terminology • Create a site map • Help define navigation Definition: Card Sorts
- 109. Definition: Card SortTools Post-It Plus This app from 3M allows you to scan your Post-It Notes, organize and share them.
- 110.
- 111.
- 112. Conceptual DesignDesign: SiteMaps “A site map is a high level diagram showing the hierarchy of a system. Site maps reflect the information structure, but are not necessarily indicative of the navigation structure.” – Step Two Designs
- 115. Site Map Tools: •Omnigraffle (Mac) • Microsoft Visio • InDesign • Sketch Design: Site Maps
- 116. Page Types &Templates The Mercator Atlas of Europe From The British Library
- 117. Home Page CategoryPage Details Page Examples: Design: Page Types & Templates
- 118.
- 119. “Navigation refers tothose elements in the UI that allow users to reach specific information on the site.” – Nielsen Norman Group Self Study The Difference Between Information Architecture (IA) and Navigation Design: Navigation
- 120. Types of Navigation •Site Structure – major nav • Hierarchical – product families • Function – sitemap, privacy • Direct – banner ad/shortcut • Reference – related links • Dynamic – search results • Faceted Navigation – filters results • Breadcrumb – location • Step Navigation – sequence through forms/results Self Study Adapted from Atsushi Hasegagwa’s The 7 Navigation Types of Web Sites Design: Navigation
- 121. Areas of Navigation •Global – universal header/footer • Local – left nav/right nav • Local content – text links, buttons Self Study Adapted from Atsushi Hasegagwa’s The 7 Navigation Types of Web Sites Styles of Navigation • Rollover • Dropdown • Flyout • Tabs • Accordion • Hamburger Design: Navigation
- 122.
- 123.
- 124.
- 125.
- 126. Sketching Aerial Screw byLeonardo da Vinci, 1485-1487
- 127. Can you guess whatthis is a sketch of? Design: Sketching
- 128. Twitter Design: Sketching [This sketch]has very special significance – it's hanging in the office somewhere with one other page. Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down. – Jack Dorsey, Twitter
- 129. “There are techniquesand processes whereby we can put experience front and center in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching. ” —Bill Buxton Design: Sketching
- 130. Attributes of aSketch • Quick • Timely • Inexpensive • Disposable • Plentiful • Clear vocabulary • Distinct gesture • Minimal detail • Appropriate degree of refinement • Suggest & explore rather than confirm • Ambiguity Design: Sketching
- 131. - Stefan Klocek,“Better together; the practice of successful creative collaboration,” Cooper Journal “Ninja. Rockstar. Gifted genius. Many of the ways we talk about creative work (whether it’s design or development) only capture the brilliance of a single individual.” Design: Sketching
- 132. Defining Collaborative Sketching • Rootedin Design Studio Methodology • Grew out of industrial design and architecture • No “rockstars” • Todd Zaki Warfel o Create. Pitch. Critique. o 6.8.5 (6 to 8 sketches in 5 minutes) • Different versions/methods but steps included to encourage outcomes Design: Sketching
- 133. Goals for CollaborativeSketching • To communicate your ideas effectively by visualizing them • To benefit from the participation of your colleagues • To quickly generate ideas and refine through iterations Design: Sketching
- 134. 1. Discuss 2. Sketch 3.Share 4. Iterate Design: Sketching Process
- 135. • Discuss thepurpose of the specific experience you’re sketching • What does it need to accomplish? • What features are necessary? • How would you prioritize them? • Who’s the audience? • You’re not discussing layout or design • Just the problem you’re trying to solve • You’re not sketching yet Discuss Design: Sketching
- 137. Sketch • Sketch silently •Limit your time – 5,10 minutes • Sketch as much as possible, as many different ideas as possible • Don’t worry about mistakes or style • Emphasis is on the quantity of ideas, not the quality of the sketches Design: Sketching
- 138.
- 139. Share • Review yourwork with your team • Keep it short – 60 seconds each • Offer your feedback to others • What you like • Questions about what didn’t work for you • You’re not grilling your colleagues and this isn’t a competition Design: Sketching
- 140. Iterate • Now sketchagain if you need to • Or collaborate on a high-level wireframe (e.g. via whiteboard) • Then begin your wireframe with a more informed view, with more and better ideas • Iterate on your design Design: Sketching
- 141. Class Exercise: CollaborativeSketching In teams, sketch your ideas. Event Detail Page 1. Take 15 minutes first to discuss what features belong here Remember, no sketching yet Design: Sketching
- 142. Class Exercise: CollaborativeSketching In teams, sketch your ideas. Event Detail Page 1. Take 15 minutes first to discuss what features belong here 2. Time for silent sketching Design: Sketching
- 143. Class Exercise: CollaborativeSketching In teams, sketch your ideas. Event Detail Page 1. Take 15 minutes first to discuss what features belong here 2. Time for silent sketching 3. Time for sharing your sketches Design: Sketching
- 144. Class Exercise: CollaborativeSketching Did you come up with any differentiating ideas for an event page? Design: Sketching
- 145. Sketching Tools: The followingapps are all for the iPad: • Adobe Ideas (Free) • Bamboo Paper (Free) • Muji Notebook ($3.99) • Penultimate (Free) • SketchBook (Free) • Paper (Free) • Adonit Forge (Free) Design: Sketching
- 146.
- 147. Wireframes sculpture by JaumePlensa, Yorkshire Sculpture Park
- 148. Wireframes “Web site wireframesare blue prints that define a Web page’s content and functionality. They do not convey design – e.g. colors, graphics, or fonts.” - FatPurple Design: Wireframes
- 153. Design a HomePage In your teams, create your final deliverable, a home page for Events.com 1) Discuss features needed for a homepage 2) Sketch your ideas for a homepage individually 3) Discuss your sketches again with your team Design: Home Page
- 154. Wireframing & Prototyping Tools: •Adobe InDesign • Adobe XD • Axure • Omnigraffle (Mac) • Microsoft Visio • Sketch • Invision Studio • Mockingbird (online, free) Self Study Smashing Magazine: 35 Excellent Wireframing Resources Also: • Balsamiq • iPlotz • iMockups (iPad) • Omnigraffle (iPad) Design: Wireframes
- 155. Usability Testing Testing appson the iPad by K2_UX
- 156. Usability Testing “Usability testingrefers to evaluating a product or service by testing it with representative users. Typically, during a test, participants will try to complete typical tasks while observers watch, listen and takes notes. The goal is to identify any usability problems, collect qualitative and quantitative data and determine the participant's satisfaction with the product.” - usability.gov Design: Usability Testing
- 157. “How it feelsto watch a user test your product for the first time.” Design: Usability Testing
- 158. Types • Paper prototype •Clickable prototype • Full HTML • Eyetracking Design: Usability Testing Methods • In person/remote • Moderated/unmoderated • “Guerilla”
- 159.
- 160. Responsive Web Design “Ratherthan tailoring disconnected designs to each of an ever- increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” – Ethan Marcotte, Responsive Web Design, A List Apart Self Study Ethan Marcotte: Responsive Web Design Design: Responsive Design
- 161.
- 162. Responsive Design Characteristics •Think “mobile first” • Maintain content and features across devices • Adjust designs at different “break points” corresponding to various devices or resolutions • Modules may be repositioned but hierarchies are maintained • Much more in my Guidelines for Responsive UX Design class Design: Responsive Design
- 163. Final Home PageCollaboration In your teams, create your final deliverable, a home page for Events.com Collaborate as a team on a final version of the home page Design: Final Exercise
- 164.
- 165. Books: • Information Architecturefor the World Wide Web – Louis Rosenfeld, Peter Morville • Information Architecture: Blueprints for the Web – Christina Wodtke, Austin Govella • The Elements of User Experience – Jesse James Garrett • Designing Web Navigation: Optimizing the User Experience – James Kalbach, Aaron Gustafson • Design of Everyday Things – Donald Norman • Don’t Make Me Think – Steve Krug • Responsive Web Design – Ethan Marcotte Additional Resources Web Sites: • Alertbox • A List Apart • Boxes & Arrows • wireframes.tumblr.com
- 166. Further Studies: • TheIA Summit • Interaction 19 (IXDA) • School of Visual Arts • Continuing Ed classes • MFA in Interaction Design • Pratt – Course in Information Design • Rosenfeld Media • General Assembly • Skillshare • The Information Architecture Institute • Nielsen Norman Group • User Interface Engineering Additional Resources Videos: • The Design Studio Method – Todd Zaki Warfel (Vimeo) • The Right Way to Wireframe – Russ Unger (YouTube)
- 167.
- 168. My article onhow to find a UX job: UX: Your Guerilla Guide to Breaking In
- 169.
- 170.
- 171.
Editor's Notes
- #2 Introduction to User Experience Design - Robert Stribley 22 June 2019 All Power All People, Fort Greene, Brooklyn - Photo by Robert Stribley
- #3 Preliminaries
- #4 Introductions
- #5 Introductions
- #6 Workshop goals
- #7 Agenda
- #8 Agenda – Afternoon
- #9 Agenda – Afternoon
- #10 UX History
- #11 User Experience
- #12 The Spectrum of User Experience https://www.flickr.com/photos/formforce/3663684287/
- #13 Walt Disney – The original user experience designer? https://uxmag.com/articles/walt-disney-the-worlds-first-ux-designer
- #14 Brief History of UX
- #15 Partially adapted from: “A brief history of information architecture” by Peter Morville Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon
- #16 Navigation, interaction design, art/science, discipline/community
- #17 Background: Defining IA
- #18 Background: Defining IA: skin/skeleton
- #19 Oft-used examples like this of “users” creating their own paths
- #20 Using architectural plans/blueprints as a metaphor for an IA’s work Flickr.com: Cornell University Library
- #21 UX Principles Image from 10 Basic Principles of Visual Design by Jose Torre - https://blog.prototypr.io/10-basic-principles-of-visual-design-55b86b9f7241 – which is definitely worth a read
- #22 Scent of Information
- #23 If you were to take only one thing away with you today, it would be that the 3-click rule is bunk. Can actually make for a very cluttered site if you try to flatten content so it’s all available within three clicks Users will happily click away 5, 6, 7, 8 times without noticing, if there are clear paths to what they’re looking for, concise navigation, intuitive labels, etc. Background: Studies in “information foraging” in the early 90s at PARC (Palo Alto Research Center Incorporated) Better: a dynamic tension between reducing the number of clicks and providing strong scent to content
- #24 Uniqlo Site
- #25 Progressive Disclosure
- #26 Reduce clutter, cognitive overload, so there’s less to process at once - Across multiple pages – or within a page or overlay
- #27 “Progressive Disclosure” by Jakob Nielsen, December 4, 2006 Originated with studies in the 80s by user interface specialists Jack Carroll's lab work at IBM
- #28 Progressive disclosure in an app – weather details Reduce clutter, cognitive overload, so there’s less to process at once - Across multiple pages – or within a page or overlay
- #29 Mercedes Benz product information
- #30 Mercedes Benz product information
- #31 Information Clustering & Hierarchy
- #32 Jeffery Veen quote from The Art and Science of Web Design
- #33 When information is clustered appropriately on a screen, users can scan and quickly come to terms with the intent of the content.
- #34 Information clustering
- #35 Information clustering
- #36 Information clustering Isn’t to say that you couldn’t have a lot of content on the page – e.g. Pinterest. But content is grouped logically, can be scanned easily.
- #37 Mercedes Benz
- #38 Remove paths not taken
- #39 Seems simple, but a lot of sites could benefit from adhering to this principle
- #40 Remove paths not taken
- #41 Remove paths not taken
- #42 The Tyranny of Consistency
- #43 This is a “Know it when you see it” kind of problem – sometimes tough to put a finger on
- #44 “Clarity trumps consistency.” - Steve Krug, Don’t Make Me Think Photo from Interview with Steve Krug: how to get DIY usability testing right by Oliver Lindberg - https://medium.com/the-lindberg-interviews/interview-with-steve-krug-how-to-get-diy-usability-testing-right-63dedddbd0ae Photo by Daniel Byrne - https://www.danielbyrnephoto.com/
- #45 Varying dropdown styles on MBUSA.com are not “consistent,” per se, but tailored to the needs of the user and the content in each case.
- #46 But be sure when you break with consistency, you do have a principle in mind for doing so
- #47 Found this site by searching on Worst Home Page in the World. Clearly, it’s trying to be all things to all people. Instead, it looks like a dog’s breakfast.
- #48 Jakob Nielsen wrote in 2002 that home pages are “the most valuable real estate in the world.” Sourcing: http://www.niemanlab.org/2012/08/coming-in-the-side-door-the-value-of-homepages-is-shifting-from-traffic-driver-to-brand/ 88% of traffic coming to The Atlantic not hitting home page More than 50% of visitors to the NYT not arriving at the home page Have you ever bought a book on Amazon.com because you saw it on the homepage?
- #49 *Search engine optimization
- #50 Note how the site offers plenty of scent
- #51 There is no fold – Photo by Gavin Bell
- #52 There is no fold - Iamthefold.com
- #53 Simple illustration of dramatic difference in “the fold” using Brooklyn Brainery
- #54 Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
- #55 Eyetracking tests by Nielsen Norman Group–Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
- #56 Know Your Audience
- #57 Yes, your site typically has multiple audiences. But not all of them need to be addressed at once. Giving proper thought to who defines a site's audience helps clean out the chaff. Example: Placing find an event functionality in an area where a using is creating an event. Not necessary for that audience.
- #58 Recap of UX Principles
- #59 The Design Process Illustration from The teapot model: how to explain a fuzzy design process to anxious clients. https://blog.prototypr.io/the-teapot-model-how-to-explain-a-fuzzy-design-process-to-anxious-clients-4a2e8487bc87
- #60 The Design Process
- #61 1. Discovery Stakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research
- #62 2. Definition Persona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards
- #63 3. Design Sitemaps, Task Flows, Content Strategy, Sketching, Wireframes, Visual Design, Prototypes, Usability Testing
- #64 4. Development User Acceptance Testing, Quality Assurance Testing, Usability Testing, Site development
- #65 The Design Process – Illustration from the Interaction Design Foundation
- #66 Illustration from Design Thinking 101 by Sarah Gibbons on July 31, 2016 - https://www.nngroup.com/articles/design-thinking/ Nielsen Norman Group
- #67 Illustration from Design Thinking 101 by Sarah Gibbons on July 31, 2016 - https://www.nngroup.com/articles/design-thinking/ Nielsen Norman Group
- #68 Diagram from “How to solve problems applying a Design Thinking, UX, HCD or any Creative Process from scratch V2” by Dan Nessler February 6, 2018, Medium
- #69 Agile Image from unsplash by Cam Adams / @camadams – Thousand Oaks, United States
- #70 Deliverables
- #71 Deliverables
- #72 Sprint Diagram by Sasha Tsimbler
- #73 Lean UX explanation taken from —A Simple Introduction to Lean UX, Interaction Design Foundation
- #74 Deliverables Image of New Delhi newspaper delivery from the Financial Times
- #75 Site map
- #76 Personas
- #77 User Journey https://www.toptal.com/designers/product-design/customer-journey-maps
- #78 Use Cases
- #79 User Flows
- #80 Wireframe
- #81 Wireframe Wireframe example from here: https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype
- #82 Wireframe Wireframe example from here: https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype
- #83 Our Project Photo from Unsplash by Danny Howe @dannyhowe - https://unsplash.com/photos/bn-D2bCvpik
- #84 Events.com
- #85 Discovery
- #86 User Research in Copenhagen’s Elderly Homes - http://www.localhiddenvariable.com/ciid/user-research-in-copenhagens-elderly-homes/
- #87 Value of Research
- #88 Goals & Methodology
- #89 William James on User Research and the advantages of one-on-one interviews? William James, The Consciousness of Lost Limbs, 1887 First published in Proceedings of the American Society for Psychical Research, 1, 249-258 I happened across this quote reading Oliver Sacks’ excellent book Hallucinations
- #90 Class Exercise: Survey Questions
- #91 Lunch break AP photo of men lunching on a construction beam from Sept. 29, 1932,
- #92 Agenda – Afternoon
- #93 Competitive Review
- #94 Discovery: Competitive Review – or Audit
- #95 Heuristics reviews can also be conducted on a single site, of course. For example, to review a client’s site and give them feedback on the existing site, as well as prioritized changes.
- #97 Heuristics reviews can also be conducted on a single site, of course. For example, to review a client’s site and give them feedback on the existing site, as well as prioritized changes.
- #99 We review each of these sites live during class: Eventbrite, NYCgo.com, Meetup
- #100 Key Findings
- #102 http://www.flickr.com/photos/cannedtuna/
- #103 Nathan Shedroff is Program Director of the MBA in Design Strategy program at the California College of the Arts. His books include Experience Design 1, Making Meaning, and contributing to Richard Saul Wurman's Information Anxiety 2. Advisor for Rosenfeld Media
- #104 http://www.optimalworkshop.com
- #105 Case Studies: These are stories I share from experiences at Wachovia and Razorfish
- #106 Project Guidelines
- #107 Project Guidelines
- #108 Characteristics & Findings
- #109 Characteristics & Findings
- #110 Characteristics & Findings
- #111 Design
- #112 Site Maps
- #113 Defining site maps
- #114 Site map for Red Cross
- #115 Site map for Nextel Brazil
- #116 Site map tools
- #117 Page Types
- #118 Examples: Home page, category page, details page/product page
- #119 Navigation
- #120 Navigation https://www.nngroup.com/articles/ia-vs-navigation – Nielsen Norman Group
- #121 Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Sites http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
- #122 Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Sites http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
- #123 Mega Dropdowns
- #124 Mega Dropdowns
- #125 Power Footers
- #126 Power Footers
- #127 Sketching
- #128 Sketching Example: Twitter
- #129 Sketching Example: Twitter
- #130 Bill Buxton
- #131 Attributes of a Sketch
- #132 From Design Studio Methodology – Article by Will Evans http://www.uie.com/articles/design_studio_methodology/ Photo of Stefan from his Twitter profile No rockstars, two heads are better than one
- #133 Defining collaborative sketching Todd Zaki Warfel, The Design Studio Method – see the video on Vimeo
- #134 Sketching Methodology
- #135 Sketching Process
- #136 Discuss
- #137 Discuss: Example of whiteboarded features and functionality
- #138 Sketch
- #139 Sketching Example
- #140 Share
- #141 Revise
- #142 Class Exercise: Collaborative Sketching
- #143 Class Exercise: Collaborative Sketching
- #144 Class Exercise: Collaborative Sketching
- #145 Class Exercise: Collaborative Sketching
- #146 Sketching Tools
- #147 Break
- #148 Wireframes - sculpture by Jaume Plensa, Yorkshire Sculpture Park
- #149 Defining wireframes
- #150 Mercedes Benz Vans – Technology wireframe by SapientRazorfish
- #151 Mercedes Benz Vans – Technology visual design by SapientRazorfish
- #152 Mercedes Benz wireframe by Razorfish
- #153 Mercedes Benz comp/visual design based on wireframe by Razorfish
- #154 Final Exercise Home page characteristics: access different cities, add events, category nav, main nav, surfacing events in different ways, search/calendar/map/etc? Also, what can you offer as a differentiator?
- #155 Wireframing Tools
- #156 Usability Testing Image - Testing apps on the iPad by K2_UX
- #157 Usability testing
- #158 Usability testing - How it feels to watch a user test your product for the first time. Stolen from imgur - https://imgur.com/gallery/GpWZtCn
- #159 Usability testing methods Image from this article: “A guide to paper prototyping & testing for web interfaces” by Dan Nessler https://medium.com/digital-experience-design/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f
- #160 Wireframes
- #161 Defining Responsive Web Design
- #162 Responsive design example
- #163 Responsive design characteristics
- #164 Home page collaboration
- #165 Development
- #166 Additional Resources
- #167 Additional Resources
- #168 Q&A
- #169 IA Job article: https://medium.com/@stribs/ux-your-guerilla-guide-to-breaking-in-75eb3e221fc7
- #170 Next class
- #171 Slideshare address: http://www.slideshare.net/stribs @stribs / stribley AT outlook.com
- #172 Thank you!