‘No Data’ – Elegant first-time experiences

I am trying out Alice.com and came across the “Budgeting” section. I enjoy the way they give me a flavor of what to expect from the section even though I am too new to have any data available. It is nice that they don’t assume that I buy 5,000 bars of soap each year because I have placed one order in the last 2 days.

 

What I like about this solution:

1. I get to see the benefits of the feature
2. We get to know each other:
   1. It doesn’t start making assumptions with very limited data. The danger of such assumption: It makes it clear that you don’t know me. Personal financial management sites make this assumption a lot. They start making recommendations even though they only know one month of my spending habits. I’d rather a process where we get to know each other a bit.

 

Big Numbers Evidence: Old School 37 Signals

Figured i would post evidence i come across that supports the ideas that the web needs more big numbers (and they of course need to be relevant numbers). Found this while getting distracted from a search for Ruby on Rails info (completely unrelated):

What I found…

An old school side project by the folks at 37Signals that concluded a big number should be the most salient element on a PayPal confirmation screen. (“How we made it better: We made the dollar amount the most obvious element on the page”). I think that made the page a lot better, especially considering it will send that much of my money to someone on my next click.

Not sure if it was ever implemented, but it certainly makes sense.

Nifty Spin on a Portal Display at MSNBC.com

This launched over a year ago, but like a re-run that you’ve never seen “it’s new to me”. I first have to say that i am now a fan of the MSNBC home page and I respect the work that went into it. I visited it for the first time after following an RSS link and these are my impressions of a particular feature:

What caught my eye?

Big letters. I enjoy using typography that draws my eye to headers and key bits of info. When used to their potential (e.g., the big words and numbers actually mean something, and aren’t a giant marketing term) they can offer a better visual anchor than an image. The headline here caught my eye as I scrolled down the page and anchored the portlet very effectively. I enjoy the control I appear to have with the options at the top (how many stories, placement/priority of the portlet). Those simple controls were enough to make me futz with the portlet and already begin to engage with the page in a personalized way.

What I like:

1. The grid is askew. The fact that each section is given its own space within a a more complex grid (more than 4 equal columns) allows the sections to appear in a readable way suitable for the content.
2. The fonts are readable and the typography assists in the design. The large font anchors the section, the font for each story is well spaced for reading, the blue is clearly clickable and the grey gets out of the way.
3. The story of this section is laid out for me. I can get a pretty good sense of what I am going to find within the “Business” section of the site. This is especially helped by the “Topics” area of the portlet (you’re not a true media site if you don’t have a “topics” section yet).
4. There is a good futz-factor. The links are clear and the display is simple enough that I feel like I know what will happen when I click them (i.e., enough to not be afraid to futz with the “Move Box”).

What seems to be missing:

1. Disappointment when clicking a story link. The stories themselves don’t seem to have caught up with the industry standard in terms of cross linking, summary info and integration of multimedia integration. CNN’s mosaic style is the best take on that so far.
2. # of stories control on top is a bit confusing. The definition of ’stories’ is a bit random. I imagined it was referring to the list of stories on the left, but it appears to also refer to the “Multimedia & Features” section as well. This sort of blurs the meaning of the ‘featured’ story on the left with the other ‘featured’ stories on the right. Also – what is a portlet with “0″ stories? An interesting choice for basically closing the portlet.
3. The left is more effective than the right. The ill-defined usage of the feature area is bothersome. I have created and struggled with such sections myself. It looks great on the PSD file (the image balancing out the text and such…) and I so want to find a use for it. It works when it is featured videos and such but after a year or so, i imagine it is hard to enforce such a rule.

New to me… nice job.

Big numbers are nice

My UX rule of thumb #285: When your site has lots of numbers, make some of them really big (as in the font size)… And if it only has a few, also make them big.

The thought behind this is simple. Chances are if you’ve got a page that needs to display a bunch of digits, some are going to be more important than others. Tell users an immediate story with the big numbers to ease them into the overall tale on the screen.

Sporting events are great for generating lots of numbers. Unless you’re bill James, there are probably a few stats that are top of mind. That’s why I enjoy the fact that espn.com displays player stats and game scores with emphasis on the most salient bits.

Too many data driven sites display all of the numbers on the screen in the same font size. But simply poofing (yes poofing) up some key digits lend a focus to the display and allow users to get an immediate insight.

(typed on the iPhone version of wordpress. Hence no links.)

Top of the browser to ya… the shadowy toolbar trend

grab from top of compfight – a Flickr search tool

grab from New York Times – a Newspaper

Maybe it is part of the movement toward a browser-based OS or maybe it is just copycats, but the left side, top and bottom of the browser window are becoming a space for toolbars of all kinds. Now that screen resolutions are becoming larger and in the case of laptops, wider there is an opportunity to provide persistent controls for these site that are becoming more application-like everyday.

This is clearly the beginning of the trend since there is no defacto use for this area. Some use it for highlighting content – during the election Twitter used the top toolbar to provide a quick jumping point to the political searches and filters. New York Times uses it as the front door to its newest social networking feature. So it is more tool-like in that case. The Compfight example treats the toolbar as the primary navigation point for the site. With the introduction of Vista’s ribbon toolbar the control/tool-like pattern may prevail in the long term. For now there is no clear leading use.

Questions remain…
The left and bottom areas of the page are being utilized as well. Facebook introduced the persistent footer control panel. I am a fan of this since the idea got left on the cutting room floor for one of our projects. My being a fan however does not mean that It is a great pattern. I still have questions about the usability of such a pattern, especially given the discrepancy in its implementation. I can picture usability study scenarios where people glance right over the feature in search of more common and established controls.

