Interfaces are all around us. We tend to think of the digital environment as being the primary interface tool in our lives, but in actuality we are surrounded by interfaces. In the simplest terms, an interface is a tool for dialogue. The user makes a request (input) and the interface responds to that request (output). Generally speaking, we are willing to make the effort with input, but we expect more in return from the output - the more effort required by an interface, the more we expect in return. This effort isn't always easily measured, as it often takes place subconsciously in fractions of a second.

Requires minimal effort/ability

Requires some effort/ability

Requires additional effort/ability

Some interfaces are more successful at this interaction than others. That isn't to say that everything should be easy to use, as that would make our world exceptionally boring. We like conflict and struggle as it gives us a sense of achievement, but the interface must return the favor in terms of an accomplishment.

Dan Saffer does an excellent abridged guide to the history of Interaction Design in his book "Designing for Interaction: Creating Innovative Applications and Devices, Second Edition." You can read the excerpt here [you will be prompted to login to the Columbia Library using your Oasis ID to access this chapter].

Don Norman, of the Nielsen Norman Group, is a leading researcher on interaction design. His Ted Talk, "3 ways good design makes you happy," focuses on our emotional reaction to interface design

This Week's Assignment (3 parts)

Comment below: Based upon the reading from Saffer and/or the video from Norman, how do you see the role of interface design as it applies to your specific area of study?

Create your own update in our community: Share four examples of interface design that you have observed:

• 1 example of succesful interface design
• 1 example of unsuccessful interface design
• 1 example of successful, atypical interface design - something that creates interaction in a form that is novel or a paradigm shift in the way we interact with an interface
• 1 example of a tangible, real-life interface - a tangible product or device

In your update, include links to or pictures of each interface and provide a short description for why you selected the specific interface.

To create an update in Scholar, click on the Community tab. Under "Your Communities" in the left column, select the Interface Design 1 community. Once on the main community page, hover over the community name at top left and select "Updates." From this page, you can post an update to the Community.

Please note: posting an update without first being on the community page will result in the update appearing on your personal profile (like a Facebook status update to your timeline) and it WILL NOT appear publicly on our community page for other students to comment on.

Comment on other students' updates: Respond to and provide feedback via comments to at least three other students' interface example updates.

We will begin work on your midterm project this week. Please check the notifications above for a request to start your assignment. You will also find the assignment and details from within the Creator tab. The final draft of your midterm wll be due on March 13th.

As an interface designer, we frequently inhabit the awkward space between competing viewpoints - what the client wants and needs (or thinks they want and need), what the audience wants and needs (or thinks they want and need), what the timeline, budget, and ability of the team can handle. A good interface designer acts as the guiding hand to a project, mediating between these parties for the greater good of the finished piece.

This mediation process - which can sometimes require an assertive stance, as some clients and users can be obstinant and inflexible in what they think is best - is greatly assisted by a robust vocabulary and understanding of the princples of interaction design and usability to support your recommendations. For example, you may know that using buttons in a mobile app that don't match the native interface is a bad idea, but your client is going to be more easily persuaded if you let them know that their non-native buttons don't afford clicking as much as the native buttons, and this additional learnability curve could result in lower usability for the user, while competing with the visual consistency of the device. [words in italics are all terms from the Usability First link below]

Bruce Tognazzini: First Principles of Interaction Design

Jakob Nielsen: 10 Usability Heuristics for User Interface Design

Usability First: Interaction Design Glossary

There is no secret bible of interface design, as each project has its own unique set of requirements, stakeholders, and audience. What is necessary for one project might be overkill, off brand message, or too simplistic for another project. Instead, as you become more comfortable and aware with these principles, you will be more skilled with applying the correct ones to your own work.

This Week's Assignment (3 parts)

Comment below: Based upon the reading from Nielsen and Tognazzini, what principles of interface design do you think are the most important? What principles are often overlooked?

Create your own update in our community: Select a new interface to critique - either positively or negatively - using the terms and ideas from this week's reading to support your analysis.

Comment on other students' updates: Respond to and provide feedback via comments to at least three other students' updates. Suggest additional ideas or principles from the reading that you think they may have overlooked.

