Our UX Principles: 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3. Privilege the Content Creator 4. Make the default settings smart

Pimp Your *Imaginary* Admin (Come Wireframe With Us!)

Posted: March 30th, 2009 | Author: | Filed under: designing together | Tags: , , | 40 Comments »

Wireframe

At the beginning of this project we invited you to do a ‘show and tell’ of anything you’ve done to a Drupal Admin System that you think we should pay attention to – anything from a customised administration system, to a better view of content, to an in-line editing tool – whatever you think we should see. Happily, we’ve seen a few people participate and some interesting concept. (You can see some of there on our YouTube group).

You may also remember a little exercise we did for the Drupal.org project where we invited anyone to submit a wireframe of a page they though needed some attention and what they’d do to it (you can see the original post here)…

well… now is the time for us to bring that all together and to kick off ‘Pimp Your *Imaginary* Admin’ for the D7UX project!

Here’s how it works:

  1. pick *something* or *somewhere* in Drupal admin that you think is particularly in need of love
  2. get out your pen, pencil, visio, powerpoint, whatever works best for you (I’d encourage you to consider pencil!)
  3. sketch out how you think it *should* work.
  4. post your sketch(s) somewhere we can see them – the Flickr group is ideal for this if you’re a Flickr member (or inclined to become one) but if you post it on your own site, or wherever you share pictures and link to it in the comments below we will *definitely* take a look.
  5. this is optional but we would consider you most excellent if you do it – take a short movie of your sketch(es) and talk us through them. Your movie should include: a) a statement of the problem – what are you fixing? what is currently wrong with it? b) an overview of your solution – how it works, why it solves the problem. Post the movie to YouTube and add it to our YouTube Group (again, same applies here, if you’d rather post it elsewhere, just link to it in comments below and we’ll make sure it gets looked at!)you can see a kind-of example of what your video might look like in the prototype walk-thru we do around 3 mins into this video.

Remember:

  • go fast! Don’t spend too long on it – try to spend no more than a few minutes on a wireframe. If you’re not happy with it (and you probably won’t be at first!) just put it to one side and start fresh. You don’t want to labour over them too much at this stage.
  • you don’t have to be good at drawing: just take a quick browser through the images on the Flickr group if you want to get a sense of how un-pretty our wireframes usually are (particularly mine!). They’re not meant to be pretty, they’re meant to communicate. Even if they don’t do that, we have the video :) Don’t be shy.
  • everyone’s invited (not just ‘designers’) – Don’t think you have to be a designer or a UX person to participate in this exercise – this is all hands on deck. If you’re not an experience Drupal user or designer, you may actually be at an advantage in this exercise!

Really, really, really looking forward to seeing what you come up with!

Let me know if you have any questions.


