About

This is the developer blog of Simon Wolf, Mac and iPhone developer, owner of Otter Software Ltd.

I am currently available for contract work so please get in touch to see if I can help you.

Twitter Accounts
« Lunchbox Becomes Lunches | Main | The ScreenCastsOnline DVD Downloader »
Tuesday
Mar162010

Designing and Polishing The SCO DVD Downloader

Introduction

A couple of days ago I posted an article about the overall development process that was involved in producing the SCO DVD Downloader application for Don McAllister of ScreenCastsOnline. This post focuses on the design of the application both in terms of the actual user interface and the user experience.

Pre-Development Ideas

Before I started writing any code for the SCO DVD Downloader I sat down with a pen and a pad of paper and sketched out some ideas. It was very obvious that the main window of the application should be filled with a table that showed the files being downloaded and the download progress for them.

In addition I decided to use sheets for the ancillary tasks such as choosing a file list document and setting the password for the UnRAR process. This would allow me to compartmentalise functionality whilst still maintaining the vestiges of a single-window application.

The Downloads Table

The original plan for the main table was that it would simply show a description of the file and a progress bar. Because there could potentially be a couple of DVDs-worth of files downloading I planned on using Matt Gemmell’s MGScopeBar to allow the user to filter and sort the table:

The main table with an MGScopeBarThe main table with an MGScopeBar

There were two problems with this original design. The first was that a progress bar that only updated for every 10% of the file downloaded really wasn’t great for reassuring the user that something was happening when you were downloading files around 100MB in size. The second was that the table filtering really wasn’t necessary. When it came down to it there wasn’t really enough data in the table to filter and this combined with the trade-off between writing the code to have the table and the MGScopeBar interact properly versus getting on with other things meant that the filtering capability was removed.

The main table without an MGScopeBarThe main table without an MGScopeBar

However there were still a couple of problems. The first was that when a row was highlighted there was irregular ‘bleed’ around the progress bar because the control didn’t centre vertically in the table row. The second was that the progress bar still wasn’t conveying download progress effectively enough. There was also the fact that it just looked ugly!

The solution was to switch from a standard table to something more familiar: something like the Downloads window in Safari.

A Safari-style downloads listA Safari-style downloads list

This was definitely heading in the right direction. The user could see a download percentage, the progress bar was much wider which would make it easier to see it moving and there were Pause and Show in Finder buttons for each item being downloaded. In addition table sorting options were re-introduced and the user could sort the list by the name of the file being downloaded or by the download activity so that files currently being downloaded would appear at the top of the list, pending files below them and completed downloads at the bottom of the list, out of the way.

However there were still problems. By this stage the files were no longer RAR files so the fact that OS X was recognising them as such and displaying an icon for the associated application was actually confusing. The percentage downloaded text was not detailed enough, for a 100MB file it would only increment each file a full MB had downloaded. Finally, the added development overhead of allowing individual files to be paused was outweighed by time restrictions and showing individual download files in the Finder was simply unnecessary.

Final tweaks were made and the following was the outcome:

The final main tableThe final main table

The percentage downloaded text now included an additional decimal place so that tenths of percent would be shown, custom icons were shown for the two file types to eliminate the reliance upon Finder providing icons and the Pause and Show in Finder buttons were removed. A very minor tweak was making the segmented control that defines the sort order slightly smaller which makes it less prominent and makes it fit in better with the bottom area of the window.

Two problems arose from allowing the list to be sorted by activity. The first was that the sort order was not refreshed after the button was initially clicked so as downloads progressed, files finished downloading and new ones began downloading the list would remain as it had when the button was clicked. This was resolved by refreshing the sort order as download status updates happened. However this introduced a new problem in that if file download percentages were very close then the file list would dance about as the list tried to re-order itself. This effect was reduced somewhat can still occur (and unfortunately does in the tutorial video that Don produced). A future version of the downloader will completely remove the sorting by percentage element and will simply sort the files by those that are downloading, those that are waiting to be downloaded and those that have been downloaded.

