An end in sight

Specifically to do with publishing the observation that wins for me in the below example is how a magazine is finishable. I like this, seems pretty obvious but the impact as a design idea is central to the UX and at odds with our daily experience of the web.

As a magazine atoms become bits the opportunity to provide exhaustive content is apparent however can be at odds with the audience need. As someone who subscribes to Wired’s printed publication I get that. I want the editors insight. In the brief time I have available to read through a magazine this skilled encapsulation of a theme and coverage of an interest area is essential. Not only does the editor as cultural explorer bring all this good stuff together they can give me the hooks to undertake future sorties myself and goes some way to damped the information overload endemic in daily net living.

^ Mag+ touch screen protoype

The curiousness of children is infinite. My 18 month baby is into everything, looking, pointing, grabbing, pulling. As any parent will tell you, it is pretty relentless as the world is explored anew. With each discovery comes the instinctual need to communicate with us what they are thinking and feeling. It is phenomenal how much is actually being taken in but of course without language, deciphering the baa-baa-beedahh-dees feels like a task for Bletchley Park.

What has been incredibly enlightening however was how gesturing through sign language can help to bridge that gap. After several months of “Sign and Sign”, which is a baby group to teach basic sign language, I was able to communicate about specific things; abstract and literal. For example, if she sees a star then fanning the fingers out from a fist tells us or if she is hungry or has a pain then a simple gesture lets us know. The recognition of understanding and being able to communicate is self evident, it is what we all continue to try to achieve even after the nappies are off.

The parallels between this and gestural interaction are clear. If you can communicate with your audience using simple gestures they are likely to become engaged more easily as the threshold to participation is lowered. I no longer need to coordinate by hand with the mouse to cause a cursor to move to a specific point to click…baa-baa-beedahh… I just press, or circle or swipe.  It is inherent, immediate, intuitive and why these types of interfaces are becoming woven more tightly into our social fabric.

Of these the Touch addition, buried at the bottom of the list?! represents the biggest new playground for designers. Whilst touch interaction is nothing new, the native support for it into what will become the most installed OS around is huge.

Having Touch not only changes the way we interact with information but changes the way the information should be displayed.

Getting your screen hands dirty

As you’d expect the inventory of flicks, swipes, twofingercombomoves, taps and pinches is all there. Using the simple flick gestures we are able to move around the interface dragging up, down, moving back and forward as well as performing tasks such as copy, paste, undo, and delete, right there in and amongst it. w00t!

Practicalities aside what gets me hot is that this method of interaction allows the user to really get stuck in or as Ben Shneiderman would say directly manipulate the interface. It brings with it the high probability that we will see more minority report UI’s but more importantly it presents opportunities to break down the engagement barrier of having to operate a mouse and keyboard and in doing so opens up new richly immersive environments and online services where involvement is more than cerebral, it’s physical.

In doing so our audience suddenly got a lot broader. Gestural interaction lowers the threshold to participation, just look at the way the Wii has found a home in households. It means generations of older folk and those who do not work with computers everyday can do the things they want to without technological intimidation or hangups.

Look and Feel

A new aesthetic is also required to play in this world, one that takes cues from kiosk applications and the burgeoning world of iPhone and its immitators. Input controls need to be bigger to deal with our low fidelity fingers (sounds odd saying our fingers are low fidelity..) than the pixel perfect pointer.

Controls also need to be spaced further apart. This means throwing menus tight into the edges of your application isn’t the best move for Touch as it makes activating them more difficult. This changes what we’d traditionally expect according to Fitts’ Law which sates “the time required to interact with a target depends upon the size of the target and the distance to it. The smaller a target is, and the further away it is, the harder it is to use. But due to the large surface area of the fingertip, small controls that are too close together can also be difficult to target precisely.” MSDN guidelines

With the advent of Touch we are also seeing a renewed interest in haptic feedback. The lack of this has been one of my gripes with the iPhone and I’ll often turn on sounds to use the phone keypad as a way to give the buttons some weight. With haptic we can do things like vibrate the device when a button is pressed or use it to signal an event. This facet provides another way to make our Touch experience authentic and I’m interested to feel the nuances in design as interfaces and brands differentiate themselves through vibrations.

*Waves goodbye*

As Touch enabled computers permeate the market it means designing interfaces just got a lot more exciting. It also means things have got a lot more complicated as now we need to consider interaction across a new input device and all that this tactile one brings with it. In some ways it reminds me of creating a Flash site and an HTML site, both to essentially convey the same information albeit via a different experience. How do you design for both concurrently without compromise? Are users likely to stay in a mode or is it constantly in flux dependent upon task? How does it change what we already know about usability? What new services are going to appear that enrich this form of interaction? How will current ones adapt?…

