SVA Summer 0710

1. Introduction to Information Architecture & DesignSchool of Visual Arts | Summer 2010Robert Stribley

2. Introduction

3. IntroductionAussie-Style Liquorice

4. IntroIntroductionRobert StribleyI’m an senior information architect at Razorfish,writer of music and arts reviews,producer/promoter for a variety show,photographer of various things

5. IntroRobert StribleyI’ve worked with clients such as,Bank of America, Smith Barney, WachoviaBoston Scientific, NasonexChoice HotelsComputer Associates, EMCFordNextelTravel Channel, Women’s Wear DailyIntroduction

6. IntroAbout YouWhat’s your name?What do you do for work?What do you do for fun?Coffee, tea or bottled water?Introduction

7. IntroIntroductionGoals of this workshopUnderstand the basic concepts of user experience designExperience the general process and techniques used on a design project

8. Butterfly on the New York City Highline

9. Pattern Recognition:In cognitive psychology, the ability to identify familiar forms within a complex arrangement of sensory stimuli Butterfly on the New York City Highline

10. Butterflies at the American Museum of Natural History’s Butterfly Conservatory.

11. Butterflies at the American Museum of Natural History’s Butterfly Conservatory.

12. Owl butterfly at the American Museum of Natural History’s Butterfly Conservatory.

13. Prints from EuropasbekanntesteSchmetterlinge(ca. 1895), by Dr. F. Nemos

14. Agenda

15. AgendaAgendaMorningBackgroundUser ResearchOur ProjectCompetitive ReviewPersonasLunch

16. AgendaAgendaAfternoonCard SortingDesign ConceptsGridsSketchesQ&A

17. Background

18. BackgroundBackground: Defining IAin•for•ma•tionar•chi•tec•ture n.The combination of organization, labeling, and navigation schemes within an information system.

19. The structural design of an information space to facilitate task completion and intuitive access to content.

20. The art and science of structuring and classifying web sites and intranets to help people find and manage information.

21. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.NavigationInteractionArt/ScienceDiscipline/ CommunityInformation Architecture for the World Wide Web (1st Edition), p . 4, Rosenfeld and Morville

22. BackgroundBackground: Defining IAThe Information Architecture Institute defines information architecture as “the art and science of organizing and labeling websites, intranets, online communities and software to support usability.”

23. BackgroundBackground: Defining IA "It's hard to say who really is an information architect. In some sense, we all are.” — Alex Wright, Author Glut

24. Background: History A Brief History of IA1975 Richard Saul Wurman coined the term “information architecture” to describe the field now more likely described as “information design”1994Formation of Argus Associates in Ann Arbor, WI, the first firm devoted to IA1998First edition of Peter Morville and Lou Rosenfeld’s Information Architecture for the World Wide Web, affectionately known as “The Polar Bear” book

25. Background: HistoryA Brief History of IA2000First IA Summit, Boston, MA – Defining Information Architecture2002Boxes & Arrows, online journal for information architects goes live

26. 3 new books on IA published, including Jesse James Garrett’sThe Elements of User Experience2009 10th Annual IA Summit held in Memphis, TNPartially 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

27. Design Process

28. Design ProcesscontextIAuserscontent

29. Design Processinterfaceinformation architecture

30. Design Processskin(sexy)skeleton(supportive)

31. Design ProcessDesign Processmetaphor: architectural plansFlickr.com: Cornell University Library

32. Design ProcessThe goal of user experience (or user centered) designCommunicate a message that allows users to accomplish their goals easily, simply, and rapidly.Design Process

33. Design ProcessDesign ProcessDiscoveryDesignDefinitionDevelopment

34. Design ProcessDesign ProcessDiscoveryDesignDefinitionDevelopment Stakeholder interviewers

35. Business requirements

36. Competitive & comparative audits

37. User research

38. Site inventoryDesign ProcessDesign ProcessDiscoveryDesignDefinitionDevelopmentPersona/scenario development

39. Content & meta data audits

40. Card sorts

41. Use cases

