Posts Tagged ‘ affordance ’

Class notes F15 – Weeks 1 & 2

Some things to remember from the first 2 classes:

  • evolution of how we think about design: from human factors approaches to improving interfaces to user-centered system design and further on to reflecting on the impact of our design on people and society as well as stimulating reflection on their part: “…as technology designers it can be both exhilarating and unnerving to see how the design decisions we make, consciously or unconsciously, shape the micro-texture of people’s everyday experiences.” (from Reflective Design). Remember the 3 “camps” we talked about: UCD-ACD-GDD-UX vs. critical/reflective vs. human factors and their distinguishing features.
  • the concept of affordance
  • in UCSD, user error = poor design (Norman doors)
  • I also showed you some fun infographics about the various skills and disciplines involved in UX work. Here is my collection on Pinterest. Look at them a bit closer, and think about where you are and where you would want to be.
  • I invite you to think about which of the values and design philosophies we discussed appeals to you and aligns with your personal values and ethics.
  • some important names/authors: Don Norman (UCSD, ACD), Alan Cooper (GDD), Karen Holtzblatt (contextual design)

What are the most important 1-3 ideas you took away from class?

Class notes F14 – Week 4: Fundamental principles part 2 of 3

We moved from visual perception and attention to issues related to cognition – specifically, memory and learning.

It should be clear by now that largely, what makes an interface intuitive is its ease of learning. The following concepts are important when it comes to ease of learning:

Here’s Don Norman explaining affordances in less than 2 minutes:

All these things we know about visual perception and cognition are at the root of most guidelines for usable interface design. One of the most famous set of guidelines is Nielsen’s 10 heuristics, which we worked with in class. These heuristics can be used to inspect interfaces in a method called heuristic evaluation, which you will read about for next class.

Please remember to let me know that you read this post by interacting with it somehow. This, as well as participation on the FB group, are requirements for class participation.

Reverse metaphor: Dropbox

 

 

I saw this in a building the other day and thought to myself: Dropbox?! Oh, I know what this is, it works just like the online service Dropbox.

Then, of course, I realized that it’s the other way round.

Dropbox

But there are so many metaphors we use on the screen that have become outdated, because we do not use their physical analogues anymore – floppy disks? paper calendars? tabbed folders?

The metaphors are becoming divorced from the very objects that used to help us understand how they were supposed to help us understand how the computer features work.

They are becoming stand-alone signifiers. We know what “tabs” are even if we’ve never worked with tabbed folders before (imagine explaining to your children where this comes from!).

So, what are we to do? I see 2 options:

  1. Keep the metaphors and use them with their newly acquired meaning. They are not metaphors anymore, they don’t stand for something else. They stand for themselves.
  2. Move away from the metaphors that make reference to physical objects and embrace the digital world for what it is, and create its own language and signifiers. I think this is one of the main pushes behind flat design – it’s a move against one of the most fundamental metaphor, the button.

I agree with this philosophy. I do not like things that pretend to be something they’re not.  They remind me of the cheap plastic bowls that are made to look like grandmother’s expensive china. In the physical world, we call them kitsch.

This doesn’t mean, however, that flat design is without pitfalls. By doing away with metaphor, which has an important role in learnability and communicating affordances, flat design invites usability problems. I guess the devil is in the implementation details – but look at Pinterest. It uses flat design and seems to get EVERYTHING right. So it can be done. 😉

Example – the most basic affordance: clickability

One of the most fundamental affordances in interface design is clickability. The design should clearly indicate what is and what is not clickable. For this reason, it is advised to never ever use underlined text on the Web because it looks like a link when it actually isn’t.

As you look at interfaces, note how each item communicates clickability. What about its design lets you know that a word is clickable, that something is a button – but something else is not?

That’s why Jakob Nielsen maintains that links should always be blue and underlined. That’s a bit extreme, and ruffles visual designers’ feathers, but even if links are not blue and underlined, it should be very clear what is and what is not a link.

Take this example from Blackboard learn. How can you tell if something is clickable or not? Can you tell that the words “graduate handbook” are actually a link? How would you change the design to make it absolutely clear that those words are actually a link?

Click image to enlarge