Want to get Lullabot article, videocast, and podcast announcements delivered right to your in-box? Let us know your email address (we won't share it) and we'll let you know when anything exciting happens.

The Buzzr Demo Video - Making Drupal Usable

A few weeks ago, I put together an April Fool's Day post about a bunch of usability work that Lullabot had been doing with Drupal. My favorite April 1 posts are usually heavily based in reality, and, as we've mentioned previously, Lullabot has, in fact, been doing a lot of work trying to create a streamlined version of Drupal.

We started our project about a year ago, working with Karen McGrane from Bond Art + Science heading up our user experience work and Ed Sussman coordinating all of the business aspects of the project. We spent about 8 months building a prototype and started fund raising a little over 4 months ago. Having done all of this work on spec, and since it's still in flux, we were hesitant to share it publicly during our ongoing V.C. meetings. But as we've been watching the great usability work that Mark Boulton and Leisa Reichelt have been doing for Drupal 7, we've found that they're struggling with a lot of same issues that we have, and even starting to solve them in the same ways.

So rather than playing it conservatively and keeping our work hidden, we've decided to unveil it to the world and contribute our thinking to the usability discussion. Our project, now called Buzzr, is still moving forward and there are many more features and ideas that we are working on. But I've made this video to highlight many of our usability ideas and show how they were implemented... no joke!

Enjoy.

Problems playing the video embedded here? Go to http://blip.tv/file/1988015 for other formats and options.

Comments on this post will automatically be closed three months from the original post date.

Comments

Great!

Thanks for sharing. I loved the layout mode + widgets window!

Now I can see how Drupal will take over the world

It's always been powerful - but now I can see how it will be easy to use too!

Thats hot.

And its real. Nice!

I was one of the people fooled by the original Drupal UX...

o_O

This is a very impressive demo! Holy cow! You took every recent Lullabot-related module and put them altogether!

It’s like… you had a plan! /me is now wondering if add1sun and webchick are cylons.

I was particular impressed with the theming modifications, the integration with the CSSAPI module to store them to the files directory, and the Simple Views integration.

I'm sure that Mark and Leisa (and the rest of the community) will be happy to see this work.

minor usability issue

This page doesn't render correctly in WinXP IE7 - the See Also block covers a bunch of text at the end of the lines of the main block.

Your right, it hovers over

Your right, it hovers over some text in IE7.

in IE 6 it overlaps the text

in IE 6 it overlaps the text until you roll over it, then it JUMPS!

I guess before rolling this

I guess before rolling this out, they should first make sure that no one anywhere ever uses IE anymore for anything.

Works now

Just so you know things look correctly now. I had this same problem on my vb6 code site with some of my menus until I fixed them. You must have got the same thing figured out. Anyways keep up the good work!

Loving this

So I was really anticipating some great work, to come out of a joint force between Lullabots and bond+art and it seems it did. It's good to see you have chosen similar paths as mark & leisa as we can easier see what are the larger problems and possibilities in this direction.

You didn't polish it yet and presented more in the works - this really made it easier for us to look conceptually, I hope you will be able to develop this further and along the way tackle the harder functionality within Drupal.

I like how you try to make the case for icons, which is almost impossible to make. I always say, they make the labels look cooler.

There are certainly a lot of usability issues I see with the solutions you guys are perusing but I am sure, you know them just as much as I do.

Keep on making stuff, that lets you edit it - where you are. Instead of in some configuration panel and keep in mind that user experience is a fast moving business, even in Drupal.

Icons and the admin interface

I'm the UX designer who is working with Lullabot on this project. The admin navigation bar and the icons were the subject of many, many discussions and iterations. I will freely confess that I would like to keep iterating on this problem, as I'm not completely happy with it (yet.)

The use of icons is a great example of what it means to design with a specific user persona in mind. What would work for the Drupal expert is not necessarily the same as what would work for someone who just wants an easy-to-use website building tool.

Icons or No Icons

I think that similar to configuring the menu bar on your computer, the user should be able to show Icons, Text, or Both. Their preference could be saved in their profile. Perhaps they cold even change the size of the icons (that might be too much customization). Outstanding work!

Nice

This will be fantastic when it's available. It's an "everything not Drupal" killer.
Favorite line: "Mildly OK-looking stuff..." LOL.

Go, Lullabot! Go, Jeff!

It looks amazing

But you knew that already.

I'd really like to see you work with the Acquia-sponsored team to build towards the same goal.

great, but heavy interface

Some of this looks amazing, congrats, and overall I wish you and the project to be a huge success. I will add that some of the admin interface elements remind me of heavy page loads and clutter that I disliked about other systems, like DotNetNuke. Then again, your clearly not targeting developers / pros with this.

Is the plan to offer a hosted click and launch platform with Drupal behind the scenes and a Buzzr front end?

WOW!

All I can say is "wow!" Drupal is now a product.

This is #!@&$ awesome

This is #!@&$ awesome, it's something that I have thought about but didn't have enough Drupal mojo to actually do. I guess if anyone can get it done it's you guys. I really wish the demo came out before DCDC, it buzz it would have generated...

I want in.

This has about a 100% overlap with much of the work I am doing now. Especially the feature grouping and streamlining node editing.

Private Distro?

As everyone noted, very cool stuff. I'm also really glad for the things that are getting contribed back. I'm wondering if this is all stuff you are planning on giving back or will you be holding some back as Lullabot private stuff. That's cool if you are, just curious what the end goal is. Will anything be conflicting between buzzr and the d7ux stuff?

interesting

Thank you for pushing the Drupal UI so far. However, it is my hope that Mark's work (and yours) can bring such advances to the entire community, rather than providing a closed system. Having said that, I still applaud the contributions that you've made to the community with each component of the system thus far. These are exciting times to be working on the Drupal project. I hope that we can harness the momentum that's building in an effective manner. There's so many good ideas and so much potential!

Yes!

That's actually one of the primary reasons that we wanted to get this demo, and code from it, out as quickly as possible. We started with the intent of building a "product" on top of Drupal, and sharing the pieces we felt were reusable. As the d7ux design work intersected with some of the UX work we've done, it became obvious that even the "unfinished' pieces would be very useful to Mark, Lisa, and the rest of the community.

The pros and cons and pitfalls we've had to work through are very similar to the ones that the d7ux teams are going to be battling through if they continue in this direction. We want to make sure that the entire community benefits from the thinking we've done and the discoveries we've made, not just the checked in code.

amen to that!

so great to see what you guys have been working on, love that we have independently headed down such similar paths, and really looking forward to talking with you more about this!

Smooth.......

gr8 work guys cant wait for Buzzr to be realized & get my hands on it...

one small tiny bit of usability suggestion u can add
On the Features page you showed some great stuff in combining all modules & related permissions into one group this would defiantly make it much much simpler for the end user / Administrator one thing though

There are some modules which enhance the functionality of other modules & adds on new information & options (Like ratings & comments for example can add rating / commenting functionality to all types of content) but their functionality (like enabling rating or comments for a particular content type) was only grouped with the respective module.
What would really be helpful is if the functionality could also show up on the content type group for which they work

for Example If one turns on rating the option to turn on rating for different content type shows up in the Ratings & reviews feature group It would be really great for usability & understandability purpose if the option to turn on ratings could also show up in the Content type Feature group for which they can be enabled, that is to say the option to enable Ratings also show up in the Feature Group showing all the settings/ options for blogs or Pages etc along with showing in their own group of Rating & reviews.
So the user will have two places to turn on the same functionality (I know it sounds a bit disconcerting ) & according to each users perception of where the setting should be they can turn it on or off in either place.

Another approach can be to divide the Features Page into subgroups depending on the functionality like for example one sub group could be of Content types blogs, images, forms etc & another one can be of the modules that increase their functionality like comments, ratings etc this approach would also help in having a better & intuitive understanding of the stuff on features page & would act as a gentle guiding system which can help guide users to intuitively look for things in the right place.

Hope I haven't spoken too much or out of bounds .. :D

Holy Crap!

LOVE THIS!

Believe it or not I think the "features instead of modules" UI enhancement is the best thing... and you saved it for last!

Is there any chance that it can use a central repository with signed modules to automatically list/install the "features" (a la Google's Android Market or APT?)? Think of the ease-of-use to add "features" if you could find them easily via the listing, check the box to download/install the files, and then set your permissions, etc...

Obviously there are massive security implications here-- it would be downloading & installing executable code-- but just as apt-get relies on the trustworthiness of the repository managers, the same would apply. It would also make module updates transparent and automatic. All via cron & signed keys.

Just a thought. VERY VERY nice work. This is the future.

W

Not at present.

Is there any chance that it can use a central repository with signed modules to automatically list/install the "features" (a la Google's Android Market or APT?)?

There's no mechanism for that at present; the complexity of managing those issues is pretty far beyond what we're working with. In fact, I'd say it's pretty far beyond anything the Drupal community has worked on to day. FormAPI, in comparison, is a cakewalk.

As other commenters have mentioned, there is a lot of work going on in the community right now around the "features/patterns/configuration simplification" problem. Solving it is tricky, and solving safe centralized automatic deployment in a way that's user-friendly is yet another complex issue stacked on top of it. Even hosted platforms like TypePad and Wordpress.com haven't tried to attack that problem, and the plugin models for their respective frameworks are very simple compared to Drupal.

Eventually, I think Drupal will get there -- but there is a lot of work to do before that happens and none of us yet have a clear vision of how it should happen.

Might be coming sooner than later

Adrian has been doing a lot of work lately on a very apt-like system:

http://groups.drupal.org/node/21295

A lot of the recent work on http://drupal.org/project/drush lays a nice groundwork for this kind of thing: one to watch!

sweet! ;)

sweet! ;)

Added to DrupalSightings.com

Features

This is very impressive. A super user would definitely be able to use this tool.
I share Lev's concern about heavy page load and, like Josiah, i wonder if this will be a private distro.

The features aspect has me thinking that the Drupal Community and Drupal.org will now need the ability to upload/download/share features just as we can now upload/download/share modules and themes. Perhaps some kind of configuration module, or a *.conf, or a *.feature.

Nice work. Just want to

Nice work. Just want to echo Josiah's question regarding your business plans. Will you make all the code available under GPL? Will anyone be able to set up a one-stop website creation shop? While this may not be what the VCs want to hear, in my opinion this is a) inevitable (via buzzr, the community at large, or some other entity) and b) will benefit all, including your business, more than a private venture would.

Some already is...

Modules like SimpleViews, FormBuilder, CSS API, and others (like the Views Attach module) have already hit Drupal's CVS repository. Other code will go there eventually, but the delays have less to do with VC than re-usability.

The code used to roll out custom sites, for example, is very very closely tied to the current testing infrastructure and is unusable outside that relatively specific setup. We've been looking into leveraging of the Ægir tools, as we'd like to avoid reinventing the wheel, but time will tell.

Kudos!

This is a very good example of the type of thinking that developers have avoided and that designers and administrators need. Drupal is very back-end oriented and that is it's greatest strength. While not losing any of that layer, you've captured many of the issues that the end user has to struggle with after the development is done.

Keep up the good work and for the bravery to unveil something at the right time even if it's still a work in progress and even if you were looking for VC for it. Lullabots rule.

Hehe

Very, very impressive.
To be a bit heretic: Now that Mark and Leisa have started working on the same thing, the tadaa effect of this would have been hampered if you came out with it in three months.

So wise decision to do it now...

It is so great to really _see_ it, helps to believe it can acutally be done. Lullabot rulez. :)

