more on disappearing scrollbars

I recently wrote about problems with a slightly too smart scroll bar, and Google periodically change something in Gmail which means you have to horizontally scroll the page to get hook of the vertical scroll bar.

I just came across another beautiful (read terrible) example today.

I was looking at the “Learning Curve“, a bogspot blog, so presumably using a blogspot theme option.  On the right hand side was funky pull-out navigation (below left), but unfortunately, look what it does to the scroll bar (below right)!

   

This is an example of the ‘inaccessible scrollbar’ that I mention in “CSS considered harmful“, and I explain there the reason it arises.

The amazing thing is that this fails equally across all (MacOS) browsers: Safari, Firefox, Chrome, yet must be a standard blogspot feature.

One last vignette: as I looked at the above screen shots I realised that in fact there is a 1 pixel part of the scroll handle still visible to the left of the pull-out navigation.  I went back to the web page and tried to select it … unfortunately, I guess to make a larger and easier to select the ‘hot area’, as you move your mouse towards the scroll bar, the pull-out pops out … so that the one pixel of scrollbar tantalises, but is unselectable :-(

details matter: infinite scrolling and feature interaction

Many sites now dynamically add content to a page as you scroll down; this includes both Facebook and Twitter feeds, which add content as you get near the bottom.  In many ways this is a good thing, if users have to click to get to another page, they often never bother1.  However there can be unfortunate side effects … sometimes making sites un-navigable on certain devices.  There are particular problems on MacOS, due to the removal of scrollbar arrows, a usability disaster anyway, but confounded by feature interactions with other effects.

A recent example was when I visited the SimoleonSense blog in order to find an article corresponding to an image about human sensory illusions.  The image had been shared in Facebook, and I found, when I tried to search for it, also widely pinned in Pinterst, but the Facebook shares only linked back to the image url and Pinterst to the overall site (why some artists hate Pintrest).  However, I wanted to find the actual post on the site that mentioned the image.

Happily, the image url, http://www.simoleonsense.com/wp-content/uploads/2009/02/hacking-your-brain1.jpg, made it clear that it was a WordPress blog and the image had been uploaded in February 2009, so I edited the url to http://www.simoleonsense.com/2009/02/ and started to browse.  The site is a basically a weekly digest and so the page returned was already long.  I must have missed it on my first scan down, so I hit the bottom of the page, it dynamically added more content, and I continued to scroll.  Before long the scrollbar handle looked very small, and the page very big and every time I tried to scroll up and down the page appeared to go crazy, randomly scrolling anywhere, but not where I wanted.

It took me a while to realise that the problem was that the scrollbar had been ‘enhanced’ by the website (using the WordPress infinite scroll plugin), which not only added infinite scrolling, but also ‘smart scrolling’, where a click on the scrollbar makes an animated jump to that location on the scrollbar.  Now many early scrollbars worked in this way, and the ‘smart scroll’ options is inspired by the fact that Apple rediscovered this in iOS for touch screen interaction.  The method gives rapid interaction, especially if the scrollbar is augmented by ‘tips’ on the scrollbar (see the jQuery smartscroll demo page).

Unfortunately, this is different from the Mac normal behaviour when you click above or below the handle on a scrollbar, which effectively does screen up/down.  So, I was trying to navigate up/down the web page a screen at a time to find the relevant post, and not caring where I clicked above the scroll handle, hence the apparently random movements.

This was compounded by two things.  The first is a slight bug in the scrolling extension which means that sometimes it doesn’t notice your mouse release and starts scrolling the page as you move your mouse around.  This is a bug I’ve seen in scrolling systems for many years, not taking into account all the combinations of mouse down/up, enter/leave region etc., and is present even in Google maps.

The second compounding factor is that since MacOS got rid of the scrollbar arrows (why? Why? WHY?!!), this is now the only way to reliably do small up/down movements if you don’t have a scroll wheel mouse or similar.

Now, in fact, my Air has a trackpad and I think Apple assumes you will use this for scrolling, but I have single-finger ‘Tap to click’ turned off to prevent accidental selections, and (I assume due to a persistent bug) this turns off the two finger scrolling gesture as well (even though it is shown as on in the preferences), so no scrolling from the touchpad.

Since near the beginning of my career I have been fascinated by these fine design decisions and have written previously about scrollbars, buttons, etc.  They are often overlooked as they form part of the backdrop to more significant applications and information.  However, the very fact that they are the persistent backdrop of interaction makes their fluid usability crucial, like the many mundane services, buses, rubbish collection, etc., that make cities work, but are often unseen and unnoticed until they fail.

Also note that this failure was not due to any single feature or bug, but the way these work together what the telephony industry originally named ‘feature interaction‘, but common across all technological systems  There is no easy fix, apart from (i) thinking of all possible scenarios (reach for your formal methods in HCI!) and (ii) testing across different devices.  And certainly (Apple please listen!) if it ain’t broke, don’t fix it.

Happily, I did manage to find the post in the end (I forget how, maybe random clicking) and it is “5 Ways To Hack Your Brain“.  The individual post page has no dynamic additions, so is only two screens big on my display (phew), but still scrolled all over the place as I tried to select the page title to paste above!


  1. To my mind, early web guidance, was always wrong about this as it usually suggested making pages fit a screen to improve download speed, whereas my feeling, when using a slow connection, was it was usually better to wait a little longer for one big screen (you were going to have to wait anyway!) and then be able to scroll up and down quickly. [back]

Death by design

Wonderful image and set of slides describing some of the reasons multitasking is a myth and how the interfaces we design may be literally killing people (during a mobile outage in Dubai cat accidents dropped by 20%).

Thanks to Ian Sommervile for sharing this on twitter.

“lost in hyperspace” – do we care?

I have rarely heard the phrase “lost in hyperspace” in the last 10 years, although it used to be a recurrent theme in hypertext and HCI literature.  For some time this has bothered me.  We don’t seem less lost, so maybe we are just more laid back about control, or maybe we are simply relinquishing it?

Recently Lisa Tweedie posted a Pintrest link on Facebook to Angela Morelli‘s dynamic infographic on water.  This is a lovely vertically scrolling page showing how the majority of the water we use is indirectly consumed via the food we eat … especially if you are a meat eater (1 kilo beef = 15,400 litres of water!).  The graphic was great, except it took me ages to actually get to it.  In fact the first time I found a single large graphic produced by Angela as a download, it was only when I returned to it that I found the full dynamic info graphic.

Every time I go to Pintrest I feel like I’ve been dropped into a random part of Hampton Court Maze, so hard to find the actual source … this is why a lot of artists get annoyed at Pintrest!  Now for Pintrest this is probably part of their design philosophy … after all they want people to stay on their site.  What is amazing is that this kind of design is so acceptable to users … Facebook is slightly less random, but still it takes me ages to find pages I’ve liked, each time I start the search through my profile afresh.

In the early days of hypertext everyone used to talk about the “lost in hyperspace” problem … now we are more lost … but don’t care anymore.  In the Mediaeval world you put your trust in your ‘betters’ lords, kings, and priests and assumed they knew best … now we put our trust in Pintrest and Facebook.

logo design competition – final days

The first entries are in for the logo design competition for the open HCI course I’m presenting in the autumn.  Arunn @ Talis has posted them on the wall in the office.  One is a very good cartoon style illustration, but I’m sure I don’t really look like that :-/

Final entries due by tomorrow midnight … and then Arunn is going to post them up for popular vote … and whichever gets most votes I end up wearing on a T-shirt at the HCI conference in a few weeks time.  There are times when democracy just feels wrong!

a radical design for mobile telephony

We are all aware of the phenomenal growth in smartphone and tablet use.  However, these are often designed with the needs of media and internet access above plain telephony.  Touch screens do not have tactile feedback leading to mistyping, especially problematic when using touchtone-based phone services, for tablets especially, the form factor is far from optimal, … and try answering your phone call quickly by sliding your finger across the screen!

There are solutions.  A recent gigaom post “Here’s why tablets (yes, tablets!) will replace the smartphone” suggested that hands-free headsets were already common, hence reducing the brick-to-the-ear effect.  This of course does not deal with the key pad, but there are some solutions to this using the vibrator motor to give simulated tactile feedback, and various technologies are in development that will (in time) allow tactile features to be programmed onto the screen (e.g. see “Mobile tactile tech gets physical“).

Over a slightly longer time frame we can expect smart materials to develop to the point that concept pieces such as Fabian Hemmert’s Shape-Changing Mobiles will become possible.  Instead of being a fixed shape not only will your tablet screen be able to develop solid buttons of all shapes on demand, but will potentially become travel mug, long-haul flight pillow or angle grinder.

The trouble is that not only are such technologies some years off, they are also tinkering at the edges, attempting to fix piecemeal some of the fundamental flaws of smartphone and tablet technology when it comes to telephony.  Clearly a more radical approach is required.

While Bluetooth headsets are effective, they tend to suggest call centre rather than cool, a single device would be preferable.  In addition this should ideally include some form of miniature key pad to facilitate typing telephone numbers (more extensive tasks such as address book management can be performed on the full-size tablet screen, especially if this is augmented with tactile feedback). Furthermore, for times when it is inconvenient to carry your full size tablet and it is in your handbag, rucksack or its custom wheelie bag, the perfect telephony attachment should also have a small additional screen to view the number you are dialing.

As a result of extensive research into user needs and in the spirit of the information appliance, the single purpose device optimised for a a single purpose, I have devised the perfect device: small, yet not too small to be lost, pocket sized so that it can be easily accessed when you receive a call, tactile, exploiting the deep understanding of the physicality community and knowledge from writing TouchIT. It will connect via Bluetooth to your existing smartphone/tablet and of course via WiFi or (in premium models) using 3G/GSM direct to mobile networks if you accidentally leave your smartphone at home.

I plan to demonstrate my early prototype at the forthcoming Physicality 2012 workshop, where Fabian will be giving a keynote.

Alt-HCI open reviews – please join in

Papers are online for the Alt-HCI trcak of British HCI conference in September.

These are papers that are trying in various ways to push the limits of HCI, and we would like as many people as possible to join in discussion around them … and this discussion will be part of process for deciding which papers are presented at the conference, and possibly how long we give them!

Here are the papers  — please visit the site, comment, discuss, Tweet/Facebook about them.

paper #154 — How good is this conference? Evaluating conference reviewing and selectivity
        do conference reviews get it right? is it possible to measure this?

paper #165 — Hackinars: tinkering with academic practice
        doing vs talking – would you swop seminars for hack days?

paper #170 — Deriving Global Navigation from Taxonomic Lexical Relations
        website design – can you find perfect words and structure for everyone?

paper #181 — User Experience Study of Multiple Photo Streams Visualization
        lots of photos, devices, people – how to see them all?

paper #186 — You Only Live Twice or The Years We Wasted Caring about Shoulder-Surfing
        are people peeking at your passwords? what’s the real security problem?

paper #191 — Constructing the Cool Wall: A Tool to Explore Teen Meanings of Cool
        do you want to make thing teens think cool?  find out how!

paper #201 — A computer for the mature: what might it look like, and can we get there from here?
        over 50s have 80% of wealth, do you design well for them?

paper #222 — Remediation of the wearable space at the intersection of wearable technologies and interactive architecture
        wearable technology meets interactive architecture

paper #223 — Designing Blended Spaces
        where real and digital worlds collide

Open HCI course website live

The website, HCIcourse.com, went live last week for the (free!) open online HCI course I posted about a few weeks ago (“mooHCIc – a massive open online HCI course“).  Over the summer we will be adding more detailed content and taster material, however, crucially, it already has a form to register interest.  Full registration for the course will open in September ready for tyhe course start in October, but if you register at the site now we will be able to let you know when this is available, and any other major developments (like when taster videos go online :-))  Even if you have already emailed, Twitter messaged or Facebook-ed me to say you are interested, do add yourself online in case the combination of my memory and organisation fails :-/

