
Adobe
While doing some research on social bookmarking several months ago, I visited the del.icio.us website. As I scanned the list of popular websites, an entry called “Ian's Shoelace Site - Shoelace Knots - How To Tie Your Shoes” caught my eye. I was curious—who would make a website about tying shoes?
What I found fascinated me, but it took me a long time to figure out why I was drawn to this site. At first glance, the main page is full of text—not something I’m usually attracted to. Not only is there a lot of text, but it looks like the typeface is Times Roman or some other default font. Overall, it doesn’t give the impression that a graphic designer created this site. It looks more like a site created by an organized person who is passionate about his hobby and wants to share as much information about that hobby as he can.
There are zillions of hobby sites on the web, so what made me stay on Ian’s site? What made me click on the different links and explore? In a word—illustrations are what held me there.
Figure 1: Ian’s Shoelace Site is very text heavy, but the illustrations are what draws the eye and holds the interest.
In the section called “17 Different Ways to Tie Shoelaces,” Ian has placed 17 perfect little illustrations next to the name of each knot. Those drawings are a great example of why an illustration is often more effective than a photograph when creating instructional material. I clicked on the Ian Knot illustration and that’s when I was really hooked.
Figure 2: At first glance, there are three different ways to learn how to tie Ian’s knot.
Ian offers several different ways of learning how to tie his knot. At the top of the Ian Knot page, he has a looping video showing a person tying that particular knot. Next to that there is a quick explanation on how to tie the knot. Underneath the video, he has step-by-step instructions very clearly spelled out for each step with two different illustrations per step. If that weren’t enough, you can look in the left navigation bar and find a link to the flip book.
Figure 3: By moving your cursor across the numbered squares at the bottom, you can scroll through the step illustrations at your own pace.
This great little feature allows you to flip through the illustrations at your own speed to see how the knot is tied. You can also click on the video link and watch a video of him tying the knot on a real shoe. The video not only has a voice-over, but it also has English subtitles. Finally, if you want to know more about the Ian knot, you can click on the Technical Info link, the History link, or the Testimonials link to read what others think of Ian’s knot.
Like a religious convert, I began to share Ian’s site with others. We started trading different “how to” sites with each other. I saw a little Japanese movie on how to fold a shirt in 30 seconds. It was good, but without written and illustrated step-by-step instructions, it was a little hard to follow the method that went by so quickly on the video. I found several good tutorials on how to cut a mango but there was only one choice per website—a video or written step-by-step instructions. I went back and visited Ian’s site several times and it took me a while to understand why I found this site so interesting and compelling. It wasn’t because I was fascinated by knots or shoelaces. I finally decided that what I love about this site is it is an excellent example of instructional design. It is excellent because Ian offers his instruction in several different ways to appeal to people with different learning styles.