RSS
 

Posts Tagged ‘Web Design Usability Series’

9 Essential Resources for User Interface Designers

16 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.

Designing a great user interface can be a challenge, even for the most seasoned designer. Countless factors need to be taken into consideration and the difference between a good UI and a great one often boils down to paying close attention to the smallest details.

SEE ALSO: 7 Best Practices for Improving Your Website’s Usability

When undertaking such an important and often complex task, it’s helpful to have some handy resources for both education and inspiration. We’ve put together a list of some of our favorites below. Since we can only scratch the surface of the wide variety of UI design resources available, we invite you to share yours in the comments.


Design Inspiration


Let’s start off by taking a look at three great galleries for UI design inspiration.


1. MephoBox


MephoBox is a design showcase that catalogs sites with beautiful interfaces and also collections of common site elements, such as login forms, headers, pagination, and so on. If you’re looking for ideas or approaches to designing specific page elements, MephoBox collections can be a great source of inspiration.


2. UI Patterns


UI Patterns showcases user interface design patterns – com-only recurring trends and best practices in UI design for a variety of elements. Providing more detail than a basic gallery, UI Patterns showcases design patterns, discusses their usage, and the problems each pattern aims to solve, and in what way.


3. Pattern Tap


Pattern Tap is one of the more well-known UI design showcases and is similar to MephoBox in its design pattern collections. Unlike MephoBox, though, the collections are a bit more varied (the site currently baosts 45 collection catagories to MephoBox’s 16), including a showcase of elements like modal windows, slideshows, comments, adevertising design and placement, and more.


Reading up on UI Design


Sometimes it’s not enough to simply look at a design showcase. Often, you’ll want to read about a particular design pattern or approaches to a problem, as well. So here are three great educational resources for boning up on UI design.


4. Inspire UX


Inspire UX is a user experience design blog that features articles, quotes, case studies and explorations into the world of user experience and interface design. A great resource, Inspire UX articles cover a broad range of topics from book reviews to helpful tips and well-thought explorations into existing design patterns and implementations.


5. UX Magazine


UX Magazine is a user experience and design publication dedicated to “elevating user experience, one article at a time.” With plenty of original content as well as technical and inspirational design roundups from around the web, UX Magazine explores the details that make a great user experience. If you’re looking for information on best practices, creative problem solving resources or a better understanding of those problems, UX Magazine is chock full of great articles to assist you.


6. UI Scraps


This blog by designer Jason Robb showcases interesting and insightful user interfaces. The great thing about UI Scraps is that the site isn’t simply a showcase of great work. Robb brings you the bad along with the good, making it a great resource for learning what not to do. The tone of the blog is conversational and casual, but Mr. Robb’s remarks are spot-on and UI scraps is a fun, interesting resource for UI design practices.


Down the Rabbit Hole


Still what more? Looking for something a little more technical? UI design isn’t just about making a pretty picture. There’s a lot of science behind the methodologies and patterns we use every day. Here are a few sites that delve even further into the technical and scientific aspects of UI design.


7. Web Design Practices


If statistics are what you’re after, Web Design Practices is the place to be. The site showcases and describes several common web design elements, practices, and patterns and discusses frequency of use and effectiveness of each. Many examples are also provided and, wherever possible, links are provided to relevant research data, so you can take a first-hand look at the study yourself.


8. User Interface Engineering


UIE is a professional organization for user interface designers and UI experts. UIE provides education and training to its members and the public at large through conferences, articles, virtual siminars, and other publications. On the UIE site, you’ll find a plethora of great articles covering a variety of UI and UX design topics, many of which have plenty of scientific and research data to back them up.


9. Boxes and Arrows


Boxes and Arrows is another great online publication dedicated to exploring the art and science of UI design. It has articles and research materials on best practices, techniques, and user behavior and expectations. There are also a number of case studies, interviews and product reviews, as well as a podcats. If you want to truly understand UI design, Boxes and Arrows is an invaluable resource.

Image courtesy of iStockphoto, violetkaipa


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.

More About: features, UI Design, web design, Web Design Usability Series, Web Development

 
 

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