Thoughts on Engineering, Photography, and Design.

Every so many years I do a redesign of my personal site, rpheath.com. Things go stale, technically, so I clean that up and typically put a fresh coat of paint on while I’m at it. Given that I’m usually working to satisfy other people, it’s nice to work on something where I’m the only stakeholder. Ahh, creative freedom.

Something I wanted to bring back to this redesign was a bit of “fun”. Remember CSS Zen Garden? The idea was all about showcasing the power of CSS and how it could transform the same HTML into completely different designs. It got me thinking… Why does my personal site need to adhere to the same design on every page? After all, it’s not a product, it doesn’t have “users”. So that’s what I did. Each page represents its content in its own way.

I don’t know how long I’ll live with these changes, but as of today, I’m digging it. Here’s a before/after glimpse of how it turned out, but you can browse for yourself at rpheath.com.

BEFORE

AFTER

Comments are off, but if you really want to share your thoughts, try ryan@rpheath.com.

This is something I’ve argued at length throughout my career, and the last paragraph sums my feelings up nicely:

Users win when we prioritize building exceptional experiences that look great and function great; that solve real problems with finesse, grace, and delight. The more we fracture all this, the more we fall short of exceptional.

Glass is a stunning application built for photographers. As soon as I found it, I knew it was what I’d been looking for. There are only a couple of brand new, subscription-based services that I’ve immediately signed up with, but Glass was one of them. Zero hesitation, zero regrets.

And as someone who’s into product development (if you care about that sort of thing), I can confirm for you that it has a brilliant design with an even better UX. It’s a pleasure to use and is currently my favorite app. Oh, and it’s pretty great in a browser, too.

Aside from it being a fantastic application on its own merit, the people behind it seem just as fantastic. I really love their creativity, ideas, blog posts, approach to feedback, and even their Twitter account — I’m happy to support them.

Since Instagram is no longer a good place for photographers these days (as it’s all about video, stories, and “the algorithm”), it’s a wonderful time to try something new. There are lots of alternatives out there, but for me, the clear winner is Glass, hands down.

Highly recommended.

The subtitle says it all… Excellent article, and very timely, as our team is currently focusing purely on performance right now.

Having a consistent icon set is a big deal in product design. I stumbled upon this one, which offers close to 900 free vector icons.

Yet another good talk from Cameron Moll.

I spotted this graphic while reading an article about Awkward UI, and found it to be a wonderfully simple reminder (and checklist?) when designing new screens.

User-friendly software is a goal for anyone who builds or designs it. It’s a very tough challenge. Code, best practices, and browser-restrictions all get in the way, clouding up the human-factor.

For example, let’s look at user-restrictions. It’s easy, in code, to make a decision firm. Let’s say Plan A offers 5 users and Plan B offers 10 users. The logic to add a new user might go through a path like this:

if (plan == A && users.count == 5) {
  # too bad, you're maxed out!
}

That’s what the software says. Clear as day, hard and firm. There are no considerations beyond that. But what if someone needs only 6 users? Just ONE more? Is the best solution forcing them to upgrade to Plan B? Maybe it is, but I’m not so sure.

What if that same conditional could be more like:

if (plan == A && users.count == "close enough") {
  # go for it, we want to make you happy!
}

Is it better to have a happy customer with 6 users on a 5 user plan than a frustrated customer with 5 users on a 5 user plan? Forcing that customer to make a decision bumps up the chances they will leave. And if they don’t leave, odds are they’re hovering around the 5 user limit “making it work” to avoid the upgrade. So now they’re inconvenienced by the product, and that might leave a bad taste.

I’m aware that a line has to be drawn somewhere. Allowing 20 users on Plan A is surely too much, but paying extra attention to the edges is an interesting thought. If this were done manually, human-to-human, a real person might say “it’s no big deal, you can have one more user” in an effort to keep the person happy. Why shouldn’t software do the same thing?

Generally, rules are rules, and so it’s expected (even by customers) that they live within their plan restrictions. But wow, what an opportunity to go the extra mile and make a customer that much happier!

User-restrictions are just one of many areas where we can consider being less robotic. So, yeah, humanizing software. That’s what I’ve been thinking about lately. We’ll see where it takes me.

They are road signs for your daily rituals — the instantly recognized symbols and icons you press, click and ogle countless times a day when you interact with your computer. But how much do you know about their origins?

Scorekeeper is a minimalistic scorekeeping app. It has a very thoughtful UI that uses icons, color, sound, and just the right amount of animation. I love how the reordering happens a few seconds after you update the score so you can change a few at a time. Even if you don’t have a user for it, watch the video.

All images posted to Instagram must be a squared crop before they can be uploaded. I personally think this was a brilliant move. Here’s why:

• Squares are proportionally correct. There are no misalignments or elongated edges.
• Forcing a user to choose a cropped square has somewhat of a Dribbble effect in that it demands the most interesting section of the picture.
• Squares are predictable in terms of designing an interface. It’d be hard to argue that against the fact that better designs can be built around images that are all of the same aspect ratio. Guesswork for unknown shapes creep into design decisions early and can look clunky more often than not, and when you’re dealing with something that is largely for visual purpose (i.e. photo galleries), that matters.
• Easier implementation has to be mentioned, since there’s no post-processing needed to crop images into squares.
• There are no surprises: what goes in is what comes out. The image proportions remain exactly as they were prior to upload.