40 Comments on “Pimp Your *Imaginary* Admin (Come Wireframe With Us!)”

  1. 1 Rick Boyer said at 2:47 pm on March 30th, 2009:

    I finally decided to write a comment on your blog. I just wanted to say good job. I really enjoy reading your posts.

  2. 2 Mike Crittenden said at 3:30 pm on March 30th, 2009:

    Not exactly a wireframe, but I usually use the RootCandy Admin theme for client sites:

    http://drupal.org/project/rootcandy

    Love the horizontal icon-ized navbar.

  3. 3 xqbzzr said at 4:21 pm on March 30th, 2009:

    …and I would hate the iconized bar as much as the overwhelming interface of Joomla. (no offense :-)
    I definitely like the idea of icons – which should finally get into drupal as a core feature. Two Checkboxes: “Icons for Admin”/”Icons for Site” (on/off).
    BUT what made me decide for drupal when choosing a cms is the “one-page admin overview”.
    When hitting the “admin” button I get to see everything I can adjust on one page, grouped by function.
    If I had to press every rootcandy icon-tab once just to learn what the drupal-coders meant with: “Configuration”, “Building” or “Content” I would definitely leave the system and look for something more easy and understandable. I do not ever want to fiddle around with the Joomla admin interface again!

  4. 4 mortendk said at 6:34 pm on March 30th, 2009:

    i did a rant about image handeling in drupal with a lot of my “wet admin dreams”
    might worth a look: http://morten.dk/blog/dear-walkah-wishlist-images-core

  5. 5 Jimmy Berry said at 7:42 pm on March 30th, 2009:

    I definitely think we need an easy way to provide a simplified admin view for “clients” and “end users” that contains only the elements they need displayed in a logical manor while not hindering the site administrator with a bunch of “cute” screens that slow them down.

  6. 6 tdskate said at 8:38 pm on March 30th, 2009:

    What xqbzzr said.

    The developer/themer side of me also likes the quick admin overview.
    But the content creator side of me would like an easyer way to manage assets and creating content.
    For me, those would be the important things to focus on.

  7. 7 Alexander Langer said at 8:40 pm on March 30th, 2009:

    User and node management could use some more flexibility and interactivity, probably via AJAX, that give you more options (Why am I limited to list only nodes of one or all node-types?).

    Wanted to scribble something down, scan it and fire it up – but felt so emtpy this afternoon and still do.

  8. 8 .Sam. said at 1:00 am on March 31st, 2009:

    Someone else said it;

    We need TWO different Admin user Permissions/Types.

    One would do all the Design, Modules, Content Types,… basic raw administration stuff. (SITE DEVELOPER)

    Another would “manage content” (i.e. promote to front page), delete posts, approve comments, edit posts, move posts to different forums,… (SITE MANAGER)

    For the SITE MANAGER you would only show a small subset of Admin stuff.

  9. 9 Drupal 7 User Experience Project » Blog Archive » Current Activities - What you can do NOW! said at 3:12 pm on March 31st, 2009:

    [...] Pimp Your *Imaginary* Admin (Wireframing) – something in Drupal bugging you and you know how you’d like it fixed? Come on then, wireframe it up and show us! [...]

  10. 10 yoroy said at 7:11 pm on March 31st, 2009:

    I made an animated wireframe “Harmonicas for flooded state screens”: http://www.youtube.com/watch?v=SMcxz-5XFMs

    Enjoy! :-)

  11. 11 yoroy said at 6:46 am on April 1st, 2009:

    http://www.youtube.com/watch?v=OnUAHGiHR3I screencast of an admin theme I’m working on.

  12. 12 Morgenstern said at 10:00 pm on April 1st, 2009:

    A huge +1 to #4!!!

    We definitely need one (!) simple (!) image / media solution for D7.

  13. 13 Marc said at 10:37 pm on April 1st, 2009:

    On IRC the other day, I was talking about some UX improvements to the modules page (/admin/build/modules). Instead of paper-pen-youtube wireframing, I did some “firebug sketching”.

    This is what it looks like now (in D6):
    http://picasaweb.google.com/lh/photo/4lf3pQzeHWKScmtAs6nopw?feat=directlink

    I think the page could use a little clean up:
    http://picasaweb.google.com/lh/photo/WWzx0fCKiyZSeRszVQ0f0Q?feat=directlink

    But more importantly, I would like to get some feedback after uploading a new module:
    http://picasaweb.google.com/lh/photo/ogv1uiMqDKiF4lFxc2D5mQ?feat=directlink

    I’m curious what you all think…

  14. 14 Dodazzi said at 12:03 am on April 2nd, 2009:

    A simple mockup and some thoughts on the menu tree for the admin pages starting from what what we have now.

    http://www.quicksnapper.com/dodorama/full/admin-mockup/

  15. 15 Hrvoje said at 8:35 am on April 2nd, 2009:

    It would be nice if D7 would have a “module manager” that could search and install modules from within the Drupal admin.

  16. 16 Marc said at 9:36 am on April 2nd, 2009:

    @Dodazzi: I’m not convinced that’s a good idea. If you feel that the admin interface contains too many options, create a role with less permissions for your day-to-day maintainance (there are modules to switch to user#1 with a single click, if needed).

    Where do you see the module settings in your menu tree? Under ‘site settings’? As a developer, I wouldn’t want the module settings to be hidden at a deeper level than they already are.

    Finally, I think the cron message should stay, but I agree it could be friendlier. Maybe add something like “This is not a critical problem, but some functionality, like search indexing, depends on cron.”?

  17. 17 Dodazzi said at 1:07 pm on April 2nd, 2009:

    @Marc: thanks for reviewing my mockup.
    Regarding your concerns what I can say is that the problem with the admin page is not for me. I’m skilled enough to understand what everything in that page means but I know that all the people that use Drupal the first time(being them totally newbies or skilled developers at their first approach with Drupal) are a little bit confused by that page.
    So if we agree on this(do we?) what I propose is to build a more nested hierarchy that hide the complexity to new users but unleash the power to more skilled ones.
    In this sense the Cron message is overkill and clearly belongs to the reports page(even cause if I’m not wrong searching is inactive by default).
    And if you fear that the links you use most are to deep in the tree that’s what the shortcut section is for (to collect you favorite links and put them in the admin page).
    Finally I don’t think module settings should stay all together but be in the section they belong. Is it a module related to users? under user settings!Imagecache?Site settings>image toolkit! and so on.
    I hope this makes you more convinced!

  18. 18 Steve Kessler said at 5:55 pm on April 2nd, 2009:

    There are a bunch of simple improvements (I think they are simple I don’t code) that I think would make a lot of sense. I am just not sure how to draw them. I will also try and draw some ideas.

    1. Either choose – or _ or both. When I teach beginning Drupal classes this is a source of lots of frustration. So node types, fields, menus, views (i know its contrib) all use the name naming conventions.

    2. Provide a content only block edit permission so that non-advanced users can edit block content.

    3. When you add a block you should be able to place it in a region before you save it.

    4. When you are selecting the location for a block the save button should float to the side.

    @Marc (10:37 pm on April 1st, 2009) – I think having Drupal tell you what new modules you just added would be very helpful.

  19. 19 Marc said at 7:12 pm on April 2nd, 2009:

    @Dodazzi: Part of what you say is completely in line with ‘The 4 UX Principles’, which I totally support. Drupal should be usable for newbies, guru’s, and everyone in between. Drupal is powerful and flexible, but that comes with complexity. We should not confront new users with unnecessary complexity. However there is a subtle but significant difference between hiding and guiding. We should not hide complexity, but guide the new user so he has easier access to all those great features that make Drupal our favourite CMS. (btw. I think my proposal above is a good example of guiding instead of hiding.)

    That said, I do agree that the structure of the (poorly named) ‘navigation’ menu is important in the guiding of new users, and there is definately room for improvement. It would be good if module settings go where they belong. In fact, I already noticed a tendency to moving menu items out of the Site configuration section to a more logical place (Locale’s ‘Translate interface’ for instance, which is now under Site building).

    I already figured that you would say “that’s what the shortcut section is for” but I’m a little concerned that a shortcut section would become an excuse to build good menu’s. But maybe that’s just me…

  20. 20 Marc said at 7:44 pm on April 2nd, 2009:

    Oops, I meant “an excuse to build bad menu’s”.

  21. 21 Morgenstern said at 8:51 am on April 3rd, 2009:

    In my opinion building custom content-types / forms through the UI is a big strength of Drupal. Let’s improve that even more and focus on getting Lullabot’s Form Builder connected with fields in core.

    This would enable the most untechnical users to build custom content types or extend user profiles etc.

    Lullabot’s Form Builder: http://www.lullabot.com/blog/drupals-form-building-future

  22. 22 janusman said at 3:24 pm on April 3rd, 2009:

    I posted some ideas here:
    http://www.slideshare.net/janusman/some-possible-drupal-7-enhancements-3apr09

    Rundown:
    * widget (javascript/AHAH?) that can filter long lists throughout the admin interface (modules, blocks, permissions) by keyword or category.
    * Admin todo “inbox”
    * Step-by-step wizards for complex tasks

  23. 23 Jeff Burnz said at 3:40 pm on April 3rd, 2009:

    My imaginary Admin has drag and drop form elements and allows me to build custom node forms very easily. Heres the original project – http://drupal.org/project/form_builder and a demo http://quicksketch.org/demos/form-builder-example

  24. 24 les said at 5:31 pm on April 3rd, 2009:

    this is probably already mentioned:
    add upload images/insert into blog/page/stories etc functionality. Nucleus CMS had this ages ago (and i’m sure others).

    One shouldnt have to download/install a bunch of modules for basic functionalities.

    otherwise, there looks to be great potential in drupal.

  25. 25 Sutharsan said at 4:41 pm on April 4th, 2009:

    This is my idea of a Drupal dashboard: http://link3.nl/files/d7ux-dashboard.jpg Different layout and different content for different kind of users. Each panel within a dashboard can be moved/added/deleted, multiple dashboards can be created for different roles.

    After drawing this I realized I’ve seen this concept before, and I found this at SugarCRM: http://www.sugarcrm.com/crm/images/content_images/screens/screen_5.0_home.jpg

  26. 26 Riche Zamor said at 9:50 pm on April 5th, 2009:

    I put a post on my blog a few weeks back about creating a full user dashboard in the system. You can read it here: http://www.richezamor.com/blog/usability-drupal-7-new-administration-menu/

  27. 27 Admin Menu said at 11:21 am on April 6th, 2009:

    It is not imaginery but actually there
    that makes admin jobs simple WITHOUT SCROLLS, CLICKS, AND PAGE VISITS.

    http://drupal.org/project/admin_menu
    http://drupal.org/project/admin_menu_dropdown

    See working demo http://www.youtube.com/watch?v=m1yblPg5z8U

    The above and rootcandy http://drupal.org/project/rootcandy
    gives easy administration out of the box.

  28. 28 evl said at 1:59 pm on April 8th, 2009:

    I guess I can explain it in one word “pictures” or “images”. I wish for the ability to insert images like wordpress do, maintaining the original url of the picture, so incase you need to uninstall the “image” module that your images wont break like they currently do if you install and uninstall the image module.

  29. 29 logiclab said at 6:56 am on April 13th, 2009:

    I posted 5 suggestions on the Drupal “Issues” page however no replies. Maybe you folks are interested. My suggestions involve minimizing the number of mouse clicks.

    1.
    I am suggesting a “Take Site Offline” button and an “Update Database” button on the modules page. This would keep you on the same page when adding modules and updating the database. . . instead of having to

    1. go to the site maintenance page and take the site offline
    2. go to the modules page and select new modules
    3. type in the URL to Update the Database
    4. go back to the site maintenance page and put site back online

    Maybe put it in an AJAX windows.

    Also, put the save button at the top and the bottom of the modules page. The module page gets pretty long.

    - – -

    2.
    On a similar note, when asked for a path to a folder or file, what about a Browse button so you could just navigate to the location and select the folder or file and avoid typing mistakes or trying to figure out the path?

    - – -

    3.
    Allow for the deletion of multiple content items from the following page.

    Home » Administer » Content management» Content

    As far as I can tell, each piece of content must be deleted one at a time. Maybe for Drupal 6.x also???
    - – -

    4.
    The content page shows the following Headers (with an example)

    Title – Type – Author – Status – Operations
    About Page logic1 published edit

    To save clicks, under the Operations header, and instead of edit can you add

    View – Edit – Outline – Track

    so you can go directly to your destination?
    - – -

    5.
    Many Drupal pages for ex. Modules and Navigation can be quite long. When you do make a change, you save the page and stay on that page.

    What if you add a modifier key (Ctl or Cmd) to the Administration Menu at the top of Drupal so when you made a selection with the modifier key, would take you to the selected page after saving the page you are on.

    or at least add a save button at the top of the page.

    ciao

  30. 30 logiclab said at 4:02 pm on April 14th, 2009:

    scratch #3. Sorry.

  31. 31 AMD said at 4:57 pm on April 14th, 2009:

    Maybe we can take some inspiration or do some code-lifting from here : zimplit.com/index.html

    The download is only 41kb and takes less than 0.4 sec to install – so anyone can test and see this unique and simple admin.

  32. 32 gagarine said at 5:04 pm on April 26th, 2009:

    Hello,

    For a lot of action we can remove “warning message” and replace with a undo system. They have a really good article about that in list apart: http://www.alistapart.com/articles/neveruseawarning .

  33. 33 gagarine said at 5:07 pm on April 26th, 2009:

    harrg… first i would like respond to Hrvoje that a module installer is more a security issue…

    Sorry my post is not in the good place :/

  34. 34 Pawel Pohl said at 2:17 am on May 21st, 2009:

    +1 especially on highlighting new modules.

    Another thing: I find it very hard to find anything in the list. I wish I could use Ctrl+F to find the module by name, but every name repeats dozens of times in various “required by” or “requires lists”. I wish these were collapsed by default, or mass-collapsible.

  35. 35 Jackson said at 3:25 pm on May 23rd, 2009:

    Your admin theme “strix” is absolutely wonderful! Great job! Thank you for sharing!!!!

    I hope you release it as-is on Drupal.org as a theme/project.

    Thanks again for sharing!

  36. 36 Jackson said at 3:28 pm on May 23rd, 2009:

    I love AdminMenu, and use it on all my Drupal sites.

    However, I don’t necessarily think it’s for everyone. In fact, there’s some very powerful features that are just too exposed for many people. Don’t get me wrong, I love it’s power and ease-of-use — but I think some people really need an easy, intuitive “page” to go to, that helps them figure out what they’re trying to do — and helps them get to the right area quickly and easily.

    I really the “strix” theme mentioned in this comment thread. It’s simple, and works with Drupal currently.

  37. 37 Jake Strawn said at 2:39 pm on May 28th, 2009:

    In response to “yoroy”

    This is truly a fantastic idea on the interface for several sections of the drupal admin.

    It could obviously fit in on the menu editing interface, block management, node management, and possibly other things even like permissions & taxonomy.

    Is there any thread here on or Drupal.org specifically for this? I’d really like to discuss how to make this a reality, even if it turns into something outside of the timeline for D7, I’d like to put this to module code to really make things easy for personal and client drupal projects.

  38. 38 Leisa Reichelt said at 2:52 pm on May 28th, 2009:

    hey Jake, I’m talking with yoroy about looking at this interaction pattern as a Microproject (http://www.d7ux.org/microprojects). Assuming this happens it will show up in the issue queue fairly shortly. We’ll post links to the issue queue in the Microprojects post.

    (it’s great isn’t it. we love it too!)

  39. 39 Giles Kennedy said at 8:30 pm on July 3rd, 2009:

    For want of somewhere better to leave this, book administration could do with some love. For a start, what is a book? And then to access some of the functionality when viewing a node you have to click “outline”. (Huh?!) That page has some not-very-helpful text, and fails to give a link to the admin screen that lets you re-order the specific book you are in (if you are in a book). Using weight to change the position of the page you are interested in is kind of tricky without knowing the weights of the other pages. Have a look at at the “outline” tab on any node when book.module is enabled and you will see what I mean.

  40. 40 Free project Management Templates said at 11:28 am on September 3rd, 2009:

    Exclude Pages is great – I have been keeping an eye out for something like this. I had been using Pagemash, which is a good plugin, but not very scalable beyond twenty or thirty pages, in terms of how it manages content. Thanks for the great writeup.

Труба металлическая бывает как черная так и нержавеющая. | odminblog.ru