I like things.

Sometimes, that makes me feel materialistic. The thing is, there’s a difference between being materialistic and finding value in very particular ‘upgrades’. Upgrades to things I interact with on a day-to-day basis. Upgrades that I perceive as improving my life, and others perceive as frivolous nonsense that burns money like a bit of fire.

A good example would be my Breville Tea Maker. A few months back I sprinted over to the mall late one evening, the same day I found out such a thing existed. The Tea Maker improved upon a small process in my day-to-day that I wasn’t happy with: brewing [good, loose leaf] tea. I’m not a big coffee drinker before I leave the house in the morning, that’s tea’s domain in my day, and for a long time I’ve envied the plethora of streamlined processes that have long been available to consumers who want delicious cups of stimulant brewed before they’re out of the sheets in the morning. As it turns out, tea is a bit harder to automate given the steeping process, so Breville solved it and I ate it right up. No regrets, despite the price tag.

Another – the other day, I made a trip to the closest Home Depot and picked up about 18 of these bad boys. Their purpose? Stop cabinet door slamming with a fantastically ingenious little mechanism attached to existing hinges. They’re pricey, but I still remember the utter joy I felt the first time I experienced one of these things in a family friend’s newly renovated kitchen. Let go of the door when the hinge picks it up, and watch it ease its way shut. The same sort of thing exists for toilet seats, and I want one of those next. I rent an apartment, and I’m uninstalling all of these and bringing them with me next time I move. Again, utterly smitten with this refinement.

I could go on and on, and so could Ben Brooks at The Books Review – who, in this short post, I’m agreeing with the sentiments of in the fullest sense possible.

In short,

“What I have found is that by doing this I am incrementally making my life more enjoyable each and everyday. It really is the little things that count, because if you improve enough of the little things (and the big things don’t suck) then pretty soon you are going to have a lot of great things going for you and thus you will be happier.”

From The Brooks Review: The Little Things

Regarding ‘secret’ UI components

I want to jump back a couple years to something Loren Brichter said in reference to his pull-to-refresh UI and, specifically, the swipe-to-reveal tweet actions. This remains one of my most consistently referred to explanations when it comes to ultra-functional UI.

Now, I think you can split gestures into two categories. One is of the pull-down-to-refresh kind. These are gestures that are discoverable and explanatory. The other kind of gestures are like tapping-the-status-bar-to-scroll-to-the-top, or swipe-to-delete (or swipe-to-reply in Tweetie). These gestures you won’t discover on your own except by accident. These are not discoverable, and they are not explanatory.

This second class of gestures can exist (in my opinion) because they are not the only way to accomplish a goal. In the case of tapping the status bar, users already know how to scroll to the top manually. It’s slower, but it’s possible. In the case of swipe to delete, users already know they can tap on a message and then tap the trash button. So knowing the gesture isn’t necessary.

So when you’re inventing new gestures, it’s important to think about whether the gesture is required to use the app. If it’s the only way to accomplish a goal, you better be sure it’s discoverable and explanatory without needing to read a manual. If it’s the other kind of gesture, go nuts!

From Twitter Reloaded: an interview with Loren Brichter

Forms: Inputs with initial values acting as labels and HTML5′s placeholder attribute

I’ll be brief. A few years ago, a trend started popping up whereby the label next to a text input (at the time most commonly search fields) would be removed, and instead the default value of the field would be its label. On focus, the input value would be blanked. The result was a cleaner look and really no loss in usability (as well as no loss in accessibility so long as the developer takes care to put the label element in the DOM, but hide it).

The behaviour is common practice now, not only for single-field forms like search inputs, but entire ten-plus field information gathering forms. This is where the problem arrises. If you’re like me and tab between inputs (‘fill in field, hit tab, fill in next field, hit tab, etc), it’s very easy to forget that you need to read the value (acting as a label) in the next field before tabbing into it – as soon as it has focus, you can no longer tell what you’re supposed to be inputting.

The placeholder attribute should not be used as an alternative to a label. –HTML5 Draft Spec

