Free webinar Monday, Aug 27, Key Trends in Software User Assistance http://ow.ly/deeHn
Category Archives: Uncategorized
Eye-tracking is a technology-based technique that can provide some unique insights into how our users interact with a software user interface. There certainly are a number of pros and cons to using eye-tracking. However, the best software designs often come from having a wide variety of research tools at our disposal.
Small-business practitioners who would like to conduct their own eye-tracking research often find the relatively high cost of the systems to be prohibitive. Prices in excess of twenty thousand dollars only fit the budgets of fairly large organizations. A more affordable solution – EyeGuide Eye Tracker – is now available from a company called Grinbath. Here is a quick look at what you can expect from this product.
EyeGuide comes with hardware and software components. A series of videos on the EyeGuide web site takes you through the process of connecting and calibrating the hardware. The eye rig consists of a headband attached to which is a battery pack, camera and an LED light source. A simple on/off switch is the only control on the headset.
Using a headset is a less than optimal way to gather eye-tracking data. It definitely adds a foreign element into the experiment and may be distracting to the test subject. Setting it up with each subject requires fitting and calibrating the unit while it is on their head. On the positive side, it makes the system very portable and probably contributed to its relatively inexpensive price.
The image from the headset is controlled by EyeGuide Capture software, available for PC and Mac. The Capture application is presented in a window with a live black and white viewer showing what the camera is picking up. The connection between the computer and the headset is through a USB radio transmitter that plugs into the computer.
It took me about 30 minutes of experimentation to figure out the best headset arrangement. The camera and LED should be positioned about two to three inches below the eye. When it is correctly positioned the Capture viewer shows a green circle lock on the pupil.
At first, I had some problems getting a clear signal from the camera. It turned out that the rat’s nest of devices, plugs, cables, and lights on my desk was causing the interference. The camera operates at 2.4 GHz, the same frequency as a lot of wireless devices. Everything cleared up when I ran the system from my laptop in a room with no other electronics.
The next step is to create a series of instructional steps for your experiment using the Capture software. These instructions are displayed to the test subject in sequential order after the test is started. A checkmark icon appears in the bottom corner of the test screen. When the subject completes a step, they click the icon to display the next instruction. The eye-tracking data is being recorded throughout the experiment.
A separate application, Analyze, is used to review your data. A tabbed interface gives you a number of ways to look at it. First, there is a real-time animation of the experiment – Replay – that uses a circle to represent the focus of the eye moving around the test screen. The Gaze Plot provides a more detailed animation drawing straight lines between major dwell points (shown below). The Reply and Gaze plots give you a good overall understanding of what attracted the attention of the test subject in the UI.
Three other plots – Heatmap, Bee Swarm, and Clusters – provide supplemental views of the data. All the map plots are controlled with Play/Pause buttons. It would be nice if the video progress bar could be clicked on to instantly jump back and forth in the video.
You can export any video or image frame of any recording. You can also get the gaze plot data in CSV format which shows you the pupil x and y coordinates at 50 times per second. If you want other data points, such as pupil diameter, you can use the API which also comes with the system.
The camera and camera arm are encased in plastic. It appears that it would be durable over time. My demo unit came with a AAA battery charger and I needed it. I forgot to turn off the unit and the batteries were dead when I got back to it the next day.
There are alternate LED attachments for different users and for replacements. A short LED is optimal for quick set up and calibration for users without glasses or obstructed pupils. The longer LEDs are intended for more flexibility, so that people with glasses or otherwise obstructed pupils can get proper lighting for a good lock and a good calibration.
The only part of the hardware I didn’t like is that the USB receiver has a wide body and took up two USB slots on my laptop. Also, with the quick battery drain I experienced, don’t forget to keep the charger handy.
The price is $2,495 USD for commercial customers, $2,295 USD for academics, government, and nonprofits. There is discounted pricing for multiple unit purchases.
All software upgrades are free, so any addition to future versions will be available to all customers with complete backwards compatibility. They promise customer support with a turnaround of one business day maximum via support forum, email (support.grinbath.com), and Skype.
In summary, this device provides a relatively affordable solution for organizations with limited budgets. The headset introduces an artificial experience into any experiment, but it makes the unit portable. It is pretty rugged and should work well on field trips. The Capture and Analyze software gives you all the data and quality you need for simple experiments. If you are looking to add eye-tracking to your software design and testing, this is a great value.
For more details, contact Jeremy Huston, EyeGuide™ Product Manager, Grinbath LLC, firstname.lastname@example.org, http://www.grinbath.com/eyeguide/
Nice article by Jeff Sauro on unnecessary messaging in applications: http://ow.ly/ceX6t
Last week was Google’s big week for announcements. I had tried to buy a ticket for the conference a couple months ago. The morning that tickets were scheduled to go on sale I got set up with my laptop about thirty minutes in advance. Internet connection: check. Registration page bookmarked: check. Google Wallet set up: check. Accurate time clock: check. At exactly 7am I refreshed the registration page and clicked the button to register. Waiting, waiting, waiting, “No tickets available”. Various news blogs wrote that tickets sold out in twenty minutes but it was more like forty-five seconds as far as I could tell.
Anyway, the sessions are all available on YouTube. The keynotes get all the publicity but there are dozens of technical sessions. I had a chance to check some of them out this weekend. There were two which had interesting nuggets of info.
The Web Can Do That? with Eric Bidelman
This session was Eric talking about some of his favorite technologies. Most of it was related to HTML5/CSS3. One of the things he highlighted was “flex box”. This is a model for creating compartments for content so that they automatically and gracefully adjust size and position. It can be used with media queries to reorganize content for different display sizes.
I hadn’t been aware of flex box even though it has been around for a couple of years. The W3C has a working draft in last call: http://www.w3.org/TR/css3-flexbox/
Eric also reference an interesting site, HTML Rocks: http://www.html5rocks.com/en/
What’s New in Android?
This session provided a deep dive into many of the technical details of Android 4.1 Jelly Bean. One of the sections (28 min. in) dealt with two new elements of Notifications – both of which may be of interest to UA designers. One is a new feature called bigContentView. This is an expansion of ContentView which can present an icon, a title and a short amount of text. The new view is bigger. It is taller and support photos, buttons, and more room for text. I could see where a bigContentView would be a great canvas for first-time user instructions.
The other new Notification feature is called Priority. It lets you tag notifications on a range from very important to very optional. The Android UI is then automatically configured to display notification appropriately, depending on what is going on in the app. A very important message could be tagged as MAX whereas a helpful tip might be tagged MIN. In between are three other mid-range settings – HIGH, DEFAULT, and LOW.
I think it is interesting that there was no mention of Google TV in the keynotes or the technical sessions. Whether or not that is significant is for the pundits to decide. Personally, I’m not as interested in Google TV specifically as I am about the design of apps for big screens in general.
I had searched for sessions on Google TV, figuring there would be some. I did find two – but they were both from the 2011 event. However, I hadn’t seen them before and they each had some interesting information that is still relevant and generally applicable to large-screen app design.
Building Android Apps for Google TV with Christian Kurzke
In this session there were a few good tips:
- Make sure the UI or your app recognizes that a remote with a D-pad is likely to be the primary controller. With a D-pad you need to carefully arrange your UI elements to minimize the number of button presses. Anyone who has tried to type something with their cable TV controller knows what a pain this can be.
- The display size of a large-screen TV is not really larger than a desktop PC screen when you factor in the distance we typically sit relative to the TV. They did calculations based on screen size combined with pixel densities and viewing distances and came up with some useful guidelines. Some of the details are here: https://developers.google.com/tv/android/docs/gtv_displayguide
- The over-scanning that TV manufactures put into their displays can result in unpredictable effects. They suggest letting the Google API do the heavy-lifting to appropriately scaling content. Make sure you’re using relative positioning for UI elements so that they can automatically scale and position themselves.
Building Web Apps with Google TV with Chris Wilson
A similar session from 2011 was hosted by Chris Wilson, the long-time Internet Explorer product manager who now works at Google. Some of the issues were redundant with the Kurzske talk but Chris also discussed color contrast and scrolling cues.
One other interesting suggestion he made was to add activity to the UI of a TV app. Since TV is a passive medium, most TV programs have a lot going on all the time. You want to keep your app UI active so the viewer doesn’t think something is wrong.
In the second part of the session, Daniels Lee presented the Google TC jQuery UI library which he said was particularly useful for doing TV app prototyping.
I’ll be teaching Fundamentals of Document Design at Bellevue College next month. The five-session class starts July 25.
Designed for both aspiring and experienced technical writers and editors, this course provides an introduction to the basic elements of document design, including layout, color, and typography for print documentation. Students gain experience and performance feedback while working individually to develop a user manual.
One of the more interesting trends in UA is the use of a customer email broadcast to provide Getting Started tips. After a person buys a product or subscribes to a service the vendor sends out an HMTL email message with Getting Started tips. When these kinds of messages are done thoughtfully I think they can be extremely valuable.
Apple does a really good job with this. I made online mail orders for both the iPad and iPhone 4. Before I received either product I received a Welcome note by email. The mail message was not cluttered with any sales garbage. It was pure user assistance.
The iPhone message told me where to find the User Guide on the device and provided links to videos about four topics. Each of the topics was useful in learning about the new phone. Quick scrolling, saving images from the web to the device, selecting wallpaper, and creating a playlist. The email also offered a free phone conversation with a tech support person to explain the new Facetime feature.
After subscribing to the Pandora music streaming service I received a message with a useful tip that described how to “seed” songs or artists to have more variety in a play list. Other tips pointed to a support blog and supplementary resources about artists.
Each of the tips was less than thirty words. The point of user assistance mail is to help the user begin working with your software with a positive experience. You don’t want to drive your new customer into a bottomless pit of arcane documentation.
The cost and ease of implementing a campaign like this will vary from organization to organization. There is generally a small financial cost to emailings. The construction of the email could be done in a day. The most critical part would be designing the message to be action-oriented and really helpful. However there can be expensive customer satisfaction costs if the emails are filled with notes about upgrades and add-ins. These emails should not be connected to sales and marketing campaigns.
More and more user assistance professionals are using video tutorials to help their customers. The idea of using video for instruction is as old as television. However, it is just in the past five years that all of the pieces have come together to make video a great choice for user assistance. Fast computer processors and small-screen technology have made all manner of mobile devices suitable video delivery platforms. The ubiquity of the Internet through Ethernet, 3G, and wi-fi has made streaming on-demand a reality. Many powerful video editing tools are available for under $100. And, maybe most importantly, our customers have become accustomed to watching videos for instructional purposes and welcome it as a learning alternative.
This article is a review of a video editing tool that is particularly well-suited to supporting the needs of user assistance professionals. Camtasia Studio from Techsmith offers a low-cost editing solution tailored to users with little or no background in video editing. At the same time, it offers robust features and special effects that are standard in much more expensive video software packages.
The review focuses on version 7 for Windows. I’ve included some of my own best practices and tips.
Working with Camtasia 7 for Windows
When you open Camtasia for the first time, a welcome box appears that provides shortcuts to record the screen, record narration, record a PowerPoint presentation or import files into your workspace. There are also links to online tutorials. The Getting Started video tutorial is a very useful resource. In general, the assistance provided to new users in Camtasia is excellent.
All good video editing tools have utilized the same basic components in the workspace and Camtasia fills the bill. The Camtasia workspace has three main areas. Media elements and the associated tasks are accessed and manipulated in the top left pane. A media player takes up the top right. The bottom section is dedicated to the video timeline.
Figure 1: The Camtasia workspace
Three of the most frequently used controls are represented in the button bar at the top left: Record the screen launches a multi-function recording studio; Import media lets you select media elements from a files window; Produce and share creates the video files in the formats you need to distribute them.
It would be nice if the panes in the workspace could be disengaged from each other. Then you would be able to size the windows as needed and not have to do as much scrolling or window re-sizing.
Recording the Screen
For most user assistance deliverables, recording a scenario in our software is a key element. In Camtasia, clicking the Record the screen button launches a compact recording dashboard. You’ll be alerted as to whether or not Camtasia senses a Camtasiaera and/or microphone attached to your computer.
It is easy to select whether to record actions on the whole screen or just a portion of it. A big red record button starts the action and an F10 key press stops it. The basic recording mechanism is very simple. However, there are a number of customizations you can make, including setting the screen capture resolution, visual style for the cursor, and alternate audio/video inputs.
At the conclusion of the recording, it appears in a preview window. If you don’t like the way it turned out you can press a button to delete it. If the video looks good, a button click saves it into your current project and displays it in the Clip Bin.
While the Camtasia recording process is clear and simple, the real work is in the planning and execution. It usually takes me a number of test trials and multiple test recordings before I get a clip that is a keeper. Some tips:
- If you are switching between several windows, organize them in advance. Size and position them to tell the best story.
- Practice the capture scenario several times to get a feel for the cursor movements. Adjust the cursor sensitivity or use a tablet and stylus to minimize jerkiness.
- Use the F9/F10 keys to start/stop the recording. This lets you keep the cursor in the initial and finish positions for the scene.
- Consider using the optional cursor effects to adjust the size, color, and shape of your pointer during screen captures.
Importing Media Elements
You will probably use a variety of media elements besides a recording made through Camtasia. You might have a clip that was done outside of Camtasia. You might want to use static images like logos, photos, or flowcharts. You can bring these types of media elements into your project with the Import Media button.
At this point, it is important to note that you really aren’t “importing” anything into the project. That is a bit of a misleading UI label. What you are really doing is pointing to individual media files stored on your system. The media icons in the Clip Bin are pointers to these files. If you move or delete the media files they won’t be found by Camtasia.
The timeline is the centerpiece of any video editing product. This is where you lay out your media elements and arrange them into a story. A good editing timeline offers multiple tracks for different types of media, like video, multiple audio tracks, and special effects. Camtasia provides all of that support through their timeline.
When you place your first media element in the timeline, several task tabs are activated. The task tabs are the gateway to developing callouts, transitions, audio adjustments and special effects. Helpful popups appear when you mouse over a task tab. When you select a task tab, all of the options associated with it appear in the top left pane.
A timeline toolbar provides controls for cutting, pasting, and splitting clips. Another control zooms the horizontal width of the timeline to make it easier to focus on very short durations of video. A sliding control lets you select specific frames in a clip and set in and out points for scenes.
Most of the Camtasia functions are available as keyboard shortcuts in addition to UI elements and menu items. For example the right/left arrow keys will move the timeline pointer in one second increments. The spacebar starts and stops the viewing of a clip. Ctrl + and – zooms the width of the timeline. These all provide finer control than clicking and dragging.
The preview window is very responsive and supports a variety of media formats. Selecting an element from the clip bin loads it into the preview windows. Jpg, gif, avi, wmf.
When you drop your first clip into the timeline, a message box prompts you to select the default dimensions for your video. The list of options includes helpful recommendations based on the delivery mechanism you plan to use.
Figure 2: Camtasia’s options and recommendations for video dimensions
Music and Narration
If you think about movies and TV shows, they would be a much poorer experience without an accompanying soundtrack and narration. These elements can make a video production much more engaging and memorable. Camtasia supports sound in a variety of ways.
First of all, you can choose to perform narration at the same time you do your screen capture. The recording dashboard will recognize available audio input devices and sync your voice with the images. If you take this approach, Camtasia will deliver the audio/video into your project as a single clip. While this option makes it a bit easier to manage your content, it poses significant challenges in execution of the content. Trying to be a narrator at the same time that you record your software can be tough.
I prefer to do narration as a separate recording session. You can record an audio-only clip through Camtasia or you can import sound files that were created with other software. While the sound recording tools in Camtasia are very good, there are dozens of software packages that specialize in sound production. I use a product called Record for All. Audacity is also an excellent tool.
I always create a “rough draft” narration recording based on my scripts. I play the rough draft recording in a separate media player while I do my screen captures. This helps give me the right pacing for the capture movements.
A great resource for background music tracks is iStockPhoto. For very reasonable rates you can get professionally rendered, licensed sound files. Those files can then be imported into Camtasia.
If you choose to import audio clips into Camtasia, it is very easy to integrate them with your production. Camtasia offers multiple audio tracks that you can work with, separate from other production tasks. I generally use one track for music and another for narration.
Title Slides and Other Static Images
In addition to motion video, you can import static images to enhance your production. This might be a photo, a flowchart, or illustration. After you drop an image into the timeline, it is assigned a default time duration of five seconds that you can adjust to any length.
You can create title slides with the Title Clips task tab. A text editor appears where you can enter the title text and format it. You can also add a background image. Personally, I find this feature pretty limiting. I prefer to use PowerPoint for building my slides. With PowerPoint, I can easily create one or more themes and make global changes to title typefaces, sizes, colors, etc. I use a screen capture utility to capture the slides and then import the images into Camtasia.
Zoom n Pan
Several special effect techniques have been integrated into Camtasia. One of the most useful is Zoom n Pan. You can identify areas of your screen capture video where you would like to zoom in. For example, when a certain selection box appears you can expand that area to fill the screen.
Camtasia provides a simple point and drag interface for you to identify the area of focus. The software automatically creates a smooth transition from full size to the magnified, focused view. It is easy to adjust the area of focus, the duration of the focus, and the speed of the zoom. The Zoom n Pan effect is represented in the timeline with a diamond symbol and inclines to denote the speed of the zoom.
Camtasia offers an automated version of Zoom n Pan called SmartFocus. When enabled, this feature searches your clips for pointer movements and adds the zoom effects to your timeline for you. The feature does a pretty good job of identifying appropriate places for zooming. However, I’ve found that I don’t agree with many of the automated decisions. I prefer to establish them manually.
Picture in Picture
Another useful special effect is Picture in Picture, or PIP. You can take any image and overlay it on any segment of your production. For example, you could show an expanded view of part of a software UI against the background video. Another example could include a photo that shows the real-world application of your software.
A PIP image has its own track in the Camtasia Timeline where you set its start and end points. You use the media player to adjust the size and position of the overlay.
An important feature for software-related videos is the use of callouts. Camtasia Callouts add labels and pointers to your production. First, you select the position in the timeline where you want to add a callout. Then you click the Callouts task tab where you can select a callout shape from a small library. Your selected shape appears in the media player overlayed on top of the current video frame. The shape can be positioned wherever you like. There are a number of effects you can add to the shape, including setting the level of transparency, the orientation of the shape, and the size and shape of any text you choose to include.
Callouts are represented in their own row of the timeline. Each callout you add has its own segment in the timeline. Inclines before and after the segment indicate the speed that a callout fades in and out of the video. You can control the durations – either through the task tab or the Timeline.
While the standard shapes support most scenarios, there are still many situations where you may have your own ideas about what a callout should look like. Fortunately, Camtasia supports custom callouts. You can make your own shapes in your favorite graphics application and import them into the callout library.
Moving from one master scene to another is often enhanced with the use of a transition. For example, if the storyline is switching from a demonstration of one software application to another application you would want to include a transition effect. The most common effects are fades and wipes. Camtasia offers a library of effects that you can choose from. In practice, there are only three or four that work well in most professional productions.
Transitions is another tab in the task bar. When you select it, the timeline is replaced by a storyboard. Each of the clips in your current production is represented by a single thumbnail image. Between the thumbnails are placeholders for your transitions. You drag and drop a transition effect into the placeholder. You can immediately see how the effect works in the media player. If you don’t like the effect, you just replace it with another one from the library. You can also set the speed of the transition.
Videos today can be viewed on an endless variety of devices and in a variety of environments. In order to support situational and physical challenges related to audio narration, it can be helpful to include text captions. Captions are basically text labels that you can apply to one or more scenes in your production.
Captions operate similar to Callouts. You identify the place in your video for a caption to appear and select the Captions task tab. Then you either type or import the caption text. The caption appears in a shaded area in the lower fifth of your video image. You can immediately see a preview in the media player. For each caption in your video, you set the frames where it should appear and disappear.
If you recorded audio narration with your video, you can use the Speech-to-text feature to automatically convert that audio to captioned text. This feature uses Microsoft’s Windows Speech-to-text software and you need to download it separately from Camtasia.
The Speech-to-text feature does a pretty good job of conversion. However, in many cases a word-for-word conversion to captioning can negatively impact the quality of your video. Some narration is more wordy than others and you’ll need to make your own decisions about this. For a very detailed narration, it can be better to make a complete, printable text transcript available to your customers.
I always base my narration on a pre-written script and then create a separate audio narration track. I’ve found it to be a toss-up on whether it is easier to use speech to text and then edit the individual captions, or just cut and paste from my script.
You can always hide your captions if you choose to not have them visible in a particular deliverable. Another benefit of captioning is that it makes it easier for search engines to find and identify your video if it is posted online.
Produce Your Final Video Output
One of the last steps in working with your project is rendering your collection of media elements into the final video deliverable. This is mostly an automated process. It is not necessary to do this step until you want to deliver the video for review to your colleagues.
The production step is where Camtasia actually builds the video. Up until now, all you have done is create a blueprint of how you want the pieces to go together. In rendering the production, Camtasia follows the timeline and encodes all of the media elements to your specifications. The end result is a new file which is the final video. None of the original media elements are changed.
Rendering can take several minutes depending on the length of the video, the size of the individual media elements, and the speed of your computer’s processor. This is typical in digital video production. Individual scenes for blockbuster movies can take days and even weeks to render.
I have had Windows system errors when rendering some videos. This usually has to do with memory constraints and is not directly related to Camtasia. I recommend not running any other processes on your computer during rendering to avoid errors.
The end result is a single file that you can distribute or post online. Your customer’s ability to play the video depends on the viewer they have installed on their own device. Camtasia uses the popular .mp4 standard for video output. That can always be converted to other file formats if needed.
In summary, Camtasia is a product well-suited for video production in support of software user assistance. It is available at a very acceptable price that is competitive with similar tools. The product has continued to evolve over the years and represents a commitment by TechSmith to support it.
The recording of video and audio is well-integrated with the editor. The click and drag support for features like callouts, zoom n pan, and PIP makes it exceptionally easy to fine-tune those effects. Importing and exporting your media from Camtasia is also easy to do.
You’ll find that the mechanics of working with Camtasia is relatively simple. Equally important to the Camtasia features is that the product fits into the workflow that is common to most video production. You can concentrate on your craft rather than the tools.
It was mentioned earlier that the Camtasia user assistance is generally excellent. The exception to this is the Help file. The HTML Help system looks dated and creaky compared to the rest of the UA and the release. Hopefully this will get a facelift in the next version.
Camtasia 2 for the Mac was released at the time this article was published. I’ll cover that version of the product in a future review.