Usability Faux Pas

Photo

Still unpacking boxes and getting settled in here at Posterous. I just downloaded their iOS app and noticed a pretty startling UX faux pas. The buttons for "View Post" and "Delete Post" have no visual differentiation (like, say using red for the delete action) and are separated by a single pixel. If they were aligned that closely side by side it wouldn't be as bad because the target area for your finger would be much larger, but as it stands now, you have to be pretty darn accurate.

(I'm assuming they display a confirmation dialog before deleting your post, but I didn't try it. Either way, the point stands.)

Comment styling with CSS3 and -webkit-transform

Here’s a quick little tip that might come in handy for someone. I’m working on the mobile version of a magazine’s site which will be targeting WebKit browsers. The design I’m implementing calls for a list of comments that alternates the display of the commenter’s name (and timestamp info) left and right. This can be done with a single image, use of the nth-child(even) CSS selector, and -webkit-transform: scaleX(-1). The fiddle here uses jQuery, but I’m using Zepto.js(mostly jQuery-compatible syntax in just a couple of kb) for the actual implementation.

Miscellaneous thoughts:
  • For bonus points, the comment arrow could be implemented with a small canvas to remove the need for an image at all.
  • AFAIK, there doesn’t seem to be an agreed upon microformat for comments.
The embedded widget is pretty small here, so please check out the full screen version here.

The New Black Ant Media

Tumblr_lfdlbwpdfk1qz6iv8o1_500

I’m excited to announce that I have launched a redesign of my business/portfolio site Black Ant Media. I started in on a redesign about a year ago and never finished it. They say if you’re too busy to update your own site, that’s a good thing. But when you’re in the business of selling your supposed expert services, not having any work to view is an embarrassment.

I had been wanting to play with MooTools for a while now, so I took the opportunity to use it on this redesign. I came away from the experience feeling like PHP is to jQuery (everyone structures their code differently) as Rails is to MooTools (established OO patterns that pretty much everyone follows). The MooTools Fx classes offer some of the smoothest animations I’ve come across. There is still much I want to learn about this framework, but I’m really impressed so far.

I’m using the lightweight (no database) Stacey CMS for the portfolio. Since this is a single-page site, I decided to load all of the project information dynamically from Stacey using AJAX calls and fetching JSON data.

I had a fun time working on the contact form as well. For WebKit browsers, the form flips around when you submit it turning your message into an envelope that gets dropped into a slot. On the server side, I use Akismet to check for spam submissions. Please send me a message if you’d like to try it out.

I few other buzzwords I incorporated: HTML5, Sass, TypeKit, Modernizr, hCard microformat, and parallax background scrolling.

I still have a bunch of cleanup/refactoring to do and I need to make a mobile version, but I’m really pleased with how it has turned out so far.

Oh, and all of the code lives in public Github repo if you want to check it out. Hit me up on Twitter with any questions or feedback.

 

Tumblr_levccya1di1qz6iv8o1_400
great tip from David Lanham (designer for Astronut). If you find that sharpening a layer in Photoshop is too harsh, convert the layer to a Smart Object and apply the sharpening as a Smart Filter, but bump the opacity down. The same idea can be applied to any filter where you’d like a more subtle result.

Clicky