Nice use of augmented reality on this Lego packaging. I haven’t seen this myself yet. Must keep an eye out the next time we’re down town.

Design pattern template in rtf format.

A template for documenting design patterns for this week’s HCI task is now available on the HCI course page. To use the template, download the document and edit it to replace all the red text with your own. Change the images also.

The template is based on the format of those in the Yahoo! design pattern library. You can visit there to see some concrete examples of the kind of information that should be in a pattern description as well as for inspiration on the kinds of things that patterns can be about.

Image Credit: manifestcreative

It has taken me a while, but I have finally finished putting up a summary of the lecture on Situated Actions from week 8.

A summary for this week’s lecture will be coming soon (I promise).

Cursors as displayed by different browsers

(I actually made this post and the update it talks about quite a while ago, but did not get around to publishing it until now).

Today a minor update to stikis so that mouse cursors are a bit more logical. I say a bit more logical, because, as you can see from the picture above, the way different browsers render the same cursors varies a lot. The strangest one to me is the different between how Firefox renders the ‘move’ cursor compared to IE and Safari. On Firefox, this is an open hand, actually identical to the ‘-moz-grab’ cursor, whereas on IE and Safari it is a left-right-up-down arrow. Another strange one is the ’se-resize’ cursor, which Firefox and Safari both render as an arrow pointing down and to the right, but IE renders as a double-headed arrow. This actually looks quite similar to the way Firefox and Safari render the ‘nwse-resize’ cursor, but unfortunately IE doesn’t recognise this. Oh well.

There are actually lots of different cursor styles that you can apply with CSS. As usual, PPK has a good reference for support of cursor styles across different browsers. However, his table doesn’t show what these different cursors actually look like, even if they are supported. As the picture shows, there’s a lot of variation in this.

One tricky thing I encountered was that it’s not easy to take a screen-shot that includes the cursor. The solution I found was to use the osx ’screencapture’ command line utility. The command I used was:

screencapture -m -C -T5 ie_2.png

(Command - Shift - 4) + Alt & Shift to constrain the selection. Space to take the whole window

Oh and also thanks to stikis user [Blake] for pointing out that the Chrome browser works with stikis (hmmm, perhaps that should be ’stikis works with the Chrome browser’ - I don’t want to sound like the whole internet revolves around stikis :)). I’ve tried it myself and everything does seem to work, but if you’re a Chrome user and you find a bug, please let me know.

This week’s lecture for HCI was about the theory of Distributed Cognition. I have made a separated web-page with the summary for this class.

Design Monday #1 - Central Heating (short version) from Rattle on Vimeo.

Interesting little presentation and blog post about central heating interfaces and how they could be re-designed also

Central heating systems have interfaces, and many of us interact with them every day, even if only by experiencing their effects.

[Via: Heating debate :: Dan Lockton]

In this week’s class we covered the topic of Affordances. This idea originates from the field of Ecological Psychology and the work of J.J. Gibson. It is best known in HCI circles through Norman’s book ‘The Design of Everyday Things.’ According to Gibson, affordances are:

“The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill” (Gibson, p.127)

An important aspect of the idea is that an affordance describes a potential for action in the environment in relation to a person or animal. This has proven to be a very popular concept in design, perhaps because it deals with everyday aspects of perception and interaction and relates the usability of products to their physical form (in relation to a user) in a fairly straight-forward way.

We discussed in detail the work of Djajadiningrat, who has worked with Gibson’s theories of Ecological Psychology in the field of Industrial Design. In particular, he has developed the notions of ‘Feed-forward’ (that a product should inform the user about the purpose of an action) and “Inherent Feedback” (that a user should experience feedback as a natural consequence of their actions).

Critical Questions

• The notion of affordances has been used in subtly different ways by different authors.
• Confusion betwen ‘Affordance’, ‘Convention’, and ‘Constraint’.
• We cannot really talk about screen-based buttons affording clicking

Practical Task

• Find a product with some interesting affordances for you.
• Make an analysis of the different actions that it affords for you. Are these in line with the functions that it performs?
• Bring it to class (so don’t choose a shopping trolley).

Readings

• Norman, D., 1999. Affordances, Conventions and Design. Interactions, 6(3), 38-43.
• Djajadiningrat, T., Overbeeke, K. & Wensveen, S., 2002. But how, Donald, tell us how?: on the creation of meaning in interaction design through feedforward and inherent feedback. In Proceedings of the conference on Designing interactive systems. ACM Press, pp. 285-291.

Date: Week 8, 18th February

Topics covered: Aspects of Cognition. Mental Models.

In this week’s class I gave an overview of some aspects of cognition along with a discussion of the relevance they might have for design. I also briefly presented Card’s Information Processing model and also the notion of mental models as both an idea of one way that people make sense of their interactions with the world and as a useful orientation for designers of interactive systems.

The aspects of cognition that we discussed in the class were:

