الجمعة، 9 ديسمبر 2011

How to Design the Best Navigation Bar for Your Website

Please click here if the email below is not displayed correctly.
Mashable
Friday, December 09, 2011
TRENDING STORIES IN TECH & GADGETS
Sunday Night Is Most Popular Time to Download Android Apps
A History of Western Typefaces [INFOGRAPHIC]
10 Premium Android Apps for 10 Cents Each
ALL STORIES IN TECH & GADGETS

How to Design the Best Navigation Bar for Your Website
Thursday, December 08, 2011 11:13 PMDaniel Alves

Daniel Alves is the design director for the small business web design division at the digital marketing and web design company 352 Media Group.

The navigation bar is the most important design element on a website. Not only does it guide your users to pages beyond the homepage, but it's also the singular tool to give users a sense of orientation. With this in mind, it's important to adhere to time-tested design and usability conventions. Doing so will give your users a comfortable and easy reference point to fully engage with your content.

Despite the necessity of an accessible navigation bar, usability studies on navigation across the web aren't positive. One study by User Interface Engineering shows that people cannot find the information they seek on a website about 60% of the time. While this failure rate might be acceptable for your average blog, a business website simply cannot afford these stats. Even worse, many users often find navigation usability extremely frustrating, citing annoying hover errors and inconsistencies. Another study by Forrester found that 40% of users do not return to a site when their first visit is negative.

So how do you ensure that your users are able to quickly and easily find the information they need?

The Basics

Employ these basic concepts to help users move more efficiently through your website.

Start with content. Believe it or not, most websites start backward, meaning a designer will suggest navigation items before determining all the content possibilities. This isn't entirely unusual -- often the content isn't ready before the design process begins. Jeffrey Zeldman, a usability guru, suggests, "Content precedes design. Design in the absence of content is not design, it's decoration."

It's important to properly analyze and organize all your content into a logical and highly usable structure before even considering design choices. Once you accomplish this, only add complexity if absolutely necessary for your users.

Don't overwhelm. The main role of a navigation bar is to provide your user with a choice. Overwhelming a site visitor with too many options impedes his ability to quickly make a choice. A navigation bar with five to seven channel items is sufficient organization for most websites. Plus, it fits nicely in the width of most website designs. Once you reach eight navigation options, you severely limit readability and usability due to width constraints.

Keep it simple. Use precise and recognizable words in the navigation bar. Refrain from long phrases that consume screen real estate by limiting each navigation item to 12 characters or less. Also, don't use words that an average user wouldn't completely understand. People are used to conventions; therefore, err on the side of familiarity. For example, use "Contact Us," not "Get in Touch" or "Let's Talk." Finally, leave out unnecessary words that don't add anything to the navigation item. Instead of "In the News," consider simply "News."

Actions on the right. Because people read from left to right, they naturally expect action links on the right-hand side of the navigation bar because moving right suggests moving forward. Use the left side for more informational links. The exception is the "Home" link, which as a backward action, should be furthest left.

Avoid Flash, for the most part. While Flash is generally frowned upon by usability experts, the presents aesthetic possibility. Flash's biggest problem is that it typically is not implemented in a way accessible to screen readers and mobile devices. And while you don't want to implement the actual navigation with Flash, you can get away with embellishing an HTML/CSS Navigation Bar with Flash to add visual interest and retain usability. One great example of this is the Atlanta Botanical Garden website (above).

One-Level Navigation Bars

Now that you know a few basic principles about creating a highly effective navigation, let's learn from already existing navigation bars, including one-level bars, drop-down multi-level bars and mega drop-down bars. While you'll ultimately decide which type of navigation works best for your website, we can show you what to do and what not to do depending on the type of navigation bar you eventually choose.

Apple vs. CNN

Experts have often heralded Apple as the gold standard in web design. The company has managed to distill everything it does into seven links, not including the logo and a search bar. It's the epitome of simplicity and straightforwardness -- from one of the largest companies in the world.

