BlogmyQuery – BMQ

More than ever, designers are being asked to create experiences for a variety of mobile devices. As tablet adoption increases and we move into the post-PC world, companies will compete for users’ attention with the quality of their experience. Designing successful apps for Android tablets requires not only a great concept that will encourage downloads, usage and retention, but also an experience that Android users will find intuitive and native to the environment.

The following will help designers become familiar with Android tablet app design by understanding the differences between the iPad iOS user interface and Android 3.x “Honeycomb� UI conventions and elements. We will also look at Honeycomb design patterns and layout strategies, and then review some of the best Android tablet apps out there.

Note that while Android 2.x apps for smartphones can run on tablets, Android 3.0 Honeycomb was designed and launched specifically for tablets. Future updates promise to bring Honeycomb features to smartphone devices, as well as make it easier to design and build for multiple screen types.

For most of us, our first exposure to tablets was via the iPad. For this reason, it’s reasonable to begin comparing the two user interfaces. By comparing, we can align what we’ve learned about tablets and begin to focus on the key differences between the two, so that we can meet the unique UI needs of Android users. Not only will this help us get up to speed, but it becomes especially important when designing an Android tablet app from an existing iPad one.

It’s Just Like The iPad, Right?

While the Android tablet and iPad experience share many similarities (touch gestures, app launch icons, modals, etc.), designers should be aware of the many differences before making assumptions and drawing up screens.

Screen Size and Orientation

The biggest difference between the two platforms is the form factor. Layouts for the iPad are measured at 768 × 1024 physical pixels, and the iPad uses portrait mode as its default viewing orientation.

With Android tablets, it’s a bit more complicated, due to the multiple device makers. In general, there are 7- and 10-inch Android tablets screen sizes (measured diagonally from the top-left corner to the bottom-right), with sizes in between. However, most tablets are around 10 inches.

What does this mean in pixels? A good baseline for your layouts is 1280 × 752 pixels (excluding the system bar), based on a 10-inch screen size and using landscape (not portrait) as the default orientation. Like on the iPad, content on Android tablets can be viewed in both landscape or portrait view, but landscape mode is usually preferred.

The portrait view on a typical 10-inch Android tablet (left) and on the iPad (right).

The landscape view on a typical 10-inch Android tablet (left) and on the iPad (right).

However, with Android, screen size is only the half of it. Android tablets also come in different “screen densitiesâ€� — that is, the number of pixels within a given area of the screen. Without going into too much detail, designers have to prepare all production-ready bitmaps for three different screen densities, by scaling each bitmap to 1.5×and 2× its original size. So, a bitmap set to 100 × 100 pixels would also have copies at 150 × 150 and 200 × 200. By making three batches of graphics scaled at these sizes, you will be able to deliver your bitmaps to medium, high and extra-high density tablet screens without losing image quality.

For more information on screen densities and preparing graphics for Android devices, refer to my previous article on designing for Android.

System Bar

While iOS makes minimal use of the system bar, Android Honeycomb expands its size to include notifications and soft navigation buttons. There is a “Back� button, a home button and a “Recent apps� button.

The Android Honeycomb system bar.

Android Honeycomb’s system bar and buttons are always present and appear at the bottom of the screen regardless of which app is open. Think of it like a permanent UI fixture. The only exception is a “Lights out� mode, which dims the system bar to show immersive content, such as video and games.

“Back� Button

While the bulkiness and permanence of the Honeycomb system bar might seem an obstacle to designers, it does free up the real estate that is typically taken by the “Back� button in iPad apps. The “Back� button in Honeycomb’s system bar works globally across all apps.

The “Back� button in the system bar.

Action Bar

The bulk of the UI differences between platforms is found in the top action bar. Android suggests a specific arrangement of elements and a specific visual format for the action bar, including the placement of the icon or logo, the navigation (e.g. drop-down menu or tabs) and common actions. This is one of the most unifying design patterns across Android Honeycomb apps, and familiarizing yourself with it before attempting customizations or something iPad-like would be worthwhile. More on the pervasive action bar later.

The action bar.

Widgets

New to iPad users will be Android’s widgets. As the name implies, these are small notification and shortcuts tools that users can set to appear on their launch screen. Widgets can be designed to show stack views, grid views and list views, and with Android 3.1, they are now resizable.

Several widgets on a launch screen.

Notifications

While iOS’ notifications system pushes simple alerts to your launch screen, Honeycomb offers rich notifications that pop up (“toast� we used to call them) in the bottom-right area of the screen, much like Growl on Mac OS X. Custom layouts for notifications can be anything from icons to ticker text to actionable buttons.

A notification on Android.

Settings

Access to settings in an iPad app are usually presented in a pop-over, triggered by an “i� button; and settings categories are broken up into tables for easy visual identification. Honeycomb has a different convention. It looks more like the iOS’ “General Settings� screen, where the user navigates categories on the left and views details on the right. This is the preferred (and more elegant) way to present multiple settings in Honeycomb.

The settings design pattern in the Calendar app.

UI Elements

As you can imagine, Android goes to great lengths to do everything opposite from its competitor (that’s called differentiation!). Honeycomb has its own UI conventions, and it now has a new “holographic UI� visual language for such routine actions as picking a time and date, selecting an option, setting the volume, etc. Understanding this UI language is important to building screen flows and creating layouts.

A sampling of UI elements, taken from a slide in a Google I/O 2011 presentation.

Fonts

How many fonts does iPad 4.3 make available? The answer is fifty-seven.

How many does Android? Just three.

Yep, those three are Droid Sans, Droid Serif and Droid Sans Mono. But there is an upside. While only these three ship with the platform, developers are free to bundle any other fonts with their apps.

Anything the Same?

Luckily for designers who are already familiar with the iPad, the two platforms have some similarities.

Touch Gestures

Tap, double-tap, flick, drag, pinch, rotate and scroll at will.

Split View and Multi-Pane UI

The split view is one of the most common layouts for tablets. It consists of two side-by-side panes. Of course, you can add panes for more complex layouts.

Ustream’s split-view layout, with categories on the left and content on the right.

Embedded Multimedia

Both platforms allow embedded audio, video and maps.

The YouTube app, with an embedded video player.

Clipboard

For copying and pasting data into and out of applications.

Drag and Drop

Both platforms have drag-and-drop capabilities.

The drag-and-drop feature in the Gmail app.

Design Patterns

Honeycomb continues many of the design patterns introduced in Android 2.0 and expands on them. In case you’re not familiar with design patterns, they are, as defined in Android, a “general solution to a recurring problem.� Design patterns are key UI conventions designed by Android’s maintainers to help unify the user experience and to give designers and developers a template to work from. They are also customizable, so no need to fret!

As mentioned, the action bar is the most prominent Android UI component and is the one we’ll focus on here.

The action bar highlighted in the Calendar app.

Icon or Logo

The action bar starts with an icon or logo on the far left. It is actionable; by tapping on it, the user is directed to the app’s home screen.

The Calendar app icon.

Navigation

Next, we’ll typically find some form of navigation, in the form of a drop-down or tab menu. Honeycomb uses a triangle graphic to indicate a drop-down menu and a series of underlines for tabs, which typically take up most of the action bar’s real estate.

A left arrow button might also appear to the left of the icon or logo or the label, for navigating back or cancelling a primary action.

Three different kinds of action bar navigation.

Common Actions

Common actions, as the name implies, gives user such things as search, share and an overflow menu. They are always positioned to the right of the action bar, away from any tabs.

Common actions in the Calendar app.

Overflow Menu

The overflow menu is part of the common actions group and is sometimes separated by a vertical rule. It is a place for miscellaneous menu items, such settings, help and feedback.

An overflow menu.

Search

Search is also a part of the common actions group. Unique to search is its expand and collapse action. Tap on the search icon and a search box expands out, letting you enter a query. Tap the “x� to cancel, and it collapses to its single-button state. This is a space saver when many actions or tabs need to be shown.

