Design

Design — 3 Comments
7
Apr 10

Design for Invisibility

I strive for one thing when I design an interface:

Invisibility

I don’t want my users thinking about the drop shadow or border on a button. I don’t want them saying “that is good use of whitespace.” I don’t want them to get distracted by the many colors I’ve used to indicate the status of something. I want them to get stuff done.

I want the interface to be so usable that the interface actually disappears. It’s only the person using it and what they’re working on. The interface and any technology in between becomes transparent.

Example Time

Apple's iPad

The Apple iPad is a perfect example of this. When Apple was designing the hardware, they could’ve put more than one button on the front. One for the volume, arrow keys, a keyboard button. But they didn’t.

The lack of buttons helps the iPad’s owners concentrate more on the actual screen: the place where they actually get stuff done. This is where the software subtley kicks in. Every gesture, from pinching to zoom to swiping to scroll, is intuitive. People who have never picked up an iPhone or iPad in their lives can figure it out in a few minutes.

And after those few minutes, the interface and the tablet completely disappear. The only thing that’s left is the person and what they’re doing.

Design / Shorties — 5 Comments
8
Mar 10

Better Helvetica Font Stack

Helvetica is easily my favorite font, but it has one downside: it looks like crap on Windows. The way Windows handles the rendering of Helvetica makes a great font almost unreadable at small sizes.

The problem is halfway solved by using the following CSS font stack:

font-family: Helvetica, Arial, sans-serif;

The problem is a fairly large percentage of PC users (including those who have installed any Adobe Creative Suite product) will still see Helvetica rendered horribly. I’m all for serving up a design that uses advanced CSS3 and leaving IE in the dust, but the main font being unreadable on the world’s largest operating system is unacceptable.

My Solution

I experimented with JavaScript that targets Windows computers and applies a certain class to the body of the page so I can target certain CSS styles and font stacks to a PC. I ended up with a mess of duplicated CSS code, and I don’t like to repeat myself. The best solution I came up with was the simplest one.

Use this font stack:

font-family: "Helvetica Neue", Arial, sans-serif;

Here’s what font will be displayed on each operating system:

Chart describing what percentage of PC users will see Helvetica Neue instead of Arial (1.4%)

Font percentages thanks to Codestyle.org

Macs will display an improved version of Helvetica and the small percentage that doesn’t have that will see Arial, which looks almost the same when rendered on an Apple.

A small percentage of Windows users will see Helvetica Neue and the rest will see Arial, which is good enough in my book. I like Helvetica better, but Arial isn’t the end of the world.

By narrowing down the font stack to target a specific variant of Helvetica font mostly on Macs, I am able to use Helvetica in my designs without worrying about how the font renders (or doesn’t render) on a PC.

Design — No Comments
24
Feb 10

Don’t Startle the Users

UI Guideline: If your users aren’t expecting something to pop up when they’re moving their mouse around, try not to scare them.

Inc magazine’s “Share” button is the perfect example of what not to do. At the bottom of an article, accidentally mousing over the button will make a [useless] box pop up instantly. This should be delayed at least 2/10s of a second, more or less depending on how technical and quick your audience is with a mouse. This can be accomplished with a JavaScript delay.

The problem with the share button goes beyond that. If the button is near the bottom of my physical screen, the box will pop up over the next page link, effectively blocking me from reading the rest of the article and trying to get me to pimp their article.

But maybe that’s what Inc wanted to happen…

Design — 10 Comments
10
Feb 10

De-emphasize User Interface Controls

Help people focus on the content by designing your application UI as a subtle frame for the information they’re interested in. Downplay application controls by minimizing their number and prominence. Consider creating custom controls that subtly integrate with your application’s graphical style. In this way, controls are discoverable, but not too conspicuous.

— iPad Human Interface Guidelines

Every gradient you add to your interface makes it harder to use. The same goes for every drop shadow, rounded corner, background color, and button style. Don’t just add them because they look pretty.

This guideline should apply to every interface you work on. Design your interface to be as invisible as possible. Your users don’t want a sexy button style; they want the action that button performs. The action that hides behind that button is more important than how the button looks. Your content is what they want; not the text-shadow or background color.

Drop shadows, rounded corners, and gradients should exist to subtly increase the attractiveness of your interface, which can make it easier to use. A faint drop shadow under a button can subconsciously drive your user’s eyes to the apparently 3D button. Use these sparingly. Every button on your page shouldn’t be competing for the same attention. Emphasizing everything means nothing gets emphasized.

Pick which action or content is most important and emphasize only that, and do so with subtle effects.

Design — 1 Comment
6
Jan 10

Letterpress

