From a UI (User Interface) design perspective, big name web sites at times can get boring or mundane after a few years in their static design form. It takes some real bravery with “creative zeal” for a UI designer to spearhead some unique and novel “tweaks” to the web site they are in charge of without losing the original idea or the unique branding behind their design.
By definition, UI Novelty is a definition for “the addition or interactivity or other effects, graphic enhancements like ‘add ons’ for a web site or certain elements of a site like the main logo presented as part of a companies brand on a web page. This includes ‘hidden eggs’ on a site that when clicked, cause another novel animation or change.”
More importantly, UI Novelty can be used as an adjective or noun.
Although subtle, YouTube, Google and Yahoo.com have added some “UI Novelty” to their main page that allows for user participation and interaction using the mouse and keypad arrows at times. Below is a list of examples from these three web sites that exemplify some really cool features I call “UI Novelty.”
YouTube.com
For those You Tube viewers who enjoyed the 80’s arcade classic, “Snake,” and currently use a desktop computer or laptop to view You Tube hosted videos, a quick click on the screen as your favorite video loads will activate the initial process to start the game. Then, with a quick tap of the up, down, left or right arrows on your keyboard you will notice something a tad different with the loading screen. The blinking target or “gray circle” as it appears on You Tube, allows the snake to try and reach its intended target or meal. In the originally “Snake” arcade game, an apple was its meal. However, You Tube seems rather clever in keeping with the overall theme of the gray loading symbol and has not added any extra caveats to the “Snake.”
I found that as my You Tube video is loading, the usual gray loading icon appears. And as with many web and smartphone applications, it may take a while to load. Depending on your Internet connection, most users will be able to click on the loading video without minimizing or maximizing the screen (see screenshot below of You Tube video loading below.)
(Image credit: www.Youtube.com)
Once the video is loading, just click on the center of screen without clicking the minimizing icon (smaller rectangle) or the maximize screen icon at the bottom right of video screen to begin the arcade classic, “Snake.” Of course, don’t expect a green or blue colored snake to appear in your next You Tube. Gray seems to stay consistent with the overall look and feel of the You Tube brand/UI design consistency as seen in the screenshot below.
Screenshot Gray snake darting left as YouTube movie pre-loads.
(Image credit: www.Youtube.com)
As my snake darted to the left of the screen with the help of my left arrow key, the snake’s meal (blinking dot) is randomly posted on the screen like in the classic arcade game. The slithering creature’s tail gets longer as I help it gather its dinner.
My suggestions and caveats: It would be cool if some of the UI designers and programmers who work for You Tube added a box somewhere on the screen so that I could keep track of how many blinking dots (snake targets) I was able to successfully gobble up as my video loads and the snake’s body increases in length.
I also think the “snow flake” icon that is originally added to the bottom of the video panel during winter time (December 21 – March 21 for those living in the Northern Hemisphere) is an interesting aspect of the “UI novelty.” When the snowflake icon is clicked, you will notice how quickly snow is added to the screen. And almost to the point that it becomes quite comparable to “blizzard like conditions!” Brrrrrrrr. But, since I am posting this blog in the late Fall, we shall see what You Tube has in store for winter of 2012!
Note: Don’t bothering trying to play the “Snake” game while watching You Tube videos with an iPhone. Obviously, the programmers working on the “Snake” UI design novelty can’t transfer the desktop UI viewer code over to the smart phone platform for users’ to burn some time as their iPhone or Android loads their favorite YouTube video.
Google.com
A web site whose original focus was to be a fast, yet efficient search engine for indexing all web pages on the World Wide Web, the “Google Doodle” angle has become quite an interesting example of “UI Novelty.” With the ability of the Google.com visitor to interact with some of the more unique and clever Google Doodles like the 40th anniversary of 1980’s arcade classic, Pac-Man, Google has taken their mundane “Google Logo” brand and turned it into something totally unique like birthdays of famous people (Thomas Alva Edison, Gideon Sundback), the celebration of very important Historical and Yearly events (20th Anniversary of the creation of the Internet, Launch of Sputnik, Father’s Day, New Year’s Eve, etc) along with international sporting events (Summer Olympics, World Cup Soccer, etc.) The most recent Google Doodle (September 7th and 8th) involved some rather novel interactive content for Star Trek’s 46th Anniversary. I thought it was quite an interesting play by Google to use the Captain’s deck (Kirk’s that is) as the opening screenshot.
Please see some of the examples and images of the Google Doodle’s below.
Google’s 46th Anniversary tribute to classic television show, Star Trek
Screenshot of StarTrek 46th Anniversary Google Doodle
(Image credit: Google.com)
Remembrance of Thomas Alva Edison’s Birthday Google Doodle below:
Screenshot of Thomas Edison Interactive Google Doodle
(Image credit: Google.com)
Considering the fact that Edison’s invented the light bulb along with many other novel inventions, it comes as no surprise that an animated Google Doodle would be created to highlight the working mechanics behind Edison’s genius inventions.
Link to the Edison Google Doodle: http://www.google.com/doodles/thomas-edisons-birthday
Along with Edison’s birthday tribute, the interactive zipper that divides the “Google logo” in half (a tribute to Gideon Sundback’s invention) was also a great example of “UI Novelty” from an interactive point of view.
Screenshot of Tribute to Gideon Sundback Google Doodle
(Image Credit: Google.com)
My suggestions and caveats: From a UI design perspective, I find that most of the interactive Google Doodles are all coded in Javascript, so no Adobe Flash plug-in needed for visitors. I think that this is a bonus from a UI design perspective because less load time is needed for a Google Doodle created in Javascript than as an embedded .SWF file created with Adobe Flash. I think one suggestion for Google regarding their tributes for the 46th Anniversary of Star Trek would have been to wait until the classic television show’s 50th Anniversary. The 50-year mark is a more significant number in terms of Anniversaries in general. And it would have allowed for extra “UI Novelty” to be envisioned and applied at Google, since they would have a few extra years to perfect their tribute Doodle.
Yahoo.com
Moving onto another web site whose focus was originally a site for “search” like Ask.com, Yahoo.com has had quite an assortment of examples of “UI Novelty.” I think that their ability to integrate “holiday themed” animation within the confines of the area that regularly hosts the “Yahoo logo” in the top left section of their web page, provides a great way for visitors of Yahoo.com to continually pine for the next novel idea.
For example, on the July 4th of this year, Yahoo’s normal logo was replaced by an animation that included a nice assortment of silhouettes of famous cities and part of the United States most would be able to recognize by their landmarks. Also included in these animations were bursts of Fireworks to light up the night sky. Some of these landmarks included the “Arch” in St. Louis, Missouri, trademark unlit neon signs and a cactus that epitomized the state of Nevada, ranch houses and windmills that represented the Mid-west, the Golden Gate Bridge located in San Francisco, California and the Statue of Liberty in New York.
See examples of screenshots of these silhouettes below:
Screenshot of Silhouettes of The Arch in Saint Louis, Missouri with Fireworks display
(Image credit: Yahoo.com)
Screenshot of Silhouettes of Nevada Landscapes with Fireworks display
(Image credit: Yahoo.com)
Screenshot of Silhouettes of Midwest landmarks with Fireworks display
(Image credit: Yahoo.com)
Screenshot of Silhouette of Statue of Liberty, NY with Fireworks display
(Image credit: Yahoo.com)
Screenshot of Silhouette of Golden Gate Bridge in California
(Image credit: Yahoo.com)
From a UI perspective, I thought that the novel part of the animated sequences is the way Yahoo highlighted how different areas of the United States look with a display of fireworks exploding in the background and integration of silhouettes.
In the past, Yahoo.com has created a few notable animated logos for Halloween, Christmas, New Year’s, Cinco de Mayo, etc. Furthermore, during Halloween of 2008, Yahoo integrated Michael Jackson’s “Thriller” theme into their logo.
I like the fact that Yahoo’s has added “UI Novelty” to their main logo because it makes visitors wonder what creative thoughts will be applied to their logo for the next big events or holidays.
On my site, I created some examples of “UI Novelty.” These involved Animated/Holiday themed interactive menus banners for an old design that I had for ElementsofColdfusion.net.
The menu buttons that I have at the top of my current site do not include animation within the menu section, but I think there is potential there to do something non – flash related.
Below is a screenshot of one of my interactive menus:
Anyone have any good examples of “UI Novelty” to share?? I am sure I missed a few.
Thank’s for visiting and reading my blog!!
–Matt
Hey, You Can Follow Me On Instagram!
 Novelty){kind=link}