UX Post

Lorem Ipsum Dolor Sit Amet

Tue, 25 Oct 2011 10:24:38 -0400

Filler text is a great tool for providing quick and easy placeholder copy. It helps to simulate text, though it has no actual meaning. It’s extremely helpful when using dummy copy for wireframes or in mockups to test typography and fonts. The go-to resource for generating this copy has been lipsum.com, but recently, a new crop of themed-generators has been popping up, adding a touch of humor to your documents. I’ve used a few in my wireframes, but it’s important to note that due to the nature of some of the generated text, you might want revert back to plain ol’ lorem ipsum if you’re planning on presenting the copy as part of a deliverable to your client. Here are some great ones to check out:

Happy generating!

Infinite Scroll

Tue, 20 Sep 2011 20:46:05 -0400

A lot of sites now are implementing infinite scroll, allowing users to paginate by scrolling down the page. These are usually sites that present their data as a “feed” or “stream,” and the data is usually “skim”-worthy (status updates, images, quick and concise information…).

Twitter, Tumblr, Pinterest, Svpply and Facebook all employ this method of pagination and they all have their own unique methods of doing so. Twitter has hotkeys (‘J’ and ‘K’) that allow users to jump from tweet to tweet and loads an additional batch of tweets once you reach a certain threshold. Tumblr and Pinterest dynamically load content while displaying a static call-to-action on the side, “Scroll to top” or an arrow, allowing the user to quickly jump back to the top of the page at any time. Svpply shows the first set of content statically and the user has to explicitly initiate the infinite scroll by pressing “Show All.” Facebook has an interesting and smart interaction. As you scroll down the page, content will continue to populate. However, because the footer is at the bottom of the page, it would be difficult to access if status updates continue to fill the page. If you scroll down the page fast enough, the system assumes you’re trying to get to the footer and stops the continuous loading, an extremely clever solution.

Do you ever find yourself browsing an e-commerce site and clicking on “View All” to see the entire catalogue, rather than clicking through 8 pages of clothes? Google research just published:

User testing has taught us that searchers much prefer the view-all, single-page version of content over a component page containing only a portion of the same information with arbitrary page breaks

This, hopefully, means that Google Search results will soon also implement infinite scroll, although the logo pagination is a classic component to the site.

Thinking about using infinite scroll on your site? UX Movement has a great list of best practices you should follow.

Inkling by Wacom

Tue, 30 Aug 2011 11:44:55 -0400

Facebook Friends After Events

Fri, 19 Aug 2011 01:59:46 -0400

Facebook is now revealing the possible context in which users become friends, displayed as a feed post formatted “[Person A] and [Person B] are now friends after both attending [Event].” It seems as though they see that both users have attended a Facebook event and friended each other shortly after (not sure what the max time allotted for friending is before Facebook doesn’t post the event portion anymore).

Google Search with Instant Pages

Wed, 03 Aug 2011 11:04:20 -0400

Instant Pages now in the latest build of Chrome

User-Generated Localization

Mon, 01 Aug 2011 13:21:00 -0400

