Designing For Infinity - Abridged Version
Upcoming SlideShare
Loading in...5
×
 

Designing For Infinity - Abridged Version

on

  • 1,336 views

As the amount of data that one interacts with increases, the usability of the interface often decreases. These slides contain design patterns which either maintain their usability as data increases or ...

As the amount of data that one interacts with increases, the usability of the interface often decreases. These slides contain design patterns which either maintain their usability as data increases or even improve (ie: recommendation engines).

Think about the standard drop down list companies use for selecting your country when registering for a website. As the number of items in the selection list increases, the amount of time it takes to find an item also increases. While keyboard shortcuts such as typing the first letter exist, for countries like Spain, it takes 18 keystrokes to finally select it. This presentation identifies more efficient patterns that allow users to work with large amounts of data efficiently.

Statistics

Views

Total Views
1,336
Views on SlideShare
1,333
Embed Views
3

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 3

https://www.linkedin.com 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • As the amount of data that one interacts with increases, the usability decreases. Think about the standard drop down list companies use for selecting your country when registering for a website. As the number of items in the selection list increases, the amount of time it takes to find an item also increases. While keyboard shortcuts such as typing the first letter exist, for countries like Spain, it takes 18 keystrokes to finally select it. This presentation identifies more efficient patterns that allow users to work with large amounts of data efficiently.
  • The following design patterns have been selected as they maintain their usability or become increasingly better (think recommendation engines) as the amount of data increases.
  • - 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)
  • 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
  • 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
  • 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
  • Spore’s characters are created by players and texture mapping, character movement, and music are all created based on a system of rules
  • Players describe a photo and earn points when the person they play with matches their descriptions
  • - Auto-detects data key value pairs from 3rd party sources and excel files
  • - 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
  • 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 informationtagging (play-lists)filterssearchingsortingrecommendation engine

