Starmap to Great Design

A well-designed starmap is hard to find.

My older daughter has become fascinated with space lately. She's particularly fond of the planets in our solar system (Neptune, is at the top of her list because it's blue) and is soaking up information at the speed of light.

Recently, I was told that Mars would make its closest approach of the year Wednesday night (January 27), and would also be at its brightest. Luckily, my girl had dance class that evening and I was able to pick her up and we walked to a pier on the Hudson to look for Mars.

We were pretty sure we had found Mars in the sky above the Empire State Building, as we shivered in the 37° river wind. But we wanted to check that we had in fact seen the correct bright pink point of light. I searched the web when we got home and found a site called Neave Planetarium. It is the best stargazing map I've seen yet.

The Goods
The Neave Planetarium is based on Flash, which allows a great degree of interactivity in the interface. Neave doesn't overdo it, though. The interactive components of the interface and their design are just about right.

When I wanted to find a starmap, I hoped I would find one that makes it easy to see the celestial bodies without crowding the sky with astronomically wonkish stuff. I had looked before for a starmap and found only outdated static pages with old crappy sky graphics, and kludgy Java applets that plotted sky objects with label-less cryptic symbols.

I had hoped the starmap would have easy-to-use controls where I didn't have to know my latitude and longitude. And I wanted to easily find the starmaps for tonight, as well as August when we are on vacation, and change my map location easily to reflect that different night sky.

Well, Neave delivers on all of these needs.

Neave Planetarium has a beautiful and unobtrusive UI that feels like a night sky, feels "techy," and feels like it's hooked up to some immense and powerful celestial library. In reality, it is only doing just a few things requiring not a ton of data, but it does them extremely well.

The first thing a user should do on entering the Neave Planetariun is to check the fullscreen option on the left. This feature alone beats every other starmap site already. While in the control panel at left, you might as well ensure you are looking at the correct timeframe, either today, tonight, or 6 months from now—it is easy to set the time of your gaze.

Next, at the top right a user can set their approximate location by clicking the "location" menu and clicking their area on the map. If you have a very exact location requirement down to the minutes and seconds of lat/lon, you are too serious a stargazer to use this totally cool site. Go somewhere else, dork.

Now, a user needs to know North, South, East, and West directions where they are in order to make this useful. Otherwise, you won't find anything in your real sky.

To move around the Neave sky takes a little getting-used-to, and is based on clicks and mouse motion. Test and get used to the movement by trying it out a little. The way it works is one click in the sky releases it to move, and it will move in the direction the user has moved the mouse cursor. Another click stops the sky where it is. Once you get used to it, you'll be fine. Just remember that to move the sky takes two clicks, a start-moving click and a stop-moving click.

To learn about the objects in the sky, mouse over them. A mouseover of a star tells a user the star's name, what constellation it's in, how bright it is, and how far away. In brightness, smaller numbers are brighter (even negative numbers).

To learn more about planets, mouseover them and learn the planet's name, brightness, and distance. For all celestial bodies in these starmaps, their perceived color is represented as well. Mars is bright pink, Venus bright white, and stars of various colors and brightnesses.

Something I found to be a lot of fun is using the date & time panel to make the sky move. Click and hold down on the up or down arrows for the time minute control, and watch the sky move through the night into dawn. Or click the up or down arrow on the day number control to watch the sky change through the year.

The Good and the Improvable
There's not a lot more to this web app, unless I'm missing some other huge piece of functionality. What really attracts me to this app is how well it works, and part of the reason for my excitement is how well-designed the user interface is.

Simple, smart, gets out of my way. These qualities define a good experience for me with an interface. The only two notes I would have about the interface are that the movement of the sky takes a little bit of effort to learn, and might have included some more intuitive controls as an alternative to the mouse gesture control. The other feature I'd like to see is a bit more information about the celestial bodies.

While Neave supplies information when a sky object is moused-over, I keep wanting there to be more information available with a click. This is not the behavior of the app.

Other than those minor gripes, I think this is a really fantastic app, and a very well designed interface. Go try it out!

Read more...

An Example of Advertising Content Suffocation

{obvious}Dictionary.com and Thesaurus.com are just one example of the over-advertification which has reached epidemic proportions on the web now. And I don't expect it to get better anytime soon.{/obvious}