To its credit, CNN has to cover an entire planet of news, which makes it somewhat understandable that its site features a whopping 16 navigation bar links. While this navigation structure might work for CNN, it's highly unreasonable for your average personal or business website. Cramming this many links in the full width of the website hinders readability by forcing a small font size and very little negative space on either side of a link. On a practical level, it's a huge chore to read through every single link to decide where you need to go.

Drop-Down Multi-Level Navigation Bars

Drop-down menus became very popular at the end of the '90s during the dot-com boom because they allowed a user to get to any page on a website with one click. While that may seem like a huge advantage at first, the option presents several usability problems if done incorrectly. Many users find these types of navigation bars frustrating because they require precise cursor movements in order to successfully move through deeper levels. With this in mind, it's best to reserve ample vertical and horizontal space for each link so that users can navigate without clicking on the wrong page.

Denny's vs. Sony

Earlier this year, Denny's new website design that was met with mixed reviews. On one hand, the website featured an innovative and technically complex browsing experience, but for many critics, it was overdone. The navigation bar features gimmicky JavaScript "enhancements" that actually slow the user down. For example, when you hover over a link with the cursor, it takes a fraction of a second for the animation to fully reveal its contents. Even that fraction of a second is slower than our mind's ability to move forward.

Sony, sticking true to its understated style, provides a no-nonsense drop-down menu that gets the job done efficiently. Sony's helper icons next to links specify parent and action links. Overall, Sony's navigation bar responds instantly and manages to stay out of the user's way with its subtle yet effective design.

Mega Drop-Down Navigation Bars

Mega menus are the newest design craze for large sites with a lot of depth and categories, such as Zappos and The White House. These menus are usually only two levels deep, but the second level features a large panel complete with images or multiple columns of links. The benefit to these menus is that a site not only provides more links for the user, but also includes context and hierarchy within those links.

Target vs. Lowe's

A mega menu's blessing can also be its curse. Sure, these navigation bars give you more room to include links, but without proper hierarchy and context, mega menus can quickly turn into a sea of unnavigable options. Perhaps the best example of this is Target.com. It doesn't take long to see that the company has crammed way too many links in its mega menu, without the proper hierarchy or context.

While it might seem convenient that a user can get to Target's "Spice Storage" department directly from the second level of its menu, is that really necessary? Including links like this creates too much noise and doesn't let the user focus on the important higher-level category items. Another big no-no is the sheer size of Target's menu. Some of the mega menu panels exceed the height of a standard 13-inch laptop screen size. The last thing you want is to force someone to scroll down to use your navigation menu.

Target could learn a few things from Lowe's website. Lowe's has managed to provide a wealth of links with plenty of hierarchy and context. For every panel of links, the company has made the most popular and timely links stand out by elevating them to large blocks of thumbnail images.

By distinguishing the most popular items, Lowe's makes it easy for users to access the links they're most likely to click anyway. The thumbnail images also contribute greatly to context. By providing recognizable images for their most popular categories, the user doesn't even have to read to understand which part of the menu he's in. It's akin to walking by Lowe's brick and mortar store, and scanning the contents of each aisle to zero-in on your desired product.

Conclusion

When choosing a navigation bar type, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator you need better content planning and organization. If you absolutely need to give your users so many options directly inside the navigation bar menu, follow the principles mentioned above to create an efficient and enjoyable experience for your users.

Image courtesy of iStockphoto, mkurtbas



App Store Rewind: Apple's Top Apps of 2011
Thursday, December 08, 2011 9:51 PMStephanie Buck

Apple released the list of its best and most popular apps on Thursday. The App Store Rewind features 20 categories from Travel to Games, and names the top five apps of each category. This year the Rewind separated iPhone and iPad apps, with some of the apps overlapping.

