AEN UI

What is more delightful than something that is usable? i wouldn’t appreciate anything, no matter how slick, that pisses me off by being a pain in the ass. Therefore being usable is being beautiful.

With the css-based, table-less layout fad going on for the past few years, tables have somehow become something “taboo” for some designers and have not gotten the attention they deserve. Tables are used for representing data in a matrix, with their relations arranged in rows and columns. Tables can be visual and also conceptual, i.e. database tables. In this article, I will show you how visual tables can be made better and more usable, with code samples which can be easily implemented on an existing site. I will discuss the visual and usability aspect of designing tables and will try to use simplified code for clarity. For more information on improving the accessibility of tables, which this article will not cover, check out this great article.

Objectives

We want to achieve tables which are more scannable, with data that is easily findable, more aesthetically-pleasing and also easier to style using CSS.

Semantic Table HTML Markup

Here we have a basic table.

And its markup.

<table id="basic">
	<tr>
		<td></td>
		<th>Color</th>
		<th>Size</th>
		<th>Rarity</th>
		<th>Price/100 grams</th>
	</tr>
	<tr>
		<th>Golden Grapes</th>
		<td>Golden Purple</td>
		<td>Small</td>
		<td>Rare</td>
		<td>$100</td>
	</tr>
	<tr>
		<th>Pearl Melon</th>
		<td>Marine Cream</td>
		<td>Large</td>
		<td>Common</td>
		<td>$75</td>
	</tr>
	<tr>
		<th>Diamond Lemon</th>
		<td>Shiny Yellow</td>
		<td>Medium</td>
		<td>Very rare</td>
		<td>$1,000</td>
	</tr>
</table>

This creates a really basic, bare-minimum table. Notice the use of <TH> elements for cells that contain header information in this 2-dimensional table, where the first row and first column are headers. The empty cell at the top left corner is a <TD> element because it is not a header.

To make this table more readable we will color the header rows and columns and make the text in them bold, and also add more padding to lossen up the table. To make the table easily style-able we will use the <THEAD> and <TBODY> elements to wrap the appropriate cells.

<table id="colored">
	<thead>
		<tr>
			<td></td>
			<th>Color</th>
			<th>Size</th>
			<th>Rarity</th>
			<th>Price/100 grams</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Golden Grapes</th>
			<td>Golden Purple</td>
			<td>Small</td>
			<td>Rare</td>
			<td>$100</td>
		</tr>
		<tr>
			<th>Pearl Melon</th>
			<td>Marine Cream</td>
			<td>Large</td>
			<td>Common</td>
			<td>$75</td>
		</tr>
		<tr>
			<th>Diamond Lemon</th>
			<td>Shiny Yellow</td>
			<td>Medium</td>
			<td>Very rare</td>
			<td>$1,000</td>
		</tr>
	</tbody>
</table>

table#colored {
	border: 1px solid #555;
	border-collapse: collapse;
}
#colored td,
	#colored th {
	border: 1px solid #555;
	padding: 8px 12px;
}
#colored th { font-weight: bold; }
#colored thead th {
	background-color: #dcf1f5;
	color: #3c423c;
}
#colored tbody th {
	background-color: #f4fcf0;
	color: #354042;
}

The result is something that looks better.

Center-align Cells of Short Data

Next we should center-aligned data which are short with only one to three words. We give this cells the CSS class name “center”. Although we should always try to name our CSS class names based on purpose and not appearance, e.g. “warning” vs “red”, there really isn’t any special purpose this class will serve except to center stuff so “center” is appropriate.

What about cells with numbers and figures? Should we center them. We will go to that later.

<table id="colored-centered">
	<thead>
		<tr>
			<td></td>
			<th class="center">Color</th>
			<th class="center">Size</th>
			<th class="center">Rarity</th>
			<th>Price/100 grams</th>
		<tr>
	</thead>
	<tbody>
		<tr>
			<th>Golden Grapes</th>
			<td class="center">Golden Purple</td>
			<td class="center">Small</td>
			<td class="center">Rare</td>
			<td>$100</td>
		</tr>

#colored-centered .center { text-align: center; }

Cells with Numbers

Numbers are a little different from words because they have a distinct linear structure, do not use punctuation (except for commas and periods) and have consistent character widths. Take a look at the following image and you’ll see what I am talking about.