holy crap!

Finish and sell this! Right now, I'll buy it and finally leave ning.com!

Autonomy/Interwoven

could be feeling a little bit of pressure right now...
http://www.interwoven.com/components/pagenext.jsp?topic=PRODUCT::TEAMSIT...
(see SitePublisher datasheet)

Amazing work!

Very exciting

Ah this demo makes me happy in so many ways.
I was most impressed with the CSSAPI functionality (but only because I had already seen SimpleViews and FormBuilder).
The drag-and-drop blocks are just a joy to behold. It is so obviously the right thing, but I haven't seen it anywhere else yet.
And it is great to see Popups API getting a good work out (and big thanks for the secret project codename code drop that turned into one of the major features of PopupAPI 2.x). BTW, that is one sexy popup style you have there. Any chance you'd be up for contributing it as a lullabot 2.x popup skin?
I hope this demo give the money tree a solid shake for you.

What Demo?

uh...why can't I see the freaking video? Is it no longer available?

Link

If you're having trouble playing the embedded version, here's a link to the Blip.tv page:

http://blip.tv/file/1988015

Congratulations - this is

Congratulations - this is excellent work and good directions for Drupal. Congrats to the Lullabots!

exellent

That's what I'm calling pushing forward functionality

It's very original

The concepts are very original and the result is very cool. The UI is really more friendly (you have a feeling of less settings to 'touch' to customize drupal and it definitely don't look like drupal :)).

Keep on guys, you are doing great as usual :)