The Settings Sheet

The original version of the settings sheet looked like this:

Version 1 of the Settings sheetVersion 1 of the Settings sheet

I decided to use Safari-like NSPopupButtons for things like choosing files and folders because they are more elegant than a label and button and I also prefer them to the rather space-hungry NSPathControl. These worked well and for both the source file listing document and the download folder I copied Safari and showed the current item (although in the screenshot the file list document is simply shown as ‘Current file list’), a separator line and then an ‘Other…’ item which, when selected, brought up an NSOpenPanel.

A popup buttonA popup button

One feature I was very keen to include was the file and folder icon and not just any file or folder icon but the actual icon that Finder uses. In the screenshot below you can see that the downloads folder is set to Applications and that the Applications folder icon is displayed. To me this was a little bit of polish that would probably go unnoticed by many but would make the NSPopupButton implementation feel more familiar.

Folder iconsFolder icons

It is also worth noting that the free space indicator would react to whether you were running the application on 10.5 or 10.6. On 10.5 it would list the size as being in GiB, gibibytes, whilst on 10.6 it is shown in GB, gigabytes (also note that the released version dropped the second part of information, the dummy ‘4.4GiB needed’ text).

In early versions of the application the settings sheet could only be closed if the user had selected a file list document. The only other alternative option was to quit the entire application. I eventually moved away from this because it was too restrictive. I did not want the users to feel trapped and force them to jump through hoops.

The settings sheet had to be re-designed once we decided to move away from having a physical file that listed the available downloads and rather got the information from a file in the members’ area of the ScreenCastsOnline web site.

Version 2 of the Settings sheetVersion 2 of the Settings sheet

A credentials section was created where the user could enter their ScreenCastsOnline username and password and then verify the login details. If either are incorrect the orbs turn red to indicate a problem, if the details are valid they are green to indicate that all is okay. This simple visual cue eliminates the need to display error or warning messages.

Additionally a progress bar would be displayed whilst the application was performing tasks such as verifying the login details and retrieving the list of available downloads. Although both of these should only take a second or two it is important to show the user that something is happening.

The Settings sheet showing the progress barThe Settings sheet showing the progress bar

Adding the credentials section created a new problem. Originally the Done button was the default button, triggered by the user pressing the return or enter key. Once the user could enter their username and password as text there was the possibility that they would press return or enter once they had finished and this would trigger the Done button which would lead to confusion and potentially them downloading the wrong set of files. To get around this the sheet doesn’t have a default button so that the user has to click either the Verify Credentials or Done button deliberately.

The Create Zip Archive Sheet

Originally the application was going to rebuild a disk image file from downloaded, password-protected RAR files and because originally the user could also download multiple DVDs at once the original version of what became the Create Zip Archive sheet features two controls that were later dropped:

Version 1 of the Rebuild sheetVersion 1 of the Rebuild sheet

The version that was shipped simply allows the user to select the folder where the zip file will be rebuilt and displays the available disk space:

Version 2 of the Rebuild sheetVersion 2 of the Rebuild sheet

Similarly to the Settings sheet there is a progress bar that is displayed whilst the zip file is being rebuilt. For the initial stage of the process where the downloaded files are being validated the application shows an indeterminate progress bar but when the component files are being put back together into one large file the user is shown the actual rebuild process:

Merging the file partsMerging the file parts

This was achieved by calculating the file size that the zip file will be from the sum of the file sizes of the segment files and then monitoring and reporting the zip file’s size as it is being reconstructed. Although this was additional work that could have been eliminated by simply showing an indeterminate progress indicator it is always better to give users a realistic indication of how things are progressing so the extra work was definitely worth it.

File management was a key part of the zip file creation process because after downloading the various component files and building the zip file the component files were no longer needed. In addition, when the contents of the actual zip file were extracted the zip file itself became redundant. However, rather than simply deleting the files it was a much safer option to move them to the trash so that they could be kept if the user chose to do so.