42. Moodboards

43. Creative brief

44. Sketching

45. UX BriefDesign ProcessDesign ProcessDiscoveryDesignDefinitionDevelopment Site maps

46. Task flows

47. Wireframes

48. Stakeholder reviews

49. Prototypes

50. Usability testing

51. Visual designDesign ProcessDesign ProcessDiscoveryDesignDefinitionDevelopmentFunctional specifications

52. Quality assurance

53. Site developmentBackgroundDeliverablesIA Deliverablesdiscoverdesigndefinerequirements documentsketchessite mapcomparative/competitive reviewpersonaswireframesfeature/functionality inventoryuser flowsprototypeexperience briefuse cases

54. BackgroundDeliverablesIA Deliverablesdiscoverdesigndefinerequirements documentsketchessite mapcomparative/competitive reviewpersonaswireframesfeature/functionality inventoryuser flowsprototypeexperience briefuse casesvisual design

55. Our Project

56. Our ProjectWhat to do?

57. Our ProjectEvents.comwants to revamp its website to become the go-to online resource people wanting to both attend and promote events across the United States.Our Project

58. Discover

59. User ResearchUser Research in Copenhagen’s Elderly Homes

60. User Research “Through research, we aim to learn enough about the business goals, the users, and the information ecology to develop a solid strategy.” Louis Rosenfield & Peter MorvilleDiscovery: User Research

61. User ResearchDiscovery: User ResearchFlickr.com: yandle

62. User ResearchMethodologyFocus GroupsSurveysInterviewsGoalsIdentify patterns and trends in user behavior, tasks, preferences, obstacles. Discovery: User Research

63. User ResearchClass Exercise: Survey QuestionsHow 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 How often do you attend the events?Do you ever need to promote an event?Do you ever invite people to an event?Discovery:User Research

64. Competitive Review

65. Discovery: Competitive Audit “This type of assessment 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 RabinowitzDiscovery: Competitive Review

66. Competitive ReviewDiscovery: Competitive ReviewMethodologyUsability CriteriaScorecardHeuristic EvaluationGoalsReview and analyze competitor sites according to particular criteriaDraw key findings, which can influence and guide IA through the design phaseAlso:Comparative Reviews

67. Competitive ReviewDiscovery: Competitive ReviewCompetitors

68. Competitive Review: FlavorpillDiscovery: Competitive ReviewFlavorpill“Flavorpill loves culture. We embrace the high-brow, low-brow, underground, mainstream, and everything in between — as long as it's good.A city guide for those who like to go out, Flavorpill publishes a daily update of worthwhile cultural-event listings, from art exhibits and readings to concerts, plays, and festivals.”http://flavorpill.com/about

69. Competitive Review: FlavorpillDiscovery: Competitive ReviewHome PageSearchRecent ActivityOur PickWhat’s Happening TodayEvents calendarFeatured VenueFeatured EventsGiveawaysNew York Guide

70. Competitive Review: FlavorpillDiscovery: Competitive ReviewNavigationPrimaryEvents

71. Today

72. Editor Picks

73. Giveaways

74. Venues

75. Daily Dose

76. FlavorwireSecondaryCity DropdownUtilitySign In/Sign Out

77. SignUp/ Profile

78. Follow Us (RSS, Facebook, Twitter)

79. SearchSearch

80. Calendar

81. Filtering

82. Google maps

83. Comments

84. ProfileCompetitive Review: FlavorpillDiscovery: Competitive ReviewFunctionality

85. Going.comCompetitive Review: Going.comDiscovery: Competitive Review“Going helps you find fun things to do and fun people to meet.Ever wish there were one place where you can find all the events around town?Want to know whether an event is worth going to and see who else likes it?Looking to meet some new people who are up for doing fun things?We felt the same frustration and decided to do something about it. The result is Going: we now have hundreds of events a day and thousands of people who are up for doing fun things.”http://newyork.going.com/about_site

