Downloaded 14 times
![“[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/introtouxdesign021718-180218032752/85/Introduction-to-User-Experience-Design-02-17-18-76-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/introtouxdesign021718-180218032752/85/Introduction-to-User-Experience-Design-02-17-18-115-320.jpg)
Uploaded byRobert Stribley
Introduction to User Experience Design 02/17/18
Robert Stribley gave a presentation on user experience design. He discussed the history and background of UX, key UX principles like scent of information and progressive disclosure, the design process, agile methodology, and common UX deliverables like personas and user journeys. The workshop covered user research, a competitive review, card sorting to help structure information, creating site maps and page templates, and different types of navigation. The project involved redesigning Events.com to be a better resource for finding and promoting events in various cities.
More Related Content
Similar to Introduction to User Experience Design 02/17/18
Introduction to User Experience Design 02/17/18
- 1. Introduction to UserExperience Design School of Visual Arts | 17 February, 2018 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 • I’m an Associate Creative Director, Experience at SapientRazorfish • 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 of thisworkshop • Understand the basic concepts of user experience (UX) design • Experience the general process and techniques used on a design project • Review the basic deliverables a UXer develops within a project Introductions
- 6.
- 7. Morning • History &Background • UX Principles • Design Process • Agile • Deliverables • Our Project • User Research • Competitive Review Agenda
- 8. Afternoon • Card Sorting •Site Maps • Page Types • Navigation • Sketching • Wireframes • 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 2018 • 18th Annual IA Summit to be held in Chicago, IL, March 12: “Converge” 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. metaphor: architectural plans DefiningUX Flickr.com: Cornell University Library
- 19.
- 20.
- 21. 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
- 23.
- 24. Tease users. Then drawthem to the details.
- 25. “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
- 26. Self Study “Progressive Disclosure”– Jennifer Tildwell
- 29. Information Clustering & Hierarchy LustmordTable by Jenny Holzer, 1994 3
- 30. “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
- 31. When information is clusteredappropriately on a screen, users can scan and quickly come to terms with the intent of the content.
- 32. 1. Group features andcontent by type
- 33. 1. Group features andcontent by type 2. Position them according to an intuitive hierarchy
- 34. 1. Group features andcontent by type 2. Position them according to an intuitive hierarchy 3. Drop or demote the less important content
- 36. Remove Paths NotTaken 4
- 37. Reduce the fieldof view Once users commit to a path, remove irrelevant navigation
- 38.
- 39. The Tyranny ofConsistency 5
- 40. 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
- 41. Design pages sothey’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
- 43. Death of theHome Page 6
- 44. 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
- 45. More Important? • SEO* •Taxonomy • Meta data • Tagging *search engine optimization
- 46.
- 47. There Is NoFold 7
- 48.
- 49. “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
- 50. “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
- 51.
- 52. Consider the amount ofattention an audience needs on a particular screen* *It may be zero
- 53. 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
- 54. Design Process Project phases byHarold Kerzner
- 55. Discovery Definition DesignDevelopment Design Process
- 56. Discovery Definition DesignDevelopment • Stakeholder Interviews • Business Requirements • Feature Prioritization Matrix • Competitive/Comparative Audit • User Research • Site Inventory • Site Map Design Process
- 57. Discovery Definition DesignDevelopment • Personas • Content Audit • Card Sorts • Use Cases • Site Map • User Journeys • Sketching • Conceptual Wires/Design • Experience Brief Design Process
- 58. Discovery Definition DesignDevelopment • Site Map • Content Matrix • User Flows • Sketching • Wireframes • Stakeholder Reviews • Functional Specifications • Visual Design • Prototype • Usability Testing Design Process
- 59. Discovery Definition Development •User Acceptance Testing (UAT) • Quality Assurance (QA) • Usability Testing Design Process Design
- 60. 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
- 61.
- 62. 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
- 63. What is “agile”? points stories epics scrum sprints standu p backlog backlog grooming kanbanboard Agile Methodology
- 64. Bug fixing forpast sprints Sprint Diagram by Sasha Tsimbler Agile Methodology
- 65.
- 66.
- 67.
- 68. User Journeys Definition SelfStudy “An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows
- 69.
- 70.
- 71. 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.
- 72.
- 73. User Research User Researchin Copenhagen’s Elderly Homes
- 74. “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
- 75. Goals • Identify patternsand trends in user behavior, tasks, preferences, obstacles. Methodology • Focus Groups • Surveys • Interviews Discovery: User Research
- 76. “[I]n a delicateinquiry 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
- 77. 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
- 78. Competitive Review image bybrandon schauer
- 79. “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
- 80. 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
- 81. 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. • Content is properly adapted for the Web. Tone of voice is consistent throughout. 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
- 82. 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
- 84.
- 85. 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
- 86.
- 87. Afternoon • Card Sorting •Site Maps • Page Types • Navigation • Sketching • Wireframes • Q&A Agenda
- 88.
- 89.
- 90. “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 Sorting
- 91. 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 – WebSort, OptimalSort, Socratic 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 Sorting
- 92. Case Studies: • WachoviaWealth Management Group • American Red Cross • Mercedes Benz Definition: Card Sorting
- 93. 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 Sorting 5mins
- 94. 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 Sorting 15mins
- 95. 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 Sorting
- 96. Next Steps With theresults of a card sort we then can: • Build consensus • Refine terminology • Create a site map • Help define navigation Definition: Card Sorting
- 97. Definition: Card SortTools Post-It Plus This app from 3M allows you to scan your Post-It Notes, organize and share them.
- 98.
- 99.
- 100. 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
- 103. Site Map Tools: •Omnigraffle (Mac) • Microsoft Visio • InDesign • Sketch Design: Site Maps
- 104. Page Types &Templates The Mercator Atlas of Europe From The British Library
- 105. Home Page CategoryPage Details Page Examples: Design: Page Types & Templates
- 106. Navigation Navigation Bridge, USSEnterprise by Serendigity, Flickr
- 107. 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
- 108. 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
- 109.
- 110.
- 111.
- 112.
- 113. Sketching Aerial Screw byLeonardo da Vinci, 1485-
- 114. Can you guess whatthis is a sketch of? Design: Sketching
- 115. 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
- 116. “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
- 117. 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
- 118. 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
- 119. Process 1. Discuss 2. Sketch 3.Share 4. Iterate Design: Sketching
- 120. • 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
- 122. 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
- 123.
- 124. 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
- 125. 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
- 126. 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
- 127. 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
- 128. 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
- 129. Class Exercise: CollaborativeSketching Did you come up with any differentiating ideas for an event page? Design: Sketching
- 130. 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
- 131. Wireframes sculpture by JaumePlensa, Yorkshire Sculpture Park
- 132. 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
- 137. Wireframing/Prototyping Tools: • Adobe InDesign •Adobe XD • Axure • Omnigraffle (Mac) • Microsoft Visio • Sketch • Invision + Studio (soon) • Mockingbird (online, free) Self Study Smashing Magazine: 35 Excellent Wireframing Resources Also: • Balsamiq • iPlotz • iMockups (iPad) • Omnigraffle (iPad) Design: Wireframes
- 138. 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: Final Exercise
- 139. 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
- 140.
- 141. 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
- 142.
- 143. Responsive Design Characteristics •Think “mobile first” • The goal: Maintain content and features across devices • Responsive designs adjust at different “break points” corresponding to the dimensions of various devices, typically desktop, tablet and mobile • Navigation may be repositioned • Modules may be repositioned but hierarchies are maintained • Images scale down in size or may be cropped • Text size is maintained where possible, though headings may be reduced in size • Filters may be moved into a dropdown • Occasionally, content or features are dropped to save screen real estate or if they’re not device appropriate Design: Responsive Design
- 144.
- 145. 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 • Responsive Web Design – Ethan Marcotte Web Sites: • Alertbox • A List Apart • Boxes & Arrows • wireframes.tumblr.com Further Studies: • 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 • The IA Summit • Nielsen Norman Group • User Interface Engineering Video: The Right Way to Wireframe by Russ Unger (YouTube) Additional Resources
- 146.
- 147. My article onhow to find a UX job: UX: Your Guerilla Guide to Breaking In
- 148.
- 149.
- 150.
Editor's Notes
- #2 Introduction to User Experience Design - Robert Stribley 17 February 2018
- #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 Using architectural plans/blueprints as a metaphor for an IA’s work
- #20 UX Principles
- #21 Scent of Information
- #22 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
- #23 Uniqlo Site
- #24 Progressive Disclosure
- #25 Reduce clutter, cognitive overload, so there’s less to process at once - Across multiple pages – or within a page or overlay
- #26 “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
- #27 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
- #28 Mercedes Benz product information
- #29 Mercedes Benz product information
- #30 Information Clustering & Hierarchy
- #31 Jeffery Veen quote from The Art and Science of Web Design
- #32 When information is clustered appropriately on a screen, users can scan and quickly come to terms with the intent of the content.
- #33 Information clustering
- #34 Information clustering
- #35 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.
- #36 Mercedes Benz
- #37 Remove paths not taken
- #38 Seems simple, but a lot of sites could benefit from adhering to this principle
- #39 Remove paths not taken
- #40 The Tyranny of Consistency
- #41 This is a “Know it when you see it” kind of problem – sometimes tough to put a finger on
- #42 But be sure when you break with consistency, you do have a principle in mind for doing so
- #43 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.
- #44 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.
- #45 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?
- #46 *Search engine optimization
- #47 Note how the site offers plenty of scent
- #48 There is no fold – Photo by Gavin Bell
- #49 There is no fold - Iamthefold.com
- #50 Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
- #51 Eyetracking tests by Nielsen Norman Group - - Jakob Nielsen, “Scrolling and Attention,” March 22, 2010
- #52 Know Your Audience
- #53 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.
- #54 Recap of UX Principles
- #55 The Design Process
- #56 The Design Process
- #57 1. Discovery Stakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research
- #58 2. Definition Persona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards
- #59 3. Design Sitemaps, Task Flows, Content Strategy, Sketching, Wireframes, Visual Design, Prototypes, Usability Testing
- #60 4. Development User Acceptance Testing, Quality Assurance Testing, Usability Testing, Site development
- #61 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
- #62 Agile
- #63 Deliverables
- #64 Deliverables
- #65 Sprint Diagram by Sasha Tsimbler
- #66 Deliverables
- #67 Site map
- #68 Personas
- #69 User Journey https://www.pinterest.com/daleitch/ux-cx-ui-ixd-cxux-experience-mapsjourneys-and-serv/
- #70 Wireframe
- #71 Our Project
- #72 Events.com
- #74 User Research in Copenhagen’s Elderly Homes - http://www.localhiddenvariable.com/ciid/user-research-in-copenhagens-elderly-homes/
- #75 Value of Research
- #76 Goals & Methodology
- #77 William James, The Consciousness of Lost Limbs, 1887 First published in Proceedings of the American Society for Psychical Research, 1, 249-258 I cam across this quote in Oliver Sacks’ excellent book Hallucinations
- #78 Class Exercise: Survey Questions
- #79 Competitive Review
- #80 Discovery: Competitive Review – or Audit
- #81 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.
- #83 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.
- #85 We review each of these sites live during class: Eventbrite, NYCgo.com, Eventful
- #87 Photo: stribs- Tasty & Sons, Portland, OR
- #88 Agenda – Afternoon
- #90 http://www.flickr.com/photos/cannedtuna/
- #91 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
- #92 http://websort.net http://www.optimalworkshop.com/
- #93 Case Studies: These are stories I share from experiences at Wachovia and Razorfish
- #94 Project Guidelines
- #95 Project Guidelines
- #96 Characteristics & Findings
- #97 Characteristics & Findings
- #98 Characteristics & Findings
- #99 Design
- #100 Site Maps
- #101 Defining site maps
- #102 Site map for Red Cross
- #103 Site map for Nextel Brazil
- #104 Site map for Nextel Brazil
- #105 Page Types
- #106 Examples: Home page, category page, details page/product page
- #107 Navigation
- #108 Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Sites http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
- #109 Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Sites http://www.slideshare.net/atsushi/the-7-navigation-types-of-web-site
- #110 Mega Dropdowns
- #111 Mega Dropdowns
- #112 Power Footers
- #113 Power Footers
- #114 Sketching
- #115 Sketching Example: Twitter
- #116 Sketching Example: Twitter
- #117 Bill Buxton
- #118 Attributes of a Sketch
- #119 Sketching Methodology
- #120 Sketching Process
- #121 Discuss
- #122 Discuss: Example of whiteboarded features and functionality
- #123 Sketch
- #124 Sketching Example
- #125 Share
- #126 Revise
- #127 Class Exercise: Collaborative Sketching
- #128 Class Exercise: Collaborative Sketching
- #129 Class Exercise: Collaborative Sketching
- #130 Class Exercise: Collaborative Sketching
- #131 Sketching Tools
- #132 Wireframes - sculpture by Jaume Plensa, Yorkshire Sculpture Park
- #133 Defining wireframes
- #134 Mercedes Benz wireframe by Razorfish
- #135 Mercedes Benz comp/visual design based on wireframe by Razorfish
- #136 Mercedes Benz wireframe by Razorfish
- #137 Mercedes Benz comp/visual design based on wireframe by Razorfish
- #138 Wireframing Tools
- #139 Final Exercise
- #140 Home page collaboration
- #141 Wireframes
- #142 Defining Responsive Web Design
- #143 Responsive design example
- #144 Responsive design characteristics
- #146 Additional Resources
- #147 Q&A
- #148 IA Job article: https://medium.com/@stribs/ux-your-guerilla-guide-to-breaking-in-75eb3e221fc7
- #149 Next class
- #150 Slideshare address: http://www.slideshare.net/stribs @stribs / stribley AT outlook.com
- #151 Thank you!