The search function collapsed (top) and expanded (bottom). Tapping the magnifying glass opens the search box, while tapping the “x� closes it.

Contextual Actions

Contextual actions change the format of the action bar when an item is selected, revealing options unique to that item. For example, if a photo app is displaying thumbnails, the action bar might change once an image is selected, providing contextual actions for editing that particular image.

To exit the contextual action bar, users can tap either “Cancel� or “Done� at the far right of the bar.

The contextual action bar is triggered when tapping and holding an email in the Gmail app.

Tablet Layout Strategies

Using Fragments and Multi-Pane Views

The building blocks of Honeycomb design are “Fragments.� A Fragment is a self-contained layout component that can change size or layout position depending on the screen’s orientation and size. This further addresses the problem of designing for multiple form factors by giving designers and developers a way to make their screen layout components elastic and stackable, depending on the screen restraints of the device that is running the app. Screen components can be stretched, stacked, expanded or collapsed and shown or hidden.

The Fragments framework gives designers and developers several options for maintaining their layouts across screen sizes and orientation modes.

What makes Fragments so special? With a compatibility library, developers can bring this functionality to Android smartphones going back to version 1.6, allowing them to build apps using a one-size-fits-all strategy. In short, it enables designers and developers to build one app for everything.

While Fragments may be a term used more by developers, designers should still have a basic understanding of how capsules of content can be stretched, stacked, expanded and hidden at will.

The most common arrangement of Fragments is the split view. This layout is common in news apps and email clients, where a list is presented in a narrow column and a detailed view in a wider one.

The split view used by USA Today

Another way to present a split view is to turn it on its side. In this case, the sideways list Fragment becomes a carousel, navigating horizontally instead of vertically.

Orientation Strategies

While Fragments are great for applying one design to multiple screen sizes, they are also useful for setting orientation strategies. Your screen design might look great in landscape view, but what will you do with three columns in a narrow portrait view? Again, you have the option to stretch, stack or hide content. Think of Fragments like a bunch of stretchy puzzle pieces that you can move around, shape and eliminate as needed.

A Word About Animation

The Honeycomb framework allows designers and developers to use a variety of animation effects. According to the Android 3.0 Highlights page, “Animations can create fades or movement between states, loop an animated image or an existing animation, change colors, and much more.� Honeycomb also boasts high-performance mechanisms for presenting 2-D and 3-D graphics. For a good overview of what Honeycomb is capable of, check out this video.

Learning from Example

Android tablet apps are still a relatively new space, and some brands are only beginning to test the waters. Below is a list of apps for inspiration. You can download any of them from the Android Market or Amazon.

YouTube
Naturally, Google’s YouTube app for Honeycomb is exemplary, showcasing all of the design patterns and UI elements discussed above. To get a good feel for Honeycomb, download this app first and take it for a spin.

CNN
The CNN app makes good use of touch gestures (including flicking to view more content), the split view and fonts! A custom font (Rockwell) is used for news headlines.

CNBC
Another good news app, with animation (the stock ticker tape) and rich graphics and gradients. CNBC has one of the most visually compelling apps.

Plume
With its three-column layout, Plume is a good example of how layouts might need to be changed dramatically from landscape to portrait views.

FlightTrack
A data-heavy app done elegantly. Includes nice maps, subtle animation and standard Honeycomb UI elements.

Pulse
What else can you say: it’s Pulse for Android tablets! But comparing the Android and iPad versions, which are identical in almost every way, is still fun anyway.

WeatherBug
This was one of the first Honeycomb apps in the Android Market. It makes good use of maps and of the holographic UI for showing pictures from weather cams.

Kindle
Kindle pretty much sticks to the book in using design patterns and Honeycomb UI elements. The outcome is elegant, while staying true to Android’s best practices.

Honorable Mentions

• IMDb
• News360
• USA Today
• AccuWeather
• Ustream
• Google Earth
• Think Space

Online Resources

Video

• Designing and Implementing Android UIs for Phones and Tablets, Google I/O 2011
• Android 3.0 Honeycomb animation demo

Presentations

• Designing and Implementing Android UIs for Phones and Tablets, Google I/O 2011 (PDF)

Blogs

• Tablet UI Patterns

Android Developers

• Supporting Multiple Screens
• Icon Design
• Android 3.0 Platform Highlights

(al)

© Dan McKenzie for Smashing Magazine, 2011.

“I am interested in graphic design as art,” Ed Fella says. “This is a kind of art practice that uses forms that come out of graphic design, decorative illustration, and lettering, all mixed together-forms that come out of Twentieth Century art, out of Miró and Picasso — all of it has a genealogy and a certain look — in the same way that artists today use comic books and graphic novels. I was an illustrator, so you see endless styles popping in and out of the books. The drawings are an unconscious discharge of all the styles and forms that I used as a commercial artist for 30 years — that was my profession — I did it every single day. So, my unconscious has all this stuff in it, and now, because I don’t have to make meaning anymore, I can just use the techniques, like a machine that has long ago stopped making widgets, but the machine is still running. I’m still making stuff. I love the craft of it — of carefully making some little thing.”

Ed Fella: A Lesson In Being Truly Creative

Many articles and interviews have been done with Ed Fella. It wouldn’t do him justice to do another… at least not the same way others have done it. Mr. Fella is different, and not in a good way… or bad way. It depends on how you view design. A base of commercial art led him to create design that is the very destruction of design. It broke every rule and he knew it.

The bad boy in me loves him for that because he chose to do it and keeps on doing it. Best of all, people in design worship him for it. My only sadness lay with his breaking the rules BECOMING the rules. Someone like Fella sets the high bar and eventually, it becomes the standard. Society, and certainly design, is too weird at times and eventually weirdness becomes the mundane.

But the tribute to Fella is that he did it first and for many years while other designers failed to “get it.� The greatest thing that can be said is that he thumbed his nose at the rules and kept doing it until it was accepted and even touted as greatness by his detractors. Bastards!

CalArts, where Mr. Fella teaches, lists his bio as:

“Edward Fella is an artist and graphic designer whose work has had an important influence on contemporary typography here and in Europe. He practiced professionally as a commercial artist in Detroit for 30 years before receiving a master’s degree in Design from the Cranbrook Academy of Art in 1987. He has since devoted his time to teaching and his own unique self-published work has appeared in many design publications and anthologies. In 1997 he received the Chrysler Award and in 1999 an honorary doctorate from CCS in Detroit. In 2007 he was recognized with a medal from AIGA. His work is in the National Design Museum and MOMA in New York. A recent monograph of his work, Letters on America, documents some of his extensive practice.”

I hope he laughs and prints that out to wipe himself with after each bowel movement he takes. Moreover, I hope those who believe hiring “young and cheap� choke on their own words when they say older designers have nothing to add to design. Mr. Fella was old and talented and set the tone many years ago that young and cheap designers now mimic. Take THAT Madison Ave!

Idiosyncratic And Juxtaposing.

Just looking at his work, one would think that he’s a lunatic. He forces contradiction yet still plays to the grid. Not because it’s there but because it serves his purpose to help pull the eye all over the place and still make pleasing, readable design. There is chaos and balance, existing side-by-side like identical Siamese twins – one good and the other evil.

His hand drawn type and inkblot icons are now Emigré font sets. Personally, I think it an insult to the man who hand rendered his own type to contradict the mainstream fonts of the time. Still, no innovation goes un-copied. No movement of rebellion is long lived as it often becomes commonplace with familiarity. The design world is always changing and eventually, Ed’s rebellion became the commerciality of later years.

It is not the lines or placement or type usage of Ed’s that designers should admire and mimic – it’s the strength of conviction, the exploration, the dedication and the utter balls the size of church bells.

When Crazy Becomes The Norm.

Fella is quoted as saying, “anything can be made in anything� and “everything is possible.�

That leaves little to no limitations in the creative process and Fella certainly saw no limitations in his work. His work is a forced contradiction and he revels in it. If red is the color a designer would use for a Valentine, Fella would no doubt use black or yellow. Considering Fella’s decades of work under strict control of both an ad agency and clients, someone of his creative talent… and needs, had a driving urge for a freer outlet or risk spontaneous combustion.

One of Fella’s early sketchbooks contains some telling clippings. One is an advice column in which a young creative sadly wrote that he is depressed by numerous rejections and being told his work is, not “with it.�

The columnist answered with a quote from Orson Wells. “I passionately hate the idea of being ‘with it.’ A true artist is always out of step with his time. He has to be.�

Obviously that struck a cord with Fella. Either it inspired him or just legitimized his entrenched belief in his own design sensibilities. Another clipping within his sketchbook was a quote from Marcel Duchamp. “I force myself into contradiction to avoid following my own taste.�

It was the strict guidelines of corporate design that forced Fella into his greatness and, I suspect, happiest place in his design career. He claimed to flourish with the erratic quality of cheap typesetting (before the years of the PC) and “quickie� offset printing. The arts community quickly grew to know and admire his work and because of the volunteer and low pay jobs associated with that community, he was able to control his own design decisions. By making grand images that were jumbles and unidentifiable, Fella’s work invited closer inspection of individual elements within the entire work.

Fella referred to his work as stylistically “getting it wrong.� His work is raw and obsessive. It has power and spontaneity. Born from the knowledge of layout, typography, design and theory, he seems to have ended up getting it very, very right.

(all images © Ed Fella)

(rb)

Mention Jamaican music to someone who isn’t a fan and you can bet that a fairly predictable image pops into the head of your listener. Chances are this image looks something like the cover of Bim Sherman’s Exploitation:

Same old Rastafarian colors… Some guy with dreads… A title that refers broadly to political oppression or positive thinking without much in the way of self-critical awareness or irony.

For many people, this vision  —  of roots reggae and its deified lead singer —  is the only face that Jamaican music has to offer. (To be honest, the Jamaican music industry, in its eagerness to capitalize on the popularity of this face, hasn’t done much to contradict it.)

Dig a little deeper, however, and you’ll find a dozen genres lurking beneath the tie-died surface of roots reggae. On the album covers belonging to these genres, moreover, you’ll find a dozen different — and sometimes contradictory — visual images of what it has meant to be Jamaican, besides the template of the righteous Rastafarian popularized by Bob Marley. Although the reggae of the 1970s popularized a message of political rebellion, you only have to go back a few years earlier to find album covers that unconsciously reflect the values of neocolonialism — Jamaica as cultural treasure chest waiting to be looted by foreign interests.

Equally complex is the relationship to pop culture: while many covers evidence a conscious Afro-centric opposition to Western society, many others adopt, mimic or are swallowed up by the conventions of American music and movies. You can see every chapter of Jamaica’s modern social history — the burden of colonialism, the optimism surrounding political independence, the social and economic problems that greeted self-rule — reflected in the typographic, illustrative and photographic choices made by its album cover artists over the last fifty years.

In The Beginning

For a country its size, Jamaica has a uniquely prolific music business. In 2000, the industry was estimated to account for 10% of the nation’s GDP (PDF). The footprints of this legacy go as far back as the 1940s, when radios and record players were used to blast American R&B out of storefronts as a means of attracting business. By the 1950s, the phenomenon of the sound system emerged: massive mobile speaker set-ups — run by flamboyant characters with names such as Tom the Great Sebastian — that channeled the music for huge outdoor dances that, in retrospect, look like the distant antecedents of rave culture. With such a uniquely mobilized musical audience in place, it was only a matter of time before the island began to produce its own genres of popular music.

Legendary producer Prince Buster outside his store on Orange Street in the ska days.

Cultural Plunder In the Ska and Rocksteady Years

Ska

The first indigenous Jamaican pop music was ska, a fusion of American R&B, mento (a local genre of folk music resembling calypso) and other influences. In the late 1950s, local musicians and producers such as Coxsone Dodd, Prince Buster and Duke Reid began experimenting with inverting the typical R&B shuffle beat to move the stress to the after-beat. The result was a new concoction that early listeners sometimes referred to as “upside-down R&B.� In the words of session musician Ernie Ranglin: “Instead of the Chinnk-ka… Chinnk-ka… Chinnk-ka style, we ended up with Ka-chinnk… Ka-chinnk… Ka-chinnk.� Often played by large ensembles with full horn arrangements to stress the after-beat, ska music has an infectious upbeat energy that mirrored Jamaicans’ anticipation of political independence from Great Britain, which would officially arrive in 1962.

Listen: Girl, Why Don’t You Answer Your Name, Prince Buster

Who was the first international face of Jamaican music? Before Bob Marley, Jimmy Cliff or Desmond Dekker, there was Byron Lee, the country’s original musical export:

This cover actually dates from 1973, but it typifies one way in which Jamaican music had tried to package itself since the beginning of the ska period: music with a light-skinned face (Lee was Chinese-Jamaican), playing for a light-skinned audience. Bright childlike lettering with no sharp edges. A cultural souvenir: exotic dance music with no complicating social narrative.

The attempt to market Jamaican music this way emerged at the beginning of the ska period in the 1950s to meet the surging upmarket tourist industry and the interest among American record labels in tapping the island’s music. It peaked at the New York World’s Fair in 1964, with a contrived and unsuccessful effort by the government to plant ska on the world stage and garner attention for the island as a tourist destination. To the great resentment of the musicians involved, the government selected Byron Lee’s Dragonaires as the backing band for this extravaganza — a decision presumably based on the band’s clean-cut presentation and on Lee’s political connections to future Prime Minister Edward Seaga. The affair failed to incite international interest in ska, and the only relic from the experiment is a forgettable album entitled Jamaican Ska, released by the US label Atlantic Records and timed to coincide with the ’64 World’s Fair:

Although the government would never again throw its hat in the ring with the same vigor, the effort to market Jamaican music to an explicitly foreign market would continue for many years to come. Many album covers would include a map of how to get to the island, instructions on how to dance once you get there, and plenty of goofball novelty typography in between.

Here’s Byron Lee and his Dragonaires again, “The Good Guys� amidst a dark island:

And here’s a rocksteady compilation from the Treasure Island label, complete with copy that seems to have been written by the Jamaica Tourist Board:

(Hat tip: Chris Morrow)

The situation becomes even more dubious when a girl is thrown into the bargain, as offered by several albums from the 1960s:

(Hat tip: Chris Morrow)

Not that there’s anything unusual about putting a woman on an album cover — just about every genre in existence has tried it at some point. But it’s the racial tightrope that these covers walk — airbrushing their models to conform to Anglo-American standards of prettiness — and the associations made with pirate loot that make for a slightly queasy viewing experience today.

In later years, the most absurd culprit in this category was Trojan’s Tighten Up series, a set of compilations aimed at a white British audience, whose covers often evidenced all the subtlety and cultural sensitivity of early James Bond movies:

None of this commentary is meant to reflect negatively on the music within. Regardless of the cover art, the songs of the ska and rocksteady eras burst with self-assurance and innovation. The point is that these genres reflect an industry that had forged its own musical consciousness but whose marketing and visual identities lagged behind. Even the majority of albums from this period that did not parrot colonial values still took their lead from American R&B covers. (See Chris Morrow’s Stir It Up: Reggae Album Cover Art, pages 17 to 19, for more rocksteady cover art drawn overtly from American R&B and soul albums.)

Egalitarianism In The Rocksteady Years

Rocksteady

In the summer of 1966, the tempo of the music being produced in Kingston suddenly slowed, and music historians have been debating the causes ever since. One explanation is a heat wave that left audiences dying for a mellower beat to sway to. Another is a rising tide of violence at dances: suddenly, you didn’t want to be stepping on the toe of the person behind you. The most compelling explanation is the appearance of the first electric bass on the island — imported, in the irony of ironies, by none other than Byron Lee. While Lee’s interest in the instrument was purely practical — an electric bass was easier to tote around than an upright — the dynamics of the instrument helped shift Jamaican music towards a slower, heavier groove, featuring a smaller cast of musicians and more closely resembling the instrumentation of American soul music coming out of Stax and Motown.

