Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

User Interface Design for CityDesk

My fascination with CityDesk is born of my admiration for Joel Spolsky's "User Interface Design for Programmers."  After loving his book, which is as refreshingly common-sense rooted as "Don't Make Me Think", I wanted to see what a program by Joel would look like.

I figured it'd be super simple and avoid all of the gotchas in his book.

I think, by and large, CityDesk succeeds in this regard.  It is very intuitive and straightforward once its setup.  But here is some feedback, which I give in the most constructive tone, as it applies to what I learned from Joel's book:


We’ll start with “Chapter 10: People Can't Control The Mouse.” Okay, now I don't consider myself one of those people.  I can hit a pixel on my 1920x1200 resolution desktop.  However, even with such amazing dexterity I still managed to have some things happen I didn't expect due to the UI design.  Go edit any template and notice how top-left toolbar item is “Save and Close”.  Now use the “Edit” menu but slightly miss-click on say to the left off “Undo”.

If you miss the menu, the window vanishes.  The first time this happened I thought, in my mind, that I had hit the Undo button and the program had crashed! 

This also harkens to “Chapter 13: Those Pesky Usability Tests” page 97 where the Juno app has an “Exit” button on the menu bar.  I don’t expect any toolbar to “close” the window so this might be a violation of rules expressed in “Chapter 6: Consistency and Other Hobgoblins.”


When CityDesk first starts, Designer Mode is turned off.  My “user model” is that I should be able to do certain things, but they are hidden in Designer Mode.  I had to hunt for this.  It’s under the “View” menu.  Is Designer Mode really a “view”?  Perhaps it should be a button?  My inability to notice Designer Mode in key places in the help files led me to frustration at first.

I’m sure you thought carefully about if the program should default to Designer Mode or not.  But, I’m not sure why it doesn’t.  The first thing a user is likely to do, that is setup a site, is all Designer Mode stuff.  Right?

Editing a template brings up the simplistic HTML editor.  The built-in component of Windows/IE I take it.  Obviously not up to speed for anything serious.  But the funny thing is that the sample index.html page that comes with CityDesk has tables.  And the HTML editor seems poorly suited to working with tables.  There are no tools to adjust the table, and you can’t even seem them (no outline table mode).  My thought is that perhaps the default index.html should be even more simplified to not use them.

When I drag-n-drop an image to the CityDesk window it accepts the file, but it drops it in the root directory.  My “user model” expects it to drop in an images subfolder (and to create such a subfolder if it does not exist).  This model is reinforced by documentation in on the Import Web Page feature which suggests it will do this when importing a web page (although when I tried, it failed to grab the image on the page at all).


One of the best usability enhancements I’ve ever seen is the red squiggle underline for misspelled words in Word (and other MS apps).  Spell checking isn’t a separate, often forgotten, step.  You see there is a problem just by looking.  This may be a useful enhancement in a future version?

Since CityDesk stores its content in Jet Database, it breaks the user model of anyone who works with web pages in more traditional systems.  One thing that might be useful is a button to backup your CityDesk database.  Most people can figure out that they can copy the .cty file but some people are not sure that a single file has “everything” needed.

Probably the thing that I found the most surprising about CityDesk was the usage of the simple script language.  Oh it works, but lets face it the whole {$.stuff$} syntax is awfully frightening looking to a novice.  Much less the concept of a loop!  In fact, when you start trying to do loops with table rows involved, you gotta know your HTML to not mess things up.

I would have expect something more like a template editor that has little icons for the various “insert stuff here” bits.  Even if that resulted in {$.stuff$} in the HTML. Obviously Microsoft’s HTML edit component would no longer do, but it would make it more accessible to the novice?

Script languages are dangerous in one other respect: feature creep!  I’m sure there are plenty of people clamoring for more script commands to do this or that.  I know that I’ve already come up with some I’d like to see.  But by version 3 or 4 of CityDesk, the scripting bit could get out of hand! :)

One of the best usability things I noticed is the “learn more” hyperlink on dialog boxes.  Well done!  Overall, an impressive product.  I only have the free download, but count on a sale.  Even if I don’t use it for anything real, I just want to support the efforts of a crew dedicated to making things EASY for gosh sake.