Alerts

The SCO DVD Downloader includes several alerts that are displayed when tasks can be performed or are completed. Although these are usually helpful the first couple of times someone uses an application they can quickly become annoying so each of the informative ones in the application include a ‘Do not show this message again’ option.

Allow users to turn of information alertsAllow users to turn of information alerts

Attention was also paid to making sure that all of the helpful alerts were displayed in the same manner, as sheets attached to the main window. This is a small consistency detail but people notice when things work differently and it can be jarring.

Two similar messages existed regarding the downloads. One would prompt the user to begin downloading the files, the other would prompt them to resume them. Although it would have been possible to simply tell the user that download were pending it adds a bit more polish is messages are more targeted and relevant to the individual situations.

The Help Window

Don, for obvious reasons, proposed using a screencast rather than a traditional help file in the application. There were two alternatives for handling this: the application could simply open a URL in the user’s default web browser and have the video load in it; the application could display the video in a window.

In addition to preferring to show the video in the application so that all of the functionality is kept in-house, the big advantages are that the video could be cached so that if the user wants to re-watch it they don’t have to wait whilst it is downloaded again and the user can resize the window to make the video bigger or smaller and easily position it beside the application so they can follow along with it.

The Help windowThe Help window

The theory behind caching the video is simply that the application would save it to its Application Support folder once it had finished downloading it the first time. The application would check to see if the file exists when it opens the help window and it if does it shows the local version. The problem was that the user would still see the cached version if Don updated the video. To get around this I check the on-line version’s details before doing anything else. If the file modification date is different to the one stored for the local copy then the on-line version is used rather than the local one. Problem solved.

Resizing the help window also presented a slight problem. When the video is displayed the player is resized to adjust it to the aspect ratio of the video. Normally this would leave black bands above and below or on either side of the video, something I really wanted to avoid. Therefore the window resizes to match the aspect ratio too and this is retained when the user manually resizes the window.

Other Details

To minimise bandwidth usage and avoid repeat downloads the application will look for partial or complete already downloaded files. For example, image that a user is downloading the files for DVD 1 of 2009 but part way through realises that they need a file from the DVD 2 set urgently. They would stop downloading the DVD 1 files and download the DVD 2 files instead. Once that is done they would probably want to continue downloading the DVD 1 files so the application checks to see if any of the files are available and essentially carries on from where it left off.

When the RAR file format was abandoned (see the previous article for details about this) and PAR files were chosen as an alternative, Don wanted the subscribers to use the downloader to download the files and then two other applications: one to verify the PAR files and one to merge the files back together. Although it added some extra work to the exercise I resisted this because it would strip away the simplicity and convenience of having a single application and added the relevant bits of functionality offered by the other applications into the downloader. Fortunately none of it was terribly complex or it may well have been that the subscribers would have been faced with multiple applications.

The Missing Bits

Had time not been pressing I would have liked to have made the free space indicators more intelligent. At the moment they simply show the amount of free space. I would have like them to also display the space required for downloading all of the files and for creating the zip file and extracting the contents.

Also missing from the application is Sparkle. Sparkle is an automatic updater that will look for newer versions of your application and offer to download and update the an older version that someone is using. On the bright-side, Don can email the relevant subscribers and tell them if a new version is released but in standard situations this is something I would try to implement.

Finally, as mentioned above, the main table, if sorted by activity, needs a tiny bit more attention to stop items from ‘dancing’ around so much.

Conclusion

The SCO DVD Downloader is a small application. It has one main window, a few sheets and a fairly tight set of features. However, as this article hopefully demonstrates, an awful lot of thought and planning goes into even the smallest application. Polish is important because it can turn struggling with an application into making it, if not pleasurable, then at least something that does not cause inconvenience, stress and frustration although developers must be aware of turning polishing into over-engineering.

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>