Listen: Ba Ba Boom, The Jamaicans

Rocksteady is the genre that took its cue most explicitly from the US soul music of Stax and Motown, and the resemblance led to some distinction in the cover art. Instead of the larger ensembles that played ska music, rocksteady tended to involve a smaller number of musicians, which allowed more room for vocal harmonizing. This in turn created an interesting democratization of the band dynamic: rather than a clearly-defined lead singer with subordinates handling backup, the rocksteady structure often featured a trio on equal footing, each sharing lead duties — and consequently, all enjoying an equal chance at stardom. Covers from this period frequently show three vocalists standing shoulder to shoulder, with no apparent hierarchy:

The rocksteady years, while producing some sublime original music, also yielded innumerable remakes of American songs, and many of the covers of the time show expressive ways of communicating this:

The heavy-handed “ROCK� lettering here serves as kind of “buyer beware� label to a Jamaican audience more partial to smooth soul sounds (represented here in script).

Social Consciousness And Self-Indulgence In The Reggae Era

Reggae and Rastafari

In 1968, the first reggae rhythms began to appear as musicians sped the tempo back up again, and increasingly sophisticated organ parts created more room for rhythmic syncopation from the bass and guitars. But the reggae era diverged sharply from rocksteady not just in music but by ushering a new era of political consciousness into Jamaican music. Whereas ska and rocksteady were essentially dance genres created in Kingston, reggae signaled a shift to a rural consciousness, which had always been the stronghold of political dissent in Jamaica and within the Rastafari movement in particular.

The term “Rastafariâ€� signals a belief in the messianic status of Haile Selassie (born Ras Tafari), the Emperor of Ethiopia from 1930 to 1974. Shut out of mainstream Jamaican middle-class society until the 1970s — and thus shut out of ska and rocksteady — Rastafari finally bubbled up into the mainstream musical and social consciousness when the political and economic woes of Jamaica grew too great to ignore. Frequently derided as a kind of screwball mysticism, Rastafari is best understood as Jamaica’s native vehicle for black social consciousness, a political movement every bit as much as a religious one.

Listen: Police and Thieves, Junior Murvin

As reggae was coalescing as a style in Jamaica, Motown artists Stevie Wonder and Marvin Gaye were locked in a public struggle with label boss Berry Gordy to buck the company’s rigid hit-factory structure and to make records with greater artistic freedom and social commentary. Although there was no such open insurrection in Jamaica, the shift to reggae signalled an analogous move towards an industry dominated by artists rather than producers. The results mirrored those up in Motown: the songs became longer, the structures more experimental, the lyrics heavier in theme. At its best, reggae was a radicalized version of pop music, with a heavy-hitting political and social relevance unlike anything seen before. At its worst, it showed bouts of self-indulgence that make you yearn for the disciplining hand of the ousted producers who ran the show during the rocksteady years.

The best photographic covers from this period serve as photo-journalism, taking you right into the rural realities of the third world:

(Hat tip: Chris Morrow)

(Hat tip: Chris Morrow)

Meanwhile, the best illustrated covers from this period — especially those associated with Lee Perry’s seminal Black Ark studio — take on themes of suffering and political oppression in a style as creative and incisive as the music itself:

The status of reggae singer as righteous judge passing verdict on society’s injustices inevitably led to a drift to self-indulgence, as well as a monotonous and humorless repetition of certain themes:

(Hat tip: Chris Morrow)

Reggae’s drift from relevance to self-indulgence is especially evident in the album covers of its greatest star, Bob Marley. First, consider Burnin’ (1973), Marley’s last album with the Wailers.

The band is still an ensemble here, with Marley surrounded by his bandmates. While your reaction to this cover might depend on how you feel about wood grain, there’s no denying its immediacy. This feels not like a band of self-satisfied superstars, but rather like a band hungry for insurrection.

Marley’s next album, Catch A Fire, was picked up by Island Records, which made a conscious attempt to promote the artist as a rock star might be promoted, right down to the ostentatious album cover that would have been at home in a gatefold double album by Emerson, Lake & Palmer. The first 2,000 copies of Catch A Fire had a design featuring a giant zippo lighter that is flipped open to reveal the record inside:

In This Is Reggae Music (page 413), Lloyd Bradley writes approvingly of this development: “Up until Catch A Fire, if reggae album artwork didn’t look like publicity material put out by the Jamaican Tourist Board, then it featured somebody’s girlfriend looking nervous, near naked and not very sexy at all.� In retrospect, though, the conscious bloat of Catch A Fire seems more a part of the problem than the solution.

When biographers discuss how Marley was able to achieve superstardom where his peers failed, they often credit the ease with which he learned to play the part of rock god. By the time of Uprising — the last album released in his lifetime — the transformation was complete. The cover helped to cement his messianic status and set the template for the Bim Shermans of the world:

Dub And The Super Ape

Dub

In an industry where sales were built around promoting a hit song on a 7-inch single, producers grappled for decades with the question of what to do with the leftover b-side. In Jamaica, where every penny counted, producers would sometimes save money by creating an instrumental version of the a-side. In the late ’60s and early ’70s, a sound engineer and former radio repairman named Osbourne Ruddock began to experiment with deconstructing and rebuilding these instrumental tracks. Dropping certain elements in and out of the mix, bringing a snatch of vocal track back for ghostly effect, applying echo and reverb from effects boxes of his own devising — anything was fair game. A bystander describes the crowd’s reaction when Osbourne — better known as King Tubby — played his concoction at a dance one of the first times: “The crowd did a quick double take and then went wild, pushing down the fence until it was flattened, and then rushed in, knocking the speaker boxes flyingâ€� (from Reggae: The Rough Guide, page 197).

King Tubby and fellow innovators — most notably, Lee “Scratchâ€� Perry — continued pushing the envelope during the decade, creating their own musical idiom in the process and pioneering the role of producer-as-artist that would later find expression in disco, house and other forms of remix-oriented music.

Listen: Roots of Dub, King Tubby

Dub is consciously spooky music, full of cavernous spaces, unexpected collisions and ghostly half-suggested vocal lines. Lloyd Bradley (in This Is Reggae, pages 309–310) describes the “disconcerting� listening experience as “a reach back to Africa�: “The crushing bass ’n’ drum remixes keep us on our toes with such seemingly arbitrary SFX as explosions, crashes, windows breaking and big dogs barking, while through the judiciously employed echo some frighteningly large spaces open up quite suddenly. Such offerings, vividly evoking the smokey intensity of Rasta drumming, were almost allegoric, designed to inspire a notion of simmering, meditative righteousness and to strike dread, both literally and figuratively, into the heart of Babylon. Just as obeah used to scare the crap out of white folks down on the plantation…�

For all its technological forwardness, there is a deliberate African primitivism to dub, a talismanic spookiness. And yet this primitivism is also a bit of a put-on, like a Halloween costume or a fish that blows out its cheeks to appear more gruesome. Many dub album covers from the mid-’70s — especially those belonging to Lee “Scratchâ€� Perry — capture this quality perfectly with their aesthetic of tongue-in-cheek savagery:

Distended Marvel Comics-style lettering… A savage ape, emblematic of Africa… And yet the arrows and diagrammatic comic-book text tell us there’s an ironic self-awareness behind the whole thing.

Here, Coxsone Dodd — who had already been on the scene for about 20 years as a respected producer — wants you to believe that he was recently transformed into a woodcut monster.

The interest in Africa is also made plain on many Black Ark covers from this period, such as Lee Perry’s Chapter 1:

(Hat tip: Chris Morrow)

See also the exquisite Heart of the Congos (not a dub album, but a classic Perry production from the mid-’70s nevertheless):

Pop Culture, Movies and Dancehall