Even more recently, the HTML5 spec introduced the placeholder element for inputs. Though the HTML5 spec advises against using a placeholder in place of a label element, it seems common practice to do so, and it tempting even for myself. This would be fine and dandy if it weren’t for the specific implementation of placeholder‘s behaviour in all major browsers: Exactly the same as we saw above, clear on focus. It leads to precisely the same problem as before, but this time natively instead of using a bit of JavaScript.

I’ve created what I believe is the ideal alternate behaviour multiple times in the past with a tiny bit of JavaScript and CSS:

  • Position the label for an input directly below it with the same borders/padding so that the text lines up perfectly with what is typed in the input
  • Using JavaScript, bind a function on change for the input that checks to see what the value of the input is (after each keystroke), and if it’s anything other than blank, hide the label. If the label is hidden and the input is blank on change (you’ve deleted the contents of the input), show the label.

I’m not completely sure whether the necessary change here is in the behaviour/intended use case of the placeholder attribute or in the code developers are writing in conjunction with their forms. Since it’s highly unlikely the HTML5 spec will dictate such a change at this point, I think the onus is on developers to be more careful with the aesthetics/usability line. If you implement the above properly and with care, you’ll have an accessible form that saves clutter and uses no additional markup.

Making ‘Recent Items’ useful: Folder inclusion

I almost never use OS X’s global Recent Items list. About half the times I remember it exists, it’s because i just accidentally closed a Finder window and want it back – then I remember folders is the only thing the Recent Items list doesn’t include.

My predictable solution:

In the interest of blowing some minds

I took a moment to analyze something I encounter on an hourly basis a while ago. Ever since the moment of realization that followed, I’ve been filling others in every now and then, and I have yet to find somebody who isn’t totally enlightened after the big reveal (@verneho almost BSOD’d).

Perhaps I’m ramping this up too much. Recognize this bad boy? Find yourself constantly checking the symbols and their meanings when you’re trying to decrypt a keyboard shortcut for use? Guys, it depicts a choice. A fork, a switch. The name of the key is ‘option’ (or ‘alt’, which is also accurately represented, alternative).

See it? Assuming this is your first realization, I’ll allow you to draw your own conclusions about the other symbols used for control and command.

Have a great weekend!

Thought: Apple’s iMac rear-access ports

I think the little game or feel-around that one must play in order to plug a pair of headphones into their iMac is Apple’s cruel little joke on its loving customers.

Well, not really, but every time I need to plug something into that 3.5mm jack on the back of my iMac at the office, I can’t help but think about why it’s so difficult. I’ve pondered putting that port on the side, on the bottom, anything that helps access – but really, repositioning offers no ideal or substantially improved alternative.

While the same issue is present with the USB ports in the same area, they’re much more defined and can be felt out with relative ease. the issue with the 3.5mm port is that it’s so small, so challenging to accurately locate with your index finger, blindly. So I propose a simple solution (the best kind!). Recess it in a small (approx 1cm in diameter) dimple . Around the size of the tip of an average finger. This does two things: Makes the port easier to find blindly, and provides a very small targeting assist – the plug would slide in with relative ease even if aimed a little bit off.

How’s that, Steve?

OS X 10.7 Lion First Impressions

A few screenshots of OS X 10.7 Lion popped up today, and the interface depicted has me pondering.

ALL images in this post are credited to

Finder has gone the way of iTunes, totally grayscale. I get the decision to some extent, unifying everything, but this oversteps design boundaries – it’s excessively sterile. I intentionally keep all installs of OS X I control on the original OS theme (with the ‘traffic light’ window controls), because I find Graphite (which effectively grayscales those icons) borderline depressing. I think a grayscaled Finder should come with the selection of the grayscale OS theme, and otherwise they should remain colored.

