'Net Features : usability

Five Fantastic Web Font Services

Allison Howen — Thu, 06 Dec 2012 19:25:00 GMT

The evolution of the Internet has taught developers that the key to creating a successful website is to build for better usability.

This means that a website should be optimized so that visitors can easily navigate it without having to hunt for what they need. This is why simplicity has become one of the hottest design trends during the last year, because a site without a lot of clutter helps ease navigational issues. While there are many technologies available that can assist developers in making navigational elements more user-friendly, one of the best ways to improve navigation is with typography.

In fact, an innovative use of typography can help developers highlight specific areas of a site. This is because variations of font, such as colors, placement and size, help developers showcase the hierarchy of content on a Web page. And luckily, developers aren’t restricted to using a limited amount of fonts for online projects anymore because the Web is full of resources offering a plethora of fonts that are available for online use, including the five services that can be found below:

Google Web Fonts

Since there is rarely ever an industry that Google doesn’t dabble in, it is no surprise that Google offers typography options. In fact, Google’s service makes customizable open source fonts available to developers. Users have the ability to browse font families and add their favorites into their own Collection. Then, users can refine their collection and have the option to view their favorite styles in a sample layout. The service is free and fonts are easy to implement onto a website.

Typekit

This platform provides developers with a subscription-based library of Web fonts. Currently, the company has more than 250,000 customers, including The New York Times and Twitter. Typekit gives users the ability to preview fonts on numerous browsers and operating systems. Furthermore, users have the option of extending their Typekit account to gain access to additional fonts from participating foundries. Although a trial of the service is free, subscription plans start at $24.99 a year.

Fontdeck

This Web typeface provider offers developers a catalogue that contains thousands of fonts that are enhanced for on-screen use. Fontdeck hosts all font files so that the company can handle browser complications to ensure fonts are reliable. Developers simply need to add a few lines of CSS to implement the fonts, and they only pay for fonts that are live. While each font is priced individually and users pay annually per website, the company states that the typical price is $7.50 a year for each font.

Webtype

This typography service offers high-quality, Web-optimized fonts. Implementation of fonts is easy because users simply need to copy and paste a chunk of code into their site’s HTML. The service hosts all fonts to ensure that all typefaces are automatically upgraded and display correctly on every browser. Webtype offers 30-day free trials for all fonts, with plans starting at $40 per year for sites that receive less than 250,000 page views.

Fontspring

Unlike the aforementioned services, Fontspring offers downloadable fonts for self-hosting. Users simply need to purchase a font type and then they can use the fonts on as many projects as desired with no annual fee. Moreover, this service also offers app fonts, which can be used within mobile applications.

What is your favorite Web font service? Let us know in the comment section below.

Report Studies User Experience of Financial Websites

Michael Garrity — Thu, 29 Sep 2011 17:00:00 GMT

Web-based usability testing tool Usabilla recently conducted a study on the user experience, as well as usability similarities and differences among some of the largest retail banking websites in countries around the world, including the U.S., Germany and the U.K. Though it is focused on sites in the financial sector, many of the takeaways from the study provide insights that can be used to help websites in any industry.

Among the banks included in the report are Bank of America, Barclays, Chase, Citi, Deutsche Bank, HSBC, Royal Bank of Scotland and Wells Fargo.

In the study, 400 participants were asked to perform simple, everyday tasks on these various websites and then provide feedback about their experiences. They were asked various questions, such as which aspects of the sites made them trust the banks, where they had to click to get information about credit cards, where they had to click to find information about how to meet with someone from their nearest branch of the bank, where to click if they have had a card stolen and what they would change or improve about each site.

Usabilla took the data from this report and gave each site a mean score based on accuracy and the time it took users to locate important information on the site. From there, each site was ranked from best to worst based on its overall performance.

Some of the most important findings from the study include the following:

- Often, many of these sites have a divide between a user's priorities and the priorities of the banks. Most of the "information is often based not on the most frequent actions a user takes . . . but on the services the bank wants to sell."

- A user's trust in a website is based largely on visual factors. Pages that display a padlock icon by their login and sign-in sections are often much more trusted than those who don't. Also, if they have clear banners and links that make reference to their security measures or programs, they appear more trustworthy; on the other hand, sites with many ads and/or offers appear less trustworthy.

- Most banks performed poorly when it came to offering a "Lost Credit Card" button by failing to place one somewhere that was easy for users to access. Many of the participants in the study said that "the experience of losing a credit card could be much less stressful" if banks were to make this button simpler to find on their websites.

- The sites with the cleanest designs on their credit card pages performed the best in the survey, with all participants agreeing that too much information made it difficult to find desired content.

"The retail banking sector occupies a critical corner on the Internet, and consumers place their financial livelihood in these companies every day," says Paul Veugen, Usabilla Founder and CEO. "We decided to test and highlight these leading retail banking websites due to the level of trust that consumers place in them combined with the intrinsic customer-centric nature of the banking sector."

Of course, it should go without saying that much of the information gleaned from this study can be worthwhile for any website. For instance, a common issue on many webpages is that businesses often don't adapt fast enough to meet user needs or wants, and recent trends on many sites are swinging towards customization for users. Likewise, it has long been known that the more cluttered a page is, the less usable it will be for people visiting the site.

Thus, it is good for website owners and designers to pay attention to these kinds of reports because, if nothing else, they show that even major companies can still make mistakes on the Web. The major findings of the study, when broken down to their essentials, are all about having a clean and easy-to-follow design and providing relevant content to users. I think that those concerns should be contemplated by any website.

User Experience Report on Travel Websites

Pete Prestipino — Wed, 17 Aug 2011 01:00:00 GMT

Web-based usability testing tool Usabilla published an interesting report today on the user experience and usability of websites within the travel industry.

Participants who tested the hotel and comparison websites were asked questions about what they liked best and least on each company’s homepage, while participants who tested the airline website home pages were asked to locate where they would click to print their boarding pass and were timed to see how long they took.Airline sites tested include American Airlines, Delta Airlines, United Airlines, and travel sites inclde Sharaton, W Hotels, Priceline, and Travelocity among others. 800 people participated in the study.

“The travel sector occupies a very recognizable corner on the Internet, and there are a myriad of ways to book an airplane ticket or accommodation,” said Paul Veugen, CEO and founder of Usabilla. “Given the intrinsic customer-centric attitude of the travel sector, these companies strive to deliver a pleasurable online customer experience by embracing the importance of usability and user experience, which is why we decided to test and highlight them.”

So did the travel websites in focus live up to the high expectations?

Among airlines, The Delta Airlines homepage scored highest in terms of accuracy (67%) of participants locating the boarding pass, and Delta also scored best in terms of the time (15.3 seconds) it took to find it.

Those testing hotel sites revealed some interesting information as well. Those sites with a “clear header, ease of navigation and beautiful visual design” all stood out in a positive way. Sites with “scattered testimonials, social media buttons, buttons that don’t fit with the navigational structure” received negative feedback.

Perhaps most surprising was the responses related to the Facebook ‘Like’ buttons on these travel websites. The reaction of participants to the buttons was overwhelmingly negative across all travel sector tests according to Usabilla. Participants "strongly disliked" the buttons and stated they “really hate the pushy appearance of a company asking for an endorsement” or “begging” a user to ‘Like’ their company or brand without any benefit to the user.

Video-Based Usability Testing for the Enterprise

Pete Prestipino — Thu, 07 Jul 2011 19:00:00 GMT

Usability and remote testing platform Userlytics released an enterprise version of its interactive testing solution this week.

The enterprise-ready platform will provide an executive summary of key events and comments which are linked to the relevant video and timelines. Enterprise users can also download the composited “Video in Videos” (ViV) – video of the tester synched with the video of their onscreen activity – for use in presentations and internal media, and be able to annotate each participation video to highlight important user feedback.

“Despite the wealth of available metrics, marketers and designers are faced with a qualitative blindspot when it comes to analyzing the success or failure of a campaign or digital property,” said Alejandro Rivas-Micoud, CEO of Userlytics. “They may know the click-through rates of various demographics for a particular ad or the abandon rate on an e-commerce site, but they generally don’t know the ‘why’ behind these numbers. With Userlytics, agencies and brands can actually ride alongside as target audiences, in the real world context of their home or work, interact with ads, videos, applications and websites. No other solution provides this type of rich multimedia record of users’ actions, thoughts and feelings or is as easy, fast and cost-effective to use.”

Five Mega-Inspiring Website Designs

Mike Phillips — Thu, 06 May 2010 20:00:00 GMT

Included in the 2010 Webby Award winners and nominees are several categories related to Web design and development. We toured many of these sites and picked a few of our favorites. Not all were winners, but each is a stunning example of how design can be used to educate, promote, entertain and brand.

Each of these sites covers a different topic, but they all have a few things in common. When you land on each page you know exactly what to do. You also know the intention of each site and what you can expect when exploring. Each site is true to its mission and highly-targeted to the intended audience.

While some of the technologies might not be feasible for all Web professionals, these examples do an excellent job of demonstrating how innovation and a well-planned design can transform a Web visit into a full-blown, interactive experience. The results are more clicks, longer time-on-site, higher exposure and better branding.

TED (ted.com)

Ted's tagline is "Ideas worth spreading." Their home page is designed in a way that appeals directly to their information-seeking audience. What first stands out is the irregular look of the page -- not something normally seen in design but that demands immediate exploration. Each photo includes a person's face; experts in the topic they discuss. It's an excellent job of establishing immediate credibility. Hover over the image and you get a synopsis of the story. You will also see the number of comments on the story and how many times it has been e-mailed -- fulfilling TED's "Ideas worth spreading" mission. A click-through leads to the expert's video speech on the topic.