Designing For Infinity - Abridged Version Designing For Infinity - Abridged Version Presentation Transcript

  • Designing for Infinity
    UI Patterns for working with Big Data
    -d- Dustin Kirk
    www.dustinkirk.com
    @Dustin_Kirk
    www.webmetrics.com
  • Designing for Infinity – Dustin Kirk
    Why Infinity?
    Great
    Usability
    Bad
    Small
    Data
    Typical Design Patterns
  • Designing for Infinity – Dustin Kirk
    Why Infinity?
    Great
    Usability
    Bad
    Small
    Data
    Design Patterns For Big Data
  • Designing for Infinity – Dustin Kirk
    Designing for Infinity
    Design Patterns Covered
    1. Searching
    2. Filtering
    3. Infinite Scrolling
    4. Context Recognition
    5. Distributed Workload
    6. Automation
    7. Loading Data
    8. Navigation
  • Searching & Filtering
    Parts 1 & 2 of 8
  • Yelp on iPhone
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Searching and Filtering on a smart phone
    Key Points
    • Use Filtering when you have lots of results
    • Use Sorting too
  • Yelp on iPhone
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Location based search
    Key Points
    • Utilize GPS to get current location
    • Allow for entering in other locations
    • Search results should be visible on map
    • Redo search when the user moves the map
  • Splunk
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Building complex search queries
    Key Points
    • Ability to click on text in search results to drill-down further
    • Ability to create conditionals with the use of a key press + mouse click
    • Flexible filtering capabilities (time based + categorical based)
  • Mint.com
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Simplifying search queries
    Key Points
    • Display categorical filters based on the item(s) selected
  • Amazon Diamond Search
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Filter categorical ranges
    Key Points
    • Allows for setting upper and lower limits
    • Visual aids teach unfamiliar terms
    • # of Results is updated in real-time
  • Gmail
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Selecting a single item from a list
    Key Points
    • Replaces combo boxes
    • 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
  • Gmail
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Selecting commonly selected items
    Key Points
    • Combines both filtering and select into one step
    • Hides within the menu of ‘select all’
    • Keep to a minimum # of filters
  • Gmail
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Auto-suggest in Gmail for Contact Disambiguation
  • Gmail
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Close, but it shows only a maximum of 10 items
    Auto-suggest in Gmail for Contact Disambiguation
  • iPhone SMS
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Contact Disambiguation
    Key Points
    • Results are searched in real-time
    • Contacts show up one time for each method
    • Search by both contact name & method
    • Scroll to view more results
  • Facebook
    Designing for Infinity – Dustin Kirk
    Searching & Filtering
    Great Design Pattern For
    • Multi-selection
    Key Points
    • Ability to filter on multiple characters
    • 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
  • Infinite Scrolling
    Part 3 of 8
  • NeustarWebmetrics
    Designing for Infinity – Dustin Kirk
    Infinite Scrolling
    Great Design Pattern For
    • Selectable Data Lists
    Key Points
    • Enables actions to be taken on ALL items
    • 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
  • Gmail
    Designing for Infinity – Dustin Kirk
    Infinite Scrolling
    Great Design Pattern For
    • Navigating an Infinite Scrolling page
    Key Points
    • Navigation options float at the edge of the screen above the scrolling content
    • Includes the ability to jump directly to the top
  • Context Recognition
    Part 4 of 8
  • Microsoft Word
    Designing for Infinity – Dustin Kirk
    Context Recognition
    Great Design Pattern For
    • Simplifying menus and toolbars
    Key Points
    • Use context to hide/show content appropriate menus
    • 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
  • Wufoo.com
    Designing for Infinity – Dustin Kirk
    Context Recognition
    Great Design Pattern For
    • Providing Help
    Key Points
    • Helps users in decision making
    • 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.
  • Zimbra
    Designing for Infinity – Dustin Kirk
    Context Recognition
    Great Design Pattern For
    • Providing Just-In-Time information/tools
    Key Points
    • Reduces steps to access additional information
    • Keeps user engaged within the application
  • Distributing Workload
    Part 5 of 8
  • Wikipedia
    Designing for Infinity – Dustin Kirk
    Distributing Workload
    Great Design Pattern For
    • Large scale public projects
    Key Points
    • Distributes work across people willing to volunteer time and effort
    • Enables general public to contribute and govern
    • Works well for collaboration and keeping up with fast moving events
  • Galaxy Zoo
    Designing for Infinity – Dustin Kirk
    Distributing Workload
    Great Design Pattern For
    • Overcoming weaknesses in computer vision
    Key Points
    • Take advantage of people’s ability to easily discern objects visually
    • Provide users simple options to classify objects
  • Mechanical Turk
    Designing for Infinity – Dustin Kirk
    Distributing Workload
    Great Design Pattern For
    • Outsourcing tasks cheaply
    Key Points
    • Easy way to outsource simple tasks that require a human
    • Pay for services people would not generally volunteer for
  • ESP Game
    Designing for Infinity – Dustin Kirk
    Distributing Workload
    Great Design Pattern For
    • Acquiring additional data
    Key Points
    • Simple tasks can become fun through a social game
    • Use multiple data points to validate reliability of contributions
  • Automation
    Part 6 of 8
  • iPhoto Faces
    Designing for Infinity – Dustin Kirk
    Automation
    Great Design Pattern For
    • Augmenting manual tasks
    Key Points
    • Enable people to classify items
    • Use learning algorithms to identify patterns
    • Classify the remaining items automatically
    • Allow users to confirm changes and correct mistakes
  • Gmail
    Designing for Infinity – Dustin Kirk
    Automation
    Great Design Pattern For
    • Reducing information overload
    Key Points
    • Enable people to provide identify unwanted data
    • Use learning algorithms to identify patterns
    • Prevent unwanted data from appearing to others
  • Spore
    Designing for Infinity – Dustin Kirk
    Automation
    Great Design Pattern For
    • Create Unique Experiences
    Key Points
    • Reduce upfront work by using procedural algorithms
    • Provide users with customization tools
    • Enables diversity by generating music, movement, & texturing on the fly
  • Amazon.com
    Designing for Infinity – Dustin Kirk
    Automation
    Great Design Pattern For
    • Enable discovery through recommendations
    Key Points
    • Suggestions should augment searching and filtering tools
  • Loading Data
    Part 7 of 8
  • Delicious Library
    Designing for Infinity – Dustin Kirk
    Loading Data
    Great Design Pattern For
    • Avoiding work duplication
    Key Points
    • Use APIs to pull in 3rd party data
  • RoamBi
    Designing for Infinity – Dustin Kirk
    Loading Data
    Great Design Pattern For
    • Bulk loading data
    Key Points
    • Use pattern recognition to identify data structures
    • Automate data importing
    • Provide tools to make adjustments and correct errors
  • Navigation
    Part 8 of 8
  • Google Finance
    Designing for Infinity – Dustin Kirk
    Navigation
    Great Design Pattern For
    • Navigating Timelines
    Key Points
    • Ability to see the overall timeline
    • Ability to set zoom level (day, month, year, custom)
    • Secondary view showing zoomed in timeline
  • Microsoft Pivot
    Designing for Infinity – Dustin Kirk
    Navigation
    Great Design Pattern For
    • Exploring Data
    Key Points
    • Ability to visual all data types using bar chart
    • Ability to filter data categories, choose data source to sort, and ability to zoom
    • Ability to represent all data in a visual manner
  • Windows Media Center
    Designing for Infinity – Dustin Kirk
    Navigation
    Great Design Pattern For
    • Navigating time linearly
    Key Points
    • Accelerates scrolling the longer you hold a button down
    • Useful when control options are limited
    • Provides a broader view of time as scrolling speeds up
  • iPhone Contacts
    Designing for Infinity – Dustin Kirk
    Navigation
    Great Design Pattern For
    • Navigating alphabetically
    Key Points
    • Floating index layer allows jumping to a letter
    • List updates in real-time
    • Heading always remains at the top
    • Touch enables fast and slow scrolling
  • Concluding Notes
  • Designing for Infinity – Dustin Kirk
    Concluding Notes
    Patterns Covered
    1. Searching
    2. Filtering
    3. Infinite Scrolling
    4. Context Recognition
    5. Distributed Workload
    6. Automation
    7. Loading Data
    8. Navigation
  • iTunes
    Designing for Infinity – Dustin Kirk
    Concluding Notes
  • Designing for Infinity – Dustin Kirk
    Concluding Notes
    Takeaway Tips
    1. Think about the data limits of the all the patterns you use
    2. Utilize patterns that have been proven by others
    3. Keep the innovation going and improve onpatterns
    View these slides online and share them with others
    www.dustinkirk.com/infinity/
    @Dustin_Kirk
  • Dustin Kirk is a Senior User Experience Designer at Neustar in the Webmetrics product group. He earned a B.S. in Computer Science and Psychology at Rensselaer as well as completed a M.S. in Human Computer Interaction. Dustin’s passion lies in utilizing his multi-disciplinary background and interests to make user interfaces highly efficient and effective while delivering great user experiences.
    www.dustinkirk.com
    @Dustin_Kirk
    www.webmetrics.com