Design Pattern 5: Can u rd this?

Over the past several years, the web has been innudated with blurry, hard to read text. Users are forced to squint, struggle and enter this text exactly in order to proceed with their goal. I'm refferring to a method called a captcha, an image that normally contains letters that are intentionally obscured so that computer programs cannot 'read' them. While the need for this is understood, security against malicious scripts, the burden it puts on the user has only increased since these letters are usually not a 'word' and bent 'm's and 'l's easily become unreadable. All of this is to tell the system you are actually a human being, hardly something humans feel necessary to prove.

CaptchaThe amazing thing in the research realm of computer vision is that some algorithms are becoming able to 'read' this obscure text, making it necessary to make them even more unreadable. Recently, I have found this alternate 'maptcha' - being used on a number of sites, replacing the text with a simple addition problem. Not only was it less burdensome on the eyes, it seemed a bit fun to do a small math or counting exercise. I am curious if this is terribly insecure, or just a small revolt against the difficulty many users have with the other method. Either way, a great pattern to emulate, and much easier to use.

Design can be Used for Good and Bad

Every so often I'm rudely reminded that much of the information I get comes from a source who's goal is to sell rather than inform.  It is those times that I'm also reminded of the critical role that design plays in supporting the goals of the organization (wether they be to inform or to sell) by shaping user behavior.

Case in point.  I use Yahoo Finance to track my stock portfolio and stay financially abreast of the day.   I choose Yahoo over the many others out there because I'm used to it.  It has a simple interface and I know where everything is located.  It also has great tools, and it aggregates information from many many other sources in one place, which I find invaluable.  However I just recently noticed that Yahoo Finance is serving some text ads on the site now.  I wouldn't otherwise be too bothered by them, but they've been designed for the express purpose of looking like real (un-sponsored) content.  They're right up there on the right hand side of the page, occupying the top of one column in a three column layout.  The ad titles are just about the same color as the headlines and links on the rest of the site.  And while the other section titles are all orange and bold--designed to give structure to the page and let you know what section your in-- the only way you can tell that your reading ads is from the truly inconspicuous (light-grey on light blue, thin, all caps) 'Advertisement' header.  

This really infuriates me, especially because it's a finance site, and I can't help but notice the content of the ads.  For instance, right now I'm looking at the front page, from left to right I see a snapshot of the Dow's performance today, a headline saying 'Stocks mixed ahead of jobs report' and a couple of blurbs on 'Hottest China Stock' and '16 Hot Dividend Stocks'.  Now I'm sure you can guess which ones are ads.  And yet I can't help but see the ads and incorporate them into my understanding of the days financial news.  They were designed to be scanned, and that's exactly the kind of information I need to be able to filter out when I'm scanning a page like this.

The fact that these ads persist is a clear indication that Yahoo is concerned less about an informed public and more about using its real estate to extract as much equity as possible.



Powered by ScribeFire.

Dasher - A new way to write

I simply love finding these little gems on my weekly web excursions.  This time it's a fascinating new piece of software out there called Dasher, and it allows you to write without typing or scripting.  What's that you say?  How else can you write?  Well...The basic idea is that current methods of typing are inefficient, because they don't learn.  Let me explain.  Although there are x number of letters in the alphabet, every pressed key reduces the number of available choices for the next key press, and increases the odds that other specific keys are pressed next.  For instance, 'E' is much more likely to be pressed after 'H' than 'B' is, and 'O' more likely after 'G' than 'C'.  On current writing technologies it's up to the user to learn to be more efficient at writing He than Hb or Go than Gc.  But that doesn't need to be the case.  By taking advantage of the learning and memorization power of the computer, it's possible to create writing interfaces that guide you through the process rather than just recording what you type.  If you'll indulge me in some metaphor, imagine rowing down a river.  Dasher is the river with a strong current to wherever your going, and existing typewriting technology is the river with no current whatsoever.   

Picture_4 What Dasher does is use language patterns to present likely letters and words to the user based on the letters or words they have already written.  The goal is to make writing more efficient by reducing work.  There are no keys to press using dasher.  In fact the mouse is never clicked.  The interface allows one to write by simply navigating the mouse down a path--or tree--through the alphabet.  The start screen displays all 26 letters of the English alphabet.  You select a letter by moving your mouse next to it.  As letters are selected, Dasher displays all available letters again, but this time those more likely to be chosen are larger and therefore easier to select.  As you write, you move forward through the tree, and entire words and phrases are displayed in order of likeliness.   