86. Home PagePost an EventSearchInboxOrganizer ToolsWhat’s Popular this WeekCity FeedRecession BustersTop Searches (tag cloud)Photo BoothCompetitive Review: Going.comDiscovery: Competitive Review

87. Competitive Review: Going.comDiscovery: Competitive ReviewNavigationPrimaryThings to Do

88. Places to Go

89. People to SeeSecondaryRecession Busters

90. More CitiesUtilityProfile

91. Inbox

92. Post an Event

93. Search

94. Settings

95. LogoutSearch

96. Calendar

97. Profiles

98. Picture rating

99. Who likes it?

100. Comments

101. Event posting and promoting

102. RSVP online

103. Buy tickets

104. Event filtering

105. Link to Google MapsCompetitive Review: Going.comDiscovery: Competitive ReviewFunctionality

106. Discovery: Competitive ReviewNYCgo.com“NYC & Company is New York City’s official marketing, tourism and partnership organization. Our mission is to maximize travel and tourism opportunities throughout the five boroughs, build economic prosperity and spread the dynamic image of New York City around the world. ”http://nycgo.com/?event=view.footerArticle&id=49568Competitive Review: NYCgo.com

107. Competitive Review: NYCgo.comDiscovery: Competitive ReviewHome PageSearch

108. This Week carousel

109. NYC Highlights

110. Events calendar

111. Recent News

112. Plan Your Trip

113. Deals & Offers

114. Filter by borough

115. My NYC profilesDiscovery: Competitive ReviewNavigationPrimaryTop Attractions

116. What to Do

117. Where to Stay

118. Plan Your Trip

119. Deals

120. Broadway

121. NYC Restaurant Week

122. FreeSecondaryTravel Trade

123. Meeting Planners

124. Membership

125. PressUtilitySearch (with categories)

126. Language Selector

127. Temperature

128. Follow: Twitter, Facebook, EmailCompetitive Review: NYCgo.com

129. Competitive Review: NYCgo.comDiscovery: Competitive ReviewFunctionalitySearch

130. Google maps

131. Calendar

132. Find an event

133. Filtering

134. MyNYCCompetitive ReviewDiscovery: Competitive ReviewKey FindingsSearch placed prominently on each site, sometimes with advanced search

135. Clear need for and emphasis on filtering of events

136. Calendars provide obvious benefit but are handled with varying degree of success

137. Maps also prove helpful, if not as necessary

138. Profiles and community features are also common, but handled with varying degrees of detail, success

139. Free events often highlighted/bubbled up

140. Event detail pages vary, may have maps, RSVP, sharing, rating, commenting functionality

141. The ability to add or promote an event is not always present or prominentCompetitive ReviewWhat else have we learned?Who are the audiences of these sites?

142. What are the strengths of these sites?

143. What are their weaknesses?

144. How might another event site differentiate itself from these sites?Discovery: Competitive Review

145. Define

146. Personas

147. Definition: Personas

148. Personas “Personas summarize user research findings and bring that research to life in such a way that everyone can make decisions based on these personas, not based on themselves.” Steve MulderDefinition: Personas

149. PersonasCharacteristics of Effective PersonasVaried and distinctDetailedNot weighed down with minutiaeTied into business-specific goalsBacked by dataDefinition: Personas

150. PersonasMethodologyCluster Analysis GoalsCreate a narrative based on real data to illustrate user behavior, motivations, goalsDefinition: Personas

151. Definition: PersonasBig BudgetPromoterPlannerSmall Budget

152. PersonasDefinition: PersonasSabrina, 27The party plannerLocation: Gramercy ParkAttitude: Organized, outgoingFinancial Perspective: Generous, bit of spendthriftOnline Habits: Avid user of social networking sites, Twitter, Facebook, etcQuote: “I love getting bunches of friends together to attend all these NYC events. There’s so much great stuff to do in this city!”Big BudgetPlannerPromoterSmall Budget

