Even though the UI for IMCE has been revamped for Drupal 6, I still find it difficult to use and to demonstrate to users. While there are many things that can be done to enhance the existing UI, it wouldn't hurt to see what other approaches can be taken.

I've created a set of wireframes based on my own idea of what the UI could look like. I've tried to include room for all of the existing functionality while limiting the amount of visual clutter and enhancing usability.

Click here to see my wireframes.

Overview

  1. The main view, each file has a thumbnail, filename and date, other details are provided by a tooltip on mouseover.

    The list of files can be reordered by using the select field at the top left, they can be ordered with any available criteria.

    The folder structure is visible on the right under the default tab.

  2. Status message is shown after uploading a file.
  3. Instead of annoying the user with a prompt when no file is selected, they simply get a warning message.
  4. The edit tab is for resizing (and/or cropping) an image, the width and height are auto-populated. Note that the 'Insert' button becomes enabled when an item is selected.

If someone with programming experience is willing to pick this up, I'll write the HTML and CSS of the UI. :)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Rowanw’s picture

The link I added above has the wrong path, just use the attachment link.

Rowanw’s picture

Status: Needs review » Active

I've created a very rough prototype to play with. You can select and preview images, sort by date and 'delete' files.

I changed a few things from the original wireframe, such as moving the insert button to be inside the files list and rearranging the preview panel. It also shows extra information when a file is selected, like Firefox's Add-ons manager.

The demo is here: http://rowanw.com/image-browser/image-browser.htm#preview

It hasn't been forced to work with IE yet.

Renee S’s picture

OMG yes. I'm one of those people who can just sit down and make things work, AND I'm a developer, and even I had trouble figuring out how the heck to upload things - turns out you click those little text links at the top (which, you're so right, should be tabs). And, since I'm using FCK, I get "Add to imcefck editor" which means zilch to my users. "Insert", however, does.

Your demo is awesome.

Maybe make "Create copy" checked by default if the default is to resize the image permanently? Also, instead of radioactive for "delete", it might be better to use a trash can - that's more conventional.

If you're looking for a tester, or an IE-forcer-inner, I'm happy to oblige :)

Rowanw’s picture

After the UI is sorted, the next step is finding someone who can write better JavaScript than me. ;)

I'll take your suggestions.

rapsli’s picture

sorry, can't help with the JS.

About the UI. The preview Image should be displayed so that it fits into the window.

This new UI would also solve the usability issues from http://drupal.org/node/291470

scroogie’s picture

In my humble opinion there are several problems with your mockup, although it looks a bit better than the existing one in question of design.
* Your interface concentrates on the wrong property (the filename). If your site runs for a long time the users will forget which filename the picture had, also A LOT (if not the majority) of people will upload pictures by the names of DC12391_1231.jpeg which don't help at all to identify them.
* One column with a huge list is not enough. Imagine having thousands of files in there. You need categorisation and a grid display. The current "folders" navigation is imho too inconspicuous.
* Thumbnails are way to small. As explained above, thumbnails are the number one way of identifying pictures (after choosing the category). Your thumbnails are currently 32x32, which is ridiculously small on a current standard screen. I think in times where you get a 7 Gigabyte mailbox for free we can trust our webspace to be big enough for 128x128. Even better would be a slider to zoom thumbnail-size, like in good photo management software (digikam, f-spot, picasa, iPhoto).
* Uploading a picture and choosing an existing picture are two different use cases and should therefor be split up. With a more specialised interface for uploading, on-the-fly-editing or other extensions like multiple-file-uploads would be easier to add to the interface as well.
* having tabs in the right half of a window with a list-view to the left is really unconventional way of doing things. It took me some seconds to even realise that there are tabs on the right side. Tabs should either be on the top of the whole window or nonexistant (i would prefer the latter by far).

Have a look at an iPhoto overview: http://images.apple.com/de/ilife/iphoto/images/iphoto_gallery01_20080711...
or the picasa overview: http://enscreenshots.softonic.com/s2en/23000/23941/3_picasa_main.jpg
I think it should look more like that. I would also like to have the possibility to search for upload date.