David Whatley
Sunday, February 10, 2002

I'd like to defend the CityDesk UI.

Undo is a nice large button and "unhighlights" when you move off it.

The program defaults to non-designer mode because the designers should be technical enough to find it (and should read the documentation, at least a bit). Non designers shouldn't find these things because they can do serious damage to the site.

The first thing a designer is going to want to do is design a site. Once you flip it into designer mode it stays that way anyway.

The first thing a user is going to want to do is add articles. In fact, one of the only things the user is going to want to do is add articles. Even adding a folder can be dangerous if a script depends on the folder structure.

When I drag and drop any file into CityDesk it lands in the folder I was hovering over when I released my left mouse button, just line Windows Explorer. In any case, CD is very forgiving with file locations, so it doesn't matter where a file lands. *PLENTY* of users I've seen have increadibly messy file structures. I won't expect them to be any neater in CityDesk, and thankfully, if the designer drops by one day and decides to plunk all of the images into an images folder, he won't break CityDesk.

I agree, red squiggles for mis-spelled words with an auto-spell-check would be useful. How about an Outlook style "Spell Check on Save" option? This could also work, though I often find myself accepting things I shouldn't in Outlook, or just not bothering with the spell check.

I had no problem with CityDesk storing everything in one file, and I've been designing web sites for half a decade. I would be annoyed if it created files all over the place, actually. Why should moving a site around be more difficult than moving a file around?

I agree about the poor table support, especially with imported code. It's hard to line things up in tables if the borders are turned off, and it's just plain impossible to add tables via the GUI.

A GUI script creator... hmmm. Could work. Though, I often find myself putting loops in between code that wouldn't show up in the GUI.

<table>
{$foreach x in (blah)$}
<TR><TD><a href={$x.link$}">{$x.headline$}</a></td></tr>
{$next$}
</table>

Even for a simple <UL> you have to get into the code to make it work.

I think the scripting concepts will remain the same by version 4, and certainly they will maintain backwards compatibility so a tutorial might only cover the syntax that was available in 1.x (with a few updates). It's by version 7 or 8 that I expect it to get so complex a software company will decide that there might be a niche for a simple content management system.

I'd like to see (defineable) hotkeys. My Dreamweaver training has me hitting [F10] to view the code. I'd also like a dreamweaver-esque "what's higlighted in the WYSIWYG view remains highlighted in the code view." This one feature will probably save me hours of hunting over the course of a few months. Even better, a Dreamweaver 4-esque "view split window code/gui" that will allow me to work on a script while viewing the impact immediately in the WYSIWYG window.

Over all, I'm *extremely* impressed with the simplicity and usability of CityDesk. It retains it's concepts from view to view well, doesn't break too many of my expectations, and even where it behaves differently from other programs (save & close, no explicit "save site" button) I don't realize it's doing it. I was really blown away by it when I started using it, and immediately bought some licenses for my office. Now word-processors can add content w/o knowing HTML at all.

Mark W
Sunday, February 10, 2002

Mark,

I don't think you should feel the need to defend CityDesk from me.  After all, I love it!  What I was doing was applying the critical analysis skills espoused in Joel's book (User INterface Designf or Programmers) to his own product.  That seems fair, no?  I spend all day applying them to mine!

Don't critique my critique until you have read the book at least. <smile>

My major interest isn't in how good CityDesk is, but how good it could be by the standards he has outlined.  I thought it might be useful to pick out some tuffles that I came across just as food for thought.

Consider it the hallway usability test. :)

Overall, top marks all around.

David Whatley
Sunday, February 10, 2002

I've read the online-version, or most of it, does that count? :) I print and hand out articles from Joel On Software on a fairly regular basis.

I've also read, reccomended, loaned out, and quoted "Don't Make Me Think." The same for "The Design of Everyday Things" and "Designing Web Usability" - see my review of Don't Make Me Think on Amazon titled "Steve Krug v. Jakon Neilsen" for some of my thoughts on the subject.

One of the great things about Fog Creek is that they're so open to their users that they've even created a forum for their products AND they take active participation in it. BRAVO Fog Creek for taking user feedback seriously enough to provide a forum for it.

As far as your critique, I was simply playing devil's advocate. Hope you don't mind.

