UI&us is about User Interface Design, User Experience design and the cognitive psychology behind design in general. It's written by Keith Lang, co-founder of Skitch; now a part of Evernote. His views and opinions are his own and do not represent in any way the views or opinions of any company.
The Ableton Novation Launchpad is a hardware control interface to the Ableton Live performance software. It's taken a lot longer than I expected for this form factor to hit mainstream—but now that it has, expect to see this appearing in music videos in 3 months and in every garage band within 12. Via the excellent CreateDigitalMusic
A developer friend asked me recently if I had made the Skitch screencast video (which I had — embedded below). As my friend is planning to do a screencast for their application too, I thought I'd share a handful of tips and tricks I've learnt along the way.
The Skitch intro video was a success with 100,000's of views, comments dispersed all through it and generally positive response. It has it's share of flaws: the music over-stays it's welcome, I sound a bit like a late-night informercial, and the whole video packs in a few too many concepts for the time allocated. But I learnt a lot making it, so here's my…
TIPS & TRICKS for making sexy screencasts
Use the right tools for the job; Screenflow (Mac) is the best I've used, and makes getting a professional, styled result very easy. I don't know the equivalent on Windows sorry, but it's probably Camtasia. This video was hacked together in iMovie; a tool not made for the job
Much of the initial appeal of the video is due to the attractive intro/exit images, which represent the brilliance and taste of Cris Pearson and Jason Csizmadi (who made the Skitch icon). I think those graphics act as sexy bookends to bring up the perceived quality of anything I put in the middle
The fancy animation was all done in Quartz Composer which is bundled free with the developer tools on the Mac. QC is just something I was familiar with, but it wasn't the perfect tool for the job. There are many tools around — Keynote '09 provides some nice animation opportunities I might try out as well
Go easy on the music!
Beg/borrow a professional microphone, mic stand and USB/firewire audio interface for your voiceover. Use a 'pop filter' to avoid plosives from P's and B's. As any Pro video producer will tell you, good quality audio makes a huge difference on how good your video seems to look
In the Skitch video edited in zoomed-in shots for closeups of various interface elements. This was hard to do ten, but is *much* easier in Screenflow. Take the time to zoom in on small interface elements — otherwise many elements are impossible to see in a tiny video
Often you'll need to experiment with video output settings of your movie editor to get the right size (without resizing by the video host), and make sure you get enough keyframes in (1 per second if required)
BONUS TIP: I find a script really helps me sound confident and word sentences nicely. But writing a script which sounds natural, and syncs to on-screen action is nigh impossible. So, I found the following strategy handy:
Have a rough idea in your head of what you want to do in your screencast
Record your screencast, showing what you want and describing it as you go. Don't worry if you say something stupid, or bumble your words
Now listen back to your screencast and type down what you said
Edit your speech text to be more succinct and helpful
Re-record your voiceover, reading from the text document while watching your screencast
The result is a natural sounding, confident voiceover which matches up seamlessly with your actions on screen. Obviously this won't work for video of yourself, unless you're from Hollywood. Speaking of skills, be sure to watch how the pros do it — for example the great Don McAllister of Screencasts Online, and Apple make nice friendly videos that engage non-geeks.
I hope some of this helps. I'd love to see your tips and tricks I've missed.
The interesting result is that there are four 'melodies' that seem common to the voices used by parents to their children across all cultures. What if more applications used these kinds of sounds to communicate messages? For example, Instant Messages always use identical sounds -- what if an "ok" had a certain sound, or a question had a related, but slightly different sound. Logically, a "bye" or similar phrase in the chat would invoke yet another, different sound. The benefit of these sounds is to enable you to choose how soon to respond to a message, without needing to view it.
Instant Messaging, by it's very nature, encourages multitasking.. and if you're busy with another task it may be some seconds or minutes before you switch over to the message. If you knew that message was simply an "OK" then you may not switch so fast.. but if it was a "bye!" then you may switch over quickly to be able to say goodbye in return before the other person logged off.
There are some attempted solutions out there for this problem. One of the more successful is Growl, which shows small text messages on the side of your screen, no matter what app you're in.
The problem here is that this notification is using the same mode as you're probably already engaged in: reading text. So If you're typing away at your document, and an Instant Message comes in, then you need to switch your visual focus to this new area, and read the text. There is no other way to absorb this content.
Better would be to map these message's context and content to some kind of animation. An excellent example is the way the icons in the Mac OS X Dock jump up and down to attract attention when an application requires user input.
The human brain is optimized for certain tasks, and can handle different types of information at once, as long as it's not in the same modes/channels of communication.