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 recently tried out a new web development environment named Coda form Panic Inc., fell in love and decided to move away from Dreamweaver. It is new to me but by no means a new product. It has been around for more than a year and has won the 2007 Apple Design Award for Best User Experience. The latest version 1.5, the one I am using was launched on the 26^th, a few days ago.

One of the nice features is subversion integration. Unlike on Windows which is my previous platform, there isn’t many choices when it comes to subversion clients. On Windows I used TortoiseSVN which had excellent Explorer integration. On the Mac I used something called svnX which didn’t have Finder integration and the user interface isn’t as intuitive as on TortoiseSVN, although it is nice after you get used to it. Dreamweaver has no subversion integration.

Another feature is “Clips” which lets you store frequently-used code snippets in an intuitive “HUD”. The clips can also be imported/exported for sharing. I am currently using the clips feature to store snippets such as the structure for a basic XHTML layout, CSS browser resets, Lorem lipsum and other snippets like WordPress template tags. Really cool.

Like Dreamweaver, Coda also has FTP. Coda’s has Panic’s “Transmit” engine built-in and supports FTP, SFTP, FTP+SSL, and WebDAV. I still have not really gotten used to it but it feel snappier than Dreamweaver which tends to lock up for me when toggling between passive and non-passive modes in FTP.

Like Dreamweaver, Coda allows you to define “sites” and each of them can have their own configurations for FTP, testing servers, etc. The difference is that instead of displaying the list of sites in a dropdown lie in Dreamweaver, Coda shows them as almost-live updated thumbnails of the actual homepage of a site, in a grid. This features allows me to have a very clear overview of the active projects I am working on.

When developing in Dreamweaver, I don’t rely on WYSIWYG and I do testing on a real browser. This means that I had to switch back and forth between IDE and browser to edit code and view changes. With Coda, I don’t have to switch anymore as it has a preview pane. You can also select which browser to use, apart from the default Safari. I am using Firefox as the default.

Although I still have to rely on WYSIWYG in Dreamweaver for some client projects which have old and deprecated code, I will definitely see more of my time spent in Coda.

By the way since I have been using Dreamweaver since version 4, I am very much used to the syntax-coloring schemes of Dreamweaver so I spent some time configuring Coda to color syntax like Dreamweaver. I exported a “.seestyle” file which you can download and import into Coda to get syntax colors similar to Dreamweaver’s. It is not perfect but it works for me so you can probably refine it more. if you ever do refine the colors, why not post it here to share it with others?

Download Coda syntax color schemes for HTML, PHP-HTML and Javascript (zipped, small).

You get Coda at the official website for 99 USD. Try the trial and see if it’s worth paying for.

I ride mountain bikes and occasionally I ride with a heavy backpack because I need to carry my laptop and books to places. When using an average backpack, the entire load is on the shoulders and is uncomfortable on long walks and rides, especially on rough ground when the backpack bounces around.

While exploring ChainReactionCycles today I came across a interesting backpack made by a German bike components maker ERGON, the BD2.

According to ERGON, the backpack features a revolutionary carrying system which makes it unusually comfortable on the shoulders. Where the strap joins the back is a feature called the Flink ® ball joint, which the bag and body can rotate on independently of one another. This way the weight of the bag is distributed evenly on both shoulders and protects the back.

In 2007 MountainBIKE Magazine reviewed the backpack and went as far as saying if one goes back to a traditional rucksack after using the BD2, one will feel something is not right. On steep descents (on a bike) it does not slide forward and did not jump around when maneuvering.

The backpack comes in S and L, gender specific sizes. That means men and women will have a different fit which makes sense since men and woman are anatomically different. With 15 liters of capacity, you can fit many things inside. For me I usually bring my laptop—a 17 inch MacBook Pro, thick computer books, notebooks and miscellaneous stuff like a power adapter for my laptop, mouse, and iPod. This bag will swallow them all. The main fabric is 1000 D Nylon, like I know what that is. I suppose it’s some grade of quality and durable nylon.

ERGON apparently places much emphasis on product design. The backpack has won a 2007 Red Dot Design Award along with their also award-winning bicycle handlebar grips.

ChainReactionCycles retails them for around £85 which converts to around 230 Singapore dollars. Not a bad deal for something well-designed. I think It’s definitely worth the price because I would rather not have shoulder pain and backaches.

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