Blog post ideas: Design & Usability Principles part 1 of 2

These are not really class notes – they parallel the class notes with ideas of things you could blog about for this class. Look back here whenever you need inspiration.

General Principles:

  • Examples and applications of any one or combination of ideas and principles you heard today
  • Are Cooper’s and Krug’s (and Nielsen’s) principles complementary or contradictory? How so?
  • Make choices mindless – be aware of how many tiny choices you make every day as you use computers. Notice when you think about those choices – and how you think about them. If you do sit and think about your choice, this means it’s not mindless, therefore, not well designed. If it’s so quick and natural that you fly through it, it may indicate a good design.
  • Rude, inconsiderate behavior – examples abound. Provide examples and think about how you would redesign them.
  • Error messages – I challenge you to find examples of good, useful, and helpful error messages (unlike the one below)

    click to enlarge

  • Provide an example of a system that predicts your behavior – accurately and/or inaccurately. Explain how it does so, and whether the implementation is successful or not.

Visual Interface Design & Design for Scanning

  • Analyze the mood or the visceral response a specific software interface triggers. What about its visual design makes you feel that way?
  • Try to isolate a building block of visual interface design – for example, shape, or value (color intensity). Examine how it is used in an interface to get attention and communicate function.
  • Learn to notice grids in designs. Whenever you look at a Web page, count the columns. Note what the smallest grid unit is and how it is used, both for vertical and horizontal alignment.
  • Learn to notice and blog about visual hierarchy. Close your eyes. Look at the screen. Note where your eyes go first, second, third. Then, examine what about the design made your eyes move on the page in that order.

Metaphors & Idioms

  • Metaphors are great fall-backs for good/bad design examples. Wherever you look, if you learn to notice them, there are metaphors. Most of them come with both advantages and disadvantages. Note them. Remember that metaphors work because of the similarities between two concepts. If the two concepts are not similar enough, the metaphor breaks down – or it obscures the parts that are different. There are some examples of sites with CRAZY metaphors out there – find them and post some on your blog!
  • Good idioms are so intuitive and transparent that we’re not even aware of them. Find examples of idiomatic design elements. Learn to see them. Blog your examples.
  • Write a review of the new gestures in Lion OSX in light of the inverted pyramid Jing presented when thinking about idioms. Are the new gestures good idioms? How many atomic elements are there? How can actions be achieved by combining atomic elements?
  • Notice and blog about how affordances are communicated through design. When you see a certain object, how do you know what it can do? How can you infer that from the design? If not from the design, then how do you know what it can do? Similarly, notice ambiguity in communicating affordances – Examples when you see a button or a design item and you have no idea what it can do. For example, the floppy disk icon communicates the affordance “Save” – but how does that make sense to someone who has never seen a floppy disk?!


  • A common exercise is to try to navigate a site without a mouse – only with the keyboard. See how easy/difficult it is and what functions are/are not accessible
  • Note the use of color and contrast on interfaces.
  • Play around with this screen reader simulation (or the Web Anywhere simulation) to see what it’s like to get things done online if you’re hearing impaired. What was the experience like?



  • Examine a homepage (or more) and analyze how it answers the following questions: What is this site? What can I do here? Where should I start? Did the homepage answer all these questions at a quick glance? How was it designed in order to do that?
  • Homepages often have to have a lot of content and features, and accommodate several audiences. Pick a homepage and note how it accommodates all that complexity.
  • How can homepages accommodate all this complexity on small mobile screens?
  • Tag lines are more a matter of marketing and PR, but if they do not make sense to users, they will, obviously, fail. Examine and critique a few tag lines and evaluate their efficiency.
  • There is a design trend, pioneered by Google and Apple, that emphasizes minimalist design. How does that work for homepages?


  • Pick any random, small page – somewhere deep into a website. Analyze how it answers the following questions: Where am I relative to the Web as a whole? Where am I relative to this site?
  • Pick any Web page and see how it answers these questions: Where am I? Where have I been? Where can I go from here?
  • Analyze a site’s navigation solution and see how it supports both leisurely browsing and focused search.
  • Remember the concept of “persistent navigation” and note how it’s implemented on various sites.
  • Note and critique how breadcrumb trails are implemented on various sites.

Hey, Facebook: Relax

[cross-posted from PR Connections]

Facebook has a pattern of innovation by (knee-jerk) reaction. The newest Facebook feature? The Subscribe option.

Here is why it sucks, and here is why innovation by knee-jerking is a bad idea, and unnecessary, especially for Facebook.

Facebook is, by far, the SNS market leader.

SNS adoption