153. Definition: PersonasJerry, 44The out-of-townerLocation:Cincinnati, OHAttitude: Casual, yet adventurousFinancial Perspective: Moderate spenderOnline Habits: Utilitarian use of the Web to research trips, read about the arts and pay billsQuote: “I’m visiting the Big Apple with my wife and we want to check out some art-related events.”Big BudgetPlannerPromoterSmall Budget

154. PersonasDefinition: PersonasDonny, 38The local comedianLocation: East VillageAttitude: Laidback, loosely organizedFinancial Perspective: Frugal, paycheck to paycheckOnline Habits: Spends time networking, promoting his act online, haunts comedy sitesQuote: “I land a few comedy gigs around the city and I want to promote them better.”Big BudgetPromoterPlannedSmall Budget

155. PersonasDefinition: PersonasJenny, 33The professional promoterLocation: WilliamsburgAttitude: Busy, disciplined, professionalFinancial Perspective: Healthy budget for promotions andadvertisingOnline Habits: Heavy use of social networking sites both professionally and personally, shops onlineQuote:“I manage a few bands and DJs and I have to ensure they’re listed in the right, targeted places.”Big BudgetPlannedPromoterSmall Budget

156. Class Exercise: PersonasEach team is assigned a Persona. Discuss your persona to give us a good picture of who you are and what your behaviors areCharacteristics (likes, dislikes, etc.)

157. Goals

158. Obstacles/pain pointsDetermine 3 tasks your persona might attempt to complete on Events.comSelect a spokesperson to share your findings with usDefinition: Personas

159. Lunch Break

160. AgendaAfternoonCard SortingSketchesWireframesQ&AAgenda

161. Card Sorting

162. Card SortingDefinition: Card Sorting “There are often better 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 chose which organization best communicates our messages.” Nathan Shedroff, Experience Strategist

163. MethodologyGrouping and labeling with index cards, post it notesGoalsFind names for groups of content based on user’s perspectiveOrganize content more efficientlyDefinition: Card Sorting

164. Class Exercise: Card SortingAs individuals:Take 5 minutes to think of all events a person could attendDefinition: Card Sorting

165. Class Exercise: Card SortingNow:Take 2 or 3 minutes to organize your events into categories (group & label)Then we’ll share some categoriesDefinition: Card Sorting

166. Design

167. Design ConceptsDesign ConceptsDonald Norman, Co-Founder, Nielsen Norman Group

168. Design ConceptsKey ConceptsAffordanceMappingConstraintsVisibilityFeedbackDesign Concepts

169. 85Design ConceptsAffordance “Perceived properties that determine how a thing is used [and] provide strong cues to the operations of things.” - Donald Norman

170. Design ConceptsDesign ConceptsMappingRelationship between two thingshttp://flickr.com/photos/annavsculture/441610821/

171. Design ConceptsDesign ConceptsConstraints Limitations that constrain possible interactionshttp://flickr.com/photos/hippie/2561854165/

172. Design ConceptsDesign ConceptsVisibility “Just the right things have to be visible: to indicate what parts operate and how, to indicate how the user is to interact with the device.” - Donald Normanhttp://flickr.com/photos/huladancer22/530743543/

173. 89Design ConceptsDesign ConceptsFeedback “Sending back to the user information about what action has actually been done, what result has been accomplished.” - Donald Norman

174. Conceptual Design

175. Conceptual DesignDesign: Conceptual DesignHome PageCategory PageDetails Page

176. Grids

177. GridsDesign: Grids “The true benefit of using a grid is that as you learn how to use a grid, you start to think systemically about the solutions you design. You start to try and see how various details can echo one another, how different regions of the canvas can be reused or used for similar things, how like elements can be grouped together.”KhoiVinh, design Director, NYTimes.com

178. GridsDesign: Grids

181. GridsDesign: Grids12 column grid

182. GridsDesign: Grids3 columns of 4 units

185. GridsDesign: GridsVariations of the 12 column grid

186. GridsDesign: GridsLearn more about design by grids:960 Grid System960.gsDesign by Grid www.designbygrid.comHashgridwww.hashgrid.com

187. Navigation