Over the past few weeks, I made my first Tumblr theme. It was an experiment in two ways:

  1. It was the first time I used HTML5 in production.
  2. It was also the first time I used the Tumblr theme language.

I’m used to WordPress and learning how Tumblr does it provided a good segway into learning ExpressionEngine, my next challenge.

HTML5

HTML5 has been an absolute pleasure to use. It’s the first HTML spec that has made complete sense to me. The addition of a few new tags (<header>, <nav>, <time>, etc) make my markup more semantic and useful to both humans and search engine robots. Not to mention the new doctype – <!doctype html> – is as simple as it will ever get.

Using HTML5 has been so great that I will be developing in that language from now on, mostly thanks to Modernizr for backwards compatibility.

Letterpress

Letterpress is the Tumblr theme I designed and coded. It was inspired by a whole array of letterpress prints, but most of all Dan Cederholm’s business card. Over 500 people are using it so far and it is growing steadily at about 30 more a day. That is a modestly popular theme by Tumblr’s standards, but I’m happy with it as my debut effort.

Let me know what you think of it. See it action on my Tumblr blog.

Design — 13 Comments
18
Dec 09

Cross Browser Checklist

Cross browser testing can be a pain for a web designer, so I tried to make it slightly more enjoyable with a simple checklist. These are all the things I personally check when coding and designing a site.

Download the cross browser checklist [PDF]

Is there anything you would add to it?

Updated 5/11/10: Unceremoniously removed IE6 testing and replaced it with a way cooler option (the iPad).

Design / Shorties — No Comments
12
Dec 09

Spaced Presentation

Inspired by an article by Jack Cheng, I decided to try something a little different during my semester at university. I typed up my notes for every class the evening after the class was over. That way, I would be exposed to the material once in the lecture, forget about it gradually throughout the day, and be reminded of it a couple hours later. This technique is called spaced presentation. By spreading out my learning, my brain retains more information for a longer period of time.

So how has it worked for me? It’s finals time and I’m not stressed out at all, which can seem impossible when you’re up against 5 or 6 tests that are collectively worth 30% of your entire grade. The pressure can be all-consuming, especially when Red Bull is pumping through your veins and you’re stuck at the library at 1am. What I’ve done by typing up my notes is invest in studying ahead of time rather than cramming the night before my test. It helps me perform better in the class and remember more useful info from the class.

Don’t believe me? Try to remember what you crammed for your first semester at college. I definitely don’t remember anything because my brain was on overload. I remembered it for the test and immediately pushed it out.

Work on your passion every day

Spaced presentation is also something I’m experimenting with for making myself a better designer. Every day, I’m reading two of the 100 design principles from a book called Universal Design Principles. It only takes about 15 minutes so I can easily fit it into my schedule.

I even set myself a reminder in my todo list program so I don't forget.

I even set myself a reminder in my todo list program, Things, so I never forget.

I’m at principle #50 right now and I’m going to stop after I’ve gone through the book two or three times. I don’t want to read these principles and forget it. These are something I want to subconsciously think about when designing so I’m working on making that happen a little bit every day so my brain doesn’t get overloaded.

What can you do?

What is one thing you’d like to know more about? It could be anything; design, writing, jewelry making, wood carving or your required bio stats class. Try working on it for 20 minutes every single day (or maybe 45 minutes three times a week). Read an article or do a few practice problems. You’re not only going over the material repetitively, but you’re doing it in such a way that your brain can handle all of the information without overflowing with knowledge.

Design — No Comments
14
Nov 09

Zone Out Button

I listen to podcasts (Boagworld and Rails Envy to name a few) on my way to school every day. I listen to them when I’m trying to zone out of the mind-numbing traffic. The interesting content makes me think more about web development and less about the 94 Honda that just cut me off (does he really think he’s going to get there any faster?!)

Sometimes my brain wanders off. I hear an interesting statement and think about that for a minute or so. I learn a lot thinking through problems on my own, but the podcast doesn’t stop when my brain stops listening.

Zone Out Button

I was delighted to find this little interface tidbit on Apple’s iPod Touch:

zone-out-button

Tapping this button will rewind the podcast 30 seconds, the usual amount of time for one of my “zone out” sessions. This is a common activity and this button is proving useful time and time again.

Here's the affectionately named zone out button in context of the play controls.

Here's the affectionately named zone out button in context of the play controls.

This button made me think about what common action in my interfaces can be contained in one button. One button, one click, one tap of the finger is such a simple activity and will be infinitely usable if the user constantly does this task or set of actions.

You shouldn’t feel the need to quarantine every possible action into a single button, but think of a few task your users perform constantly and ask how you can automate that process.