Dasher needs some work before I start using it instead of my keypad, but the idea has real merit, and it deserves to be explored more.  As an interface designer I see at this tool as a great example of how simple interactions, when thought about creatively, with nothing held sacred, can have potentially revolutionary effects on the way we interact with technology.
 
 

Powered by ScribeFire.

Reading 2.0

This weekend three events got me thinking about books. First of all seeing the excellent adaptation of Pullman's The Golden Compass. I had read the books quite a while back, I think around the time of the beginning of the Potter mania. What surprised me was the previews before the film started. New movies of yet more fantastic adventures of boys and girls with magical creatures, etc, but all revolving around books. The two previews were for the Spiderwick Chronicles and something called Inkmore or some such thing. I suppose it is not a new theme that "a book takes you to another world". The Pullman series, much in the vein of fantasy or scifi, presents an alternate universe to mirror and critique our own. Once turned to a movie, however, the book's themes are washed out a bit due to the nature of editing and visualization. In these other films Spiderwick, and inksomething the writing and reading of particular books itself leads the characters into danger and drama. I suppose, thinking of last years blockbuster, if the wardrobe in the titular novel was instead a paperback, it would present the same theme. Pro-book sentiment is laudable, but something rings hollow in the visualization layer, all these movies tend to look alike. If it wasn't for the acting, the effects and costumes of Compass (and the other two from the preview) reminds you of just about every movie made since "Lord of the rings". So it is actually the book itself that has the most distinguishing characteristics, there is no way to confuse the prose of "Rings" with the language of "Compass", but the movies look the same (and have similar actors). So is the magic world so vividly imagined truly available only on the printed page since special effects have become so sophisticated, yet commonplace?

So while thinking of the written word, I notice Chicago is blanketed recently with ads on the CTA for the Sony Reader. Perhaps related to last months launch of Amazon's Kindle. While I am intrigued by the introduction of these devices, I have a good friend at www.manybooks.net who is a purveyor of online books, and who has been kind enough to let me play with and use these devices. I suppose a recent viewing of 2001 reminded me of what bothers me about them, the scene when the astronauts sit to eat their meal, they have a paper thin TV they carry with them. The TV has no outward controls, but can be manipulated somehow. If ebooks looked and acted like pieces of paper, wouldn't that be the ideal user interface? Seeing all the buttons on these readers causes me to wonder how people are expected to interact with their books. I think the turning of pages is clear enough, but what do the 21 vs 54 buttons achieve that 4, 5 or 0 could not? I can't look at these devices and not think of remote controls or cellphones or a variety of user experiences based on reading and understanding 100 page manuals. Is the ideal somehow like the iphone, you touch the page and it 'acts like paper'? Perhaps it is impossible to not have to manipulate the interface, and that leads to a lack of immersion in the story?

The third event I spoke of was reaching the climax of Moby Dick which has taken me the better part of a year to get through because I receive it as a daily email (250 installments) from dailylit.com. After recommending the Compass movie to a co-worker, they asked if they should read the book first. This struck me as a quite old-fashioned sentiment. Will you get more out of a movie if you have read it first? Personally, I find it impossible in the age of ubiquitous computing to make time to read a novel with blogposts (*ahem*) websites and other distractions. Dailylit cleverly proposes that if you have time to read all your emails, you have time to read a book, abeit chapter by chapter. Taken in small doses, you can tackle a large subject. Moby Dick, due to a somewhat schizophrenic narrative structure, made for a perfect daily short email, and I kept with the story for all these months, and can even think of picking up the actual book for a real read someday. Perhaps the business model is what is really in question, some books and movies make millions while other authors are embracing electronic distribution to try and build readership much like myspace does for new bands.

What are your thoughts on the written word? Are these films/devices only lip service to the wonders of reading? Can we consume the written word within the electronic one without being hopelessly distracted? Or having to read the manual?

DUX2007 - Simplicity

Too often, the overarching requirement we hear from clients is that the product must be simple to use. As designers, we nod our heads and agree that yes indeed, simplicity is a worthy goal for this project, without ever defining what is meant by simplicity.

At the opening night of the DUX07 conference, B. J. Fogg, from Stanford University's Persuasive Technology Lab, talked to us for a bit via video about his recent explorations into simplicity. What exactly does simplicity mean? What are the determining factors of simplicity, i.e., what am I looking at in order to rate whether or not a product is simple to use?

