UXD - User eXperience Design

Agnostic lightboxing

The memo may not have gone out yet, but for a year or so now the scourge of popup windows has been erased from the user experience. I know that it has been blocked by browsers for quite a while but UXD designers once and a while need this modal stalwart, the dialog box to get their business done without distractions. Thanks to great coders out there, we have a replacement we call "lightbox" which you experience probably daily as the darkening out of the screen and the overlay of that modal box. Its very quick to implement, easy to code, and with some variations, can hold music, slideshows and other nifty content types. I use it constantly, but it has one drawback, the reliance on either prototype or jquery as a backbone to do it's magic.

While I put myself kind of in the prototype + scriptaculous crowd, the battle between these libraries makes it hard since you can only include one of them. Thus someone writes some "perfect for your audience" lightbox effect, but you need to change to jquery to use it. This happened on my own site where some lightboxes needed to play mp3's and others needed to show image slideshows, I had to make compromises and change from page to page, which was extra work, and kind of weird.

No more, thanks to Mr. Jackson, we have a new lightbox (that uses the correct attribute 'rel') that can take advantage or either library, or even mootools or YUI, neato! Look forward to delving into it, check out the download at http://mjijackson.com/shadowbox/ and cheers for choice!

New Years Resolution

I had a recent experience which helped emphasize how important it is to see things within the context of the user's environment. In this instance, I'm speaking of buying a new TV. Our "old" TV had served us well, was a high-def projection model, but with prices falling and screens getting brighter and flatter, I was able to convince the wife it was a fairly cheap midlife crisis purchase after all. But which to buy? Brand and reputation aside, the differentiating factor between sets were size, display type and resolution. If you haven't been pouring over spec sheets lately, the main idea is that there are two display types - Plasma and LCD and two main resolutions 720p and 1080p. For size, I wanted bigger or same as my other model so I wanted 47", 50" or 52". In my usually thorough fashion, I poured over different websites and user opinions and ended up buying the cheapest one that fit the bill... a 47 inch 1080p LCD.

The reality of setting this thing up turned out to be a fairly educational experience, all my time staring at rows of displays at Best Buy or Costco or reading Consumer Reports gave me a vague idea what were some good qualities to look for. But much like talking about what a user wants it didn't prepare me for what the real user experience difference there was between the resolutions and sizes. I really ended up finding out what all the jargon meant only when presented with the device in my own environment. It reminded me of a project where all the developers had 1680x1050 resolution monitors and the users had 1020x800 laptops. It was too tough to get the developers to realize that the way they displayed the app was removing some of the problems like cropping of text, the addition of scrolling to content, and other display problems they just weren't seeing because of their screen size. The solution I presented was to open the application in the specified fixed resolution (1000x780 or so). My point being that if they shared the pain with the users, we could build a better app, but high resolution is hard to give up, and they secretly went back to opening it full screen.

Setting up the TV I was unprepared for how vibrant the colors, and how sharp the picture, especially the high definition picture broadcast here in Chicago. There are definite advantages to higher resolution that 1080p provides (near 2 million pixels), but I noticed that as I moved backward, the screen became 'smaller' and the higher pixel count less noticeable. In all the reviews I had read, they focused mostly on comparing black levels and picture contrast, but never talked about how distance really effects the way you perceive detail, this article at cartonbale.com describes it well.
As I sat further back I became more and more convinced that a bigger TV was necessary, I just wasn't seeing the benefits, so I traded it in for a lower resolution 720p model at 50" for the same price.

The new model was certainly the right size, but now all I could see was the lack of fine detail, of course as I moved back, it looked fine, even better than before since the TV was noticeably larger. But I couldn't get over the feeling of something missing. A decent relationship with the pythagorean theorem helped (TV's are measured diagonally for some reason) determine mathematically what I was perceiving but couldn't find on spec sheets or by comparing screens next to each other at Best Buy. For purposes of this article I found this calculator will help you out with the math.

The iphone has a great screen - 160 pixels per inch and distance between dots is .15 mm which means it really goes right up to inches from your eye.

Display monitors like the 22 inch that we use on our computer - 90 pixels per inch - distance between dots .28mm - we can determine that closeup viewing within 1 foot looks good.

The first set - 1080p 47" set was 46 pixels per inchand a whopping .54mm between dots, still, closeup viewing even within 5 feet doesn't reveal the gaps.

The 720p 50 inch plasma set was 29 pixels per inch with a chasm of .86 mm between the dots, still, I don't know if it's the dots or the gaps or what, but with this display showing a mere 1 million pixels, it certainly seemed less detailed.

Or to put it more succinctly (courtesy of some forum post found at avsforum.com:

The human eye can resolve 300 dots per inch at 1 foot. The value is linearly scaleable. In other word 30 dots per inch at 10 feet. A 50 inch diagonal tv has a Horizontal width of 50 x .87= 43.5 inches. 1080 displays have 1920 horizontal pixels. 1920/43.5= 44.37 pixels per inch a 720 display would have 1280 /43.5=29.42 pixels per inch. A person with 20:20 vision can only resolve 30 dots per inch at 10 feet. Thus at 10 feet both 720 and 1080 displays should look identical . However as we get closer to the screen the 1080 display would start to look sharper. At about 8 feet the 1080 would really start to shine.

Removing all the picky bits about LCD vs plasma, setup, color temperatures and such, the lesson learned was even with the science involved, the main way to pick a TV is where you are going to put it and watch it. While a little part of me wants to upgrade to the 1080p set at 50inches, the extra money may not be that well spent considering my distance from the screen. So next time you're at the showroom, ask them what their return policy is, trying it at home is the only way to find out.

Stock ticker entry fields and usability

Interface design is about balance and accommodation.  One of the most important balancing acts an interface must play is in accommodating the diverging expectations of the novice and the expert user.  The expert knows what he wants to do, and he expects the interface to let him do it quickly.  Just about all the knowledge pertaining to his task is in his head, and he would only be slowed down by guides tutorials, aids or other such helpers.  However the novice is looking for exactly what the expert must ignore.  These activities are new and unfamiliar to him, and he needs a helping hand.  Most of the information he needs to accomplish a particular task is not in his head yet, and the interface must accommodate that.

Yahoo Finance recently added a new feature that caters to both the expert and the novice user.  It's a stock ticker entry field, and in this case, I'll define the expert as the one that knows the company's stock ticker symbol, whereas the novice only knows the company name.  Until recently the field catered to only expert users.  Novices beware.  Although it was only a harmless input box, it separated the men from the boys so to speak, by acting like a bouncer beyond who's doors only those in-the-know could venture.  If you didn't know the stock ticker symbol of a particular company and you made the mistake of typing the company's name into the box, you were shoved back and rudely warned that that symbol doesn't exist-- as if too say, you don't belong here with the big boys; learn your ticker symbols and then come back.   

All that changed, and the hegemony of the expert stock ticker symbol know it all is over.  The field now accepts both symbols and company names.  Better yet, as you type, the matching results--both ticker symbols and company names--get displayed below the text field, with the company name on the right column and it's stock symbol on the left.  So for instance, if you type 'ge', among the results will be General Electric, because its stock ticker is GE.  But you'll also see General Motors, and Genetech, because their company names match your input.  You can select any one of these using the cursor, but you can also just hit enter or click the submit button and the company who's ticker matches your input will result.   

So now you can easily find financial information of any--publicly traded--company you want even if you don't know its stock ticker symbol.  And if you do, well just keep typing away, there ain't nothing gonna slow you down.

The Curse of Knowledge

You can never know too much about something, right?  Wrong, at least according to a December 30th article in the New York Times.  As we become experts in a particular domain, our ability to innovate diminishes.
"Andrew S. Grove, the co-founder of Intel, put it well in 2005 when he told an interviewer from Fortune, “When everybody knows that something is so, it means that nobody knows nothin’.” In other words, it becomes nearly impossible to look beyond what you know and think outside the box you’ve built around yourself."

Reading the article, I couldn't help but think back to my own experiences with this same sort of issue.  I blogged recently about two related ideas: how interface designers are sometimes guilty of thinking as designers--when they should be thinking as users, and about the mixed bag that is competitive research, which can limit the designers creative thinking by boxing them into predefined solutions.   

Now I see that it's part of a larger problem of expertise and creativity.  The more expertise one exhibits in a particular field, the harder it is to think creatively--to so called think 'outside the box', and the harder it is to imagine not knowing what you do.  The problem affects whole companies, as a certain way of thinking becomes entrenched, and it gets harder for it to adapt to a changing landscape.  The article cites the example of Eveready, the flashlight maker, who's powers-that-be couldn't imagine that their product could be effectively marketed to anyone other than men shopping at hardware stores.

According to Cynthia Barton Rabe, author of “Innovation Killer: How What We Know Limits What We Can Imagine — and What Smart Companies Are Doing About It,” the solution for Eveready, as for any organization bogged down in its own expertise, is an infusion of outside thinking.  Bringing the so called novices--the non expert users--into the discussion at the early stages of design, weather it be product or strategy design, opens the door for new ways of thinking that experts have long been insulated from.


    
     

Powered by ScribeFire.

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.   

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.