Universal approaches to task oriented interface design
Seeing as the movie was not a primary concern when production started, most of the more experienced team members were working on A Bugs Life. Additionally, Director Lee Unkrich described the story as “all over the place.” Once the movie was upgraded to feature, 12 minutes of footage needed to be added to the movie, so Chief Creative John Lasseter and the rest of the story team scheduled an emergency “story summit” over a weekend, which at the end they had hoped to have the initial 12 minutes that they needed.
In actuality, what came out of that meeting was a whole new story. Top to bottom rewrite. The team members took a hard look at what they had, and realized that ultimately it was a mess, and needed to be scrapped. It was a tough decision, but having an incredibly high level of creative integrity, they knew that they had to start from scratch.
But it gets better. They burned through so much time, that they had to deliver a completed film in 9 months. Just to give you perspective, a normal animated film (let along a cutting edge 3D animated film) took about 3 to 4 years. So this was not only an issue of throwing away thousands of man hours, but also producing the new movie in a quarter of the time.
As we now know, the movie was insanely good (I am an unabashed Pixar fanatic), and this was indeed the right decision. I am sure it was not an easy one though. However, the team had learned so much in the stuff that they threw away, that they were able to start again, from scratch, and build a story that met the goals of the new criteria: a feature length film.
Starting from scratch
When starting a new design project, we start by defining scope and requirements for the project, and once scope, requirements and strategy are defined, we start working on concepts. Oftentimes, we try several comps with different approaches. In trying those different concepts, we pick one to start with, and then retrofit requirements that are not met on to the approved direction, with varying degrees of success.
What happens when there are one or many several fatal flaws in the design that start to be uncovered? On a complex web project with several moving parts (social, commerce, advertising, etc), no matter how many questions you ask upfront, you are going to hit roadblocks. There are going to be requirements from other departments that the core team is unaware of. There is going to be a learning curve, especially if you work for an agency. At an agency, you will not have the benefit of a history and will have to take requirements at face value by a third party, and you may not have access to have a conversation with these people. This makes the job even more difficult.
If you add to this an expectation by client or stakeholders that the approved design would remain in tact, but that a few things will be retrofitted to accommodate the requirements, there can be trouble. I personally have found this situation a “lose, Lose” situation until I figured out how to handle it.
After presenting initial concepts, throw them out and start from scratch.
Why would someone work for a few weeks, and throw away all the work? A builder doesn’t work for 3 weeks, and then tear down the house and build a new one? Filmmakers (usually) don’t film a movie and then start from scratch? Why would you complete a design and then throw it out.
In Agile development process, there is a term called a spike. A “Spike” is a short period of exploration where a developer will try a few things simply with the idea of learning what they need to, and finding out a strategy to move forward. It is timeboxed, usually to a sprint, and at the end of the sprint, all the code is thrown away.
Yes, thrown away.
The idea with a spike is to learn all that you can by doing it once, making mistakes, not worrying about clean code, trying stuff out, uncovering possible risks that can only be uncovered by working on something, and then writing clean code on the second attempt. Developers are often faced with new technology, and often have to program things that they simply have never done before. You can’t get everything right the first time you try something.
In design, we have experience with solving similar issues, but we never create the same project twice, so we are doing the same thing as developers: trying something new that we have never done before. Furthermore, we are working with a complex set of moving parts, all of which need to move seamlessly, so that the business, consumer and developers all are able to complete their tasks. It requires exploration.
As projects have gotten more and more complex, I found by accident, that the idea of creating a concept and refining it, doesn’t work. I had the fortune of being on a few projects where the business lacked focus, and we had to start from scratch. In doing so, the things we learned in the first iterations led us to a bulletproof v 2.0. Fortunately we had not started development on a project that was just not right. We did what Pixar did, and threw it away. It just wasn’t right and it wasn’t working right.
One of the most important lessons I have learned is that good design does not need retrofitting. Good design just works. There is not a long list of exceptions for use cases. There is a minimal list of adjustments for use cases, but overall, I’ve found that if you find yourself coming up with an unreasonable amount of interactive accommodations, you have the wrong concept. Another barometer, is that after one round of revision, the excitement is gone, and there are a bunch of additional use cases that are not met. This is another sign that your design is not right.
When working on projects now, I treat every concept as a spike, and throw it all away. I make note of all the things that are working, and bring those over to the new concept. I also have all the assets from the previous iteration, which saves a lot of time (although I start with a completely new document as well). By trying a lot of things, running into problems, asking more questions, thinking through more operational and user scenarios, you will compile your “real list” of requirements. Some things that you thought that might be negotiable, might not be possible due to time or budget constraints, and it is better to create a unique solution that is solid from the foundation than to retrofit an idea.
I also make it very clear to stakeholders that we will be starting from scratch on ONE concept from our findings, and we can do it in less than a quarter of the time. We will also come up with the right solution this time, and that the exploration allows us to try new things without hitting it out of the park on the first try.
If it’s the right solution. It will just work and you will know, and all the stakeholders will know.
Don’t be afraid to throw everything out and start from scratch.
Minimalism has always had a great relationship with retail. Since the 60’s when minimalism started to take off, treatment upwardly mobile consumers have embraced the design concept’s beauty, find and closely associated it with products of high quality. Ever since, minimalism has been a design style that emphasized a high design aesthetic. It is closely aligned with the principles of simplicity from whence it springs. Using it in design and marketing makes products seem more designed and “simpler” as well.
Influences on Minimalism
In my research for this article, I came across minimalism of all types: design, art, film music, photography, architecture. All of the disciplines embraced the concept and had their own take. I would say the most known disciplines to embrace it are art and architecture. Drawing from Japanese concepts of balance, simplicity and geometry, Architects have been inspired by minimalism for over 90 years. The concept of minimalism removes everything unnecessary and only keeps the necessary. It seems a good fit for architects, who in an attempt to create harmonious space, want to create an environment that feels spacious and expansive. The expansive design in a physical space gives you a feeling of relaxation and calm, which is the goal of most spaces.
The other main concept architects brought to minimalism was the use of top notch materials. Architects brought in high quality woods and textures, and added them to open spaces. The effect is that you really notice the nicer materials. Also adding a minimal amount of furniture allowed architects and interior designers to invest budget into a smaller quantity of furnishings, but at the same time purchasing higher quality. These higher quality furnishings and materials had more impact because they were left on their own to create impact. If you have little to look at in a room, you focus even harder on what is there. If what is left is high quality, it evokes a feeling of quality. Plus the feeling of expansion.
Web designers have taken the concepts of architects and applied them to the web. Whitespace, high end materials (such as custom photography, and illustrations), minimal elements and simplicity are all concepts that translate well to web and UI design. Visual and web designers have embraced the concepts and applied them to the medium. The effects of minimalist are the same in web design and architecture. In essence minimalist design:
- helps users focus only on what is important by removing all distraction
- gives users a feeling of relaxation and space
- connects with an emotional desire
- uses space and geometry to instruct and guide uses
- maximizes impact by removing all extraneous elements
- engages users by making them think about how the interface works
- creates a sensation of value by aligning it with other high design
- but most of all… minimalism embraces simplicity.
Remove Everything Till It Breaks.
Minimalism embraces only what is necessary, and removes what is not. It is about using only the best elements, placing them in an expert fashion and removing all that is not necessary…. and it is not easy. It takes focus, prioritization and restraint. It takes balls. It is bold to remove everything but what is necessary, and not fear that the viewer or user will not get it because of a lack of information. It is precisely this boldness which catches people’s attention and draws them in.
Take a look at the ad below. You notice a speck in the center, and try to make it out. It is only after you read the copy on the right (which is the only other element that draws your attention), that you figure out that it is a car. This ad plays a great visual trick on the user, in which the artist has got them to think by making them look for something hidden, and then, drawing them in to question what it is. Only then do we give them the answer in the lower right.
This ad illustrates a perfect example of how minimalism works. It makes our prediction sense fail, and we pay attention. We expect the page to be filled with a lot of stuff that is easy to see and to read. Most of what we see is full and easily legible. When we see something missing, it engages us and makes us question why what we expected is not there. It draws us in and makes us demand an answer to what is the speck in the middle of the page.
When it comes to minimalist web design, we engage the user by putting few elements on the page. We further engage by using beautiful elements on the page, and expertly placing them to lead them in the direction we want them to go. We minimize options and give the user only the right choice at the right time. The following trends are techniques that web designers have used to create the same effects of spaciousness, beauty, and simplicity for maximum impact and engagement.
5 of 9 trends in minimalist web design:
1. Big luscious photography
With minimal elements on a page, a beautiful photograph sucks you in like a vacuum. Imagery provides an anchor for you to focus on and balanced with a minimal amount of distraction, are incredibly impactful. The below sites each uses photography in a unique way.
- Suit Supply– Unique Image Style
Suit Supply uses a unique image style to create engagement and draw users in. The designers of the site have done more than just create great photographs, they have created a compounded effect by unifying the style. They all have a specific look, as well as an action to them.
- Lilybalou – Minimal impact navigation
This site maximizes the impact of the full screen images by using a thin minimal navigation system, and then placing it at the bottom, so the page feels more like a photo gallery than a website. They compound that with interesting front face shots of children to suck you in.
- VanMoof – Full Screen Background images
Van Moof is a bicycle manufacturer based in New York. The company offers simple bicycles that demand top dollar. This site ups the ante by using free floating content and navigation, and full screen images. This allows the images to be even bigger (or smaller) and makes the images and the navigation look separated.
- Manufacturer d’essai – Emulate a Magazine ad
Using a continuous scroll this site, this site uses large imagery to emulate a gigantic magazine spread, adding interactive elements on the page.
2. Minimal UI and navigation
Simplicity should not only apply to the amount if items on the page, but also ornamentation. The next samples are ones that remove all elements from the UI framework – all extra strokes, shadows, heavily contrasting colors, and nav bars, and removes them. These samples minimize the amount of options for navigation in order to make users go down a rabbit hole, and not distract them with extra elements. The UI is also transparent, and sometimes removed all together. The concept is to make the page look like art, and less like UI.
- Apple – forked navigation
While Apple is a company that often exemplifies good design, and there is probably not an experienced web designer alive who hasn’t been told a million times to design it “simple like the Apple website,” one of the main concepts of the apple website may not be known. The Apple website has a very simple navigation system that forks users down a certain path, and does little to cross pollinate the path. The site, as of this writing, forks by product, and immerses you in the experience of each product. It removes distraction by strategically using the fork strategy. The forked strategy is further characterized by a limited amount of navigation options (anywhere from 4 to 8) on the top level main nav. The minimalist nav philosophy is that if you have less options you will not be overwhelmed with choice and will try one of the main options, as long as the “scent” of the information is clear. Apple does a great job using this approach and giving users the scent of information to keep them clicking.
- Shoe Guru– free floating products and navigation
Shoe guru removes almost all UI elements, and free floats products. The nav bar is simply text without any ornamentation – shadows, strokes, button effects. The product display emulates a shoe wall that you would see in a shoe store, and shows only the price and name. This allows the products to really shine and be viewed without the design overpowering the product photos.
- Shopbop – Type as navigation
Shopbop does a similar thing as Shoe Guru by using only type as navigation. The site further reduces all UI to simple boxes with black borders to simplify type and maximize the impact of the banners and product display.
- RueLaLa – content as navigation.
Because of the limited amount of product in each nave category, RueLala.com uses a different strategy. They put all of the content available in one long page, and have users click direct to the category grid simply by clicking on a big beautiful product image. They use a grid approach, and while they do display a lot of content on the page that one may not technically call “minimalist” the approach here is to maximize engagement with a single page, which creates simplicity for the user, which is a key principle. Also, while not technically discouraging the user fro using the nav bar, the strategy is to use the nav bar more as a filter than proper navigation. This style of navigation has been popularized by the iPad and tablets, which in the interest of space, designers have been using hidden/collapsable navigation in order to create more space for content. As a result, they made large tap targets, that they designed for users to click on, and voila, the use of big images, minimal navigation, forced users to tap on the images, which in turn causes content strategists to create more intriguing targets to tap on.
3. Balanced Typography
The hallmark of minimalist design has always been type. When used properly, Type can create balance, asymmetry, clutter, space, density, and color. It has been the weapon of choice for minimalists for years because of its ability to convey messages when combined with images. And let’s face it beautiful typesetting is… well… beautiful. It’s engaging and exciting, but can stand all on it’s own to communicate messaging ideas. It can be used in and of itself to prioritize attention, and can be used all by itself. The below sites, use type, (expertly placed, expertly set) to create interest and lead the user to the most important items on the site.
- Bored of South Sea – Typesetting to clarify calls to action
Bored of South Sea does a grew job of using dynamic to to draw attention to it’s calls to action. When used in conjunction with a minimal amount of type styles (as illustrated here), larger or contrasting type calls attention to itself to clarify calls to action in buttons and banners, and UI.
- IWC – dynamic type for interest
Iwc has a bit of a different approach. Instead of a simplified approach, IWC uses several different sizes of type with the same uppercase setting to create a rhythm.
- Fossil – simple typesetting for clarity
The Fossil site uses less type styles and contrast in order to draw attention to the main image section, and reduce attention from navigation. The effect is a very “cataloge-y” feeling website. It feels much more like a great catalogue than a typical e-commerce website.
4. Hiding everything
“If you can’t get rid of it… hide it.” —John Maeda
As Interactive designers in e-Commerce, we often are told that you cannot hide anything because of the hit to conversion rates. The thought is that if consumers can’t see it, they don’t know it exists right?…. hmmm…. not always.
As designers, we are constantly in search of the beautiful, the simple and the elegant, and nothing is beautiful, simple nor elegant about filling a page full of a bunch of crap. It is no longer design at that point. It is retrofitting. John Maeda in his book “Simplicity” has a long section on the topic of reduction. His thought is that simple design only contains the necessary, and removes the extraneous. If something cannot be removed, then the next course of action is to hide it. In designing products, this means covers and minimal controls. In interactive design, we must create intrguiging UI and delightful interactions in order to engage users and make them want to click. It is very difficult and a slippery slope. How do we create a visual design that draws attention to hidden things so users can find what they need, without going so obvious that the site becomes clunky. messy and disorganized. At the same time, conversion rate and usability cannot be sacrificed. The below sites do a great job of engaging the user, so he wants to click around and find the hidden UI elements, making it very fun along the way.
- Nixon – Interactive elements using patterns for learnability
nixon.com is one of my favorite sites on this list. It makes you want to play with it, because on every interaction, something cool and new happens. Information is displayed on interaction, not upon load. Things like expanding menus, the banner images with hidden captions, and filters that expand, all create a great cohesive experience that encourages engagement, while serving users at the same time. It sacrifices little usability for the cool factor.
One of the concepts they use in order to create predictability is reuse of interactive design patterns. The 2 key ones are the expanding menus( which are used fortop level navigation, as well as the filter set), and the hover captions on the large images. This minimal set of patterns makes learning the site a breeze and improves usability.
- Uniqlo– Universal scroll to reveal more
,p>Uniqlo uses a different technique of hiding that some might not call hiding – the universal scroll. I would argue the way in which they do it is a hiding technique… you just use your scroll wheel instead of your click to expose. The effect is the same – it feels like you are discovering more content as you scroll and it feels like you are uncovering content.
- Makr.com – Hide labels
Makr.com does a greet job of keeping an ultra clean page by removing all type from the page until you hover over an image. The effect is an easy to read and elegant product page. They further enhance the page by adding an accordion display of the product upon click, which reveals more information as the user requires it.
5. Graceful Responsiveness
One of the fringe benefits of minimalism has been to make responsive design easier. The approach of minimal navigation, large images and minimal ornamentation makes responsive design easier, because there is simply less to scale. Large images scale nicely, there is less type and less ornaments that need to be retrofitted to the multiple screen size. If there’s less to scale, then it makes design, development and upkeep simpler and faster.
- Indochino – Going larger gracefully
Indochino does something most designers don’t consider— going large gracefully. While everybody is rightly concerned with mobile devices, this site also accommodates big screens very nicely. Using large tiled images, this site fills the screen and creates a beautiful experience not only for small screens, but for big ones as well.
- Tattly – minimal oranmentation to make responsiveness simpler
The Tattly site is truly simple: Just text, images and a few strokes. Their strategy of keeping things simple makes responsiveness easier because there is less stuff moving, shifting and scaling. This means easier coding, QA time and implementation time. If you put a site like this together the dev team will love you. Simple, elegant, AND easy to code.
- Five Simple Steps – Simplified grid
Five simple steps combines minimalism with a basic grid structure to make responsiveness easier. They use a simple 2 column grid that expands and contracts and scales images. They have worked this into the design so that it feels right and scales nicely. They took advantage of the simplicity of the layout and the whitespace to make the grid flow smoothly and make the scaling to alternative devices headache free.
That’s it for this issue!
I will do numbers 6 -9 in the next few weeks. In the meantime, you can checkout the presentation slides on slideshare.net. Email me with any questions.
- Nixon – Interactive elements using patterns for learnability
It’s no secret to my friends that I am a thinker. I think deeply and profoundly about the most insignificant things, help like when Mystic Manor will open at Hong Kong Disneyland, price 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, sales 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:
- Consuming data
- Monitoring data
- Data visualization
- Search data
- Enter/Capture data
- Organize data
- Edit data
- Authorize access to 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
A few types of examples of a consumption interface:
- USA TODAY News article
- Google Maps
- Marketing websites
- Flickr display page.
- YouTube player page
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.
- 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
A few examples:
- Bloomberg stock window
- An Airplane cockpit
- Google Analytics dashboard
- Weather forecasts – hour by hour, 10 day, etc.
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)
- Analytics detail/reporting pages
- Photo timelines
- Weather Radar Maps
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
- Checkout on an e-commerce site
- Buying tickets at Ticketmaster
- Print dialogue
- Adobe Photoshop artboard
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.
- Google Search
- Category trees
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
- Time tracking software
- CRM system customer page
- Sound recorder
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.
- 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
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 page
- OSX Finder
- Email client main screen- Mac Mail, Outlook, etc
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
- Magento product
- Amazon customer profile
- Quickbooks edit check
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.
- Google Hangout
- email clients
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.
- 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.