Knowing who you are designing for is one of the most important foundational items in interface design. It isn't enough to just start working; you need to analyze your two primary stakeholders that are present in any project - the client and the audience. As an interface designer, you stand at this intersection. Having an understanding of the intention of both of these parties, and being able to mediate between them will result in a more participant-centered design that also makes a client happy.

"Brand" is a tricky word, as it makes people nervously think of corporate "markertese" and "the man." But every client has a brand - broadly, every individual has a brand. I like to think of brand as something more than just the combination of logo and colors. The Brand is the differentiator. It's the thing that sets people/companies/etc apart in a field where they may be otherwise identical in terms of what they provide. Think, for example, of the following companies. They sell the same basic "thing" but do it in radically different ways that align with their brand identity:

Read more about this in Method's excellent article Brand as Context in Interaction Design.

The flip side of understanding your client is to understand your audience. Though many call the field "user research" or UX - "user experience," there is a danger in referring to your audience with the broad term "user" as it is generic and faceless. Don Norman expands upon this idea in his article "Words Matter. Talk About People: Not Customers, Not Consumers, Not Users."

You can't make 100% of people happy 100% of the time. No successful product or service starts from trying to make everyone happy. Instead, the focus in on a specific audience segment and make that audience totally happy. This can then create ripple effects out to a broader audience.

REQUIRED READING: Excerpt from Chapter 9 of The Inmates are Running the Asylum by Alan Cooper

This Week's Assignment (3 parts)

Comment below: What are the dangers in designing for a very narrowly defined audience? What are the dangers of designing for too broad of an audience? And how can brand context influence who the audience is?

Create your own update in our community: Using the interface you will be analyzing for your midterm, create an update in our community answering the following questions about your primary audience. Be specific! Males and females between 18-80 that make $20k-$200k/yr is NOT an acceptable audience segment. You don't need to try to define ALL users - focus on the PRIMARY audience.

1. Gender:
2. Age:
3. Income level:
4. Technological background:
5. Why does the user use this site?
6. How does the user feel about the brand of this site?
7. Why does the user choose this site over others? (look at competing sites and analyze their differences)
8. What could be done to improve the user’s experience?

Comment on other students' updates: Respond to and provide feedback via comments to at least three other students' updates.

The best way to test an interface is to observe actual people interacting with the artifact. It is important to gain an empathetic understanding of how other people use technology, as you are already excluded from being a "normal user" because of your background and knowledge of a project.

From UX Myths:

Myth #14: You are like your users

When designing a website, it’s easy to assume that everybody is like you. However, this leads to a strong bias and often ends in an inefficient design.

You evidently know a lot about your services and your website; you’re passionate about them. Your users, on the other hand, are likely to not care that much. They have different attitudes and goals, and just want to get things done on your website.

To avoid this bias, you need to learn about your users, involve them in the design process, and interact with them.

(The rest of the list of UX Myths is a pretty good read, if you are so inclined.)

Russ Unger, author of Designing the Conversation, bristles at using the term "user testing" as it implies that the burden is on the user to "pass" the test.

So, how do you write a successful testing script?

• Turn User Goals into Task Scenarios for Usability Testing
• Nondirected Interviews: How to Get More Out of Your Research Questions

This Week's Assignment (2 parts)

Write your Testing Script: Check in the notifications tab or in Creator - you will have received a work request to write the testing script for your midterm. This testing script is due by February 22nd for peer review.

Peer Review Testing Scripts: You will receive review requests for other students' testing scripts. Please submit your reviews by February 27th.

You will receive requests to review up to three of your peer's testing scripts this week. If you don't receive any reviews, please send me a message via Scholar or to lliss@colum.edu.

When reviewing the testing scripts and providing feedback, make sure to consider:

1. Are the tasks relevant to the audience?
2. Are the questions too leading?
3. Are the questions too broad? To narrow?
4. Are there too many/too few questions? Is the test too burdensome for the user?
5. Is there anything the tester has overlooked?

You may find it useful to complete the testing script yourself to provide more context for your analysis. Please complete your reviews by February 27th to allow your peers time to revise their scripts before testing them on an audience.

Now that you have your finalized testing script, it is time to test it out on some guinea pigs. Some resources for conducting your testing:

