Touchlytics: iPhone app UI

An analytics app is essentially text, numbers, and graphs. While I’m not crazy about the interface design, I didn’t want to moan about it without making any suggestions.

On the right is the original Touchlytics app. On the left, I’ve added more whitespace and made the color pallete more iPhone-like.

I also emailed the developer and offerred him my suggestions regarding the UI and the UX at large.

I find that people are generally happy to hear feedback on something they’ve spent time building. So if you experience a product or service that is lacking in some way, say something! Chances are good they’ll be glad to hear it.

Google Docs dialog box rename

This doesn’t make a lick of sense. This should be a “click to edit” editable region. Isn’t that the cool thing to do these days? The pop-up works, sure, but it’s not the most elegant solution.

Also, I’d like a pony and a golden toilet, while you’re at it Google Docs.

Zappos annoying out of stock message

It’s so annoying. So very, very annoying. Here’s how it works:

Pick a shoe, and select a size on the page with a drop down box. If the shoe is out of stock, this pop-up message appears. The only way to change the size or color again is to click “close this window” every time you adjust the drop down.

This is ridiculous. It probably takes more work for them to check the stock, and use a javascript pop-up, than it would be to just show me on the page which shoes are in stock.

So not only am I told I can’t have these shoes, but I’m inconvenienced because I have this pop-up box in the way now. Ahhhh!

Zappos, you should be ashamed. You’re customer service is so awesome, yet your web site is as lackluster as a grey wall.

I’ll still buy all my shoes from you though.

Nokia Music app preview

Hovering on each element explains what it is. This is helpful but the text is unfortunately tiny and hard to read. I find this method is helpful when trying to explain wireframes.

I started this post because I thought it was a good example of previewing a product. But now I’m thinking this is a bad example of a product preview. It’s hard to see the product (it should be the full width of the page). And it’s not particularly helpful copywriting.

Sorry, Nokia. No hard feelings?

Flickr upload missing link

Love the Flickr Uploader tool, but before I upload more pictures, I’m frequently curious about where I left off? Would be nice if there was a link in here to direct me to my photostream, at the least.

Better yet, show me the last 3 images I uploaded in the sidebar there. Just a suggestion. It’s what I do.

Tumblr submit breaks convention

Conventions are important to follow, but are worth breaking in certain situations. Namely, when it won’t require any learning curve. This submit button on the left breaks a convention that I didn’t even know I followed.

Tumblr allows me to post with a bookmarklet. In this pop-up posting process, adding a link to this entry with the wysywg editor requires me to enter the address, title and/or target from another pop-up window. All good so far. But the “Insert” button is on the left, and every time I go to click it, my mouse wanders to the bottom right corner first.

In this example, it’s not especially taxing. But sometimes a larger pop-up appears, making the mousing around rather annoying.

Improvements to this could be to:

1. Downplay the “Cancel” button, so it doesn’t look like a button. Instead just a link that says “Cancel.”
2. Place the cancel button next to the submit button. Then I’d be less tempted to mouse to the bottom right corner, the typical finishing point for reading a page.
3. Flip the positioning, align the submit to the right side, cancel to the left.

These ideas are conveyed with excellent clarity and plentiful examples in Luke Wroblewski’s book Web Form Design: Filling in the Blanks. Or check out the Flickr set for all those examples from the book.

O’Reilly pagination placement is wrong

Pagination belongs under the results. Not to the right and below stuff. It’s crucial to paging through results, it can’t be an afterthought.

I found this helpful set of pagination patterns on Flickr. Also this great how to - pagination 101. Thanks to this a thread about pagination on the IxDA site.

Redbox makes me think

And I don’t like it. Here is the checkout form on Redbox. The expiration field shows the names of months. But a credit card doesn’t say April, it says 04/10.

Redbox, you have failed to think about the context of the situation. The month on a credit card is in numerals, and so should your month field on your web site. Hasn’t someone on their web team ever used a credit card before? This is like super easy to implement and extremely obvious, I’m shocked it slipped through.