How we choose to design for this will take time as we become au fait with the experience. In turn expectations will change and with it new patterns will undoubtedly arise. I’m currently working with the talented folk at Splendid who have developed some great applications and concepts for MS Surface and are inventing some of this future. More about this another time.

If you have worked on or seen some really great examples of multi-touch interfaces let me know about it in the comments, would love to check it out..

Related reading

Dan Saffer wrote a book about gestural interfaces
Microsoft’s Touch guidelines

Here’s some of the profiles I stumbled upon. The way this space is used to herald a users presence makes a pretty good exercise in communication and copywriting. How do you describe yourself in fewer than 160 chars? What are you trying to say and who are you saying it to?

Online social networks are a part of our lives in a big way. They have been for years however the pervasiveness and rate of adoption of these networks has reached a level where almost everyone and their dog has a Facebook or other online social profile. Facebook alone has an active membership now larger than the worlds 4th most populous country. I feel like I should say that again. Staggering. What’s more is that it’s not inconceivable that this figure will rise to a 1, particularly if it is able to spread into China.

What all of these sites have in common is a profile. A projection of yourself to the rest of the network, written and edited exclusively by you, the user. So now we’ve all become self publicists, blogging our life under the umbrella of social networking; marketing ourselves to faithfully represent who we are and commonly what we do. It also suggests as Fred Vogelstein, observed in an excellent Wired article that the famous adage “on the internet no one knows you’re a dog” is resonating less strongly.

Role play

The plethora of services I use (or have accounts with) means I also have many associated profiles. Maintaining these can be a pain although in some cases a funny excursion into the past where monikers of our previous online selfs echo in the past having not kept pace with our evolution (RIP Dil8ted, RIP BillBeef, RIP TonyTonieTone, RIP Marquess541…).

This way of speaking about the self may sound a little strange, as they are I, not entities in and of themselves surely? The point being that we can name ourself and assume a character and as that character participate in the online space. As Sherry Turkle pointed out way back in ‘95 “Windows have become a powerful metaphor for thinking about the self as a multiple, distributed system…The self is no longer simply playing different roles in different settings at different times. The life practice of windows is that of a decentered self that exists in many worlds, that plays many roles at the same time.” Sherry Turkle has researched and written about identity and our online self in great depth and is recommended reading.

With this ability to assume names and personas comes the implicit recognition that we are role playing. Taken to hideous extremes people commit cyber-crimes but more commonly it is the nuances in our interests that separate and motivate us to form groups, in the same way Paul David Hewson goes by the name of Bono. We like to role play whether we think we are doing it or not, if we’re online we have a username, it is expressive and allows us to communicate and connect with people in ways we might not otherwise.

Facebook makes it hyper real(!)

That is of course until we revealed our RL self and got proof about the dog. “Internet users behaved differently on Facebook than anywhere else online: They used their real names, connected with their real friends, linked to their real email addresses, and shared their real thoughts, tastes, and news.” Fred Vogelstein, Wired

This creates an environment of accountability. One expects more of a user, potentially imbuing them with greater trust, e.g. Amazon “real name” reviews, if they can be placed in the real world than an abstract transient moniker and arguably most significantly this changes our expectation when we leave the domain. Facebook Connect makes it easy for their population’s “Real Identity” to persist elsewhere as their blog announcement outlines, “Facebook users represent themselves with their real names and real identities. With Facebook Connect, users can bring their real identity information with them wherever they go on the Web, including: basic profile information, profile picture, name, friends, photos, events, groups, and more.”

So now it is reasonable to expect to find John Smith and Jane Doe all over the web instead of Sureshot and Rach2k. What would the complexion of this evolved real-virtual-web be like and how will we choose to interact as a result? what implications for designing social proof into applications does this present? What risks to identity theft arise? What happens when your namesakes comment, post, flame..?

I recently watched someone sitting on the plinth, looking bored and as I did it seemed to me that I was just expecting too much. By putting a person on the plinth, the expectations the viewer brings to the experience is altered so no longer is it enough to simply look at the figure knowing they are capable of more than statuesque silence.

Participatory interaction

Another plinth that changes the role of the viewer into that of a participant is Greyworld’s “Monument” behind the Tate Modern. In this case the viewer is mimicked by the figure, which tracks their movement using cameras and strikes a pose in response. It is not obvious that this statue is anything out of the ordinary. There are no signs or reasons to interact, so I assume that was a deliberate design choice to create surprise although it was either broken or taking a break when I tried it out and nothing could rouse the statue. The result was a interesting piece of interactive design in concept alone.

Interaction values