mooHCIc – a massive open online HCI course

Would you like to know more about human–computer interaction, or would you like free additional resources for your students?

Hardly a week goes by without some story about the changing face of online open education: from Khan Academy to Apple’s iTunes U and a growing number of large-scale open online courses from leading academics such as Thrun‘s AI course at Stanford.

Talis is interested in the software needed to support these new forms of large-scale open learning.  So, partly because it seems a good idea, and partly to be a willing guinea pig, I am going to run a massive online open HCI course in the autumn.

This type of course is either aimed exclusively at people outside a traditional education setting; or else, in the case of some of the university based courses, the professor/tutor is teaching their own class and then making some of the materials connected with it available on the web.

While similarly aiming to cater for those outside mainstream education, I would like also to make it easy for those in traditional university settings to use this as part of their own courses, maybe suggesting it as additional material to recommend to their students.  Even more interesting will be if the online material is incorporated more deeply into your courses, perhaps using it instead of some of the lectures/labs you would normally give.

If you are teaching a HCI course and would be interested in me being a ‘virtual guest lecturer’ by using this material (free!) please let me know.

I don’t intend to do a broad introductory HCI ’101′ (although I may start with a short ‘laying out the area’ component), but more a series of components on particular sub-topics.  These will themselves be split into small units of perhaps 10-15 minutes ‘lecture style’ material (Khan-style voice over, or maybe mix of voice-over and head-and-shoulders).  Each sub-topic will have its own exercises, discussion areas, etc.  So, tutors intending to use this as part of their own courses can choose a sub-topic that fits into their curriculum, and likewise individuals not part of a formal course can pick appropriate topics for themselves.   I may also think of some integrative exercises for those doing more than one component.

