|
Blog -
Program
|
|
Written by Dennis Reinhardt
|
|
Friday, 30 January 2009 17:39 |
The first screen I wanted to implement was a "project" file open. A project could span multiple directories and involve several types of files. For example, a web site might be a project and it could consist of a main directory for the html, another subdirectory for the css, and a third for the JavaScript. Maybe the html is scattered through more than one directory as well.
Original Design
---------------
I mocked up a screen of what I had in mind, at right. There are  two directories shown and because it is a mockup, the data in each is identical. There is a dark blue bar at the top, the directory bar, another dark bar immediately below it, the extension bar, and finally a file bar listing the directory contents.
It took about a day's worth of tweaking to do the design but something bothered me about it. I thought it looked different and complicated enough that many users would simply give up before they would try to use it. It simply looked different.
From my perspective of several days later, I see other complications. The same symbols are re-used with different meanings. The "del" on the directory bar is different than the "del" on the extension bar. The downward pointing triangle is used for collapsing or expanding material below but is used in 3 different contexts.
I also envisioned that each directory could be recursive and the "dots" in the very left of the directory bar selected recursive (include all directories below one specified) or non-recursive (do not include subdirectories).
The extension bar shows each file extension. For example, the second extension select is "*.jpg". The red barred circle indicates that no jpg files are selected and the down arrow indicates that such files appear in the listing.
This mockup is not wholly consistent because I am only trying to do a placement and function design here before coding.
Coded Design
------------
Early on, I realized that to reduce confusion, the initial default appearance of the file open screen must look like every other file dialog. So, even though multiple directories could be specified, only one would  come up initially.
One of the major breakthroughs was I realized that I could get rid of the extension bar. The major function of the extension bar was to allow selecting or de-selecting all of the files having the same extension with a single click.
In the coded design, each file extension is clickable. If the file is de-selected, clicking its extension selects all files in that directory. If the file is selected, clicking its extension de-selects all files.
The "Sel" column shows what files are selected. In this screen shot, none of the boxes are checked an nothing is selected.
Eliminating the extension bar also eliminated the re-used symbols and the confusion they contribute.
I eliminated the recursive/non-recursive distinction in the interests of simplicity.
The design mockup concentrated primarily on the directory and extension bar, not paying much attention to the file bar. The file bar here is a conventional design and so filling in the details during implementation makes sense. Each column can be sorted and in the example the File Name column is sorted in ascending order (marked by the arrow in column).
New layer...
Trackback(0)
|
|
Last Updated on Friday, 30 January 2009 18:28 |
Section Blog 
TrackBack URI for this entry
Subscribe to this comment's feed