As market leader, it is unnecessary to freak out and patch-up your product with random features, in an effort to compete with Google+, Twitter, Foursquare, Instagram, etc. You’re in no danger. You can afford to think and be strategic about what features you add. You’re not going to lose market share to Google+ overnight. SNS migration is slow, and for so many people, FB is mainstream, it’s become a habit. Early adopters may migrate, but the majority will stay put.

Speaking of the majority: All these new features confuse them. They don’t know what Google+ is. They have heard of Twitter, but it is more foreign to them than Romania. They know exactly what they use Facebook for, and they are happy seeing what the crazy cousin is up to, and sharing photos of the baby with extended family. I bet you the majority, which form Facebook’s biggest market and ARE its strategic advantage, can’t keep track with all these innovations and don’t even understand them. So, by adding new, confusing, features, you’re confusing your main market. Bad idea. I do informal research whenever I present to student groups. I ask them if they’re aware of and use certain (new) Facebook features. They’re not. And these are your Digital Natives. If they can’t keep up, how about auntie Mae?!

As MacManus points out, Facebook started off as a private social network. This IS was Facebook’s strategic advantage. As Facebook adds Google+ and Twitter-like features, it loses its strategic advantage and its definition. What is Facebook these days, exactly? What does it want to be – besides “the biggest, most popular SNS in the Western hemisphere”? A product without a unique proposition is diluted, confusing. Rather than trying to be everything to everybody, I think Facebook should step back to search and find its soul (too late for that) defining, unique proposition. The danger of knee-jerk responsive innovation is that you dilute a product and forget its strategic advantage and position in the marketplace. Rather then be Google+ AND Twitter AND Foursquare AND Instagram, Facebook should figure out what it is and what it is not – and how it is different from all of the above. From the market leader position, it can afford to relax and think strategically.

* Image captured from a slideshare presentation about social media adoption and uses around the world:

Usability heuristics: Debating the fundamentals

You read Nielsen’s 10 usability heuristics and will learn many more design & usability principles in the next two weeks.

After you learn the rules, the next step is to learn how to break them. This UX Magazine post about debating the fundamentals is an example of how to think about breaking the rules. I highly recommend you read it.

What are your thoughts about breaking the rules? Should you? Should you not? When? Why?

Class notes: User cognition

Today in class we talked about:

  1. mental models, as defined by Cooper. It is important to remember the distinctions between user, system/impementation, and represented model, as well as the relationships with them. What are the implications? How does understanding mental models help you create better interfaces? Blog post idea: Find an example of a good/bad represented model.
  2. theories that explain how users find information online – it is important to remember there are several explanations, but that the most popular theory is information foraging theory, developed in 1995 by Pirolli & Card. Some important aspects to remember:
    • assumptions about rationality: bounded rationality/satisficing
    • assumptions about human behavior: maximize benefits, minimize cost, preserve energy
    • explanations about information searching behavior: foraging
    • key concept: information scent. Blog post idea: Find examples of weak/strong information scent.
  3. the use of usability principles for heuristic evaluation – which leads into the presentations for the next two weeks.

Do you feel these class notes are useful, or would my time be better spent elsewhere? Please let me know by rating, liking, or commenting.

Design and Usability Principles: Plan for Sept 21 & Sept 28

Class on SeptĀ  21 and Sept 28 will be crowd-sourced and collaborative.

Please read instructions and sign up for one or more presentation topics on each day.

Questions about these presentations? Please ask them in the comments below.

Blog challenge: Gestalt principles of perception

In case you need some ideas for your blog, and even if you do not, try looking for how Gestalt principles of visual perception are applied in interfaces. Post a good/bad example about them sometime this week.

As a rule, when you post the good/bad examples, try to relate them to the principles of design and usability you’ve learned up to that point in the class.

You already know quite a few from the readings from week 2 (mapping, visibility, feedback, politeness, etc.), to which you can add the implications for design of what you know about visual perception and visual attention.

From a visual attention perspective, every time you look at an interface, close your eyes, then open them and notice what grabs your attention first, second, then third. Then, examine what principles of bottom up visual attention are at work there. How did the designers achieve saliency in order to grab your attention and direct it in a 1, 2, 3 sequence?

Both Gestalt principles and visual attention principles are used in the design of the San Diego Zoo homepage. Can you tell how?

Assignment: Research Article Analysis (RAA)

Same thing here as with other assignments, I am posting it below in addition to Blackboard so you have a public board for asking questions and seeing answers:

Please remember to read your classmates’ RAAs, and to comment on them. It will be very useful for you to be exposed to more articles than you alone could read during a semester. See, for example, Emma’s RAA of a very interesting article. It is very well executed and a good example of what this assignment should look like.