About UI Scraps

UI Scraps is a collection of good, bad and noteworthy user interface designs found by Jason Robb

Subscribe & share

RSS feed

Bookmark and Share

Top tags

Send your suggestions, questions or UI scraps to me, I’d love to hear from you.

Thanks for visiting!

Posts tagged "preview"

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?

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?

NYT Lens - hinting what’s next

The newly launched New York Times - Lens photography blog has a great way to show the next post by exposing a bit of the photo. The interface is implemented in Flash, but I imagine this kind of interaction can be done with a little jQuery and PHP preloading the next/previous posts. I’d love to see this done on a non-Flash interface. Have you seen it? Link me up!

Showing a bit of what’s next encourages sticking around and exploring the rest of the content. It’s all graphic, so this is especially true. I imagine the same implementation on a text-only blog would still work, but would be perhaps less powerful. Nice work.

NYT Lens - hinting what’s next
The newly launched New York Times - Lens photography blog has a great way to show the next post by exposing a bit of the photo. The interface is implemented in Flash, but I imagine this kind of interaction can be done with a little jQuery and PHP preloading the next/previous posts. I’d love to see this done on a non-Flash interface. Have you seen it? Link me up!
Showing a bit of what’s next encourages sticking around and exploring the rest of the content. It’s all graphic, so this is especially true. I imagine the same implementation on a text-only blog would still work, but would be perhaps less powerful. Nice work.

Finder shows comments in PDF

While previewing a PDF file in Finder, the comments are shown to the left of the preview image. Neat!

The notes can be closed in this frame so only the PDF image is previewed. Good idea, Mac daddy.

Finder shows comments in PDF
While previewing a PDF file in Finder, the comments are shown to the left of the preview image. Neat!
The notes can be closed in this frame so only the PDF image is previewed. Good idea, Mac daddy.

TypeTees unfold on hover

Another great example of a killer product view. At TypeTees, when you hover on a Tshirt, it unfolds showing the rest of the shirt.

It’s not awesome because it shows something we’re missing out on from just seeing the preview size. It’s awesome because it shows the entire product like we’d see it if we were holding it in our hands.

It makes these shirts feel more real in our minds because we can see the whole shirt. The slight wrinkles contribute to the realism, too. So many companies get this wrong, and show just the graphic, flat on the page. My tshirts are not flat, and I don’t live in flatville.

Well done TypeTees team. Thanks for being real. Really real.

TypeTees unfold on hover
Another great example of a killer product view. At TypeTees, when you hover on a Tshirt, it unfolds showing the rest of the shirt.
It’s not awesome because it shows something we’re missing out on from just seeing the preview size. It’s awesome because it shows the entire product like we’d see it if we were holding it in our hands.
It makes these shirts feel more real in our minds because we can see the whole shirt. The slight wrinkles contribute to the realism, too. So many companies get this wrong, and show just the graphic, flat on the page. My tshirts are not flat, and I don’t live in flatville.
Well done TypeTees team. Thanks for being real. Really real.

MacCase product view

If you sell a physical product, and intend to sell it online – please, show me a big enough preview to see the product in detail.

I sifted through a few dozen laptop bag web sites tonight, and MacCase had the best preview of their product. I’ll probably buy it, too.

Nothing says “don’t give us your money” like a tiny preview on an online store. Do your best to give me as close to the experience as holding it in my hands as possible.

MacCase product view
If you sell a physical product, and intend to sell it online – please, show me a big enough preview to see the product in detail.
I sifted through a few dozen laptop bag web sites tonight, and MacCase had the best preview of their product. I’ll probably buy it, too.
Nothing says “don’t give us your money” like a tiny preview on an online store. Do your best to give me as close to the experience as holding it in my hands as possible.