A Demo Drag and Drop User Interface

I love good user interface design. So I'm lovin' jQuery and what it can do.

I brand myself as a left brain/right brain person (a trained photographer who builds web sites) and I've spent most of my career building bridges between what I call 'engineer minded folks' and the rest of us 'mere humans'. I'm really thankful for Apple for showing the world that good UI works and works best.

Now it's my turn. So I've build a little demo of a cutting edge drag and drop web site interface I'm [re]building for Charleston artist John Duckworth. It is the administrative place for John Duckworth to maintain his web site. What used to be tools only high paying corporate sites could get a hold of are now free Open Source software packages. And that's what helped my build this.

It is still a work in progress, but, here goes...

Talking Points

The goal of this project is to build an admin face that has both appeal and easy of use and is targeted toward a visual artist, like John. He has to be able to flexibly create galleries and assign them different roles on his site, like galleries for clients, a gallery for the home page, and a gallery for sale images. So I started by emulating iPhoto, with it's ability to take in many images and create different kinds of albums.

Tree View Columns

Using jsTree, everything is super easy to move around, just like in a desktop application. All changes are fired right back, via AJAX, to the database, behind the scenes.

On the left there is a list of galleries in different states - Web Galleries are published, Draft and Archive galleries are not. Home Page Slide Show and Orphaned are permanent galleries that hold image for the home page and any images that don't have a gallery assigned to them. Changing the status of a gallery is as simple as dragging the title into another place on the tree.

On the right the client menu allows easy access to assigning galleries to clients who log in and also to the forms for keeping data on them.

Editables, Editables, Everywhere

Forms are ugly and not terribly intuitive. To the rescue comes edit in place Jeditable.

Click on the title of any gallery, and it becomes an editable field:

  Click and you'll get

Live Thumbnails

A good landing page is an important feature when you are selling art. I thought John would like the ability to live resize images, in this case thumbnails, on the fly, as well as live preview the columns and rows. So in came the useful SelectToSlider, which enhances the ability to make these changes.

Drag and Drop Reordering

The last trick in this bag (so far) is drag and drop reordering. Hover over an image and you can see image details as well as drag reorder the layout.

Next Up

There are a bunch of small things to do but next up I'll be borrowing a page out of the RoundCube interface to allow John to add images to a gallery simply by dragging and dropping images over the gallery titles. Then there are the forms. Then more endless polishing. Good UI's are never perfect and are ever evolving, after all.

Log in to the live online demo here.