Mark W
Sunday, February 10, 2002

Oh no, not at all Mark.  I just wanted to clarify that I wasn't bashing here.  I was just taking advantage of the unique opportunity afforded by a UI guru who also actually makes something.  A wonderful thing!


"Don't Make Me Think" is a great book too.  Essentially the same thought process as Joel's book, but focusing exclusively on web pages.  It helped me rework our web site from a tremendous mess into something that is usable.  As he points out in that book, there is a lot of stuff that the rules just don't cover... and we ended up in that category a lot.  Still more work to do.

CityDesk is a wonderful product.  UserLand tried to tackle this same territory, but ultimately they ended up with their own brand of usability mess. I think CityDesk succeeds in not making you wonder what the heck is really going on all the time.  Which, of course, is the highest praise for a usability guru. :)

David Whatley
Sunday, February 10, 2002

I agree. I've tried to figure out Frontier/Manila for hours and I *still* can't figure it out, and the idea of paying for the Radio service, not just the software seems just rediculous, so I never evaluated it.

CityDesk, on the other hand, I figured out in less than an hour, and having a free version let me really put it through it's paces without worrying about it expiring or anything like that.

Mark W
Sunday, February 10, 2002

My understanding of the Radio service is that it continues whether you renew your license or not; the renewal merely gets you software updates. Also, looking at the price, I really don't think it would be any lower without the 20 MB of networked disk space.

As a CMS, Frontier is really a whole other beast, with slightly higher (for workgroups) up-front cost, customizability, emphasis on Web editing, and ability to drive other apps. I spent a lot of time working with/programming the paid iterations of 5.X in a Mac-centric publishing environment, mostly for internal tasks, and it was invaluable (e.g. cartoonist uploads archive of drawings via Web form, Frontier decompresses files with StuffIt, copies into appropriate networked Mac folder, sends e-mail to editor and cartoonist; Frontier regularly scours file creation and mod times and tells us who (across editorial and production and even the printer via FTP) missed (or beat) their deadline and by how much and sends out an e-mail report daily)