You probably won't be all that surprised by some of this year's top winners: Instagram and djay, to name a couple. Read on to discover some of our favorites. Are you surprised by any of Apple's choices? What didn't make the cut that should have? Sound off in the comments below.



Sunday Night Is Most Popular Time to Download Android Apps
Thursday, December 08, 2011 6:04 PMSamantha Murphy

Android posted a series of infographics on Thursday with impressive app stats to celebrate its 10 billionth download from the Android Market.

Android users from 190 countries download apps every day, according to one of the infographics. The U.S. is not the most app crazed country either -- it ranked fourth behind South Korea (no. 1), Hong Kong (no. 2) and Taiwan (no. 3). Rounding out the top ten includes Singapore (no. 5), Sweden (no. 6), Israel (no. 7), Denmark (no. 8), the Netherlands (no. 9) and Norway (no. 10).

Meanwhile, the top categories for Android app downloads include games (25.6%), entertainment (12.2%), tools (11.7%), music (4.28%) and social (4.08%).

But the most interesting tidbits were associated with how Android owners use their apps. About 12 billion miles are navigated on Google Maps each year -- which is equivalent to more than 37,000 trips to the moon -- and 100 million words are translated every week in 200 different countries on Google Translate.

As for when most people download apps, searching through the Android Market the night before the work week starts is evidently a common activity. The most popular time to download an Android app is 9:00 p.m. on Sunday, while the least popular time to do so is just seven hours later at 4:00 a.m. Monday morning.

Other interesting Android app stats include the following:

About 1.87 million hours were spent on the popular movie database app IMDb in the past four months.

The equivalent of 5,054 years are spent playing with popular gaming app Asphalt would owe $3.2 billion in speeding ticket fines if they took their driving habits to the streets.

10 billion cans have been knocked down playing Can Knockdown. That's a whole lot of cans.



10 Premium Android Apps for 10 Cents Each
Thursday, December 08, 2011 5:54 PMChristine Erickson

To celebrate the Android Market surpassing its 10 billionth download, Google is running a promo that includes 10 premium apps for 10 days at only .10 each.

Thursday marks day three of the Android promo, but it seems like yesterday's apps, such as Fruit Ninja and Air Sync by doubleTwist are still selling at the reduced price. (Although they could go back to normal price at any time.)

Here are the 10 featured apps in the promo today.

Image courtesy of Flickr, svet



Senators Press ICANN on Generic Top-Level Domains
Thursday, December 08, 2011 5:48 PMClickZ

Senators asked the Internet Corporation for Assigned Names and Numbers (ICANN) to slow down the process of releasing new top-level domains Thursday at a hearing of the U.S. Senate Committee on Commerce, Science and Transportation. But the discussion was moot. ICANN, not under the governance of the Senate, sees it as a done deal.

Dan Jaffe, EVP of government relations for the Association of National Advertisers (ANA), told the Senate committee that brands might have to spend $2 million or more to acquire new top-level domains, or TLDs, to prevent cybersquatters from registering them.

Angela Williams, SVP and general counsel for the YMCA in the U.S., said her organization already had been the victim of cybersquatting.

ICANN, the not-for-profit organization charged with handling domain-name issues, began to consider removing restrictions on gTLDs - the letters to the right of the dot Internet URLs - in 2009. New gTLDs could be anything from a product category, such as .hotel, to a brand name, such as .coke.

But the ANA and other organizations complain that companies would be forced to undergo additional expense to defend their trademarks, while consumers would be confused about whether, for example, web addresses ending in .coke really were managed by Coca Cola.

Wednesday, Rod Beckstrom, ICANN CEO, warned companies they needed to prepare for the introduction of the new generic Top Level Domains (gTLDs). In an ICANN press release, he said, "Time is short. If you have not done so, now is the time to get expert advice and get your marketing people engaged to take advantage of new opportunities ... If you do not choose to apply, you should still pay attention to those who do, and use the protections built into the program to safeguard your brand or community."

ICANN has said that its decision is the result of months of meetings and deliberation by all stakeholders.

