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
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.
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:
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 macstories.net
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.
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 »
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.
I switched to Chrome from Firefox probably close to a year ago on my Mac permanently. Firefox got too slow and crashy for me to handle, and Chrome had snuck up as an amazing alternative for its speed and well thought out UI. I’ve become increasingly open to changes in my workflow and its interface over the past year or so, especially while dropping my five or six previously vital Firefox extensions in favour of slightly more manual processes that keep things lean.
More »
At some point in the last half decade, a designer somewhere was first to integrate touch buttons in a computer monitor, cell phone, or camera. Then all hell broke loose.
Even when the PS3 came out, people seemed to marvel at its touch sensitive eject and power buttons, and not even for a second have I understood it. Design for design’s sake, form over function, etc. My current main monitor at home is a Samsung 2443BW, a 24″ LCD which I preferred over others at the time of purchase because of its particularly narrow bezil. It was also in the same line as, and only somewhat changed aesthetically from my previous monitor – the 225BW, a 22″. One key difference was the move from simple front-mounted, small, circular buttons for power and navigating the screen’s menus to capacitive buttons mounted in the same place. I’m sure that for a moment there when I unboxed the thing that I too was lured in by the cool factor, but this was quickly deflated that very night when I went to calibrate some settings and had to constantly look at the screen and down to the controls to make sure I was touching the correct square centimeter of the bezel, as there’s zero tactile interface.
Also that night, I first tried to turn on my monitor in a dark room, and that was when I decided this interface is a complete useless gimmick. The PS3 has small indented symbols on both of its buttons, and since there are only two on a relatively large surface it’s not hard to feel them out, but does this make any sense?
In short, no, and that’s all I really have to say.
Next up: The blue LED is in almost every single gadget I own that isn’t Apple-designed. #ffffffffuuuuuuuu
Every once in a while you encounter a tiny feature of a website that makes your day and improves your perception of the site as a whole drastically.
I ran into one of these on Quora today. I signed up months ago, but I must not have completed the registration process – I went to sign in and this is a capture of exactly what happened once I tabbed to the password field.
Tiny feature, but incredibly well thought out. This is the stuff that makes websites amazing to use.