Website creators

Reminds me a lot of something like Weebly or Synthasite, curious which of these services do you think is a best practice to model after?

Heya Matt! Do you mean best

Heya Matt! Do you mean best practice from a business model perspective?

Business model is interesting, but

I guess looking at the business model would be interesting (generic website creators haven't had breakout success since the Geocities/Angelfire days) but I was more curious from an interface point of view. Squarespace also has an interesting approach to this problem, but no open source tools are tackling it that I know of.

Best Practice Modeling

There's really no "best practice," only the right practice for the right audience. Weebly and Yola (formerly Synthasite) -- and many others in this space -- focus on dead simple website building tools. I wouldn't say we're modeling after any of those as a "best practice." We are focused on a different type of user, and our goal is to bring some of the more powerful and complex features of Drupal to a wider audience.

damn ... this is so cool. i

damn ... this is so cool. i was mentioning some of the issues i was busy trying to address in the blog post http://espresso-online.info/site/node/114. you seem to have covered the issues and then some. this is really exciting, drupal is beginning to become appealing to normal people and is not just something used by programmers surrounded by pizza boxes and empty beer bottles.

great job guys. sorry to ask this but is this going to be a paid service or will you release it to the community? i hope the kind of functions that u showed us are going to go into drupal 7 soon :)

