An Explorer Interface Convention
After reading through User Interface Design for Programmers by Joel Spolsky, I decided that I would give his CityDesk web creation program a whirl. While it has a few weak points, the program is delightfully easy to use.
The concept is simple. You have a treeview window that shows you files and folders, just like Windows Explorer. If you double-click on one of the documents an editor or viewer opens up, just like Windows Explorer. CityDesk is a desktop application for Windows; it is not a web-based application. Still, the simplicity, familiarity, and effectiveness of this approach got me to thinking about how it would work in a web-based application.
After scribbling a few ideas on paper, I fired up Photoshop. Here is the first screen I created. (All of these screens are dirt-simple, as I was just recording some ideas.)
Because this is such a familiar interface I am sure I don’t have to explain it. (I wouldn’t need to explain it to users, either.) But what will be transparent to users but of interest to us is that the folders with icons are not mere folders. Rather, they represent plugins. The Photos folder, when opened, will be handled by the Photos plugin. The Weblog folder, when opened, will be handled by the Weblog plugin. To test this idea, I next created the screen that the user would see if he or she opens the Photos folder.
The tasks area means that every plugin can provide different functionality, yet in a consistent way. Here is a further example of another plugin looking the same, but working differently. This example also shows the simple way in which draft documents can be handled.
If the user double-clicks on an Article document, the Article Editor opens and displays the document for editing, just as it would from Windows Explorer or the Mac Finder. What the following screen adds is the simple, text-only command bar. This would be added to the folder windows above, but I didn’t want to waste time reworking the above images.
There is a very important commercial benefit to using icons to represent functionality. Namely, the icons can be dimmed to show that the functionality is available but disabled, and the user must upgrade in order to enable that functionality. Alternatively, the dimmed icons can represent “demos”. A user with a basic-level membership can see the dimmed Blog icon, and can double-click it in order to create draft blog documents (remember, draft documents are dimmed too, so the consistency carries through). Creating draft documents allows the user to trial the additional functionality. Then, if he or she upgrades to a better membership level, the draft documents can be published.
Because I was getting a bit bored of Photoshop at this time, I threw together a quickie Control Panel in order to document the idea.
An explorer interface convention like this provides at least three main benefits. First, the convention is familiar to all computer users, so a user should be able to get going as quickly as possible. Second, the convention benefits from more than twenty years of user interface research performed by Apple and Microsoft. The third benefit is more involved, and I’ll chat about it in my next weblog entry.
by Alister Jones | Next up: Taking Scissors to a Web Page →
----
Post a Comment