I don’t know if those things were considered beforehand or if it was a side-effect of some other reasoning, but I do know that I’m glad Instagram only supports squared images. It’s one of the reasons I keep coming back.

Design isn’t about making something pretty, although that’s part of it. Design is largely about function. It’s about making an interface work so well that the user never stumbles. Much of a good UI depends on a notion called visual hierarchy.

Visual hierarchy, while it may sound technical, is really a pretty simple concept. By using color, contrast, texture, shape, position, orientation, and size, one can organize elements on a page so that users gets a sense of visual importance. For example, look at this graphic:

Where did your eyes go? Maybe to the first circle, since we naturally read from left to write. Or maybe somewhere in the middle. The point is, nothing guided your eyes because all of the circles are the same.

If you make everything bold, nothing is bold.

Let’s make a slight change to that graphic:

Now where did your eyes go? My guess is the first circle. With only shading, I was able to direct your eye to the circle that, for whatever reason, I believed to be the most important. This is visual hierarchy.

But we as designers don’t draw pictures of circles. Let’s talk about visual hierarchy in web design and show some real-world examples.

Note: when examining visual hierarchy, I prefer to use the squint technique (literally, I squint my eyes until the page becomes out of focus and blurred). Since I can’t blur your eyes for you, I’ll blur the screenshots instead. There’s no reason we need to see every pixel when organizing a page; in fact, the details get in the way at this stage.

A Poor Example

Ahh the Drudge Report. Much to my surprise, there are legitimate, successful designers who would argue that the Drudge Report is a well-designed site since it has “stood the test of time” (lame reasoning if you ask me). Needless to say, I’m not in that camp.

Using the Drudge Report as the guinea pig, let’s look at a poor example of visual hierarchy:

The screenshot above has 2 supporting graphics, 3 advertisements, 2 search/date filter forms, several sections, and a number of links that have different meanings. Breaking this down, the identifiable problems:

• At a glance, you can’t tell the difference between the advertisements and the supporting article graphics.
• There’s no easy way to detect where the search/date filter forms are located (hint: lower left corner).
• All of the links (and sections) have the exact same treatment, but they don’t all have the exact same purpose (news articles, columnists, and content feeds).

Overall this site does a poor job of guiding the user through visual importance. Now let’s look at something I recently worked on.

A Better Example

The situation: in an app I’m working on there is a bit of setup required before the user can dive into the core of what the app does. Since setup instructions are generally a barrier-to-entry, the goal was to make it as easy as possible for the user to get in and out, knowing the exact steps they needed to take.

First, I’ll show where I started: the screen with very little attempt to organize the page. Then I’ll show how I used visual hierarchy and the difference that it made. Here’s the undressed version:

So what’s most important? I bet you don’t really know. Everything seems to be the same. You can see that there is a list, but it doesn’t really indicate that these are steps the user needs to take. It could be a grocery list for all we know (albeit, a wordy one).

Without introducing any color (yet), here’s the same page and content, only this time with an attempt to guide the user using different levels of visual importance:

Let’s go through the changes. The numbers on the graphic correspond to the numbers in the list below.

1. Increased header size to be clear about the item being setup. It should be crystal clear as to what exactly is being setup.
2. This line needs to speak to the user before anything else, because for experienced users, it could potentially remove the need for the setup instructions altogether. So I increased the font a bit and separated it from the content below using a border-bottom (look closely).
3. Using nothing but space, I was able to disconnect the upper and lower content sections even more, essentially saying “Read This First”.
4. This title sets up the purpose of the content below it, so I bumped up the font size and made it bold. Subtext next to it isn’t quite as important, so it’s dimmed a bit (but by drawing attention to the main text, the right text is inherently read, but without the additional noise).
5. This is a menu of options where each option contains its own set of instructions–it’s incredibly important that the user knows which option they’re on, but above that it’s to illustrate that their are options. Also, this menu was to act as a header to ground the instruction set below it.
6. Each “step” has a title and a instruction. By bumping up the section title I’ve essentially scoped what the content below it is explaining. It’s important that the user could scan the list just to get an idea of what was involved, then dive into the details. The instruction paragraph was also given more space above/below and increased line-height to help with readability.
7. These numbers should feel more like “steps” than a list. By squaring them up, increasing the size, and giving some visual depth (contrast), I was able to achieve that. This no longer feels like a wordy grocery list.
8. The support help/text is important, but it should not get equal attention as the instructions themselves. So by moving it down the page, decreasing the size/line-height, and softening the color, I am basically saying “this is here if you want it, but it’s not quite as important as the rest”. In the rare case that a user needs more help, he/she will be explicitly scanning the page for help information, so it’s less of a concern to make it stand out–it will undoubtedly be found if need be.

When positioning elements on a page I like to work in gray tones first, like the screenshot above. You can do a lot with just contrast and sometimes colors get in the way early on. However, once you achieve a solid foundation on position and weight, color can take the visual importance even further. Take a look at the same screenshot, but in color:

The end result is much better than where I started. It’s now (hopefully) clear to the user that they have a step-by-step process to go through, and (hopefully) each step is clearly defined and explained.

Conclusion

Visual hierarchy is just another tool in the tool-belt, but I believe it’s among the most important. If nothing else, hopefully this helps other designers by at least reminding them to start with the function and flow before the fancy graphics. Nail down the purpose of each page element, and then dress it up.

Happy designing!