User Interface Issues

I just recently finished up some pretty cool feature adds to a lightweight CMS that I have built for a client. (they are happy and impressed with it, and It looks like I’m going to pick up another two jobs, where all I need to do is install the code I have written. Yey! I have been trying to get to that point for quite some time now)

One of the major reasons behind the feature upgrade was to fix some huge User Interface problems with “list management”, and they are fixed, but of course now that I’m playing with it, I have discovered that the new UI has some big issues as well. In particular, administrators now see the list exactly as it normally would be, but there are a few links next to each item that allow you to edit it, delete it, or move it up or down. It’s neat but the extra text very much breaks up the visual flow of the list in a lot of cases, and in one case is actually pretty darned hard to access.

One of the core concepts behind the CMS is that when you are logged in as an admin, you can always navigate the site as normal, and edit things from the place where you see them, so getting this right is actually something that I think of as core functionality. It’s also worth mentioning that a good UI is generally much more valuable than good code. (though you get a good UI through testing, and iterative changes, and if you have bad code that becomes much harder)

At the moment, I’m thinking that I will try putting a tiny [chng] div where I have the options listed, and then have that create a pop-up box with the actual link options in it. I’m sure that will have its own drawbacks though.

2 thoughts on “User Interface Issues”

  1. Making the admin interface mirror the user interface sounds a lot like what I tried to do for the Help Center application (as you may recall), and I think the Help Center suffers from the same problem: too many admin options cluttering up the page.

    At the opposite end, we’ve been working more with Sharepoint lately, and I find the admin functions too obscured and too clunky. (Maybe that’s just Sharepoint 2003–we’re upgrading soon.)

    I think that http://my.yahoo.com/ and http://www.igoogle.com/ get it right. Although they verge on obscure, at this point it is a pretty common and well-understood interface.

  2. Actually your help center app was where I took the inspiration for this, though mine is much less structured and less application specific. (which I’m discovering is a big weakness as well as a asset.

    I have found a partial solution to this problem with some cool CSS I cooked up
    Something like:

    span.options {background-color:#fff; border: solid 1px #000}
    span.options div.links {display:none;}
    span.options:hover div.links {display:block; z-index:200; margin:-5px; background-color:#66f; border: solid 1px #000; color:#33F;}

    and then all the control links are added as follows:
    This is the actual stuff <span class=”options”> Change me <div class=”links”> your various controls </div> </span>

    the one downside is it does seem to get into fights with existing CSS sometimes, but I’m working on solutions to that.

Leave a Reply

Your email address will not be published. Required fields are marked *