Garen's Blog

This rocks. Useful. Simple. Beautiful. Clever. Makes you stop and smile.

"This is all your app is: a collection of tiny details.
~
This is still one of my favorite quotes about software. It’s something we internalized heavily when building Stack Overflow. Getting the details right is the difference between something that delights, and something customers tolerate."

http://www.codinghorror.com/blog/2012/05/this-is-all-your-app-is-a-collection-of-tiny-details.html

Avoid Joel Spolsky’s Icebergs by Sketching!

A coworker just sent me Joel Spolsky’s Iceberg Secret article, which is a great reminder about how people interpret visual designs / mocks / prototypes. Here’s my half sentence summary of the post: If the product looks like it’s done, people will think its pretty much done.

But we know that isn’t true. Just because a UI exists doesn’t mean anything under the hood exists. And that is why over the past few months I’ve taken to carrying around a sketchpad. Huh? Paper? Pens? What are they? I’ll tell you what they are: USEFUL.

Here’s why sketching interfaces / interaction designs floats my boat, at least for the first couple iterations:

1. It doesn’t look done. Because if it was done, it would be user-facing and on production.
2. It doesn’t look hard to change, so people don’t feel bad suggesting big (or small) changes.
3. People who you show it to can actually draw on top of it / make their own (they call this collaboration).
4. People don’t care about details / pixels, they care about the stuff they’re actually supposed to care about.
5. They’re quick, and your time is valuable.
6. You can still take a picture of a sketch and stick it inside a mock.
7. Paper doesn’t have a $350 licensing fee.
8. Street cred, and it helps people understand the idea of design as art.

Just yesterday I had a pretty loosely developed idea for a an interface element, so I printed out the existing high-fidelity visual mock and drew all over it. Then I took a picture and put the photo of the sketch in the presentation I gave. It worked awesome, because it encouraged discussing the intent instead of the details of execution.

Sketch away!

"Important Corollary One. If you show a nonprogrammer a screen which has a user interface that is 90% worse, they will think that the program is 90% worse.
~
Important Corollary Two. If you show a nonprogrammer a screen which has a user interface which is 100% beautiful, they will think the program is almost done."

Joel On Software’s Iceberg Principle

Yes, wallgreens, because most of your users online are close to 112 years old. Or maybe the strategy is to make it easy for the 112 year olds and hard for the 23 year olds.

American Airlines. Worst bottons ever (lower right corner). Like who would know to click there. Also the start over button is 4x bigger than the Go button. Also, Go is the least descriptive button name ever. No wonder no one books on site.

"From @nathansmith, a list of online wireframing tools: http://myBalsamiq.com http://Cacoo.com http://iRise.com http://LucidChart.com http://Pidoco.com http://ProtoShare.com"

https://twitter.com/#!/nathansmith/status/194854722115616768

Actually, the help text is wrong. The password must be longer than 6 characters, not should be. Please please please specify the difference between requirements and suggestions. Love, Garen

Dear LinkedIn, please note your UI is a bit sloppy. Love, Garen

"Before we dive in, though, it’s important to differentiate information surfacing from information hierarchy. Information surfacing is more specific to the visual presentation of information on a single page or in a single instance. While it doesn’t involve categorization, per sé, it does involve decisions: such as which fonts to make bolder or which elements to show on mouse rollover. It’s all about which information you want to “surface."

http://www.uxbooth.com/blog/information-surfacing-communicating-through-design/