Monday, July 26, 2010

Day 3 - Class Notes part 2

Day 3 - part 2

Digital Typography + Writing for the Web

organizing information

People SCAN for information

Inverted Pyramid - Journalistic : use topical sentences at the begining of each paragraph.

Also writing in an inverted pyramid is that the article can be slashed off at the end if it is too long and the main content is still there.

Also, prime realestate is in the top half, so that is where the main content/ important stuff should be.

Road Map

Take one of the bad interfaces and re-design it.
Use Lorem Ipsum text, so that the site is not in English.
2 sites a piece or 1 done really well

Day 2 Notes

Day 3 - Class Notes

Nav Purposes
Hierarchy - steer the user
Signposts "You are here"
User = :) You want the user to feel safe and not lost.
What's Available

Nav Structures
Global Nav aka Persistent Nav
(footer - might contain some navigation structures)
Breadcrumbs - The pathway between homepage and where ever you are
example: HOME > blah > blah > PAGE

(Site id)
Global Nav --> Sections > Subsections Nav --> (PAGES) : local nav, utilities, sitemap

Hierarchy Guidelines

Cut the Chatter - reduce the content where possible

Heat Map - typically F shape
find ways to pull away from that F shape

Strunk and White - Elements of Style
- reduce level of noise
- useful content > more prominant
- reduces scrolling

Follow Conventions
Since the web hasn't really been around that long we are still developing conventions. Most of the conventions we currently have are taken from other interfaces.

Metaphors for physical Interfaces:
Home Button is a House, Trash, Folders, locks, Shopping cart, Search is magnifying glass, Mailboxes, Envelopes, Attachments are paperclips or pushpin.

People expect to see these things and expect to use them in conventional ways. You can come up with your own you don't want to re-invent the wheel.

Categorizing + Relating Info
Spanning two columns with one header is a newspaper convention.

Week 2 Homework

MM2201 Assignment for week 3:
You will begin with your example of a difficult interface. Make sure it is a three dimensional object, not a digital or screen interface. If you need to, you can find a new object.
Redesign this interface to make it more easily usable. Utilize the feedback from the class when possible; analyze where the assumptions were made in the original design that made the interface a difficult one; try to minimize the number of steps required for completion; try to make the interface self-evident where possible, or at least self-explanatory.
· Begin by analyzing the goal(s) of the interface. What is this thing supposed to accomplish for the user?
· Then on to thumbnail sketches (of course).
· After sketching out several concepts, then take your strongest idea into Illustrator (or Photoshop if you’re more comfortable in that program, but Illustrator is recommended) and draw up a comp of your new interface idea.
· In a Word document, write the steps required by the old interface to accomplish the goal(s), and the steps required by your new interface. If there are particular assumptions that made the old interface difficult, then include how you addressed those to make the interface easier to use.

Homework 1 - (2) Interface

A Can of Soda

The Goal:
A single use container for a beverage that can be easily transported.

The Affordances:
The over all shape and size looks like it should fit into your hand. The tab on the top somewhat suggests that it should be pulled. The lip or rim of the can is curve shaped to put your lips onto it. It feels like there is liquid inside.

The Solution:
1. Pick up the can
Figure out what side is the top, the images and script might give an indication of what is the top. The fact that it rolls away when laid on it's side gives the indication that the round flat part is the bottom.

2. Open the Can
To get the liquid out one must pull the tab. This part is not so straight forward but the pull tab has the affordance of being "finger sized". You stick your finger under the tab. Because the can is made of aluminium, the tab is flexible but requires some strength to actually bend all the way. As the user initially bends the tab a sound might be heard if the beverage is carbonated. If the user stopped half-way and didn't really pull the tab far enough they would see a tiny opening near the tab. If they pull all the way at some point you can not pull anymore.

3. Bending Back the Tab
Potentially the tab might still be sticking up so when the user tries to pour the beverage or lifts it to their mouth it might poke them. After being poked they might figure out that they should bend it back.

4. Drinking the Beverage
Because of the shape of the rim of the can, the user can put their lips to the container. Initially the can is really full so that it doesn't need to be tilted too much before the liquid comes out.

It can be refilled but not resealed.
Soup Spoon

The Goal:
A re-usuable utensil for consumption of non-solid food.

The Affordances:
The object can easily be held in one hand. The narrow end fits into your fingers and is grooved to fit your thumb. The wider end is roughly the size of your mouth. The wider end is deep and looks like it should hold liquid.

The Solution:
1. Pick up the spoon
It is easier to pick it up by the small end. The larger end is more awkward to hold.

2. Put the spoon into the food/liquid.
The liquid will naturally go into the bowl shape.