To Dr. Fogg, simplicity is not a characteristic of the product but rather a perception of the experience. From his studies and research, he's determined there are six elements of simplicity:

  • time - can I spend the time learning to use a new product? no? then it's not simple
  • money - can I spend money on a new product?
  • physical effort - does it require exertion beyond my usual effort?
  • brain cycles - do I have to think for a long time?
  • social deviance - does it go against the social norm?
  • non-routine - does it break my routine?

These six elements vary by individual and by context and there are trade-offs. For example, if I'm a college student who has time but not a lot of money, I might be more willing to invest my time in learning a new product than, say, a business executive who doesn't have the time but would be more willing to spend a little more money on a product that doesn't require a lot of time.

Simplicity, therefore, is a function of the user's scarcest resource at the time. To state it another way: a product, task, etc., is truly simple until it requires a resources that's not available. But remember, Dr. Fogg said that simplicity is determined by the perception of the experience. Which means a task can be perceived as simple if it uses less resources than expected.

Now I'm not saying that from now on we market our products by setting the expectations high to guarantee the perception of simple .... but it sure is tempting.

Technorati Tags: , ,

What is UxD?

A couple of weeks ago a sales presentation was being prepared in our New York office; it was primarily focussed on the problem at hand, but the presenter wanted to include a single slide as a cue to talk about  User Experience Design [UxD]. He emailed me and a couple of the principles asking for a description in a single frame.

I wrote something, designed two slides because I could not shoehorn it into one, various documents were thrown into the air, then we were all consumed by other work as the train moved on.

Now I am rethinking it. UxD is a fairly complex set of activities to describe, and there is no shortage of areas claimed by related disciplines. All of them are occurring in an area of rapid market development that happens to be highly valued by the societies we are in. Which is a recipe to attract passionate debate driven by financial rewards.

So is there a good way to describe it, or state it's value to a potential client in a single powerpoint slide? Assuming that no fly-ins, starbursts or windowshade rolls may be used in place of meaning, we will start with those old standbys - words:
________________________________________

Concise version:
User Experience Designers create structures for understanding and manipulating information, designing consistent contexts which encourage cumulative learning. In doing so they raise the bar from "being able to do something" to "being able to do something easily".

Their solutions go beyond code to model the most efficient and pleasing conceptual space that can be created within the constraints of time, budget & resources.
________________________________________

Verbose version:
User Experience Designers are typically employed on applications or sites with large amounts of features, complexity or information.

They create structures for understanding and manipulating information or parameters, designing consistent contexts which encourage cumulative learning.

They raise the bar from "being able to do something" to "being able to do something easily". As a starting point they conduct research to find:
_Who are the users?
_What are their goals?
_In what context will they use the product?

Then they use any modeling technique available to propose solutions that go beyond code to model the most most efficient and pleasing conceptual space that can be created within the constraints of time, budget & resources.
________________________________________

And this is just a starting point for discussion, and the slide itself is TBD. The concise version is hardly meant to be all encompassing, but it focuses on Pathfinders particular business goals. These are concentrated in application work, either in or out of a browser, and our communications tend to be directed toward fairly tech savvy folks. Interested in your comments.

Charles

Color for Developers, part 3

Through a glass badly

"This is not a pipe."  R. Magritte

You are reading this on screen. It is not what I expected.

One of the biggest problems for any on-screen designer is the weird backlit medium we fish swim in. This is true if you are creating interfaces for browsers or desktop applications.

By now you are asking why, why does he continue to torture us with these vague allusions and puzzling suppositions. Well it is just my sick idea of fun, really, but here is a simple test. Make a pdf of your favorite picture of a human. Put it on a flash drive and walk around to a few of your colleagues computers and compare the different displays. Extra points can be scored in two ways:

1] try a PC and any other platform, Mac, SGI, Treo

2] try laptop, lcd and CRT screens. If you can still find a CRT screen, they are fading into the dust of time or the junkyards of third world countries as we speak.

Of course you will find that the image of Britney Spears moments after the haircut discloses an array of skull colors limited only by the number of screens it is displayed on.

Individual hairs may or may not resolve, and the level of contrast will have a happy variety as well. This is where you work. Every one of your users sees this differently.

So great, isn't that a big mess, can we please just ignore it? Well no, that isn't really playing well with others. What we need is a basic strategy for accommodating this tragic reality.

There are commercial solutions to calibration available, or most Adobe programs ship with basic calibration tools. These will help... but only you. There is no way of knowing if your users ever did this, and we know that asking is not a scalable strategy.

