Hello! As the new guy here at ZURB I've taken my sweet time getting into the blog, but that's over with now. Here we go.
I'm fascinated by video games, always have been. It began as a fascination with games like the original Wizardry through the Lucasarts adventure games (Full Throttle, anyone?) past the first simulations (Flight Sim to X-Wing) and all the way down this meandering, ever complicating path to the photo-realistic technical marvels we can play today. What started as 'wow, a computer can really DO that?' has now morphed into 'wow, people can actually MAKE this?' The complexity and genius of a modern video game is, I worry, completely lost on most of the people playing them - but not me.
From a design perspective (this is a blog from designers, after all) what has always caught me is that video games represent an almost completely blank canvas: there are no rules to follow, no conventions required, no preconceived notions of what is good or bad. You're not even really restricted by the input - a modern computer/console can support almost any sort of input the human body can produce (and quite a few it can't). This is why in the field of game design you can find such a stunning variety of design decisions governing input, interaction, interface, data display, and story telling.
The web, unlike the blank canvas of a game, is still a restrictive canvas, riddled with preconceived ideas and paradigms as well as serious technical hurdles. So what can we learn from games that we can really apply to our own design?
We can learn about immersion.
There are more lessons to be sure, and I'll come to them in some other posts - right now though, we'll talk about immersion. Immersion is the idea that a game presents an experience so fluid, so natural, so engrossing that you forget you're playing a game and instead feel like you're living something. Take EVE Online for a (bad) example.
A Beautiful Spreadsheet
There's a gorgeous space sim in there somewhere.
EVE Online is an MMO, designed for several thousand people to play together at once. You pilot a spaceship around the universe, choosing your own path and making your own decisions. Maybe I want to be a trader, running a flotilla of cargo ships from system to system, amassing riches and prestige. Maybe I want to be a ruthless pirate, gunning down unsuspecting travelers and taking their goods as my own. The possibilities, I must grant, are almost endless. On paper this sounds perfect to me - a tool to help me imagine whatever I want. Why then have I picked it up and almost immediately dropped it? Twice?
Because it is not immersive. EVE is, as one commentator eloquently put it, is "the most beautiful spreadsheet I've ever seen." The interface is so obtuse, so complex and the actions so unintuitive that I don't feel like I'm living some other make-believe life - I feel like I'm working a system, like I'm managing some horribly complex window into something very pretty, but very much divorced from who I am and what I'm doing.
A Terrifying Story
If that thing comes after me, I'm turning off the TV.
Now let's look at something very immersive, in this case 2K's masterpiece BioShock. BioShock is, on the surface, a first-person shooter, kin to probably 10,000 other games dating all the way back to Doom and Quake. What turned BioShock from a very pretty but very generic FPS into a gripping, sometimes terrifying adventure was immersion. The interface of BioShock is very natural; there is only the barest essentials of screen clutter to give you some sort of status and they can (almost) be forgiven that. When I play BioShock I don't feel like I'm playing a game, where I need to point at something and push a button to shoot it - I feel like I am that character, really moving through this incredible, decaying underwater metropolis. When events unfold around me I don't see it from some sort of floating, invisible camera - I see it as me, through my eyes, even if my eyes at the time are blurry, or bloodshot, or in total darkness. When I need to 'recharge' I don't just see some status bar increase - I see myself injecting power right into my arm, right on the screen.
BioShock breaks this from time to time - there is still metadata on screen for things like health and ammo which I think they could have eliminated as well, and the hacking minigame completely breaks the mold but these things are small and mostly forgivable. I'll give them credit for everything they did right, and they did do many things right. For the first few hours I played BioShock I could only do it in small doses - I would get too tense and stressed out to keep playing.
So What Can We Take Away?
Most design is not game design - you can get away with a lot of risky choices in games that you can't in print, or online. Or can you? That's the theme of these posts (I'm getting ahead of myself, but this just paints me into a corner and forces me to write more): let's see what we can get away with, areas we can explore further and more openly than maybe we thought.
Immersion is critical, especially as media becomes more complex. When I played Wizardry with my Dad on our old Mac SE I was immersed - but there's no way that would hold up today. The media-centric culture of today needs more; more depth, more story...more immersion. We as designers need to provide that in any media. Maybe that means doing a better job at really telling a story - even if that story is as simple as "here's you creating a photo album online." Maybe that means exploring the full range of input, and display - clicking a button or a link isn't always the best way to say you've done something.
Maybe the biggest thing is that to immerse we need to just get out of the way - don't let someone think about the interface they're using to do something and just think about doing something. The tools are already here for almost any media we can care to name - we just need to better explore how to use them.
A few days ago, we had the chance to dive into what seems like an age-old topic: where is the fold, and does it really matter? Historically, ad networks have been most concerned with the idea of a fold, but they haven't actually drawn a line in the sand as to how far down the page this imaginary line exists. So naturally, we dug deeper to unveil just where the fold exists for one of our clients.
Before diving head first into measurements, lets look into the various screen resolutions that are being used on our clients website. What we found was that 94% of daily visitors browse the site with an 1024x768px or higher screen resolution. Only 6% of their visitors use an 800x600px resolution.
Visualizing the Fold
Now we are armed with enough information to answer the question: Where is the fold? Since the number of screen sizes is growing on a daily basis, it is somewhat of a moving target, but the analytics we collected allowed us to accurately visualize where to draw the fold lines.
Here's a visual representation of how we solved the problem for Playlist.com:
View this screenshot larger »
The screenshot above shows us that a vast majority of Playlist.com's visitors can see everything up until the bottom of the advertisement on the right side of the homepage. The beauty of this graphic is that we can reuse it on any page of their site, simply by obtaining a screenshot. We easily proved where the fold existed for most of our client's users, but we weren't done there — we had one more question…
Does the fold really matter?
Yes it does. Users still need a compelling reason to scroll down and see what the rest of the page has to offer. If it's not interesting content, chances are they'll find somewhere else to spend their time.
"The biggest lesson to be learned here is that if you use visual cues (such as cut-off images and text) and compelling content, users will scroll to see all of it....
The most basic rule of thumb is that for every site the user should be able to understand what your site is about by the information presented to them above the fold. If they have to scroll to even discover what the site is, its success is unlikely.
Functionality that is essential to business strategy should remain (or at least begin) above the fold. For example, if your business success is dependent on users finding a particular thing (movie theaters, for example) then the widget to allow that action should certainly be above the fold."
— Milissa Tarquini Director of UI Design and Information Architecture at AOL
This article isn't meant to suggest that you make the fold line your primary focus in your designs, but it is a good nugget to keep in the back of your mind during the design process.
References
We've been working hard with the TinyPic crew over the last several months, and it's really paid off. We've seen more uploads, more browsing, more sharing, and had a great time seeing it all unfold. Today, TinyPic has launched their new Categories feature, an updated way to browse for images and videos.
The homepage saw the most changes with this push. We removed Featured Images & Videos in favor of Featured Categories and added a new Categories tab to the main navigation. Categories will be a nice addition to searching for images and videos on TinyPic, providing better SEO and showing the wide variety of content TinyPic has to offer.
What's really cool is that for each category, we have a featured image to represent it. Note the little magnifying glass in the bottom right. Clicking that will take you to the full size view of that image, but clicking anywhere else on the image will take you to that category. It's a neat little UI feature that we've taken from the TinyPic Plugin we've been working on.
The other changes are the most obvious: Categories and sub-categories. We've gone only one level deep here to keep things as simple as we can. For instance, you want to find People, and we've got that and more: Kate Beckinsale, Michael Phelps, and more.
Go forth and browse Categories!
We operate in a world of usability, design, and analytics tailored to solve business problems. We feed off our clients' energy and take inspiration from the things our users are trying to do with the stuff we design. We're excited to wow people. We're focused on the bottom line.
But what if you take design practices and a desire to wow 'em and apply it, not to solve a problem, but to ask a question?
That's what interactive artist Jonathan Harris has been doing for almost five years now. Check this out. It's called Universe. It's a way to browse streams of news topics as if they were constellations in the night sky:
Pretty cool, eh? What a radically different way to get your news. It does a nice job putting your finger on the pulse of the (English speaking) world and encouraging random walks from one bit of information to another. You see the relationships and feel the weight of certain topics based on their scale and the words around them.
Harris gets emotion and technology. He delivers the 'wow' and makes you think. There's a lot to draw inspiration from here.
But is his design successful? While we can browse and be inspired by Universe, it's not going to replace CNN.com as a regular news source. It's too technically heavy--the Java, the pop up, the buggy screens that don't always load, the lack of portability of the information visualized here. Navigation focuses on immediate relationships, but lacks a steady orientation. All these things frustrate you if you try to use Universe frequently.
This isn't entirely a fair criticism of Universe since usability and everyday use aren't necessarily Harris' goal. He wanted to ask, "What is the mythology of today? What are the great journeys?" He's asking questions (a function of art), not solving problems (a function of design).
But are there ways to take inspiration from this kind of work and translate them into business problems on the web? How would we do it while staying true to our web roots (i.e. standards)? A mix of this kind of inspiration with a healthy dose of practical design could produce some fresh experiences for our audiences.
References:
Hyperlinks are the most important part of the Web, hands down. They are addresses, destinations to every corner of the Web, and let's face it: people love to travel. Links are the easiest and most understood technology ever to grace the Internet. People understand links—clicking them, typing them, and sharing them.
Still, with all that experience, many designers and developers struggle with creating great, functional links. Improving your hyperlinks is a quick and easy way to help boost your site's usability, ensuring that visitors can navigate it quickly and accurately. 37Signals even wrote a blog post on larger links and how they naturally perform better than smaller ones. While that seems obvious, many people don't take into account what that really means for their links.
So, we've put together our top 10 ways to turn your website's hyperlinks into hyper-clicks, most referenced from recognized leaders like Jakob Neilsen and others through studies and observations.
1. Increase the "hit area" on your links, especially in your navigation.
By adding some padding to the links, you can increase their usability by enlarging the clickable areas to include near-miss clicks. In navigation (like the image above), picking up those nearby clicks that may have missed the hit area saves readers time and fends off frustration. Having links that are easy to use—easy to click—is just downright intuitive.
2. Underline links, but nothing else.
By default, every browser displays links with underlines. People are accustomed to seeing links with underlines and associate an underline with a link. Add underlines to your links, but don't underline anything else to avoid confusion.
3. Use hover and visited link states.
While underlines signal a link for visitors, a change in color or the underline on mouseover confirms that they can click on the link. A visited state on your links should show visitors where they have gone already, saving them time and clicks. This also allows them to focus their attention and worthwhile clicks on links they haven't yet visited.
4. Use the title attribute.
Ever moused over a link and see that little popup that tells you a little more about the link? That's controlled by applying the title attribute to links. Simply put, it adds SEO benefit to your links and can provide additional context to visitors who like to know about links.
5. Use one color, and try to make it blue.
Once again, all browsers (IE6, IE7, Firefox, Safari, Opera, etc) render links blue and underlined by default. The precedent was set years ago by our browsers and still holds true today: blue text within a body of black text signals a link. Links need to stand out because visitors don't read everything.
People want to find your links, so help them out. Andy Rutledge also offers up some advice on choosing a color other than blue for hyperlinks, how different text decoration (underline, background, etc) affects links, and how color blindness plays into your decisions.
6. Add visual cues to grab attention.
A simple link that says "Download PDF" is not as powerful as having that same link with a PDF icon on it's left. It's attention-getting and lets visitors know without actually reading that the link will lead to a PDF.
To get started, Poolie Studios has a great collection of free Web icons for you to pump up those links.
7. Tell visitors where they are in your navigation.
Along the same lines as hover and visited link states, add an active state to the current page in your navigation. This shows visitors where they are within your site and provides context for the content that follows on the page.
8. Links, inside and out.
Links to other pages on your website and to external websites are very beneficial to your SEO and help guide traffic to your site. More importantly, they will help to create inbound links from those you link to. Things like trackbacks and pingbacks help to show activity across the Web on people's websites, typically blogs. Search engines in turn see those connections and may in turn boost your page rank.
9. Use human-friendly URLs.
If it's good for people, it's good for Google. Using a URL structure that is easy to remember and speak aloud is a great way to ensure visitors use your links outside the Web. Flickr has one of the best examples of a great URL scheme: www.flickr.com/photos/markdotto/ is easy to type, read, and share with others.
As people learn your URL scheme based on the links they've clicked, they will be able to easily pass along URLS, making them all the more powerful.
10. Use better content within your links.
Encourage visitors to click on your links by using linked text that just begs to be clicked. "People associate branding with a logo" is a much better link than just "branding" because it adds more controversy, increases the size of the link, and makes a statement.
Hyperlinks are great, but to really make them stand out and perform well, they need some attention and consideration. People want to browse your site, but if you make that difficult for them, chances are your traffic will go down. Simple tools like hyperlinks are low-hanging fruit that help you grow easier and really put a successful website over the top.
So turn your hyperlinks into hyper-clicks by giving them a little extra love. Take that extra step and put a title attribute on, entice visitors with a juicy piece of linked text, or add some extra padding to your links.
