Pathfinder Blog
Topic Archive: Interaction Design

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 »

#*&)#*$)# 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 »

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.

About Pathfinder

  • We design and build extraordinary applications for companies looking to make the next great idea a reality.
  • learn more

Topics

WordPress

Comments about this site: info@pathf.com