Getting Org Charts Right

If there’s one diagram that plagues almost every corporate website on earth, it’d have to be the organisational chart. It’s a graphical representation of the corporate hierachy very similar to hierachies present in HTML, yet web designers spend hours searching for the lost photoshop file whenever someone in the organization gets transferred, promoted, or leaves.

I’ve seen 2 common implementations of the org chart:

  1. The ginormous image. Attaching a single image is easy on the html. Most of the work is done in Photoshop where everything is drag and drop. Given that you can’t have all 9 pages of text describing the organizational structure fit into the “alt” attribute, most designers just name it “Organizational Chart”.
  2. The nested table. The web designer that came up with this is a little more prophetic: he knows that photoshop file will invariable get lost, so the org chart is coded in HTML instead. Every element in a cell, all laid with pixel-precision. This org chart is easy to update if someone leaves and is replaced, but is an utter pain to update should the organizational structure change.

There has got to be a better way. But we’ve got to throw some pre-conceived notions out the window first.

The world is flat

Unless you’re working in a traditional Chinese family-run business that saw a bumper crop of children, your organization’s structure is likely to be flat and wide rather than tall. Different levels of hierachy are denoted by their vertical position, befitting of the corporate ladder metaphor. The main problem with this is that the online medium doesn’t do well when forced to grow sideways. Layouts break, horizontal scrollbars appear, floated sidebars get bumped down.

We need to turn the visual model on its side. It’s radical, but radical isn’t necessarily a bad thing. Big boss is flush left, everyone else moves a little to the right. The lower down the position, the greater the distance from the left. The visual cue is kept intact.

Choosing your markup

HTML is full of hierachies. H1 level headers are more important than H2 headers. The obvious choice to markup an org chart would be as a list. But ordered lists, or unordered lists?

Ordered lists provide a fixed hierachy. The first list item in an ordered list is greater than the second. This proves a problem when we have 2 subordinates who are equal in status. An ordered list does not allow us that flexibility.

Unordered lists allow the grouping of elements as equals. But alone the unordered list doesn’t denote any differences in hierachy.

The nesting of unordered lists allow the creation of different levels, while allowing list-elements to exist as equals. In my opinion it is feasible to nest unordered lists inside of an ordered list, explicitly labelling the various levels, but I choose to nest unordered lists as I prefer the less overt structure of power. There is no loss in semantic meaning, the greater wraps around the lesser.

The Office

So this is the scenario we’ll work with:

Jessica is the director of the company. She has 3 assistant directors under her.

The HTML:

	<ul class="org-chart">
		<li>
			<p>Jessica Chan<br />
			Director<br />
			Corporate Communications Division</p>

			<ul>
				<li>
					<p>Hung Lee<br />
					Assistant Director<br />
					Public Communications</p>
				</li>

				<li>
					<p>Shin Ho<br />
					Assistant Director<br />
					Media Relations</p>
				</li>

				<li>
					<p>Sarah Tan<br />
					Assistant Director<br />
					Publicity</p>
				</li>
			</ul>

		</li>
	</ul>

You should have something that looks like:

  • Jessica Chan
    Director
    Corporate Communications Division

    • Hung Lee
      Assistant Director
      Public Communications
    • Shin Ho
      Assistant Director
      Media Relations
    • Sarah Tan
      Assistant Director
      Publicity

More meaning

We could improve on the markup by using the hCard microformat. Names, titles and units can be made distinct from each other rather than pouring everything inside a paragraph tag.

The HTML:

	<ul class="org-chart">
		<li>
			<div class="vcard">
				<div class="fn n">Jessica Chan</div>
				<div class="title">Director</div>
				<div class="organization-unit">Corporate Communications</div>
			</div>

			<ul>
				<li>
					<div class="vcard">
						<div class="fn n">Hung Lee</div>
						<div class="title">Assistant Director</div>
						<div class="organization-unit">Public Communications</div>
					</div>
				</li>

				<li>
					<div class="vcard">
						<div class="fn n">Shin Ho</div>
						<div class="title">Assistant Director</div>
						<div class="organization-unit">Media Relations</div>
					</div>
				</li>

				<li>
					<div class="vcard">
						<div class="fn n">Sarah Tan</div>
						<div class="title">Assistant Director</div>
						<div class="organization-unit">Publicity</div>
					</div>
				</li>
			</ul>

		</li>
	</ul>