For all of the cultural defiance in some of the reggae album covers of the 1970s, Jamaican music has always been clearly influenced by American popular culture. Part of this stems from the Jamaicans’ love of a good joke, a willingness to subvert almost anything to playful effect. Secondly, Jamaicans love their movies. Thirdly, on an island where so many records are made, parody is in constant supply:

The Harder They Come caused a sensation when the major motion picture opened in Kingston. Thousands of people without tickets tried to storm the gates of the cinema. The exquisite illustration and typography owe a debt to both Hollywood Westerns and blaxploitation.

Other times, Jamaicans’ obsession with movies comes across in ways that are overtly silly and farcical:

(Hat tip: Chris Morrow)

The island’s musicians have shown a willingness to cover just about anything (including Christmas), a tendency that is often perceived as showing a lack of integrity. It would be more apt to view it as part of the famed Jamaican resourcefulness, the habit of mining every last bit of available source material:

These covers keep a safe satirical distance from the 500-pound gorilla that is US and UK pop culture. But during the dancehall phase of the 1980s, Jamaican sensibilities seem to get swallowed up by the aesthetic of materialism and arrogance in US hip-hop culture:

(Hat tip: Lars Hasvoll Bakke)

Credit Yellowman for at least maintaining a grotesque sense of humor in his postures (and, in some cases, a weirdly meticulous sense of photographic composition: check out how his belt aligns perfectly with the receding edge of the sidewalk in the cover above). As the ’70s rolled along, the appropriation of rap culture became depressingly void of self-awareness:

(Hat tip: Lars Hasvoll Bakke)

The ’80s: Things Unravel

With its lack of lyrical themes, dub music freed up cover artists to illustrate topical subjects and get the albums out onto the street in two to three weeks. London-based designer Tony McDermott, in particular, popularized a fun, irreverent approach to dub cover art in his work for musicians such as Scientist and Mad Professor:

By the mid-’80s, however, the comic-book style degenerated into an excuse to put out bad artwork quickly. These covers often accompanied albums that were themselves hastily assembled or poorly mastered reissue material. After King Tubby was mysteriously murdered outside his recording studio in 1989, for example, his backlog was looted and rushed out the door. This one in particular treats Tubby with all the dignity normally reserved for Burger King’s mascot:

The ’80s in general were a difficult time for the industry. Reeling from the death of Bob Marley and destabilized by the collapse of punk, reggae staggered into the new decade, struggling to find a new identity. The album covers reflect the hard times, as the genre contributed some of the worst covers you’ll ever see from this period. See Crestock’s “42 Reggae Album Cover Designs� for some particularly gruesome examples.

(Hat tip: Chris Morrow)

Enter Blood And Fire

Just when it looked like every idea had been exhausted, every theme mined and every cliche deployed, we’re reminded that the genre can always be visually reinvented with a little fresh thinking. The English label Blood and Fire formed in 1993 with the intention of reissuing Jamaican music to the same standards as jazz and blues, thereby “saving it from the world’s bargain bins and half-price tags,� in the words of founder Steve Barrow. Blood and Fire specializes in dub reissues, and its innovative covers have created a new visual vocabulary for the genre:

Gone are the attempts to personify Tubby as a cartoon character. Also gone, for that matter, are beaches, coconuts, women in bikinis, giant spliffs and every other tired staple of the genre.

In their place are tightly rendered scenes of scrap metal, raw surfaces and found objects: a commentary on the resourcefulness and grit of the producers who made dub music and the interior nocturnal spaces where they worked. Tubby and Lee Perry literally built their own studios, after all, as well as many of the devices and effects boxes therein. One of the great qualities of the Jamaican industry has always been its DIY ethic, which enables the music to stream from its makers to its audience with a minimum of calculation or interference from outside interests. Here is singer Max Romeo talking about the way things were done at Lee Perry’s Black Ark Studio in the 1970s:

We were just messin’ around with lyrics and the melody. Scratch say: “Sounds good.â€� He come out and decide to record it right away. It was out on the street in a couple of days. That’s the vibe we had at Black Ark — you didn’t have to say tomorrow or next week. You sound good, you go right now. It was fun days.

– From the liner notes to the Arkology box set (emphasis added).

Max Romeo’s memory of a spontaneous musical culture, an environment devoid of record label executives and MTV influence, is what informs Blood and Fire’s album covers. Although Blood and Fire is unfortunately now effectively defunct, the torch has been passed to other labels, such as Pressure Sounds, which has continued to explore ways to creatively package Jamaican reissues:

Conclusion

The modern history of Jamaica is a story that resonates in any number of former European colonies. But of all these countries, Jamaica is the only one whose music industry is so prolific that we can see the whole trajectory written on its album covers. Efforts to keep reggae popular on the world stage have led to a narrow conformist definition of the genre’s visual brand — an ironic fate for a music that is supposed to be about diversity and rebellion. The impressions left behind on Jamaica’s album covers, however, point to a wider and more fragmented social history, one that lacks the conformity of a marketing campaign and that contains the multitude of contradictions in the postcolonial experience.

One for the Road

Quick quiz for design nerds. Why does this posthumous compilation of The Skatalites’ deceased saxophonist include lettering from the Arts and Crafts period?

(Image: R~P~M)

Answer: Tommy McCook … Charles Rennie Mackintosh. Hey, whatever works.

Other Resources

You may be interested in the following articles and related resources:

• “42 Reggae Album Cover Designs: The Art and Culture of Jamaica,â€� Crestock
  If you enjoyed this article, run — don’t walk — to this selection of weird and wonderful album covers, including oddities such as Uglyman’s Ugly Lover.
• This Is Reggae Music, Lloyd Bradley
  This excellent volume on Jamaican music provides much of the historical context for this article.
• Stir It Up: Reggae Cover Art, Chris Morrow
  A collection of Jamaican album cover art. Another excellent resource.
• Muzikfan, Alastair Johnston
  Reviews of Jamaican and world music.
• Reggae: The Rough Guide, Steve Barrow and Peter Dalton

(al)

© Dan Mayer for Smashing Magazine, 2011.

The open source movement or philosophy is something that I am truly passionate about, and something that can have beneficial effects for all industries related to technology and its use. In this article, I’ll outline information about the philosophy, what it means for the web design industry, how you can benefit as a designer, and how you can contribute.

It’s all about participation – picture by opensourceway

One of my favourite attributes of the world of open source is its relatively innocent and philosophical nature. Too often we can get wrapped up in the dollars and cents of our industry and lose the core passion that brought us to it in the first place. Open source philosophy and resources can be a sweet glimmer of idealism that works to support the overall community through the work and generosity of its members. Not only does the result improve the quality of the web we work with, but it also aids us in each of our commercial projects by lending efficiency, solutions, and ideas that may have been a struggle to work out independently beforehand.

What is the Open Source Movement?

From a high level perspective, open source is a license (or lack of license!) that allows end users to first obtain a product or creation for free, and second to modify it as they see fit without restriction. What this does is increase distribution and improves the product over time. Keep in mind that this is quite a general definition and that open source resources can be licensed in a variety of ways – this to be covered shortly.

Beyond being a simple license designation, there is a growing philosophical and subjective side to the open source movement centering around the concept that all information should be shared with all individuals, everyone freely given opportunities to use the information, and everyone free to contribute. From a high level view, this should theoretically create more benefits over time than a privatized and competitive industry inserting limited resources and seeking financial gain.

Brand vs. Community – picture by opensourceway

A popular and well-known proponent of the open source philosophy is Canonical Ltd., the organization which releases free Linux operating system packages and develops a thriving community of software developers.

For example, imagine a PHP content management system that could go down two paths – the open source route, or the privatized route. Through the open source path, users are free to modify the code to perfectly match it to their projects, and submit any enhancements or improvements that they can offer back to the community to make the next release a better product. Under the privatized route, a team of developers would work on the project perpetually, fuelled by revenue made by selling licenses for distribution. This comes with restrictions on modifications and commercial use.

What’s The Catch?