Try scanning the 3 different columns of numbers for a few seconds. Which one is more scannable? The difference might be minute but for someone working with large tables and long numbers, it can make a big difference.

As you can see, the center-aligned numbers are not as friendly to the eyes as the left aligned ones. By flushing numbers left, they line up with a straight edge and provide a clear starting point for the eyes. Center-aligned numbers have both sides jagged thus require more eye movement. To further increase the readability, monospaced fonts can be used for left-aligned numbers. Monospace characters all have the same width and thus provide a very consistent and predictable flow for the eyes. Eye movement should be less erratic when reading monospaced numbers.

Achieving this effect in CSS is easy.

#colored-centered-num .num {
	font-family: monaco,"Lucida Console",courier,mono-space,monospace;
	font-size: 13px;
}

<tbody>
		<tr>
			<th>Golden Grapes</th>
			<td class="center">Golden Purple</td>
			<td class="center">Small</td>
			<td class="center">Rare</td>
			<td class="num">$100</td>

Alternating Row Colors

Reading rows in tables with a large number of columns is hard because the eyes are forced to stay within a line with little visual guidance, like walking in a straight line when you are drunk. People have always invented ingenious ways to facilitate horizontal scanning of table rows on paper, such as laying a ruler across a table, as a guide. Simulating a ruler on a webpage is probably overkill but we can provide similar functionality by using alternating table row colors. Alternating colors provide a simple and effective guide for the eyes to easily move across a table row horizontally because each row is visually distinguished from the one above and below it.

You can give a table row a different background color by applying CSS to a <TR> element.

<tbody>
	<tr class="alt">
		<th>Golden Grapes</th>
		<td class="center">Golden Purple</td>
		<td class="center">Small</td>
		<td class="center">Rare</td>
		<td class="num">$100</td>
	</tr>
	<tr>
		<th>Pearl Melon</th>
		<td class="center">Marine Cream</td>
		<td class="center">Large</td>
		<td class="center">Common</td>
		<td class="num">$75</td>
	</tr>

#alternating .alt td { background-color: #edf7e9; }
#alternating tbody .alt th { background-color: #e9f7e4; }

Nice Borders

The dark borders could use some refinements. Earlier we separated the tabl cells into <THEAD> and <TBODY> elements and this is perfect for detailed styling. We will also deal with the empty cell on the top left.

Let’s start by removing the top, right and left border for the <TABLE> element itself then add a 2px border to it to create a “shadow”, and then give the other cells nice borders. No need to add any more CSS selectors. We’ll just tweak the ones we already have. Firstly, the top header row.

#niceborder thead th {
	background-color: #dcf1f5;
	color: #3c423c;
	border-top-color: #e5f3f7;
	border-right-color: #c2e0f2;
	border-bottom-color: #c2e0f2;
	border-left-color: #e5f3f7;
}

Next we style the left header column.

table#niceborder {
	border-collapse: collapse;
	border: 0;
	border-bottom: 2px solid #d2ecdd;
}
#niceborder tbody th {
	background-color: #f4fcf0;
	color: #354042;
	border-right-color: #d2ecdd;
	border-bottom-color: #d2ecdd;
	border-left-color: #eff7e9;
}

Then the cells.

#niceborder td,
#niceborder th {
	border: 1px solid #eee;
	padding: 8px 12px;
}

Lastly we get rid of the empty cell. We can do this by applying “border: 0″ to the sole <TD> element which is the empty one in <THEAD>. But if you have other <TD>s that you don’t want to be empty, you will need to apply a class name to them so they are isolated.

#niceborder thead td { border: 0; }

And it’s done! The table has lost its harsh black borders, it now looks more aesthetically-pleasing.

Cells with Links

For links in table cells to be highly usable, they should have large click areas to make them easy to click and should have a different visual state when moused over. To give links a large click area, we need to transfer the padding of the surrounding table cell to the <A> (anchor) element.

#links tbody th {
	padding: 0;
	background-color: #f4fcf0;
	color: #354042;
	border-right-color: #d2ecdd;
	border-bottom-color: #d2ecdd;
	border-left-color: #eff7e9;
}
#links a {
	display: block;
	padding: 8px 12px;
	border: 0;
	color: #54b4c3;
}

The result.

This concludes the end of the article. You can also view the full demo and source code (HTML and CSS). I hope you like it. Please feel free to correct me if I am wrong and also do share your tips in designing usable tables.