The greatest thing about the internet is that it offers us incredible ease-of-access to a ridiculous amount of information. While that information's not always accurate, I believe in many cases it is gaining a high level of truthiness™, but that's another discussion.

Some of the sites I frequent for facts and reference are Wikipedia, Dictionary.com, Thesaurus.com, and UrbanDictionary.com (explicit!). It is the Dictionary.com and Thesaurus.com which I want to discuss in this article.

I find their content outstanding and informative. I am an early adopter, I've been using Dictionary.com and Thesaurus.com for many years. They are usually reliable for finding a definition or good synonym/antonym for a word. I use them to educate myself, as a reference, and as a creative guide in the case of Thesaurus.com. What I don't use them for is to browse, shop, or find businesses offering services that match up to my search query.

While many websites are scrambling to stay in business, pay back angel investors, and prove their online business is profitable,  we users are having a diminishing user experience with content and websites because of the intense and growing presence of advertising within the pages we visit.

Let's look at my example, Thesaurus.com. Here is the web page for a thesaurus result in the site. If one looks quickly, they can see where the actual desired content probably resides on the page. Somewhere in the middle, right? As a first time user, you will probably also expect the navigation somewhere across the top or down the left side.

Below is a screenshot where I've highlighted just the content portion of the Thesaurus.com page. This is the stuff I wanted to find, the reason i came to the site and typed in my search query. It accounts for about 10-15% of the entire page.

Now take a look at the screenshot where I've highlighted the ads. About 70% of the web page is occupied by advertising. 15% content, 70% advertising. This ratio, almost 5:1 for ads to content, is in my opinion, out of whack.

One can argue that I've cherry picked this page with a result that only has a small amount of content. But also consider that for this page to even get close to a 1:1 relationship of ads to content, we need 4.7x more content on the page to balance it out!

And then consider, that's only to achieve a 1:1 ratio. I don't know about you, but I visit websites to consume content, not ads. And as a web visitor, unless the content offered by an over-advertificated site is exclusive, unique and unmatched, I will eventually go elsewhere for my content where I feel that my presence as a user and my experience interacting with the interface are respected by the website's creators.

So, that hasn't happened yet for me and Thesaurus.com, but it may. My recognition of how ridiculous web advertising has become happened on Thesaurus.com. So time will tell if this trend continues here or elsewhere, or if clean and useable interface design is able to affect a better solution.

Read more...

Law of Diminishing Returns and Other Observations in Interface Design

Oh, to design an interface and be a business at the same time. Often these goals tug in opposition, but it doesn't have to be that way. A little common sense sprinkled along the way helps.

Process
I try to keep interfaces minimal (not always successfully). I have had the experience of creating successful minimal(ish) interfaces and unsuccessful ones. I have had the experience of creating successful complex interfaces and unsuccessful ones.

I try to keep control surfaces and visual distractions to an almost extreme minimum in the concept stage, since I know that more will be added as the design and production process progresses. I also tend to like threes.

I like to start with a website interface that contains minimal branding and three buttons. If that would be the production interface, to which three places on the site do we most want to drive traffic? This gives me and the client a starting point where we can identify the most important user behaviors we want to build and reinforce.

If it's most important to drive a visitor to become a member of the website, then give them a little taste of the content and provide a very obvious facility to sign up. All roads should lead to the sign up. If we really want users to browse a music catalog, provide a starting point and some suggestions up front, and draw them in. Don't cloud the purpose of the site with lots of other "added value" that the business has tacked on. If the goal is to make visitors into users, draw them in with your most desirable content. Everything else is secondary.

That New Car Smell

You'll see this process play out over and over. A new website or service launches and the interface is new and shiny and uncluttered. You don't feel attacked when you arrive, you don't feel like just another wallet in the WalMart. You feel like you've arrived at an exclusive destination brimming with possibility. Hopefully the interface also guides you to the content or product or service offered on the site and thus changes you from a visitor to a member.

Then, months pass and the community builds. Articles are written about this new product or service, and the little startup has to kick in phase two of its plan whereby they start "adding value" for users by pitching them more tacked-on sticky products and services. These elements need a home on the site in the interface, and with time the original destination spot turns into the same cruddy congested heap of confusion as every other middle-aged site out there.

Luckily your early adopters have been transformed into power users and are able to adapt to the changing atmosphere since they have already found a comfort level with the value proposition of the site. You risk frustrating the growing community, however, as you try to improve poor elements and add more options to the site's available activities. Facebook has experienced this effect publicly several times in its short history.

