Lab 02 - The machine is the metaphor: a look at interfaces

Interacting with machines of any kind requires using an interface. Most of us have had to turn on a faucet in an unfamiliar place. Some faucets use levers, some knobs, and some use infrared motion sensors. You can probably think of other ways to get water from a tap that aren't listed here. A faucet may be a simple machine meant to regulate water flow (and nothing else), but there are many ways to perform that task successfully.

Computers, on the other hand, are incredibly complex machines which allow us to perform equally complex tasks. Imagine writing out your last homework assignment for class by using the only the techniques available to your ancestors, like cutting letters into clay! A sharp stick and clay are one kind of interface that makes sense to human beings used to manipulating things in a physical world. The same is true for the early days of computing. Computer operators interacted with their machines by turning switches off and on ( ENIAC worked that way), or using stacks of paper punch cards to perform the tasks they needed to perform. Eventually, terminals (monitors and keyboards) allowed for additional kinds of input and output.

As the tasks we needed computers to perform got more complex, and as computers started being integrated into our workplaces and homes, engineers and designers created GUIs, or graphical user interfaces, for these machines. Xerox PARC's Alto used a desktop metaphor GUI that has persisted through today. But what exactly is a metaphor, when it comes to computers? You can think of a metaphor as a way of bringing the way you know how to interact with the physical world into the digital world. Metaphors in the technology realm help us understand how to interact with something that is created out of zeroes and ones without having to learn something completely new. Like learning how to use a faucet, metaphors can build on your existing knowledge to make your user experience easier and more intuitive. The desktop metaphor builds on the experiences people had doing work at desks, with files they organized into folders. Sound familiar?

To consider:

More metaphors: so you want to change the desktop?

In this second lab, you'll look at a wide variety of approaches to interfaces. As you explore, review your answers from the To consider: section above. Have you changed your mind about any of them?

Learning more

  1. For Microsoft Windows operating systems, BumpTop is an alternative desktop you may not have heard of. It uses the desktop metaphor, but in a new way. It's been around and in development since 2006, was recently purchased by Google, and is currently not available for trial or purchase anywhere.

    • What did you think of BumpTop? If it became available, would you try it? What, in your opinion, does BumpTop do better than a regular desktop? What does it do worse?
    • Who do you think would find using BumpTop more challenging? Why?
    • Think about what you saw in the video. You can find other videos about BumpTop on YouTube to find out more information. Do you think BumpTop could replace the existing desktop metaphor? Why or why not?

  2. BumpTop is one GUI for Windows that may make it. But Microsoft also developed an alternative interface for its operating system. Microsoft BOB was designed to reassure novice users and introduce them to the diverse tasks they could accomplish with a computer. Microsoft BOB, however, is notorious for being a significant failure, and in 2010 became one of TIME Magazine's 50 Worst Inventions.

    • At about 5 minutes into the video, the narrator creates a document. If the interface looked more modern, would BOB still be useful for some users?
    • Why do you think BOB failed?
    • Are there any parts of BOB that might be useful for interfaces today? What are they, and why?

  3. Even though the desktop metaphor is persisting, what is underneath it is changing radically. More and more of the interface takes place through a web browser. Opera, Safari, Firefox, Internet Explorer, and Chrome are the primary modern web browsers available today. As the Internet evolves, bringing larger and faster hardware as well as incerased bandwidth, so too does the Web evolve. A web-based interface used to have relatively limited interactivity, but HTML5 has changed that in a big way. HTML5 is recent update to the HTML standard offering many new and improved features, including natively supporting more interactivity. Not all browsers implement HTML standards the same way ¨C you can use html55test.com to test your own browser and see which features are supported. Here are examples of pages using some of HTML5s interactive features:

    Were you surprised at some of the interactivity you experienced when you visited these sites? Could some of these new interactions be used in a new operating system instead of the existing desktop metaphor? What could be some limitations of this approach, and what could be gained?

    Try IT: making your own metaphors
    On your computer, open up any text editor, like Notepad. Copy and paste the code below, from Javascript-coder.com:

    <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <title >Form Page: sampleform</title> </head> <body> <h1>Sample form page</h1> <form id='sampleform' method='post' action='' > <p> Name: <input type='text' name='Name' /> </p> <p> Email: <input type='text' name='Email' /> </p> <p> <input type='submit' name='Submit' value='Submit' /> </p> </form> </body> </html>

    Save this file with a .html extension, so it will be recognized by your web browser, then double-click on it to open it. You should see a form like this:

    html form

    When you created this file, you may not be aware that you were using metaphors there too - the functions called copy and paste.

    • What is it like to copy and paste something in the non-digital world?
    • What other metaphors are present here? In other words, how is this form like a paper form, and how is it different?
    • Now click on the Submit button. What happens? Is that what you expected?

Moving on

For technology interface metaphors to be useful and durable, they must serve their purposes without imposing additional overhead (having to click too many times to get to what you want, incorrect assumptions about what you are trying to accomplish) for task completion. However, what works in a traditional environment, like the computers in the computer lab or at a bank, may not be the right fit for something like a smartphone or a tablet. As you use interfaces in both the physical world and the digital, examine the affordances, or those qualities that help you perform your task, as opposed to those that get in your way. You may be surprised at the places you find that could use improvements!