Stuart Silverstein Experience Strategist/Designer

back to all articles

Universal approaches to task oriented interface design

It’s no secret to my friends that I am a thinker. I think deeply and profoundly about the most insignificant things, like when Mystic Manor will open at Hong Kong Disneyland, to why am I here and what does God want for my life. I think constantly.

The other thing that is no secret that my best thinking is when I am walking my dog. He is my best thinking buddy, and we have had full on conversations about my career, life and often times technology and User experience. He has helped me solve some pretty tough UX problems. If you need a senior UX dog, he’s pretty good.

Anyway, I was walking my dog the other day, trying to solve some problems about next generation interfaces that I am working on. I have been thinking about the next frontier in technology, and it seems obvious that the next generation of computers is going to free us from screens and keyboards and touch screens. We are in the infancy of the infancy of computer human interaction, and as crazy of stuff that we are able to accomplish now, I firmly believe you ain’t seen nothing yet. I mean my wife’s grandmother was born when automobiles were new, and they barely had running water in their region. Now they can have a computer in their pocket that can show them their great granddaughter in real time, tell them the weather, tell them the traffic and how much money they have in their bank account at any given time.

DO YOU REALIZE HOW CRAZY THIS IS????????

This IS science fiction already!!

But we really are in the infancy of Human computer interaction. We still have the mouse and keyboard – both devices that are over 40 years old. We just haven’t had the technology to find alternate input devices…. but with the wide spread use of the multi-gesture touch screen, we are now in a position to blow this interface thing wide open.

For years science fiction movies have been dreaming up interfaces that are free floating gestural interfaces. Look at Iron Man or Minority Report. These interfaces are projections on real objects. They are a blend of the real and the digital. The next wave of input devices will get us beyond the screen, back into real life, and will require us to not only use screens, but to overlay digital into real life.

So, back to the future…

In trying to come up with my own interpretation of these new interfaces that don’t exist, I felt it was appropriate to break down interface types into their essence, so they can be rebuilt and remained with hands free devices. The below exploration is my attempt to break all types of interfaces into their essence —why they exist, what problem they are trying to solve – regardless of format or type of software. These principles apply to desktop apps and iPhone apps as well as any website.

Universal approaches to data interaction.

The classes of data interaction interfaces:

  1. Consuming data
  2. Monitoring data
  3. Data visualization
  4. Transactions
  5. Search data
  6. Enter/Capture data
  7. Organize data
  8. Edit data
  9. Authorize access to data

Consuming/Reading data

This is how most of the web is designed. The largest portion of how we interact with the web is the consumption of information. The class of consuming and reading data can take the form of not only words, but audio, maps, graphs, video, or any other type of static data. The goal of this type of interface is the transfer the data from the computer to the viewer as quickly and efficiently as possible in order for the user to do something with with it, or to simply be informed.

The main controls of interfaces like this are:

  • Control the amount of content you view at once time – scale window, zoom, etc
  • Manoeuver through content – scroll bars, play/Stop, next arrows
  • Advance to next segment of content – article video, etc
This USA Today detail page is an example consumption page. The page is designed around understanding the text, and provides similar content to encourage further consumption.

This USA Today detail page is an example consumption page. The page is designed around understanding the text, and provides similar content to encourage further consumption.

A few types of examples of a consumption interface:

  • USA TODAY News article
  • Google Maps
  • Marketing websites
  • Flickr display page.
  • YouTube player page

Monitoring data

This is the review of data that is constantly changing. The timeframe for the change can be from milliseconds to years. The purpose of this interface is to see progression and see in real time how data is changing, and to recognize the change. There is also a priority that must emphasize numbers that are changing and removing all other information in order for this type of interface to work.

Main controls:

  • Ability to view whatever numbers are needed. This can be a “show everything at once” approach” or the ability to switch quickly, since this type of interface is time sensitive.
  • Ability to see past data or compare data
Sample monitoring interface

This Bloomberg app for iPad is an example of a monitoring app that allows users to see multiple streams of info in order to make decisions on buying and selling stocks.