It’s not all sunshine and smiles however, as there are benefits and detractors for each path. The benefits of open source production have been touched upon, as well as the downside of privatized competitive industry. Conversely, what are the downsides of open source and the upsides of privatization?

In a World of Registered Trademarks – picture by opensourceway

The downside of open source is that it relies on a community to support it and propel it forward. With no community, the product will be dead in the water like a sailboat with no wind. Active participants are the key ingredient to positive open source progress, and without them, the entire system breaks down. The upside of privatization, along the same lines, is that it requires no community but rather pulls from a talent pool and job market to bring the top software developers under one roof, and guarantee their input through salaries paid from the sales profits. Regular releases, diligent support, and some level of quality are all guaranteed under this model.

Overall, open source has more potential for quality, but comes with no guarantees. Privatization comes with certain guarantees but has limited potential as development is not open to the entire world. The last piece of the puzzle is political – socialist idealists generally love the open source concept, while competitive capitalist proponents may be more inclined stand beside privatization and the benefits of competitive industry.

A full description of the philosophy and its practice can be found on www.opensource.org and in this Wikipedia article.

What Does It Mean For Our Community?

Whether you’ve heard of or understood the concept of open source before, you’ve most certainly interacted with it inside the web design community. Free web templates, most content management systems, and a ton of the content featured by online web design magazines and resource lists all fall under this category. There are a ton of resources out there dedicated to moving the web design industry forward by providing free products and services as well as total transparency into the process and the source code.

To give it some perspective, try adding the phrase “open source� when you’re looking for a piece of software or a web resource using Google. Whenever you see those words on a web site, you can be guaranteed that it’s 100% free with no strings attached, and hopefully has a supporting community that you can tap into for specific questions. This is something I especially value when looking for and using a CMS.

The Open Source Success – picture by opensourceway

Under the open source philosophy, the potential for the web design community is limitless. Working together to share knowledge, resources, and best practices will propel everyone forward. The best part is that following this line of thinking will not detract from our opportunities for web design revenue. Open source resources can usually be used within commercial projects, and there remains a huge amount of potential web clients available. Indeed, continued collaboration should simply enhance the skill and experience of each designer and create a better web from the inside out.

“These changes, among others, are ushering us toward a world where knowledge, power, and productive capability will be more dispersed than at any time in our history”
- Don Tapscott, Wikinomics

Know Your Licenses

Web content isn’t simply divided between open source and commercial – there are a wide variety of licenses that fall on a scale of requirements and restrictions of use. For example, the GNU GPL (General Public License) is a “copyleft” license with details concerning source code, permissions, modifications, and more.

A comprehensive list of common software licenses can be viewed here on the GNU web site.

GPL (General Public License)

The GNU General Public License is probably the most commonly found license in application within the web design industry. Under this license you are free to modify the resource to meet your needs and even redistribute it as long as you make the source files available when doing so. GPL resources can be used in commercial projects under the right to sell copies. Full details and explanations of the terms of the GPL can be found here.

Creative Commons Licenses

Many readers will have heard of the Creative Commons. This group currently has 6 types of licenses that are also commonly used. Each of these allows others to copy and/or modify work, but only if they give credit to the author in whatever form they request. These 6 license differ in other ways, however, such as some allowing commercial redistribution and some not, and some allowing modification and others requiring none. Read all of the details here.

MIT License

The MIT license originated from the Massachusetts Institute of Technology and is also known as the “X11 License”. This type of license allows users to modify, copy, merge, publish, and/or sell the resource provided that they include a copyright notice and the MIT license permission text. Lastly, the license stipulates that there is no warranty or guarantee included with any MIT licensed resources – essentially freeing the authors from any risk of liability through their use.

The Public Domain

Often resources are completely released into the “public domain”, which means that the copyright holder waives all rights to the work and in a sense lets it into the wild with no restrictions or licenses applied. If you find these resources, use them however you’d like.

And More…

There are literally hundreds of software and web resource licenses – and many of those have multiple versions. It’s important to understand the terms of a license agreement and to be careful when using licensed materials. Great resources to read full license text and learn more are Wikipedia, Creative Commons, GNU, and The Open Source Initiative.

When In Doubt…

Contact the author! Licenses need to be taken seriously and the terms followed diligently. If any communication is unclear, or if no license type is listed at all, open licensing can’t be assumed. The best course of action in any scenario of confusion is to contact the author of the work directly and ask for specific permissions of use. Simply taking a resource and using it, or even giving credit to the author directly in its application, may not be acceptable and could even lead to legal repercussions – not to mention affecting your credibility and brand.

In fact, approaching the author of a resource with a request for its use, even uses outside the stipulations of the license, can prove beneficial. Once an author (or copyright holder) produces a resource and licenses it they will always retain the write to waive restrictions or copyrights.

How Can I Benefit From It?

I’ve already mentioned the overall benefits of free and modifiable products and services, but I’ll list some specific examples here to get you started on the right path:

Popular Open Source Projects

• WordPress
• Joomla
• Drupal

Web Editors

• Bluefish
• Aptana
• Notepad++
• jEdit
• Serna (XML)
• Kompozer

Photoshop Alternatives

• GIMP
• Paint.NET
• Picnik
• Splashup
• Inkscape

Office and Web Tools

• FireFox Browser
• Mozilla Thunderbird Mail
• RSS Owl
• Open Office Suite
• FileZilla FTP

More

• List of Open Source Software (Windows)
• List of Open Source Software (Linux)
• List of Open Source Software (Mac)

As you can see, open source alternatives provide the means to do everything you would ever need to accomplish during a web design project – without shelling out thousands of dollars for software licenses! It is the beginning or independent designer’s best friend.

How Can I Contribute?

This article wouldn’t do the open source community justice if it didn’t include an urge for contribution. In this community of ours we need to give as well as take – it’s great that there are so many free resources out there, but when was the last time that you created and distributed one of your own? The entire philosophy and optimism for growth rests on this principle – please give back what you can, where you can, and when you can!

The Fortune Cookie says… – picture by opensourceway

This doesn’t need to entail creating your own daunting software project, or slaving away on a free icon set. Instead, it can simply mean contributing suggestions for improvement to existing systems and communities, creating a simple plugin for a CMS, and the like. Diversity is also an important concept when contributing – take a look at what’s out there and think about what you can contribute that is both unique and useful. Be aware of these opportunities to help move our community forward and strive for an improved web.

For example, the lead developer at Fluid Media runs and maintains a GitHub social coding account to provide source code for projects as well as to contribute bug fixes found in any systems that we use.

1. Identify a Need

   This can occur in one of two ways. First, you can observe what open source resources are currently available to the web design community and identify an area where there are few or no resources. Second, you may already have resources or even code snippets that have been used or are currently being used as part of commercial web design projects. Did you figure out the most efficient sticky footer yet? Share it!

2. Package and Prepare

   If you’ve spotted a need or a gap in the existing resources – or something you’ve already created that could aid others in the community, put together the source files and published files, provide a bit of documentation, and presto – you’re ready for release. If you’re selecting a specific licensing path, be sure to stipulate it as clearly as possible to avoid any violations, as well as linking to the full license text and details.

3. Publish

   There are hundreds of ways to provide the community with your open source work ranging from GitHub for code snippets to DeviantArt for icon sets and graphics. Many authors also host tips, tricks, code, graphics, or project source files on their own web sites. It’s always great to see web designers helping web designers.

Conclusion

The open source philosophy is something that I truly believe in, and open source resources are products and technology that I use often in my projects as I’m sure we all do. The talent is out there, as well as the various avenues to provide solutions – it’s up to us to keep the ball rolling and share our discoveries with the overall community to improve the web as a whole.

(sp)(rb)

Games are becoming more Web-like, and the Web is becoming more game-like. If you need proof of this, you have only to look at Yahoo Answers. Random questions are posed, the top answer is chosen, and credibility points are given to the winner. It’s a ranking system that accumulates and unlocks more and more features within the system. It works because of the psychology of achievement and game mechanics and thus encourages interaction. This raises the question, what can a Web designer learn from games, or — more specifically — video games?