3. Bring the spoon to your mouth
Lift the spoon from the food and bring it to your lips. The food will naturally stay inside the wider end of the spoon because the "bowl" is graduated- it gets narrower at the bottom so it doesn't spill out everywhere.
Affordances: This spoon in particular is wider than a normal spoon so you can get more food in one pass.

4. Consuming the Liquid
Put your lips on the spoon and pour the liquid/food inside.

Monday, July 12, 2010

Day 1 Homework

Find 2 types of Interfaces:
Anything that is everyday and non-digital. (can be electric)
One that is easy and one that is difficult.

Half a page explanation for each one.

Get the textbook. Read chapters 1 and 2.

Also (this is the big one):

Find two examples of interfaces from the real world, one obvious and one not-so-obvious in its affordances and steps of use. For this first set of examples, please avoid digital interface design, and instead focus on three-dimensional objects. Bring in digital photos of the objects, or better yet bring in the actual objects themselves. Remember our definition of “interface”: anything human-made upon which the user must perform some action or actions in order to achieve their goals (but again, no digital interfaces please). Figure out the goals first (what is this interface meant to accomplish) – then the object’s affordances – then the solution.

An example: shoes.

The goal

Provide a covering for the user’s feet that will remain attached during use.

The affordances

The main affordances are: one, the shape of the shoe and material of the sole, which conform to the shape of a foot and suggest use and directionality; two, the tongue and flap, which suggest the method for inserting the foot; and three, the shoelaces, which suggest the method affixing the shoe once in place.

The solution

To figure out the solution, figure out what you would have to teach someone who has never used the object before:

1. Put on socks.
The very first step involves something other than the shoe itself. What if you didn’t know this? How would you figure that out? How does one put on socks? What are they for? And: how would you figure out which kinds of shoes require socks, and which kinds don’t? Many of these answers are cultural, things we soak up from childhood. That isn’t the case with Web or mobile apps – those have to be obvious. In this case, not knowing that one should use socks with certain shoes, or for certain activities, could cause the user a lot of discomfort or even injury.

2. Insert foot (with sock attached).
Okay, simple enough so far – but what about these possible questions: What direction does the shoe go on the foot? What if the shoes are the wrong size? Are you at the shoe store so that you can ask for a different size? Or is it that you need a shoe horn (another external item)? And: Is there any question which shoe goes on which foot? What if you’ve never used shoes before? What other questions could crop up?

3. Use the provided strings to tighten the shoe and then tie a knot to hold the shoes to your feet.
Okay, but: Are the shoes already laced? If not, how do you accomplish that little miracle? If so, then: What kind of knot? What is a knot, anyway? What if you’ve never tied a bow knot before, and don’t know how? Is a diagram going to be required? This is getting complex…
OR, for some shoes:
Use the Velcro to strap down the top.
Okay, this is simpler, but still forces some possible questions if you’ve never seen Velcro before.

4. Repeat with the remaining foot and shoe.

This is just a quick list – there are surely other assumptions we’ve made about this interface without realizing it. With whatever objects you choose, think about what isn’t obvious if you’re a brand new, first time user – and cannot rely on background cultural information to help you out. You’ll be presenting the process for your interfaces next week, so organize your thoughts in a Word document to submit as homework and to use for presentation notes, similar to the one above for the shoes example.

Goal – affordances (self-evident, self explanatory or not-obvious) – steps.

Course Info

Course Number: MM2201A

Course Title: Interface Design

Class Meetings: Mondays 5:30–9:30 PM

Session/Year: Summer 2010

Instructor Name: Lou Bispo

Email Address:

Phone: 714-830-0200 x3349

Instructor Availability Outside of Class: 1 hour before class.


Day 1

1. Interface Design
2. Group Project
Usability Test week 7-8
3. Mobile App, Interface Design

Interface Design
User must perform an action to achieve a result
info design
navigation structures
form design
user process
usability testing
mobile apps

Book: Don't Make Me Think

People have a threshold of how much "thinking" they are willing to put up with on your interface/site. At a certain point they will just give up.

"If something is hard to use, I just don't use it as much."

Self-Evident (round door knob)

Easy, obvious Instructions
Complex - engaging process

Anything I have to:
-look up
-search for
-ask for or how it works

Obscure Wording or Directions
Threats (asking for passwords or personal information)
Insulting (PC's sometimes say "You have made an error...." vs "it's our fault, sorry"

Thought: Single most commonly used function of a browser is the back button.


User Goals Affordances - Is a property or set of properties that provide some indication of how it should be interacted with. For example a chair looks like it should be sat in, a button looks like it should be pushed. Intuitive.
Process - What are the different steps the user needs to do to in order to accomplish the goal.

The very first step of this interface is to fill it with liquid. Grab the handle. Bring it to your mouth. Put your mouth around it. Then tip it and allow liquid to go into your mouth.

Maybe your hand gets burned?