Tears

I am the visual designer working with karen mcgrane on this interface design — and I have to say, that Lullabot team is brilliant and has integrated this beautifully, and beyond what we've dreamed. It's so great to see things coming together and Buzzr is getting buzz! Let's finish this thing!

Looks not bad, I would not

Looks not bad, I would not trust Lullabot's JavaScript though haha.. pretty weak

terrific

Well, this is a masterpiece, that won't easily be topped. Just like Drupal builds upon Apache/PHP, Buzzr builds upon Drupal. It takes unusual vision and talent to execute a leap like this. And buckets of hard work. Thanks for taking drupal and content management to the next level.

Buzzr and D6/D7 shift

Any thoughts on how Buzzr and the future D6/D7 shift might impact one another? e.g. Are you building Buzzr with an implicit long term commitment to the D6 code base?

WOW ..Wow

Love that love that....Love Lullabot..:) you guys are great. I like everything and the most important part i like is CSS part. Being a CSS guy i always think to have a flexibility of editing the CSS from admin area rather than going to files. At some point I thought to build a module also for that...but because of my studies load i was not able to give it time....But you did it....thanks a lot...

Chetan

Awesome. Photoshop for web

Awesome. Photoshop for web sites.

this is gonna be one killer app

can't wait to see it finally in action!

your lack of further comments and chiming in to the d7 developments however make me thinking - either you are so busy in pushing a beta out or you are trying not to give anything away as you are intending to keep it proprietary.

there's so many questions in this thread, would be great if you'd embrace the momentum of d7ux!

Thanks for the demo! I love

Thanks for the demo! I love the direction you are heading. I know site admins will appreciate value this theme (or module?).

What other modules are required to make buzzr functional?

great work. really like the admin UI

Hi guys,

Just to echo what the other guys are saying on here. demo looks great and I really like the admin user interface you have put together.

looking forward to the beta,

Dub

Very nice indeed

This is incredibly impressive work. Definitely like the clear distinction between the admin menu and the live site (although I think the status messages still feel out of place mixed in with the content). The popups work great for changing attributes of blocks but I'm not convinced about them when adding new content. Finally I LOVE the help text that you added underneath the fields on the initial set up page. Telling users that they are not locked in to the data they entered is a great step forward.

Very nice indeed

This is incredibly impressive work. Definitely like the clear distinction between the admin menu and the live site (although I think the status messages still feel out of place mixed in with the content). The popups work great for changing attributes of blocks but I'm not convinced about them when adding new content. Finally I LOVE the help text that you added underneath the fields on the initial set up page. Telling users that they are not locked in to the data they entered is a great step forward.

very cool

I really appreciate that you guys are willing to do a little show-and-tell. The popups Module will definitely change the way people build drupal sites...

Awesome, I'm allready having

Awesome, I'm allready having wet dreams :D

Drop Menu

Love the work you've done, this will be very awesome. Quick question is that admin menu one you guys created or can I get it some where? I noticed the icon and name drop but goggling drop menu wasn't very helpful :)

Site name and slogan

Who uses site name and slogan? This needs to be changed to easily allow an upload of a logo. (and for that matter, easily split a block to include a logo and an ad).

article translate

Hi Chris, I would want to translate this module to the Russian language. Please tell me your email, simply reply to my mail. Regards, Marcis Gasuns.