The magic is fewer choices
Four options makes choices easier. Usually, you can just pick the one that feels right. Ask yourself: was it good or bad? And then, how good or bad was it?

…and enough choices
Some might ask: why not stop at two options, like Rotten Tomatoes and Roger Ebert? With the ability to choose Great or Good, you’re able to distinguish the things in your life that have made a real, lasting impression on you. This Great-list is a meaningfully small percentage of all of things you’ve ever experienced.

Meh isn’t helpful
We’ve found that not having a middle option makes for easier (and more meaningful) ratings. Because there’s no 3/5 or 5/10, you must make a choice between either positive or negative.

It works for everything
The system started with movies, but don’t stop there. This is a way for you to easily and clearly convey your experiences to other like-minded people.

Everyone already knows the system
These same words are already used to evaluate things, but the system provides consistency of scale. For clarification, it helps if you raise your eyebrows and shake your head with a “Not Great.” And whenever delivering a “Not Good,” let them  feel your disappointment. (Remember, your time or money has just been wasted.)

You can use it even when you have too many choices
On a 5-point scale: just skip the 4.
On a 10-point scale: use 1,4,7,10.

Everyone’s Great-list is unique
This is probably the greatest benefit of the system. When you’ve decided that something is Great, you’ve connected with it on a fundamental level. Collected together, your Great-list is like a conversational DNA strand.

…but it’s the overlaps that count
Compare your Great-list with others. When you find someone with a lot of similar Greats, you’ve found yourself a new friend.

You’re probably wondering about the overlaps on Oxide’s Great movies list. Here’s a sampling:

Adam and Drew: Raiders of the Lost Ark, Up.
Joe and Drew: Ocean’s Eleven, The Matrix, High Fidelity.
Adam and Joe: Groundhog Day, Zombieland, The Dark Knight.

As proof that every Great-list is unique: there’s just one overlapping movie for all three of us: The Incredibles. We all agree that Pixar’s sixth movie is a perfectly-paced, cleverly-written, and finely-sculpted masterpiece. Despite our inevitable disagreements on the weekend’s new releases — or anything else that we may butt heads on — our one Great movie will always be there to bring us back together.

You may have read one of the recent posts on our site about the new Oxide t-shirts. To reiterate, each of us designed our own shirt keeping in mind a couple of guidelines:

1. Make a shirt you’d actually want to wear.
2. Relate it to Oxide in some fashion.

Last week, Drew shared his version of the perfect t-shirt, and now it’s my turn. When Drew first told us that we would be designing t-shirts, I immediately knew I wanted to create one that portrayed our shared love of LEGO bricks. First, I decided to illustrate them as if they were from an instruction manual. I built out several different versions of the type but landed on the version that used the fewest number of pieces (while staying easily readable). To add a little more interest to the illustration, I decided to make it look as if it were the last page in the instruction manual by drawing an arrow to complete the E.

As a special bonus, for those of you with Adobe Illustrator, I have included the working file that will allow you to build your own instructional LEGO creations. Enjoy! For the rest of you who don’t have Illustrator, all I can offer is the chance to see our collection, which is on permanent display in the front window of our studio.

Oxide_Bricks.zip [AI]

Like the shirt? You’re in luck: they’re for sale.

Months ago when we were working with Maren Hogan to figure out the most appropriate way to launch a blog for Oxide, she’d offhandedly mentioned that “top ten this” or “best five of that” blog posts often receive a disproportionately large amount of traffic. I remember thinking to myself that hell would freeze over before Oxide would be posting top ten lists on our news site. Well, only 22 posts in, and here we are. However, I have an excuse. I was asked by Joe Olsen to present on interface design at this year’s Heartland Developers Conference. Since I had already developed this content for my session, I thought it’d be worthwhile to share it with an even broader audience.

“Good design is obvious. Great design is transparent.”
— Joe Sparano

UI design, whether it’s for applications, web sites, or electoral ballots must be first and foremost about function, not style.

“If you have a great app that is easy and intuitive to use, it doesn’t really matter what it looks like. By the same token, a great-looking app with poor usability will generally not fly very far. Quality trumps aesthetics every time.”
— Warren Benedetto, Transfusion Media

What follows is a set of easy-to-follow rules for the design of layouts, creating highly user-friendly and efficient design. The purpose is simple: to maximize usability. There’s an exception to every rule, but when clarity is the goal, you should find these to be almost universally applicable.

This is not intended to be broad, conceptual guidelines (e.g. model-driven design, “design for people”, etc.) or detailed, hyper-specific instruction (e.g. “form labels work best above the field”, “place text six pixels below an icon”, etc.). Indeed, I hope it finds a useful space in between those two categories.

1. Use sentence case

Use sentence case wherever possible, including headlines, instructions, labels, and other text.

Lowercase letters are more legible than all capitol letters because they create a silhouette that is easier to recognize. Additionally, the unexpected capitol letters in title-case sentences can erroneously indicate importance where there is none.

2. Left align your type

Left align type in all cases, and left align groups of related objects whenever possible.

Left-aligned type is more legible than centered or right-aligned type, each of which forces the eye to search for the start of the next line. Western users read left-to-right, top-to-bottom; therefore, it creates unnecessary complexity when a reader cannot scan easily scan down the leftmost column.

3. Use one sans serif font

Stick to a single sans serif font (in regular, bold, and italic if necessary) whenever possible. If you must use a second font, employ it exclusively for a distinctly different type of content and do so consistently.

Different fonts require the eye to stop reading and adjust, because the change indicates that something different is being indicated. Additionally, while serif fonts (Times, Garamond, etc.) are good for large amounts of printed text, sans serif fonts (Helvetica, Arial, Verdana, Tahoma, etc.) are recommended for short amounts of reading, and for on-screen use.