Web designers have known that screen real estate is one of the most valuable property of a web page. When designing web sites, we take real care to have the most important elements prominently displayed at the top of web pages, a.k.a “above the fold/scroll”. But sometimes there simply is too much “important” information to squeeze into the first fold of a web page. These can be important company introductions, main and sub navigation menus, tabs, breadcrumbs, logos, etc.

Breadcrumbs

Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. Generally, an arrow is used as hierarchy separator, although other glyphs can be used to represent this.[source: Wikipedia]

Tabs

In graphical user interfaces, a tab is a navigational widget for switching between sets of controls or documents. It is traditionally designed as a text label within a rectangular box with its top borders rounded. Activating a tab (usually by a mouse click) makes its associated content visible and the tab itself usually becomes highlighted to distinguish it from other inactive tabs. Only one tab can be active at a time. Use of tabs to display non-static content gives rise to Tabbed document interface, e.g. used in Mozilla browser and many text editors such as SciTE.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes and thus they are often employed to give the user interface a more “natural” look.[source: Wikipedia]

What you see here is a typical website layout that incorporates tabbed navigation and breadcrumbs, each page-wide row occupying significant vertical space. It is clear that the breadcrumbs only occupy a small percentage of the entire row of horizontal space allocated to it. The same goes for the tabbed navigation. We can definitely make better use of the space.

Tabcrumbs

While working on a client project which I had to make efficient use of space to keep important page elements above the fold. So I sat down and came up with some ideas and one of them is what I call “Tabcrumbs”, the tasty combo of tabs and breadcrumbs. If you are a web designer or have experience with making web sites, you would have guessed what it is. Tabcrumbs is a combination of navigational tabs and breadcrumb trails. This approach allows the web designer to save lots of precious vertical space and also make better use of horizontal space.

Are there risks? Is combination better than separation? Is saving space worth having the user learning a new user interface feature? I think tabcrumbs are not a drastic new feature and does not require change in user behavior, compared to the crazy and popular navigation in Flash sites on the web. You can still clearly see a breadcrumb trail and tabs and not see something else.

What are your views? Do feel free to criticize.

I was involved in something cool for the past few months. It was interesting for me because I am a food lover. I do not consider myself a connoisseur except for good Sushi and Sashimi. It is “The Miele Guide“, a paperback food guide for Asia in which selected restaurants are voted by members of its website (mieleguide.com).

I was engaged by Ate Media—the publisher, to design the user interface for the website which will be used by registered members to vote for restaurants they think should make it into the prestigious guide. The interface needed to fulfill the needs of users who will come from all over Asia, speaking different languages and with unique demographics.

First I identified the various UI elements such as mailing list signup, the registration form, voting mechanism and pre-ordering of the guide. Next I consider issues like accessibility and usability. Then I design the interface based on the analysis.

Form Design

As restaurant names are potentially long, the voting form has to accommodate long labels. Therefore the forms are designed to be compact using a familiar technique in which form fields are pre-populated with a default value as its label, i.e. an email address field with a default “Enter your email address” value. This method sacrifices accessibility though, because the fields lack proper labels. To preserve accessibility, I employed a technique where labels are positioned over their respective fields and removed on mouse focus with JavaScript. This method is documented in-depth on AListApart. The version I did has a slight modification whereby the labels are not removed immediately on mouse focus, instead they are dimmed (lighter color) so they remain visible until the user starts typing, similar to the iPhone interface.

To improve accessibility, the HTML markup of the forms are kept basic and standards-compliant and styling is solely controlled by CSS. This allows the form to degrade nicely for users on machines that do not render CSS and images, e.g. screen-readers. I’m very sure there are visually-impaired people out there who are food lovers.

Form-filling is a tedious process and while we tried our best to keep required fields to a minimum, the form UI is designed to make forms more responsive. Without a doubt, Ajax is used so that form validation can occur without the need for page refreshes. The forms also degrade nicely to standard forms when JavaScript support is not available.

One of the requirements for the registration form is it should allow the user to choose a prize from a list of 3, which he can win in a lucky draw. The obvious choice is the radio button. But since this is about selecting a prize, it should be more than a boring radio button. So I designed 3 large CSS-styled clickable DIVs which will toggle the respective hidden radio buttons when clicked. Again, accessibility is not sacrificed. The form is also made more usable due to the larger clickable area.