Because in the end, the only thing you need to do with IMCE is upload and organise pictures.
Just my 2 cents.

Rowanw’s picture

You make some valid points Scroogie, I'll revisit the drawing board and come back with new wireframes. The files list could definitely use some extra realestate, and instead of showing the file name all the time it could just be in a tooltip.

Rowanw’s picture

Here's my newer version that puts a lot more emphasis on the files list and now mimics a desktop application.

* In the end I realised there really isn't any purpose for the tabs, so they're gone.
* Thumbnails are 120x120, I'm thinking about showing the full size image when the user double-clicks the thumbnail.
* The action buttons are at the bottom right corner.
* Information bar at the bottom for file details, the info should be self-explanatory to most users, otherwise tooltips should be available.

Suggestions and feedback are welcome.

scroogie’s picture

This looks great already!
I like the compact way the file information is shown in the bottom. Im just now thinking about the two locations where controls are (top and bottom). Can you perhaps try to use a sidebar instead of the second horizontal bar? Vertical screenspace is usually more valuable because of our aspect ratio and it would perhaps allow to have all controls in a single panel (as well as a tree-like folder navigation). Another option would be to use a symbol toolbar on the bottom. We could try using icons like desktop applications, perhaps from Gnomes Tango (http://tango.freedesktop.org/images/2/20/Tango-feet.png) or KDEs Oxygen (http://www.kde-look.org/content/show.php/Oxygen+Icons?content=74184). I'm not sure it would lead anywhere, it would just be great to try it out, and you seem to be very good at that. :)
Greetings
André

tjodolv’s picture

I like this a lot. Exactly what I have been looking (longing) for actually.

This may be something for IMCE "core" and not you, but I'll ask anyways:
If used with the Image module, would it be possible to filter images in this browser window by tags/taxonomy?

Keep up the good work!

rapsli’s picture

Hi. What is the status on this new UI? Is anybody working on this? Any roadmap?

Rowanw’s picture

This hasn't gone anywhere really, no one has expressed interest in writing the PHP/JS that would be required.

rapsli’s picture

:( ... too bad. Is there any other options?

eigentor’s picture

This is a real pity. My dream of a file browser that looks like a media manager will have to wait a bit. But I see: the problem ist the maintainer is away until 2009. Hopefully ufku will take up those great suggestions...

IMCE is unrivaled already and might be a solid start to the hopefully some day to come centralized media management in Drupal...

rapsli’s picture

eigentor’s picture

Thanks Rapsli for the link. Wow this is a rockin' image browser!

And in some way IMCE on steroids. Maybe those two projects could unite... (for the browsing ability should just be added to IMCE). Maybe some other stuff recently seen in the Wordpress Special Tinymce (like a visual select for floating images left or right), a bit of refining to the "custom scaling and creating a duplicate" feature in IMCE I've grown to love (even not-so-tekky clients grasp it) or maybe even some imagecache integration, and here we go to compete other system's Image handling!

How about Rapsli joining the team - you have some module maintaining ambitions as I know ;)

Hooray!

rapsli’s picture

@eigentor :D .... but no time.

arlinsandbulte’s picture

Priority: Normal » Critical

WOW... YES!
These suggestions are EXACTLY what I have been thinking for IMCE!
Rowanw's mockups look geat! I am struggling integrating a good wysiwyg so non-techies can update a site. So far, FCKeditor & IMCE seem like the best choice for letting users add images to their content, but the UI is very 'techie.'
I want something that makes adding images to a drupal site just as easy as adding an image in a word document!

I would love to help out, but I have no experience in programming or css (just learning).
Let me know if there is ANYTHING I could do! Give me enough time, and maybe I could learn enough to do anything!

How can we get this request more priority?

arlinsandbulte’s picture

Priority: Critical » Normal

I marked these two issues as duplicates of this one:
#139387: Redesigned interface
#236044: Nicer, prettier, easier UI
Both of these other issues have great nice ideas and even patches, but I think we should consolidate the work into one place. Also, they dealt with older versions of IMCE.

What is the status of IMCE development? Specifically improving the UI.
For some reason, this is a common request, and there has been some work done. But then it seems to fall in a hole.

I know there is work being done on D7 media handling.
But, I think some relatively minor tweaks to IMCE could skyrocket its usability.

For starters, let's start simple so this can happen quickly, here are my suggestions:
1.) Instead of saying "Send to FCKEditor" or "Send to TinyMCE", just say "Use This Image" or "Insert This Image"
2.) Get rid of the log messages. End users don't need to see these and it just takes up space.
3.) Autosize the image preview so that it can be seen in it's entirety. Right now, if the image is large, much of it is hidden, making is useless.

