Tubetorial Form Labels

By flipping the convention of labels on top or to the left of the inputs, Tubetorial provides a nicely aligned solution. We're accustomed to reading top to bottom and left to right, so it's a bit strange to have the label and input reversed this way. This works mainly because there are few inputs in a compressed area, but this might not be as efficient on large forms.

1. Comment form input with labels on right

http://www.tubetorial.com

WEB2RSS Form Labels

It's interesting placing the label inside the input. The form fields align nicely, but I imagine the alignment of the actual text you enter wouldn't work as well with multiple inputs. Since there is only one text input here, this works to some degree.

1. Label is shown inside form input

http://baekdal.com/web2rss

YouTube Explore Related Videos

YouTube's exploring functionality in the full-screen video player allows users to directed exploration of related videos.

1) Clicking the explore button in the lower left brings up related videos visualization, which is sort of like a digraph that looks like a constellation of stars.

2) Circles in the center are videos. Hover over one circle expands to show you other videos related to that one, forming a cluster. Click a circle to watch a video.

3) Circles in the upper left corner indicate the clusters you've explored. Clicking on a circle returns you to the related constellation, focused on the cluster you click. Constellation shows the path back to the original video--what relates the video you're now watching to the video that started your exploration.

1. Exploration of related videos
2. Constellation after watching 2 related videos

http://youtube.com

iStockPhoto Tags

iStockPhoto provides an interesting way of mapping keywords or tags to the controlled vocabulary the site uses. This makes a lot of sense in a site that wants people to be able to browse for concepts, themes, and subject matter with a high degree of relevancy. Curiously, they refer to the keywords as tags on the review screen when the term "tag" isn't used on the site as of this writing.

1. Image upload screen provides textarea for entering comma-separated keywords
2. User matches keywords (called tags on this screen) to terms from controlled vocabulary

http://istockphoto.com

Amazon Registration and Login

Amazon's login and registration screen is the standard by which other login screens are measured. The simple flow consists of: 1) entering your email address, and 2) entering your password. If you are a new customer, simply select the new customer radio and the follow up screens provide the registration flow.

1. Enter your email address, if you're not registered, select "New customer," otherwise log in
2. Enter registration info

https://amazon.com/gp/sign-in.html

Basecamp Registration

Starting off from Basecamp's sign up page, you pick your plan option, then fill out their form.

The form is clean and simple. Inputs and labels are aligned well and there is a logical chunking of sections of the form. I like the simple hairlines between chunks in the top area.

One of the nicest things about this entire experience is the starting point where you select your plan. The user may return to this page at any point to upgrade, downgrade or cancel their plan. Their options are always available and clearly defined without any difficult obstacles to making changes.

1. Select plan
2. Fill out your info

http://basecamphq.com/signup