188. GridsDesign: NavigationTypes of NavigationSite Structure – major navHierarchical – product familiesFunction – sitemap privacyDirect – banner ad/shortcutReference – related linksDynamic – search resultsBreadcrumb – location Step Navigation – sequence through forms/resultsFaceted Navigation – filters resultsAreas of NavigationGlobal – universal header/footer

189. Local – left nav/right nav

190. Local content –text links, buttonsStyles of NavigationRollover

191. Dropdown

192. TabsAdapted from Atsushi Hasegagwa’s The 7 Navigation Types of Web Sites

193. Sketching

194. Design: SketchingSketching Through the Ages1485-1487Ornithopter by Leonardo da Vinci2005 Schematic representation of the major components of a helicopter by Richard Wheeler

195. SketchingDesign: Sketching “There are techniques and 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

196. SketchingDesign: Sketching

197. SketchingDesign: Sketching

198. SketchingDesign: SketchingAny guesses as to what this is a sketch of?

199. Twitter.com“twttr sketch”SketchingDesign: SketchingTwitter[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

200. SketchingDesign: SketchingAttributes of a SketchQuick

201. Timely

202. Inexpensive

203. Disposable

204. Plentiful

205. Clear vocabulary

206. Distinct gesture

207. Minimal detail

208. Appropriate degree of refinement

209. Suggest & explore rather than confirm

210. AmbiguityBill BuxtonSketching User Experiences

211. SketchingDesign: SketchingMethodologyDrawLimit your timeDon’t worry about mistakes or styleGoalsBenefit from the participation of your colleaguesQuickly generate ideas and refine through iterations

212. Design: SketchingClass Exercise: Sketching & WireframesIn teams, sketch your ideas.Event Detail PageDesign: Sketching

213. Design: SketchingClass Exercise: Sketching & WireframesIn teams, sketch your ideas.1) Event Detail Page2) Create & Promote an EventDesign: Sketching

214. Design: SketchingClass Exercise: Sketching & WireframesIn teams, sketch your ideas.1) Event Detail Page2) Create & Promote an Event3) A HomepageDesign: Sketching

215. Design: SketchingDesign: Wireframes DevelopWireframe & Prototyping ToolsAxureDreamweaverInDesignVisio

216. Dieter Rams: 10 principles of good designGood design is…Good design is innovative.Good design makes a product useful.Good design is aesthetic.Good design makes a product understandable.Good design is unobtrusive.Good design is honest.Good design is long-lasting.Good design is thorough down to the last detail.Good design is environmentally friendly.Good design is as little design as possible.© Dieter Rams, amended March 2003 and October 2009

217. Wireframing/Prototype Tools:Adobe InDesignAxureOmnigraffle (Mac)Microsoft VisioInfoAdditional Resources

218. Books:Information Architecture for the World Wide Web – Louis Rosenfeld, Peter MorvilleInformation Architecture: Blueprints for the Web – Christina Wodtke, Austin GovellaThe Elements of User Experience – Jesse James GarrettDesigning Web Navigation: Optimizing the User Experience – James Kalbach, Aaron GustafsonDesign of Everyday Things – Donald NormanLocal Events:Dot DotDot, SVA Lecture SeriesIA MeetupInfoAdditional ResourcesWeb Sites:Alertbox

219. A List Apart

220. Boxes & ArrowsOrganizations:Human Computer Interactions (HCI)

221. Interaction Designers Association (IxDA)

222. Usability Professionals Association (UPA)Further Studies:Adaptive Path

223. The Information Architecture Institute

224. The IA Summit

225. Pratt – Course in Information Design

226. Nielsen Norman Group

227. Rosenfeld Media

228. User Interface EngineeringQ & A

229. Slideshare address:http://www.slideshare.net/stribsAdditional credit:Thanks to Anh DangInfoAdditional Info

230. The End.

SVA Summer 0710

More Related Content

What's hot (20)

Similar to SVA Summer 0710 (15)

More from Robert Stribley (20)

Recently uploaded (20)

SVA Summer 0710

Editor's Notes