On the Web publishing side, I could have accomplished more with some simple Perl scripts or something like CityDesk, but it sounds like Frontier/Manilla do much more out of the box in current versions, like Web-based admin and esp support for a split dynamic/static setup, i.e. managing and editing content over the Web but rendering that content to a static server, which was very much a custom kludge when I was working with Frontier.
I think Frontier, Radio and CityDesk at this point are three very different products, although obviously CityDesk has a competing philosophy w/r/t browser-based editing and admin, and with the right templates is competitive with the blog-publishing side of Radio (but certainly doesn't seem interested in the whole XML-news-reader side of that product).

Ryan Tate
Monday, February 11, 2002

Actually, I just saw a UserLand page which said the hosting only lasted a year, which contradicted another page. Hmm. Oh well.

Ryan Tate
Monday, February 11, 2002

Great points Dave, I think you nailed most of them. I have a few more (of course).

The toolbars. I never use them, never will (I use menus, always have, always will). Yet the toolbars take up something on the order of 10% of the vertical space of the windows. I would really like to turn them off completely, but there is no option for this.

The icons in the app are (forgive the strong word, but it is accurate) amaturish. Even common and easily "stealable" icons like the folders in the site view are downright ugly. The icons use bright colours on large areas (consider Locations) and non-contrasting ones on small areas (consider Publish), and blend into the background (consider Preview). Worse, they don't even really look like each other.

They basically violate most GA rules on icon design. It's somewhat mystifying.

The Toolbar icons are no exception, and get worse at smaller sizes. Exactly why is that yellow-to-orange-blended-arrow pointing at the 2001 monolith, and how is that supposed to mean "publish"? Brown-blob-on-blue-plate is insert picture? Variables are things inside a box?

These might sound like piquane points, but it does make the product look unprofessional.

Of course this would be a perfect oppotunity for the community to provide better ones. Maybe a free-copy of CD to the person that comes up with the best looking set?

But you definitely hit on the one issue that I think makes the CD GUI actually hostile in my usage, and that's the spell checker. Certainly the red-underline would be a wonderful addition, but there are other issues too.

One is the butt-ugly spelling dialog. It's unlikely that there are any 60 character long words to be checked so the wide fields are a waste, yet the list of replacements is too small vertically for some reason. The wide-n-skinny aspect ratio is unneeded, annoying and glaring. And the clustering of the buttons is rather tight and seemingly random as well. This dialog could be greatly improved by making it a little taller and moving the buttons around to give them some breathing room.

But that's just looks, what makes it "not work" is that it won't check selections. It starts at the top every time, and doesn't remember the words you told it to ignore. So if you're typing at the bottom of the article - which is of course the common case - you have to re-check the entire article and click Ignore over and over again just to check the last paragraph you added.

Grrrrr.

The only other thing I'm concerned about is the way the styles "hide" details. For instance, the I button "lights up" when you have I, EM or CITE style applied. This is very bad all on it's own. But if you press it to turn it off, then press it again to turn it on, it turns your CITE into EM.

Evil!

And then there's the utterly minor things:

The Normal View vs HTML view at the bottom, where it wastes 20 pixels or so. These buttons could easily be moved to the top of the screen somewhere, saving that room and making the window look "more normal".

The article editor doesn't follow the toolbar rules from the site window in terms of labels. The icons do not have text, except for Save and close. Weird.

Folder dragging feedback could be improved, when dragging into a folder by dropping in it's content area (ie, the list of articles inside the folder) the folder icon should highlight to show it's the target. Currently the _article_ highlights, which is certainly wrong.

Selection/insert positions should be saved when moving from Normal to HTML views (and back).

Why doesn't the Preview/Publish panel go away when it's done? It's not like it's useful sitting open in the background.

If I hit preview and I have only one viewer, you may as well go ahead and open it!


Generally the UI seems pretty usable once you get used to the whole site-is-db idea. In fact, I think it's one of the best apps out there in terms of the general way it works, and the usability of the WYSIWYG editor (which is superb).

However it looks and feels rather unpolished. And first impressions are too important to let looks remain a non-priority - if it's so minor, just fix it.

Maury Markowitz
Wednesday, February 13, 2002

I agree about the Normal/HTML buttons, they're never where I expect them to be, and it's quite a bit of mouse travel to get from those to the other buttons.

Mark W
Thursday, February 14, 2002

For what it's worth, the Normal/HTML view tabs are in the same place that FrontPage uses. So there's a familiarity factor to those coming from FP.

Mike Gunderloy
Friday, February 15, 2002

Here are my icon ideas:

<> = view source (icon in toolbar - on/off)
(picture frame) = insert image
(chain links) = insert link
e = preview (i.e. launch internet explorer)

Part of the reason the image icon doesn't work is that it doesn't have a border. That is, the button isn't "raised" to begin with, so all it is is a blob in a white box - if it were raised it would be a button of a white box. Looking at IE now, they treat an image as a document - it looks like a page with an image inside of it. That makes sense to me.

I also think the link interface needs to be integrated into the toolbar somehow, it's a pain in the arse having to cause a popup just to link to something. Dreamweaver's interface is nice - text box that get's filled automatically when you click on the file icon to browse to your document. Also, somehow IE changes it's icon inside the toolbar for various states (images, web pages, etc.), I guess CityDesk could do the same, to remain consistent with it's current interface.

I do find that I need "Large Icons and Text" to find my way around in design mode, and the article view suffers from not having large icons & text, but only the four icons after "Save and Close." Everything else is pretty self explanatory.

I actually kinda like the publish Icon. I'm not sure a gray server is a strong image to non techinical people, but I can't imagine a better publish button. I've seen arrow globe icons (I.e. Pegausus Mail's send to web/retrieve from web):

-> ( )

but they don't seem to work much better. In any case, I like the arrow because it implies motion. You're moving the files into production, or some such thing.

I think the Templates button suffers from being too subtle. A page with holes in it doesn't work on a small scale or at a glance. I don't think this is a good idea, but how about a document with a question mark inside?

I'm not sure why a box means variables, but it kinda works for me... I'm sure it could be improved ont hough.

Overall, I think the icons need more consistency.  The orange of the folder is different from the orange of the box is different from the orange of the palette, etc.

My 2 cents.

Mark W
Friday, February 15, 2002

*  Recent Topics

*  Fog Creek Home