Within the Staples SmartCircular site, a new circular viewing mode has been added called ‘Full Screen’. While this is not the first SmartCircular client to deploy full screen (Meijer & Target for example both have this feature) browsing, it is the first time that the new visual ‘Look Ahead‘ feature has been layered in within the slider navigation bar.
This small feature solves a key usability issue that when a user is dragging the shuttle on the slider bar, the user has no idea what content lies within say pages 14-15. By showing a thumbnail image of what content is contained for any given page number, the user can actual have a small idea of what sort of content is on that page. It’s a bit of a copy from the Vista or Windows 7 taskbar which has a similar feature, but none the less a very effective enhancement. At this point, adding this UI element (e.g., Look Ahead) to any and all slider bars (regardless of the circular viewing more) is going to be the ShopLocal’s team recommendation going forward.
Note the small thumbnail image that appears under the shuttle on the page slider bar. This is the visual "look ahead" working really well.
Meijer yesterday unleashed a real great addition to their weekly ad site called Full Screen browsing. Just like a YouTube video when maximized that takes over every inch of a user’s monitor, now when browsing the circular a user can see the largest possible circular page images. It also reduces all of the noise that comes with a full site header, footer and browser menus and toolbars. All of this clutter instantly disappears within full screen browsing. It does make for a more enjoyable, simpler experience.
This will really help improve the readability factor that from time to time be an issue for some users. The only constraint that is inherent to utilizing this type of Adobe Flash player type full screen presentation style is that any keyboard inputs of any kind cancel / end the full screen browsing experience.
Within the typical browse by circular page view that most shoppers choose to use, a new view option has been added called Full Screen.
Once full maximized, everything included the browser bar and skin is covered up. All that remains is just the weekly ad pages. This offers a great, simplified and focused user interface that excels at text readability within the circular.
To help drive awareness and traffic to local market ROP advertisers, Canwest and ShopLocal are launching a new a new product called ‘Zoom To My Ad’. Essentially this expandable Adobe Flex based display ad grabs a set of random ROP advertisers to feature every single impression that it is served. It was built in a way to use the standard IAB display ad inventory, which will allow Canwest to serve these ‘Zoom To My Ad’ promotions through their standard publisher ad server.
Unexpanded leaderboard featuring a random selection of ROP ads for a specific Canwest newspaper web site
Expanded leaderboard which dynamically re-sizes its vertical dimension to adjust to the size & format of the ROP ad that is being "zoomed" to
Target continues a long trend of constant iteration with their most recent release of the online weekly ad site. The most notable new features that were part of this update were:
- Enhanced Product Rollovers: Usually the rollovers that appear within a SmartCircular site follow the mouse cursor. We have now finally broken this old “rule” so that the rollovers do not move around. Rather when the rollovers appear, they have a static position that actually allows a user to interact within the rollover.
- Print A Single Item Of Interest: Offers a simple and well formatted, printer ready view of the product.
- Share (via AddThis.com integration): Creates an easy conduit for a user to re-post an item of interest to many leading social networking and/or bookmarking sites.
So from a standard browse by circular page view...
...a user can trigger a product rollover to appear and then choose to interact with three different calls to action: View Details, Print or Share.
By clicking on the print option, the user is taken to a printer friendly HTML popup
By clicking on Share, the user is taken to a AddThis.com hosted HTML popup layer that enables the item of interest to be shared across a host of social networking sites as well as saves as a bookmark within some bookmarking type sites.
It amazes me all the time how powerful HTML + DHTML + Javascript can be in creating rich, engaging web pages. Some clients, for the various reasons detailed below decide that for their online weekly ad (eg SmartCircular) site they want to have both a HTML (dial-up) and a Flash/Flex (broadband) version of their site.
Top Cited Reasons For Deploying A Matching or Corresponding HTML Version Of A SmartCircular Site:
- Bandwidth / Internet Connection Speed: Some retailer’s customer base is a little behind the technology adoption curve, so to ease concerns around site load and performance times a matching or corresponding HTML site is deployed along side the richer, more animated and engaging flash/flex version.
- Accessibility: Again, one can obtain a very high level of site accessibility using Adobe flash/flex, but some retailers want to be as risk adverse and/or inclusive as possible so a matching or corresponding HTML site is deployed along side with the RIA flex version.
- Adobe Flash Player: To access an Adobe Flex site, one needs to have version 9+ of the Adobe Flash Player browser plug-in installed. There are a few folks out there with either an older version of Flash Player installed or no Flash Player installed. So to still offer this small sub-set of users access to the weekly ad, a matching or corresponding HTML site is deployed along side the more interactive Flash version.
So let’s play a little game. Below are two SmartCircular 4.1 sites. For each client (Target and Toys “R” Us) there are two versions of the site. One in HTML and one in Adobe Flex/Flash. Can you spot the one that was created in HTML and Flex/Flash? The ShopLocal design and UI/UX team has come a long ways to be able to disguise and dress up HTML so much. The illusion can be pretty darn convincing.
Number #1
Number #2
Number #3
Number #4
Answers:
- Toys “R” Us – #1 is the flex/flash site and #2 is the HTML site
- Target – #3 is the HTML site and #4 is the flex/flash site
Leave a comment and tell us how many you got right!
Loading ...
Comments: None