Also worth noting is the new button style for the finder views. This change appears in multiple screenshots of Lion. Clearly it’s very resemblant of a touch (iOS) interface, but the connect isn’t there for me – mice, even trackpads, are not on the same level as touchscreen devices. There’s no tactile simulation, which a slideable element implies. Why are they trying to meddle with this before they’re ready to go touchscreen in any sense with OS X? Additionally, I think the UI feature makes zero sense on menus with more than two items. This is a toggle-specific interaction as far as I’m concerned – true/false, on/off, enabled/disabled. Not list/icons/details/coverflow.

Also, why the bloody crap is Coverflow still in Finder?

I’ve been using Letterbox for well over a year, perhaps two. All it effectively does is change the orientation in Apple Mail from displaying message previews above the mail list to beside it, to its right. This allows for greater vertical message list length and message preview length (and if you’re like me, you only view messages in ‘preview’ mode. In short, it makes better use of widescreen monitors. This is now unnecessary, as Apple has rethought this in Mail 5, changing the orientation and making other iPad-like interface adjustments. This, I’m excited for.

Yes, I know about Post Box and the like – to be honest, I can’t properly explain why I’ve never made the switch, though I have tried. There you have it.

I have only one thing to say about the revised TextEdit: Holy shit, TextMate supports list writing (properly)! Welcome to nearly two decades ago. I hope the OS’s global font/formatting chrome has been significantly improved as well.

Finally, one of the oddities I encountered. Quick look has always been very much a keyboard access UI for me – tap space, see if it’s what I’m looking for or scan for a piece of information in the document I was looking for, tap space again to dismiss. I don’t like that they’ve introduced a clickable button to the quick look interface here, as this is one of the last places I’d want to use a mouse. Odd.

iTunes: Almost a decade in and still sans a decent UI

I’ll keep this short. I’ve posted in the past about my problems with the way iTunes handles playlists and browsing while music is playing. This is one of those things that sits on the same level of annoyance for me as the way Windows 7 handles alphabetizing in its control panel (this shit is asinine).

Why on earth can’t iTunes keep in line with a user’s intended commands while both playing and browsing through a library? Why is it that, when I am in an artist view and play a song and then switch to another artist’s view just to look around, iTunes plays out the current track and then picks a new one from whatever the hell I happen to be looking at at that moment in time? This behaviour is totally unjustifiably ridiculous.

I re-tested this today to find that now, instead of continuing with tracks in the view you started the current track from, it will move on to dead silence. I’m not sure if this was changed recently or if I’m doing something differently, but if it’s the former, what a pathetic attempt at a solution to a problem when the real solution of obvious and not very complex.

Apple, iTunes is one of your biggest cash cows, but also some of your shoddiest UX work.

Redesigning Registration

The first thing a prospective user approaches on your shiny new web app, the registration form.

The importance of this process is often overlooked or not sufficiently analyzed for shortcomings or elements which can be improved. If conversion is everything with your app, this is the first and (hopefully) only barrier separating them from the experience and utility you have to offer. Time to get it right.

I’ve always been particularly drawn to the UX involved with forms on the web. They are by far generally the most tedious and taxing commonalities for the typical user (and the rest of us too), and request the most of the poor user who probably doesn’t want to type anything more than URLs. More →

An iTunes icon color mod, in light of the Mac App Store

With the new Mac App store, I noticed the Mac now has the same dual icons as on the iOS – iTunes, App store. However, on the Mac, the icons are both blue whereas iTunes is purple on the iPhone. It’s a nice duo on iOS, but the already somewhat sub-par iTunes icon (it has yet to grow on me and I don’t think it will) does not sit well with its new Mac App Store counterpart. Especially if you have them both close to the Finder icon in your dock, the default App Store positioning being immediately to its right.

Another oddity is the change in symbol color – on the iPhone, they’re both white, and here we are on the Mac with a white App Store symbol and a black iTunes symbol.

Long story short, it’s not very well unified. I’m satisfied for now with one quick change, purple-izing the iTunes icon to at least resolve one of those issues.

Feel free to download  here (.icns, ~255kB).

Updated to get the tone closer to that of iOS’s icon, cheers @adambetts! Could get closer, but the icon as a whole is shaded completely differently – somewhat difficult to balance it properly, additionally with the black symbol vs. white.