Localizing your content has always been a task that could greatly affect international usability and accessibility. There are cultural habits that need to be addressed when localizing. For example, users in eastern countries read from right to left (CNN US: http://www.cnn.com/ CNN Arabic: http://arabic.cnn.com/).

One of the more difficult tasks is ensuring terminology and colloquialisms you use is understandable in other countries. Will German users intuitively understand what will happen if they press “Retweet” or “Like”? Services like Twitter and Facebook take a more social approach. Rather than hiring translators, they let their community decide what native terminology will work best. On Facebook, users can upvote and vet existing translations, or suggest alternatives. Twitter announced today that it only took a month to translate the service in Dutch and Indonesian with the help of 20,000+ users who volunteered to help.

Twitter is now available in 11 languages and Facebook in 64.

How-To: Personalized Social Network URLs

Wed, 13 Jul 2011 11:07:00 -0400

Most social networks offer free vanity URLs to users, for example, twitter.com/jeffsoo. The newest, Google+ hasn’t enabled this feature, but I’m assuming they eventually will and tie it to your Google Profile name. If you don’t have your own domain and hosting, gplus.to is a good alternative for a Google+ vanity URL. A post by MG Siegler inspired me to create a subdomain on my personal domain (http://jeffsoo.com/+) and redirect it to my G+ profile. Hakim El Hattab shared it on his profile and a few other creative examples came along:

A few people have asked me how to do this, so I created a quick HTML file you can download, change some paramaters in an HTML editor like notepad or Dreamweaver and upload to your hosting for the same effect. Here’s how to do it:

Download and extract this ZIP file
Open the index.html file, change “######YOUR G+ ID######” with the long string of numbers you can grab from the URL of your Google+ profile (or change the entire URL for Twitter/LinkedIn), and Save.
Create a directory in your root folder named “+” or “@” or “in”
Upload the HTML file to that directory and you’re set!

Real-Time Interactive Crowd Voting

Sat, 09 Jul 2011 14:46:45 -0400

The Miss USA pageant this year allowed viewers to actively judge contestants’ wardrobes in real-time through multiple platforms. A website optimized for mobile phones and tablets was publicized on the screen and allowed users to rate on a scale from 1-10, the contestant’s outfit. As users voted, the average score would be displayed on TV, fluctuating until the voting period had ended.

The platform, built by iPowow, has also been used during broadcasts for the UFC, American Music Awards, and the Australian Federal Election. I was particularly interested because I had a similar concept that I put together for a college project. The goal of was to allow real-time crowd voting during the Winter Olympics in order to increase audience participation. The sentiment was similar in that viewers would be able to vote and judge an athlete’s performance, but it would not influence the actual scoring of official judges. The service would be available on multiple platforms with Internet connectivity, and the hope was that you could view a livestream of, for example, a figure skater, and along with viewers from around the World, cast your vote on a performance. I built an interactive prototype to demonstrate the UI using a figure skater as a possible scenario. Once the skater has finished her routine, the user can vote and view the average score of other viewers, as well as the official score given by the judges.

Google Sites Offers Mobile Landing Pages

Wed, 29 Jun 2011 11:18:08 -0400

More Info

Tesco: Homeplus Subway Virtual Store

Mon, 27 Jun 2011 10:11:26 -0400

I hope the consumer adoption rate of QR codes/NFC in the US will see an increase over the next few years so we can develop interactive shopping experiences like they’ve already been doing in Europe and Asia for years.

Happinet - Hyper Ping Pong

Sat, 25 Jun 2011 11:11:44 -0400

Gesture/sound response ping pong

Facebook Photos Comment View

Thu, 16 Jun 2011 17:03:00 -0400

Facebook has a new “Comment View” when browsing through photo albums. Enabling the feature (toggle at the top right) displays only the photos within the album that have comments associated.

Skol Sensation Audio Ads for Playboy

Tue, 14 Jun 2011 13:36:06 -0400

iCloud and Dropbox

Mon, 13 Jun 2011 11:36:58 -0400

Bijan Sabet posted a great writeup on iCloud vs Dropbox this morning and it got me thinking about how I use the cloud. There’s a good chance that iCloud is going to be the de facto method for managing personal content (most prominently with photos and audio) in the cloud.

I currently use Dropbox as a tool for personal storage and as a means for collaboration. At first I was doing ok with the amount of free space I was given, and the additional free space I received once I got some friends to sign up as well. Once I started working at a startup, it became very clear that I would need to ante up my storage in order to handle all file types that we need to share, with .psds being the largest space hog.

What’s great about Dropbox is the administrative capabilities that allow users to sync specific folders, share syncing abilities with other users, and publicly share files to anyone. What I like the most is the file explorer that can be accessed on any web browser, not to mention that integration into my os makes it look like a normal folder on my hard drive.

One great point that Bijan brought up is the inability to connect iCloud with other existing 3rd party services. Not much is known about how the iCloud API will be able to integrate with services I use all the time like Dropbox, Instagram, Boxee, and turntable.fm.

With iCloud completely re-imagining the process of how users add content to the cloud, I can see it becoming a standard that all hardware/software makers will need to consider.

Apple Introduces iOS 5 and OS X Lion

Mon, 06 Jun 2011 20:58:00 -0400

Building Windows 8

Thu, 02 Jun 2011 11:47:53 -0400

Jensen Harris shows a sneak peek of the Windows 8 UI

Twitter Photos and Search

Wed, 01 Jun 2011 14:09:34 -0400

Today, Twitter will begin rolling out its new photo sharing service into their product, along with a new and improved search system that displays both related photos and videos to the search keyword/hashtag.

You’re also now able to search topics and usernames by typing #hashtag and @username directly from the Firefox address bar.

Introductions Using Sonar

Mon, 30 May 2011 17:48:18 -0400

Sonar is a new geosocial mobile service, which came out of K2 Labs, a mobile incubator, that helps users connect to others based on where they have checked-in and who they might know in common. Currently built on Foursquare, you are able to see others at a chosen location, listed based on the amount of mutual connections you might have.

Similar in the manner that Hachi allows you to see if you’re connected to someone based on your degrees of separation on LinkedIn and Facebook, Sonar pulls in mutual friends from your Facebook and Twitter network who are only 2 degrees away (friend of a friend) and allows you to send them a request to connect.

When interested in connecting, you can send a tweet which mentions the user and the location where you both are. The issue is that if the recipient isn’t checking their Twitter feed constantly, they might miss the request, and by the time they do check, either party might have already left the venue. Implementing this feature as a push notification would greatly increase the chance of creating the introduction. One of the points that Sonar’s CEO, Brett Martin, stressed was that the app is completely usable even without users. Because user information and location is being pulled from public data, you’ll always be able to see results, as long as others are publicly checking-in on Foursquare. The push notification issue could be a nice piece of functionality of both users have the app installed.

I think it’s definitely an awesome service, and can’t wait to see what else they have in store as they continue to grow and improve the product. Check it out in the App Store [link].

Do@ Reinvents Mobile Search

Thu, 26 May 2011 10:59:24 -0400

do@, which launched at TechCrunch Disrupt as a Battlefield contestant and finalist, is changing the way users perform search on mobile. As sites across the web realize that mobile is on the rise, and accessibility on all platforms (iOS, Android, etc…) is key, they create HTML5 versions of their existing sites, essentially making mobile web apps in the process.

Contextual search will be the deciding factor in whether or not users decide to click-through to a result. If I search “Modern Family,” chances are I’m looking to find information about the TV show, and not an in-depth article about how to raise a family (at least not at this time). What do@ does, quite awesomely, is tag a search with generalized topics. For example, “Modern Family” will show: “Modern Family @tv/@internet/@reference.” Depending on what the user selects, results matching the tag will be surfaced.

Results are presented as screengrab previews of the site, with the appropriate search already pre-populated. As you swipe left and right, you can see additional results. Clicking on a result expands the site, and you’re able to fully browse as you would in any other mobile browser. Not what you’re looking for? Hit the bottom left icon in the menu and you’ll be taken back to the search results view. Over each result preview, there are two icons for like and comments, which aid in surfacing more relevant results first in the future. Don’t want to see a particular site as a result? Press the “X” to remove the preview.

Do@ also uses Facebook Connect to add a layer of social search. Like Google and Bing have started employing, results that your friends like and promote surface to the top of the results. Though not as useful until your friends start using the app and liking results, it’s definitely a great feature, especially if it adds Twitter integration in the future.

The app is currently available in the iOS app store, and they plan on expanding to all mobile platforms, as well as have a web-based version of the product in the pipeline.

Resources for UI Patterns

Thu, 05 May 2011 12:39:00 -0400

When designing features & functionality for elements like forms, carousels/slideshows, navigation, etc…, the first step I take is to research best practices and look at existing UI patterns to draw inspiration. If it works, why reinvent the wheel? But it’s always nice to throw in additional touches here and there to make the interaction more innovative for users. And don’t be afraid to think completely out of the box! It only took one app to make “Pull down to refresh” a revolutionary, standard interaction for reloading dynamic content on mobile. Here are some awesome pattern library resources I like: