Cursors are a hassle

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.

HCI Week 6: Distributed Cognition

distributed_cognition-450px

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.

Central Heating Interfaces

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]

HCI Week 4: Affordances

img_0029-450px

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.

HCI Week 3: Mental Models

mental_models-450px

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.