I think this could all be done in IMCE's theme system pretty quickly. From here, we could tacke the larger changes outlined above. First, let's tackle this low hanging fruit.

I would love to do this, but I have no experience in themeing or php. If someone would be kind enough to guide me, I could learn (I will ask a lot of questions, though).

Don't get me wrong, IMCE is the best solution I have found for inline images so far. It just needs a little extra for my less knowledgeable end users.

arlinsandbulte’s picture

OK, after 3+ hours of fuddling around, I was able to get most of what I wanted adding this css code to my theme css file:

/** IMCE Custom Styles **/
#imce-content * #file-preview a img /* resize preview image so it fits in window */
  {
    height: 200px;
    width: auto;
  }
#log-prv-wrapper
  {
    height: 210px
  }
#imce-content * #log-resizer, #imce-content * #log-wrapper, #help-box /* hide stuff i don't want to show */
  {
    display: none;
  }
.x-resizer
  {
    width: 5px;
  }
.y-resizer
  {
    height: 5px;
  }

I could not figure out a good way to not display the "clear log" link without hacking.
Also, the window sizes are not great, but this works.

I changed the resizer bars from 1px to 5px - They were WAY to hard to grab onto at 1px, you needed way too steady of a hand.

geerlingguy’s picture

Subscribe - I will look more into this when I have a little more time.

bsimon’s picture

@arlinsandbulte

In this old issue post, there's CSS to stop the log clearer from displaying... I don't know if it still works...

http://drupal.org/node/291470

arlinsandbulte’s picture

Issue tags: +Usability

Thanks bsimon,
That WORKED!

Here is my css thus far:

/** IMCE Custom Styles **/
body.imce * #file-preview a img /* resize preview image so it fits in window */
  {
    height: 200px;
    width: auto;
  }
body.imce * #log-resizer, body.imce * #log-wrapper, body.imce * #log-clearer, body.imce * #help-box /* hide stuff i don't want to show */
  {
    display: none !important;
  }
body.imce .x-resizer
  {
    width: 5px;
  }
body.imce .y-resizer
  {
    height: 5px;
  }

This gives me most of what I want. I am finding the rest to be way above my head (I barely know css). This may not be the best way to do things, so let me know if I could do this in a better way.

Some other think I would like to improve usability:
1.) Get rid of the bottom resize bar and just let the preview area extend to the bottom of the page.
2.) Let the preview image resize to fit in the preview area (right now I hard set it to 200px high).
3.) "Send to FCKeditor" is not end-user friendly or intuitive. (who cares or knows about the name of the editor being used?) Should just say "Insert selected" or "Use selected".

There is more I could say about "Upload" and "Manage Directories" (actually part of the IMCE Mkdir module), but this is at least a start.

arlinsandbulte’s picture

UPDATE:
Here is my latest and greatest CSS for an improved IMCE end user interface.
Mostly, it just hides stuff end users don't need to see (like the log).
It also auto-sizes large images so they can be seen in their entirety in the preview.

I also hid the directory/quota info as I am not using that feature. However, I was unable to get the file list table to properly expand into the area vacated by the directory/quota info. So, it looks a little ugly (see attached screenshot). Can anyone help me fix this small issue?