TED's navigation is also impressive. On the left the site, stories can be organized by newest releases, most languages, most e-mailed this week, rated jaw-dropping and more. Click one of those selections and the screen reorganizes with new photos -- the largest of which are the most relevant to your selection. And, it's all done without reloading the entire page. It's elegant, easy-to-navigate and useful.

History of Flight (nike.com/jumpman23/historyofflight)

Michael Jordan not only revolutionized basketball but also the shoe industry, the athlete-as-a-celebrity, Nike itself and more. History of Flight is intriguing because it is not only a beautiful website but also a full branding mission wrapped in an engaging user experience.

The Air Jordan Brand is immortalized on this website. Each year's model can be viewed, along with fully-interactive options to learn about that year in Jordan's career, and the Jordan and Nike brand. In the example seen here, we see not only 1998's shoe, but also an option to discover the original Air Jordans along with the story behind them that year (when MJ broke out a pair for what he thought would be his last game in Madison Square Garden, and scored 42 points). Click the clock at top and you are presented with a TV commercial from the period detailing Jordan's life as a businessman and Nike juggernaut.

History of Flight is brand curation at its very best.

LIFE (life.com)

LIFE Magazine has become known for their riveting, sometimes disturbing photography. So, when you hit the home page and see "Today's Top Photos" you feel right at home and you know what to do. Start clicking through the slider and you not only get photos, but a snippet of the story behind the photo. At the top, you can navigate to news, celebrity, travel, animals and sports -- all with accompanying, appropriate photos.

LIFE is determined to engage their users and help spread their interests across the Web. To that end, a "Most Popular" sidebar shows the site's most-visited photo galleries. Click on any photo on the site and the option to share it is presented: via e-mail, RSS, Digg, Facebook, Twitter and more.

Wrangler Blue Bell Collection (eu.wrangler.com/bluebell/#/collection)

My first thoughts of Wrangler are cowboys, department stores and cheap jeans. But after seeing their Blue Bell Collection website, things have changed. To enter the site and see the collection, you must unzip the man's jacket. Then, you are guided through six stages. In each, you can drag the man all over the screen. He's in different Wrangler gear in each panel. It's immersive and entertaining, but you also get to see the clothes in action, how they move with the man with each swipe of the mouse. This experience alone is far ahead of most other clothing retailers' presentations of their wares and worthy of special attention.

Wonderwall (wonderwall.msn.com)

What do celebrity seekers want most? Gossip. And how do they identify celebrities? By their glamorous photographs. Wonderwall delivers both. Wonderwall's home page is pieced together using celebrity photographs and short headlines. Hover over a photograph and more detail is revealed about the story. Click the story and you get detailed information along with links to related information and videos.

What's most interesting is Wonderwall's use of a horizontal slider. Normally considered not user-friendly, it works here. As you slide across a story, not only can you read more (and get exposed to a well-placed ad) but you also are given the chance to comment with your Facebook account. Continue sliding and you are exposed to more photo-navigation prompts, spawning further exploration. Once a user becomes accustomed to the navigation style, it becomes quite easy to continue clicking.

Moms in Business and Everyday Usability

Pete Prestipino — Mon, 04 May 2009 13:43:00 GMT

With Mother's Day a few short days away, perhaps it's time we gave a little respect to the moms. Of course, we couldn't do that without somehow tying it all back to Website Magazine!

StartupNation launched its first annual Leading Moms in Business Competition in January with the support of VerticalResponse to recognize the achievements of mom entrepreneurs across the US.

The top 200 leading moms in business have been announced, but we wanted to call your attention to one particular winner (#30 in the rankings) in Kim Krause Berg. Kim is the owner of Cre8pc.com, UsabilityEffect and Cre8asiteForums, and is the author of a recent article in our special July issue (arrving this week).

"Everyday Usability," the article Kim wrote for Website Magazine was included in our Web Success Weekly e-newsletter this past Friday, because we just couldn't keep it to ourselves. Read "Everyday Usability" now, but make sure to sign up for the newsletters too so that you don't miss out on future insights from great minds like Kim.

Ecommerce Website Usability

Pete Prestipino — Thu, 18 Sep 2008 17:51:00 GMT

What did you spend in man (or woman) hours and advertising dollars last month to drive traffic to your ecommerce storefront? And what will you spend this upcoming holiday season? If you're like most Internet retailers, it might just seem like the total expenditure of a small nation. Is it more than you need? What are the other options to improve long-term customer value? Let's look at some practical tactics for improving the usability of your ecommerce site to increase long-term customer interaction with your products and your brand.