Summary
All UI bugs cannot be captured through images. Some UI issues are not only state based, but time based as well- where the bug might occur in transition of states or the time taken to change states (transitions and states are explained at the end for the unaware).
For example, you might want to illustrate the usability problem of a pull-down menu which has a zero time delay, thus making the selection of items down and up the hierarchy difficult for the user as the slightest overshooting of the target results in disappearance of the desired item.
In this case, it is not possible for an image to describe the issue. For such scenarios, video is effective method of capturing the issue, and there is a tool that makes it as easy and fast to execute as is capturing a screenshot.
Capturing UI bugs through images
When filing UI bugs through a bug tracker or even reporting them informally through email, along with the description of the bug, one usually provides a cropped screenshot or screenshots of the UI in different states to illustrate the bug better. In most cases, an image (or images) of the user interface state is all that is required.
Capturing UI bugs that are time-based
Images can be used to capture UI issues that can be explained by capturing a single or multiple UI states. But when the UI issue occurs in time- either in transition or the time it takes to change states, then a video should be the obvious choice to capture a descriptive visual.
The only issue is that you have to create a video- and creating a video sounds like too much work to do in comparison to taking a screenshot. It just doesn’t seem as fast and instant as taking a screenshot, cropping and saving it. So while it might be a good idea capture and attach a video to to explain a UI issue better, its usually not done due to the perceived effort it takes to do the task.
Jing- a tool to capture time-based UI bugs
A good video capture tool for capturing UI bugs would be one that is as fast and simple to execute as capturing a screenshot, cropping and saving it is.
Enter Jing– a screenshot and video capture tool that is just right for the job.
What makes Jing a great tool to capture video for time based UI bugs that can’t be captured in an image is that fact that it is as easy and fast a job to execute as is capturing a screenshot:
- Easy to capture: Use an easy interface to effortlessly lock on to the area you want to crop and record
- Inbuilt video player controls and a popular viewing format: Saves as an swf file that everybody can view (side note: did you know swf stands for ‘small web format’ and not ‘shockwave format/ file’?)
- Small file size– Small enough to be go through as an attachement in your bug entry or email
- Free– There is a pro version though, but for capturing videos for UI issues, you don’t need to look beyond the free version
Example- Using Jing to explain a usability issue with a pull-down menu
Lets take an example where you want to illustrate the usability problem of a pull-down menu which has a near zero time delay, thus making the selection of menu items difficult for the user where the slightest overshooting of the target results in disappearance of the desired menu item. You can report the bug over email or through a bug tracker and in this case, attaching a video will help describe the issue successfully by acting as an effective visual that shows what exactly is wrong with the menu and how bad is the issue.
Below is an example of the video for the above example made with Jing. Making this video in Jing took no more time than capturing a screenshot would (add in the 17 seconds for interacting with the menu to illustrate the issue).
(file size: 470 kb)
How could Jing be made a better tool for capturing time based UI issues/ bugs?
- Add an annotation feature- an annotation feature would make Jing an all round tool to capture UI issues where video is required.
- An option for capturing videos at higher frame rates- Jing captures video at 10 fps. If the issue is in the transition, capturing the video in Jing may not be very effective
Ending note- states and transitions in user interface design
As mentioned in the summary, find below an explanation on UI states and transitions if you are unaware or confued about it.
States
Think of state as a unique configuration of the UI element. Every UI control has at least one state.
For example, take the radio button control. It has four states- deselected and enabled, selected and enabled, deselected and disabled and deselected and disabled.
Transitions
Transitions in UI visually depict the changing of UI from one state to another or the relationship between user interface elements.
All UI elements have at least one state but not all UI elements have transitions. As mentioned above, the radio button has different states, but there is no transition in this case (try it in the radio button example above).
In the example below, the container UI has two states- expanded and collapsed. It also has a transition that visually shows a slide transition to depict the changing of state of the container.
(file size: 290 kb)
Leave a Reply