4. Use icons functionally

Use icons only in those places where it’s important to add emphasis and clarity to an action or piece of information. When using icons, stick to symbology that is already readily understood or imagery that is singular in meaning.

Use of icons and other graphics can aid in efficiency and clarity. The problem with icons is that when they don’t work, they really don’t work. Inaccurate or unclear icons can create confusion, and overuse of icons can drastically lessen their impact when they might have been helpful.

5. Use color functionally

Use color and shading consistently; use a single color to indicate the same type of action or same kind of information. Always back up color with a secondary indicator for users who may not recognize color.

Color can add a great deal of usability to layouts if used sparingly and consistently. On the other hand, color can confuse the user if employed gratuitously or randomly. Color is most effective when used to draw attention to only the most important elements in an application (such as a dynamic alert), or consistently used to indicate a specific type of information (such as instructions). However, color cannot be relied on as the only way to communicate important information — many users have some form of color blindness.

6. Use clear, simple language

State instructions and options as simply as possible. Use terms that are already familiar to the audience instead of shorthand or “code developer speak”. Label buttons with actions instead of “yes” and “cancel”.

The verbiage displayed on screens is a primary source of information for your users. Poorly worded text or cryptic abbreviations and codes can alienate users — or worse yet, confuse them into the wrong action. The specific language used in any UI layout is at least as important as any other element on the screen.

7. Support process and navigation

Clearly communicate where a user is in each process, and provide feedback after each action is complete. Use tools such as breadcrumbs to identify location if there are multiple levels of depth. Avoid nested menus. Clearly identify what is clickable and what is not.

In order for users to find an application functional, they need to always have a sense of place. A good application should function like a well-designed museum: a clearly marked wayfinding system to help each visitor find the specific exhibit they came to see. Wayfinding in UI layouts can involve numbering steps in a process, showing breadcrumb trails, confirming when any action has been completed, and anything else that helps a user understand exactly where they’re at.

8. Indicate relative levels of importance

Use relative size, contrast, and position to help the user focus on what is most important. Determine the relative importance of elements on a screen, and then intentionally make the design reflect that hierarchy.

Layout and text sizes should support information hierarchy. A clear hierarchy of elements can help reduce the appearance of complexity even in circumstances where the tasks are quite complex. Size, contrast, and placement of each element should work together to create a clear understanding of the path a user should take.

9. Make use of white space

Use less white space between items to create a group of related items, use more white space to separate distinct groups or concepts. When possible, use white space instead of lines, borders, or frames.

White space can improve comprehension for the viewer by indicating the relationship between objects or groups of objects. Often times, there’s a lack of attention paid to the empty space in a UI layout. Default uniform spacing between all items on a screen can create confusion about where to focus, or which pieces are related.

10. When in doubt, leave it out

Simplify whenever possible, remembering that everything should have a reason for being. If you can’t determine an element’s explicit and required functionality, remove it from the layout.

Perceived complexity can be one of the greatest roadblocks for any interface or application. A good guidepost for UI design is Edward Tufte’s “least effective difference” concept: use the smallest visual distinction required in order to effectively communicate an idea. In the real world, this means emphasizing what’s important and scaling back (or removing) everything else.

“Everything should be made as simple as possible, but no simpler.”
— Albert Einstein

Justin Timberlake and Adam Torpin bobbleheads

We use Photoshop a lot. We use it for all kinds of things, and we know it pretty well. However, there are plenty of things that we don’t know about it. (Let’s be honest: no one knows everything about Photoshop.)

And yet, this is still kind of embarrassing.

Here it is: we just learned how to build images for the web. Well, we’ve always known how to rip JPEGs and PNGs, but until two weeks ago, we didn’t know how to make them look good.

The left half of the images in this post illustrate what our web images used to look like. See how the colors are washed out?

Black Knight pinball machine

Even though the images might look great in Photoshop, using Save for Web would ruin them. We first thought this was a color profile issue, but adding or removing the profile didn’t make a difference in every browser. We asked around and searched the web, but nothing seemed to solve this particular problem.

So, we just started super-saturating the image before saving it, knowing all along that we were only addressing the symptom.

Then, two weeks ago, we stumbled across the solution: Proof Colors. For the uninitiated, here’s the right way to build images for web:

1. Make sure your document is in RGB mode
Image > Mode > RGB Color

2. Remove the color profile (again, it’s not a guarantee anyway)
Edit > Assign Profile > Don’t Color Mange This Document

3. Turn on color-proofing
View > Proof Colors

4. Select a basic RGB proofing setting
View > Proof Setup > Monitor RGB

In short, the problem was that Photoshop was showing us colors that weren’t real. (We’re still not sure if we were using the wrong proofing setting or just not proofing at all.) Either way, when saving these mis-proofed files for web, the images weren’t changing at all — they were just being shown in their natural state for the first time. Now, we’re building images accurately from the start, and our PSDs look the same as our PNGs.

We’re happy to announce that today is the day that the Oxide News site starts giving you perks in addition to compelling looks behind the curtain. Hot off the presses at Lancer Label are the new Oxide Design Co. bumper stickers. These three-inch circles of brilliant design are the perfect accessory for your favorite mode of transportation.

But wait, there’s more! We’re giving these away for FREE to our loyal fans! Simply be one of the first 100 people to send a request to bumpersticker@oxidedesign.com and we’ll send you one with no cost or obligation. (Although we do think it’d be neat if you actually put it on something.) Just include your name and mailing address. We won’t sell your info, or send you junk mail in the future. Promise.

What are you waiting for? Get yours today!