Unless you are in a highly controlled situation, in an industry where there is a financial benefit directly tied to color fidelity, you can bet that no one really cares.

So what is the solution?

1] Design it a bit crude. Don't expect someone's screen to display a reliable difference between zero, 10 and 20 percent black, that is too subtle. Try 0, 15 and 30

2] Test it. Test it some more. Don't beat it to death, but it can definitely be too subtle.

There we go. In a few short blogs the secrets of your universe revealed. You have grasped the remote from my hand, grasshopper, do not watch Jerry Springer with the powerful tools you have been given.

Color for Developers, part 2

Color in context Many moons have swung by since our last talk, grasshopper, and by now you have had those tattoos revised and replaced more times than Angelina Jolie. I can only hope you have been as politically corrupt and personally shocking, really, she is a role model to so many.

Today we will talk about color and perception, then later we will do the sacrifice part... Right, let's start with Kasimir Malevich, who had strong opinions about color or the lack thereof and put his money, [or the people's money] where his brush was. Painted such fashion nuggets as "White on white" and "Black square". If you imagine what they look like in your mind, you will be darn close.

So what was on his mind? Why bother? There are a couple of reasons:

1] Cultural He was a Supremacist in Russia in the early part of the last century and thought that painting couches and side-tables was hopelessly bourgeois.

2] Psychological He wanted to defeat his own preconceptions and create something new; a kind of meta painting that was both free of objects and depicting pure emotion.

Well can color or it's absence do that? What strange and magical powers does it have? Vassily Kandinsky, one of Kasimirs drinking buddies, associated some very specific things with color - he claimed that certain colors elicited thoughts/memories/feelings of particular sounds and feelings and made them into a handy grid.

Most people make some basic and reliable associations with colors; black associates with night, death and designers clothing. Red means fire engines and radio flyer wagons. These are cultural associations, that effect how we perceive and interpret our world. A blue light on your dashboard is understood as a fairly passive status light. A yellow light, blinking rapidly, means the engine is probably about to seize.

When we use these colors in an interface, all of those associations are carried along with it. A complicating factor is the cultural context it is being read in. Many cultures have very different tolerances and preferences for color that western europeans; any short description of these differences will be reductive, but think of these references: Jamaican villages houses, Bollywood movies, Japanese packaging... Would those local tastes effect the design of an interface for those groups? I look forward to your comments. Leave a donation for the gods by the planter.

Que Multimedia: Part 2, A Dilemma:

I share the responsibilities of hiring decisions for a small consultancy and being a design educator. Hiring new staff gives me one perspective on the state of education, and designing and delivering classes another. Our consultancy delivers user experience design for applications; the participation of any kind of designer in these tasks is a relatively new thing, and is too often seen with some suspicion by both developers and financial officers in the organizations we consult with. The ability to convey the passion that is required for the work is an asset, and one beyond any discussion of teaching methodologies. That said, I see it as vitally important work that is rooted in a strong understanding of typographic hierarchies, information design and the mechanisms of interactivity. Experience in the former role tells me that hiring a design graduate with less than 3 to 5 years experience is usually a mistake. Surprisingly, I have had better luck with geeky film or architecture grads. They tend to have stronger conceptual abilities. We can deduce that design programs are non-functional in developing graduates capable of exploring and understanding these tasks. This is a simple and troubling assumption, particularly as I am complicit in the activity of educating them. The organizers of the Schools of Thought conference have recognized a broader problem, inclusive of this issue, and have organized their spring conference around it. http://superstove.blogs.com/schoolsofthoughts3/portal/index.html My question is this. Is it presumptuous to expect Design Schools to graduate students with even a roadmap of the skills of information design, interactivity and typography? The problem lies less with graduate programs - where students should have some breadth of experience - but is pronounced in undergraduate education. I hear no end of lip service; these are core values all lay claim too; yet the results are a vision of the emperors new clothes.

1 Picture == 1,000 Words

For most of us, visual presentation has a greater immediate impact than text or numbers alone. Graphs are effectively used in presentations for that very reason: they quickly convey that Column A is larger than Column B, or that Line 1 has outperformed Line 2. They allow us to easily grasp the overall concept before drilling down into the details. When done well, they allow us to convey complexity with ease (see Tufte, Edward).

When a search engine visually presents the results in a manner that allows me to quickly grasp the depth of the search, quite naturally it catches my eye. Grokker.com is a search application that displays the results both in an outline view and a map view. The user can toggle back and forth between the two views before selecting their preference for viewing the results.