• When to Use Which User-Experience Research Methods
• How Many Test Users in a Usability Study?
• Getting Guerilla With It
• Collaborative User Testing: Less Bias, Better Research
• Running a Usability Test

For your midterm project, you will be using the results from your user testing on at least three audience members. Please make sure to find users that fall within the umbrella of the primary or secondary audience for your interface; testing results from people that would not otherwise use the interface won't provide useful data.

The results from this testing should be compiled in the first draft of your midterm project, which is due for peer review in Week 7.

Interface design is about more than just the navigation - it's about the experience of using the interface as a whole. The interface should be consistent in its display so that they user can easily navigate through it. Even navigation is broader than the simple "top bar" display. When used properly, navigation is used throughout a page to assist the user.

Web-based Navigation:

• Navigation Design Patterns from SixRevisions

Video Game Navigation:

• User interface design in video games from Gamasutra
• Game UI By Example: A Crash Course in the Good and the Bad from Tutsplus

Natural User Navigation:

• New Design Practices for Touch Free Interactions from UX Mag
• Natural User Interfaces Are Not Natural from Donald Norman

Gestural Navigation:

• Gestural Control: The Good, the Bad, and the Ugly from Donald Norman
• Communicating Interactive Gestures from O'Reilly

This Week's Assignment (3 parts)

Comment below: Is there such a thing as too much navigation? Use examples from the reading above to support your claim.

Create your own update in our community: Natural and Gestural interfaces are relatively new, so we are still in a bit of a wild west period with them. How do you see these types of interfaces being used in the future? Do you think solutions providers (console makers - XBox, PS, Wii, etc) and device manufacturers (Apple, Android, etc) will ever formalize these input types to provide a consistent experience?

Comment on other student's updates: Respond to and provide feedback via comments to at least three other student's updates. Suggest additional ideas or principles from the reading that you think they may have overlooked.

For your final project, we will be expanding upon the findings from your midterm into a redesigned interface. In this iteration, we will start thinking about the audience in a broader term which is called a "persona."

Personas are was of thinking about your audience base as a single, idealized user. As mentioned previously in the course, the term "user" can seem generic and broad, and it is hard to put a face to. Personas allow you to invent people to act as your empathetic guide throughout the process. They are especially useful when designing within a group, as they align the team around a common audience identity.

Persona Resources

• Persona Grata: Welcoming users into the interaction design process from UX Magazine
  
• Ad-Hoc Personas & Empathetic Focus from Don Norman

Persona Samples and Templates

• New MailChimp: User Persona Research
• Todd Zaki Warfel's data-driven personas
• Persona template from "Designing the Conversation"
  

This Week's Assignment (3 parts)

Comment below: Don Norman seems to imply that personas can be created with relatively little research, while Todd Zaki Warfel's personas are full of research. Which do you think is the most appropriate solution and why?

Create your own update in our community: Create a persona for the primary audience of the interface you worked with on your midterm using any format that you prefer (either using the examples above as a guide, or any of the many variations of personas available from a quick Google search, or from creating your own format)

Comment on other student's updates: Respond to and provide feedback via comments to at least three other student's updates. Suggest additional ideas from the reading that you think they may have overlooked.

Now that we have targeted our problem areas and we have an idea of who we are designing for, it is time to get down to the nuts and bolts of interface design - the information architecture.

Broadly defined, information architecture "focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system." [Usability.gov]

• The Difference Between Information Architecture (IA) and Navigation
• Flexible Fuel: Educating the Client on IA

There are many methods for tackling IA, which can be used on their own or in combination. Some require an extensive amount of work - the broader and deeper the content of an interface, the more time intensive a thorough analysis of the IA is required.

• Content Analysis Heuristics
• From Content Audit to Design Insight
• How We Read

One of my favorite methods for starting with an IA analysis is card sorting. This is most useful for navigation structures, but can also be applied to any content structure within an interface, for example: multiple pages in a task flow, content items on a landing screen or homepage, or any related items that need to be grouped together in a more meaningful fashion.

• Card Sorting from Usability.gov

This Week's Assignment (3 parts)

Comment below: We typically think of information architecture as it relates to web-based interfaces, but how do you think it can be applied to broader types of interfaces - specifically mobile design, applications, software, and games?

