Syllabus

Discuss class goals, objectives and expectations. The Syllabus can be found on the eCompanion.

Class Blog

Several of your assignments in this course will require that you post to a class blog. Begin this week by creating a class blog for yourself.

Introduction to Interface Design Concepts

Let’s step back and look at the big picture of our field for a moment. We can break up our discipline into some different areas and consider them.

Visual Design for the Web

By this I mean specifically working on the design of how stuff on the web is going to look. Your main tools are:

  • Photoshop
  • Illustrator
  • Fireworks
  • maybe Flash

We spend a lot of time working on:

  • developing good typography
  • understanding color theory
  • important visual design principle

We look specifically at how to apply those principles to the medium of the web, which is significantly different from other media.

Interaction Design

How are things going to work on a web site or in some information system?

How are users going to get from place to place to accomplish the tasks they need to do?

We spend a lot of time on building menus of various sorts, and working with navigation. Clearly, there is a lot of cross-over with the visual design part we just talked about.

Although we focus on web design here, there are a lot of other places we can think about interaction design. Some examples:

  • Kiosks
  • bank machines
  • DVD players
  • DVRs
  • mobile devices

Information Design & Usability

This is the part of the field where we interact with the content itself, and try to determine how to best organize content for its target audience’s consumption.

Obviously, this is an incredibly tricky thing to figure out. There is no one obvious path.

Often what the designer and/or client thinks is the clear way forward, turns out to be totally off base with users.

This leads to testing and trying to determine what really works.

There is a clear interconnection between the visual design, interaction design, and information design. They all have to work together to create a cohesive project, and it is not always clear where one stops and the other starts.

Front End Development

This involves taking the visual design that you made, or was handed to you, and finding the best way to bring it into HTML, and using CSS effectively to abstract the styling away from the structure (and content) of the document.

It also involves using the right combination of strategies to create the proper interactivity for the site. This can be done with Javascript (jQuery), Flash, Flex and other tools.

Front end developers need to have a very solid foundation in the design fields, as often design solutions need to be modified or re-thought to accommodate technical limitations and other technical considerations.

There are many ways of doing things, and finding the best method to suit the project involves a different kind of problem solving and creativity from what you employ on the visual design side.

Back End Development

This is where we learn how to use server side technologies to make sites dynamic.

We learn how to build and work with databases, and use middleware scripting technologies such as PHP to bring that content into our projects.

We learn how to work with popular content management systems such as WordPress, and even build our own custom systems. Creativity in this field is found in the beauty of programming, where we learn how to convert information into data, and then convert it back again on the fly.

There is a very large amount of work in this field that we don’t get into here at Art Institute. There are a lot of programming environments we don’t explore. We don’t get very heavily into servers and network administration. We don’t get much into security or hardware optimization. Those areas are for another program in another school.

Marketing on the Web

This is an area we touch on, but do not get into deeply. It connects to design because it is about communicating and often using visual language to bring potential users in contact with the content we work with.

On the technical side, there is a lot of work to do with SEO (Search Engine Optimization). Also, there are tools for tracking traffic to our websites, and ways of analyzing user’s behavior.

These are services we can potentially offer our clients, or make us more attractive to employers.

There are people who study marketing specifically, and go into this stuff in much more depth.

Where does Interface Design fit in?

Interface design cuts across all the design disciplines we talked about, including the visual design, information design, and the interaction design.

The interface designer looks at the big picture of the whole project (say a website) and its information design, then creates an interface that will best work with that information design.

The interface designer looks at the small picture too, such as the use of icons and tiny widgets used to clue users in on what they can do and how they can interact with the project.

The interface designer puts together the right sets of controls to make interacting with a project easy and seamless.

If the interface designer has done his/her job well, the user won’t really notice the interface at all.

Short List

Design Disciplines
  • Visual design for the web
  • Interaction design
  • Information design and Usability
  • Interface design
Development Disciplines
  • Front End Development
  • Back End Development
Related Fields
  • Marketing
  • Search Engine Optimization
  • Server / Network Administration

Don Norman, author of The Design of Everyday Things

Design principles as proposed by Don Norman.

Visibility

The more visible functions are, the more likely users will be able to know what to do next. In contrast, when functions are “out of sight,” it makes them more difficult to find and know how to use.

Feedback

Feedback is about sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity. Various kinds of feedback are available for interaction design-audio, tactile, verbal, and combinations of these.

Constraints

The design concept of constraining refers to determining ways of restricting the kind of user interaction that can take place at a given moment. There are various ways this can be achieved.

Mapping

This refers to the relationship between controls and their effects in the world. Nearly all artifacts need some kind of mapping between controls and effects, whether it is a flashlight, car, power plant, or cockpit. An example of a good mapping between control and effect is the up and down arrows used to represent the up and down movement of the cursor, respectively, on a computer keyboard.

Consistency

This refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks. In particular, a consistent interface is one that follows rules, such as using the same operation to select all objects. For example, a consistent operation is using the same input action to highlight any graphical object at the interface, such as always clicking the left mouse button. Inconsistent interfaces, on the other hand, allow exceptions to a rule.

Affordance

