Designing For Infinity - Abridged Version

Designing for Infinity

-d- Dustin Kirk

www.webmetrics.com

www.dustinkirk.com

@Dustin_Kirk

UI Patterns for working with Big Data

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 Big Data

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 & Filtering

Parts 1 & 2 of 8

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


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


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

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


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

GmailDesigning for Infinity – Dustin Kirk


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


FacebookDesigning for Infinity – Dustin Kirk


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

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


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

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

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

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

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

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

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 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

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

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

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

Delicious LibraryLoading DataDesigning for Infinity – Dustin Kirk

Great Design Pattern For• Avoiding work duplication

Key Points• Use APIs to pull in 3rd party data

RoamBiLoading 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

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 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

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. 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 on patterns

View these slides online and share them with otherswww.dustinkirk.com/infinity/

@Dustin_Kirk

Takeaway Tips

Concluding NotesDesigning for Infinity – Dustin Kirk

www.webmetrics.com

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

Designing For Infinity - Abridged Version

Design

Transcript of Designing For Infinity - Abridged Version