Skip to main content or search

I Like Big Buttons and I Cannot Lie

Friday April 22, 2005 / 21 Comments

Over at YourTotalSite, I wrote about how nice it is to see big and bold designs. Since there was more thought put into this site than you might guess at first glance, I wanted to take some time and provide some insight into the thought process that led to this “design”.

Simple

I prefer to keep things simple with almost everything, and if I was going to make a personal site, that had to be the driver behind every decision. Everybody talks about two columns this, three columns that, etc. I don’t think it’s possible to get much simpler than one column, so that’s where it started.

Big

Nothing screams usability and simplicity louder than large clickable targets. Fitt’s Law says so. Well, it kind of says something like that. The headlines. The buttons. Commenter’s names. It’s all big. That’s two major decisions.

With regards to the commenters, I feel they are just as important, if not more important than the site itself. So their names are large and in charge. Conveniently enough, since everybody is providing great and interesting commentary that would make you want to visit their site, you can easily click on their large blue name and continue the exploration. One more obvious decision was taken care of with that.

Content First Only

This site really exists as an evenue for discussion of the ideas that float around in my head. Reading and commenting is almost all there is to do. And the reasoning there is to put the spotlight on everyone’s ideas. There’s an about page, but it was more of a supplemental afterthought. I figured people would at least want a little bit of knowledge who was running the site to make it more real. This wasn’t really a decision, it was more like a guiding principle.

Flow

I’m sure it seems a little odd to think of a blog as having a flow, but I felt that there was. I wanted people to show up to the site, read whatever was on the home page without any distractions, and then continue to explore or, preferably, interact.

Instead of navigation at the top of each article, it seemed that the best place to try and engage visitors would be right below the content. That way, when you get to the bottom of the article, you are offered some basic choices.

Comment is first and has the most distinctive button because it is the most important action, and frankly, that’s really what I’m really interested in. The next thought is that if you liked what you read, you might want to read more. Thus the second button is the Archives. Lastly, if you really like it, and you made it all the way here, you might be interested in grabbing my RSS feed. There is the button in traditional RSS/XML orange. This button arrangement was supposed to support my hopes for large scale interaction and interesting conversation.

Summary

The whole idea behind the site was to move the visual design out of the way and focus on the content and comments. One column. Very few graphics. Big and simple headlines.

I never in a million years would have guessed that I would have received all the positive feedback that I have. Thanks to everybody for all the encouragement.

Featured Stuff - Resources: Wireframes & Page Description Diagrames

Omnigraffle and Visio versions of the wireframe templates and stencils I use on all of my projects. There’s even a few examples included for good measure. More about Wireframe & Page Description Diagram Stencils and Templates

Looks like you were not joking when you asked if I was reading your mind on almost every decision you made :)

It’s wonderful to be able to read a designer’s comment on his work, and it takes some courage on the designer’s part ofc. ludo
Ironic – in recent years the trend has been to make things very, very small (eg. pixel fonts). This (big) makes more sense. Thumbs up. Adam Thody
I really love your site Garrett, the big headlines, the big buttons under the blog entry, the big commenter name and the big quote image…it’s really great. Not to mention the innovative single-column layout. Simplicity in all it’s glory and beauty. Justin Perkins
This post just got bookmarked. What you’re saying here is really the only logical way to approach the making of a “hardcore accessible” website. And it’s so beautiful too! :)
I always eat the largest meatballs first. Joakim Næss Lea
I agree with what Joakim said. I think this design is really simple but beautiful. I was doing around with all kinds of navigation, menues, and so on, but in the end, this kind of design is the best way to transmit content into your readers brains! Michael
You other brothers can’t deny
That when a site loads up with an itty bitty column
And a round thing in your face
You get sprung
Cause you notice that button was stuffed
Deep in the markup it’s wearing
I’m hooked and I can’t stop staring

Nice work :) Dan Phiffer
I’m really enjoying your posts Garret, big buttons add a fun, fresh, interactive feel to any site. The worst use of big buttons is Amazon Prime though. Yuck! Casey Gollan
I appreciate the clarity and simplicity. Very easy for the first read. But I’m all about convenience. And the one column approach doesn’t seem to fit my needs for repeat visits. “Above the fold” real estate is priceless. When all I get is your latest post and I have to scroll to get anything else…well, I’m not as happy.

If I’m not alone in this desire for a nav column “above the fold”...perhaps a simple “style switcher”. Default folks to 1 column. But allow nav for folks that want it.

Or just be bold and clean and beautiful just the way you are.

Thanks for listening. goodwitch
It’s very nice, but maybe a very lite “skip to recent posts” link near the top of the page, would be useful for the handheld medium too :)

but yes, big is brilliant SteveC
Thanks for the inspiration

Big is Good Isaac
Thanks for the feedback everybody.

Goodwitch – I’ve been a little frustrated with that myself trying to browse my own site, so I’ll figure out something to make it a little more convenient. I’m going to have a hard time not severely changing it to make those kind of accomodations. Rest assured though, it’s on my top 3 list of things to fix.

Steve C – That is an easy one that I should be able to knock out. The recent posts were a half-ass afterthought of a solution to Goodwitch’s problem. They should definitely have an easier way to access them. Thanks. Garrett
I think it should go without saying that I like it. Since I launched my blog a couple months back, each template has been single column. The second template actually looked alot like this… single column centered with big headlines. Then SVN changed to their new look so I changed mine.

I think it works very nice, and I dont think there is much you need to change. It’s you, you like it, and it works. Thats all that matters.

And no… I don’t think you ripped off SVN. Who cares if you drew inspiration from them. I don’t think they invented the big text/button thing anyway (as others have pointed out). Adam Michela
Great design, explanation as clear as the design itself. Andrew
Instead of navigation at the top of each article, it seemed that the best place to try and engage visitors would be right below the content.

This I discovered a good while ago and decided to try it on my blog. Content in the form of the latest post first and foremost as the dominant element and menu/sidebar type items below.

It works great and I’ve received a large number of compliments about the design being so “content-friendly”. Goal was to break out of the bog-standard blog-type layout. Joseph Wain
I totally agree with you! Andros
I like, up front and center and assuming that people are here to read you, not see other places to be redirected as the multi-columned sites do. I may have to work on a redesign… Jason
I really like the way you thought all this out and the decisions you took. It does take courage to opt for a design which is as simple and minimalist as this one, and I salute you for it. Marwen
This is so fresh!

I am really impressed on how this site looks and works. It is most innovative in graphic design and moreover most appropriate design for ages. Lasse
Really great! Simple, functional, full stop! But I have two things I’d like you to consider about. Remove the yellow balloon on the ‘Comment’ button and remove the gray ‘or’ and arrow. Reasons: you have a button that says ‘comment’ and then you add another way of saying the same thing only this time graphically. There’s no need repeating it. And gray arrow and ‘or’ is just not needed. You left enough space between ‘comment’ button and ‘view…’ so that space itself is ‘or’. The same thing with arrow. You don’t have to say what is already said with the navigation. Removing everything that’s not essential was the idea. Cheers! Marin
Marin – You’re right about removing everything to make it simpler. However, I wanted the site to have at least a little bit of personality. That area is the only place that I put a few little touches on to make it a little less monotonous. Garrett

It’s a sweet look- big, bold, but not stupid. Windows XP seems to patronize me, like “candy for the baby”, but your site is a quick symbol system for a social thread. Very well done, and inspirational. I’ll be passing this along to the graphic designer of my next project.

Jason Kunesh

Comments are closed for this entry.