Continue reading "1 Picture == 1,000 Words" »

#*&)#*$)# Software.

Nothing is more frustrating than having your software beep at you when you’re trying to do something you *know* it can do, and you’re flummoxed as to why it’s resisting your every effort to continue on with your work. All attempts are met with the same impersonal beep, whereupon you conclude that (a) the software hates you and (b) your only recourse is to begin swearing with enough proficiency and creativity to make a sailor blush. You just might be the victim of a mode error.

Continue reading "#*&)#*$)# Software." »

5 Practical Uses for Web Animation

Most animation being served up on the web serves no purpose other than to distract, irritate, annoy or confuse.  Most web interface designers would tell you, rightly so, that as a general rule, it’s better to stay away from animation.  But there are certain instances where animation would actually provide valuable utility.  Here are Five.

To Indicate Progress
Progress bars might be the most ubiquitous use of practical animation on the web today.  There’s no better way to indicate how far a process has come and how much there is to go than to include one of these simple UI elements on screen.  The key to it’s effectiveness is that its real time, which is the direct result of the animation.

To Alert
At certain points it becomes imperative that an interface spotlight a position on screen and direct the user’s concentration there. Taking advantage of human instinct by using motion to grab the user’s attention, a well designed animation will do just that,

To Indicate Hiding / Revealing Items
In addition to providing a nice polish to an otherwise binary operation, animated show hide items provide important information—because motion is involved in hiding an item, they let the user know where to access an item that is currently hidden.

To Convey Statelessness
Through over a decade of conditioning, web users expect sites to behave according to the page model, in which each new display represents a new page load.  However, in an Ajax/Flash/DHTML world, it’s important that rich interactions, which by definition do not conform to the page model, be clearly illustrated as such, so that users know what to expect when they hit the back button.  Animating between display states is a great way to achieve this, because it unambiguously lets the user know that no new page has loaded.

To Illustrate Complex Tasks
Sometimes Two or even Three dimensions are not enough to convey all the information that needs to be conveyed.  In those cases an animated illustration can do the trick.

Ambient Signifiers

I recently came across Ross Howard’s essay on ambient signifiers, subtle design elements that give the user context.  They work at a more subconscious level than overt signifiers; yet, even without a conscious effort from the user, their constant presence affords an effective means of communication.

The author’s musings came from his experience with the Tokyo rail network.  Along with a station’s obvious and somewhat standard clues (signage, train colors, audio announcements, etc.), each station has its own chime melody. By remembering the chime for their final stop (which they’re exposed to while waiting for the train) along with the chime for the station before their final stop (which they can hear when the doors open), commuters can more or less ignore the passing landscape and still be cued into their surroundings. Ambient signifiers allow them to maintain a sense of where they are without having to actively seek it out.

Moving into the digital realm, consider when a browser changes the background color of the location field once the user is on a secure site. It’s a subtle change, but once the user associates it as an indicator of a secure site, a quick glance at the field will reinforce that they’re in the secure portion of a site.

The challenge is how to integrate this concept into your web design methodology. Overt signifiers, such as navigation, will always be necessary but perhaps we should also develop a vocabulary of ambient signifiers as reinforcement. A deepening of background colors to indicate sections a user visits often; a lightening of colors to indicate links to older items; differences in font size to show depth of a category, etc. Once you start thinking along these lines, you realize there are a number of ways to incorporate this concept into your design, aiding in the effective use of the site or web app.

Onward to Web 3.0

In 2007, we’ll be seeing how Web 2.0 matures from a trendy buzzword into the realm of web standards. With the 2.0 technology and interaction, the idea of ‘community’ won’t be limited to a few oddball sites but will rather become an integral part of many mainstream sites.

You can already see this happening with the array of social bookmarking and media sharing links. What began as an oddity of icons encountered on the rare blog or two, is now becoming a standard one-click sharing device on such venerable sites as the New York Times. It’s a global community out there!

So with the maturing of Web 2.0 a given, the obvious question is what’s next? If I knew, trust me I’d be buying stock in the next killer app right now. But indications seem to be pointing towards a connection of data in a more intelligent manner, making it more relevant to the user.

Let’s face it, there’s a lot of data out there that in theory is searchable but not always connectable without spending a lot of time pouring over the results. And who has time for that. So we usually end up taking the first few results and running with that, but it doesn’t always work out.

