Designing for infinity

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!


Country:

488 Countries

Welcome to 1995


Country:

488 Countries

“It can’t be that bad, everyone does this!”


Country:

488 Countries

Alright, we’re looking for Spain.


Country:

487 Countries

“Easy, it’s alphabetically sorted!”


Country:

488 Countries


Country:

488 Countries

18 Keystrokes later…


Country:

488 Countries

Don’t do this!


Data

Typical Design Patterns

Bad

Great

Small

Usability


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


“299,000 apps you’ll never know about.”


Let’s search for flashcards…


1343 Flashcard Apps

“Whoa! I’ll only see the first 25”


A Common Mistake…• Relying on search alone

1343 Flashcard Results




How would you improve this?



Solution• Use Filters too• Sorting becomes a prominent fixture


Searching & Filtering

Parts 1 & 2 of 8

“Designing for Infinity 101”

Yelp.comDesigning for Infinity – Dustin Kirk


Yelp on iPhoneDesigning for Infinity – Dustin Kirk

92 Results



Filtering to the rescue!

92 Results


iOS App Store & Yelp on iPhoneDesigning for Infinity – Dustin Kirk


Great Design Pattern For• Searching and Filtering on a smart phone

Key Points• Use Filtering when you have lots of results• Use Sorting too




What about the map button?



Devices with GPS allow you to bypass entering in your

location, over and over and over again.


Google mapsDesigning for Infinity – Dustin Kirk

On a PC you have to manually enter an

address, or zoom in to an area.



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


SplunkDesigning for Infinity – Dustin Kirk


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)


Mint.comDesigning for Infinity – Dustin Kirk


Mint.comDesigning for Infinity – Dustin Kirk

Great Design Pattern For• Simplifying search queries

Key Points• Display categorical filters based on the item(s) selected


Amazon Diamond SearchDesigning for Infinity – Dustin Kirk


Amazon Diamond SearchDesigning for Infinity – Dustin Kirk


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


Country:

488 Countries

Remember this example?

GmailDesigning for Infinity – Dustin Kirk


The modern day solution…




Awesome!




1995 2011



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



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



Auto-suggest in Gmail for Contact Disambiguation



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




So what about multi-selection?

?



So what about multi-selection?

1995

FacebookDesigning for Infinity – Dustin Kirk


1995 2011




Sweet!



Awesome!



View SelectedView All



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



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


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


Hide & Seek Menus

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



100% 20%

5 people1 person

WikipediaDesigning for Infinity – Dustin Kirk


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


Galaxy ZooDesigning for Infinity – Dustin Kirk


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


Mechanical TurkDesigning for Infinity – Dustin Kirk


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


ESP GameDesigning for Infinity – Dustin Kirk


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


Automation

Part 6 of 8



Automation

100%

Manual

Manual labor is costly


Automation

20% 80%

AutomationManual

Automation eases manual input


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

Designing for infinity

Design

Transcript of Designing for infinity