We're making progress

I just wanted to post a quick update here because I'm actually very pleased with how LnBlog has been evolving lately.  As you may have noticed from the changes in the last few releases, this "my first PHP project" is actually turning into a real application.  In addition to having a bunch of features, I've squashed a bunch bugs, added some security, and implemented some more manageability features.

One of the things that I'm most pleased about, however, is that I've finally gotten around to some UI improvements.  Nothing radical, but just some stuff that makes my life easier.  One of the more recent ones is revamping the file upload interface.  Here's what it looks like at the moment.

The current LnBlog file upload and management interface

There are several new things here.  Starting at the bottom is the upload box, which uses Dropzone.  This isn't actually new, but I did add a handy feature to it: paste to upload.  So if you just click someplace outsize the edit box and paste some image data, the file will start to upload and appear in the Dropzone area.  Not a huge thing, but a handy feature that  cuts out a few steps when you just want to upload a screenshot or something.

Above that, you see the revamped file management interface.  For a long time, LnBlog didn't have any file management interface.  You just had to know what files you'd uploaded.  (No, I'm not kidding about that.)  Then I added the bare minimum: a list of files and a "delete" link.  It stayed like that for a long time.  Now, the name is actually a link you can click to open the file (you know, something actually useful) and there are up to four controls next to it. 

  1. First, the little "x" is the delete link.  That's pretty self-explanatory.
  2. Then there's the "add link" icon, which inserts a hyperlink to the file at the current cursor location in the editor.  Crazy, right? 
  3. After that is the "insert image" link, which does the same thing, but it only shows up for images and inserts an IMG tag instead of a hyperlink.  An interesting feature of this is that if an image has a "full sized" version and a "scaled down" version, then clicking this for the scaled down version will insert that image and make it a link to the full version.  So just that's a handy way to speed up a common workflow. 
  4. And last is a control that generates "scaled down" versions of images.  It's very simple and just supports four pre-defined sizes.  And, of course, this only shows up for images.

Clearly this is not revolutionary stuff.  However, I find that it actually makes a big difference.  Consider the amount of friction involved in the workflow for adding the above screenshot to this post:

  1. I grab a screenshot of the area using Greenshot and copy it to the clipboard.  (4 clicks)
  2. I click on the post editor page and press ctrl+V to paste the image.  (1 click, 2 keystrokes)
  3. After the image uploads, I click the "scale down image" link and select "medium" to get the 800x600 (max) version.  (2 clicks)
  4. When the scaled down version is created, I click the "insert image" link to insert the image with a link to the full-sized version.  (1 click)

Compare that to the old workflow.  Keep in mind that this is what I actually had to do, which is part of the reason I didn't post a lot of pictures in the past:

  1. Grab the screenshot, but save it to a file. (5 clicks, plus as many keystrokes as the filename takes)
  2. Use the "Convert Images" tool in Directory Opus to scale down the image to the desired size.  (Before I started using Directory Opus, I actually opened the image up in The GIMP and rescaled it that way.  Ugh!)  (3+ clicks, depending on your defaults in Directory Opus)
  3. Upload both the original and scaled versions of the image to the entry.  (2 clicks in the Dropzone era, more in the bad old days)
  4. Manually add the image tag for the scaled version, either typing or copy-pasting the file name.  (2 clicks, plus keystrokes or clicks for the filename, more if not using TInyMCE)
  5. Manually add a link tag around that image, either typing or copy-pasting the file name of the full version.  (2 clicks, plus keystrokes or clicks for the filename, more if not using TinyMCE)

Granted, that's only one extra step, but the new workflow is two keystrokes and 8 mouse clicks - and half of those clicks are just acquiring the screenshot.  In the old workflow, we're looking at a minimum of 14 mouse clicks, plus potentially a dozen or more keystrokes, plus switching windows multiple times between scaling and file selection dialogs.  I mean, it's not that bad if you really want to put a picture in your post, but if you're just casually posting something and aren't really committed to having a picture, it can be enough to make you think, "Eh, I don't feel like bothering with that."

I've also done a lot of other UI cleanup recently.  I still have some work to do (for instance, the layout of the post editor could stand improving), but it's getting to the point where I'm actually fairly happy with the UI.  And to think, it only took 16 years.

You can reply to this entry by leaving a comment below. This entry accepts Pingbacks from other blogs. You can follow comments on this entry by subscribing to the RSS feed.

Add your comments #

A comment body is required. No HTML code allowed. URLs starting with http:// or ftp:// will be automatically converted to hyperlinks.