Soup Helps
February 26, 2007
A bit I wrote for ctnow.com’s “5 Places For…” gallery:
…It figures. Less than 24 hours after returning from a long weekend in southern California, I was welcomed back to Connecticut by a winter nor’easter. Five inches of snow mixed with freezing rain, followed by a nasty jolt of bitter cold temps.
I’m not a winter hater, mind you. I like sledding and ice skating and big wool sweaters and cozy fireplaces. And there really is something lovely about the New England landscape when everything is stark white. But the bitter cold… that’s what I hate.
Soup helps. Luckily, living in Connecticut gives us access to some of the tastiest New England Clam Chowder around. So bundle up and head out after work some night for a bowl. My destination of choice was nearby John Harvard’s Brew House in Manchester, CT. The pub/restaurant is a friendly, laid-back place, decorated in warm tones accented by dark wood and dim lighting.
I settled into a comfy booth in the dining area, peeled off my layers of outerwear and eagerly dug into a mini-crock of John Harvard’s hearty chowder. The soup, a staple on the restaurant’s menu, is a straightforward combination of potato cubes and shards of chewy clam with hints of garlic, onion, pepper and a pinch of parsley on top.
Yes, clam chowder is white – the color of snow. But no matter. John Harvard’s super-creamy version tastes good, filled my belly and warmed me up…
3 Unconventional Designs
February 26, 2007
Here are three websites that do not follow conventional web standards.
The sites incorporate Flash-heavy designs with unusual navigation and layout to grab and hold users attention. The unconventional structure of these sites may contribute to confusion among some visitors, but may also enthrall others.
The website for the critically acclaimed 2006 movie “Babel” forces you to first watch a list of its award nominations and wins, including “Golden Globe Winner, Best Motion Picture Drama.” This splash intro forces users to wait and there is no button to “Skip” forward.
Once the “Babel” home page loads, it flickers with images from the movie before a large video window in the bottom half of the screen begins playing. This home page is essentially the one and only page on this site. Clickable elements to show video, photo and text from the film are loaded up in the same two visual boxes on this page.
Navigation is located within a gray horizontal bar in the middle of the page. The white outlines of little squares change color when rolled over and pop up text cues for links. The squares are filled with color after the link has been visited.
Within this navigation structure is another sort of “hidden” sub-navigation. As an example, click on the third square on the bar and get “Photo: Morocco” Users can now view a bunch of photos of Moroccan scenes from the movie in the large window, but only if users realize they need to click on one of the 10 thumbnails that have appeared at the top of the page.
The “Babel” site does not include a logo in the upper left corner, a search box, a site map or a bread crumb trail. But I think the site’s design works for its genre. This is a movie website. Its design is meant to evoke the tone of the film, as well as promote it. I found myself intrigued, and didn’t mind learning how to navigate it. It also comes equipped with a haunting audio soundtrack (and the user can control the volume).
Shimano is an international manufacturer and distributor of cycling equipment and accessories. Its XTR line is designed for mountain bikers and cross-country racers, an audience of active adults, athletes and thrill-seekers.
As such, the XTR product website – www.shimano-xtr.com – is showy. Driven by a flash engine, users pick high or low bandwidth and wait for the site to load. Then a splash page with sound effects is presented. It’s like a commercial. A “skip intro” button is offered on the splash page at the top left.
The next page users are led to has six black squares on it with the words “The Product” in one of them. Click on the words “The Product” and another flash page loads, kind of slowly. Now users are led to a third page (see below), essential the XTR home page, where visitors can finally learn more about Shimano shifters, brakes, drive trains and wheels for their mountain bikes.
Roll over one of the four boxes at the bottom of this “product” page and the boxes will light up to show users they are “clickable.” The company logo for Shimano is located not on the top left of the page, as is conventional, but on the right side of the page. Click this logo and the user will be taken away from the XTR site to the main Shimano corporate site.
A conventional link that says “home” can be found at top left, and leads back to the home page of the XTR site. However, that’s probably the only convention used on this site.
Shimano-XTR’s site does not have a search box, a site map or bread crumb trails. Shimano’s main purpose for this site, it seems, is to introduce a new mountain biking product with a certain brand image and tone. I think it is kind of clunky and too slow to load. But it suffices overall.
Lastly, the website I found that caused the most confusion is the official site for the Magic Hat Beer. I can only assume that this site’s intentionally bizarre design is meant to delight, entertain and bewilder visitors. It follows hardly any of the web standards or conventions.
Magichat.net does not feature a logo in the upper left corner. The logo is in the middle, being sort of “projected on a building.”
The site’s splash page is mandatory – users have to enter their age / 21 and over to enter. There is no search box. It does not offer clear navigation, obvious hyperlinks, or bread crumb trails.
Users are challenged at every turn to find hyperlinks hidden about like Easter eggs within a highly-stylized mish-mash of art that appears on this Flash driven site. There is no site map.
The one convention offered: A “contact us” button situated at the bottom left side of the page.
The question arises of what image the Magic Hat Beer Company is trying to project to the public with this website. The site is visually arresting and artsy, for sure, but the site is also perplexing to navigate.
The Magic Hat site seems to say that this beer company is clever, hip and fun, and those who visit the web site should approach it with that same kind of attitude (or with a few beers in ‘em).
I’m not sure what visitors to this site will end up learning, but if they treat it like a game, they could have a little bit of fun.
3 That Use Conventions
February 26, 2007
Most people use the World Wide Web as a tool, a device to find, retrieve and exchange information so they can carry out the business and leisure of daily life.
The Internet’s most useful/popular web sites tend to be those that don’t force people to solve a navigational puzzle. Rather, these websites incorporate standard design elements – elements that are obvious and familiar to the average internet user.
If visitors feel like they have a “sense of mastery” over a web site, they will achieve their goals and find satisfaction with the experience. But if visitors find a web page confusing and difficult to use, many will click away from the site, feeling irritated and unfulfilled.
Here are three websites that use standard interface components in their design and navigational structure.
IMDb.com is a highly searchable information clearinghouse targeted at movie fans, celebrity hounds and film & TV professionals. The site features a graphical logo in the upper left corner of every page. This logo serves as a standard link back to the home page from anywhere on the site.
Horizontally to the right of the main logo are nine more static global navigation “buttons” that change color when rolled over. These blue buttons are situated on every page of the site and provide links to major areas. IMDb.com does not have an introductory “flash splash” page.
IMDb users can easily spot the site search box. It is prominently displayed at the top center of the home page and all other pages of the site, and it is highlighted with yellow. Click one of the site’s text hyperlinks, and it will change color to indicate it has been visited. Links to sibling areas are uniformly positioned in the left-hand column on inside pages. The site also supplies bread crumb navigation on inside pages.
Online retailing powerhouse Amazon.com owns IMDb.com, a relationship clearly identified at the bottom of every page. A link to site “search” and “help” is available at the bottom, too. The one element IMDb is lacking is a master table of contents or “site map.” But I do not think the site suffers without it, because its search functions superbly.
Washingtonpost.com is the online home of The Washington Post, one of the largest and most read U.S. daily newspapers. The majority of the audience are people who live in the District of Columbia, Maryland and Northern Virginia, as well as people working for and/or interested in the U.S. government, the White House and Congress.
The Post’s online identity resembles that of many other newspaper websites. It has the logo/title at top left on every page which serves as a main link back to the home page. It is organized in columns, with the site search box anchored consistently under the logo.
However, global navigation does not appear down the left side of the home page. Instead, graphical links to major sections are spread horizontally across the top of the site, and include drop down boxes that popup when rolled over. Text links to major sections are listed horizontally at the bottom of every page.
Roll over a headline and its color will change from blue to red. But the headline color will not stay red to show it has been visited.
Washingtonpost.com does not feature a “flash splash” page. But you do have to register (for free) to view full text of articles.
Once you register, notice that breadcrumb navigation appears on all inside pages. It will help you determine what major section you came from.
Washingtonpost.com appears to be consistent with its design and layout. There are links at the bottom to the site map and site index. The many, many informational hyperlinks and graphics at the bottom of the home page and inside pages make it clear that the Washington Post Company owns this website and you can contact them.
I recently used llbean.com to shop for a few new items for my daughter. The website seems to have multiple goals. First, llbean.com serves as the digital identity of the Maine-based outdoor apparel company. Second, it is a retail site for the company’s products and services. And lastly, it is a utilitarian site for existing customers to track orders or sign up for special email newsletters.
The site features the logo in the upper left corner of all pages. That logo is a link back to the llbean.com home page. A text “home” link is also situated underneath the logo.Llbean.com does not feature a splash “flash” page. The white background of the site provides a clean canvas for the dark green, light green and tan accents that surround the product pictures.
The site search box is fixed in the upper left corner, below the logo. Some of the global navigation of the site is provided horizontally at the top with green buttons that say “Shop | Explore the Outdoors | Customer Service | My Account.”
More of the site’s static navigation is positioned in a column on the left. This menu is broken down into categories and sub-categories. Two of these categories include “About LLBean” and “Need Help?” The former has links to company information, contact info and address. The latter has a “site map” link. verall, links change color (red) when rolled over, but don’t stay changed to reveal a visited link.
In addition, LLBean.com offers bread crumb trail navigation on its inside pages. The site is straightforward, consistent and functional, albeit a little-old fashioned.
