Icky Pants

I cracked up this morning as Abby ran by my door with some coins she pilfered from my change jar saying, “Come on dad, I need to put some coins in my icky pants.” Of course she was talking about her Piggy Bank. She made the icky pants later when she failed to tell us that she had to go potty 🙁

Microsoft Music Store

If you’re after a booooring web interface with which to buy your music online, look no further than The MSN Music Store.

They’ve carefully used tables and div tags all over the HTML code to help make sure that their compatibility with browsers that render boring (Netscape 4). The top albums pictured on the page further the ‘old-way’ mindset of major artists with no-one new or independent shown on the list. Beautiful… not!

Link via www.kottke.org.

Why I Sing So Well

I get asked all the time (read: never) why I sing so well. I have to confess that a majority of the singing I do during the week is around 7:45-8:15 PM while I brush Abigails teeth. I don’t brush her teeth for thirty minutes, but the brushing usually happens within that range of time. Before you panic and think of our dental bills, Jessica brushes her teeth in the morning. I brush my teeth at lunch so that our lone toothbrush is usually dry by the time each family member uses it. That way whatever we spend on dental bills we more than make up for by saving on toothbrushes.

Abigail enjoys brushing her teeth because her Grandma Forland whilst working at the poshe dental supply company, J.B. Dental, purchased her a Mickey Mouse, song playing, electric, rechargeable tooth brush. After each minute of brushing (assuming that being on is equal to brushing time) it plays a little encouraging song. The song is helpful because it lets me know when one minute is over and then it also makes children wish that everything else in life played little songs every minute. Fortunately the toy companies are onto this and so our apartment is a constant cacophony of beeping, laughing Barney sounds, giggling Abby sounds and bleep-bloop-bloop sounds of various edutainment contraptions.

Of course many of these toys play songs that Abby wants me to sing with her. These songs, singing times and repetetive melodies keep my voice in tip-top shape ready to break out into the A-B-C’s, Old MacDonald Was Quite Alarmed, Twinkle, Twinkle Kenneth Star, and my personal favorite: B-I-N-G-O. I can clap that song like a pro, I’m a clapping fool when that song comes on. That song is particularly dangerous during teeth brushing time, I’d sure hate to be holding Abby’s toothbrush in her mouth and accidentally try to clap at the wrong time 😉

Welcome to the World

Welcome to God’s green earth Elijah Michael DeKruyter! Elijah was born on August 29th way too late in the day (11:51, poor Janelle) weighing in at 7 pounds, 9 ounces. Being tallish like his father he is approximately 20.5 inches tall. Super duper!

AudioBlogging: Dumb

This MP3 file has got to be one of the funniest serious things I’ve heard in a while. Way more funny than the RNC or this little video clip. Why is it funny? Because it exposes the silly nature of audioblogging on the web. I have often wondered why various technologies or trends come into play, audio and video blogging is one of them. You’ll have to listen to it to understand.

Hat tip: Simon Willison

Suffering in Site Design

Jakob Nielsen was interviewed on CNN.com and at the bottom of the article was a statement about user testing that really hit me:

…And you sit back and you watch them, and you will suffer, because I guarantee when your customers try out your Web site, they will fail again and again, they will complain bitterly about many design elements that you never even thought to question, and that’s why user testing is the ultimate reality check

Here are some things I’ve learned from my seminary classes on hermeneutics. Hermeneutics is not just a theological thing, but an everyday thing that you use. It is required in law school as well as seminaries. Hermeneutics is the science of determining what a text means and how it applies. Hermeneutics has three major steps:

  1. Observe
  2. Interpret
  3. Apply

Now before I lose you, let me make this really practical, if you’re designing a web site, you need to know how your user will do those three things. In speech we communicate in certain ways and listeners observe (listen) to what is said, interpret what is said and then, if there is an application (often the point of speaking) they will hopefully apply what you’ve said. Lawyers need to be able to observe the law, interpret the elements of the law and then apply them in legal cases. Hermeneutics is basic and simple, but if we try to just skim over these steps then there may be a reason why there’s suffering in web development.

Observe
Observation requires asking the questions: Who? What? When? Where? Why? How? Those questions are asked about all sorts of elements of your page. These questions are often critical for writing mission statements and other documents that give direction to companies and projects. Some things on your page don’t have one of those aspects. Below are some things to ponder on these questions.

Who?
If you’re working on a blog, the who is most likely the author of the blog, however, your who may also be the reader or an interviewee. Ask yourself some of the following questions: Who is the page about? Who is the page for? Who will benefit?

What?
This question is often the topic or subject of a page. If this is not readily obvious, then your page is not well designed at all.

When?
I’m not sure how this one fits in with many web pages, other than having some sort of dating on the page may be valuable. If your content cites an article that reviews a product, a date might be valuable. Press releases fall under the category of needing a date. Scripting events obviously need a time element, if you have time oriented content on your page make sure that it is handicap accessible.

Where?
Where you put content is probably a critical issue. Know your audience. If you deal in internationalization (i18n) then you really need to keep track of this because multiple cultures deal with text flow that is not Left-to-Right. Where is the event? Lots of "where’s" exist.

Why?
Why? This is the question that we all must ask, I think it may very well be one of the most common song titles to every be used. I would hazard a guess that one in ten full length albums that are ever released has a song called Why. Enough of the music. Why you placed something on a page, why your CSS adds hovering (you are using CSS for mouseovers aren’t you?) effects, or why it doesn’t? Asking this critical question can make or break your design. Why sites have four major attention grabbing elements on a page is a mystery to me, but plenty of sites do that.

How?
How will the user navigate? How will the user find information? How will they search? How will they pay? How will they receive the product? How will the links stand out on the page? How will this get translated? How will the translation be received?

Remember to ask these questions because they will lead you to potentials for user interpretation of the site. Something that is key in thinking about web design is that every person who comes to the page for the first time has to figure out how the site works. They will be asking at least a sub-set of these very questions regarding the site. A core set of things they might ask are

  • What site am I on?
  • How do I navigate?
  • What is this page about?

Where’s the Beef?
In a fractal-like manner pages are made up of elements (nodes or tags) that should have the same questions asked of them. Why am I using this tag? Why am I using this CSS selector or pseudo class? Why does this link have a hover effect in the navigation, but all of the other links look different [I am not saying this is bad, but just suggesting you ask why it behaves differently]? Why did I style the <abbr> and <acronym> tags that way (you are styling them aren’t you? Remember that Internet Explorer may not render them styled like Mozilla or Opera)?

Interpretation
Most users will find this information by scanning the document starting from top to bottom (Left-to-Right in some countries, with variation by language). Make sure that the page elements complement this style, or at least give visual clarity to distinguish anything that breaks this pattern. For example if your menu is on the right hand side instead of the common left hand side or secondary top (under a banner) then you will want to distinguish it because often advertisements are on the right hand side while navigation is on the left.

As they scan the document they will pick up elements, fragments of data, and assimilate them into a summary of the site, page and content. By first planning out your site structure, page layout and content you will be able to place key elements inline so that users clearly identify those major things with little effort. While some sites use bread crumbs to help distinguish the location on the site, this is not usually a major heading and therefore can lend itself to be a good secondary source for those who further scan the page for more information.

One very strong argument for semantic HTML code is that, unless styled otherwise heading elements stand out and content is easily outlined. Interpretation of the content happens rather rapidly. Remember that if you’ve carefully asked and answered the questions that detail user observation that they will be able to interpret your document and then move onto action or application.

Application or Action
If your page does not cause people to take action or apply some detail to their lives then they will most likely not be interested in the content. Much of what is action oriented is tied to the content, something a designer may or may not have control over. However, action can still be influenced by the designer, if the sites colors don’t cause excitement (check out what colors mean in different countries) and may stir people to action. A common technique for political campaigns in the United States is to use Red, White and Blue to motivate people to vote for a candidate. Those colors mean patriotism and passion.

Conclusion
If you are privileged to do customer usage surveys with real life users this is a really good way to see observation, interpretation and application first hand as a designer or developer. By watching users use the site you’ll see if your planned and (hopefully) well executed not bring you to a point of suffering. The point of usability studies is to give you solutions to reduce the need for confirmation of design choices.

Please Comment:
In an upcoming article I hope to write basic reviews of sites that have paid attention to these details and remained simple without looking elementary in design. If there are sites that you see, use or know of that meet these requirements, please post them in the comments as I’m truly interested to hear your thoughts. Are their points that are not clear in this article? Do you disagree? What technique, philosophy or approach do you use to build a site design?

How Not to Use Flash

Dave Barry just announced today a new book that he and another fellow wrote: Peter and the Starcatchers. This book’s web site is one of the worst uses of Flash cursors (mouse pointer in layman’s terms) I have ever seen! Do I use the point of the sword (like I use the point of the mouse), or the butt of the sword? Well, it turns out you use the butt of the sword. Why! Why have a cursor so large at all?

This is not a book review though, because I have not read, nor do I want to project about the quality of the book.