A few examples:

  • Bloomberg stock window
  • An Airplane cockpit
  • Google Analytics dashboard
  • Weather forecasts – hour by hour, 10 day, etc.

Data visualization

This type of interface is designed to show you information in a new way. It takes information and displays it in a way to hopefully show you trends and insights or communicate abstract ideas that otherwise would be hard to communicate. This is the computer equivalent of using infographics to display information, however the data visualization interface allows the user to manipulate the parameters of the data to his liking on the fly. Almost like having a infographic designer at his fingertips to instantly create the infographic that he desires. All in a pixel perfect accurate fashion.

What are the differences between Data Visualization and Monitoring interfaces?:

Although this type of interface frequently can “look” like a monitoring interface, the key difference is that Data visualization interfaces are not designed for split second or timed decision making. Data visualization interfaces are mainly there for absorbing data and interfaces and letting the information stew prior to action. Monitoring is designed for immediate action. For instance, there is bad weather ahead, so I need to steer the plane in a different direction. A Data visualization may be an analytics report where you can see how people are using the site over time, so that as you make design changes, you can take that information into consideration. Visualization is for consideration, monitoring is for action.

Needs of this type of interface:

  • Control the parameters of the information – change date, change units
  • Compare/Choose multiple streams of data
  • Choose visualization type – possibly graph, list, overlay, 3 dimensional,
  • Manoeuver through visualization – advance time, see more/less, move in direction (3D)
This Mint.com dashboard allows the user to visualize his/her spending habits in a way that might change behavior in the future.

This Mint.com dashboard allows the user
to visualize his/her spending habits in a way that might change behavior in the future.

Examples:

  • Mint.com
  • Analytics detail/reporting pages
  • Photo timelines
  • Weather Radar Maps

Transactional

This type of interface involves 2 way communication with the computer. Much like a game of chess, this type of interface works on a move by move basis. You move, the computer moves. You move again, the computer responds again. Back and forth into a dialogue between human and machine. The machine is in essence doing the work for the human. This may be using the computer to control the physical – i.e. routing a plane to a location. It may be digital – i.e. using the computer to place an order, or send a print job to the printer.

Requirements for Interface:

  • Feedback to the user. Since this is a dialogue the user must get constant feedback on what is happening
  • Controls to adjust outcomes- As information comes to the user, the user needs to be able to adjust what is happening. This can be movement controls such as in a map type interface, or it can be in unit adjustment – how many what kinds of unit or even where the information is going – i,e, switch printers.
  • Send/Submit information – The computer needs to know when the user is done and ready to complete
This Product page is a perfect example of a transactional page. At this juncture, the user is supposed add the item to cart and have a 2 way dialog with the interface in order to complete a "transaction" or a specific task.

This Product page is a perfect example of a transactional page. At this juncture, the user is supposed add the item to cart and have a 2 way dialog with the interface in order to complete a “transaction” or a specific task.

Examples:

  • Checkout on an e-commerce site
  • Buying tickets at Ticketmaster
  • Print dialogue
  • Adobe Photoshop artboard

Search Data

This type of interface is concerned with the location of information. This is the type of interface you use when you need to give the user the ability to find information. This can be things like open search fields, but this is also the class of interface for browsing. Much like trying to find something you are looking for in your house, the user needs to find a piece of data in the system, and needs ways to find it. Since they cannot physically get into the machine and start looking for stuff (at least not yet), they have to use a viewport and some controls in order to find what they need in order to manipulate, monitor visualize, etc.

Requirements for Interface:

  • Hierarchy of data: Data structure in order to browse information according to a classification.
  • Open ended search – the ability to search free form. Some examples might be type your search, but it also could be voice activated, where you tell the computer what you are looking for
  • Parametric search
  • Submit search – a method for letting the computer know you are done setting parameters or entering your open ended search. This could be a button or a pause in your voice.
The classic search interface. Google's search interface is one of the world's best for a reason. The Google team has removed all extraneous information from the search task

