Archives

Mobile apps need to be designed and tested to scale to avoid surprises when actual human hands start operating the app. Designs crafted or presented on large monitors can be deceiving, because it’s hard to think in terms of two scales at the same time. Better to work at scale, and if possible even view key screens and simple prototypes on the device itself.

Following are some simple techniques for designing and testing with scale prototypes.

Index Card Prototypes
For a mobile smart phone app, a stack of 3×5 index cards will roughly approximate the size of the device. Screen concepts can be sketched on the cards and a walk though demo can quickly be assembled. While this kind of demo is rough, the time to create it is minimal and the resulting card stack can be used for informal usability tests.

When sketching a prototype, try several ways of organizing the content to keep the screens simple. Finding the right organizing approach should make the design of the supporting parts easier, so it pays to try as many ideas as you can think of to get an optimal one. Spend minutes, not hours, on your initial concepts.

To-Scale Storyboards
Another effective and simple prototyping technique is to make to-scale blank storyboard screens that represent the footprint of your device. Be sure you represent physical size correctly, so when you print the blank storyboard pages your screens are true to your device size. Storyboards are particularly useful for illustrating ideas of how an app can flow, or what a key usage scenario might look like.

On-device Sample Screens
Sample screen mock-ups and even sketches can often be best reviewed if you display them on the actual device. This doesn’t require a lot of code or even any code. Graphics images produced to-scale could be loaded onto the device in an application or prototyping program with minimal functionality that just displays the images.

On-Device Prototypes
The most reliable way to test a touch prototype is to get some actual functionality running on the target device. Of course, this is also the most expensive way to test but it can be worth the effort. This is especially true for testing the feel of the app, because the feel will depend on several things working together, including how the device is held (or positioned), the ease of seeing where things are at on the screen, the ease of locating interactive elements, the expected behavior of the app vs. the actual behavior and the responsiveness of the device to actual gestures.

To reach a compromise between the cost and value of such a test, it is usually best to focus on one or two key aspects of the feel and plan to do a few iterations of the test. The ability to re-iterate a test after doing some refinements can lead to much more valuable findings than a simple one-shot test.

[note: when you see a painful restaurant website, can you please send them a link to this post or copy and email this to them? It is in all of our best interests that we get better restaurant sites. Thanks!]

Dear Restauranteur,

We realize that as an entrepreneur you wear a lot of hats, but you probably aren’t a web professional. So, we would like to humbly give you some advice to improve the web experience for your customers.

Why we come to your website

Ideally, we want to do all of the above in 1 click without having to wait for all kinds of stuff to load.

A few simple suggestions

Please don’t use Flash We realize that lots of restaurants think Flash sites are cool. But almost all of them suck. Folks on iPhones and iPads can’t even see your site (33% of us). Those who can see it have to wait while it loads and then shows us some “artsy” interlude before we can get to what we want. Sometimes that is so painful, we leave and go to Yelp to get what we are looking for.

Please don’t put your menus in PDFs

Its painful to have to go to another application to see your menu. And those of us who have older devices can’t see them.

Please keep your site up to date

Its not useful to see a menu from 2006.  You don’t have to be a web ninja to update your site. The same guru who charged you your right arm for some flash wizardry can set up a simple content management system for you, where its as easy as typing an email to update your site.

Please don’t blare music at us

With a few exceptions, we come first for the food and service, then the ambience. Please don’t force us to have to listen to Black Betty Remix or Toccata and Fugue just to get your exact address so we can tell our friend where to meet. Thanks for listening to us and we think a few changes will make coming to your site less frustrating. And if you think we are wrong, please Google bad restaurant website and see what folks think!

Thanks,

Your customer

The value of wireframing even with incomplete information

The task of wireframing in application development, as I’ve come to know it, should begin after user research has been performed, and a complete set of requirements gathered.  But what happens when, for whatever reason, you just don’t have access to user research, or a full set of requirements?  What if all you have are some rather unspecific, vague notions of what the user should and should not be able to do?  Is wireframing at this juncture useful?  I say yes.  With incomplete or even almost non existent information about target users and or requirements, wireframes can still be a valuable tool in the interface designers toolkit.

The key to a wireframe’s usefulness is that it is a visual document.  Presumably it will be presented to one or more product stakeholders, and they will have the opportunity to review it and comment.  Having something visual to respond to is one of the easiest ways to generate ideas, and identify incomplete specifications.  A good assumption is that if a product’s requirements are incomplete, someone at the wireframe review will notice the gap by responding in the context of the visual presentation.  “Where is the Cancel button?  Oh…not in the requirements?  Well it’s obvious that on this screen the user will need to be able to cancel, so we have to add that as a requirement.”

In this way, a wireframe can be an ever evolving document, which begins by starting the requirements conversation.  Of course ultimately, just prior to feature development, the wireframe should have all of the necessary specifics so that the developers can use it as a guide (along with the relevant user stories).

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.

The 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.

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.

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.   

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.

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?

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: Design, Information Architecture, Usability

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

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.