Wordpress, HTMLArea, and ‘Normal’ users

I’ve spent the past couple of days installing and tinkering with WordPress on
Mark’s site.
WordPress is a funny beast - its extremely popular, it does a good job, yet
has some horrible
code problems - like too many global variables causing namespace conflicts.

There’s some very strange ideas - for example, the prefixing of many files/directories
with wp-, yet leaving constants and global variables without any
prefix (Yes, I did have a couple of clashes when integrating into the site’s
templating
system). WordPress could really have done with more design work putting in
at the start (wp-blog-header.php anyone?),
but I guess that’s also why it’s so good: it’s the paradox that well designed
projects take ages to
get anywhere (or don’t get anywhere) while the others grow and become popular.
Not always, but I can think of a fair few like this

The other thing that bugged me was the directory names are hard-coded in -
I wanted to rename the admin directory for security and to something more obvious
than wp-admin (why the prefix again…?). To do so would have required over
130 edits!

Anyhow, enough moaning about the code - it works, and does what I want, so
I’m satisfied (none of the better-coded tools I could find seemed as advanced)
- and I’m sure there’s a moral in there as I look on my hard drive at the third
redesign of a project that’s been around for 9 months and got no further than
the code architecture (look back through this blog for RSS
Manager for earlier life).

The project in question was to give blogs to town councillors. Now councillors,
like 98% of the population, aren’t renowned for their computer skills, and
to make things easier I integrated HTMLArea into WordPress using Joe
Schmoe’s WYSIWYG
Hack For Wordpress (modified to work with HTMLArea 3.0RC1).

As these are supposed to be trusted people posting on the site, I’ve not bothered
with filtering the HTML produced, but that’s coming (unless I can find a script
someone else has written first!). But this is a digression…

One thing Mark wanted was for councillors to post images. An extensive search
turned up Wei Zhuo’s PHP Image
Manager, Image Editor for HTMLArea.
This looked to be just thing thing, and also used my Image_Transform library (so it must be good :)).

The Image manager interface

Installing it was very simple. Feeling pleased with myself (look at how easy
I’ve made adding images to a website!!) I decided to demonstrate how simple
it was to my parents (Look Mum, even you can manage…). Two minutes and two
blank faces later, I was forced into the realisation that it still wasn’t simple
enough. The menu bar in HTMLArea itself was too complex (to be fair I’d installed
a lot of plugins) and they had no clue how to use the Insert Image dialogue
- despite it looking like a normal Windows Open File dialogue. When sat at
the computer, neither of them could work out how to upload an image.

Changes made

With the insults still ringing in my ears ("It’s got to be simple enough
for normal people to use" - Thanks Mum!) the first task was to
simplify the interface of both HTMLArea and the Insert Image dialogue. HTMLArea
was
a matter
of removing
all but the essential buttons; with ImageManager I started by adding tool tips
to items, and then removing the unneeded options. For this application the
user doesn’t need to worry about VSpace and HSpace - it’s all taken care of
in the CSS. Likewise, the image alignment options were slimmed down to Default,
Left and Right. I also removed the Image File field, as in this case
I didn’t want anyone linking to external images (the risk of copyright theft
is too high).

The biggest change (in terms of time taken) was to move the Upload field
onto a separate page. In itself it wasn’t a big job, but hunting down the errors
caused by my incorrect Javascript took all morning.

The separate file upload screen

Testing again

With these changes in place it was time to test against a member of the "normal" population
(e.g. my Mother). I gave her the task of posting an item about our holiday
and adding an image to the post.

The modified Image manager

The results were not promising. She could not work out how to insert a hyperlink,
and when I’d told her, didn’t realise you needed to insert http:// at the
start. She also couldn’t work out how to add an image from the Image Manager
dialogue - firstly because folders were in the file view, and she had to scroll
sideways, and secondly because once she’d found an image and clicked on it,
she didn’t see why she then needed to click insert as well. The metaphor
mixing caused problems - the Image Manager dialogue attempts to look like a
Windows Open/Save dialogue; with the result that when Mum went into a folder
she was then looking for a back button to get out of the folder, rather than
the Up arrow.

Conclusion

The weblog’s still getting tested, but I need to smooth WordPress a little
- when editing posts the councillors’ don’t need so many options presented.
I’ve not yet posted any comments, but again I think instructions for deleting
them will be necessary.

As to the Image Manager for HTMLArea, there’s still room for improvements.
Here’s my wishlist:

• To be able to drag and drop photos onto a folder and have them moved there.
  And then some way to move them back up out of the folder
• I would like
  to make the Image Manager insert a thumbnail into the document by default,
  and to then restrict the sizes the image can be resized to in
  HTMLArea - either no resizing at all, or to specific sizes relating to
  thumbnails that
  exist. I have visions of a councillor going out with their new digital
  camera, taking a photo, uploading a 1600×1200px image (not understanding
  about resizing)
  and then using the handles in HTMLArea to make it 200px wide. I don’t want
  anyone to have to wait hours for the photo to download!

I’d like to find some way to provide more instructions without breaking up
the flow of the application. I will write a separate tutorial, but something
more than tool-tips would be useful if integrated (and not just in this application
- my parents don’t find any intuitive - and Dad has used computers for over
15 years).

Mixing the native application look and behaviour with that of a web browser
does not work smoothly. I postulate that web applications would do better to
either behave totally as web apps, or to be always like desktop applications.
If the main window uses the browser’s Back button, then why should the user
not expect the popup window to do so to move between folders?

Postscript: messy image presentation may/may not be changed when I come back
from holiday… no time now!