Reviewing WolframAlpha’s Design

Being in a good mood after my latest review, I stumbled upon the live launch of Wolfram Alpha on JustinTV which is still going on on my other monitor. There was a brief interview with the designer, and I decided to take a look, and make review of what the design is like on this site. If you don’t know what Wolfram Alpha is, you’ve been missing out. Watch their introduction to what this engine actually can do in they’re own introduction to WolframAlpha.

Now this is totally different from the last two reviews. This page is ultimately all about showing mathematical calculations, not showing off design. For anyone who is interested in design this is a huge challenge, everyone hates answers that have poor presentation value, too much gets messy, and too little leaves you with the standard Microsoft bullet point presentation which is just as dull as it is grose. If you present information in a nice way, it can be great. So lets take a look.

Sorry Dave, it's an overload..

I’d like to start with this. This didn’t happen right away, and this is during launch – the site is not supposed to be live yet, in fact the real site wasn’t. This screen came up in the sub-domain of “/input/” where we could sneek-test the engine during launch, and it happened only in one of many attempts. So having the feeling I wasn’t going to see this again (hopefully I won’t) I took a screenshot, and decided to write this review.

That’s a GREAT “we’re sorry” icon. It grays out the page, so you know you’re not really getting an answer from the “white page”. It includes the wolfram star, (that I’ll talk about later) the inside of the star is formed like HAL’s eye from Kubrick’s awesome filmatic interpretation of 2oo1 – A space odyssey. Now if you don’t know the movie, you could be wondering who “Dave” is. but for us who do know (the rest of the earth) .. we’re ecstatic about it. I’m not sorry I saw that screen, I’m happy! It also states (to the unconscious brain) that what you’re actually interacting with is a supercomputer, not a “normal website”, which happens to be true. Also there are some graphs under the grayout that tells you that this is a mathematical engine. Following that “no-content error”, lets take a look at some “real” results.

WolframAlpha Header

This is the main search area. The rest of the page is fairly clean and white, so this is where they want your eyes to go to. (Remind anyone of any other search engine you use a lot?) You intuitively know how this works. Two rectangles outside each other, each with approximately 10-12px rounded corners, the outside thinner, slightly transparent and darker(more red) than the other. This is a human eye-catcher. We love spiraling stuff, stuff outside other stuff. The outer line fade out where the logo is. The logo includes the Wolfram star (As far as I know, Stephen Wolfram has been using this on Matematica and other projects before Wolfram Alpha, please correct me if I’m wrong) But the star has been simplified, it looks slightly vectorized, and it has added layers of shadows and highlights. Makes it want to pop out of the site. (just like we like it!) The title uses the two words (the ones in the url), no space between them (like in the url) but separating them by different colors and using caps for each first letter. Yes! This is smart. To any human eye this is two words, which makes it easy to remember the address to this site. The slogan says “computational knowledge engine”. People will still refer to it as a “search engine” for a while, until they understand.. that’s not “really” what it is.

WolframAlpha seach button.

Now this is brilliance. As you can remember from my previous posts, it’s all about the lines you don’t see, but in this closeup, you can see the three different colors that make up the line around where you type your query. But more important to that is the “search” button itself. You don’t want a search button saying “search” or “I’m feeling lucky” with an engine like this. This isn’t about searches or lucky, it’s about empirical computational facts. and ofcourse the “next” button to your query is the symbol that means “equals”.  A lot of people won’t see this, but it’s absolutely brilliant. The person who decided this, simply understood the meaning of symbols on a website, and how humanity is using symbols before they are using words or other concepts. And we all prefer symbols on websites over words, at least when it comes to clicking.. (Most of us press enter, but we always look to see what “button” enter will press from the text field we’ve been typing into)

Searching for the Ninja within WolframAlpha

Now take a look at this search. Whats important to the developer is plainly providing information. So there’s the query (which is the colored part we discussed earlier) Now theres two more frames. The first has a light gray, same curve, line-rectangle around it. This frame only shows the assumptions about your query, if you’ve done anything wrong or the website don’t understand what you mean this frame will tell you what it assumes, or what it didn’t understand. This frame is less important than the one below which contains the results. The frame below has more of a bevel/emboss effect, making it stand out from the page. This enhances it from the block above. See how smart that designer girl is? (She did say in the interview, that Stephen Wolfram was fairly strict on how he wanted the page to look like. Seems like their collaboration worked out.)

Furthering the thought that the information is the selling point on this site, the biggest words are the actual information. The headers are in a smaller size as well as in a sans-serif font. The “add” words to make the information more readable from a human perspective (like the words “English Word“) has a light gray color, which also makes it stand out from the computed information.  The linked text is also small, and it’s orange. Three colors: gray, black and orange, and you intuitively understand what each color means. This is major kudos, simple and elegant, exactly as it should be.

Now I didn’t do any presentation of graphs (they are colored, comparisons are different colors, all about easy readabilty) but it continues the same pattern. Easily understood information, color separated, with the same high class subtle design.  I can’t find a single error on this page, and I’m the girl who always finds the errors, which means..  This is a very very good website. Everyone interested in design should take a look at WolframAlpha and see the best way to present information.

Happy designing until next time..

J.