UI-patterns.com - patterns

Pattern example image: Image Zoom

Thu, 03 Jul 2008 14:41:33 +0000

The MagicMagnify zoom function shows a zoomed-in version of an image in a circle where your mouse cursor is hovering the original image. The effect enhances the feeling of exploring the details of an image through a magnifying glass.

Pattern example image: Image Zoom

Thu, 03 Jul 2008 14:39:13 +0000

MagicZoom allows you to view a zoomed-in area of a picture while still viewing the original resolution image.

Pattern example image: Image Zoom

Thu, 03 Jul 2008 14:36:53 +0000

In the apple.com online shop, selected products are shown with a zoom feature, that allows you to zoom in on the product image to view its details in greater resolution.

Pattern example image: Wiki

Mon, 23 Jun 2008 09:34:12 +0000

The Basecamp tool writeboard keeps track of the different versions of a wiki document - both by stating when a given change was made, but also by indicating how big the change was (note the size of the circles).

Image Zoom

Thu, 03 Jul 2008 11:54:37 +0000

The user wants to zoom in on an image to view the details in a higher image resolution.

Rate Content

Sun, 22 Jun 2008 21:30:00 +0000

The user wants to promote a specific piece of content in order to democratically help decide what content is of higher quality.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:25:49 +0000

At kelkoo, the rating given in a product review is calculated from the rating of several sub-categories. Furthermore, the pros and cons of the product is specified in text together with a lengthy textual review. To top things off, product reviews are rated (rated ratings) to favor the most helpful reviews.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:23:12 +0000

At kelkoo, both products and sellers are reviewed. The rating of the sellers is presented next to their price for a given product and a textual description of each offer for each seller.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:20:45 +0000

At the price-comparison-site kelkoo, each seller is rated from a scale of 1-5. The overall rating is parted into sub-categories that further explain the pros and cons of the given seller. Furthermore, a textual description explains how the seller specializes in.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:18:10 +0000

When listing videos, youtube.com displays the rating of each video to give the user an indication of whether the video is worthwhile or not.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:17:05 +0000

On youtube.com, each video can be rated. When a user has reached the end video, other related and popular videos (as in videos with high rating) are shown to provide the user with a path to new content.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:14:05 +0000

TopTenReviews explains the overall rating by separating it out into subcategories. This solves the ambiguity of having a single overall rating to explain all aspects of an item.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:12:48 +0000

At Netflix, an algorithm suggests possible movie rentals based on how well the ratings you have given yourself match with people who gave similar ratings as well as what you have previously rented.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:05:24 +0000

The quality and helpfulness of each blog post at Ajaxian.com can be rated. But what is really being rated? The importance of the story, the quality of the story, the helpfulness of the story? The ratings given are ambiguous.

Pattern example image: Rate Content

Sun, 22 Jun 2008 19:01:44 +0000

At UI-patterns, users can let the rest of the world know, if they think a pattern represents a good practice or not.

Pattern example image: Rate Content

Sun, 22 Jun 2008 18:59:31 +0000

At Amazon, you can take a closer look into the average rating (in this case 4.5 stars) to for instance see if the scores given were all high, all low, or in between. Furthermore, the two most helpful reviews in respectively the high and low and of the scale help point out the most relevant critique or praise of the given product.

Pattern example image: Rate Content

Sun, 22 Jun 2008 18:56:36 +0000

On amazon, each rating is accompanied by a textual review explaining the rating given. The specific rating is given on a scale of 1-5 and is beside the textual review also presented together with the name of the author and his location. This adds to the t

Pattern example image: Account Registration

Thu, 19 Jun 2008 11:56:51 +0000

When you register an account at instapaper.com, an effort is made for the user to build trust in the website, by letting the user know that instapaper is in no way interested in spamming you. You can freely choose to either use your email or any other word, which helps to build trust in the non-abuse attitude and honesty of the site.

Pattern example image: Account Registration

Thu, 19 Jun 2008 11:53:50 +0000

Both the login screen and signup screen are dead simple at wakoopa.com - and look very much like each other. Notice how the gradient radial background increases focus around the center of the screen where the content of the screen is.

Pattern example image: Account Registration

Thu, 19 Jun 2008 11:49:56 +0000

When you try to access an area you are not permitted to log in at on brightkite.com, the problem is presented with an accompanying graphic: a stump of a tree that you supposedly stumbled over. This kind of graphic is used to add personality to the site.

Pattern example image: Account Registration

Thu, 19 Jun 2008 11:31:54 +0000

The login screen at aireo is very simplistic and to the point. All remotely unrelevant information has been stripped from the page.