But regardless of the questions and discrepancies, I enjoy that sites are exploring a better use of the space that is opening up for design.

Video as an afterthought – why bother?

Screen clipping taken: 11/20/2008, 11:59 AM

Trolling through the internets (actually found a promising pizza recipe on delish.com) and came across an MSN affiliate that integrates some of MSN’s video content. Video has a place on the internet. The only trouble I see here is that the ‘place’ is a sidebar half-way down the page. It just doesn’t feel right. Video takes a while (this one is 5 minutes apparently). But my surfing behavior is very jumpy.

Where I am going with this:
Video and the internet go together. But, video either needs to be the hero and the focus (like hulu.com or as part of a story mosaic like cnn.com) or it needs to allow me to multi-task and tune-in and out as my attention span allows (like Yahoo!s TechTicker – Scroll the page and it ’sticks’. You can comment on a post or read other stuff while the video rolls and stays with you. The page refresh is troublesome, but the idea is right.)

Video is becoming too ubiquitous to be plunked into sites like a banner ad. It’s compelling, but the anticipated behavior is in contrast with other web behavior. The standalone player is a popular solution (like Brightcove’s Player), but the working assumption seems to be that people are going to consume video in a focused manner (even if they switch from video to video). That, or stick it in the background or on another monitor. But my hunch is that video will be better served as part of a multi-tasking, in-browser experience (with the option to pop-out).

My Follow-up
Going to search for some data around usage and see if there are any studies about the matter. If both of my readers have heard of any, let me know.

Nifty blog post actions widget

Screen clipping taken: 11/20/2008, 10:44 AM

What caught my eye
I like the interactivity within this panel above the posts on this site that I came across (via an entirely unrelated search). It struck me that it was more interactive than what you usually see. Seems like a control panel with some heft.

The Downside
The fact that it is not that common works for it and against it. The actions for each of the icons are unpredictable. Some open a panel (a la yahoo search help) while some, like the stars icon, take you to another page (ouch). I would have expected to be able to rate the post or to have seen the ratings details. Instead it takes you to a search results page of other 5 star posts. Only after coming back to the page did I notice that the “+ -” signs were for my rating… Oh wait. That’s not the case. They are “Digg”-esque ratings.

So… there’s much to be desired functionally, but an interesting concept to make the tools so meaty.

Two great examples of User Experience Hubs

Experiences built on hubs are those that make the content the hero, choose several salient attributes of that content and build simple experiences around it all. Two great examples are Disney.com and sesamestreet.org.

This post is inspired by our recent experience with sesamestreet.com’s latest Beta site. I did not give it a heuristic analysis or anything official. I simply went there looking for a video of Elmo to entertain the little one for a moment.

I was pleased with the focus employed by the new beta design. The things we initially looked for were all there at the center of the experience. A character, and a particular song. The type of content (video) is allowed to shine as the hero of the experience. The search for content that we wished to watch was made simple by not having to sift through search results as the primary way of finding content.

Surprise content interest:
I was surprised by how compelling the banner ad at the bottom of the sesame street site was to our 16 month old daughter. Even though the video was moving and singing, she was compelled to point to the Snuffalupagus (sp) within the banner.

Interesting Experience Observation:
While this was surprising from a content standpoint, it was also clear that a mouse is a totally foreign concept to someone who has never used a computer of today. Her instinct was to point directly to the content she wanted. of course, who would think to move a mouse and click a random button. why not point.

I can’t help but think the site was in some ways inspired by the very focused redesign of Disney.com. They did a great job of recognizing that their amazing characters should be one of the hubs for the experience. This is another site that allows the content to be the hero of the page. The Flash-only implementation leaves much to be desired, but the hubs of the experience are clear and smart. I am glad the sesame site did not lock all of the content into Flash.

hub-bub: experience hubs can make or break a project

Not all pages are created equal. At least they shouldn’t be. An important driver for digital products (web sites, et al) is a clear perspective on what the hubs of the experience are. The hubs should be some of the most interesting screens and they should serve a purpose which is quite different than other supporting pages.

A hub page can serve as a point at which a user can take a step back and survey the scene before deciding the next move. It offers a chance to connect even the most complex array of content and information in a logical context.

Deciding on the hubs requires thinking of the most salient bits for which to provide a 360 view. What are the pieces of your experience that you want people to be able to examine, explore and kick the tires on?

Some examples:

• New York Times: an obvious hub is an article. Introducing newer hub concepts like “Topics” was key to the experience. It provides a destination that drew a clear connection between articles.
• cnn.com: cnn took the story itself and built a mosaic around the content. Each story is a single point of access to many different ways to get the information.
• any vehicle site: the car is an obvious hub. Another important hub page is the type of vehicle. Some brands are seeing this as an opportunity to provide an experience at this hub rather than simply passing users through to the vehicles. there are also opportunities to build hubs around topics, or communities of owners.
• Financial sites: a company or an industry are obvious hubs. Other hubs could revolve around a certain type of activity or analysis method. Sites like cakefinancial provide hubs based on people within a trusted network that you can build over time.
• any product site: of course there is the standard product:solution relationship. I’m sure there are some other examples of harder working hubs.

There seem to be a few different types of hubs. Some which are concrete in nature – like a document, product, vehicle, etc. Some which are more conceptual – topics, popularity, solutions, etc.

Jared Spool took a look at the gallery pages as the hardest working pages on your site. Beyond just a product listing, creating smart hubs requires thinking about the different types of ‘galleries’ you wish to create.