Designing for infinity
- 1. Designing for Infinity-d- Dustin Kirkwww.webmetrics.com
- 2. Designing for Infinity – Dustin KirkDesigning for InfinityA bit about me1. I grew up on a ranch in South Dakota2. I started building websites back in 1995 3. Background in CS, Psych, & HCI4. Sr. UX Designer at Neustar Webmetricswww.dustinkirk.com@Dustin_KirkME
- 4. Designing for Infinity – Dustin KirkWhy Infinity?It’s all about usability at scale!
- 5. Designing for Infinity – Dustin KirkWhy Infinity?488 CountriesCountry:Welcome to 1995
- 6. Designing for Infinity – Dustin KirkWhy Infinity?488 CountriesCountry:“It can’t be that bad, everyone does this!”
- 7. Designing for Infinity – Dustin KirkWhy Infinity?488 CountriesCountry:Alright, we’re looking for Spain.
- 8. Designing for Infinity – Dustin KirkWhy Infinity?487 CountriesCountry:“Easy, it’s alphabetically sorted!”
- 9. Designing for Infinity – Dustin KirkWhy Infinity?488 CountriesCountry:
- 10. Designing for Infinity – Dustin KirkWhy Infinity?488 CountriesCountry:18 Keystrokes later…
- 11. Designing for Infinity – Dustin KirkWhy Infinity?488 CountriesCountry:Don’t do this!
- 12. Designing for Infinity – Dustin KirkWhy Infinity?GreatUsabilityBadSmallDataTypical Design Patterns
- 13. Designing for Infinity – Dustin KirkWhy Infinity?GreatUsabilityBadSmallDataDesign Patterns For Infinity
- 14. Designing for Infinity – Dustin KirkDesigning for InfinityDesign Patterns Covered1. Searching2. Filtering3. Infinite Scrolling4. Context Recognition5. Distributed Workload6. Automation7. Loading Data8. Navigation
- 15. SearchingPart 1 of 8
- 16. Searching“Designing for Infinity 101”Part 1 of 8
- 17. iOS App StoreDesigning for Infinity – Dustin KirkSearching
- 18. iOS App StoreDesigning for Infinity – Dustin KirkSearching“299,000 apps you’ll never know about.”
- 19. iOS App StoreDesigning for Infinity – Dustin KirkSearchingLet’s search for flashcards…
- 20. iOS App StoreDesigning for Infinity – Dustin KirkSearching1343 Flashcard Apps“Whoa! I’ll only see the first 25”
- 21. iOS App StoreDesigning for Infinity – Dustin KirkSearching1343 Flashcard ResultsA Common Mistake… Relying on search aloneiOS App StoreDesigning for Infinity – Dustin KirkSearching1343 Flashcard ResultsA Common Mistake… Relying on search aloneHow would you improve this?
- 22. iOS App StoreDesigning for Infinity – Dustin KirkSearching1343 Flashcard ResultsA Common Mistake… Relying on search aloneSolution Use Filters too
- 23. Sorting becomes a prominent fixtureSearching & Filtering“Designing for Infinity 101”Parts 1 & 2 of 8
- 24. Yelp.comDesigning for Infinity – Dustin KirkSearching & Filtering
- 25. Yelp on iPhoneDesigning for Infinity – Dustin KirkSearching & Filtering92 Results
- 26. Yelp on iPhoneDesigning for Infinity – Dustin KirkSearching & Filtering92 ResultsFiltering to the rescue!
- 27. iOS App Store & Yelp on iPhoneDesigning for Infinity – Dustin KirkSearching & Filtering
- 28. Yelp on iPhoneDesigning for Infinity – Dustin KirkSearching & Filtering
- 29. Yelp on iPhoneDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Searching and Filtering on a smart phoneKey Points Use Filtering when you have lots of results
- 30. Use Sorting tooYelp on iPhoneDesigning for Infinity – Dustin KirkSearching & FilteringWhat about the map button?
- 31. Yelp on iPhoneDesigning for Infinity – Dustin KirkSearching & FilteringDevices with GPS allow you to bypass entering in your location, over and over and over again.
- 32. Google mapsDesigning for Infinity – Dustin KirkSearching & FilteringOn a PC you have to manually enter an address, or zoom in to an area.
- 33. Yelp on iPhoneDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Location based searchKey Points Utilize GPS to get current location
- 34. Allow for entering in other locations
- 35. Search results should be visible on map
- 36. Redo search when the user moves the mapSplunkDesigning for Infinity – Dustin KirkSearching & Filtering
- 37. SplunkDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Building complex search queriesKey Points Ability to click on text in search results to drill-down further
- 38. Ability to create conditionals with the use of a key press + mouse click
- 39. Flexible filtering capabilities (time based + categorical based)Mint.comDesigning for Infinity – Dustin KirkSearching & Filtering
- 40. Mint.comDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Simplifying search queriesKey Points Display categorical filters based on the item(s) selectedAmazon Diamond SearchDesigning for Infinity – Dustin KirkSearching & Filtering
- 41. Amazon Diamond SearchDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Filter categorical rangesKey Points Allows for setting upper and lower limits
- 42. Visual aids teach unfamiliar terms
- 43. # of Results is updated in real-timeDesigning for Infinity – Dustin KirkSearching & Filtering488 CountriesCountry:Remember this example?
- 44. GmailDesigning for Infinity – Dustin KirkSearching & FilteringThe modern day solution…
- 45. GmailDesigning for Infinity – Dustin KirkSearching & FilteringAwesome!The modern day solution…
- 46. GmailDesigning for Infinity – Dustin KirkSearching & Filtering19952011The modern day solution…
- 47. GmailDesigning for Infinity – Dustin KirkSearching & Filtering19952011The modern day solution…
- 48. GmailDesigning for Infinity – Dustin KirkSearching & Filtering19952011The modern day solution…
- 49. GmailDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Selecting a single item from a listKey PointsReplaces combo boxes
- 50. Replaces check boxes
- 51. Allows user to browse as well as filter
- 52. Ability to filter on multiple characters
- 53. List updates after each character entered
- 54. List keeps up to 10 items in view
- 55. List scrolls to show everything
- 56. Use keyboard arrows move selection up/downGmailDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Selecting commonly selected itemsKey Points Combines both filtering and select into one step
- 57. Hides within the menu of ‘select all’
- 58. Keep to a minimum # of filtersGmailDesigning for Infinity – Dustin KirkSearching & FilteringAuto-suggest in Gmail for Contact Disambiguation
- 59. GmailDesigning for Infinity – Dustin KirkSearching & FilteringClose, but it shows only a maximum of 10 itemsAuto-suggest in Gmail for Contact Disambiguation
- 60. iPhone SMSDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Contact DisambiguationKey Points Results are searched in real-time
- 61. Contacts show up one time for each method
- 62. Search by both contact name & method
- 63. Scroll to view more resultsDesigning for Infinity – Dustin KirkSearching & Filtering?So what about multi-selection?
- 64. Designing for Infinity – Dustin KirkSearching & Filtering1995So what about multi-selection?
- 65. FacebookDesigning for Infinity – Dustin KirkSearching & Filtering19952011The modern day solution…
- 66. FacebookDesigning for Infinity – Dustin KirkSearching & FilteringSweet!
- 67. FacebookDesigning for Infinity – Dustin KirkSearching & FilteringAwesome!
- 68. FacebookDesigning for Infinity – Dustin KirkSearching & FilteringView SelectedView All
- 69. FacebookDesigning for Infinity – Dustin KirkSearching & FilteringGreat Design Pattern For Multi-selectionKey Points Ability to filter on multiple characters
- 70. List updates after each character entered
- 71. List keeps multiple items in view
- 72. List scrolls to show everything
- 73. Ability to view list of all selected itemsSearching & FilteringInfinite ScrollingPart 3 of 8
- 74. GmailDesigning for Infinity – Dustin KirkInfinite ScrollingAgain, welcome to 1995
- 75. GmailDesigning for Infinity – Dustin KirkInfinite ScrollingCommon Mistake #2 Restricting the number of items that can be selected due to paginationMint.comDesigning for Infinity – Dustin KirkInfinite ScrollingCommon Mistake #2 Restricting the number of items that can be selected due to paginationNeustarWebmetricsDesigning for Infinity – Dustin KirkInfinite Scrolling
- 76. NeustarWebmetricsDesigning for Infinity – Dustin KirkInfinite ScrollingGreat Design Pattern For Selectable Data ListsKey Points Enables actions to be taken on ALL items
- 77. Asynchronous data loading keeps it fast
- 78. Buffers additional data to prevent jerky loading
- 79. Calculates total height to prevent jerky scrolling
- 80. Track scroll position to support back button useBing ImagesDesigning for Infinity – Dustin KirkInfinite ScrollingMaxes out at 1000 (of 131,000) images
- 81. Google ImagesDesigning for Infinity – Dustin KirkInfinite ScrollingNot necessary
- 82. FriendlyDesigning for Infinity – Dustin KirkInfinite Scrolling
- 83. GmailDesigning for Infinity – Dustin KirkInfinite ScrollingGreat Design Pattern For Navigating an Infinite Scrolling pageKey Points Navigation options float at the edge of the screen above the scrolling content
- 84. Includes the ability to jump directly to the topInfinite ScrollingContext RecognitionPart 4 of 8
- 85. Microsoft WordDesigning for Infinity – Dustin KirkContext RecognitionToolbar Overload
- 86. Microsoft WordDesigning for Infinity – Dustin KirkContext RecognitionHide & Seek Menus
- 87. Microsoft WordDesigning for Infinity – Dustin KirkContext Recognition
- 88. Microsoft WordDesigning for Infinity – Dustin KirkContext RecognitionGreat Design Pattern For Simplifying menus and toolbarsKey Points Use context to hide/show content appropriate menus
- 89. Adjust icon size the most used items are easy to locate and click
- 90. Allow the menu to resize based on screen real-estate to maximize shortcuts
- 91. Use visuals in drop-down menus to aid in quick decision makingWufoo.comDesigning for Infinity – Dustin KirkContext RecognitionGreat Design Pattern For Providing HelpKey PointsHelps users in decision making
- 92. Contextual help only appears when it is relevant
- 93. Eliminates need for external help documentation for users
- 94. Keeps users in the ‘zone’ and doesn’t require leaving the application.ZimbraDesigning for Infinity – Dustin KirkContext Recognition
- 95. ZimbraDesigning for Infinity – Dustin KirkContext RecognitionGreat Design Pattern For Providing Just-In-Time information/toolsKey Points Reduces steps to access additional information
- 96. Keeps user engaged within the applicationContext RecognitionDistributing WorkloadPart 5 of 8
- 97. Designing for Infinity – Dustin KirkDistributing Workload5 people1 person100%20%
- 98. WikipediaDesigning for Infinity – Dustin KirkDistributing Workload
- 99. WikipediaDesigning for Infinity – Dustin KirkDistributing WorkloadGreat Design Pattern For Large scale public projectsKey Points Distributes work across people willing to volunteer time and effort
- 100. Enables general public to contribute and govern
- 101. Works well for collaboration and keeping up with fast moving eventsGalaxy ZooDesigning for Infinity – Dustin KirkDistributing Workload
- 102. Galaxy ZooDesigning for Infinity – Dustin KirkDistributing WorkloadGreat Design Pattern For Overcoming weaknesses in computer visionKey Points Take advantage of people’s ability to easily discern objects visually
- 103. Provide users simple options to classify objectsMechanical TurkDesigning for Infinity – Dustin KirkDistributing Workload
- 104. Mechanical TurkDesigning for Infinity – Dustin KirkDistributing WorkloadGreat Design Pattern For Outsourcing tasks cheaplyKey Points Easy way to outsource simple tasks that require a human
- 105. Pay for services people would not generally volunteer forESP GameDesigning for Infinity – Dustin KirkDistributing Workload
- 106. ESP GameDesigning for Infinity – Dustin KirkDistributing WorkloadGreat Design Pattern For Acquiring additional dataKey Points Simple tasks can become fun through a social game
- 107. Use multiple data points to validate reliability of contributionsDistributing WorkloadAutomationPart 6 of 8
- 108. Designing for Infinity – Dustin KirkAutomationManual100%Manual labor is costly
- 109. Designing for Infinity – Dustin KirkAutomationAutomationManual20%80%Automation eases manual input
- 110. Designing for Infinity – Dustin KirkAutomationAutomationManualCrowdsourcing5%80%15%All together they reduce labor even further
- 111. iPhoto FacesDesigning for Infinity – Dustin KirkAutomation
- 112. iPhoto FacesDesigning for Infinity – Dustin KirkAutomationGreat Design Pattern For Augmenting manual tasksKey Points Enable people to classify items
- 113. Use learning algorithms to identify patterns
- 114. Classify the remaining items automatically
- 115. Allow users to confirm changes and correct mistakesiPhotoDesigning for Infinity – Dustin KirkAutomationFacebook should auto-tag photos
- 116. GmailDesigning for Infinity – Dustin KirkAutomationSpam, Spam, & more Spam
- 117. GmailDesigning for Infinity – Dustin KirkAutomationGreat Design Pattern For Reducing information overloadKey Points Enable people to provide identify unwanted data
- 118. Use learning algorithms to identify patterns
- 119. Prevent unwanted data from appearing to othersSporeDesigning for Infinity – Dustin KirkAutomation
- 120. SporeDesigning for Infinity – Dustin KirkAutomationGreat Design Pattern For Create Unique ExperiencesKey Points Reduce upfront work by using procedural algorithms
- 121. Provide users with customization tools
- 122. Enables diversity by generating music, movement, & texturing on the flyPandora RadioDesigning for Infinity – Dustin KirkAutomation
- 123. Pandora RadioDesigning for Infinity – Dustin KirkAutomationNeed more input!
- 124. NetflixDesigning for Infinity – Dustin KirkAutomation
- 125. NetflixDesigning for Infinity – Dustin KirkAutomationRelying heavily on automated suggestions limits discoverability.
- 126. Amazon.comDesigning for Infinity – Dustin KirkAutomation
- 127. Amazon.comDesigning for Infinity – Dustin KirkAutomationGreat Design Pattern For Enable discovery through recommendationsKey Points Suggestions should augment searching and filtering toolsAutomationLoading DataPart 7 of 8
- 128. Delicious LibraryDesigning for Infinity – Dustin KirkLoading Data
- 129. Delicious LibraryDesigning for Infinity – Dustin KirkLoading DataGreat Design Pattern For Avoiding work duplicationKey Points Use APIs to pull in 3rd party dataRoambiDesigning for Infinity – Dustin KirkLoading Data
- 130. Mechanical TurkDesigning for Infinity – Dustin KirkLoading DataGreat Design Pattern For Bulk loading dataKey Points Use pattern recognition to identify data structures
- 131. Automate data importing
- 132. Provide tools to make adjustments and correct errorsLoading DataNavigationPart 8 of 8
- 133. Google FinanceDesigning for Infinity – Dustin KirkNavigation
- 134. Google FinanceDesigning for Infinity – Dustin KirkNavigationGreat Design Pattern For Navigating TimelinesKey Points Ability to see the overall timeline
- 135. Ability to set zoom level (day, month, year, custom)
- 136. Secondary view showing zoomed in timelineMicrosoft PivotDesigning for Infinity – Dustin KirkNavigation
- 137. Microsoft PivotDesigning for Infinity – Dustin KirkNavigationGreat Design Pattern For Exploring DataKey Points Ability to visual all data types using bar chart
- 138. Ability to filter data categories, choose data source to sort, and ability to zoom
- 139. Ability to represent all data in a visual mannerWindows Media CenterDesigning for Infinity – Dustin KirkNavigationGreat Design Pattern For Navigating time linearlyKey Points Accelerates scrolling the longer you hold a button down
- 140. Useful when control options are limited
- 141. Provides a broader view of time as scrolling speeds upiPhone ContactsDesigning for Infinity – Dustin KirkNavigationGreat Design Pattern For Navigating alphabeticallyKey Points Floating index layer allows jumping to a letter
- 142. List updates in real-time
- 143. Heading always remains at the top
- 144. Touch enables fast and slow scrollingNavigatingConcluding Notes
- 145. Designing for Infinity – Dustin KirkConcluding NotesPatterns Covered1. Searching2. Filtering3. Infinite Scrolling4. Context Recognition5. Distributed Workload6. Automation7. Loading Data8. Navigation
- 146. iTunesDesigning for Infinity – Dustin KirkConcluding Notes
- 147. Designing for Infinity – Dustin KirkConcluding NotesTakeaway Tips1. When designing UIs, think about limits2. Utilize patterns that have been proven by others3. Keep the innovation going and find new patternsView these slides online and share them with otherswww.dustinkirk.com/infinity/@Dustin_Kirk
- 148. Designing for Infinity-d- Dustin Kirkwww.webmetrics.com
Editor's Notes
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Screen real-estateCognitive loads
- Yelp is a great website example that showcases many of the techniques we’ll see repeated in UI’s dealing with Big Data later on. It’s Search functionality is it’s primary means of navigation It provides sorting options It provides filtering capabilities (including contextual category filters) It provides a rating system It allows you to search using the mapSearching and sorting options are plentiful and important when a user is in discovery mind-state
- Splunk is fantastic and utilizes many patterns for tackeling big data.- Smart about importing data, auto recognition of key-value pairs, great tool for mapping custom fields- Great UI for searching logs and time-based information- Click on text in log entries to narrow down search results- It suggests ‘interesting fields’ and allows you to customize your own list- A big shout out to Nick Mealy, Principal UI Designer at Splunk, for his excellent work
- Mint.com is great for a number of reasons, but in regards to searching and filtering, I like how they provide filters based on the item that is selected.
- Amazon Diamond Search allows the user to filter through over 12000 diamonds.An excellent model when the needs are right Items are classified by categories which are discrete values, and can be represented visually
- - This is a great example of a scalable UI for applying and displaying tags (labels)
- Create shortcuts of common actions.For example combine filtering and selecting into a single step using a drop-down menu for selection.
- Same as the iPhone SMS appAuto-suggest is highly useful when creating scalable user interfaces-Auto-suggest prevents misspelling Allows users to select the appropriate item quickly Allows the user to select one of multiple sub-items for the same item being typed. (also used when sending a SMS on iPhone to select between multiple phone numbers)
- Same as the iPhone SMS appAuto-suggest is highly useful when creating scalable user interfaces-Auto-suggest prevents misspelling Allows users to select the appropriate item quickly Allows the user to select one of multiple sub-items for the same item being typed. (also used when sending a SMS on iPhone to select between multiple phone numbers)
- The key for multi-select with a filter is being able to view all selected items in an area other than the filtered list.
- Great model for selecting multiple items from a big list Ability to search Uses auto-complete Uses real-time search to narrow down results Build up lists by running multiple searches, selecting people, and viewing a list of all selected people
- When web browsers all began to support asynchronous data loading around 2005, the need for pagination was diminished.
- Google News on a PC doesn’t have infinite scrolling, but Google News on an iPad does
- Only lets you edit 100 items at a time
- Only lets you edit 100 items at a time
- NeustarWebmetricsEnterpirse Console is a web application for website performance monitoring.The Enterprise Console uses infinite scrolling such that when a user clicks the ‘select all’ option , users can take action upon everything, even items not loaded in view.
- Great model for creating a list Ability to search Uses auto-complete Uses real-time search to narrow down results Build up lists by running multiple searches, selecting people, and viewing a list of all selected people
- Will display up to 1000 images
- Google shows 15 pictures per ‘page’ and limits 50 ‘pages’ of results for a total of 750 images after clicking ‘view more’
- Friendly, an iPad app for viewing Facebookallows infinite scrolling
- The Microsoft Ribbon uses context to know if the picture or chart options are necessary to display or not The menu system provides room for icons to expand and contract based on the real-estate available The menu system can make items used more than others bigger The menu allows for visual recall with icons The menus are flexible and enable a large number of sub-options to be displayed.
- Zimbra will recognize text strings and present relevant information based on that string. Maps are shown when mousing over an address Events can be added to the calendar Email addresses and phone numbers can be added to the contacts list
- Pay people on the internet to do work that humans can do, but machines can’t effectively.
- Created by Luis von Ahn who later created many games called ‘Games With A Purpose’ Gathers image tags from players which are licensed by Google to improve its image search results
- iPhoto faces uses the manual tagging of faces in a portion of photos to automate the tagging of the same face in additional photos.
- Face recognition is used in iPhoto Users tag a portion of the photos with the people’s names, and iPhoto tries to tag the rest. While it isn’t perfect, it beats doing it all manually.
- Gmail has used the same technique for their Priority Inbox which sorts out the mail you usually read from the rest
- Gmail has used the same technique for their Priority Inbox which sorts out the mail you usually read from the rest
- Spore, created by Will Wright, uses automation to create custom and unique player experiences throughout the game.
- Spore’s characters are created by players and texture mapping, character movement, and music are all created based on a system of rules
- Pandora is well known for their personalized radio stations which can be seeded with a genre, song name, or artist. The initial seeing however, is not automated. Employeesmanually categorize over 13,000 songs (with 400 characteristics each) a month feeding the Music Genome Project (perhaps this will be automated in the future)
- Binary (up/down) and 5-star ratings are limiting and don’t allow users to specify why they are giving it a low or high rating.
- While Netflix offers searching capability, it is limited to shallow fields such as titles and descriptions.
- Delicious library catalogsyour movie, music, and book collections by using barcode lookup and importing data from Amazon.com
- Players describe a photo and earn points when the person they play with matches their descriptions
- Uses great graphing techniques, as well as time filtering Great use of touch controls on the iPad
- - Auto-detects data key value pairs from 3rd party sources and excel files
- Uses great graphing techniques, as well as time filtering Great use of touch controls on the iPad
- - Once you start navigating in 3D space, your inspiration really needs to come from videos games. For computers that means using [w][a][s][d] keyboard controls along with mouse pointing.- Nonetheless Photosynth is a great use of crowd-sourced content
- MS Pivot is a very versatile way to view data- Ability to sift and browse information, very visual- The Filters on the left are limited in height, so combining it with the scalable solution seen in Splunk would make it better
- Microsoft Pivot is an excellent inspiration for anyone working on BI tools
- The techniques shared here can be found in all types of software that deals with Big DataiTunes is a good example of managing information- enables filters, tagging (play-lists), searching, and sorting- search results update as you type- genius play-lists- genius recommendation