So, what if we had a system that could rank and weigh people’s comments (which are fast becoming a standard feature thanks to Web 2.0) and, by cognitive deduction, find just the right result for that user. That is, our system would mine the data in the Web to detect relationships between the information that’s out there. Once established, it would be easier to extract and aggregate information tailored to fit the user.

Pie in the sky? Well the folks at the University of Washington don’t think so. Check out what they’re doing with their KnowItAll and Opine systems. Play around with their demos and think of how this would change your interaction with, say, a travel site if the system could provide a useful and meaningful result by distinguishing between concepts such "great" and "almost great".

"The system will know that spotless is better than clean," said Oren Etzioni, an artificial-intelligence researcher at the University of Washington who is a leader of the project. '"There is the growing realization that text on the Web is a tremendous resource."

And so in the next few years, we just might see this definition:

Web 3.0 – a web of connected data; i.e., moving from a web of connected documents/sites to a web of connected data.

The Iphone, why.

Years ago I would go to conferences and people would hold up their Palm and lecture us on why it worked, the economy of means, the elegance. Time passed and the same people - usually people who had not actually participated in the design process of the particular device - would hold up an Ipod and preach the wonders of the clickwheel and how it had revolutionized design on the order of bread slicers or fishnet hose.

That they usually missed the point was irrelevant. The value of the Palm was that it was much smaller than a Newton, and much faster because Palm asked people what they actually used. And both of them had coherent software interfaces that easily synced the stuff on your desktop machine. That the Ipod made having many gigabytes of purloined music sort of marginally legitimate was not trivial, either.

So I wanted to get in on the ground floor of helping Apple hype the Ipod phone, because I am predicting that this will save me a significant amount in conference fees over the next two years.

Why does this phone elicit responses like Alice’s, a post or two back? Which I fully admit I shared as all the Mac addicts read the real time blogs from Macworld while jobs was unveiling it. Oh yeah, it is cool!

But what it makes such a big splash is a study in contrasts, and how the competition failed to develop and market something that people can feel affection for.

The current crop of cellphones are junk. There are so many difficult to use features that the cellphone companies market a special line of simple phones for the very young, very old or especially annoyed.

And the phone companies are completely oblivious to this resistance. Because of the way that cell phones are sold, really as a token of the extortionist contract with the service provider, there is a critical reduction that occurs to the feedback from the user. The design of the phones is passed on as a feature list and separated from everything else in the users existence. An elaborate, undoubtably extensively discussed system to create a broken wheel.

The worst thing about the current phones - and don’t get me wrong, Razors look cool and have great ads - is that if you lose it your numbers and all of the phone specific programming is gone. Unless you have a Trio or a Blackberry, you are just out of luck. But even Trio’s and Blackberries don’t have a good mp3/mp4 implementation. Much less the overwhelming cultural currency [read: cool] of the Ipod.

The Ipod advantage in both cases is it’s connection to the desktop.

For phone numbers, it leverages a much more powerful interface; your desktop through any Vcard compliant program. So you have all of your email addresses on the phone; and backed up. Think weeks of texting saved. Imagine what you will do with that time.

In terms of features, the new phone is configurable. Which means, to a luddite like me, that you can turn most of them off. Thankyouverymuch!

Not having to carry around my Ipod and my phone is probably the least of the advantages. Waiting until all the early adopters buy it and the price falls will be the hard part.

Wheels on a boat

A couple of days ago someone sent me a link to a flash catalog piece...

I have seen these kinds of things before.

And I always wonder why the idea gets repeated. I suspect it is because catalog based retailers see the Book as some kind of golden calf which is due irrational worship. The downfall is in the data-density difference between print and screen is the culprit; print holds so much more that the on screen imitation is irrelevant. The magnifying glass shows a smaller width than a column of type; not being able to read a full line makes multiple lines an instantly rejected experience, fomenting shockingly derisive thoughts on the part of a user.

I have seen this done better, maybe it was a Lands End version... It popped up a new window which was larger and had better controls.

The next question is what would make it work? Is there value to this format that drives otherwise knowledgeable adults to keep trying this metaphor?

If you assumed a 1024 x 768 user base, you would have a larger  beginning state. A very large magnifying glass, or better yet- zoom capabilities, would allow you to move into the page. Which returns us to the question of value.

What is it that retailers are seeking here? I think it is the experience of browsing in a lateral fashion and focussing in on some desirable or intriguing item... A simple but durable pleasure. And the notion of lateral non-hierarchical browsing is certainly a mainstay of the web.