The classic search interface. Google’s search interface is one of the world’s best for a reason. The Google team has removed all extraneous information from the search task

Examples:

  • Google Search
  • Siri
  • Category trees
  • Shazam

Enter/Capture Data

The ability to add new data to the system is another key feature of any interface. Data does not appear out of thin air, so there must be a way for a user to capture data, be it by filling out a form or using an external device to record. Like the monitor interface type, this type of interface must have no distractions, to keep the integrity of the data, and maximize ease of entry. Let’s face it, nobody likes entering or capturing data, but it is a necessary evil.

Requirements for Interface:

  • Ways to input: form fields, start record, take picture, etc
  • Ways to stop input; stop button
  • Submit data
This time tracking software is an example of a data entry screen. The screen focuses on form fields removing all other information, so the user can focus just on the task of entering data into the computer.

This time tracking software is an example of a data entry screen. The screen focuses on form fields removing all other information, so the user can focus just on the task of entering data into the computer.

Examples:

  • Time tracking software
  • CRM system customer page
  • Sound recorder

Educational/Instructional

Some interfaces are designed to instruct you on how to do something. Similar to monitoring and transactional interfaces, these are done in real time. In contrast to consumption interfaces, this interface breaks the information up for you in bite size pieces in order for you to respond in a timely fashion. It may also be something that teaches you how to use another interface, or it could be instructing you on how to do a physical task, such as play tennis, or turn by turn directions in order to drive your car to the right place. The instructional interface gives you quick references to do another task be it digital or physical. It can also be used in learning information, but the structure is shorter and faster than a consumption interface, and often gives you more information to choose from at once.

Requirements for Interface:

  • Labels ; in the instance of a software tutorial, this may be label overlays on all the tools of the software. In a virtual reality software, it may show you places on the street.
  • Additional information: This info is the additional information needed by the user to complete the task. This may be the address or phone number of a place on a turn by turn GPS software, or a short video on how to swing your racket.
  • Steps: Another difference between educational interface and consumption is the introduction of steps, and that a user must complete several steps in order to complete the task. A short tutorial on InDesign will have several sequential steps that you must do in order to learn how to use the software.
  • More detailed information: This is an option for the user to get much more in depth on the topic at hand. for instance. If there was an anatomy software that labeled the lungs, and had a shore video of how the lungs worked, there may be an additional library on lung related diseases, how to maintain healthy lungs, biochemistry of the lungs and more. Or for instance, you are looking for a restaurant, and the interface offers reviews by critics, the history of the restaurant, articles on its owners, etc.
This GPS is an example of an instructional interface. The goal of the interface is to instruct the user how to do something and react to his movements or actions.

This GPS is an example of an instructional interface. The goal of the interface is to instruct the user how to do something and react to his movements or actions.

Examples:

  • GPS directions
  • Software overlays: ipad and iphone apps often have a quick introduction on the software along with overlays of the controls telling what each control does.
  • Lynda com – This is a consumption/learning interface because the content is exhaustive, but each tutorial is designed like an educational interface.
  • Yelp virtual reality mode
  • Stargazer app

Organize data

Users need the ability to take data an rearrange it to be findable. This is more likely a part of a screen, such as a search screen, but this type of interface allows users to classify, label and organize data, such that the search interface can find it. This can be an interface that allows metatags or a category tree for moving customer records around from one section to the next. The key of this interface type is that it allows you to move data around into places that make it easier to find, and creates metadata for parametric and freeform search.

Requirements for Interface:

  • Create/Edit categories
  • Move data to category
  • Label data
Evernote notebooks are a way for you to organize data into folders, The interface allows you to update folder names and move notes from one folder to the next easily.

Evernote notebooks are a way for you to organize data into folders, The interface allows you to update folder names and move notes from one folder to the next easily.

Examples

  • Evernote Notebooks page
  • OSX Finder
  • Email client main screen- Mac Mail, Outlook, etc
  • iTunes

Edit Data