I have yet to decide the final topics, but the following are things for which I have given some sort of tutorial or produced fresh materials recently:

  • introduction to information visualisation — using materials created for IR+InfoVis winter school in Zinal last January
  • emotion and experience — using new chapter written for next edition of HCI book, and tutorial I did at iUSEr last December
  • physicality — looking at the interactions between digital and physical product design — based on forthcoming TouchIT book
  • formal methods in HCI — as I have just written a chapter for Mads’ interaction-design.org open encyclopaedia of HCI
  • user interface software architecture — based on heavily updated chapter for next edition of HCI book
  • creativity and innovation — (wider than pure HCI audience) — drawing on experience of teaching technical creativity using ‘Bad Ideas’ and other methods, with both practical (doing it) and theoretical (understanding it) aspects
  • designing for use (adoption and appropriation) — understanding the factors that lead to products being adopted including the rich interplay between design and marketing; and then, the factors that can allow users to appropriate products to their own purposes.

I will not do all these, but if some seem particularly interesting to you or your students, let me know and I’ll make final decisions soon based on a balance between popularity and ease of production!

not forgotten! 1997 scrollbars paper – best tech writing of the week at The Verge

Thanks to Marcin Wichary for letting me know that my 1997/1998 Interfaces article “Hands across the Screen” was just named in “Best Tech Writing of the Week” at The Verge.  Some years ago Marcin reprinted the article in his GUIdebook: Graphical User Interface gallery, and The Verge picked it up from there.

