Designing for Infinity<br />-d- Dustin Kirk<br />www.webmetrics.com<br />
Designing for Infinity – Dustin Kirk<br />Designing for Infinity<br />A bit about me<br />1. I grew up on a ranch in South...
Why Infinity?<br />
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />It’s all about usability at scale!<br />
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />Welcome to 1995<br />
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />“It can’t be that bad, every...
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />Alright, we’re looking for S...
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />487 Countries<br />Country:<br />“Easy, it’s alphabetically s...
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />18 Keystrokes later…<br />
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />Don’t do this!<br />
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />Great<br />Usability<br />Bad<br />Small<br />Data<br />Typic...
Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />Great<br />Usability<br />Bad<br />Small<br />Data<br />Desig...
Designing for Infinity – Dustin Kirk<br />Designing for Infinity<br />Design Patterns Covered<br />1. Searching<br />2. Fi...
Searching<br />Part  1 of 8<br />
Searching<br />“Designing for Infinity 101”<br />Part  1 of 8<br />
iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />
iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />“299,000 apps you’ll never know about.”<br />
iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />Let’s search for flashcards…<br />
iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />1343 Flashcard Apps<br />“Whoa!  I’ll only see...
iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />1343 Flashcard Results<br />A Common Mistake…<...
iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />1343 Flashcard Results<br />A Common Mistake…<...
  Sorting becomes a prominent fixture</li></li></ul><li>Searching & Filtering<br />“Designing for Infinity 101”<br />Parts...
Yelp.com<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />92 Results<br />
Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />92 Results<br />Filtering to the ...
iOS App Store & Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul...
  Use Sorting too</li></li></ul><li>Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br...
Google maps<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />On a PC you have to manually enter a...
Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Devices with GPS allow you to byp...
Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul...
  Allow for entering in other locations
  Search results should be visible on map
  Redo search when the user moves the map</li></li></ul><li>Splunk<br />Designing for Infinity – Dustin Kirk<br />Searchin...
Splunk<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li>  B...
  Ability to create conditionals with the use of a key press + mouse click
  Flexible filtering capabilities (time based + categorical based)</li></li></ul><li>Mint.com<br />Designing for Infinity ...
Mint.com<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> ...
Amazon Diamond Search<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<b...
  Visual aids teach unfamiliar terms
  # of Results is updated in real-time</li></li></ul><li>Designing for Infinity – Dustin Kirk<br />Searching & Filtering<b...
Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />The modern day solution…<br />
Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Awesome!<br />The modern day solution…<br />
Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solutio...
Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solutio...
Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solutio...
Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li>Sele...
Replaces check boxes
 Allows user to browse as well as filter
  Ability to filter on multiple characters
  List updates after each character entered
  List keeps up to 10 items in view
  List scrolls to show everything
  Use keyboard arrows move selection up/down</li></li></ul><li>Gmail<br />Designing for Infinity – Dustin Kirk<br />Search...
Hides within the menu of ‘select all’
 Keep to a minimum # of filters</li></li></ul><li>Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filteri...
Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Close, but it shows only a maximum of 10 i...
iPhone SMS<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li...
  Contacts show up one time for each method
  Search by both contact name & method
  Scroll to view more results</li></li></ul><li>Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />?<br ...
Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />So what about multi-selection?<br />
Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solu...
Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Sweet!<br />
Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Awesome!<br />
Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />View Selected<br />View All<br />
Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> ...
  List updates after each character entered
  List keeps multiple items in view
  List scrolls to show everything
  Ability to view list of all selected items</li></li></ul><li>Searching & Filtering<br />Infinite Scrolling<br />Part  3 ...
Gmail<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Again, welcome to 1995<br />
Gmail<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Common Mistake #2<br /><ul><li>  Restricting ...
NeustarWebmetrics<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Great Design Pattern For<br /><ul...
  Asynchronous data loading keeps it fast
  Buffers additional data to prevent jerky loading
  Calculates total height to prevent jerky scrolling
  Track scroll position to support back button use</li></li></ul><li>Bing Images<br />Designing for Infinity – Dustin Kirk...