The community can rebel against things they have become accustomed to if the change is not as good or better than the previous version at the same or less cost. Cost, in this case, can refer to time, money, or other unit of value.

Rules, or at Least, Observations

Let's take a look at a few observations from my time as a designer. Some of what I've learned can be summed up into categories:

1. Training - The first, second, third, or more times that someone uses an interface is a learning experience for them. They are having to adjust their initial expectations to the reality of the way the interface works. So be considerate to your users. The more the interface works the way they initially expect it to, the more positive their initial experience will feel.
   
   
2. Busyness - More options (links, pictures, icons, buttons, feeds) is more information for a user to have to sort through visually in order to make sense of the interface and interact with it. I have discussed one aspect of this concept before in a post about content suffocation through online advertising.
   
   
3. Impatience - People don't waste time on interfaces or content they don't "get." This means an interface doesn't have a lot of time with a new or returning visitor to supply them the content or navigational path to the content they are interested in.
   
   
4. Rewards - People don't continue to use or come back to an interface if they don't feel they've been appropriately rewarded for the effort they've put into it. A fantastic, clean, and easy to use interface around lame content will drive users away. And stellar content within a poor interface makes a visitor less likely to come back. Though in my observations, a visitor who feels highly rewarded by the content, even in the face of a poorly designed interface, will be more likely to just bear with it and return. Simple Chart Time!™
   
   In the chart below, blue represents the potential that a visitor will return to a website, or any interface. Darker blue is better.
   
   
   
   This chart illustrates the observation that even a poor interface can mask its deficiencies with stellar content. Users are more forgiving of a poor interface than they are of poor content. This, I believe, is because users will adapt to poor design if the reward is great content.
   
   
   

   Case Study
   A related case study is the Urban Baby (UB) message boards. For the longest time, the boards were very poorly designed, requiring users to laboriously click on every post to view it rather than skimming the entire thread. This defective design led users to place almost all their posts in the subject header in order to make the boards just bearable enough to use. The draw of the community, however, was that it was full of anonymous, acerbic, bitchy, funny, scared, and helpful women who all had children. And they interacted on those boards with reckless abandon (often obsessively so) and forgave it its technical and interface deficiencies. The draw of the content was enough to build a very valuable and loyal community.
   
   Flash forward to the UB community being sold to iVillage or something, and the software running the message boards was upgraded with some good enhancements, and some boneheaded ones. Separately, a husband and wife couple quickly built a clone of the original poor UB interface and invited everyone at the new UB to come and bring their discussions to the UB clone, YouBe Mom (homonym pun intended).
   
   In an odd perversion of logic, the vocal, fun, angry, helpful, nasty, hilarious contributors to the UB community migrated to the YouBe boards, where they felt most comfortable. Even in the presence of a better interface, the community chose to go with the crappier interface and now YouBe is the place to go for answers or berating. Which brings us to the next observation...
   

   
   
   
   
5. Comfort - The usable attractiveness of an interface is directly related to the perceived and experienced comfort with using it. Put another way, no matter how pretty an interface is, it will be perceived as a failure if it doesn't behave the way it seems that it should.
   
   People put a lot of value in their perceptions, and are very hard on inanimate objects like websites and electronics if their perceptions are not appropriately changed for the better or sufficiently supported.
   
