Presentation

We will take some quality time to review—and give feedback—for the following assignments which have been submitted so far:

  • Design Brief
  • Homepage Wireframes

User Behavior Patterns

These are what we need to keep in mind when designing web interfaces! These patterns do not describe user interface elements, but describe aspects of users we can all recognize. Can you think of some recent examples in your web experience?

Safe Exploration

“Let me explore without getting lost or getting into trouble.”

When someone feels like she can explore an interface and not suffer dire consequences, she’s likely to learn more and feel more positive about it than someone who doesn’t explore. Good software allows people to try something unfamiliar, back out, and try something else, all without stress.

Google Maps Street View

Google Maps Street View

Google Earth View

Google Earth View

Google Maps Satellite View

Google Maps Satellite View

Google Maps Map View

Google Maps Map View

Instant Gratification

“I want to accomplish something now, not later.”

People like to see immediate results from the actions they take; it’s human nature. If someone starts using an application and gets a “success experience” within the first few seconds, that’s gratifying! He’ll be more likely to keep using it, even if it gets harder later. He will feel more confident in the application, and more confident in himself, than if it had taken a while to figure things out.

Amazon Add to Cart

Amazon Add to Cart

Amazon One Item in Cart

Amazon One Item in Cart

Satisficing

“This is good enough. I don’t want to spend more time learning to do it better.”

When people look at a new interface, they don’t read every piece of it methodically and then decide, “Hmmm, I think this button has the best chance of getting me what I want.” Instead, a user will rapidly scan the interface, pick whatever he sees first that might get him what he wants, and try it even if it might be wrong.

The term “satisficing” is a combination of “satisfying” and “sufficing.” It was devised in 1957 by the social scientist Herbert Simon, who used it to describe the behavior of people in all kinds of economic and social situations. People are willing to accept “good enough” instead of “best” if learning all the alternatives might cost time or effort.

Where can I find what I need?

Where can I find what I need? (Art Institute Interface)

Changes in Midstream

“I changed my mind about what I was doing.”

Occasionally, people change what they’re doing in the middle of doing it. Someone may walk into a room with the intent of finding a key she had left there, but while she’s there, she finds a newspaper and starts reading it. Or she may visit Amazon to read product reviews, but ends up buying a book instead. Maybe she’s just sidetracked; maybe the change is deliberate. Either way, the user’s goal changes while she’s using the interface you designed.

Switching Tasks Midstream

Switching Tasks Midstream on Bank of America Interface

Deferred Choices

“I don’t want to answer that now; just let me finish!”

This follows from people’s desire for instant gratification. If you ask a user several seemingly unnecessary questions while he’s trying to get something done, he’d often rather skip the questions and come back to them later.

For example, some web-based bulletin boards have long and complicated procedures for registering users. Screen names, email addresses, privacy preferences, avatars, self-descriptions…the list goes on and on. “But I just wanted to post one little thing,” says the user plaintively. Why not skip most of the questions, answer the bare minimum, and come back later (if ever) to fill in the rest? Otherwise he might be there for half an hour answering essay questions and finding the perfect avatar image.

Twitter Sign Up

Twitter Sign Up

Twitter Edit Profile Options

Twitter Edit Profile Options

Incremental Construction

“Let me change this. That doesn’t look right; let me change it again. That’s better.”

When people create things, they don’t usually do it all at once. Even an expert doesn’t start at the beginning, work through the creation process methodically, and come out with something perfect and finished at the end.

Quite the opposite. Instead, she starts with some small piece of it, works on it, steps back and looks at it, tests it (if it’s code or some other “runnable” thing), fixes what’s wrong, and starts to build other parts of it. Or maybe she starts over if she really doesn’t like it. The creative process goes in fits and starts. It moves backwards as much as forwards sometimes, and it’s often incremental, done in a series of small changes instead of a few big ones. Sometimes it’s top-down; sometimes it’s bottom-up.

Builder-style interfaces need to support that style of work.

Building a Facebook Page Incrementally

Building a Facebook Page Incrementally

Habituation

“That gesture works everywhere else; why doesn’t it work here, too?”

When one uses an interface repeatedly, some frequently used physical actions become reflexive: typing Control-S to save a document, clicking the Back button to leave a web page, pressing Return to close a modal dialog box, using gestures to show and hide windows, or even pressing a car’s brake pedal. The user no longer needs to think consciously about these actions. They’ve become habitual.

This tendency certainly helps people become expert users of a tool (and it helps create a sense of flow, too). Habituation measurably improves efficiency, as you can imagine. But it can also lay traps for the user. If a gesture becomes a habit and the user tries to use it in a situation when it doesn’t work or, worse, does something destructive then the user is caught short. He suddenly must think about the tool again (What did I just do? How do I do what I intended?), and he might have to undo any damage done by the gesture.

What happens when you click the back button after viewing a single image in Google Images?

What happens when you click the back button after viewing a single image in Google Images?

Spatial Memory

“I swear that button was here a minute ago. Where did it go?”

When people manipulate objects and documents, they often find them again later by remembering where they are, not what they’re named.

Take the Windows, Mac, or Linux desktop. Many people use the desktop background as a place to put documents, frequently used applications, and other such things. It turns out that people tend to use spatial memory to find things on the desktop, and it’s very effective. People devise their own groupings, for instance, or recall that “the document was at the top right over by such-and-such.” (Naturally, there are real-world equivalents too. Many people’s desks are “organized chaos,” an apparent mess in which the office owner can find anything instantly. But heaven forbid that someone should clean it up for them.)

Working with Files and Folders in Dropbox.com

Working with Files and Folders in Dropbox.com

Prospective Memory

“I’m putting this here to remind myself to deal with it later.”

Prospective memory is a well-known phenomenon in psychology that doesn’t seem to have gained much traction yet in interface design. But I think it should.

