Designing For Infinity - Abridged Version
-
Upload
dustinkirk -
Category
Design
-
view
1.167 -
download
3
description
Transcript of 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
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
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
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
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
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
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
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
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
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
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
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
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
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