Jaffe, testifying on behalf of the ANA and the Coalition for Responsible Internet Domain Oversight (CRIDO), a coalition of 154 national and international companies and trade associations, complained that ICANN had ignored 12 recommendations made by law enforcement and asked, "If all these groups feel so strongly, where is this consensus?"

Venture capitalist Esther Dyson, ICANN's original chair, said, "Generic TLDs create opportunities for entrepreneurs but not for the economy. It's a big waste." For example, she said, "Either Marriott.com and Marriott.hotel are the same, in which case they're redundant. Or they're different, in which case it's confusing -- without adding any extra value, because there's only one Marriott."

ICANN SVP Kurt Pritz told the committee that if two different entities want to register the same gTLD, they will be encouraged to work it out between themselves, instead of auctioning the gTLD to the highest bidder. He pointed out that the $185,000 registration fee and other requirements will keep unqualified registrars out of the game, and added that ICANN will renegotiate its contracts with domain name registrars to include as many of the law enforcement recommendations as feasible.

"If they can't take care of cybersquatting now, how will they be able to with thousands more top-level domains?" Jaffe said. "Every top-level domain generates thousands and hundreds of thousands of defensive domain registrations. Companies will have to buy their names back from cybersquatters or buy a top-level domain. We're talking about billions of dollars here."

Dyson added, "With new TLDs, there will be even less oversight, because ICANN is already stretched."

Pritz denied there would be a dramatic increase in the need for defensive registrations. He said the ICANN plan includes trademark protections that will let brands protect their names, a rapid take-down system, and a post-delegation dispute resolution process where trademark owners can go after registrars who abuse their trademarks.

Minnesota Sen. Amy Klobuchar asked, "Who is really pushing for this?"

According to .NXT, an information service covering Internet governance and policy, only seven brands have so far submitted applications for new extensions, including Deloitte, Aigo Digital Technology and Canon.

Pritz responded that the decision is the result of "a consensus-based process."

Acknowledging that the Senate had no authority over ICANN, committee members pled for putting on the brakes. ICANN plans to begin selling gTLDs on Jan. 12.

When Klobuchar mentioned a 2010 study that showed that a slower rollout might address the concerns of businesses and advertisers, Pritz reiterated ICANN's schedule. "The application window will open on Jan. 12 and close on April 12," he said. "We are committed to evaluating the process after the initial round."

He added that, in two previous times that ICANN had added gTLDs, it limited the type and number, but found that the expected benefits hadn't been realized.

West Virginia Sen. Jay Rockefeller was conciliatory, acknowledging that ICANN had gone through a lengthy process and that there were opportunities, as well as challenges. He said, "I hope we can phase the expansion over time and not be regretful it was done too hastily."

-- Susan Kuchinskas, ClickZ



Bug in Adobe Reader Could Endanger Your PC
Thursday, December 08, 2011 5:38 PMPeter Pachal

Describing a vulnerability in some of its reader software as "critical," Adobe identified a flaw that could "potentially allow an attacker to take control of the affected system."

We're not just talking about your mom's e-books. Adobe says hackers have used this flaw in targeted attacks against at least one U.S. defense contractor.

Some sharp computer nerds at Lockheed Martin and the Defense Security Information Exchange, a defense-industry alliance created to quickly respond to cyber-threats, spotted the vulnerability and alerted Adobe. Adobe says the flaw is being actively exploited, though only on Windows.

This vulnerability highlights one of the problems that PDFs face. They're simple, adaptable and almost universally accessible. That wide-ranging usability makes them the perfect Trojan horse for hackers. After all, everyone on almost every platform has a PDF reader, so sometimes evildoers hide malicious code in PDF files that users can easily unwittingly open.

Reader software has built-in security to guard against malware, but sometimes this security has holes.

