Introduction to Interaction Design

Sample Lesson - Introduction

Lesson 1.03: (Inter)face to (Inter)face

If you thought robots taking over humanity was bad, just wait until they take over spiders.
(Source)

It's time to take things back to basics. All this big-picture psychological stuff is really important, but let's talk about what we'll actually be designing and analyzing. Because what web design's really about the interface.

An interface is basically a screen: it's what the user interacts with in order to use an item or to perform a task. When you get a little chilly and turn up the heat in your home, you're using an interface to interact with your heating system. The different parts of that interface (up and down arrow buttons, numbers, maybe a little thermometer graphic) guide you through it. And then whoever pays the gas bill comes in and tells you to put on a sweater if you're cold.

As technology progresses (and our robot overlords assume their rightful place above us) more and more things will be operated using an interface. New car dashboards and Chili's locations alike now use the help of touch-screen interfaces. Eventually, you'll be able to control everything in your house from a single interface, like some kind of futuristic MTV Cribs and a robot gas bill payer will be the one telling you to put on a robot sweater (whatever that is).

Sample Lesson - Reading

Reading 1.1.03a: Whatcha Looking At?

There are several elements that are present on pretty much every website or app and they're what any designer has to grapple with whenever they are making something. Design role call!

Typography: Letters, words, and text, baby! We read tons of stuff online, ranging from tiny image captions to big long, articles and all of it has to be readable. Font style (also called the typeface), size, color and weight (bold, light, etc.) are all super important, as is the positioning and layout of text. And it isn't like one font style (typeface) is the best in all situations. In fact, the opposite is true. The typography that's best for a newspaper article should be way different than the text of a popup warning message. The popup's text should big and bold to grab your attention right now, which is good for a small piece of text, but for 3,000 words on the price of corn in Peru? Not so much.

Images and graphics: Photos, logos, and infographics make up a lot of the web—and they can do a lot to communicate information, feelings, and ideas. It's important to have clear, sharp images that evoke what you need them to. They should also blend well into your overall interface.

Plus, it's important that the images themselves are "web quality," which means that they look good on a super high-resolution screen and can be resized depending on the size if the device you're using. This also includes animations, which can super complex and interactive. There are even programming languages that allow you to manipulate images and turn them into animations. That's how important animations are to the web.

Layout: Designing the layout means designing a way for all the parts of a webpage to fit together. How is content displayed? Is the navigation bar up top or on the side? Is all the content on the front page or do you "flow" through it by pressing buttons?

Back in the day, the web was simple enough that the most complex question you could ask yourself about layout was "Should I be conservative and stick to the tried and true one-column layout, or should I be daring and pick two?"

Now all bets are off, especially as more and more people access the web from devices like smart phones and tablets. Even three or four columns are possible…though we'd recommend just one column if you have any users who'd rather look at your site on a phone instead of a ridiculously large monitor.

Audio elements: Does your website make noise? How are audio elements triggered? Sometimes a little beep or toot can help guide a user to complete a task, but it can also be super, super annoying when the sound seems to come out of nowhere, particularly when it's a death-metal song, there isn't a way to turn it off, and you're on the quiet car of the train.

Tactile elements: Depending on what you're designing, touch may be an important factor in an interface. If you're designing a phone app or game, being able to move things around or trigger responses with your finger is important to the usability of the app. If you disagree, just think about satisfying is it when your phone buzzes after you clear a row on Candy Crush Saga. Oh, so satisfying.

We'll get into more specifics about this as we move into later lessons, but for now, it's good to keep these elements in mind as you begin to break down and analyze websites.

Sample Lesson - Reading

Reading 1.1.03b: Back to Basics

Now that you know what elements make up the interface, let's dive deeper into the best practices for actually making one. Our friends at Usability.gov have put together an introduction to user interface design. It contains an overview of some broad, conceptual ideas to keep in mind as you design. We'll be coming back to Usability.gov's outlines and standards throughout the course—turns out Uncle Sam knows a lot about making a good website.

Anyway, read through their article on user interface design and, while you do, have a ponder on these reflection questions:

• Why is important for an interface to be simple?
  
• What does consistency mean when it comes to design?
  
• How can non-typographical visual elements (read: non-words) communicate meaning?

Until you actually have a robot butler you can give orders to, interfaces will be important. So pay attention.

Sample Lesson - Reading

Reading 1.1.03c: The Unbreakable Interface Schmidt

There are some things that just can't be broken. No, not Kimmy Schmidt (or that early 2000s movie with Bruce Willis). This reading refers to the so-called "seven unbreakable laws "of interface design. These are highly conceptual ideas, more about human psychology than what color goes where. Still, it's an interesting analysis and you may find yourself looking twice at websites you use every day and saying, "Hmm, that's the law of guided action."

But enough of our introduction. Check out "7 Unbreakable Laws of User Interface Design" by Peter Vukovic. As you read, be sure to think over the following questions:

• How does the placement of elements (this article calls it "context") help a user decide what to do?
  
• Why is the default setting of an element important?
  
• What is the law of preferred action and why should we care about it?
  
• Which laws describes ways that a user be encouraged to interact with a website?

After reading this, you might think of ways these concepts apply to non-digital things and spaces, like your closet or refrigerator. Your gym locker might never be the same.

At least until you forget your gym clothes in there over the weekend—and no amount of Febreze can get it out.

Sample Lesson - Activity

Activity 1.03: Good Day, Sunshine

Now that you've learned all about interfaces, it's time to actually design one. We're going to have you redesign something you probably use every day (unless you have a pet rooster we don't know about): an alarm clock. Specifically, a cell phone alarm clock, because we're talking about computer interface designs. You'll draw a prototype of two interface screens:

1. The screen for how the user sets the time for the alarm to go off
2. The screen the user sees when the alarm suddenly wakes them up

This isn't just a chance for you to showcase those visual design skills. To do a really good job, you've got to think through some fundamental challenges. What actually goes into an alarm clock? We've listed some requirements and sub-questions below:

Requirement: The user should be able to set and change their wake-up time.

Sub-questions:

• How? With buttons? Using the keyboard?
• How do they specify AM or PM?

Requirement: The user should be able to set the volume and sound.

Sub-questions:

• Are there many choices?
• Is there a default setting?

Requirement: When the alarm goes off, the user should be able to navigate the interface even if they're extremely sleepy.

Sub-questions:

• What color or typography would work here?
• What size should the elements be?

Requirement: The user should have the option to either snooze their alarm or turn it off.

Sub-questions:

• Which button should be more prominent? Or are they equally prominent?
• Does the interface ask for confirmation before snoozing or turning off?

There aren't right or wrong answers to these questions, just decisions that you, the designer, have to make. So when you're done, we'd like you to write a 150 – 200-word paragraph explaining at least three of the decisions you made and why you think they contribute to a more efficient alarm clock. Some examples of decisions might be:

• Color choice
• The size of elements (how big or small something is)
• The placement of elements (how things are arranged)
• Font and typography
• Anything else that is a design decision!

As for your design itself, you can mock it up design by hand or using a computer program like Photoshop or an app with free options like NinjaMock. It doesn't have to be perfect but it should be clean and give us a good sense of what the app's supposed to look like on a cell phone screen. Just so we're on the same page, here's what a wireframe for a scheduling app could look like.

(Source)

You don't need to create the entire flow the way that image does, but you do need to two screens that show what a user would interact with to set the alarm and wake up. When you're done, you can take a picture or save it as a .jpeg and upload it along with your paragraph. Then you can hit snooze on this course until the next lesson.