Hands across the screen is about why we have scroll bars on the right-hand side, even though it makes more sense to have them on the left, close to our visual attention for text.  The answer, I suggested, was that we mentally ‘imagine’ our hand crossing the screen, so a left-hand scroll-bar seems ‘wrong’, even though it is better (more on this later).

Any appreciation is obviously gratifying, but this is particularly so because it is a 15 year old article being picked up as ‘breaking’ technology news.

Interestingly, but perhaps not inconsequentially, the article was itself both addressing an issue current in 1997 and also looking back more than 15 years to the design of the Xerox Star and other early Xerox GUI in the late 1970s early 1980s as well as work at York in the mid 1980s.

Of course this should always be the case in academic writing: if the horizon is (only) 3-5 years leave it to industry.   Academic research certainly can be relevant today (and the article in question was in 1997), but if it does not have the likelihood of being useful in 10–20 years, then it is not research.

At the turn of the Millenium I wrote in my regular HCI Education column for SIGCHI Bulletin:

Pick up a recent CHI conference proceedings and turn to a paper at random. Now look at its bibliography – how many references are there to papers or books written before 1990 (or even before 1995)? Where there are older references, look where they come from — you’ll probably find most are in other disciplines: experimental psychology, physiology, education. If our research papers find no value in the HCI literature more than 5 years ago, then what value has today’s HCI got in 5 years time? Without enduring principles we ought to be teaching vocational training courses not academic college degrees.
(“the past, the future, and the wisdom of fools“, SIGCHI Bulletin, April 2000)