• Attention
• Perception and recognition
• Memory
• Learning
• Reading, speaking and listening
• Problem solving, planning, reasoning and decision making

See the reading, Ch 3 of ‘Interaction Design’ for a detailed discussion of these aspects.

The notion of ‘Mental Models’ has been a long standing and quite influential idea in Human Computer Interaction. The basic idea is that people have internal mental representation of the way a system works and they use these representations as models to help them when they use a system. One possible application of this idea for designers is that by designing our systems so that the working of the system is clear in the interface, it is easier for users to form a useful mental model of the product.

Critical Questions

The idea of Mental Models is often appealing to designers because it seems to make sense and offer practical and useful insights into the way users interact with products. However, there are some critical questions you should consider also.

• Do people really have Mental Models? What separates a Mental Model from everyday knowledge?
• Focusing on mental representations can divert attention from the many other resources people use to help them when using interactive products. What about other people, or physical resources?
• How much does this actually help designers? Does it simply substitute the problem of choosing the correct mental model for the problem of designing?

Slides: available

Practical Task:

• In groups of 3 - 5.
• See if you can find evidence for Mental Models in the way people use interactive products.
• Ask a person to show you how they use a product. Ask them to explain what they are doing as they use it. Try stopping them from time to time and asking what the think the product will do (and why) before they make an action. Then when they take the action, ask them if the response of the product matched their expectation.
• Prepare an A3 poster presenting your findings for submission at next week’s class.

Readings:

• Norman, D., 1999. Affordances, Conventions and Design. Interactions, 6(3), 38-43.
• Djajadiningrat, T., Overbeeke, K. & Wensveen, S., 2002. But how, Donald, tell us how?: on the creation of meaning in interaction design through feedforward and inherent feedback. In Proceedings of the conference on Designing interactive systems. ACM Press, pp. 285-291.

Typing at a manual typewriter

This week’s lecture was about some models of human motor behavior (slides available). Several models were presented in the class, but we focussed on two; Fitts’s law and Guiard’s model of bimanual skill. The goal of the lecture was that students would be able to tell the difference between descriptive and predictive models and be aware of some of the design implications of the models presented in the class.

Predictive models are models that allow one to predict a person’s performance at a task. They have the advantage that you don’t need to go through the trouble of building a test and recording performance empirically. Descriptive models help to explain the way people perform at a task. Descriptive models are useful for giving a  framework and vocabulary for understanding and talking about a problem.

Fitts’s Law

There is a relationship between the distance to a target (e.g. a button), it’s size and the time it takes to click on (acquire) it. Larger closer buttons take less time to acquire than further, distant ones. Fitts’s law is a predictive model which expresses this relationship in a mathematical equation:

T = a + b log₂(D/W + 1)

Where T is time, a and b are experimentally determined constants, D is distance to the target and W is the width of the target. This relationship is actually a very good predictor of the time it takes to click on a target. For this week’s class, I developed a web-page where you can test this relationship out for yourself. The results from the first week seem to be in line with what one would expect from the law.

Fitts’s law has some surprising implications for interface design. It explains why the corners and edges of the screen are very quick to acquire, even though they may be further away from other targets. The reason for this is that when using a mouse a user can keep scrolling past the edge of the screen and the mouse will stay at the edge fo the screen. This means that there is effectively a very big button outside each of the four corners and four edges of the screen.

See this quiz from Bruce Tognazzini for some tricky questions related to Fitts’s law.

Guiard’s model of bimanual skill

Guiard’s model of bimanual skill is a descriptive model of the way people divide certain kinds of tasks between their preferred and non-preferred hands. The model describes how people tend to use their non-preferred hands for the larger framing movements of a task and their preferred hands for the finer detailed movements. For example, when writing the non-preferred hand might steady and position the sheet of paper as the preferred hand writes.

See my summary of Guiard’s paper for a fuller description.

Practical Task:

• In groups of three:

• Find a situation that you could apply one of the models that we covered in this week’s class.

• Prepare a short presentation for next week’s class (max 5 mins).

Readings

The readings for next week’s class are:

• Preece, J., Sharp, H. & Rogers, Y., 2002. “Interaction design : beyond human-computer interaction”, New York: J. Wiley & Sons. Chapter 3
• Payne, S., 2003 “User’s Mental Models: The Very Ideas” in Carroll, J (ed) “HCI Models, Theories, and Frameworks” London, Morgan Kaufman.
  

Two compelling interaction concepts

Krzysztof sent along links to two compelling interaction concepts that demonstrate alternative ways of interacting with computers than what most of us are using now. In the picture on the left is the ‘bumptop desktop’ by Anand Agarawala. This takes the typical desktop metaphor for organizing and interacting with files and stretches it to include physics, 3D rendering, and gestural interactions. The picture on the right shows the multitouch display developed by Jeff Han. This provides an intiutive method for interacting in a very direct way with the information presented on the screen.

Links to videos of the presentations:

• Bumptop desktop
• Multitouch display

Thanks for the links Krzysztof!