is a term used to refer to an attribute of an object that allows people to know how to use it. For example, a mouse button invites pushing by the way it is physically constrained in its plastic shell. At a very simple level, to afford means “to give a clue” (Norman, 1988). When the affordances of a physical object are perceptually obvious it is easy to know how to interact with it.

More from Don Norman

The Design of Everyday Things, on Amazon (there is a copy in Doc Sharing on the eCompanion)

Interface Design in Software

We have looked at some physical things and talked about their usability, and some key principles that make them more or less usable.

How does this affect the world of software? Or the world of the web and web applications in particular?

In software, we talk about whether or not an application is “intuitive” or not.

Jef Raskin, the original Macintosh interface designer, pointed out that “intuitive” is really the wrong word. “Familiar” is more on target.

When designing software it helps to try to pinpoint where on this continuum your users will likely be.

7-11-2013 3-28-16 PM

Some software can take a lifetime to learn and be very complex, some can be simple and straight forward to use.

You can’t expect software that has a wide open canvas, and a huge number of tools/features/effects (like Photoshop), to be completely intuitive.

Nor should you expect your users to have to learn how to use something to accomplish a task they only need to do once.

Patterns Can Help

Lucky for us, we don’t have to start from scratch. A huge amount of work has gone into finding familiar sets of controls and configurations that work. These are called patterns. Instead, our job is to find the correct pattern, or combination of patterns for our particular application.

7-11-2013 3-31-55 PMThere is another book which was seminal in the ideas of patterns for familiarity: A Pattern Language: Towns, Buildings, Construction. However, it has to do with architecture.

This book identifies over 200 patterns for buildings and communities that make them more human and livable.

Researching Patterns

A lot of what we are going to be doing in this class is researching the patterns that have been used to design interfaces and finding our own combinations for them.

southwest airlines interface

Case Study: Kayak.com

What sort of design patterns occur on Kayak.com?

Kayak.com

Design Funnel

A road map of when to use which tools to stimulate better work.

Design Funnel PDF

  1. Define Values and Goals
    • Why does your museum even need a website?
    • What passion inspired the museum to exist in the first place?
    • What 3 key phrases identify how this museum is different from all the rest?
  2. Discover Moods and Metaphors through Association
    • Write your key phrases at the top of three columns on a sheet of paper.
    • Without allowing any negativity or filter on your thought process, write in each column other words, concepts, or phrases that the key phrase inspires. Seemingly random is okay; you can worry about weeding later. Pour out tons of words to fill the page.
    • Now go through your page and circle all the words or phrases that seem to capture the essence of your museum and its audience. Especially focus on words with emotional impact or that spring happy thoughts.
    • Finally, go review your answers to step 1. Do your circled concepts jibe with those needs and passions?
  3. Generate Ideas and Define a Concept
    Now that you have lots of words and phrases that form associations for your museum identity, define an overall concept for your site design.

    • Spend some time looking at a variety of designs from architecture to fine art to fashion.
    • Further contemplate your phrases by looking at examples of their opposites.
    • Look at websites for other museums and try to articulate what the design concept is being used.
    • Look for websites that use your phrases but in entirely different industries.
    • Jot down a number of ideas that capture a design concept/theme/visual metaphor for your site. Contemplate them before deciding on a single direction to go.
    • Try defining your design concept in a single sentence.
  4. Create a Visual Language
    Jot down some notes about the following design elements, prior to using tools such as Photoshop to put them into use in a mockup. Then loosely play with them a bit on the screen together.

    • Types of images
    • Color palette
    • Choice of font and style of typography
    • Page form/shape
    • Specific layout – wireframes
  5. “Design” It
    This is the part of the exercise you will actually do as the Museum Home Page mockup starting next week.

Preproduction: Wireframes

When planning your site, you must do a lot of research and then begin drawing some rough layouts. The research involves discovering as much as you can about the company, topic, or other entity the site is about, its intended audience, and the scope of the site (how big and complex it will be.) Then you can figure out how to break the web pages out into page content areas.  You did this last week in your Project Home Content assignment.
wireframe sample for a news site, gridless

Once you’ve decided upon all the content areas that are appropriate for your site, it’s time to draw up a few wireframes. A wireframe is an illustration of the layout of fundamental elements in the web page’s interface. Typically, wireframes are completed before any additional artwork is developed. Carefully planning your overall layout, before you create any graphics or even select color palette and typography, can eliminate a lot of headaches later on.

Wireframes can be created by hand or by using a variety of software programs. Visio is software that is ideally suited for wireframing, but it is expensive. Sometimes designers simply use Word, Excel, or Illustrator.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

Student Work

Click through for a larger version of each image.

Wireframe1 Wireframe2 Wireframe3

How to create a wireframe:

  1. Decide on which page elements will be included (again, you did this last week in your Project Home Content assignment.)
  2. Use a ruler or draw carefully to indicate the placement of the various page elements within the browser. Take your time to show clean boundaries. Imagine that you will be submitting this work to a paying client. Some of the content may go below the bottom of the browser window; go ahead and show the entire page above and below “the fold.”
  3. Label each of the page elements.
  4. Each wireframe for a given project should include the same page elements, which were previously determined.
  5. Instead of drawing, you may use software instead—-but take care to include all of the page elements, and label each element. Don’t get too detailed! There should only be rectangles and labels.