As well, they are looking to leverage the page layout techniques that they find successful in print. This is where things break down; cluttered web pages, whether imitating print or not don’t tend to function very well for impulse surfing. If the page design were less dense with more whitespace you might be able to leverage one medium against the other. However this becomes a series of decisions as to how your product offering combine with the semantic codes connoted by the design choices this would require.

Que Multimedia?

A local school recently asked me to teach a course in Multimedia. It is a first year grad course for people with little design context. Ordinarily I would have been interested in the school and it’s excellent program, yet I stumbled when I heard the term. Living in our Ajax enriched environment it struck me as an old school term, and wondered why it had faded from use.

After a bit of pondering, I came to the conclusion that it is a bit like carving trees out of wood. The metaphor is reversed. The soul in what we do is the interaction; multimedia is occaisionally part of the vessel.

Multimedia means Flash, cheesy little director games, tiny choppy video. Think of children’s CD-roms where low rent repitition is sort of a crash test stand-in for learning cognition. Multimedia means things that are difficult to sell and typically bring dissappointing responses when you do. And not usually worth producing except for massive media clients as they are expensive and cumbersome to update. These are not positive associations.

What is interesting is interaction design and the ability to synthesize actions and events into tighter groupings, both conceptually & physically - ideas like direct manipulation, contextual logic and coherent paths have utility; making it blink is just not that important.

I thought about for a bit, and realized that the suit didn’t fit. Back on the rack.

Information Visualization tools

Some would argue that Web 2.0 is a social revolution, not a technological one.  Social networking tools such as Blogs, Wiki's, bookmarking and tagging sites, Mashups, and APIs allow collaboration between users and communities of a much greater quality than ever before. 

As these new tools allow users to share and collaborate in ever more sophisticated ways, social data increases in quantity and complexity.

Emily Chang has posted about a few innovative tools that help users navigate that data...
Visualization and Discovery 

A Good Reference – Jenifer Tidwell’s "Designing Interfaces"

It’s easy for interactive design reference books to seem obsolete very quickly, but I don’t think this will happen with Jenifer Tidwell’s book Designing Interfaces. This book does a great job of presenting examples along with the rational and the theory behind how key design principles can be used effectively.

The book covers both web and desktop style interfaces and many of the basic design patterns used to create them. Also covered are form design, page layout, content organization, navigation, visual style, information graphics, error handling and much more. Not only can this book be inspiration for creating better interfaces, it will enable you to better understand and present the rational behind design decisions.

The Zeigarnik Effect in GUI Design

The Zeigarnik effect suggests people remember incomplete or interrupted things better than completed things. It’s human nature to want to complete a task or hear the end of a story, and when we don’t a psychological tension results until the item is completed.

The effect has an interesting implication for digital interfaces. When a user involved in a long task encounters an interruption or an opportunity to complete a quick task, there’s a good chance the interruption or new task will get acted on. This can leave a lineage of uncompleted tasks and non-linear navigation trails. 

One way to combat this that we have used in a variety of applications is to dynamically create a task queue. The queue stacks up incomplete tasks in one place so the user can get back to these tasks when he or she is ready. In a restricted domain, it’s usually possible to apply some intelligence as to how the queue is built so it reads fluidly and clearly.

Leveraging the User’s Experience: Insights on Designing for AJAX

When the first GUIs were created they leveraged perhaps the most ubiquitous items people experienced in an office environment: a desktop with folders and documents.

As we move into the world of AJAX and rich interactions, the principle of leveraging experience can be extended not just to objects but how we interact with those objects. Google maps provide a familiar example. Using rich interactions, we are able to interact with the map almost as if it were a physical object (without having to figure out how to fold it – a benefit to be sure). Another form of interaction being seen more and more is the concept of a sliding drawer. Objects we may need are closely available, but are not consuming precious screen real estate until needed.

As rich interaction and AJAX technologies mature, they present endless possibilities for the designer to create something that is innovative through its familiarity.

Great Article on Prototyping Complex Interactions

If you haven't already read it, you really should. Andres Zapata has published an excellent article over at boxesandarrows entitled The Guided Wireframe Narrative for Rich Internet Applications. A brief taste:

The key to using a low-context medium (wireframes) to illustrate high-context information (rich internet applications) is to narrate the information in layers or in dimensions. In short, because we couldn’t build a prototype (due to time and budget constraints), we built a story. But because it wasn’t a linear application, multiple stories needed to be constructed. We call these stories the Guided Wireframe Narrative.