Voting Mechanism

Now comes the voting mechanism which is the heart and soul of the website and what the main purpose it was build for. It is also where the majority of the Ajax in the website lies. If you wish to give the voting UI a try, you need to register yourself with a valid Visa card (for verification purposes. Visa is a main sponsor). You can vote as well!

At the voting screen, you are presented with a dropdown menu which you can use to display restaurants in 18 countries. As you select different countries, the alphabetical list of restaurants is updated via Ajax.

As you click on restaurant names, its respective bar changes color and a tick symbol appears. It works like a checkbox, with a larger clickable area so it is easier to click. When a restaurant is selected, its name appears on the sidebar so you can review your list of voted restaurants and make adjustments. Everything is Ajaxified to make the form more responsive.

The other cool feature is that if there are restaurants you like that are not in the list, you can nominate them yourself and they get submitted together. Simply click “nominate” and an extra field appears for you to type the restaurants name.

Language Options

The site offers its content in 3 languages (English, Chinese ad Japanese) to meet the needs of its user base of diverse cultures. The language switching feature is presented as a fuss-free dropdown menu. Switching to a different language is fast and easy.

Final Notes

The website has so far gathered votes from a big number of Visa cardholders where 42% are for user-nominated restaurants. Considering that the site is targeted at financially-empowered users, specifically Visa cardholders, we cannot expect a large user base with a broader demographic. But we can say that the current number, which I unfortunately cannot disclose, is a promising one.

This goes to show that the user interface worked as it was intended.

I would like to thank my client—the folks at Ate Media, and Mr U-Zyn Chua who handled the development and Ajax work.

Visit The Miele Guide

A website can suffer in findability for many reasons, one of which is the lack of a good site search feature. Either it is hard to use, returns irrelevant results or there is no search feature at all. I’m going to discuss how search can be made better.

How important is good search?

There are many ways users can get to the content you want them to get to. Search is one of them, and a major one. When users are faced with large amounts of information, such as a huge online bookstore with thousands or even millions of titles, it is hard to just click through stuff and narrow down with pre-defined criteria, e.g. category and subject. Search enables a user to filter books with custom criteria such as author name, publisher and year of publication, within a single search. If users cannot find information with ease, you lose potential sales and credibility. If users can find information with ease, especially when it matters to them, e.g. privacy policies, offer programs, shipping information, you get better sales, credibility and portray a better brand image.

Good search definitely starts with a good search engine but I will not go into about how well can a search engine be programmed and stuff about indexing, instead I will talk about the UI aspects of search, i.e. the search interface and presentation of search results.

What is a good search interface?

For a user to successfully find something relevant by searching, the user has to first know where your search is and be able to use it. Most of the time the search interface or “search box” is presented as a simple form consisting of a text field for the entry of search terms and a submit button. The search box is usually placed in the header of the website where it is more visible. This is of course not a hard and fast rule. The general guideline is to make the search box visually prominent, well above the fold and accessible without scrolling. It is also important to let the user do a basic search from anywhere, without the need to click a link to go to a search page. Sometimes a basic search is not enough if the user has specific criteria. Provide an “advanced search” feature to allow the user to make a search that returns more specified results.

Searching on apple.com is easy. The white search text field is clearly visible by contrast with the grey navigation menu. A simple and ubiquitous magnifier icon tells the user that it is used for search.

What makes a bad search interface?

Simply put, a bad search interface is one that is hard to find and hard to use. When designing websites, the designer should take into consideration the various screen sizes users are going to view the website in and take note that not all users maximize their windows. So it is vital the search interface is placed where it is visible even if the browser window is resized smaller.

Digital Thread has a very aesthetically pleasing website design but in my opinion could do better with a top navigation row instead of one on the side. At 1024 x 768 display resolution, the hardly-visible search box is almost at the bottom of the screen. Not to mention that a good number of people do not browse in a maximized window, thus the search box might not be visible to them.

General form design and usability guidelines also apply to search. Always provide descriptive labels so your search form looks obviously like one. One popular approach employed by many websites is to pre-populate the search text field with a phrases like “Enter Search Terms”, “Search here” and “Type and Search” and clearing the text field on mouse focus with JavaScript. This results in a more compact form design but suffers in accessibility because of the lack of a <label> tag. A very clever solution is discussed at A List Apart which involves overlapping the label over the text field to achieve the same effect without sacrificing accessibility. I am using a slightly-modified version of the same solution for the search form on AEN UI. The difference is instead of clearing the text field on mouse focus, I lighten the label color and then clear it when text is actually being entered into the field, much like the iPhone.