Google Images<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Not necessary<br />
Friendly<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />
Gmail<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Great Design Pattern For<br /><ul><li> Naviga...
  Includes the ability to jump directly to the top</li></li></ul><li>Infinite Scrolling<br />Context Recognition<br />Part...
Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Toolbar Overload<br />
Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Hide & Seek Menus<br />
Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />
Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Great Design Pattern For<br /><ul><...
  Adjust icon size the most used items are easy to locate and click
  Allow the menu to resize based on screen real-estate to maximize shortcuts
  Use visuals in drop-down menus to aid in quick decision making</li></li></ul><li>Wufoo.com<br />Designing for Infinity –...
  Contextual help only appears when it is relevant
  Eliminates need for external help documentation for users
  Keeps users in the ‘zone’ and doesn’t require leaving the application.</li></li></ul><li>Zimbra<br />Designing for Infin...
Zimbra<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Great Design Pattern For<br /><ul><li>  Pro...
  Keeps user engaged within the application</li></li></ul><li>Context Recognition<br />Distributing Workload<br />Part  5 ...
Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />5 people<br />1 person<br />100%<br />20%<br />
Wikipedia<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />
Wikipedia<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><ul><li>...
  Enables general public to contribute and govern
Works well for collaboration and keeping up with fast moving events</li></li></ul><li>Galaxy Zoo<br />Designing for Infini...
Galaxy Zoo<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><ul><li...
  Provide users simple options to classify objects</li></li></ul><li>Mechanical Turk<br />Designing for Infinity – Dustin ...
Mechanical Turk<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><u...
  Pay for services people would not generally volunteer for</li></li></ul><li>ESP Game<br />Designing for Infinity – Dusti...
ESP Game<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><ul><li>A...
  Use multiple data points to validate reliability of contributions</li></li></ul><li>Distributing Workload<br />Automatio...
Designing for Infinity – Dustin Kirk<br />Automation<br />Manual<br />100%<br />Manual labor is costly<br />
Designing for Infinity – Dustin Kirk<br />Automation<br />Automation<br />Manual<br />20%<br />80%<br />Automation eases m...
Designing for Infinity – Dustin Kirk<br />Automation<br />Automation<br />Manual<br />Crowdsourcing<br />5%<br />80%<br />...
iPhoto Faces<br />Designing for Infinity – Dustin Kirk<br />Automation<br />
iPhoto Faces<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Great Design Pattern For<br /><ul><li>  Augmen...
  Use learning algorithms to identify patterns
  Classify the remaining items automatically
  Allow users to confirm changes and correct mistakes</li></li></ul><li>iPhoto<br />Designing for Infinity – Dustin Kirk<b...
Gmail<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Spam, Spam, & more  Spam<br />
Gmail<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Great Design Pattern For<br /><ul><li>  Reducing info...
  Use learning algorithms to identify patterns
  Prevent unwanted data from appearing to others</li></li></ul><li>Spore<br />Designing for Infinity – Dustin Kirk<br />Au...
Spore<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Great Design Pattern For<br /><ul><li>  Create Unique...
Upcoming SlideShare
Loading in...5
×

Designing for infinity

5,230

Published on

When faced with endless data and the need to manage it, there are a variety of proven design patterns that will help designers create usable, effecient, and effective interfaces. From advanced distributing workload to avoiding information overload, this presentation reviews techniques that are enabling the highly scalable user interfaces of today and tomorrow.

