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!

Typical Design Patterns

Usability

Design Patterns For Infinity

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

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

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?

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

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

Automation

Manual

Manual labor is costly

Automation

20% 80%

AutomationManual

Automation eases manual input

Automation

5% 80%

AutomationManual

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

Infinity Connect Guide for Administrators Introduction

ManWhoKnew Infinity O INFINITY LLC. ALL

Designing For Infinity - Abridged Version

Infinity Connect Guide for Administrators · Introduction 4 Infinity Connect clients 4 ... Installing the Infinity Connect mobile client for iOS 12 Accessing a conference or making

Force Five Infinity Air Winches 5 Infinity Air Winch… · Force Five Infinity Utility Air Winches Specifications & Performance Tip: Infinity winches are rated at Top Layer. The Infinity

Instructions for use Infinity Acute Care System...2 Instructions for use Infinity Acute Care System – Infinity M540 SW VG4.n Typographical conventions Any text shown on the screen

Infinity] Conditional Acceptance for Value (CA4V)

Supplement Infinity Delta Series · Supplement – Infinity® Delta Series Software VF10.1 11 Supplement for Infinity Delta Series Software Temperature Display All temperature readings

· Hyundai i10 Hyundai ... Hyundai Sante Fe Hyundai Trajet Middle row Hyundai Trajet rear Hyundai Tuscan Hyundai veloster Infinity EX Infinity FX Infinity G Infinity M Infinity Q50

Infinity-project.org The Institute for Engineering Education Engineering Education for today’s classroom. The Infinity Project SM Bringing Engineering.

FIJI ISLANDSbourne.flightcentre.com.au/infinity/brochures/Oz Infinity...FIJI ISLANDS The Yasawas for backpackers & alternative travellers Reservations made by Infinity Holidays, booked

Customers For Life Infinity Grid Presentation

More infinity for a better finitism

INFINITY ANALYZE Software Quick Start Guide v4.0.2 - …...INFINITY ANALYZE Software Quick Start Guide - v4.0.2 Thank you for purchasing a Lumenera INFINITY camera, which includes

Infinity pool, infinity view

AdderLink Infinity and Infinity dual

Infinity Start System - HS Sports · 1 Introduction Thank you for purchasing Colorado Time Systems’ Infinity start system. Its multi-purpose design makes the Infinity perfect for

INFINITY LINE - INFINITY PLUS Art 119i 119+

Genetic Algorithm for Robust h Infinity

Infinity Station (P05) Infinity (A86)...5 Комплект поставки Элемент PadFone InfinityPadFone Infinity Station Набор 2-в-1 PadFone Infinity • • PadFone