Capistrano

Another example of this “single button” concept is Capistrano. It is a command line tool (meaning no visual interface at all) that allows you deploy a new version of your site to a web server by entering one command:

$ cap deploy

Without this easy-to-memorize command, I would have to manually copy the latest revision to my site from my source control repository, upload it to my server and run tests to make sure I didn’t break anything. Capistrano does all that for me. Automatically. With one command.

Capistrano and the zone out button allow me to worry less about stuff I do all the time and concentrate on the thing that actually produces value: learning from the podcast and making my sites better.

Ask yourself

  • What can I do to make a few really common tasks easier on all of my users?
  • How can I take some of the monotonous burden of my interface off of their shoulders and outsource a common set of actions to a single button?
Design — 1 Comment
2
Nov 09

Smashing Magazine Redesign

Smashing Magazine recently redesigned their entire site. They produce great content, but this redesign results in a horrible user experience.

For a site that has many articles about usability and user experience, their site isn’t usable at all. People go to their site to read interesting and unique content, but their recent design work takes a step in the exact opposite direction.

Overwhelming Advertisements

smashing-homepage

Their homepage looks pretty but focuses very little on their unique content. No focus on content for a blog = bad user experience. I’m here to look at your articles, not your ads. I understand having ads there to generate revenue for your hard work. I’m not disappointed in the ads existence but rather I’m disappointed by the sheer number of ads.

smashing-article

Their individual article pages are even worse! Fullscreen on my MacBook and this is how much content is displayed. Let me highlight the parts an average reader of Smashing Magazine would be interested in.

smashing-article-highlighted

My rough calculations put the useful content as 89,000 pixels out of a total of 823,880 pixels. That is 11% of my entire screen! It is unacceptable to waste 89% of your reader’s screen on unnecessary elements. Waste 20% at the most with advertisements and anything not absolutely critical to the usability of your site.

You might be able to count the navigation and search as useful parts. That would bring the total up to 193,000 useful pixels. Still a paltry 23% of the screen is useful on an article page.

Buggy Browsers

Not supporting IE6 is okay in my book, but you shouldn’t make their experience completely unusable. Instead of worrying about support for the dying browser, serve up an unstyled version of the site instead. The people on IE6 visiting Smashing Magazine, a blog devoted to pushing the boundaries of the internet, probably have no choice to upgrade. They are the ones browsing Smashing Mag during their lunch break at XYZ Corporation dreaming of greener pastures.

Safari Bug Hunting

buggy-browser

If you’re going to push the boundaries what is capable on websites, make sure your own website displays correctly in modern browsers. Above is a screenshot of my main browser, Safari 4.0.3. There is an error in the CSS that makes it almost impossible to click on the “read more” links.

Not All Bad

good-navigation

The new navigation is great. It’s clear, simple and padded. The category dropdown is easy to use and saves a lot of screen space. This is the best improvement to the new Smashing Magazine.

smashing-footer-illustration

This illustration on the footer gives me a sneak peek at what the guys and girls behind Smashing Mag look like. This helps to make it more personable, memorable and fun.

Overall

The redesign of Smashing Mag is 2 steps forward and 8 steps backward. Their following (170,000+ people!) would benefit more from an increased amount of content on the page (with necessary whitespace) and not an increase in the ad space, especially on the article page.

Will I stop reading their articles and writing for them? Absolutely not. Their authors put out some great content and it’s a shame that the unique content wasn’t the focus of the new design. I’ll be comfortably reading Smashing Mag from my RSS reader from now on.

Design — No Comments
27
Oct 09

Instapaper on Kindle

Update: The problem isn’t on Instapaper’s end. Marco already has a similar solution to what I suggested.

“Amazon doesn’t reliably deliver my messages to customers’ Kindles. For some people, it works great. For others, I trigger some filter after a while and Amazon randomly blocks Instapaper emails from hitting their accounts unless they call Amazon’s customer service and have them remove the block.”

That’s a shame because Instapaper would be that much more useful with consistent support from Amazon’s PDF conversion service.


I am constantly reading books, but they are mostly technical ones that I like to highlight and markup the margins. Amazon’s Kindle wouldn’t do me much good there. I read tons of blog articles, usually 20 at a time. This is where the combination of Instapaper and Kindle can become a game changer.

There is one thing that will immediately get me to shell out $259 for the Kindle: Instapaper automatically syncing with the Kindle. Instapaper has become a part of my daily routine. I check my feeds throughout the day, open any articles I want to read and save them to my Instapaper account. After I’m done work for the day, I sit on my couch and read the articles from Instapaper on my MacBook. Reading on a backlit screen isn’t ideal because it strains my eyes (and I’m a pretty young lad). I’ve tried reading on my iPhone too, but that didn’t help much either.