We engage in prospective memory when we plan to do something in the future, and we arrange some way of reminding ourselves to do it. For example, if you need to bring a book to work the next day, you might put it on a table beside the front door the night before. If you need to respond to someone’s email later (just not right now!), you might leave that email on your screen as a physical reminder. Or, if you tend to miss meetings, you might arrange for Outlook or your Palm to ring an alarm tone five minutes before each meeting.

Basically, this is something almost everyone does. It’s part of how we cope with our complicated, highly scheduled, multitasked lives: we use knowledge “in the world” to aid our own imperfect memories. We need to be able to do it well.

Select Reminders on Google Calendar

Select Reminders on Google Calendar

Streamlined Repetition

I have to repeat this how many times?”

In many kinds of applications, users sometimes find themselves having to perform the same operation over and over again. The easier it is for them, the better. If you can help reduce that operation down to one keystroke or click per repetition or, better, just a few keystrokes or clicks for all repetitions then you will spare users much tedium.

Find and Replace dialog boxes, often found in text editors (Word, email composers, etc.), are one good adaptation to this behavior. In these dialog boxes, the user types the old phrase and the new phrase. Then it takes only one “Replace” button click per occurrence in the whole document. And that’s only if the user wanted to see or veto each replacement if they’re confident that they really should replace all occurrences, then they can click the “Replace All” button. One gesture does the whole job.

Select All Unread Messages in Gmail

Select All Unread Messages at Once in Gmail

Keyboard Only

“Please don’t make me use the mouse.”

Some people have real physical trouble using a mouse. Others prefer not to keep switching between the mouse and keyboard because that takes time and effort they’d rather keep their hands on the keyboard at all times. Still others can’t see the screen, and their assistive technologies often interact with the software using just the keyboard API.

For the sakes of these users, some applications are designed to be “driven” entirely via the keyboard. They’re usually mouse-driven too, but there is no operation that must be done with only the mouse; keyboard-only users aren’t shut out of any functionality.

Simply Use Tab Key and Enter Key to Complete Apple's Form

Simply Use Tab Key and Enter Key to Complete Apple’s Form

Other People’s Advice

“What did everyone else say about this?”

People are social. As strong as our opinions may sometimes be, what our peers think tends to influence us.

Witness the spectacular growth of online “user comments”: Amazon for books, IMDb.com for movies, photo.net and flickr for photographs, and countless retailers who offer space for user-submitted product reviews. Auction sites like eBay formalize user opinions into actual prices. Blogs offer unlimited soapbox space for people to opine about anything they want, from products to programming to politics.

Customer Reviews of Zulily at Reseller Ratings

Customer Reviews of Zulily at Reseller Ratings

Web Design Patterns: UI Patterns

ui-patterns.com

“User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.”

UI-Patterns.com

I encourage spending a lot of time at this site during this course.

Pattern Categories

  • Getting input: getting the user to input data, tailored to the context of use
  • Navigation: helping the user locate specific features and content
  • Dealing with data: allowing for the search, formatting, and browsing of data
  • Social: allowing the user to associate, communicate, and interact with other people
  • Miscellaneous

Web Design Patterns: jQuery UI

jqueryui.com

jQueryUI Home Page

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. This kit allow you to fit precoded design patterns into a site and tailor them for your users and branding. Take a look on the site at how a few of these work:

  • Interactions
    • draggable
    • droppable
    • resizable
    • selectable
    • sortable
  • Widgets
    • accordion
    • autocomplete
    • button
    • datepicker
    • dialog
    • menu
    • progressbar
    • slider
    • spinner
    • tabs
    • tooltip
  • Effects, such as color animations and hide/show

Using a Grid for Web Layout

Grid Concepts

Web layout that is based on an underlying grid looks more organized and professional.

Photoshop for Web Layout - Using a grid for web design

When the grid is then hidden, the design still holds together because the text, color, and graphic elements have been aligned.

The design element of repetition is easier to achieve as well, such as the even spacing between page content pieces.

Photoshop for Web Layout - coolhunting.com Photoshop for Web Layout - risdmuseum.org

You can create visual interest by breaking the grid, once most everything else is following its guides.

Using a Grid for Web Layout - nationalacademy.org
Activity

Study this collection of museum websites. How did they use grids for layout?

Download for Class Demo

Download the following real mockup file I created prior to coding this website for a client. It is based on a grid.

If you’re having trouble downloading, right-click on the link and select “Save link as”.

BusyKidz Tablet Mockup on a Grid

Photoshop for Web Layout - tablet web layout for BusyKidz based on a grid

Video

If you are not able to attend class today to see this demo, the following video does a good job of explaining the concepts of grid-based web layout.

Web Design – How do I use the grid in web design? by This Week in Web Design [33:42]

Steps from the Video
  1. Define your “standard unit”.
  2. Choose your goal.
  3. Explore different options.
Guidelines from the Video
  • Only make decisions inside your grid.
  • Look at your user goals and focus on them.
  • White space is as important as content.

Slideshow

Grids Are Good (Right?) by Khoi Vinh, 2007

Grids are good slideshow

Article

Grid-Based Web Design, Simplified from Smashing Magazine, 2010

Gridding Resources

960px Grid Templates for Photoshop and Fireworks

960px grid Photoshop template

1200px Grid Templates for Photoshop and Illustrator

1200px grid Photoshop template

Responsive Grid System

With the surge of mobile device usage on the web, we can’t rely on everyone viewing our site the same way. Responsive web design allows the site to adapt to the viewport of the device. This require coding that it more advanced than what we will cover in this course. However, it pays to start thinking about how your site will shift content. You can still align content to a grid! In fact, having content portioned into standard-ratio boxes makes it easier to do responsive design.

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.