RSS
 

Posts Tagged ‘Programming and Web Development Lists’

7 Best Practices for Improving Your Website’s Usability

12 Sep


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

Writing content for web users has its challenges. Chief among them is the ease with which your content is read and understood by your visitors (i.e. its readability).

When your content is highly readable, your audience is able to quickly digest the information you share with them — a worthy goal to have for your website, whether you run a blog, an e-store or your company’s domain.

Below are a handful of dead-simple tips and techniques for enhancing the usability and readability of your website’s content.

These tips are based on research findings and suggestions by well-regarded usability experts such as Jakob Nielsen.

This list is not exhaustive, and is meant merely to arm you with a few ideas that you can implement right away. If you have additional tips to add, please share them in the comments.


General Goals of User-Friendly Web Content


Usable, readable web content is a marriage of efforts between web designers and web content writers.

Web pages must be designed to facilitate the ease of reading content through the effective use of colors, typography, spacing, etc.

In turn, the content writer must be aware of writing strategies that enable readers to quickly identify, read and internalize information.

As we go through the seven tips below, keep these three general guidelines in mind:

  • Text and typography have to be easy and pleasant to read (i.e. they must legible).
  • Content should be easy to understand.
  • Content should be skimmable because web users don’t read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.

What simple things can we do to achieve these goals? Read on to see.


1. Keep Content as Concise as Possible


It’s pretty well known that web users have very short attention spans and that we don’t read articles thoroughly and in their entirety. A study investigating the changes in our reading habits behaviors in the digital age concluded that we tend to skim webpages to find the information we want.

We search for keywords, read in a non-linear fashion (i.e. we skip around a webpage instead of reading it from top to bottom) and have lowered attention spans.

This idea that we’re frugal when it comes to reading stuff on the web is reinforced by a usability study conducted by Jakob Nielsen. The study claims a that a 58% increase in usability can be achieved simply by cutting roughly half the words on the webpages being studied.

Shorter articles enhance readability, so much so that many popular readability measurement formulas use the length of sentences and words as factors that influence ease of reading and comprehension.

What you can do:

  • Get to the point as quickly as possible.
  • Cut out unnecessary information.
  • Use easy-to-understand, shorter, common words and phrases.
  • Avoid long paragraphs and sentences.
  • Use time-saving and attention-grabbing writing techniques, such using numbers instead of spelling them out. Use “1,000″ as opposed to “one thousand,” which facilitates scanning and skimming.
  • Test your writing style using readability formulas that gauge how easy it is to get through your prose. The Readability Test Tool allows you to plug in a URL, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.


2. Use Headings to Break Up Long Articles


A usability study described in an article by web content management expert Gerry McGovern led him to the conclusion that Internet readers inspect webpages in blocks and sections, or what he calls “block reading.”

That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we’re actively looking for.

An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.

We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we’re attracted to the headings as we move down the page.

Below, you’ll see the same set of text formatted without headings (version 1) and with headings (version 2). See which one helps readers quickly skip to the sections that interest them the most.

What you can do:

  • Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you’ll write.
  • Use simple and concise headings.
  • Use keyword-rich headings to aid skimming, as well as those that use their browser’s search feature (Ctrl + F on Windows, Command + F on Mac).

3. Help Readers Scan Your Webpages Quickly


As indicated in the usability study by Nielsen referenced earlier, as well as the other supporting evidence that web users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47% according to the research mentioned above).

What you can do:

  • Make the first two words count, because users tend to read the first few words of headings, titles and links when they’re scanning a webpage.
  • Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.
  • Use the inverted pyramid writing style to place important information at the top of your articles.


4. Use Bulleted Lists and Text Formatting


According to an eye-tracking study by ClickTale, users fixate longer on bulleted lists and text formatting (such as bolding and italics).

These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.

What you can do:

  • Consider breaking up a paragraph into bulleted points.
  • Highlight important information in bold and italics.

5. Give Text Blocks Sufficient Spacing


The spacing between characters, words, lines and paragraphs is important. How type is set on your webpages can drastically affect the legibility (and thus, reading speeds) of readers.

In a study called “Reading Online Text: A Comparison of Four White Space Layouts,” the researchers discovered that manipulating the amount of margins of a passage affected reading comprehension and speed.

What you can do:

  • Evaluate your webpages’ typography for spacing issues and then modify your site’s CSS as needed.
  • Get to know CSS properties that affect spacing in your text. The ones that will give you the most bang for your buck are margin, padding, line-height, word-spacing, letter-spacing and text-indent.

6. Make Hyperlinked Text User-Friendly


One big advantage of web-based content is our ability to use hyperlinks. The proper use of hyperlinks can aid readability.

What you can do:

  • Indicate which links have already been visited by the user by styling the :visited CSS selector differently from normal links, as suggested by Nielsen, so that readers quickly learn which links they’ve already tried.
  • Use the title attribute to give hyperlinks additional context and let users know what to expect once they click the link.
  • For additional tips, read >Visualizing Links: 7 Design Guidelines.

7. Use Visuals Strategically


Photos, charts and graphs are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content.

In fact, an eye-tracking study conducted by Nielsen suggests that users pay “close attention to photos and other images that contain relevant information.”

Users, however, also ignore certain images, particularly stock photos merely included as decorative artwork. Another eye-tracking study reported a 34% increase in memory retention when unnecessary images were removed in conjunction with other content revisions.

What you can do:

  • Make sure images you use aid or support textual content.
  • Avoid stock photos and meaningless visuals.

Series Supported by join.me

The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

Image courtesy of iStockphoto, Kontrec

More About: web design, Web Design Usability Series


 
 

7 Great JavaScript Resources

03 Jul


As browsers and server-side platforms advance, and libraries new and old grow and mature, JavaScript evolves as well. Staying at the top of your game is important. As a JavaScript developer, you’ll need to keep up with the latest news and learn new skills.

We’ve put together a list of seven of our favorite JavaScript resources to help save you time and energy along the way. Whether you’re a beginner or a seasoned pro, we think you’ll find the sites below both informative and beneficial. If you know of other great resources, feel free to share them in the comments.


1. Mozilla Developer Network




The MDN has become the de facto resource for JavaScript documentation, and is an excellent resource for beginners and seasoned developers alike. Here you'll find the official and complete JavaScript reference, as well as useful guides, tutorials and articles covering everything from the basics of how JavaScript works to its best practices and design patterns. The MDN also has a thorough DOM reference, which we highly recommend checking out as well.


2. JQAPI




JQAPI is an alternative to the official jQuery.com API documentation. If you're a client-side JavaScript developer, chances are you probably have used, or at some point will use, jQuery in at least one of your projects. Whether your use is occasional or daily, you'll want to keep up with the latest development and new features in JavaScript's most popular library. Each new release improves security and performance via a slick, responsive and intuitive interface for quick browsing and searching of jQuery documentation. The UI here really is top-notch, and as a bonus, there's an offline version available for download.


3. JS Fiddle




JS Fiddle is a JavaScript pastebin on steroids. Create, share, execute and test your JavaScript right in the browser. This is a great tool for collaborative debugging or for sharing code snippets. It's also a fun way to perform quick experiments and test out new ideas. Simply combine your JavaScript, HTML and CSS, then click the "Run" button to see the results. You can also validate your JavaScript code against JSLint and save your Fiddle for use later, or share with others. JS Fiddle provides a number of useful features, like the ability to load up common frameworks automatically (to test your jQuery or MooTools code, for example) and as-you-type syntax highlighting, just like you'd get by writing code in your favorite IDE.


4. Eloquent JavaScript




This free ebook is an introduction to programming and the JavaScript language, written by developer and tech writer Marjin Haverbeke. The book reads much like a tutorial, and introduces a number of concepts and real-world applications in a clean, concise style. Interactive examples are also available, which means you can read about various techniques. You'll also get a chance to see them in action, and tinker with the code yourself. We found a lot of positive reviews for this book, so if you're new to JavaScript, this is definitely a book worth checking out.


5. Douglas Crockford's JavaScript Videos




An undisputed expert in JavaScript, Douglas Crockford is Yahoo's JavaScript architect and is one of the individuals instrumental in the planning, development and future growth of the language. The videos and transcripts on the YUI blog derive from a series of talks given by Mr. Crockford about the history of JavaScript, its future and its use today. Though the series is now about a year and a half old, we still think you'll find the videos informative. We certainly recommend watching them for a better understanding of the language, where it's been, how it works and where it's going.


6. How To Node




Not all JavaScript development takes place in the browser. NodeJS is one of the web's most popular server-side JavaScript frameworks. Whether you're a seasoned Node developer or someone who's looking to add server-side JavaScript to his repertoire, How To Node offers a great collection of articles on NodeJS development. This community-driven site offers an excellent repository of Node tutorials that's proven itself useful on a number of occasions. No Node developer toolkit would be complete without it.


7. DailyJS




We've looked at some great tools and reference material, covered tutorials from our favorite libraries and frameworks and touched on both client and server-side JavaScript development. However, we're always searching for something new. DailyJS is a popular JavaScript-focused blog that brings you the latest and greatest JavaScript news, offers tips and techniques, and reviews libraries, plug-ins and services for JavaScript developers. If you're just itching for your daily dose of JavaScript goodness, DailyJS has you covered.

More About: design, dev, features, javascript, List, Lists, web design, Web Development

For more Dev & Design coverage:

 
 

5 of the Best New User Experiences of 2010

28 Nov

Mashable Awards Image

As part of the ongoing Mashable Awards, we’re taking a closer look at each of the nomination categories. This is “Best Website User Experience.” Be sure to nominate your favorites and join us for the Gala in Las Vegas!

When it comes to user experience, designers and developers must do much more than present their users with a “pretty face” web page.

The user experience (UX) of a site or app involves much more than looks; the UX is something that lingers on after the user has left your site. It lies in ease of use, perceived value, whether desired goals were achieved and so much more. The user interface (UI) is only part of that larger experience, but it can contribute much to a user’s impression of the app.

In writing about the best web designs of 2010, form and function each played a large role in determining our choices. But when we think about user experience, function takes absolute precedence.

What sites and apps were the most interesting, the most useful, the most innovative of the past year? In this post, we examine five groundbreaking new UX/UIs from 2010 and discuss how each one expands our expectations of the user experience.


1. Quora


One of the earlier launches this year, Quora was a buzz-heavy private beta service in 2009. As a product of some of the best design minds at Facebook, the site was almost guaranteed to have an excellent UX from the start.

We love Quora’s elegant interactions. It looks simple; it prompts instant and easy engagement; and it takes the hide-and-seek elements of a Q&A site away, leaving the user with a trove of relevant information at his or her fingertips.

We’re not the only ones who love Quora’s design. For a bit of meta navel-gazing, read this Quora Q&A on why people like Quora’s design.

Initially, another thing that made Quora’s UX so excellent was the quality of its membership. Have a question about Facebook? A Facebooker would likely answer it. Questions about venture capital? Here are some actual investors to talk to you. Marketing? Ad execs were on the site, too.


2. Hipmunk


One thing we loved about Hipmunk from the start is that it took a traditionally bad user experience — airline flight search — and made it into a good one.

This startup reimagined the most important element of online flight search: how results are displayed. It took a convoluted, multi-entry/multi-exit process and made it simple to behold and linear to walk through, creating a user experience that is far from the stress-inducing nightmare flight search once was.

The company has also hinted it will be turning its eyes toward other types of travel services soon, possibly hotel search. We can’t wait.

To get the big picture, check out the video above, and the excellent interview blogger Robert Scoble conducted with Hipmunk co-founder Steve Huffman.


3. Seesmic Desktop 2


Seesmic launched a new iteration of its popular desktop app just a couple months ago. Dubbed Seesmic Desktop 2, the application also included an entire marketplace of plugins, making SD2 an all-in-one social media access point — a great set of features for run-of-the-mill social media narcissists, as well as businesses that need more control and monitoring tools for their web efforts.

Seesmic’s Silverlight-built, Mac- and Windows-compatible product also came wrapped in a gorgeous and functional UI with elegant and subtle details, making it a joy to behold as well as a pleasure to use.

During some turbulent times for third-party applications, Seesmic founder Loic LeMeur proved his very salient point: If you make a great product, build in great functionality, and give users a great experience, you can still build a business on someone else’s platform.


4. Flipboard


Flipboard launched this year as one of the first iPad apps that sought to reimagine social media for a new form factor.

The tablet gave designers and developers a chance to think about lean-back, glossy, high-end design experiences. Of course, magazines had a heyday; their content is already almost a perfect fit for the iPad. But when you think about social media content — those messy, spaghetti-like, intertwining and overlapping feeds of drama, irrelevance and the occasional gem — you begin to see what a challenge the makers of Flipboard had on their hands. Could social media be both beautiful and functional on a tablet?

Flipboard integrates personalized Twitter and Facebook feeds to build a social magazine for each user. In an initial review we called it “gorgeous and a pleasure to use,” and the app has continued to rack up the platitudes from social media junkies around the web. Its core value proposition is more than just its beautiful, mag-like design; it makes the experience of reading social feeds simpler, faster and better.


5. Roku


Without a doubt, 2010 has been the first big year for Internet-connected living room devices. We’ve seen cool things in the past from PlayStation, Xbox and Boxee; however, 2010 brought something new: affordability and ease of entry.

Roku’s set-top boxes start at just $60; already priced to win. Each model also comes with built-in WiFi and they are easy to install — they practically set themselves up. They connect to some of the most popular Internet content providers, including Netflix, MLB.tv and now Hulu, as well.

The Roku UI is simple, clean, bright and intuitive; it reminds us of the more user-friendly gaming interfaces, like that of Nintendo’s Wii. It’s a design language that says, “I’m not technical; I’m fun.” Very quickly, the design itself fades into the background and the content becomes all the user notices.

In a word, Roku’s UX is amazing because it makes something that was supposed to be complicated and scary (bringing Internet content to the living room) inexpensive, easy and a pleasure to use.


What Are Your Picks?


Those are five of our favorite user experiences from 2010; we’d love to know what impressed you this year. In the comments, tell us about the apps, devices and websites that you’ve loved using throughout 2010 or nominate them for a Mashable Award.


The Mashable Awards Gala at Cirque du Soleil Zumanity (Vegas)


In partnership with Cirque du Soleil, The Mashable Awards Gala event will bring together the winners and nominees, the Mashable community, partners, media, the marketing community, consumer electronics and technology brands and attendees from the 2011 International CES Convention to Las Vegas on Thursday, January 6, 2011. Together, we will celebrate the winners and the community of the Mashable Awards at the Cirque du Soleil Zumanity stage in the beautiful New York New York Hotel. The event will include acts and performances from our partner Cirque du Soleil Zumanity. In addition, there will be special guest presenters and appearances.

Date: Thursday, January 6th, 2011 (during International CES Convention week)
Time: 7:00 – 10:00 pm PT
Location: Cirque du Soleil Zumanity, New York New York Hotel, Las Vegas
Agenda: Networking, Open Bars, Acts, Surprises and the Mashable Awards Gala presentations
Socialize: Facebook, Foursquare, Meetup, Plancast, Twitter (Hashtag: #MashableAwards)

Sponsorships are available. Please contact [email protected] for more information.

Register for Mashable Awards Gala at Cirque du Soleil Zumanity stage (Las Vegas - 2011 International CES convention) [Ticketed Event] in Las Vegas, NV  on Eventbrite

Thanks to our sponsors:

Mashable Awards Gala Partner:

cirque logo From a group of 20 street performers at its beginnings in 1984, Cirque du Soleil is now a global entertainment organization providing high-quality artistic entertainment. The company has over 5,000 employees, including more than 1,200 artists from close to 50 different countries.

Cirque du Soleil has brought wonder and delight to nearly 100 million spectators in 300 cities on five continents. In 2010 Cirque du Soleil, will present 21 shows simultaneously throughout the world, including seven in Las Vegas.

For more information about Cirque du Soleil, visit www.cirquedusoleil.com

Mashable Awards Online Partner:

The Fresh DietHave you ever wished for your own personal gourmet Chef?

The Fresh Diet is like having a Cordon Bleu chef prepare your meals in your own kitchen. There’s no cooking, cleaning, shopping – just fresh prepared delicious meals, hand delivered to your door daily! Whether you want to lose weight or just want to eat healthy, The Fresh Diet can help you meet your goals. The best news, we’re giving away a FREE week of The Fresh Diet every day on our Facebook page. Just click here to become a fan and you could be the next winner. Join now!

Mashable Awards Partner:

Join us at the 2011 International CES®, the global platform for inspired ideas and innovation. With 2,500 exhibitors, CES continues to be the world’s largest consumer technology tradeshow and always reflects the dynamic consumer electronics industry. The International CES is not open to the general public and all attendees must be in the CE industry to be eligible to attend the show. Register FREE for the 2011 CES with priority code MSHB, an exclusive promotion for Mashable Readers.

Mashable Awards Category Sponsor:

Research In Motion is a leading designer, manufacturer and marketer of innovative wireless solutions for the worldwide mobile communications market. Through the development of integrated hardware, software and services that support multiple wireless network standards, RIM provides platforms and solutions for seamless access to time-sensitive information including email, phone, SMS messaging, Internet and intranet-based applications including the BlackBerry® wireless platform and the new BlackBerry PlayBook. For the latest on the BlackBerry PlayBook visit the Inside BlackBerry Blog.


Win an iPad!

Join us on Facebook to learn how to enter Dynadot’s I Can Haz iPad Giveaway!

Dynadot is an ICANN accredited domain name registrar and web host where you can register the perfect domain name affordably, reliably, simply and securely. Whether you are a blogger, business owner, or planning on creating the next best Internet meme you need a domain that represents you. Let Dynadot help you establish your web identity today.


Mobile Future is a broad-based coalition of businesses, non-profit organizations and individuals interested in and dedicated to advocating for an environment in which innovations in wireless technology and services are enabled and encouraged. Our mission is to educate the public and key decision makers on innovations in the wireless industry that have transformed the way Americans work and play and to advocate continued investment in wireless technologies.

Our “Mobile Year in Review 2010” animation proves a glimpse into the most notable breakthroughs in the wireless industry this year.


Yahoo! is an innovative technology company that operates the largest digital media, content, and communications business in the world. Yahoo! keeps more than half a billion consumers worldwide connected to what matters to them most, and delivers powerful audience solutions to advertisers through its unique combination of Science + Art + Scale. Yahoo! is headquartered in Sunnyvale, California. For more information, visit the company’s blog, Yodel Anecdotal.

Mashable Awards Gala Silver Sponsor:

Aro Mobile is an intelligent mobile experience that includes better email, connected contacts, smarter calendar and improved browsing.

The Aro system automatically learns what’s important in your life—the people, places, dates and organizations you care about most. In your communications, Aro automatically identifies people, places, events, dates,organizations and locations. From any recognized term, Aro offers quick action menus to speed up your day.

The unique Aro experience is powered by advanced web services: next generation natural language processing and semantic data analytics services. Aro gives you the power to see through the clutter and focus your mobile life.


Research In Motion is a leading designer, manufacturer and marketer of innovative wireless solutions for the worldwide mobile communications market. Through the development of integrated hardware, software and services that support multiple wireless network standards, RIM provides platforms and solutions for seamless access to time-sensitive information including email, phone, SMS messaging, Internet and intranet-based applications including the BlackBerry® wireless platform and the new BlackBerry PlayBook. For the latest on the BlackBerry PlayBook visit the Inside BlackBerry Blog.

Mashable Awards Gala VIP Lounge sponsor:

Influxis image

Influxis specializes in the deployment of creative streaming solutions. Services include large scale deployment, mobile streaming, turn-key applications, and enterprise support with custom network options. With the unique combination of a worldwide network, knowledgeable developer support and nearly a decade of streaming media experience, Influxis is an essential partner to businesses, advertisers, developers, educators, and others who seek expertise in innovative streaming.

Mashable Awards After Party Sponsor:

Research In Motion is a leading designer, manufacturer and marketer of innovative wireless solutions for the worldwide mobile communications market. Through the development of integrated hardware, software and services that support multiple wireless network standards, RIM provides platforms and solutions for seamless access to time-sensitive information including email, phone, SMS messaging, Internet and intranet-based applications including the BlackBerry® wireless platform and the new BlackBerry PlayBook. For the latest on the BlackBerry PlayBook visit the Inside BlackBerry Blog.


Reviews: Boxee, Facebook, Foursquare, Hulu, Internet, Mashable, Seesmic, Twitter, Windows

More About: best user experience, best ux, Flipboard, hipmunk, ix, mashable awards, mashable awards 2010, quora, UI, user experience, ux/ui

For more Dev & Design coverage: