Follow the Truth

Find the Design

Stock Market Visualizations

By | Web Design | No Comments

I miss the old Map of the Market which was online since 1998 and was one of the first visualizations on the web.

This was long my go to site for a quick update on how the market was doing. Who is up, who is down, and why? It seems SmartMoney has sold out and removed it. Perhaps after 15 years, and since it was build with Flash, the time had come.

That left me looking around for a replacement. I found this one at FinViz

Each square is sized according to it’s market capitalization (the relative cost to buy every share at its current price). As you can see, you can buy about 2 Googles or 3 ExxonMobiles for the price of 1 Apple. When you see the market like this you get a sense of how big (of over/under valued) some of these stock might be. Another cool feature of this chart is the Bubble view:

This shows how far from the pack Apple is. When you zoom out to see more of the world you can see how big the stock market has become.

What I was interested in is the Health Care sector which as you can see bigger than Industrial Goods (the so called Military Industrial complex), bigger than Oil

Below is a screenshot from the desktop tool StockTouch which, by the way, I discovered when it was an editors choice in the Apple App Store. It has a good interface to drill deep and read the news, but the one thing I miss about the original is how it showed the relative size of each industry and stock. This chart treats them all as equals (if the make it into the top 100 that is). I would not recommend this for OS X – it worked fine on the Ipad.

Home Depot’s new bucket shows why design matters

By | Web Design | One Comment

Home Depot has a new bucket – and it tells an important story about the importance of user centered design applied to even the most boring corners of your business.


In case you live under a rock, the most profitable company of the 21st century so far has been Apple. How did they make all that money? By rethinking old things that everyone else thought were finished – the PC, the MP3 player (iPod), the cell phone (iPhone), the wrist watch.

The trend is not unnoticed as other companies look on their shelves for items that have not been designed in many decades.

Nest built a company around the boring AC thermostat.

And now Home Depot is starting its own line of vertically integrated, high design lines … starting with – the bucket.

Home Depot | The Big Gripper from Lincoln Street Studios on Vimeo.

The bucket is a classic example of user centered design created by observing real users, noting their obvious problems and solving them with obvious solutions. (Obvious and yet neglected for however many decades people have been making buckets and now patented by Home Depot.) I personally love going to these stores. Not only are you surprised and delighted at ever corner by the innovative solutions to common problems, but you discover something new every trip.

Youtube in the 1980’s

By | Web Design | No Comments

Anything that can be digital, will be. But the reverse is also true, anything that can be done online could also be done in the pre-digital, analog world – it would have just been less efficient (sometimes to the point of being impractical). Take Youtube for example:

I saw this video years ago and lost it. It took me a long time to find it again.

Why this is important:

It can be a useful creative exercise to “reverse design” a solution and trace it back to its real world parallels. By understanding what would have to happen to do the same thing without the web we get a better grasp of the governance and processes required and even the feasibility of the idea. After all, computers can automate any process, but you have to HAVE a process that you can at least imagine doing without computers first. There is nothing magic about computers. You can only get out what you put in. So if a client is asking for a solution, but can not even imagine where content will come from, I send them to this video.


By | Web Design | No Comments

In case you were wondering: .jpg and .jpeg are the exact same thing. Back in DOS days file extensions could only be 3 letters so the JPEG format – (which stands for Joint Photographic Expert Group) was further abbreviated as JPG. Now that computers allow more than 3 letters – JPEG is sometimes used. But for some of us, old habits die-hard and I still bristle when I see JPEG instead of JPG mainly because it catches me off guard.

Another piece of trivia, one of the first jpgs, Lena.jpg – was the standard test image used in almost every academic article on image compression written since 1974 (for example see:

This scan became one of the most used images in computer history.

This scan became one of the most used images in computer history.

It is a picture of Lena Söderberg cropped from the centerfold of the November 1972 issue of Playboy magazine. Apparently the only source of images they had lying around the lab.

Read more:

Truth is not something you know, it’s something you pursue

By | All Blog Posts, Web Design | One Comment


I work with a team of philosophers. During a recent discussion, we settled on a philosophy that I think is important to share with anyone interested in design for the web or creating software. It may sound strange when you hear it so I want to explain first. You see, technology is alway changing and this makes “Knowing” anything dangerous. I use the word “Knowing” in quotes with a capital K to differentiate it from the word knowing as you might commonly use it.

Source: via Google

To know something is to be aware. Ideally this awareness comes through your own observation, but it can also come through the observation of others who communicate it to you through argument, debate, and discussion. Since we can never completely observe reality, not even in theory (since scientists tell us the very act of observation changes reality at the smallest levels), we can never completely, 100%, “Know” anything. Don’t misunderstand me, we obviously require an amount of certainty in order to take action and to function as humans. We only have one life and we can not risk it crossing the street unless we “Know”, for sure, that it is safe to cross. Knowledge protects us, it strengthens our resolve, it propels us to action.

In real life, we must make certain everyday assumptions: the air we breath did not turn poisonous between breaths; gravity will continue to work today the same way it worked yesterday. But we never fully “Know”, with a capital letter K and we should not pretend to. To Know is to be certain beyond the need for further evidence, argument, research, or discussion. When you “Know” something, you begin to lose patience with those wishing to keep the debate open. You can see why this type of Knowledge can become dangerous. Knowledge is a Pursuit, not a destination you can ever fully arrive at – like a hyperbolic curve approaching an asymptote, we may never fully get there, but we do get close enough to remove reasonable doubt, to act with confidence, while still keeping our eyes and minds open for new information. Experience is important, information is important, but Knowing – Knowing with absolute certainty is dangerous because it closes the mind to new information.

As humans, when we try to seek out and protect a particular type of knowledge that we call the “truth”. via Google

Source: via Google

Truth is valid knowledge.

Knowing the truth then is being aware of reality through observation, inquiry, or information. We learn overtime to trust our intuition about the world and over time we feel safe enough to proclaim certain things as truth but we must always be on guard against over using the Truth label. Truth is not something you know, but something you pursue. The pursuit of truth is science. But the moment you think arrive at truth, it becomes something else – something unscientific. Science is the constant pursuit of truth which recedes like the horizon. We can see the horizon. We can move towards it. But we can never reach it. This is not a fuzzy call to undermine faith in reality. But a reminder to always seek new evidence to reinforce even the most well travelled truths.

Why does a web designer need to split these hairs?

This conversation is important because as designers, we make decisions that impact the lives of millions of people. To make these decisions we need to be confident that we have found the right solution to the right problem. But we must never fully close the door to new information. We must be confident enough to promote and defend the designs we craft, but never so arrogant that we stop seeking more information and validation. The constant, un-ending pursuit of knowledge is the core activity that drives user centered design. The moment you find yourself “knowing” what is best for the users, take a note to validate that by actually asking the users and listening to what they have to say. If it has been more than a month, or a year since you spoke to a real user and validated some of your core assumptions about what they like and do not like, your not doing your job. You do not have to slow down or stop the project, but remind yourself that in the end, you do not own the site – the user does. While you can approach knowledge of who they are and how they will react and understand the page, you will never fully get there. There SHOULD always be doubt. And when in doubt, ask the user.

Optimum Web Readability – Max and min width for page text

By | Web Design | 2 Comments

When you write content, normally you do not have to worry about the length of your sentences (unless you are on Twitter). Most web pages and applications you use will automatically wrap your sentences when you get to the end of the page. But as a designer, it IS your job to worry about this and every other detail that effects how the page is used, read, and understood. There are many factors that effect the readability of text on the web:

  • Font selection (Ariel, Helvetica, Comic Sans)
  • Size of the font (10px, 12px, 50px)
  • Color and contrast (Black is readable on white, not on black)
  • Spelling and Grammar (my old grade school nemesis)
  • Word choice, idea density, complexity, image usage, grammar, language, etc…

Each of these deserves its own post. But today I’m talking about line length. Having the right amount of characters on each line is key to the readability of your text. How wide should a column of text be, to optimize readability?

Short answer: approximately 55-100 characters depending on your audience and the medium! This is the common rule of thumb and from my own experience and research I agree with it.

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. So what’s the downsides of violating this range?

  • If your text is too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
  • Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).

It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).


Technical manuals and academic papers are more densely written (although I wonder if this is to convey the impression of knowledge and complexity that might be undermined by a big, easy to read letters on the page).  Smart people like to read things that make them feel smart. The pages of academic pages and published studies are densely packed with small fonts, but most still honor the rules of readability.

Most columns are 65 characters in length.

Nature: The International weekly journal of science; Most columns are 65 characters in length.

If its a children’s book, and you are teaching people to read, you might only have a few words per line (i.e “See spot. See Spot Run. Run Spot Run!”). Young adult books also have large fonts and thus fewer words per line – Charlotte’s Web is recommended for readers 9 to 11 years old and is on the low end of the scale at 55 characters per line.  Young readers need larger fonts and more space to separate each word for clarity.


Children’s books like Charlotte’s Web use a larger font and only 55 characters per line.

Printed newspapers have the shortest columns widths of printed material with 25-35 words in a column inch.

nyt paper - 35

For centuries, page design has been influenced by the so called “golden ratio

The golden ratio as applied to page margins and width is used in many books.

The golden ratio as applied to page margins and width is used in many books.

When the Renaissance genius Leonardo_da_Vinci put pen to paper he did so with a careful observation of the golden ratio.

Da Vinci was obsessed with the golden ratio but not readability, all the text was written in a mirror image with 85 characters per line.

Da Vinci was obsessed with the golden ratio but not readability, all the text was written in a mirror image with 85 characters per line.

Early printed books used “justification” to get exactly the same amount of characters per line by breaking words with hyphens and varying the amount of spacing. This makes the page look better but its not always the best for readability. Automatic justification in programs like Microsoft Word is even worse for readability because it can create huge gaps in the sentence and the brain has to work harder to read them.

Early typeset printed documents fudged the spacing to "justify" the margins (50 characters per line)

Early typeset printed documents fudged the spacing to “justify” the margins (50 characters per line)

