Training Professionals: Put this Article in Your Pocket

If you are involved in workplace training at all, you should read this: The Science of Training and Development in Organizations: What Matters in Practice. I saw this article recommended on LinkedIn via Will Thalheimer’s blog, Will at Work Learning. There is so much relevant information in this 28 page–really 22 page if you ignore the references–review article that it’s hard to summarize it in a short post. Also, I don’t want you to read my summary, I want you to read the actual article because it’s that good. It is an academic paper, but it takes a practical approach to the research and provides checklists to help you implement the recommendations they make based on the research and theory.

I’ll just leave you with a few quotes that I found most interesting and repeat my humble request to go read this amazing article!

“Leaders often send the signal to training developers, either directly or inadvertently, that there is no time or need to diagnose training needs. This leads to suboptimal training.”


“One should be careful not to oversell or create false expectations when communicating about forthcoming training programs. Trainees should understand how the training is relevant to successful job performance but should receive realistic previews of what and how content will be covered.”


“What happens in training is not the only thing that matters—a focus on what happens before and after training can be as important. Steps should be taken to ensure that trainees perceive support from the organization, are motivated to learn the material, and anticipate the opportunity to use their skills once on (or back on) the job.”


“As we will note later, what supervisors do and say about training affects the trainee. Smith-Jentsch et al. (2001) found that one misdirected comment by a team leader can wipe out the full effects of a training program.”


“Arthur, Bennett, Stanush, and McNelly (1998) conducted a metaanalysis of skill decay studies and reported that the day after training, trainees exhibit little to no skill decay, but 1 year after training, trainees have lost over 90% of what they learned.”


Site redesign in the works

Site redesign in the works

Since I’m currently between jobs I am expanding my skill set by taking Treehouse courses in the hope of making myself a better job candidate. Up-to-now I’ve been entirely self-taught in web design, so I knew there were gaps in my knowledge that I should fill. Most of the HTML courses have been review, but the CSS classes are blowing my mind. There’s so much I didn’t learn about selectors and combinators, plus best practices for writing stylesheets. Once I finish the HTML/CSS classes I plan to learn some Javascript, PHP, and possibly Ruby. If you’re interested in some self-guided learning, I’d definitely recommend Treehouse. It’s only $25/month for unlimited access to all of the course videos, quizzes, and projects and you can use my discount code so your first month is 50% off.

After learning some new tricks, I’m inspired to redesign my portfolio and website. Unfortunately, since this site is hosted on I’m limited in how much I can customize it. Thereore it will take some time for me to sign up for a new host and get everything transferred over and customized. I realized that this would also be a good chance to demonstrate some UX skills, so I’m documenting the process from the rough sketch < low-fidelity mock-up < high-fidelity prototype. See all the steps below for my new homepage design.  The featured image at the top show’s my high-fidelity prototype created with HTML/CSS.

Sketch done on graph paper with a pen. Outlines the various sections and their relative sizes.

Sketch done on graph paper with a pen. Outlines the various sections and their relative sizes.

Low-fidelity mock-up created using Basalmiq. Shows rough UI design using placeholder text.

Low-fidelity mock-up created using Basalmiq. Shows rough UI design using placeholder text.

Notice that some revisions have been made between versions. That’s expected as the design evolves. Let me know what you think! I’m working hard to implement the new site design as soon as I am able.

Evolution of a Design

Evolution of a Design

It’s usually best to force yourself to come up with more than one version of an idea. Each iteration is more refined until in the end you have a better overall design. Sure, you might make missteps, but overall you’ll make progress. When I first started the Stahl group website, this was the graphic on the home page.

Original graphic from the Stahl Group website.

Original graphic from the Stahl Group website.

I wanted to try and make something with a bit more flair, while still keeping the original meaning. The graphic shows a catalytic cycle and how each focus of their research feeds into it. As we discussed the design more we wanted to show that some aspects feed into the group’s catalysis research (reaction mechanisms, synthetic methods, electrocatalysis) and others are products of the research (renewable energy, green chemistry). For those non-chemists out there, in a catalytic cycle the reactants typically enter on the lower-right, and products exit the cycle on the upper-left. Prof. Stahl also wanted to incorporate oxygen (O2) as the group’s catalysis research focuses on using oxygen as the oxidant. Below shows how my design evolved over time.

Design C was the last one I created and I felt it was the best overall. In the end, Prof. Stahl preferred the design from A, with slight modifications–the final result being design D.

There were actually more versions than this, but I wanted to show you the big steps in the design evolution, not every subtle change. This whole process reminded me that in the end the designer has to go with what the client wants, not necessary the version that the designer prefers.

Stahl group website

Stahl group website

I recently completed the new website for the Shannon S. Stahl research group at UW-Madison. Like the other websites I’ve done for members of the UW-Madison Chemistry Department, it was implemented using Drupal. I went to a lot of effort to make the site easily manageable for future students. I created several custom content types and views to make editing quick and simple. This was also the first time I’ve poked around under the hood and directly edited the CSS for the theme. I learned a lot, and I’m sure the next Drupal site I do will be even easier.

Presentations playing dress-up

Suited up.

Suited up. (Photo credit: ianmunroe)
This kid actually pulls it off well.

I saw a talk today that suffered from too much ‘pretty’ and not enough content. It reminded me of little kids playing dress-up. They’re wearing the fancy clothes, but  they sleeves and pants are too long and end up looking silly. If you slap a bunch of fancy typesetting and animation on a presentation that doesn’t really say anything. Your audience will spot it. It’s better to have something that’s not perfectly polished visually as long as the content is solid. You need to have a story, entice your audience into following you through it, and then deliver it confidently.