At the time about 90% of CHI citations were either to work in the last 5 years, or to the authors’ own work, to me that indicated a discipline in trouble — I wonder if it is any better today?

When revising the HCI textbook I am always pleased at the things that do not need revising — indeed some parts have hardly needed revising since the first edition in 1992.  These parts seem particularly important in education – if something has remained valuable for 10, 15, 20 years, then it is likely to still be valuable to your students in a further 10, 15, 20 years.  Likewise the things that are out of date after 5 years, even when revised, are also likely to be useless to your students even before they have graduated.

In fact, I have always been pleased with Hands across the Screen, even though it was short, and not published in a major conference or journal.  It had its roots in an experiment in my first every academic job at York in the mid-1980s, when we struggled to understand why the ‘obvious’ position for scroll arrows (bottom right) turned out to not work well.  After a detailed analysis, we worked out that in fact the top-left was the best place (with some other manipulations), and this analysis was verified in use.

As an important meta-lesson what looked right turned out not to be right.  User studies showed that it was wrong, but not how to put it right, and it was detailed analysis that filled the vital design gap.  However, even when we knew what was right it still looked wrong.  It was only years later (in 1997) that I realised that the discrepancy was because one mentally imagined a hand reaching across the screen, even though really one was using a mouse on the desk surface.

Visual (and other) impressions of designers and users can be wrong; as in any mature field, quite formal, detailed analysis is necessary to compliment even the most experienced designer’s intuitions.

The original interfaces article was followed by an even shorter subsidiary article “Sinister Scrollbar in the Xerox Star Xplained“, that delved into the history of the direction of scroll arrows on a scrollbar, and how they arose partly from a mistake when Apple took over the Star designs!  This is particularly interesting today given Apple’s perverse decision to remove scroll arrows completely — scrolling now feels like a Monti Carlo exercise, hoping you end up in the right place!

However, while it is important to find underlying principles, theories and explanations that stand the test of time, the application of these will certainly change.  Whilst, for an old mouse + screen PC,  the visual ‘hands across the screen’ impression was ‘wrong’ in terms of real use experience, now touch devices such as the iPad have changed this.  It really is a good idea to have the scrollbar on the left right so that you don’t cover up the screen as you scroll.  Or to be precise it is good if you are right handed.  But look hard, there are never options to change this for left-handed users — is this not a discrimination issue?  To be fair tabs and menu items are normally found at the top of the screen equally bad for all.  As with the scroll arrows, it seems that Apple long ago gave up any pretense of caring for basic usability of ergonomics (one day those class actions will come from a crippled generation!) — if  people buy because of visual and tactile design, why bother?  And where Apple lead the rest of the market follows :-(

Actually it is not as easy as simply moving buttons around the screen; we have expectations from large screen GUI interfaces that we bring to the small screen, so any non-standard positioning needs to be particularly clear graphically.  However, the diverse location of items on web pages and often bespoke design of mobile apps, whilst bringing their own problems of inconsistency, do give a little more flexibility.

So today, as you design, do think “hands”, and left hands as well as right hands!

And in 15 years time, who knows what we’ll have in our hands, but let’s see if the same deep principles still remain.