Possible User Experience for InstaKindle1

Not much would change about the way I save my articles. What would change is how I read them. Every night, my unread articles on Instapaper would be quietly converted to a single PDF document and emailed to my special Kindle address.2 It would arrive at my virtual doorstep at 6am and be ready for consumption during my morning tea. It would imitate the experience of a morning newspaper at a much lower cost. It would be targeted to exactly the articles I want to read because I’m the one that picked them. It would be comparably easy to read because of the Kindle’s E Ink.

Having Instapaper and the Kindle collaborate to bring me my ultra-targeted newspaper subscription in the morning would be the ideal experience for me.

  1. I just made that name up. Feel free to use it, although Amazon might not like that. [↩]
  2. Marco Arment already has a great start to this functionality. [↩]
Design — 1 Comment
26
Oct 09

Be Inspired, Don’t Copy

Coming up with new design ideas is tough work, that’s why designers get paid the big bucks. If you want to be a reputable designer, the absolute last thing you should do is copy someone else’s work. Copying has no benefits.

  • You don’t learn the thought process behind the design.
  • You don’t learn the reasons why a designer made the button a certain way.
  • You don’t know why she put the logo on the left side or why she emphasizes a certain header over another one.
  • Copying is a way for lazy designers to cop out.

All you see in a finished design is that it looks cool. You want that appeal on your page but don’t want to put in the work behind it.

Be Inspired Instead

Seek out posts about why designs ended up as they did. 37signal’s Design Explorations are a valuable learning tool. As is Next Update by Garrett Dimon. Tim Van Damme has inspired quite a few people to make a personal “business card” website like his own.1 He even inspired me. Unfortunately, many people felt that it was okay to copy directly off his design. Tim worked hard to make his design useful and beautiful, but the lazy designers spent no time and effort and just copy and pasted his source code.

Do you want to be a lazy designer or a designer who learns from and is inspired by others?

Latest Offender

I came across one of these lazy designers when Tim tweeted about this fellow’s latest “design.” He thought it was okay to rip off the design of the Ballpark marketing page. See if you can spot the similarities:

bad-designergood_designer

The designer even has the stones to photoshop in his web address into the screenshot and change it to his product name in all of the testimonials.

Copying directly from one of your competitors is not a good way to get your business started on the right foot.

What’s Okay To Do

Be inspired. Seeing a particular element you like and modifying it to fit your site is okay. For example, say you like how atebits has an inset look to its dividers. Look at the code that makes that happen and learn from it. Take what you learned over to your site and change it to fit your design. It might look better with a larger shadow, a darker color, or maybe if you completely change it to green.

Side note: Don’t forget it’s possible to be inspired by something outside your normal line of work. Try going to the park, walking through a crowded street, or exploring what’s popular on Tumblr and Flickr. Something might catch your eye.

  1. See his Hall of Fame [↩]
Design — No Comments
25
Oct 09

Bloomframe

Bloomframe window/balcony

The Bloomframe is a window that turns into a balcony on demand with motorized controls. All you have to do to convert your window into a glass-paneled balcony is hit a button on a remote.

This is an incredible engineering feat and I can’t wait to see this in a real life application. The company started production as of September 2009.

It would be great for people in downtown penthouses because it would allow you to get outside while savings a lot of space and hassle. If it starts to rain, just close it up and enjoy the storm.

Design — 3 Comments
23
Oct 09

Do Blogs Need Your Email When You Comment?

Short Answer: No.

Long Answer: The point of having an email field in a comment form is to have a way for the site owner to contact the commenter. I do not believe that field is necessary and adds unnecessary complexity to your form. Complexity discourages people from commenting and in turn weakens your blog community.

Real life example: Imagine you are giving a keynote. After your talk, you strike up conversations with audience members. They compliment you, ask you questions, and suggest alternatives to what you said. All of these are real world comments, but you’re not asking for any email address. At the most, you’ll ask their name to keep in touch.

That same practice should carry over to the blog world. People’s names and comments are most important to the discussion. If the person wants to be contacted, they can leave a link to one of their sites.

Spencer Fry eliminating one field form his comment form encourages readers to leave a comment.

Spencer Fry eliminating one field form his comment form encourages readers to leave a comment.

Always keep your fields down to the bare minimum. Only include basic fundamental fields to ease the burden on your users.

Update: What’s worse than asking for your email when you want to comment?

johnnyholland.org

Answer: Having an email field and a CAPTCHA. This is from a user experience blog nonetheless, the last place I'd expect to see one.