Intuitive User Interfaces

Jeffrey Larson

I’m struggling, at the moment, to create a really simple user interface for a CMS I’ve developed for a missionary website.

Take a look at HillsofJapan.com – Praising and Praying. I’m attempting to create an administration page that allows my client to edit the contents of these postings. The admin page needs to be simply layed out and preferably look very similar to the public page.

I’ve played around with the idea of WYSIWYG Editors. The problem with this is that I can’t find an editor which is light-weight enough… most of the ones I’ve tried are slow-loading Javascript apps. I did see one editor (XStandard) that was quicker and lighter (because it was a browser plug-in and not Javascript) but the full version which includes support for image insertion is way too expensive! Another problem is that each posting would be split into sections, and each section would require its own editor… multiple instances of an already too heavy/sluggish javascript isn’t going to work.

At first I started building my own user interface. It had its own tree menu system by which you could select the section you wanted to edit, and then select the subsection to edit; the chosen subsection would then be editable in the WYSIWYG editor. This is an OK solution for an interface *I* could use quite easily, but leaves a bunch of training to be done for less technical users. Audience is key in UI design!

Ideally I’d like to give my users the ability to choose text style (bold, italic, underline, size) as well as allowing them to insert images from their photo albums into the postings.

Most recently I had the idea of just using simple textareas to allow the user to edit the text portion of the posting. Then the question becomes, how to allow for inserting images. (Note that with this approach I’ve given up bold, italics, etc.) I’ve played around with Drag and Drop DHTML/Javascript, that would allow a user to place an image into the paragraph of their choice. This approach does present some challenges and I’m not sure I like what I have come up with so far.

You HAVE to look at PanicGoods for a FREAKING SWEET example of the possibilities using drag and drop in the web browser. Try dragging some shirts into your shopping card. They make the shopping cart UI very easy to use! I’m looking to do the same for web editing.

I’d really appreciate an ideas, examples, samples and insults on this. I’m sure there are countless other methods of accomplishing my goal, but I’m not quite there yet… help me out? I’ve got the UI design done for the “On-going Needs” and “Pray Us Through The Week” parts of the HillsofJapan.com website. So close!


One Response to “Intuitive User Interfaces”

  • Jeffrey Larson Says:

    Popups! Ahhhh!

    So I’ve decided for now to use popup windows for editing purposes. Each section of the praising and praying part of the website will have “Edit this Section” buttons. Clicking on said buttons will popup an editor window (WYSIWYG) with the contents of that section ready for editing. Saving from that popup window will close it, update the section’s contents in the database (using AJAX) and update the mainpage with the new content, realtime.

    What do you think of this solution?

Leave a Reply