designing for infinity
DESCRIPTION
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.TRANSCRIPT
Designing for Infinity
-d- Dustin Kirk
www.webmetrics.com
1. I grew up on a ranch in South Dakota
2. I started building websites back in 1995
3. Background in CS, Psych, & HCI
4. Sr. UX Designer at Neustar Webmetrics
A bit about me
Designing for InfinityDesigning for Infinity – Dustin Kirk
www.dustinkirk.com
@Dustin_KirkME
Why Infinity?
Why Infinity?Designing for Infinity – Dustin Kirk
It’s all about usability at scale!
Why Infinity?Designing for Infinity – Dustin Kirk
Country:
488 Countries
Welcome to 1995
Why Infinity?Designing for Infinity – Dustin Kirk
Country:
488 Countries
“It can’t be that bad, everyone does this!”
Why Infinity?Designing for Infinity – Dustin Kirk
Country:
488 Countries
Alright, we’re looking for Spain.
Why Infinity?Designing for Infinity – Dustin Kirk
Country:
487 Countries
“Easy, it’s alphabetically sorted!”
Why Infinity?Designing for Infinity – Dustin Kirk
Country:
488 Countries
Why Infinity?Designing for Infinity – Dustin Kirk
Country:
488 Countries
18 Keystrokes later…
Why Infinity?Designing for Infinity – Dustin Kirk
Country:
488 Countries
Don’t do this!
Why Infinity?Designing for Infinity – Dustin Kirk
Data
Typical Design Patterns
Bad
Great
Small
Usability
Why Infinity?Designing for Infinity – Dustin Kirk
Data
Usability
Design Patterns For Infinity
Bad
Great
Small
1. Searching
2. Filtering
3. Infinite Scrolling
4. Context Recognition
5. Distributed Workload
6. Automation
7. Loading Data
8. Navigation
Design Patterns Covered
Designing for InfinityDesigning for Infinity – Dustin Kirk
Searching
Part 1 of 8
Searching
Part 1 of 8
“Designing for Infinity 101”
iOS App StoreSearchingDesigning for Infinity – Dustin Kirk
iOS App StoreSearchingDesigning for Infinity – Dustin Kirk
“299,000 apps you’ll never know about.”
iOS App StoreSearchingDesigning for Infinity – Dustin Kirk
Let’s search for flashcards…
iOS App StoreSearchingDesigning for Infinity – Dustin Kirk
1343 Flashcard Apps
“Whoa! I’ll only see the first 25”
iOS App StoreSearchingDesigning for Infinity – Dustin Kirk
A Common Mistake…• Relying on search alone
1343 Flashcard Results
iOS App StoreSearchingDesigning for Infinity – Dustin Kirk
A Common Mistake…• Relying on search alone
1343 Flashcard Results
How would you improve this?
iOS App StoreSearchingDesigning for Infinity – Dustin Kirk
A Common Mistake…• Relying on search alone
Solution• Use Filters too• Sorting becomes a prominent fixture
1343 Flashcard Results
Searching & Filtering
Parts 1 & 2 of 8
“Designing for Infinity 101”
Yelp.comDesigning for Infinity – Dustin Kirk
Searching & Filtering
Yelp on iPhoneDesigning for Infinity – Dustin Kirk
92 Results
Searching & Filtering
Yelp on iPhoneDesigning for Infinity – Dustin Kirk
Filtering to the rescue!
92 Results
Searching & Filtering
iOS App Store & Yelp on iPhoneDesigning for Infinity – Dustin Kirk
Searching & Filtering
Yelp on iPhoneDesigning 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 iPhoneDesigning for Infinity – Dustin Kirk
Searching & Filtering
Yelp on iPhoneDesigning for Infinity – Dustin Kirk
What about the map button?
Searching & Filtering
Yelp on iPhoneDesigning for Infinity – Dustin Kirk
Devices with GPS allow you to bypass entering in your
location, over and over and over again.
Searching & Filtering
Google mapsDesigning for Infinity – Dustin Kirk
On a PC you have to manually enter an
address, or zoom in to an area.
Searching & Filtering
Yelp on iPhoneDesigning for Infinity – Dustin Kirk
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
Searching & Filtering
SplunkDesigning for Infinity – Dustin Kirk
Searching & Filtering
SplunkDesigning for Infinity – Dustin Kirk
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)
Searching & Filtering
Mint.comDesigning for Infinity – Dustin Kirk
Searching & Filtering
Mint.comDesigning for Infinity – Dustin Kirk
Great Design Pattern For• Simplifying search queries
Key Points• Display categorical filters based on the item(s) selected
Searching & Filtering
Amazon Diamond SearchDesigning for Infinity – Dustin Kirk
Searching & Filtering
Amazon Diamond SearchDesigning 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
Designing for Infinity – Dustin Kirk
Searching & Filtering
Country:
488 Countries
Remember this example?
GmailDesigning for Infinity – Dustin Kirk
Searching & Filtering
The modern day solution…
GmailDesigning for Infinity – Dustin Kirk
Searching & Filtering
The modern day solution…
Awesome!
GmailDesigning for Infinity – Dustin Kirk
Searching & Filtering
The modern day solution…
1995 2011
GmailDesigning for Infinity – Dustin Kirk
Searching & Filtering
1995 2011
The modern day solution…
GmailDesigning for Infinity – Dustin Kirk
Searching & Filtering
1995 2011
The modern day solution…
GmailDesigning 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
GmailDesigning 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
GmailDesigning for Infinity – Dustin Kirk
Searching & Filtering
Auto-suggest in Gmail for Contact Disambiguation
GmailDesigning for Infinity – Dustin Kirk
Searching & Filtering
Close, but it shows only a maximum of 10 items
Auto-suggest in Gmail for Contact Disambiguation
iPhone SMSDesigning for Infinity – Dustin Kirk
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
Searching & Filtering
Designing for Infinity – Dustin Kirk
Searching & Filtering
So what about multi-selection?
?
Designing for Infinity – Dustin Kirk
Searching & Filtering
So what about multi-selection?
1995
FacebookDesigning for Infinity – Dustin Kirk
Searching & Filtering
1995 2011
The modern day solution…
FacebookDesigning for Infinity – Dustin Kirk
Searching & Filtering
Sweet!
FacebookDesigning for Infinity – Dustin Kirk
Searching & Filtering
Awesome!
FacebookDesigning for Infinity – Dustin Kirk
Searching & Filtering
View SelectedView All
FacebookDesigning 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
Searching & Filtering
GmailDesigning for Infinity – Dustin Kirk
Infinite Scrolling
Again, welcome to 1995
GmailInfinite ScrollingDesigning for Infinity – Dustin Kirk
Common Mistake #2• Restricting the number of items that can be selected due to pagination
Mint.comInfinite ScrollingDesigning for Infinity – Dustin Kirk
Common Mistake #2• Restricting the number of items that can be selected due to pagination
Neustar WebmetricsDesigning for Infinity – Dustin Kirk
Infinite Scrolling
Neustar WebmetricsDesigning 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
Bing ImagesInfinite ScrollingDesigning for Infinity – Dustin Kirk
Maxes out at 1000 (of 131,000) images
Google ImagesDesigning for Infinity – Dustin Kirk
Infinite Scrolling
Not necessary
FriendlyDesigning for Infinity – Dustin Kirk
Infinite Scrolling
GmailDesigning for Infinity – Dustin Kirk
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
Infinite Scrolling
Context Recognition
Part 4 of 8
Infinite Scrolling
Microsoft WordContext RecognitionDesigning for Infinity – Dustin Kirk
Toolbar Overload
Microsoft WordContext RecognitionDesigning for Infinity – Dustin Kirk
Hide & Seek Menus
Microsoft WordContext RecognitionDesigning for Infinity – Dustin Kirk
Microsoft WordDesigning for Infinity – Dustin Kirk
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
Context Recognition
Wufoo.comDesigning for Infinity – Dustin Kirk
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.
Context Recognition
ZimbraContext RecognitionDesigning for Infinity – Dustin Kirk
ZimbraDesigning 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
Context Recognition
Designing for Infinity – Dustin Kirk
Distributing Workload
100% 20%
5 people1 person
WikipediaDesigning for Infinity – Dustin Kirk
Distributing Workload
WikipediaDesigning for Infinity – Dustin Kirk
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
Distributing Workload
Galaxy ZooDesigning for Infinity – Dustin Kirk
Distributing Workload
Galaxy ZooDesigning for Infinity – Dustin Kirk
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
Distributing Workload
Mechanical TurkDesigning for Infinity – Dustin Kirk
Distributing Workload
Mechanical TurkDesigning for Infinity – Dustin Kirk
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
Distributing Workload
ESP GameDesigning for Infinity – Dustin Kirk
Distributing Workload
ESP GameDesigning for Infinity – Dustin Kirk
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
Distributing Workload
Automation
Part 6 of 8
Distributing Workload
Designing for Infinity – Dustin Kirk
Automation
100%
Manual
Manual labor is costly
Designing for Infinity – Dustin Kirk
Automation
20% 80%
AutomationManual
Automation eases manual input
Designing for Infinity – Dustin Kirk
Automation
5% 80%
AutomationManual
15%
Crowdsourcing
All together they reduce labor even further
iPhoto FacesDesigning for Infinity – Dustin Kirk
Automation
iPhoto FacesAutomationDesigning for Infinity – Dustin Kirk
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
iPhotoAutomationDesigning for Infinity – Dustin Kirk
Facebook should auto-tag photos
GmailAutomationDesigning for Infinity – Dustin Kirk
Spam, Spam, & more Spam
GmailAutomationDesigning for Infinity – Dustin Kirk
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
SporeDesigning for Infinity – Dustin Kirk
Automation
SporeAutomationDesigning for Infinity – Dustin Kirk
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
Pandora RadioDesigning for Infinity – Dustin Kirk
Automation
Pandora RadioAutomationDesigning for Infinity – Dustin Kirk
Need more input!
NetflixDesigning for Infinity – Dustin Kirk
Automation
NetflixAutomationDesigning for Infinity – Dustin Kirk
Relying heavily on automated suggestions limits discoverability.
Amazon.comDesigning for Infinity – Dustin Kirk
Automation
Amazon.comAutomationDesigning for Infinity – Dustin Kirk
Great Design Pattern For• Enable discovery through recommendations
Key Points• Suggestions should augment searching and filtering tools
Loading Data
Part 7 of 8
Automation
Delicious LibraryDesigning for Infinity – Dustin Kirk
Loading Data
Delicious LibraryLoading DataDesigning for Infinity – Dustin Kirk
Great Design Pattern For• Avoiding work duplication
Key Points• Use APIs to pull in 3rd party data
RoambiDesigning for Infinity – Dustin Kirk
Loading Data
Mechanical TurkLoading DataDesigning for Infinity – Dustin Kirk
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
Loading Data
Google FinanceDesigning for Infinity – Dustin Kirk
Navigation
Google FinanceNavigationDesigning for Infinity – Dustin Kirk
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 PivotDesigning for Infinity – Dustin Kirk
Navigation
Microsoft PivotNavigationDesigning for Infinity – Dustin Kirk
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 CenterNavigationDesigning for Infinity – Dustin Kirk
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 ContactsNavigationDesigning for Infinity – Dustin Kirk
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
Navigating
1. Searching
2. Filtering
3. Infinite Scrolling
4. Context Recognition
5. Distributed Workload
6. Automation
7. Loading Data
8. Navigation
Patterns Covered
Concluding NotesDesigning for Infinity – Dustin Kirk
iTunesConcluding NotesDesigning for Infinity – Dustin Kirk
1. When designing UIs, think about limits
2. Utilize patterns that have been proven by others
3. Keep the innovation going and find new patterns
View these slides online and share them with otherswww.dustinkirk.com/infinity/
@Dustin_Kirk
Takeaway Tips
Concluding NotesDesigning for Infinity – Dustin Kirk
Designing for Infinity
-d- Dustin Kirk
www.webmetrics.com