The flaw exists in both current and past versions of Adobe Reader, but it's the earlier apps that are most vulnerable. Adobe Reader X (10.1.1) has the flaw in both Windows and Mac platforms, but it won't be a problem if you open documents in protected mode (the default). Earlier versions (both Windows and Mac) of Reader have the vulnerability, and it's being exploited in 9.x software for Windows. Adobe says it'll have a fix for those no later than Dec. 12, 2011. Fixes for Unix versions and the unprotected mode of Adobe Reader X will come by January 12, 2012.

Of course, the easiest way to protect yourself is to simply download and install Adobe Reader X right now, and leave those defaults alone. You have been warned.



Apple Reveals More Details on Spaceship Campus [PICS]
Thursday, December 08, 2011 3:53 PMSamantha Murphy

Apple has updated its plans for a cutting-edge "spaceship"-like campus that resembles something you might find in an episode of The Jetsons.

More details about the construction of the eco-friendly Apple Campus 2 were posted online this week by the Cupertino, Calif. city council. The enormous second campus - which features a sleek, circular main building with glass surrounding the exterior - will fit 13,000 employees across a whopping three million square feet and is expected to open in 2015. It will also be in Cupertino, where Apple's current corporate headquarters is located.

The new renderings show a dark-colored roof with photo-voltaic solar panels, a corporate auditorium, additional parking and a jogging path. Images were also updated to propose a 45,000 sq. ft. fitness center, which is 20,000 sq. ft. more than its original proposal. The fitness center is also now a level shorter.

Apple is known for its design experimentation, especially with large pieces of glass. Its iconic Lourve-like Fifth Avenue store in New York City has received global recognition for innovative design.

Late Apple founder Steve Jobs first announced the company's expansion plans at a Cupertino town hall meeting in June: "It's a little like a spaceship landed," Jobs said.

"We've used our experience making retail buildings all over the world now, and we know how to make the biggest pieces of glass in the world for architectural use," Jobs added, in what was to be his last public appearance.

Earlier this year, Apple submitted a 175 acre development proposal to replace existing office and research buildings in the area - most of which was previously occupied by the Hewlett Packard (HP) campus. However, the proposal was met with criticism from the community. Gilbert Wong - the mayor of Cupertino - said the city would not likely approve the concept, but officials in nearby cities have voiced their opinion in favor of the construction.

In September, Cupertino held a town hall meeting to discuss environmental topics and alternatives that should be evaluated in the creation of the campus.

It's unknown how much the structure will cost, but Apple Insider reported that the company's capital expenditures in 2012 are expected to increase by $3.4 billion as it readies for projects including the Apple Campus 2 and a solar farm in North Carolina.

For latest renderings of the project, check out the images below.



Sony's SimulView Could End Split-Screen Gaming for Good
Thursday, December 08, 2011 2:55 PMZachary Sniderman

Remember having to cover part of the television when playing a split-screen video game so your friends wouldn't cheat by looking at your screen? Well no more we say! Sony has tapped the miracle of 3D technology to let you play your favorite split-screen games in the privacy of a pair of 3D glasses.

The Sony 3D display is a small, relatively inexpensive 3D-capable television paired with active 3D glasses. These glasses, however, also make it possible for two people to look at the screen and receive two entirely different images. A player can load up a game and enjoy a full-screen view while a friend can play the same game but see their own full, unique screen. Sony calls this "SimulView."

3D technology in general works by sending two images of the same scene at different perspectives to each of your eyes. Your brain automatically converts the difference between the two images, thereby creating the illusion of depth. 3D glasses use fast shutters, which alternately show and black-out the image from one eye to another.

SimulView takes advantage of this property. Instead of sending two similar but different images to the same person, SimulView shows just one of the images to each set of glasses. Because of this, SimulView delivers a full-screen 2D image to each player, but from their in-game point of view. In other words, no more split screen, no more loss of screen real estate as your avatars' views share the same 24-inch display, no more worrying that Player B can see your secret plan to capture the flag.