The goal of the edit data is to take data that has been entered, and to give the user the ability to modify this data. This is not always text or form fields as we might be inclined to think. This may be to edit photos or video, which is why it is distinct from the capture enter data. It may also be to edit field data, However the difference between this type of interface and the enter, is that it may afford the user to edit the data one piece at a time, which requires a different interface than entering data. For example, a user may create an account in the checkout process, but the “edit account” will be a different form because the task is different, and may contain all the parts of the record that were not required to enter the data.

Requirements for Interface:

  • Edit data
  • Separation/categorization of information on the record
  • Submit changes
  • View/preview changes

Examples

  • Magento product
  • Amazon customer profile
  • Quickbooks edit check

Communication

Since there are now video chats, audio chats, instant messages,etc, there is a different class of interface that is not for communicating with computers, but to communicate with other human beings. This class of interface allows you to select a person to contact, a method by which to contact, and an interface for the actual contact. This class also includes virtual collaboration tools, for people to work on or see the same things from 2 different terminals or locations.

Requirements for Interface:

  • Select a person/location to contact:
  • Select a type of communication – may be video, text or audio or photo
  • See who is available to be contacted – may be availability or security issues
  • Controls for communication – size of window, bandwidth, mute, etc.
iChat is a class of interface that allows users to communicate with one another. In this case, video, audio and text are all used.

iChat is a class of interface that allows users to communicate with one another. In this case, video, audio and text are all used.

Examples:

  • iChat
  • Google Hangout
  • Skype
  • email clients

Authorize access

Interfaces that authorize access are very simple. They have one goal: To get the computer to recognize who the person using the machine is. While most often we think of a login screen, if you think outside the box, this can be voice recognition, retina scan and/or thumbprint. The key is that the user inputs something into the computer that allows the computer to cross reference and serve up the appropriate information or access based on the identification.

Need of the interface:

  • Input of verification information: While we all know the “user name/password” type of verification, this might be a microphone, a video camera or thumbprint scanner
  • A means of submission: This can be automatic such as a pause, or when the computer has a match or a submit button or a change of focus on a field.
  • Feedback on why or why not authorization has been approved.
  • Alternative means to verify: there might be an additional method for verification, such as sending an email to recover password, a different data type – such as an email vs user name verification or Security questions versus user name password.
This MailChimp login is a screen we see every day. It's goal is to authorize the user to access his account.

This MailChimp login is a screen we see every day. It’s goal is to authorize the user to access his account.

Examples:

  • Mail chimp login screen
  • Edna Mode’s house in the Incredibles
  • FTP/VPN/Connect o server screens or modules.

 

What does all this mean?

The above classification is the results of an exercise to understand interfaces better and to break them down to their essence. I find that we don’t spend any time wondering why we have a content detail page or a category tree. Those tools evolved as a way to solve the larger problem of interacting with data, and what we as humans need from our machines. Why do we even have computers in the first place? They allow us to help interpret our world, help us see new things, new information that we otherwise would not be able to see. They help us communicate. They help us store data for repetitive tasks.

In innovating for the next generation of computers and interfaces, it is important to know the essential types of interfaces that we are encountering and what are key elements of those interfaces, so we can reframe the problem. Does a data capture interface need to be a form? Can it be voice? Maybe it’s brain waves at some point? Who knows. If we don”t consider the problem from alternate angles, how do we expect to get us from where we are now to a new solution.

This list is not exhaustive, but meet the requirements of most interfaces I could come up with. In the future, I may add some additional types, but these are the main models that I could come up with.

Does classification help you in your everyday work now?

Maybe … or maybe not. I am an over-analytical fool, and love to look at problems from different angles. If I am designing a content site, and I realize that I need a consumption interface, and a search interface, I might try recreating these elements in a new fashion. If I know that my main task is to monitor something, I might add a visualization tool to the mix to make monitoring easier and more insightful. You can try breaking up the pieces of the puzzle at their essence and put them back together in new and exciting ways.

And let me know what you come up with.