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/introtouxdesign120719-191209022232/75/Introduction-to-User-Experience-Design-12-07-19-90-2048.jpg)
Uploaded byRobert Stribley
Introduction to User Experience Design 12/07/19
The document pertains to a workshop on user experience (UX) design led by Robert Stribley on December 7, 2019, outlining the goals, agenda, and key concepts in UX design, including principles, a design process, and methodologies such as Agile and Lean UX. It emphasizes the importance of user research, competitive reviews, and design deliverables like personas, wireframes, and usability testing in achieving effective user experiences. The workshop also highlights the historical context and evolution of UX and information architecture in the digital landscape.
Designβ¦
More Related Content
Similar to Introduction to User Experience Design 12/07/19
![Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/software-251207184836-1d16ba16-thumbnail.jpg?width=640&height=640&fit=bounds)
![iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207191544-22b737dc-thumbnail.jpg?width=640&height=640&fit=bounds)
![Moho Pro 14.4 Crack for MacOS Works Until 2050 [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207192639-797289c4-thumbnail.jpg?width=640&height=640&fit=bounds)
![CleanMyMac X v5.2.8 Crack for MacOS Full Version [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207194121-a81f0142-thumbnail.jpg?width=640&height=640&fit=bounds)
![AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx](https://cdn.slidesharecdn.com/ss_thumbnails/softwareoverview-251207190907-2316965f-thumbnail.jpg?width=640&height=640&fit=bounds)
Introduction to User Experience Design 12/07/19
- 1. Introduction to UserExperience Design School of Visual Arts | 7 December 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. userscontent context IA Defining UX Information EcologyDiagram by Peter Morville and Louis Rosenfeld
- 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
- 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 Development DesignProcess Design
- 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 β’ Concept Diagrams β’ Wireframes β’Functional Specifications β’ Visual Design β’ Stakeholder Reviews β’ 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.
- 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.
- 80. Sketching > Wireframe> Design Design
- 81.
- 82.
- 83.
- 84.
- 85. 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.
- 86.
- 87. User Research User Researchin Copenhagenβs Elderly Homes
- 88. β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
- 89. Goal Identify patterns andtrends in user behavior, tasks, preferences, obstacles. Methodology β’ Focus Groups β’ Surveys β’ Interviews Discovery: User Research
- 90. 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
- 91. 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
- 92.
- 93. Afternoon β’ Competitive Review β’Card Sorting β’ Site Maps β’ Page Types β’ Navigation β’ Break β’ Sketching β’ Wireframes β’ Usability Testing β’ Responsive Design β’ Q&A Agenda
- 94. Competitive Review image bybrandon schauer
- 95. β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
- 96. 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
- 97. 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
- 98. 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
- 100.
- 101. 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
- 102.
- 103.
- 104. β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
- 105. 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
- 106. Case Studies: β’ WachoviaWealth Management Group β’ American Red Cross β’ Mercedes Benz Definition: Card Sorts
- 107. 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
- 108. 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
- 109. 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
- 110. 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
- 111. Definition: Card SortTools Post-It Plus This app from 3M allows you to scan your Post-It Notes, organize and share them.
- 112.
- 113.
- 114. 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
- 117. Site Map Tools: β’Omnigraffle (Mac) β’ Microsoft Visio β’ InDesign β’ Sketch Design: Site Maps
- 118. Page Types &Templates The Mercator Atlas of Europe From The British Library
- 119. Home Page CategoryPage Details Page Examples: Design: Page Types & Templates
- 120.
- 121. β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
- 122. 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
- 123. 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
- 124.
- 125.
- 126.
- 127.
- 128.
- 129. Sketching Aerial Screw byLeonardo da Vinci, 1485-1487
- 130. β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
- 131. 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
- 132. - 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 Emphasizing Collaboration
- 133. Defining Collaborative Sketching β’Rooted in 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
- 134. 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
- 135. 1. Discuss 2. Sketch 3.Share 4. Iterate Design: Sketching Process
- 136. β’ 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
- 138. 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
- 139.
- 140. 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
- 141. 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
- 142. Class Exercise: 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
- 143. Class Exercise: 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
- 144. Class Exercise: 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
- 145. Class Exercise: Did youcome up with any differentiating ideas for an event page? Design: Sketching
- 146. 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
- 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. Discussion Did you thinkto incorporate β¦ 1) Filter by date, price, location? 2) City switcher? 3) Add an event? 4) What differentiates your design from others? Design: Home Page
- 155. 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
- 156. Usability Testing Testing appson the iPad by K2_UX
- 157. 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
- 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 to display content effectively on various devices or resolutions β’ Reposition modules if needed but maintain hierarchies β’ 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 β’ Lean UX β Jeff Gothelf, Josh Seiden β’ Responsive Web Design β Ethan Marcotte Additional Resources Web Sites: β’ Alertbox β’ A List Apart β’ Boxes & Arrows β’ wireframes.tumblr.com
- 166. Further Studies: β’ Schoolof Visual Arts β’ Continuing Ed classes β’ MFA in Interaction Design β’ The IA Summit β’ Interaction 19 (IXDA) β’ 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. Also Recommended Dates andLocation TBD
- 171.
- 172.
- 173.
Editor's Notes
- #2Β Introduction to User Experience Design - Robert Stribley 7 December 2019 Brazilian Jaguar byΒ @titoferrara, Bushwick, Brooklyn, NY- 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 - Information Ecology Venn Diagram by Peter Morville and Louis Rosenfeld
- #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Β User Story β example taken from Requirements 101: User Stories vs. Use Cases https://www.stellman-greene.com/2009/05/03/requirements-101-user-stories-vs-use-cases/
- #79Β Use Cases β example taken from Requirements 101: User Stories vs. Use Cases https://www.stellman-greene.com/2009/05/03/requirements-101-user-stories-vs-use-cases/
- #80Β User Flows
- #81Β Wireframe
- #82Β Concept Diagram β I sometimes use a concept diagram just to show an outline of the content which would go on a screen so we can agree to content and hierarchy at a very high level before fleshing it out to be a true wireframe // you might call this a visual outline or something else. Sometimes I present this with the wireframes up front, as itβs easier to digest at a birdβs eye view than a wireframe.
- #83Β Wireframe Wireframe example from here: https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype
- #84Β Wireframe Wireframe example from here: https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype
- #85Β Our Project Photo from Unsplash by Danny Howe @dannyhowe - https://unsplash.com/photos/bn-D2bCvpik
- #86Β Events.com
- #87Β Discovery
- #88Β User Research in Copenhagenβs Elderly Homes - http://www.localhiddenvariable.com/ciid/user-research-in-copenhagens-elderly-homes/
- #89Β Value of Research
- #90Β Goals & Methodology
- #91Β 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
- #92Β Class Exercise: Survey Questions
- #93Β Lunch break AP photo of men lunching on a construction beam from Sept. 29, 1932,
- #94Β Agenda β Afternoon
- #95Β Competitive Review
- #96Β Discovery: Competitive Review β or Audit
- #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Β 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.
- #101Β We review each of these sites live during class: Eventbrite, NYCgo.com, Meetup
- #102Β Key Findings
- #104Β http://www.flickr.com/photos/cannedtuna/
- #105Β 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
- #106Β http://www.optimalworkshop.com
- #107Β Case Studies: These are stories I share from experiences at Wachovia and Razorfish
- #108Β Project Guidelines
- #109Β Project Guidelines
- #110Β Characteristics & Findings
- #111Β Characteristics & Findings
- #112Β Characteristics & Findings
- #113Β Design
- #114Β Site Maps
- #115Β Defining site maps
- #116Β Site map for Red Cross
- #117Β Site map for Nextel Brazil
- #118Β Site map tools
- #119Β Page Types
- #120Β Examples: Home page, category page, details page/product page
- #121Β Navigation
- #122Β Navigation https://www.nngroup.com/articles/ia-vs-navigation β Nielsen Norman Group
- #123Β Adapted from Atsushi HASEGAWAβs The 7 Navigation Types of Web Sites http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
- #124Β Adapted from Atsushi HASEGAWAβs The 7 Navigation Types of Web Sites http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
- #125Β Mega Dropdowns
- #126Β Mega Dropdowns
- #127Β Power Footers
- #128Β Power Footers
- #129Β Break
- #130Β Sketching
- #131Β Bill Buxton
- #132Β Attributes of a Sketch
- #133Β 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
- #134Β Defining collaborative sketching Todd Zaki Warfel, The Design Studio Method β see the video on Vimeo
- #135Β Sketching Methodology
- #136Β Sketching Process
- #137Β Discuss
- #138Β Discuss: Example of whiteboarded features and functionality
- #139Β Sketch
- #140Β Sketching Example
- #141Β Share
- #142Β Revise
- #143Β Class Exercise: Collaborative Sketching
- #144Β Class Exercise: Collaborative Sketching
- #145Β Class Exercise: Collaborative Sketching
- #146Β Class Exercise: Collaborative Sketching
- #147Β Sketching Tools
- #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Β 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?
- #156Β Wireframing Tools
- #157Β Usability Testing Image - Testing apps on the iPad by K2_UX
- #158Β Usability testing
- #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Β Podcast
- #169Β IA Job article: https://medium.com/@stribs/ux-your-guerilla-guide-to-breaking-in-75eb3e221fc7
- #170Β Next class
- #171Β Next class
- #172Β Slideshare address: http://www.slideshare.net/stribs @stribs / stribley AT outlook.com
- #173Β Q&A
- #174Β Thank you!