Having a pretty slide deck can help make your presentation more memorable, but if all you have are pretty slides then your audience will still forget you by the next day.

The tangled web of image copyright

When I started designing websites I was 14, so I didn’t pay much attention to image copyright. I found the images I wanted from one of the hundreds of Free Clipart sites that were out there, and considered it a day. I realized recently that I still didn’t know much about actual copyright law, so I decided to dig into it. (I’m specially covering U.S. copyright law herein.)

What is copyright? It may seem contradictory today, but copyright law was put in place to encourage creatives to produce more works. Copyright is bestowed upon the creator of an original work upon completion. You don’t have to apply for it, or do anything special, it’s automatically yours. Copyright law eventually expires and the work enters the public domain. This is important for the overall advancement of our culture because works in the public domain can be freely used, remixed or expanded upon by anyone, and the new work gets it’s own copyright and the cycle continues. Copyright used to expire upon the death of the holding author or artist, but over the years that time has been extended so today copyright generally lasts 70 years after death.

Copyright affects all creative works, but now let’s focus on images.

What is copyright infringement? Copyright bestows a set of exclusive rights to the holder, and if you infringe on their copyright you are violating those rights. I originally thought that I only had to worry about using an image as-is as the only type of infringement. Here are some other examples of imagery infringement, borrowed from, and they may surprise you.

  • Use of whole or part of an image without permission
  • Use beyond the scope of the license or permission
  • Adapting an image without permission (art rendering)
  • Asking another photographer to identically recreate the image

How do I license an image? Image licensing, especially photography, becomes more complicated because it’s not just the photographer that has rights over the image. Models (any people in the photography) need to sign a release saying it’s ok to use their face commercially. Additionally you may need property releases if the image contains buildings, public places or landmarks with photography policies (stadiums, museums, historical sites), unique vehicles or recognizable animals (like exotic pets, race horses, etc.). You also must be careful about showing trademarks in photos, because you can be sued for royalties or be forced to remove the image. (Trademarks are a whole other can of worms that you can read more about on your own.) So even if you take photographs yourself, remember to get signed model/property releases, and avoid capturing trademarks.

What are the benefits of licensing images from stock photo companies? Stock photo companies provide an umbrella of protection over you. Because the company is responsible for acquiring all necessary releases and validating the legitimacy of the image, if a lawsuit arises over the image the stock photo company is liable, not you. That’s one reason stock photos are expensive, because the company has to obtain all necessary documentation and then maintain it in case disputes arise. This can be important because even if you take an image from a site that claims it is free to use, you are the one that’s liable if anyone disputes that fact, and you have no guarantee that the proper releases were obtained.

Yeah, but I’m just using it for my non-commercial blog. Doesn’t matter. You’re still infringing on copyright unless you get the proper licensing and permissions. The only leeway is with the Fair Use doctrine, which is subjective and defined by four factors:

  1. The purpose and character of the use, including whether such use is of commercial nature or is for nonprofit educational purposes
  2. The nature of the copyrighted work
  3. The amount and substantiality of the portion used in relation to the copyrighted work as a whole
  4. The effect of the use upon the potential market for, or value of, the copyrighted work

Where copyright protects the author or artist, fair use is supposed to protect the public interest. Fair use is entirely subjective and decided in federal court when challenged.

So what do I do? You still have a few options, you can take your own photographs (and obtain appropriate releases), use public domain or Creative Commons licensed imagery, or purchase images from a reputable stock photo broker. Regardless of what you choose, this is just an introduction to the intricacy of copyright law and I highly recommend learning more about it on your own.


Mock-up tools for user interface design

We’re celebrating World Usability Day (IEEE – November 8th) all this week at work, so I’ve got usability on my mind. It got me thinking about how I go about generating mock-ups for websites and user interfaces. Here are a few options and my opinions of them.


Mockups is an excellent tool for designing user interfaces. It’s fast and easy to use. However, if it’s not something you do all the time you might have trouble justifying the $79 price tag for a single user license. (That’s a seriously reasonable price by-the-way, but as someone who does design mostly as a hobby I still don’t want to pay for something specialized when I can get by with other tools.) If I got a job in design and was working on interfaces on a daily basis I would definitely purchase the desktop version of Balsalmiq Mockups. If you’re interested in trying it out their web version has a free trial; you can use most of the features, but you get a pop-up every five minutes reminding you that it’s a trial.


You didn’t think about using PowerPoint to make mock-ups did you? It’s been a go-to standard for many designers over the years. It’s not as specialized as a tool like Balsalmiq, but you can use action buttons and multiple slides to build in some minimal interactivity. If you use macros you can make it even fancier. If you’re going to do a lot of mock-ups you should build a “library” of components; just save a few slides with some of the basic shapes and buttons that you can edit for your needs. The main reason I like PowerPoint is that I already have it and know how to use it. I don’t have to learn a new piece of software to do mockups a couple times a year.


Depending on your comfort level with Inkscape, it would be a great tool for mock-ups. You could create a pattern library with the basic components that you use most often to make your work easier. (Maybe? I’ve never done this, it just seems like a good idea.) Inkscape may not be the best for interface design, but the nice thing about using it for web design is you can export pieces of the design for use in the final product. So half of your final work is done already.

Paper and Pen

Hopefully this is the most obvious answer, it’s also the one I do first before any of the options listed above. Doodling a quick sketch is the best way to get your ideas down and see if they make sense. You can talk them over with coworkers before investing hours making a better looking mock-up with one of the above tools.

Those are my suggestions. Which tools do you use most for mock-ups?