Container and Library Usability

[peakpg]

Imported from lighthouse. Original ticket at: http://browsermedia.lighthouseapp.com/projects/28481/tickets/157. Created by buzzware - 2009-09-20 21:48:54 UTC

At first glance BrowserCMS has a very nice looking interface, but I'm finding some
usability warts that I'm pretty sure will confuse customers, as they confused me when
I tried to use it. First I want to draw attention to the process of adding content
to a page.

In page edit mode the user would typically see bcms's containers and think
"I want to add an image there". They would then see the + button and likely just click it.
They are then taken to a new full screen and asked to choose the type (1). Lets say
they choose image. Now they are presented with a screen for adding an image to the
library. That may be what they were expecting, but they may be thinking "where is the
image I just uploaded ?". They aren't likely to realise they were supposed to decide up
front whether they were adding an image already in the library, or upload one that isn't (2)
If they click "Content Library" at the top to hunt for it, they have exited the process
of adding something (3), and will likely get lost trying to add something from it.
So lets say they go back to the page they were editing to try again.

Now they mouse over the two buttons. One says "Add new content to this container
(container_name)" and the other "Insert existing content into this container (container_name)" (4).
They may well think "but I do want to add new content to the container" and then realise that
new in this context is meant as "new to the system" as opposed to "new to the container".(5)

So they click "Insert existing content..." which presents a new page for choosing content.(6)
They choose Image from the droplist, expecting to see images, but are only shown text names.(7)
If they choose an image by name, and want to check which image that is by clicking "View Content"
they are taken to the content library, but they have now left the process of adding content to
the container, and unless they use their browser back button, are likely to get lost looking for
an "add to page" button.(8)

(1) It seems clunky to present a new full page just to choose a type. Also this isn't consistent
with the page presented when inserting existing content, that has the content type droplist
at the top.
(2) They shouldn't have to decide as a first step whether to add a new or existing content item,
and they will often need the content library to know whether something has been uploaded or not,
or whether something already in the library will be good enough.
(3) While in a process of eg. adding an image, the top menu bar should not be present
(4) I only just noticed now the container name here. It would help everyone to display
the container name in the title bar of the container - it shows what is intended to go
in the box.
(5) If nothing else changes the hint texts could be changed for these buttons to eg.
"Upload and insert content" and "Insert content from library"
(6) Why is this page not the same as (or slight modification of) the content library page ?
It seems you could reduce your code base and improve useability by merging the two.
(7) With a lot of images, users can't be expected to identify the image they are looking for by
the name they (or much worse) someone else gave it months ago. We need to see thumbnails here,
and more information in columnns such as size, tags etc. A 2D tile grid mode would be great too.
(8) Cant view images without leaving "Add to page process"

So here's my proposal :

1. Combine the container buttons "Add new.." and "Insert existing..." into one "Add Content" with
   the + icon.
2. Clicking it takes you to the library in a special content selection mode, and by far the most
   prominent button is "Add to Page", and next to that is a "Cancel" button.
3. Once in the library, they can upload new content, edit content and properties etc, but they
   can't leave the library without clicking either "Add to Page" or "Cancel"
4. In the content library, we need different layouts suited for each content type tab.
5. The Images section needs thumbnails, perhaps with a javascript popup to see the image at a
   larger size without going to a view page.
6. Other content types could use some way of previewing what they are without going to a new page
   too. Eg. hovering over text content could show the first sentence or so.
7. In the library, the split between view and edit content needn't be so stark. It causes a lot of
   unnecessary clicking between pages. Perhaps show the image properties above the image, for example,
   and have view mode where the controls are ghosted, and edit mode where they can be edited if the
   user has permission.
8. In the content library listings, please show the tags for each item, and allow the list to be
   searched by tags.

I really like what you guys have produced for a first Rails release, and really want BrowserCMS to
succeed for the Rails community and my business. I'm already building at least 3 sites with it,
but I'm concerned how things will go when I need to train the customer, hence this email.

Cheers

Gary