Our story or narrative focused on four main dimensions:

  • Hierarchy

  • Screen real estate

  • Design conventions

  • Interaction patterns

We call these multiple stories microflows.  Lots of food for thought here. Go and read it now.

 

Ajax and user experience

The increasing ubiquity of Ajax is becoming somewhat of a vicious cycle, as more demand creates more hype which creates even more demand.  As such, it presents interesting challenges for designers.  How do designers weight the pressure to 'Ajaxify', with the needs of the user. 

While Ajax does represent the beginnings of a new way of using the web, Ajax doesn't make sense all the time.  Yet it has become such a hot topic that design and development firms are experiencing more and more demand for anything 'Ajax'.  Frequently, those clamoring for the technology don't really know what it is, nor what it can be usefull for, but they know what they've heard...that it's the hot new thing, and there web site or web app is just not worth the browser its rendered on unless its got Ajax. 

The results can be frustrating to see.  For instance, have you ever come across an instance of a drag and drop module where a simple mouse click is so much easier and more effective?  Yeah it's cool...because, um...well, I'm dragging and dropping something...on a web site...and it's Ajax! 

Designers need to curb clients enthusiasm, so to speak, and make them understand that having the best web site doesn't mean using the latest and flashiest technologies.  It means applying a strong methodology, good user research, and an understanding of heuristic principles to build something that provides users with a useful and satisfying experience.

Thoughtful gesture? Peter Coffee’s column misses the point.

As I leafed through my ever growing stack of tech magazines yesterday, a column in eWeek by Peter Coffee, entitled Thoughtful gestures – don’t make complexity elegant; make it disappear caught my eye. 

Mr. Coffee was writing about a patent application from Apple for processing multipoint gestures on a touch input device. The language of patent applications is notoriously dense and jargon laden, so in laymans terms, this is about making it easier to interpret what a user wants when they touch a screen or touch pad at multiple points at the same time.  Some simple examples of multipoint gestures include squeezing, stretching or twisting motions while touching a screen with your finger tips.

Mr. Coffee's contention is that this invention is a way of making more complex tasks easier to perform, that it has no real-world, practical application, and that this is the wrong problem for inventors to tackle. He states that “I’d rather see interface efforts based on watching what users do, understanding common needs and designing systems in which those actions are simple. Making complexity elegant is an achievement, but I'd rather just make that complexity invisible.”

This is a fine sentiment, and a good one-sentence description of user experience design, but he really misses the point of how new input device inventions relate to user-experience design.

He illustrates the uselessness of gestural interfaces by describing two ways of saving a users work – one using a whole series of convoluted gestures that makes the user look like she’s doing the Macarena, and a simple, elegant way of using keyboard strokes. Boy, based on that example, gestural interface sure sounds like a bad idea, and inventors should stick to improving how to use existing input devices.

The trouble with this example is that the same argument was made about the mouse when it joined the keyboard as an interface device. There were (and are) many things that are easier to do with a keyboard than with a mouse – saving a file using shortcuts, typing a letter, entering data in a spreadsheet, just to name a few. Does that make the mouse useless? Why use something as complicated as a mouse?

Let’s take the case of a user putting together a process diagram in Visio. Using a keyboard interface, a user can perform a lot of complicated keyboard strokes to generate, place, link and annotate the diagram elements. Meanwhile, back in the real world (as Mr. Coffee would say) the user simply drags and drops the elements in place using his mouse, touch pad or pointer.

Clearly, different interfaces are good for different types of actions, and it’s up to the user experience designer to apply the appropriate combination of available interfaces in a way that lets the user simplify and streamline their interactions.

So where might using a multipoint gesture interface simplify a current, real world interaction? How about Google Maps: Multipoint gestures such as squeezing, stretching or turning, combined with single point gestures like dragging, could make navigation significantly simpler and faster than the current mouse-based approach.

The point of inventions like this is not to make more complex acts achievable, but what things can be simplified using these inventions. Almost all ways in which we interface with computers are pretty complex. For example, learning to use a keyboard is a lot more complex and time consuming than learning to use a mouse, and learning to navigate using keyboard shortcuts requires much more familiarity with an application than using a mouse. Gestural interfaces need be no more complex than keyboard or mouse interfaces.

So inventors, keep inventing!  Between user experience designers, developers and usere, we'll take the best inventions to  make things genuinely simple.

Technorati

  • --