Good game interfaces have to be highly usable and intuitive, capable of handling a lot of repetitive actions in the fewest clicks possible. They need to be attractive and engaging. They need to be likeable. A good game interface adds to and enhances the user’s experience. In a game, people want the content delivered to them in a way that doesn’t break the fantasy. Any dissonance with the interface will cause an otherwise great game to fail.

Even in older games, as in Prince of Persia (displayed above), the limited system capabilities enforced designers to come up with creative and innovative design patterns. With more capabilities available today, we are able to find more advanced design techniques in modern video games.

In the same way, website users want their content delivered to them in a way that is easy to understand, intuitive and engaging and that doesn’t require a lot of scrolling or clicking. In fact, Web designers can learn a lot from video game interfaces. Websites that use common game interface tools can streamline the user experience while adding a lot of personality. This can result in higher traffic and a higher rate of repeat visits — and sales… Cha-ching!

It’s no surprise, then, that we’ve seen an influx of carousels, lightboxes, accordions and increasingly sophisticated navigation patterns, as CSS and JavaScript libraries have put such tools within reach of Web browsers. Whether it’s a good or a bad thing, is a topic for another article, and this article will focus on the techniques rather than their wrong applications.

What a Web designer can learn from video games isn’t limited to the user interface. Yahoo Answers works because of the psychology of the achievement system that is built in. So, while we will look at some basic user interface ideas and patterns, other higher-level concepts would be useful, too, and worth exploring.

Remember The Big Picture

In considering game interfaces, a Web designer needs to be acutely conscious of their project’s context and their client’s goals. Obviously, a website will often, though not always, have a goal that is very different from that of a video game. On many websites, efficiency needs to be a higher priority than entertainment. A cool fish-eye interface is not the most practical idea for a website dedicated to delivering tax information quickly or for an e-commerce website. However, an interactive social media channel might benefit from a leaderboard or some type of achievement system. Choose your UI components to fit the project.

Looking at the big picture, also consider structure and method — not just UI components. For example, look at how menus are structured, and consider why those choices were made. In many games, you have a hub-and-spoke type architecture, leading to different sets of tools within the menus. If you choose “Weapons,â€� then all of the options for weapons open on the next screen. You have to navigate back to the top screen in order to choose “Maps.â€� This structure simplifies a set of options that would otherwise quickly become confusing or overwhelming by providing focused attention on one choice at a time.

Can you see how this type of architecture could benefit a website that presents a large amount of information to the visitor? By allowing the visitor to focus on one piece of a large online task or one nugget of information at a time, you potentially increase the conversion rate for your client. This structure could also be effective when you are crafting a sales funnel on a website. The example below shows a simple game menu structure that could easily be applied to the information architecture of a website, building paths for visitors to follow.

If you were building a website for a CPA firm, you might segment its menu information under headings relevant to the type of visitor. A high-wealth individual has very different needs than a small business, but both might be interested in hiring the same firm. You could start at the top level, with two simple entry points serving as a funnel, one for individuals and families and the other for businesses and organizations, each button leading to the hub for that user. This hub page could provide content, offer pertinent tools and advertise relevant services for these very different users, thus simplifying their experience.

Also, notice places where video games show instead of tell, and try to understand how they do that. Successful games are particularly adept at showing during training sessions, in what are often referred to as “noob caves.� A character has to pass through elementary rooms or levels, where they are taught to accomplish basic tasks in a way that is entertaining and integrated with the story. An adventurer learns to pick up a sword and swing it, then kills a rat, then learns how to pick up treasure. The user is taught to use the interface through immersive experience.

In The Elder Scrolls IV: Oblivion, you start out in prison and must escape through an underground cave, fighting rats and the occasional small goblin along the way to learn the basic controls of the game.

Why is this relevant? You probably won’t have to make a full interactive tutorial for a complicated interface, but chances are your client’s content will be more clearly received and more quickly understood through intelligent graphics or charts. You could take big concepts and break them down into bite-sized chunks. You could look for potential points of confusion and clarify with tooltips or examples rather than long explanations. By studying how games show instead of tell, you could get a breakthrough on a thorny presentation problem.

Engagement Doesn’t Have to Be Glitzy

Game design wizard Jesse Schell says, “Games offer the possibility of success, the opportunity to satisfy your curiosity, the chance to do some problem-solving and make clear choices, giving a feeling of freedom.� Even the most mundane of websites could be made more engaging by asking the question, What elements of games do people find pleasurable?

Games provide clear feedback, often at the instant of user input. These elements could be incorporated into interfaces, and not only through carousels or accordions. Asking something as simple as “Would you like to learn more about this topic?� upon confirming the submission of a form can go a long way to increasing user interaction.

Some Web designers already implement some of these common UI components at a simple level. Certainly hover menus and tooltips are not new. Seeing how these are implemented in a game can spark ideas on how to implement ordinary UI elements in a more creative and interesting way.

Examples, Please

Let’s dive in and look at some UI elements that can add zing to your next project. We’ll look at some examples and then a few resources where you can learn more.

AJAX Messages With Loader Image

These loading screens from Fallout: New Vegas (top) and Fallout 3 (bottom) have helpful information and tips, along with a background image that expands on the theme of the game. Instead of a spinning loader image, the user sees a roulette wheel or green-screen target that transforms a boring wait into a fun part of the game experience.

What a Web designer can take from this:

Customize your graphics. Use them to pull the user into the “worldâ€� that you’re creating on screen. Even if you are working on a corporate website, you can load tips and helpful bits of information. Building a retail sports website? Perhaps you could use a spinning basketball for your loading graphic on a slideshow. Not sure how to get started? Check out this tutorial to learn how to preload content.

A full-page background image for a loading screen might be too slow, but you could add a colored background to the loading panel div, and then use JavaScript plug-ins to load random tips and information to fill the space. For best results, keep the loader files below 30 KB; the smaller the better. A simple AJAX call can grab tips every so many seconds, or you can simply post one for each load. The choice depends on how much content you need to load and how much time you have. For an example of this kind of loader, check out the Website Grader at HubSpot. After submitting a link, check out the loader that comes up as you wait for the result.

Custom Cursors

In Fable 3, the place being chosen by the user is indicated by a magnifying glass, which acts as a custom cursor.

In The Elder Scrolls IV: Oblivion, a simple hand cursor indicates an object that the player can pick up. A red hand indicates that the item is being stolen and that soldiers might pursue.

What a Web designer can take from this:

Probably the most recognizable custom cursor is the “grabby hand� Google Maps. But custom cursors are nothing new and are common in Web applications. The capability is built into most browsers.

It’s important to use these cursors sparingly: when offering help, to indicate clickable content, and to highlight important information. Does a particular piece of information absolutely need to be seen by visitors? Try this demo of a custom cursor (pictured below). Do you see how it could be used to grab attention and highlight important points? Imagine what a well-executed JavaScript magic wand could do on a children’s website to capture attention! Obviously, it wouldn’t be a good fit for a corporate website, though.

Icons, Icons, Icons

One big difference between video games and websites is that icons are used much more in complex game menus than in website navigation, and rightly so. A user typically spends much more time in a game than on a website. But icons are still used on websites, and increasingly so as the line between websites and Web applications blur.

So, how are icons used effectively in game navigation? They must be readable and fit the context. In the example above from Halo Reach, the user relies on icons to navigate and choose weapons, but the menus resemble a “heads-up display� (HUD) that we might see in a vehicle in the real world. In Oblivion, icons are presented on “scrolls.� Website icons should likewise be easy to understand. Add text labels for optimum usability.

Icons can greatly accelerate navigation through complex menus if the icons are carefully chosen and consistent and if users spend a lot of time on the website. Use solid-color, high-contrast outlines of easily recognizable shapes that are simple and quickly readable.