Thanks!

/** IMCE Custom Styles **/
#imce-content * #file-preview a img /* resize preview image so it fits in window */
  {
    width: auto;
    max-height: 300px;
    height: auto !important;
    max-height: 300px;
  }
#imce-content * #log-resizer, #imce-content * #log-wrapper, #imce-content #log-clearer, #imce-content #help-box, #imce-content #content-resizer, #imce-content * #dir-stat /* hide stuff i don't want to show */
  {
    display: none !important;
  }
#imce-content * #log-prv-wrapper /* autosize preview area */
  {
    height: auto !important;
    border: none;
  }
#imce-content .x-resizer
  {
    width: 5px;
  }
#imce-content .y-resizer
  {
    height: 5px;
  }
ddv’s picture

I think this is a great idea, and would solve the problem that led me here: White text on a white background.

The "upload", "thumbnail", etc. are all in white text. So are the file names in the left pane. I'm using the Atlantis theme and that seems to be where the white is coming from -- as a temporary kludge, I discovered that changing the "a {color:" attribute to #e6e6e6 (light grey) made it possible to at least locate the buttons, but of course, that changes the text colour in the entire site! But I have no idea how all this css stuff is supposed to work. (if anyone can tell me how to change the text colour in the IMCE window, I would be greatful!)

One other thing that should be added to this new interface: bulk file upload capability. I have no idea how to do that either, but maybe something like the jupload module could serve as a template for IMCE?

arlinsandbulte’s picture

@ddv
Try adding this css to your theme's css file (replace colors with whatever you want):

#imce-content * a
  {
    color: red;
  }

#imce-content * a:hover
  {
    color: blue;
  }
ddv’s picture

Thanks for the tip. It didn't actually work, but thanks for trying.

Now, just to confirm I did it right, I'm using the A3_Atlantis theme. So I added your code to the end of /themes/a3_atlantis/style.css.

Caching is disabled, minimum cache life is "none".

Right?

arlinsandbulte’s picture

@ddv
Add the code above to the END of that css file and it should work (I just tried it with that theme and it works fine).

ddv’s picture

@ arlinsandbulte

Ok, this is wierd. I set up a test site, and your suggestion changes the text colours just like it's supposed to. On my existing site, nothing changes the text colours except changing the global text attribute for the theme. Some other module must be interfering somewhere.

The odd thing is, I tried inserting your IMCE Custom Styles CSS code into the Atlantis theme, and that DID change the layout on the existing site. So something is overriding the colour attributes, but nothing else.

mstef’s picture

I agree. The new interface is great for people smart enough to figure it out or people just used to dealing with complex interfaces on a daily basis. I assume it will be extremely confusing for the normal end-user just trying to add an image to a node.

Are there any solutions or options to offers a dead simple interface? The old interface was perfect in my opinion..

scroogie’s picture

Have a look at these mockups: http://www.flickr.com/photos/mverbaar/sets/72157620894824094/
I think they are really really good. Here is the original thread: http://drupal.org/node/491258:

greggles’s picture

1.) Instead of saying "Send to FCKEditor" or "Send to TinyMCE", just say "Use This Image" or "Insert This Image"

I just wanted to confirm the idea here. I trained some folks on how to use IMCE with TinyMCE and they were all confused by this text. "TinyMCE" and "FCKEditor" are developer concepts that mean nothing to the end users. I like "Use this image" better since "Insert this image" is what the WYSIWYG is actually doing. Also, it should be "Use this image" with sentence capitalization instead of "Use This Image" with title capitalization. Drupal uses sentence style.

eigentor’s picture

This thread may be outdated, since if Media module will be what it promises, IMCE won't be needed anymore.

Sansui’s picture