Adding microformats won’t change how things look. It’s just about adding specified classes to the relevant bits of information.

Styling it up

So now we have a very simple nested list. If you’re removing all browser-set CSS styles (and you should), you’ll need to style the visual cues that’ll make this nested list look like a proper org chart.

The CSS:

	ul.org-chart li,
	ul.org-chart ul li {
		list-style:none;
	}

	ul.org-chart,
	ul.org-chart ul,
	ul.org-chart ul ul {
		margin:0;
		padding:0;
	}

	ul.org-chart ul li {
		padding:0 0 0 50px;
		margin:0 0 0 50px;
	}

	ul.org-chart li div.vcard {
		padding:15px;
		margin:0;
	}

Until CSS figures out a way to allow us to draw straight lines through our block level elements, the branches will have to be made of good old-fashioned graphics. There are 2 types of branches we’ll need: one for all employees placed under a boss, and a special branch for the last listed subordinate of every level of the hierachy. This is because bosses report to no-one (hence no need for a branch), and the last guy doesn’t need to extend the branch to anyone else.

We’ll also add a class="last" on the last list item element of every list to identify these people.

The CSS:

We’ll need some simple graphics for the branches of the organisational tree. So all list elements get a T-shaped (lying on its side) branch while the last element in the list gets an L-shaped branch to end things off.

	ul.org-chart ul li {
		background:url(org-tree-mid.gif) no-repeat left top;
	}

	ul.org-chart ul li.last {
		background:url(org-tree-last.gif) no-repeat left top;
	}

Throw in some basic type formatting and you’ll have something that looks like the org charts we have on the MOE website (scroll to the bottom of the page).

Tags: , , ,

Advertisements

3 responses to “Getting Org Charts Right

  1. great blog, you got me on the straight and narrow regarding Org Charts. I was trying to use a visual type interface which would have ended up with specifically coded imagemap type interface rather than something that is data generated and also sustainable.

    Have spent hours battling this one out – you just saved my life. Nice One.

  2. Hi again.

    After getting on the straight and narrow, I now have refined our org chart system based on your approach. I thought I’d feed back a couple of things:

    1. Came across this cool link: http://www.cogmap.com/

    2. We are generating ours with a link into a lightbox hybrid called ‘ThickBox’. By using an inline frame approach and passing an ID, we can drill in and provide a very detailed business card.

    3. I’ve actually filtered our org chart based on location both at a global level and a country/regional level. As a sub level to each location, we have a discipline lead, so your org chart becomes very deep and narrow in this circumstance. I’d like to make a horizontal version and give users the option of how deep they wish the tree to extend. Especially usefull if printing! Ours is al XSLT based and therefor filtering is done AJAX style, its damn quick!

    4. Probably the most important part for me is that during this amazing voyage of discovery (and I chewed up a lot of hours looking at all this) I realised that networks within the organisation are more like support networks and probably have more in common with social networks than traditional hierarchical networks. Hmm, radical thinking! A few sites worth looking at in this regard:

    http://www.thoughtfarmer.com/
    Check out the org chart in his Intranet – its bubble based and definately not hierarchical. His approach is all about people.

    http://www.theappgap.com/what-if-the-org-chart-had-links-and-tags-instead-of-reporting-relationships.html
    Great link with regard using tags to create a network.

    Have enjoyed reading the blog for MOE, keep it up.

  3. Thanks for the write up! I inherited an old asp web app that used tables and images to generate an org chart, but it was really slow and outdated. I spent a lot of time evaluating commercial products but I eventually went with the list item/CSS approach too. I was struggling with it but I found your site and got something going right away.

    It loads really fast and it’s more flexible or at least easier to modify than the other solutions like Google, InfoVis, etc. I’d like to eventually add some jQuery features to it as well.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s