We had a chance to try the display out with Motorstorm Apocalypse and it works even better than advertised. We were able to play a multiplayer game without any ghosting (a bleeding of images) and great fidelity. One downside is that the image is significantly darker thanks to a tint on the glasses and the fact that each player is effectively only getting half of the displayed image.

It is possible, however, to switch the view by clicking a small button on top of the glasses, letting you see your friend's screen instead of yours.

The 24" display officially came out in November for $499.99 which includes a full HD 1080p display, Motorstorm Apocalypse and one pair of glasses. If you want to check out SimulView, you're going to have to shell out another $69.99 for a second pair.

A spokesperson for Sony said that other games will gradually support SimulView, which can be applied retroactively to games with a downloadable patch. Because SimulView is in 2D, games will be able to support it without having to convert the game into 3D.



Twitter Unleashes Embeddable Tweets
Thursday, December 08, 2011 2:15 PMBrian Anthony Hernandez

Along with Twitter's redesign announcement Thursday, the service has rolled out a new way to let website developers and bloggers embed tweets that give visitors the ability to reply, retweet and favorite without leaving the page.

Twitter users now can place embeddable tweets on their websites by simply using one line of code. A single-click action also lets visitors follow the creator of a tweet.

Here's an example embedded tweet from my Twitter account:

Twitter just unveiled a new design for Twitter.com and TweetDeck ? on.mash.to/sUyc1d— Brian A. Hernandez (@BAHjournalist) December8, 2011

"Try it on your website by clicking 'Embed this Tweet' from any permalink page in the newly launched Twitter," Twitter's Brian Ellin said in a blog post that provides an example of an embedded tweet. "If you use WordPress or Posterous Spaces, it's easier than ever to embed Tweets."

The "Embed this Tweet" link will lead users to these customization options. Users can then copy and paste the markup for use on their websites. I clicked centered for my embedded tweet, which you can play with above.

For full instructions, click here, where you can also learn how to render the tweets using oEmbed.

Twitter also introduced new methods to distribute the recently revamped tweet, follow and hashtags buttons.

"The new #hashtag button tells your visitors there's an interesting conversation happening on Twitter, and lets them join in with just one click," Ellin wrote. "The @mention button encourages visitors to Tweet to your account, driving public conversation directly from your website."

How useful do you think these changes will be for website owners?



My Xbox Live Hits the iOS App Store
Thursday, December 08, 2011 12:14 PMZachary Sniderman

Xbox has just released the My Xbox Live app for iOS. The app follows close on the heels of a massive update for Xbox 360 which turns Microsoft's video game console into a gesture and voice-controlled media hub.

The free mobile app is a companion to the 360, allowing users to access their Xbox Live profile and achievements, edit their avatar and connect with friends over the social web. No, you cannot play Xbox games through the app.Microsoft and Apple have had a complicated rivalry over the years as the companies butted heads while showing some begrudging mutual respect. The release of My Xbox Live is a nice example of cross-pollination.

Apple doesn't have a home console so there's little to lose by allowing Microsoft's games-based app to go live. My Xbox Live might be a welcome addition to the app market but Microsoft is still withholding some functionality. The tech giant is developing another app, specific to Windows phones, which will integrate with the 360's new features such as allowing users to browse through media and cloud data as well as use their phones as remote controls for their console.

The iOS app, which runs on the iPhone, iPod touch and iPad and requires iOS 4.3 or later, is a nice olive branch in the games arena, but will it lead to more Xbox apps for Apple products? Let us know your thoughts in the comments below.



 
Manage Subscriptions   Login to Follow   Jobs   About Us   Advertise   Privacy Policy

You are receiving this email because you subscribed to it from Mashable.com.
Click here to unsubscribe
to future Mashable Newsletters. We're sorry to see you go, though.

© 2011 Mashable. All rights reserved. Reproduction without explicit permission is prohibited

ليست هناك تعليقات:

إرسال تعليق