Create your own update in our community: Sign up for a free account with ConceptCodify, and create a card sort. I will assign you all to groups of 3-4, and you will get the sorting results from your peers. Card sorts should be setup with ConceptCodify by Thursday at 10pm.

Comment on other student's updates: Complete the card sorting requests from your peers by Sunday at 10pm.

There are many different methods for beginning work on an interactive project. While you might want to dive right in and start building a project, your sanity and timeline can be saved by investing some time at the beginning of the process for some low-tech pre-production. This will allow you to explore multiple ideas and solutions, test them out on your audience, and revise prior to actually commiting any tech resources to building.

A common approach to this process might look something like this:

1. Ideation: Sketching, looking at reference sites, brainstorming ideas (individually or as a group), mind mapping.
2. Prototyping: Wireframes, paper prototypes, interactive prototypes
3. User testing: Presenting low to medium fidelity concepts to users for analysis and feedback
4. Iterate: Revise and refine prototypes, and then test again
5. Production: Live development of a vetted concept

With this process, you can address problem issues early on in the process, saving you valuable time when it comes to development. It helps get an entire team on board behind one proven, effective solution, encourages audience feedback, and involves your stakeholders in the process.

Resources:

• Smashing Magazine excerpt “Sketching, Wireframing & Prototyping”
• Lovely UI
• UI Design Patterns URL
• A shorthand for designing UI flows

This Week's Assignment (3 parts)

Comment below: How do you think this process could benefit your own production process? Do you currently use any of these techniques, and what are your thoughts on them? If you don't use them, what would encourage you to make the change?

Rapid Wireframing: Start with the main page of the interface you are redesigning for your final project, and do a content analysis / quick outline of the important features and navigation items that you think should be in the redesign. You do not and should not limit yourself to what is currently on the interface; instead think of the content required for the redesign. Once you have that analysis in place, get six sheets of paper, a pen or pencil, and a stopwatch (your phone may have one, or there are online stopwatches you can use). Label each sheet of paper 1, 2, 3, 4, 5, 6. Starting with the first sheet, set the timer for 2 minutes and sketch a quick wireframe of how you could redesign the interface. Repeat this process for each of the remaining sheets - at the end, you should have 6 different wireframe options. Look through your six wireframes, and select your favorite. Do an update in our community and write about your rapid wireframing experience. Include which design you picked, and upload a picture of the wireframe.

Comment on other students' updates: Respond to and provide feedback via comments to at least three other students' updates.

Paper Prototyping is a technique that blends together wireframing and UI flows to create a low-fidelity version of an interface for testing on an audience.

Examples of Paper Prototypes

• Account Creation Flow
• App Testing 
• Mobile Game 
• Coloring App for Kids 

I wrote an article for .NET magazine about Rapid Paper Prototyping, which combines elements from the rapid sketching that you did for last week's class.

This Week's Assignment (3 parts)

Create your own paper prototype: Using the techniques above, create a paper prototype and test it on at least two users. The paper prototype should be different that the wireframe sketches - wireframes are a single screen, while a paper prototype is about testing the functionality of a task. You should prototype the UI flow for completing a task - ideally one that you used in your user testing on the midterm. For example, if I did my midterm project on Oasis and one of the tasks users had was to register for a class, my paper prototype would reflect the updated, redesigned steps that I would like to test for registering for a class.

Create your own update in our community: Take pictures of your paper prototype, and write about the experience of creating it and testing it on users.

Comment on other student's updates: Respond to and provide feedback via comments to at least three other student's updates. Suggest additional ideas or principles from the reading that you think they may have overlooked.

Get started with Balsamiq. You will be sent an email link with your account and more information.

You will receive requests to review up to three of your peers' final project drafts this week. If you don't receive any reviews, please send me a message via Scholar or to lliss@colum.edu.

When reviewing the projects and providing feedback, make sure to consider:

1. Is the interface an improvement over the existing interface?
2. Are there any features or functions that you think are being overlooked?
3. Is the new interface more intuitive for the audience?

Please complete your reviews by April 27th to allow your peers time to revise their work before submitting them for publication.

The final version of your work is due by Friday this week for grading. Thanks for a great semester, and enjoy yur summer!