Games are moving away from small, highly detailed images to more sophisticated outlines (in smaller files), such as those found in Halo Reach and the Call of Duty series, and larger detailed images with distinctive shapes, such as the ones below. Even if you don’t notice the details, you will recognize the hand, circle and face outlines. Using the same color makes them less visually complicated and easier to decipher. The more icons that are used, the simpler and more quickly readable they should be.

You can also use icons as visual cues to focus attention on key topics. Use “header� graphics instead of buttons as quick prompts in content boxes and repeating topics to reinforce concepts. Make complex images bigger, and be consistent. Use icons to add interest to lists, and break up content into digestible pieces and to draw attention to important sections of text, as Treemo does so well. Consider using relevant icons for navigation and topical groupings. You could use consistent shapes as headings within the text or as pull quotes to indicate that certain content is related. Use icons to make content easy to scan, highlighting points of interest, so that users can quickly find pertinent information.

Icons don’t have to be static illustrations. The screenshots on Pattern Tap serve as traditional thumbnails, but their distinctive shape also functions as an icon, increasing interest and reinforcing the brand:

What about using your client’s own products as icons? The clever sub-menu on DonQ, shown below, uses the products themselves as icons, quickly and easily directing you to the one you’re interested in. Even more clever is the way that the rest of the content dims when the sub-menu appears, making your options stand out.

Full-Page Carousels

Tabbed screens that fade out, such as this one from Dragon Age, Origins, have been around for a long time:

In the “Carnage Report� in Halo Reach, below, this idea is taken to a new level. The screens scroll horizontally, and each page has multiple tabs. Gamers are used to this type of interface. But take it to the Web, and people will be surprised.

You have to interact with this type of interface to do it justice.

Jax Vineyards uses a similar type of layout, without tabs:

Add tabs to each carousel screen, and you would take this website to the next level.

Magento offers another, simpler take on this idea:

Right now we see this type of interface in mobile and tablet UIs in which there are multiple background images. We also see it in games of all types. This is more than tabs within tabs or simple horizontal scrolling: think iPad with multiple desktops. Think for a Living offers a (very game-like!) map in the top-right corner to help users navigate its unusual carousel.

What a Web designer can take from this:

If you have a lot of content, then this bold solution can be user-friendly and can increase engagement. Remember the good old on-page anchor tag with a target? This is the same concept in new clothing. Your screens slide in and are easily navigable with a touch screen, which is a factor that will only increase in importance.

Because of the various screen sizes, this type of layout requires careful planning and might call for CSS3 media queries to ensure that the content loads as intended on different screen sizes. You will need to make your layouts responsive. You can implement a full-screen carousel by using a page-sized div, with the overflow set to hidden, and placing the screens in an unordered list with a set width.

Users will become increasingly familiar and comfortable with this type of interface as they adopt tablets. Implementing an even simpler horizontal scroll can make your client stand out from the crowd.

Slider Menus

Fable 3 is out, and its immersive menu system is completely different from the one in Fable 2, pictured above. But Fable 2 has such a beautiful slider menu that we had to include it.

Scrolling with the slider reveals buttons, and content is presented on the right half of the screen. The buttons also have dropdowns under them. Inactive content dims. Pictured above is the top category of “Clothing.� Then the content drills down to “Coats,� then to specific clothing items. Does this remind you of e-commerce?

What a Web designer can take from this:

Have you ever been on a website that had huge fly-out menus that covered the page? And as you hovered over items, they expanded into sub-menus… four levels deep! Such complicated menus can be intimidating and make the person want to leave. Making the menu small, easy on the eyes and quickly scrollable is a great way to overcome bloat and keep visitors from clicking away.

There are already some slider scripts that provide custom scroll bars for any div container. Why not put buttons in the div? There may be certain settings (like entertainment or fashion websites) where this type of menu is more usable and scalable than your average dropdown or fly-out menu. Add an AJAX loader for your onClick event, and you have an engaging interface that users can easily decipher. The goal is to keep users on one screen while keeping the menus scalable. You could add literally as many items under each menu as you need without making them unwieldy.

Pivot Screens

I must admit, my heart skipped a beat the first time I saw the pivot screens on Halo Reach. When you get to the main menu, the text is skewed. Halo Reach uses perspective throughout the game to point to the right edge of menu screens. This is a visual cue. What happens when you push the controller to the right? The screen jumps and scrolls horizontally, blurring, to give you the next screen, which uses perspective as well, this time skewing all of the text and images to the left. Under a tab, your character is animated, barely moving and eerily life-like. Bravo. I sat and played with the pivots for a while. Of course, my first reaction was, I want to do that.

What a Web designer can take from this:

With a little Photoshop, you can emulate this menu. By using a large panoramic background image that covers two screens’ width with skewed CSS3 typography, and a fast horizontal scroll in JavaScript, you could get something close to the tilt found in this game.

Apply this to a smaller pane, and use it on a banner or button that is completely animated in two frames, and you’ll get a wow (so will your client). I haven’t seen anyone using this method on the Web yet, but I did work up a little demo to give you a starting point should you want to implement this yourself.

Also, notice the way that Halo Reach integrates mundane menu screens into the world of the game with the clever illusion of a landscape in the distance. It’s a beautiful thing. It gives a sense of depth and approach, like when you look at a city from a plane before landing. It builds excitement and entices you to go deeper, to interact and be part of the action. This type of integration does not lend itself to all website experiences, but it does to some; and when appropriate, it is worth doing. Never underestimate the power of delight.

Context Menus

The context menu in a video game is the kissing cousin of a website sub-menu. Context menus like the one above from Assassin’s Creed: Brotherhood give the user specific options depending on their location in the game and their choice of actions. If you choose to cast a spell, then the sub-menu offers you a fireball or lightning blast. If you choose to move, then you can run, climb or hide, all from the radial menu. Radial menus with icons are very popular, but context menus could just as easily be short vertical lists of text.

What a Web designer can take from this:

When you invite a user to take a specific action, a context menu can enhance the experience. Instead of providing lists of links, you could offer a fun array of specific actions to take. We see this used now in Web applications and in small social media sharing widgets.

When making a context menu, you might at least consider making it radial. Radial menus should give users a choice of three to eight options, and the interface can add visual interest. Keep the menus as simple and clear as possible. They should offer relevant choices to the user at the point of decision and increase conversion rates. They should also be easy to click and visually lightweight.

For a fun example of a radial context menu, check out TuneGlue’s musicmap:

While this was done in Flash, you could build a simple radial menu with JavaScript. Or you could get more complex, with nested radial menus, like so:

Radial menus aren’t limited to context menus. Pop-up panel menus at a point of action can be equally effective and may not take as much time or testing to develop.

Your Turn

Many other examples of great interface ideas can be gleaned from studying video games. Games offer design inspiration that can help you reward and gratify users and make your interfaces more intuitive and fun.

Are you building a website for a non-profit that is planning a donation drive? Consider using leaderboards to track donations. You could use leaderboards to give a shout out to the top 10 readers on your blog, giving them greater incentive to comment.

Study how icons are used, and think of ways to implement them that will make your website more user-friendly and enjoyable. Make interesting tooltips, or consider ways to add downloadable content (“DLCâ€� for all you gamers out there) as a reward or incentive. By observing and implementing creatively, your websites will become more engaging and easier to use. And let’s not forget that doing the research is really fun!

Further Resources

• Introduction to Design Patterns
  A good beginner’s resource to learn about design patterns.
• Art of Game Design
  This book teaches the fundamentals of game design. Sample chapters are available to download.
• Interaction Design Pattern Library
  A great tool for brainstorming specific solutions to meet user needs. It has a list of patterns and detailed descriptions.
• Yahoo Design Pattern Library
  The mother of all design pattern libraries.
• Vertical Custom Scrollbars/Sliders
  A starting point for a vertical slider menu.
• Patternry
  A wonderful UI resource, with examples and how-to’s.
• Gamification.org
  This wiki is dedicated to exploring ways to integrate game mechanics in non-game environments in order to increase engagement.

(al)

© Anne Sallee Miles for Smashing Magazine, 2011.