I'm not sure I dig the UI's shown here, but they are at least an improvement over the default. If we could even just style the links with css selectors, that would help a bit, but there doesn't seem to be any default selectors provided and I can't figure out where to hack the core module to even add the attribute... the way the navigation works is terribly unfriendly. Most people are unable to figure out how to upload an image successfully, and are even confused about the directory structure (assuming that the left hand directory structure should be showing files on their computer).

Elijah Lynn’s picture

subscribing

eigentor’s picture

As said, Media Module is very likely to replace IMCE. (even if this will not be so quick as always). If interested in the crazy mockups Maarten Verbandschot is doing look here http://www.flickr.com/photos/mverbaar/ or here http://drupal.org/node/491258
This is what I call a media library UI ;)

scroogie’s picture

I linked those 5 comments above you already ;)

pitxels’s picture

is the improved Media module out yet?

we should work in the IMCE GUI while that option is ready.

How can we modify the "Send to FCKeditor" text?

pitxels’s picture

@arlinsandbulte: your css is great!

I have a small problem with resize bars, they can not be placed back in the original position.
do they work for you?

if no, how can we hide those bars?

arlinsandbulte’s picture

@jusspitti: yes, I was having problems with the resize bars too. For now at least, I just disabled them.

pitxels’s picture

@arlinsandbulte: How do you disable the resize bars?

I found the "Send to FCKeditor" in a js file, but im sure the message can be changed using translation or something...

Can I use translation module even if I am only using english?

mjpg’s picture

In addition to the CSS above, I added CSS to make the top links look like buttons and coloured the 'Send to tinymce/fck' yellow.

See screenshot attached.

I also changed the code in the
.... imce/js/imce_set_app.js
line 49 to:

    imce.setSendTo(Drupal.t('Insert', {'@app': appName}), sendtoFunc);

An AWFUL way to do it, but I had no time and client who could not get it (understandably).

CSS is:

/* Restyles IMCE pop up to make buttons clearer */

#imce-content ul.secondary a {
  background-color:#E2DFD6;
  border-top:1px solid #CDCBC5;
  border-left:1px solid #CDCBC5;
  border-right:1px solid #888785;
  border-bottom:1px solid #888785;
  padding: 3px 8px;
  color:#000000;
}

#imce-content #op-items {
  min-height:25px;
}

#imce-content #op-item-undefined a {
  background-color:#EFD600;
  font-weight:bold;
}

/* Hide log clear link by making it white (not great) */
a#log-clearer {
  color:#FFFFFF; 
}

This is for v6.13.

shark’s picture

subscribing.

And +1 on changing the 'Send to FCKeditor' to 'Use this image'.

Bartezz’s picture

Hi,

I've just installed the IMCE module for the first time. Have build many Drupal sites but this was the first time I needed IMCE. And I must say that although the module does what it says and does so very nicely the UI is not very appealing to say the least. Looks like a relic from the web 0.1b era :) (this was a joke, take it lightly)

Anyway, I've searched for a solution/theme/template etc and all I found were requests (some dating back to 2007) and no solutions. Am I looking wrong or has nothing been done about this. If so can anyone tell me what the holdback has been? Is this a complex task or just time consuming? I was thinking of templating it myself but seeying all the request and no solutions has made me wondering if it is at all possible?

Cheers,
Bart

anrikun’s picture

Subscribing!
IMCE is a great module but the UI is really ugly and not standards compliant.
Please make the UI look better and fix bad XHTML.

ufku’s picture

Status: Active » Closed (fixed)

Please try 6.x-2.x which is hopefully less ugly.
Post UI related issues against that branch.

anrikun’s picture

Great work! This new UI is cool :-)!
Still some minor XHTML errors.
And UI still does not extend to popup's full space.

Bartezz’s picture

Version: 6.x-1.x-dev » 6.x-2.0-beta1

Very nice indeed! This is much more user friendly imho!
Also encountering the same things as Anrikun though.
Thought it might be cache but kept encountering it after clearing browser and Drupal caches....

Cheers,
Bartezz

anrikun’s picture

vitis’s picture

sub

arlinsandbulte’s picture

@ #50 vitis:
See #46 above