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.
2. Designing for Infinity – Dustin Kirk Designing for Infinity A bit about me 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 www.dustinkirk.com @Dustin_Kirk ME
25. Yelp on iPhone Designing for Infinity – Dustin Kirk Searching & Filtering 92 Results
26. Yelp on iPhone Designing for Infinity – Dustin Kirk Searching & Filtering 92 Results Filtering to the rescue!
27. iOS App Store & Yelp on iPhone Designing for Infinity – Dustin Kirk Searching & Filtering
28. Yelp on iPhone Designing for Infinity – Dustin Kirk Searching & Filtering
29.
30.
31. Yelp on iPhone Designing for Infinity – Dustin Kirk Searching & Filtering Devices with GPS allow you to bypass entering in your location, over and over and over again.
32. Google maps Designing for Infinity – Dustin Kirk Searching & Filtering On a PC you have to manually enter an address, or zoom in to an area.
59. Gmail Designing for Infinity – Dustin Kirk Searching & Filtering Close, but it shows only a maximum of 10 items Auto-suggest in Gmail for Contact Disambiguation
147. Designing for Infinity – Dustin Kirk Concluding Notes Takeaway Tips 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 others www.dustinkirk.com/infinity/ @Dustin_Kirk
Yelp is a great website example that showcases many of the techniques we’ll see repeated in UI’s dealing with Big Data later on. It’s Search functionality is it’s primary means of navigation It provides sorting options It provides filtering capabilities (including contextual category filters) It provides a rating system It allows you to search using the mapSearching and sorting options are plentiful and important when a user is in discovery mind-state
Splunk is fantastic and utilizes many patterns for tackeling big data.- Smart about importing data, auto recognition of key-value pairs, great tool for mapping custom fields- Great UI for searching logs and time-based information- Click on text in log entries to narrow down search results- It suggests ‘interesting fields’ and allows you to customize your own list- A big shout out to Nick Mealy, Principal UI Designer at Splunk, for his excellent work
Mint.com is great for a number of reasons, but in regards to searching and filtering, I like how they provide filters based on the item that is selected.
Amazon Diamond Search allows the user to filter through over 12000 diamonds.An excellent model when the needs are right Items are classified by categories which are discrete values, and can be represented visually
- This is a great example of a scalable UI for applying and displaying tags (labels)
Create shortcuts of common actions.For example combine filtering and selecting into a single step using a drop-down menu for selection.
Same as the iPhone SMS appAuto-suggest is highly useful when creating scalable user interfaces-Auto-suggest prevents misspelling Allows users to select the appropriate item quickly Allows the user to select one of multiple sub-items for the same item being typed. (also used when sending a SMS on iPhone to select between multiple phone numbers)
Same as the iPhone SMS appAuto-suggest is highly useful when creating scalable user interfaces-Auto-suggest prevents misspelling Allows users to select the appropriate item quickly Allows the user to select one of multiple sub-items for the same item being typed. (also used when sending a SMS on iPhone to select between multiple phone numbers)
The key for multi-select with a filter is being able to view all selected items in an area other than the filtered list.
Great model for selecting multiple items from a big list Ability to search Uses auto-complete Uses real-time search to narrow down results Build up lists by running multiple searches, selecting people, and viewing a list of all selected people
When web browsers all began to support asynchronous data loading around 2005, the need for pagination was diminished.
Google News on a PC doesn’t have infinite scrolling, but Google News on an iPad does
Only lets you edit 100 items at a time
Only lets you edit 100 items at a time
NeustarWebmetricsEnterpirse Console is a web application for website performance monitoring.The Enterprise Console uses infinite scrolling such that when a user clicks the ‘select all’ option , users can take action upon everything, even items not loaded in view.
Great model for creating a list Ability to search Uses auto-complete Uses real-time search to narrow down results Build up lists by running multiple searches, selecting people, and viewing a list of all selected people
Will display up to 1000 images
Google shows 15 pictures per ‘page’ and limits 50 ‘pages’ of results for a total of 750 images after clicking ‘view more’
Friendly, an iPad app for viewing Facebookallows infinite scrolling
The Microsoft Ribbon uses context to know if the picture or chart options are necessary to display or not The menu system provides room for icons to expand and contract based on the real-estate available The menu system can make items used more than others bigger The menu allows for visual recall with icons The menus are flexible and enable a large number of sub-options to be displayed.
Zimbra will recognize text strings and present relevant information based on that string. Maps are shown when mousing over an address Events can be added to the calendar Email addresses and phone numbers can be added to the contacts list
Pay people on the internet to do work that humans can do, but machines can’t effectively.
Created by Luis von Ahn who later created many games called ‘Games With A Purpose’ Gathers image tags from players which are licensed by Google to improve its image search results
iPhoto faces uses the manual tagging of faces in a portion of photos to automate the tagging of the same face in additional photos.
Face recognition is used in iPhoto Users tag a portion of the photos with the people’s names, and iPhoto tries to tag the rest. While it isn’t perfect, it beats doing it all manually.
Gmail has used the same technique for their Priority Inbox which sorts out the mail you usually read from the rest
Gmail has used the same technique for their Priority Inbox which sorts out the mail you usually read from the rest
Spore, created by Will Wright, uses automation to create custom and unique player experiences throughout the game.
Spore’s characters are created by players and texture mapping, character movement, and music are all created based on a system of rules
Pandora is well known for their personalized radio stations which can be seeded with a genre, song name, or artist. The initial seeing however, is not automated. Employeesmanually categorize over 13,000 songs (with 400 characteristics each) a month feeding the Music Genome Project (perhaps this will be automated in the future)
Binary (up/down) and 5-star ratings are limiting and don’t allow users to specify why they are giving it a low or high rating.
While Netflix offers searching capability, it is limited to shallow fields such as titles and descriptions.
Delicious library catalogsyour movie, music, and book collections by using barcode lookup and importing data from Amazon.com
Players describe a photo and earn points when the person they play with matches their descriptions
Uses great graphing techniques, as well as time filtering Great use of touch controls on the iPad
- Auto-detects data key value pairs from 3rd party sources and excel files
Uses great graphing techniques, as well as time filtering Great use of touch controls on the iPad
- Once you start navigating in 3D space, your inspiration really needs to come from videos games. For computers that means using [w][a][s][d] keyboard controls along with mouse pointing.- Nonetheless Photosynth is a great use of crowd-sourced content
MS Pivot is a very versatile way to view data- Ability to sift and browse information, very visual- The Filters on the left are limited in height, so combining it with the scalable solution seen in Splunk would make it better
Microsoft Pivot is an excellent inspiration for anyone working on BI tools
The techniques shared here can be found in all types of software that deals with Big DataiTunes is a good example of managing information- enables filters, tagging (play-lists), searching, and sorting- search results update as you type- genius play-lists- genius recommendation