6. Work - A click and a page load are perceived as kinds of "work" to a user, though a page load is perceived as more work than just a click.
   
   Consider the following scenario, where a user who is visiting a site and skimming a large content pool on the homepage clicks a photo to see the enlarged version. In one scenario, the photo pops up enlarged and on top of all the other content. Everything else on the page darkens a bit to indicate that the interface's control surfaces are temporarily unavailable, and the photo is the focal point of the page. The user has one option to close out the photo and that is to click the only thing that looks like a control, the X box at the top right of the photo.
   
   The user does this action with one click and is quickly presented again with the content they had been browsing. We can call this kind of work the "cost" of the click. In this case the cost of the click on the photo was low because:
   
   
   
   1. There was very little additional learning necessary to absorb the desired content on the page;
   2. Very little time was spent waiting for the desired content to appear;
   3. Very little visual distraction for the user to visually sort through in order to find the content they had expected to get.
   In another scenario, the user clicks a photo, and is taken to a new page, waits 10 seconds while all the extraneous ads and content feeds load, and is assailed by a new set of visual distractions screaming to be clicked. The user has now been presented with many tens or even hundreds of new options to digest visually, adding "stress" to the browsing experience. Now the user is unsure if they should now click the "home" button or the "back" button in the interface, or the "back" button on the browser which is sometimes flakey, with its ominous "are you sure you want to resend this form?" messages. Or maybe they are easily distracted by something else on the page, which is a potential crap shoot... is this an ad or another piece of content on the site?
   
   Worse than this scenario is the one where a click on the original picture takes the user to a different site entirely, where the photo may or may not even be present, and may or may not be larger to their satisfaction. Either of these last two situations is confusing and frustrating to a fast-moving web surfer. These situations make browsing feel like work, rather than enjoyable, leisurely consumption. These situations have a higher "cost" to the user because they spend more time learning the interface, more time waiting, and are more visually distracted.
   
   So, consider how much work you are making your user do while interacting with your content. Is a click necessary? Will a rollover do? Is it obvious that the content will do something if one rolls over it? Will the rollover be confusing or frustrating if it starts to get in the way of just moving around the page? Will the click be worth it? Will the user feel like the value of the click was high while the cost was low?
   
   

To conclude for now, I just ask that interface designers (pro or not) use some common sense when developing new interfaces. Think about it as if you had never encountered this interface before and don't have time to get involved. Will the interface attract you in? Will the interface reward you with a comfortable experience and good content?

Perhaps I will cover more observations for interface design in a future post.

Read more...

Content Suffocation Through Online Advertising

The thing about the web is, it's full of advertising. Tons and tons of the stuff. But do you really look at any of it?

I don't have the data to back up my assertions here, so I'm going to wildly assert away. That's what senators do and it works fo them, right?

While I've seen breathless accounts off .5 - 1% average clickthrough rates on web ads, I don't believe this to be accurate, or at least, not accurate anymore. If anyone has a real and current stat, devoid of marketing spin or cherry-picking, please let me know, I am curious... Now, back to the discussion.

Now, Let's Make up Some Stats
I would guess that you don't even notice something like 98% of all ads on web pages you visit. Maybe you glance over them to make sure there's not actual content which you are interested in, but I doubt your eyes linger long enough to even absorb what's being advertised, who the advertiser is, or why that little alien is dancing.

Every once in a while, you may absorb a bit of the message -- for me it's usually a beautiful car or striking photo or illustration that does it -- and then you are on your merry way. I would guess that of the times you stop to even look at an ad for more than a split second, you actually click the ad about 5-10% of the time. That means, in my completely fabricated-facts world, that you are actually clicking .001 - .002% of ads you are exposed to online. One- to two-thousandths of a percent.

Now, figure the average web page contains 5-20 ads each. At 5 ads per page, you would have to view 200 web pages to click one of the ads. At 20 ads per page, the statistic would be about 50 pages. However, as an interface designer, I believe that the individual value of each of those 20 ads on a page is reduced by the volume of ads present in total.

In other words, there's so much stuffed into the page because of all the ads, that you are less likely to notice or click any one of them! I believe this drives down your "click potential" on that page.

And here we arrive at a rule I try to keep in mind when designing any interface:

There is a diminishing return for the user in relation to the amount of options they are presented within a given interface.

So why are there so many ads on the web?!?!?!? Why do some sites insist on displaying more ads than content?

Where Are You Going with This?
I think it comes back to the same issue I witness as a designer working with a client: the "bigger, bolder" paradox. I think that design decisions made by business people, or at least people thinking in business terms only, are what drive the over-advertification of websites. The left-brained thinking that more ads on the page = more opportunity to collect visitor clicks is driving what amounts to a negative effect on the value of display ads. Simple Chart Time!™

As you can see in the simple chart above, I believe that the more ads which are represented on a page, the less valuable they become. There is a line somewhere in there —and perhaps it's different for each site and type of ad/editorial content— where the addition of more ads leads to a decrease in the overall appeal of any one of them. This also relates to another design observation I try to keep in mind when working on any project, and that is about the law of diminishing returns as it relates to the amount of information an interface presents to a user. More on that here.

We will take a look at a real-life example of content suffocation by online advertising in a future post.

Read more...