Published in: Design, Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,230
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
149
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide
  • 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
  • Designing for infinity

    1. 1. Designing for Infinity<br />-d- Dustin Kirk<br />www.webmetrics.com<br />
    2. 2. Designing for Infinity – Dustin Kirk<br />Designing for Infinity<br />A bit about me<br />1. I grew up on a ranch in South Dakota<br />2. Background in CS, Psych, & HCI<br />3. Sr. UX Designer at NeustarWebmetrics<br />4. I love this stuff<br />www.dustinkirk.com<br />@Dustin_Kirk<br />ME<br />
    3. 3. Why Infinity?<br />
    4. 4. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />It’s all about usability at scale!<br />
    5. 5. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />Welcome to 1995<br />
    6. 6. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />“It can’t be that bad, everyone does this!”<br />
    7. 7. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />Alright, we’re looking for Spain.<br />
    8. 8. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />487 Countries<br />Country:<br />“Easy, it’s alphabetically sorted!”<br />
    9. 9. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />
    10. 10. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />18 Keystrokes later…<br />
    11. 11. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />488 Countries<br />Country:<br />Don’t do this!<br />
    12. 12. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />Great<br />Usability<br />Bad<br />Small<br />Data<br />Typical Design Patterns<br />
    13. 13. Designing for Infinity – Dustin Kirk<br />Why Infinity?<br />Great<br />Usability<br />Bad<br />Small<br />Data<br />Design Patterns For Infinity<br />
    14. 14. Designing for Infinity – Dustin Kirk<br />Designing for Infinity<br />Design Patterns Covered<br />1. Searching<br />2. Filtering<br />3. Infinite Scrolling<br />4. Context Recognition<br />5. Distributed Workload<br />6. Automation<br />7. Loading Data<br />8. Navigation<br />
    15. 15. Searching<br />Part 1 of 8<br />
    16. 16. Searching<br />“Designing for Infinity 101”<br />Part 1 of 8<br />
    17. 17. iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />
    18. 18. iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />“299,000 apps you’ll never know about.”<br />
    19. 19. iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />Let’s search for flashcards…<br />
    20. 20. iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />1343 Flashcard Apps<br />“Whoa! I’ll only see the first 25”<br />
    21. 21. iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />1343 Flashcard Results<br />A Common Mistake…<br /><ul><li> Relying on search alone</li></li></ul><li>iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />1343 Flashcard Results<br />A Common Mistake…<br /><ul><li> Relying on search alone</li></ul>How would you improve this?<br />
    22. 22. iOS App Store<br />Designing for Infinity – Dustin Kirk<br />Searching<br />1343 Flashcard Results<br />A Common Mistake…<br /><ul><li> Relying on search alone</li></ul>Solution<br /><ul><li> Use Filters too
    23. 23. Sorting becomes a prominent fixture</li></li></ul><li>Searching & Filtering<br />“Designing for Infinity 101”<br />Parts 1 & 2 of 8<br />
    24. 24. Yelp.com<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
    25. 25. Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />92 Results<br />
    26. 26. Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />92 Results<br />Filtering to the rescue!<br />
    27. 27. iOS App Store & Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
    28. 28. Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
    29. 29. Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Searching and Filtering on a smart phone</li></ul>Key Points<br /><ul><li> Use Filtering when you have lots of results
    30. 30. Use Sorting too</li></li></ul><li>Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />What about the map button?<br />
    31. 31. Google maps<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />On a PC you have to manually enter an address, or zoom in to an area.<br />
    32. 32. Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Devices with GPS allow you to bypass entering in your location, over and over and over again.<br />
    33. 33. Yelp on iPhone<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Location based search</li></ul>Key Points<br /><ul><li> Utilize GPS to get current location
    34. 34. Allow for entering in other locations
    35. 35. Search results should be visible on map
    36. 36. Redo search when the user moves the map</li></li></ul><li>Splunk<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
    37. 37. Splunk<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Building complex search queries</li></ul>Key Points<br /><ul><li> Ability to click on text in search results to drill-down further
    38. 38. Ability to create conditionals with the use of a key press + mouse click
    39. 39. Flexible filtering capabilities (time based + categorical based)</li></li></ul><li>Mint.com<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
    40. 40. Mint.com<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Simplifying search queries</li></ul>Key Points<br /><ul><li> Display categorical filters based on the item(s) selected</li></li></ul><li>Amazon Diamond Search<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />
    41. 41. Amazon Diamond Search<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Filter categorical ranges</li></ul>Key Points<br /><ul><li> Allows for setting upper and lower limits
    42. 42. Visual aids teach unfamiliar terms
    43. 43. # of Results is updated in real-time</li></li></ul><li>Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />488 Countries<br />Country:<br />Remember this example?<br />
    44. 44. Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />The modern day solution…<br />
    45. 45. Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Awesome!<br />The modern day solution…<br />
    46. 46. Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solution…<br />
    47. 47. Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solution…<br />
    48. 48. Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solution…<br />
    49. 49. Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li>Selecting a single item from a list</li></ul>Key Points<br /><ul><li>Replaces combo boxes
    50. 50. Replaces check boxes
    51. 51. Allows user to browse as well as filter
    52. 52. Ability to filter on multiple characters
    53. 53. List updates after each character entered
    54. 54. List keeps up to 10 items in view
    55. 55. List scrolls to show everything
    56. 56. Use keyboard arrows move selection up/down</li></li></ul><li>Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Selecting commonly selected items</li></ul>Key Points<br /><ul><li>Combines both filtering and select into one step
    57. 57. Hides within the menu of ‘select all’
    58. 58. Keep to a minimum # of filters</li></li></ul><li>Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Auto-suggest in Gmail for Contact Disambiguation<br />
    59. 59. Gmail<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Close, but it shows only a maximum of 10 items<br />Auto-suggest in Gmail for Contact Disambiguation<br />
    60. 60. iPhone SMS<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Contact Disambiguation</li></ul>Key Points<br /><ul><li> Results are searched in real-time
    61. 61. Contacts show up one time for each method
    62. 62. Search by both contact name & method
    63. 63. Scroll to view more results</li></li></ul><li>Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />?<br />So what about multi-selection?<br />
    64. 64. Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />So what about multi-selection?<br />
    65. 65. Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />1995<br />2011<br />The modern day solution…<br />
    66. 66. Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Sweet!<br />
    67. 67. Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Awesome!<br />
    68. 68. Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />View Selected<br />View All<br />
    69. 69. Facebook<br />Designing for Infinity – Dustin Kirk<br />Searching & Filtering<br />Great Design Pattern For<br /><ul><li> Multi-selection</li></ul>Key Points<br /><ul><li> Ability to filter on multiple characters
    70. 70. List updates after each character entered
    71. 71. List keeps multiple items in view
    72. 72. List scrolls to show everything
    73. 73. Ability to view list of all selected items</li></li></ul><li>Searching & Filtering<br />Infinite Scrolling<br />Part 3 of 8<br />
    74. 74. Gmail<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Again, welcome to 1995<br />
    75. 75. Gmail<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Common Mistake #2<br /><ul><li> Restricting the number of items that can be selected due to pagination</li></li></ul><li>Mint.com<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Common Mistake #2<br /><ul><li> Restricting the number of items that can be selected due to pagination</li></li></ul><li>Splunk<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Common Mistake #2<br /><ul><li> Restricting the number of items that can be selected due to pagination</li></li></ul><li>NeustarWebmetrics<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />
    76. 76. NeustarWebmetrics<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Great Design Pattern For<br /><ul><li> Selectable Data Lists</li></ul>Key Points<br /><ul><li> Enables actions to be taken on ALL items
    77. 77. Asynchronous data loading keeps it fast
    78. 78. Buffers additional data to prevent jerky loading
    79. 79. Calculates total height to prevent jerky scrolling
    80. 80. Track scroll position to support back button use</li></li></ul><li>Bing Images<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Maxes out at 1000 (of 131,000) images<br />
    81. 81. Google Images<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Not necessary<br />
    82. 82. Friendly<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />
    83. 83. Gmail<br />Designing for Infinity – Dustin Kirk<br />Infinite Scrolling<br />Great Design Pattern For<br /><ul><li> Navigating an Infinite Scrolling page</li></ul>Key Points<br /><ul><li> Navigation options float at the edge of the screen above the scrolling content
    84. 84. Includes the ability to jump directly to the top</li></li></ul><li>Infinite Scrolling<br />Context Recognition<br />Part 4 of 8<br />
    85. 85. Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Toolbar Overload<br />
    86. 86. Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Hide & Seek Menus<br />
    87. 87. Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />
    88. 88. Microsoft Word<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Great Design Pattern For<br /><ul><li>Simplifying menus and toolbars</li></ul>Key Points<br /><ul><li> Use context to hide/show content appropriate menus
    89. 89. Adjust icon size the most used items are easy to locate and click
    90. 90. Allow the menu to resize based on screen real-estate to maximize shortcuts
    91. 91. Use visuals in drop-down menus to aid in quick decision making</li></li></ul><li>Wufoo.com<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Great Design Pattern For<br /><ul><li> Providing Help</li></ul>Key Points<br /><ul><li>Helps users in decision making
    92. 92. Contextual help only appears when it is relevant
    93. 93. Eliminates need for external help documentation for users
    94. 94. Keeps users in the ‘zone’ and doesn’t require leaving the application.</li></li></ul><li>Zimbra<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />
    95. 95. Zimbra<br />Designing for Infinity – Dustin Kirk<br />Context Recognition<br />Great Design Pattern For<br /><ul><li> Providing Just-In-Time information/tools</li></ul>Key Points<br /><ul><li> Reduces steps to access additional information
    96. 96. Keeps user engaged within the application</li></li></ul><li>Context Recognition<br />Distributing Workload<br />Part 5 of 8<br />
    97. 97. Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />5 people<br />1 person<br />100%<br />20%<br />
    98. 98. Wikipedia<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />
    99. 99. Wikipedia<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><ul><li> Large scale public projects</li></ul>Key Points<br /><ul><li> Distributes work across people willing to volunteer time and effort
    100. 100. Enables general public to contribute and govern
    101. 101. Works well for collaboration and keeping up with fast moving events</li></li></ul><li>Galaxy Zoo<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />
    102. 102. Galaxy Zoo<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><ul><li> Overcoming weaknesses in computer vision</li></ul>Key Points<br /><ul><li> Take advantage of people’s ability to easily discern objects visually
    103. 103. Provide users simple options to classify objects</li></li></ul><li>Mechanical Turk<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />
    104. 104. Mechanical Turk<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><ul><li> Outsourcing tasks cheaply</li></ul>Key Points<br /><ul><li> Easy way to outsource simple tasks that require a human
    105. 105. Pay for services people would not generally volunteer for</li></li></ul><li>ESP Game<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />
    106. 106. ESP Game<br />Designing for Infinity – Dustin Kirk<br />Distributing Workload<br />Great Design Pattern For<br /><ul><li>Acquiring additional data</li></ul>Key Points<br /><ul><li> Simple tasks can become fun through a social game
    107. 107. Use multiple data points to validate reliability of contributions</li></li></ul><li>Distributing Workload<br />Automation<br />Part 6 of 8<br />
    108. 108. Designing for Infinity – Dustin Kirk<br />Automation<br />Manual<br />100%<br />Manual labor is costly<br />
    109. 109. Designing for Infinity – Dustin Kirk<br />Automation<br />Automation<br />Manual<br />20%<br />80%<br />Automation eases manual input<br />
    110. 110. Designing for Infinity – Dustin Kirk<br />Automation<br />Automation<br />Manual<br />Crowdsourcing<br />5%<br />80%<br />15%<br />All together they reduce labor even further<br />
    111. 111. iPhoto Faces<br />Designing for Infinity – Dustin Kirk<br />Automation<br />
    112. 112. iPhoto Faces<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Great Design Pattern For<br /><ul><li> Augmenting manual tasks</li></ul>Key Points<br /><ul><li> Enable people to classify items
    113. 113. Use learning algorithms to identify patterns
    114. 114. Classify the remaining items automatically
    115. 115. Allow users to confirm changes and correct mistakes</li></li></ul><li>iPhoto<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Facebook should <br />auto-tag photos<br />
    116. 116. Gmail<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Spam, Spam, & more Spam<br />
    117. 117. Gmail<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Great Design Pattern For<br /><ul><li> Reducing information overload</li></ul>Key Points<br /><ul><li> Enable people to provide identify unwanted data
    118. 118. Use learning algorithms to identify patterns
    119. 119. Prevent unwanted data from appearing to others</li></li></ul><li>Spore<br />Designing for Infinity – Dustin Kirk<br />Automation<br />
    120. 120. Spore<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Great Design Pattern For<br /><ul><li> Create Unique Experiences</li></ul>Key Points<br /><ul><li> Reduce upfront work by using procedural algorithms
    121. 121. Provide users with customization tools
    122. 122. Enables diversity by generating music, movement, & texturing on the fly</li></li></ul><li>Pandora Radio<br />Designing for Infinity – Dustin Kirk<br />Automation<br />
    123. 123. Pandora Radio<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Need more input!<br />
    124. 124. Netflix<br />Designing for Infinity – Dustin Kirk<br />Automation<br />
    125. 125. Netflix<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Relying heavily on automated suggestions limits discoverability.<br />
    126. 126. Amazon.com<br />Designing for Infinity – Dustin Kirk<br />Automation<br />
    127. 127. Amazon.com<br />Designing for Infinity – Dustin Kirk<br />Automation<br />Great Design Pattern For<br /><ul><li> Enable discovery through recommendations</li></ul>Key Points<br /><ul><li> Suggestions should augment searching and filtering tools</li></li></ul><li>Automation<br />Loading Data<br />Part 7 of 8<br />
    128. 128. Delicious Library<br />Designing for Infinity – Dustin Kirk<br />Loading Data<br />
    129. 129. Delicious Library<br />Designing for Infinity – Dustin Kirk<br />Loading Data<br />Great Design Pattern For<br /><ul><li> Avoiding work duplication</li></ul>Key Points<br /><ul><li> Use APIs to pull in 3rd party data</li></li></ul><li>Roambi<br />Designing for Infinity – Dustin Kirk<br />Loading Data<br />
    130. 130. Mechanical Turk<br />Designing for Infinity – Dustin Kirk<br />Loading Data<br />Great Design Pattern For<br /><ul><li> Bulk loading data</li></ul>Key Points<br /><ul><li> Use pattern recognition to identify data structures
    131. 131. Automate data importing
    132. 132. Provide tools to make adjustments and correct errors</li></li></ul><li>Loading Data<br />Navigation<br />Part 8 of 8<br />
    133. 133. Google Finance<br />Designing for Infinity – Dustin Kirk<br />Navigation<br />
    134. 134. Google Finance<br />Designing for Infinity – Dustin Kirk<br />Navigation<br />Great Design Pattern For<br /><ul><li> Navigating Timelines</li></ul>Key Points<br /><ul><li> Ability to see the overall timeline
    135. 135. Ability to set zoom level (day, month, year, custom)
    136. 136. Secondary view showing zoomed in timeline</li></li></ul><li>Microsoft Pivot<br />Designing for Infinity – Dustin Kirk<br />Navigation<br />
    137. 137. Microsoft Pivot<br />Designing for Infinity – Dustin Kirk<br />Navigation<br />Great Design Pattern For<br /><ul><li> Exploring Data</li></ul>Key Points<br /><ul><li> Ability to visual all data types using bar chart
    138. 138. Ability to filter data categories, choose data source to sort, and ability to zoom
    139. 139. Ability to represent all data in a visual manner</li></li></ul><li>Windows Media Center<br />Designing for Infinity – Dustin Kirk<br />Navigation<br />Great Design Pattern For<br /><ul><li> Navigating time linearly</li></ul>Key Points<br /><ul><li> Accelerates scrolling the longer you hold a button down
    140. 140. Useful when control options are limited
    141. 141. Provides a broader view of time as scrolling speeds up</li></li></ul><li>iPhone Contacts<br />Designing for Infinity – Dustin Kirk<br />Navigation<br />Great Design Pattern For<br /><ul><li> Navigating alphabetically</li></ul>Key Points<br /><ul><li> Floating index layer allows jumping to a letter
    142. 142. List updates in real-time
    143. 143. Heading always remains at the top
    144. 144. Touch enables fast and slow scrolling</li></li></ul><li>Navigating<br />Concluding Notes<br />
    145. 145. Designing for Infinity – Dustin Kirk<br />Concluding Notes<br />Patterns Covered<br />1. Searching<br />2. Filtering<br />3. Infinite Scrolling<br />4. Context Recognition<br />5. Distributed Workload<br />6. Automation<br />7. Loading Data<br />8. Navigation<br />
    146. 146. iTunes<br />Designing for Infinity – Dustin Kirk<br />Concluding Notes<br />
    147. 147. Designing for Infinity – Dustin Kirk<br />Concluding Notes<br />Takeaway Tips<br />1. When designing UIs, think about limits<br />2. Utilize patterns that have been proven by others<br />3. Keep the innovation going and find new patterns<br />View these slides online and share them with others<br />www.dustinkirk.com/infinity/<br />@Dustin_Kirk<br />
    148. 148. Designing for Infinity<br />-d- Dustin Kirk<br />www.webmetrics.com<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×