Presentation of search results

Search is basically a 2-step process, searching and looking at results. Users when searching for information on a website, they either know what they want to find (known-item seeking) or just gathering options they can find (exploratory-seeking). The presentation of search results has to fulfill the needs of these two main kinds of information seekers.

How your search results should be presented depends on what kind of information people are searching for. A search on an employee database should return tabulated rows of employee names, identification and other data. A search on an online shop should return product listings with prices, product thumbnails and other information that would matter to a shopper.

There is a growing trend with “Live Search”, a fairly recent style of presenting fast search results via Ajax in a floating layer/box below the search form. Live search are great for quickly retrieving results of popular content and by clicking a “Show all” or “View all results” link, a user can view the complete list of results. Live search works on the philosophy that people are usually searching or re-searching content that are popular, therefore quickly presenting popular content will satisfy the majority of users. This is very true. Take for example Apple, which has a really good way of presenting live search results.

Let’s say you are a PC and Windows user who has heard good things about how Macs are less prone to virus attacks, more stable and generally a joy to work with, but you have also heard how people like you who grew up on Windows, find it hard to switch to a Mac. So you visit the Apple apple website to find out more for yourself. You decide to search for information on “switching”. Theoretically, the returned search results should include information on how someone can switch from PCs to Macs and also content from technical support information that involves powering on or off a Mac. In this case, only Mac 101 and Switch 101 are shown in the live search results, because they are more popular content. Thumbnails in each search result entry also provide hints of the content ahead, which is especially helpful when searching for let’s say… movie trailers.

Are we done yet?

Giving users a good search UI and relevant results is not the end. The process of finding information is hardly a process with distinct start and end points, especially when users do not know exactly what they want and will look around for content that might interest them. Such users engage in “exploratory seeking”. Just like exploration in the physical world, users might go back to previous results while navigating their harvest of information.

Veoh is a internet TV service that gives users free access to TV and film studio content, independent productions, and user-generated videos on the Web. I watch mostly Japanese animation and documentaries on Veoh and one feature I particularly like is how Veoh stores your search history when you are logged in. This feature is very helpful when I am looking for video content on for example marine wildlife, to watch. Many documentaries on the subject have been made so I will need to search with a variety of terms to decently explore the content available for marine wildlife. Having a list of past searches allows me to repeat a search if I might have missed something.

To wrap things up…

Search is important because it increases the findability of the content on your website which is important if your website goals are driven or influenced by how easily users can find information. Well-designed and accessible search interfaces and good presentation of search results makes search usable for users. Other features that can enhance information-seeking by search, such as Veoh’s search history can make exploratory-seeking more painless.

As much as I want you to read what I have to say, I want to know your opinions too. Please feel free to leave a comment so we can learn from one another.

I am porting this article and its 2nd part over from my old blog of an early experimental concept of how the classic easing+mouse-following movieclip can be made more organic (code is in AS2).

What’s a mouse-following movieclip? You can find examples of mouse-following movieclips at the Haze website I did and this Kirupa tutorial. Below is an example I did.

Wouldn’t it be better if the motion of the ball be controllable by the speed of the mouse movement? If you move the mouse faster, the ball catches up faster and vice versa. Have a look at the second example which accomplish just that.

You can feel that the movement of the ball has more character now, even though the movement isn’t exactly polished. The speed of mouse movement is measured in pixels per second.

It really is simple. All I had to do is continuously check the position of the mouse position every e.g. 100 milliseconds and get the position of the mouse now and 100ms prior. With the 2 positions I can get distance and then speed. The resulting speed is then used for the easing speed of the ball.

Next I’ll add another factor—mouse angle. Usually mouse angle is calculated with the current mouse position and an “origin”. In this demonstration, both the mouse position and origin are dynamic but are easily checked with the same update functions that check mouse speed. The end point would be the current and origin would be 50ms ago (configurable tracking speed). With basic trigonometry we get radians which are then converted into angles.

By varying mouse speed and detecting mouse angle, you get interaction that is more organic and natural. If you have used my code in a project, please let me know by posting a comment!