"I paint very large pictures. I realize that historically the function of painting large pictures is painting something very grandiose and pompous. The reason I paint them, however – I think it applies to other painters I know – is precisely because I want to be very intimate and human. To paint a small picture is to place yourself outside your experience. However you paint the larger picture, you are in it."

- Mark Rothko

Here is a series of 10 unofficial details that zoom in on Mark Rothko's beloved paintings. These have been formatted to be used as iPhone 4 wallpaper (640x960 @ 326dpi), which brings this classic artwork to a new canvas and creates a new experience that is in accord with the artist's desire to create an intimacy between the viewer and the painting.

Worth noting is that Apple's Steve Jobs was inspired by Rothko's work in the last year of his life while searching for art that might inspire people to display on the walls of the future Apple campus. Since we can't all enjoy the original paintings in such a setting, these wallpaper photos can give you inspiration every time you take out your iPhone. Share, remix, pin...whatever strikes your fancy.

Repin these on Pinterest!

I have 2 Facebook apps I maintain (Card Karma and 3goodthings.me). When I setup these apps, I customized the App Profile Pages since Facebook was directing internal searches there (both from the main search box in the main nav bar as well as the Applications Page.) I started noticing that many Facebook apps had Pages categorized as a "Brands & Products > App" which they were using for the like box on their destination website and elsewhere online. Sometimes this was because the Facebook app was used only for Facebook Connect authentication within a larger external project. For Connect-only apps, Facebook can redirect from the App Profile Page (https://apps.facebook.com/app_name_here) to a Page if you enter that as the Canvas URL. Sometimes though, even canvas apps were using a Page in addition to their App Profile Page. I found this confusing because the App Profile Page had the "Go to App" button, which was a very clear and desirable call-to-action for users checking out the app.

I kept looking around online (the Facebook Stackoverflow, like box documentation, the old developer forums, Google...) to find a definitive answer to which page to use for collecting likes for my apps, but I never found one...until now.

Facebook has announced on their developer blog that they are killing App Profile Pages by February 1, 2012. Existing apps have until then to migrate their likes and vanity URL (sorry, no content from your wall or photos will be transferred - booo!) to another Page. If you need to migrate your App Profile Page, make sure you've set the category of your Page to "Brands & Products > App" or else it won't show up in the drop-down menu of Pages. For new apps, the UX is much clearer now. You'll see a "Create Facebook Page" button in the Contact Info section of your app settings. The Page selected there will then display the "Go to App" button to the right of the Page's title (next to the "Like" button if the user viewing the Page hasn't liked it yet.)

So there you have it. Bye bye to App Profile Pages. Use a Facebook Page for your app and let's hope the likes you collect there never have to be awkwardly transferred again!

Counter-Intuitive How To

Currently, to copy list recipients from one MailChimp list to another you have to do the following tedious steps.

Click on 'Lists' in the main nav.

Click on the list you want to copy from.

Click the 'view all subscribers' button.

Select the recipients you want to copy, click on the 'bulk actions' link and pick the list you want from 'copy to'.

 

The Problem

Why can I never remember this flow? Because, when I want to copy recipients into a list, I'm in that list! On top of that, if I somehow remember that I need to take the action from the list I want to copy from (which would be exporting, I suppose), I can't find the option for the life of me. I've had to Google this 3 times now for myself and clients. MailChimp generally has wonderful UX design, so this is a recurring UX anomaly.

A Solution

What would be much more intuitive would be a clear call-to-action to import or copy from another list into the one I'm currently viewing. Even better, since I find myself going to the 'Import' section of the list, how about adding an option there to "import from another list"?

If you haven't tried MailChimp and you need to manage emailing lists, definitely check them out. Refer to this post if you forget how to copy recipients from one list to another ;)

In the heat of battle I added the Facebook Google Analytics FBML tag to my Card Karma app, but I was getting a bunch of gobbledygook in my Analytics reports that were completely useless. The reason is because, by default, the Analytics Javascript sends the parent frame URL to Google rather than any content loaded inside the Canvas iframe. So, Analytics was only tracking the cryptic Facebook URLs rather than the URLs inside the canvas iframe.

To get some useful data out of your Facebook Canvas application, you have to add the "page" parameter to the fb:google-analytics tag. For example, here's the code I'm using in my Django app:

<fb:serverFbml style="width:0;height:0;display:none;">
<script type="text/fbml">
<fb:google-analytics uacct="UA-55555555-5" page="{{ request.path }}" />
</script>
</fb:serverFbml>

You'll need to replace {{ request.path }} with something else if your app is not built using Django to provide the current page's URL. And, of course, replace the uacct value with your Analytics account id.

To see what else in the Analytics API is supported inside Facebook Canvas apps, check out the official Facebook documentation for the fb:google-analytics tag:
http://developers.facebook.com/docs/reference/fbml/google-analytics

That's it! A simple, quick tip, that might save you a few minutes surfing outdated tutorials or docs about Facebook apps.

After checking out tips on Quora for neighborhoods to checkout while visiting Silicon Valley, I followed a recommendation to try out PadMapper. I love this idea of having UI elements simply overlaid on a Google map (as seen in the above screenshot). To keep things clean and simple, this tactic necessitates sparsity in visible menu items. PadMapper uses a slide-out menu for tracking favorites and collapsible menu chunks in the main menu for additional filtering options. Even though this puts common elements like login links in a non-standard position (instead of being in the top-right of the browser window they appear at the top of the main superimposed menu), PadMapper leverages users' familiarity with Google Maps (with its UI elements in the top left and right corners) and keeps new functionality easy to locate by grouping it together within the superimposed menu. The graying-out of the map pins is a nice touch. To improve the UX I would include the favorites menu as a collapsible side tab off the main menu and reveal rental listing details when you mouseover the map pins rather than having to click on each one.

The movie The Aviator was sloppy around the edges (what the hell were they thinking with those bizarre Wainwright cameos in the Cocoanut Grove scenes?) in spite of some excellent acting. But, one thing I am left with after viewing the film is a lingering fascination with Howard Hughes. His innovation and ability to execute on his vision were staggering. I can't get through the film without searching on my iPhone for photos of Hughes with any number of starlettes, the spectacle of the Hell's Angels premiere, or the morbid glimpses of Hughes on a stretcher being loaded into an ambulance after crashing his plane into a Beverly Hills house.

There's a wonderful unofficial collection of Hughes images (and a few videos) on Flickr. A former Hughes employee chimes in from time to time in the comments to correct details (see more from Paul B. WInn, Hughes' former personal secretary, on this sprawling Facebook thread.)

Don't you just love the web? It makes stalking so easy and media-rich.

Introducing the new and improved brinlevinson.com! Brin is an an exciting artist who lives up in Portland, OR. I've known Brin since we attended the California Institute of the Arts (CalArts) together, where he was studying character animation. His artwork is highly stylized (tending towards the dark and mysterious), virtuosic, and always tells a story that draws you in and sends your imagination running wild.

This site is built on WordPress and uses the phpFlickr library to pull in artwork posted on Flickr. phpFlickr has some nice features like caching and all the Flickr API integration needed to build a slick gallery. We're using the nyroModal jQuery plugin for an effective full-screen slideshow feature to get a great look at Brin's art. One thing we ported over from Brin's former site was the PayPal buy links that allow patrons to purchase both original artwork and prints in the store.

I'm happy to note that with some prior discussion to get on the same page about the new site, we were able to build and launch this in less than a week! If only every site could go that smoothly... I hope you enjoy the site and please send along feedback (via Twitter, comments...any which way!)

jeremyzuckerman.com

This new site for composer Jeremy Zuckerman has a custom Wordpress back-end that helps to keep a growing amount of content as minimal as possible. I got to play with jQuery Address, which allowed us to load pages like the biography and even the blog inside a div with ajax calls without resorting to iframes. Look for upcoming posts about this one where I'll share some tips about working with WordPress and jQuery Address.

kateconklin.com

We pretty much created an online magazine for Kate's new site! It's another totally tricked out WordPress back-end, lots of jQuery goodness, and some killer features like filtering music and video clips by tag. There's so much good information on here already and I'm thrilled that Kate has been adding new posts weekly since we've been building the site, so expect some great content to come if you're into voice, anatomy, and how our minds and bodies work.

treeadams.com

This new site is the tour de force Tree Adams musical experience! You can browse his prolific catalog of film and TV works and soundtrack and solo artists record releases. We picked Django to handle the expansive CMS for this site, and I confess I like working with Django/Python more than WordPress/PHP when it's right for the needs of the project. I threw in some heavy jQuery magic for effects that formerly would have required Flash. The whole thing even works on iPhone!

It's a pretty exciting time in the web world with such amazing open source software and libraries out there. I'm honored to work with these talented and artistic clients and I hope you enjoy their new sites.

Here are some UX FAILs I came across while paying bills over the weekend.

So, Time Warner, you're saying that I'm signed up for paperless statements, but I should also sign up for paperless statements? I'm confused. I'll probably now spend a couple of minutes making sure my account is setup the way I thought it already was only to discover it is.

I hesitate to mention this one because I'm thrilled that I can renew my car registration online, but it's a good example of breaking an established convention, so...here are some buttons on the California DMV site that are in the reverse order found on most web forms:

Even though westerners read from left to right, users are trained to find submit buttons on the far right, and buttons in that placement are the most likely to be clicked (let's call it the next-next-next sydrome). The order in this form places the emphasis on the back and cancel buttons, which might lead to users accidentally clearing the data they've entered or causing confusion when they go backwards instead of forwards in the flow of the form. One reason the standard convention works well is because usually 'forward' or 'next' calls-to-action are displayed on the right (often with an arrow icon pointing to the right), while the button or link for 'back' is displayed on the left (often with an arrow icon pointing to the left). Look at your web browser's back and forward buttons for an example of this. See how this form doesn't follow that convention?

Seen any UX FAILs lately? Share your links or post a description in the comments!

Here are some concepts that have surfaced while doing some recent web app consulting and design. This information is all out there on the web for the taking, but so many apps get these items wrong that I'm motivated to share them here as a checklist for myself and to hopefully help others make what's special and exciting about their apps really shine. To clarify up front, it's obvious that if your app isn't going to be of the me-too variety, it will need to be different from existing web apps in some significant way. However, for the majority of the interactions in your app, choosing to stray away from some best practices can simply derail the user experience. Also, most of the following suggestions are related to usability and less about graphic design. I've never thought of Google's apps, for example, as excessively pretty, but they are often usable.

A Feature By Any Other Name

Ok, you've got a sweet domain name and corresponding product name, and you want to run with a metaphor for your features (maybe you have a 'pirate ship', users are 'pirates', friends are 'maties'...) That's a cool idea, but if you're going have common features, like following other users in a social network, it's better to stick with the terminology that everyone already understands and not force your users to learn something new. The following are some terms that I think web apps should stick with.

- 'follow' people or groups of people

- 'like' objects (items or things, such as posts on Facebook, a book review, a movie, etc. - 'favorite' or star icons can be used here as well...)

- 'groups' are collections of people

- 'lists' are collections of objects (and sometimes people)

- 'tags' are keywords or descriptions usually attached to objects

It should be noted that choosing 'groups' or 'lists' can be a bit tricky. 'Lists' tends to be used for user-created collections of things. However, those things can be objects (products in an Amazon Wishlist) or even other users (like Twitter lists). 'Groups' tend to be collections of people centered around some kind of shared interest. Facebook, LinkedIn, and FriendFeed all allow users to create groups for topics (similar to organizations in real life). 'Lists' tend to be more geared towards allowing an individual to curate or organize, while 'groups' are more geared towards serving more than one person and where collaboration and communication are implicit. 'Lists' allow people to filter the often overwhelming river of information within an app, and 'groups' help people work together to create as well as filter content.

Regarding tagging, tags are a sort of brilliant catch-all for letting users organize information. In my listing above, the 'usually' hints at the fact that tags can be used for anything. You can tag people, groups, lists, and objects. Now, do you want to allow that sort of power tagging? Probably not. First of all, tagging is hard enough for a lot of users to grok, but also, it's not likely users will want to go that hog-wild tagging everything in your app! It's much wiser to not include a feature like this and let user demand for it determine for you if it's even needed at all. I would suggest not even including tagging as a feature at first unless it's core to the functionality of your app.

Attention To Detail

Let's be honest, if you're lucky enough to have a user at all, that user will have the entirety of the interwebz to compete for their attention. Therefore, you should make your app well-suited to drive-by usage. FriendFeed's UX was validated by its acquisition by Facebook, which had already stolen some great features from them (see more below about stealing.) Being able to 'like' and comment right inline with an item in a news feed (or 'activity stream') is incredibly convenient. The old school web 2.0 way of handling this would be to require the user to click through to a details page where the item is displayed with relevant metadata and allow commenting/liking/etc from there. Why make users leave the stream to engage when they are probably just scanning items that look interesting and moving on quickly? Ask yourself if you truly even need a details page, and if you do, consider allowing any features on that item to be accessible within the stream or list view where multiple items appear. FriendFeed actually does have a details page (it's buried in the 'share' link menu), but I think that was really only there to attach a permalink to the item for reference outside of the app. Twitter obscures their tweet detail page as well (you have to click on the timestamp to open it). Facebook doesn't even bother!

For Every Action...

Any amount of user testing will illuminate the tendency for humans to become impatient when an action they take seemingly has no effect. For example, if I click a submit button on a form and there's no indication that something is loading and I don't know to look at the browser's loading bar, I might think my click didn't work. That's when I become amazingly good at breaking your web app! Waiting for third-party API responses or just simply the load time for a page is still a factor we need to account for, so be nice to users by letting them know their input was received and something is happening.

One way to make this clear to users is to have reverse functionality replace the initial call-to-action. If you have a 'like' button or link, you can simply change it to 'un-like' and that lets people know both that their action has been completed successfully as well as making it obvious how to undo or change the results of their action. Do the same thing with follow/unfollow. Put 'edit' links inline with the content they effect; people click where their eyes are focused. If your app flow allows it, load search or filtered results via ajax calls to avoid a whole new page load and display a loading icon or text right next to the submit button, since that's where the user's eyes are when they clicked (as opposed to text at the top of a form...) You can even use jQuery or similar to change button text to indicate something is happening. For example, 'search' can be changed to 'searching...' Yes, following this suggestion creates some hoops for us web developers to jump through, but sprinkle in a little ajax magic and your users and customer support staff will be much happier. If you do a good job of communicating activity that's occurring, you can also disable buttons/links by graying them out and making the cursor be the default arrow on mouseover to indicate the item is no longer clickable. If you do this kind of thing, just make sure to include timeout logic in the back-end to avoid infinite loading or allow users to cancel the action or your app might appear frozen.

Keep It Moving

Never allow users to reach a dead-end in your app. If they search for an object that doesn't exist, let them know that it doesn't exist and give them one or more calls-to-action to find something related or notable. "We couldn't find 'pink leather pants', but check out these popular pink items by other users..." If your web app is new or doesn't have much content on it, take advantage of the lack of stuff to prompt users to add stuff. "You don't have any bookmarks yet. Add some bookmarks by...See some popular bookmarks..." This creates motivation in your user instead of making the app feel broken or limited. Never make a link direct users somewhere different because they haven't added content or completed some sort of sign up or profile action. Show them that there's a gap in completeness (LinkedIn's percent complete and corresponding call-to-action is a classic example) where they have an opportunity to add info that will enhance their experience (gain attention, better share with friends, help others by being a maven, express themselves...you get the idea!)

Stealing Is Smart

As Picasso once said, "good artists borrow, great artists steal!" If your app has an activity stream like Facebook, FriendFeed, or Twitter, make it look like something like those UIs. Chances are the developers and business decision makers behind these products have more resources than you, so you can get tons of free user experience consulting by just copying these apps. Does your app have a sidebar with items like Twitter (an avatar and username on a user profile, groups of users following the user, users they follow...)? Well, make your life and your users' lives easier by just lifting the UI straight off Twitter! You probably have a different brand/look/feel than Twitter, so you should skin the content accordingly, but steal enough to make it easy for users to understand what's going on at a glance.

Spend a couple of honest moments asking yourself which features are truly special in your app. Put those features front and center and make all the other stuff easy to use by keeping it familiar to users of more popular sites. You will be hard pressed to out-user test someone like Google, so don't bother trying and steal their good ideas!

That's all for now. Have any tips/tricks/guidelines you'd like to add? Agree or disagree on any of these points? Comment! Respond! Take action and shout it out!