Some other considerations:

  • Search engines prefer titles with 70 characters or less.
  • Plain English recommends short sentences. Robert Gunning faults marathon sentences in his book How To Take The Fog Out Of Writing. Though he admits to the possibility of long sentences being balanced and readable, he notes that only highly skilled writers such as Charles Dickens and Thomas Wolfe can write a marathon sentence with clarity. He adds: “But even these accomplished writers produced marathon sentences only occasionally. On the average, they wrote fewer than 20 words per sentence.”
  • In an app or special device, like the kindle, you have the ability to completely focus on the text.
The kindle has 50 characters per line

The kindle has 50 characters per line

My favorites:

New York Times - 77 characters per line.

New York Times – 77 characters per line.

usa today - 55 - 85

USA Today has 55 characters on lines next to images, and 85 on the long lines.


These are not absolutes, but when you look at the most readable sites and applications on the web, and by that I mean not the prettiest, or most aesthetically pleasing, because something can look great, and maybe have the impression of usability, but be difficult to use in reality. Sometimes I find myself looking at beautiful page, but not wanting to read the text. The following pages have great readability in my opinion. Keep in mind, if the content is interesting to you, you will find a way to read it no mater what the obstacles. But as designers, we should at least make sure we do not get in the way.

Design Strategy: Go big or go classy

By | Web Design | No Comments

When you design something, there are two ways to do it. You can go big, and invest your whole heart and soul into it. You can pour time, money, and passion into the endeavor and hope it pays off. Big design is risky. You take chances, and if your do it right, and create something special, the world will love you.

The other approach is to stay with the classics. It took me a long time to learn this. My first lesson was Halloween. Every year, Halloween at the Shoemate house brings performance anxiety. I get my knife out and I stare at the blank face of the pumpkin. I know that a REAL artist would go big. By the end of the night a real artist would carve this pumpkin into some kind of 3d masterpiece that would give neighbor kids nightmares and go viral on the internet. And if I took my time, planned it out, refined the design, thought it through, I could, and have, pull off something awesome. But the truth is, I didn’t plan, and I don’t have time to go big. I still don’t even have my costume picked out.

So if you can’t go big, if you lack the time, skill, or energy to do it right. Then fall back on the classics.

  • Triangle eyes, square notch at the bottom for pupils.
  • Triangle nose.
  • Square toothed smile.

Simple. Fast. Easy. Classic. The classic jack-o-lantern works.

Getting dressed up for a wedding? Black suit, black tie, white shirt – classic.

Making content for a website? Don’t have time to make a fancy info-graphic? That’s ok. Headers, bulleted lists, simple images. Classic.

The classic is a classic for a reason: It works. It’s not boring, you won’t look bad, you don’t need an excuse and if anything, it makes a bolder statement.

Picasso often said: color weakens. So he used just black and white. If you use color, do it deliberately. Boldly. No grey. If you want black – go black. Know what you want and do it.


By the way: Picasso Black and White on exhibit at the Houston Museum of Fine Arts


Book Recommendation: Ready Player One

By | Web Design | 2 Comments


I do not recommend books very often, but I recommend this one. Go read: Ready Player One. If you have a single fond memory of the 1980s, or liked any of the following movies: The Matrix, Willy Wonka and the Chocolate Factory (the old good one), Star Wars (again, pre-prequel Star Wars), and if you ever played video games as a kid (and still do) – then you love this book.

I read it straight through over the weekend and I could not put it down and immediately started re-reading it as soon as it was over. I’m gushing about it on my blog because my wife doesn’t share my love for giant robots, virtual reality, or video games but I know that you (the Internet) share my passion for all things geek. Of coarse – you might need to lower your expectations. I had low expectations and only picked it up because Barns and Nobles had it on the buy 2 get one free shelf (yes I still ready paper books). Anyway – hats off to the author Ernest Cline – he wrote the book I wanted to write.

Read it, and let me know what you think.

Require a user’s email before downloading a file with wordpress

By | Web Design | 5 Comments

I have created some presentations on various topics including one on Best Practices for Personalization with IBM WebSphere Portal that I am going to post shortly to but before I do, I don’t want to just give it away for free, I want to at least collect the email address of users so I can send them updates or ask if they want to schedule a discussion. Note: Our website used wordpress when I wrote this, now we just a different method.

Assuming you use wordpress, here is how you can require a user to fill in a form in order to get access to a download.

Step 1: Installed the plugin Email Before Download – Email Before Download presents your users with a form where they submit information, like their name and email address, prior to receiving a download. This plugin integrates with the popular Contact Form 7 and WordPress Download Monitor plugins, allowing you to create any form you like and manage/monitor your file downloads.

Step 2: Installed Contact Form 7 – Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Step 3: Install Download Monitor – WordPress Download Monitor Even though it is no longer supported, it still works.

Ok. So now let’s test:

I uploaded a small image as the file.

    Download requires your emailPlease complete the following for access to the free download. A link will be sent to your email. It might go to spam so check.

[email-download download_id=”1″ contact_form_id=”17226″]