These two plinths tried to do something different and succeeded but also lost a lot of people along the way. It’s an interesting reminder that when the context is changed one also needs to consider what the viewer user participant brings with them in terms of expectation as this will alter their resulting experience.

Enabled using AJAX the user interacts with the site text by rolling over a word which highlights and displays associated symbols. Despite the symbol illustration production values being fairly low, they succeed in their simplicity to communicate meaning.

^ Eden project’s point symbols

The system has been developed by Widgit online, with more than 7,000 images covering a vocabulary in excess of 40,000 words.

I’m a fan of this kind of contextual interaction. At times the way to interact may not be obvious, but once learned it allows greater information density within the same display area. There are limits of course but for simple tasks giving the user some additional contextual help and feedforward benefits their experience.

The New York Times implement a sweet little dictionary. By highlighting a word, a question mark bubble appears that enables the user to look the word up.

^ New York Times dictionary lookup

Another incidence of contextual interaction is over at Ask.com’s search results. Rolling over the binocular icon displays a thumbnail of the destination website.

^ Ask.com search result feedforward

If you’ve seen any decent implementations of these ideas drop a link and comment below.

The video below illustrates this line of thinking perfectly. Tinker Hatfield is a talented guy - Nike’s Vice President of Innovation Design - who trained as an Architect and transitioned to Product Design whilst working at Nike. He is responsible for the classic Air Max and drew significant inspiration from the Pompidou Centre. “If I had not seen the building I might not have suggested we expose the air bag and make it visual and let people see inside the shoe.”

Having the idea however is only one part of innovating… as he goes on to say, it also takes courage to see it through “When you do something different you have to have a pretty thick skin, people are going to take shots at you. They are going to criticise what they don’t understand.”

It’s an inspiring short, have a watch, thicken up your skin and go see a new bit of the world.

^ “Respect the Architects” by Thibaut de Longeville.

The value of “Continuous” scroll - elsewhere called “infinite” scroll - raised it’s head again yesterday after performing an image search on Google and the same one on the newly launched Bing. Both address image searching which as a designer can be one of the most time consuming and sometime life draining activities.

It is an activity with few shortcuts but many pitfalls. Unlike document searching, when looking for an image, particularly on Image banks such as Getty and Corbis (both of whom use pagination), it is often about encapsulating a mood and attitude or harmonising with an existing colour set. Composition of the shot is also important. Expressions and body language critical. Image banks don’t cater to the user effectively for these oft subjective metrics which means the user has the unenviable task of wading through “pages and pages” of ill fitting results.

Bing.com makes it a little easier by porting over their Live search implementation of continuous scroll. It is the same thing Apple have been doing at their shop for a while. Essentially pagination is removed and the entire data set is returned in one monumental vertical scrolling list. The clever bit comes thanks to AJAX, which incrementally loads items only when they are within or just about to appear within the viewport.

Corbis unfortunately retain pagination in it’s just launched re-design. In this context the choice is clear and it is not pagination.

Pagination necessitates horizontal (previous | next) and vertical navigation. Continuous scroll factors out the horizontal making it simpler for a user to orientate themselves to the information.

Pagination breaks up the user experience with it’s intermittent page refreshes and load waits. Continuous scroll however is inherently a seamless, smooth experience and with incremental loading means less time waiting which means browsing at speed.

With pagination the user’s memory capacity can get maxed quicker as they need to remember which image they liked, the quality of it as well as which page it was on. Admittedly the image banks address this issue with ‘Lightboxes’ however these normally require registration/login which is not applicable to Bing’s image search. As an aside, what would be cool is to think of these multi-column monsters as a fruit machine (one arm bandit) and “hold” images that are suitable for closer consideration.

The RSI peeps also prefer less clicks which can work in the favour of Continuous scroll.

On the downside long scrolling lists can increase eye fatigue…think of watching the world streaming past from a train window. Long scrolls can also be a little daunting and make signposting the content start and end more difficult…will this thing ever end!.

Google reader is a good example of the continuous scroll. Interestingly this deals with textual random data, not just images as discussed above.

There are hurdles of user expectation and performance to negotiate and above all the implementation should focus on the content and context. It nonetheless is a cool interface pattern worth considering next time you are dealing with large data sets.

If pagination is your thing or the context is different which fits this approach then adopting these simple techniques can make it a more pleasurable experience.
1) Show the maximum number of results that will fit the users screen without scrolling.
2) Fix the pagination controls in the same position on every page. This means users can hammer the clicker to page through at speed without moving their mouse.
3) Provide a “Show all”
4) Check out the pagination 101for more basics and loads of examples.

More discussion can be found at IxDA

Continuous Scroll
Pagination Vs Scrolling