Archives

Category: designing together

Maarten Verbaarschot volunteered to take on a Microproject (thanks Maarten!) and for the past few weeks he has been working on interface design for a Media Library for Drupal. There is a great discussion going on in the Drupal.org issue queue that you might want to take a look at.

Maarten is currently working on the third iteration of these wireframes but he’d really love it if you can take a look and give him some feedback – anyone who has ever added an image to a web page should be able to have a say on this interface, so don’t hold back! 🙂

In particular, Maarten is looking for some user stories where users would be uploading content using this Media Library interface rather than uploading whilst in the process of creating a ‘node’ (story, article, post etc.). I know I have a couple but if you do also perhaps you can share them in the comments below or on the issue queue thread (if you’re a member of Drupal.org or would like to be!)

He is also working on an interactive prototype for this, and would love a little help from someone with good JavaScript skills so if you’re so inclined, please comment below.

Recently we issued a call to UX (User Experience) people who wanted to have a try at participating in a small open source project, or a Microproject (as we’re calling them). We were overwhelmed with volunteers and are now, happily, in the process of pairing them with a bunch of projects that have been suggested by a whole range of people within the Drupal community.

To kick there projects off I’m creating a home for them over in the Issue Queue on Drupal.org, but I’ll create an index of them for you here so you can dip in and out as you please 🙂

Please also feel free to leave any general feedback about the overall Microproject concept/framework as a comment to this post.

Thank you to everyone who participated in the Summit on Sunday – there were several dozen people in attendance and it was a very productive session.

A transcript of proceedings can be downloaded here PDF (note: it’s about 150 pages of Skype chat, so only do this if you’re feeling brave/bored/exceptionally curious). We also tried to keep a document of record showing our agenda, some outputs and an incomplete list of participants, which you can see here. It is not entirely comprehensive and should be considered a working document only.

The discussion around the overall outcome for Structure continues and we will post an update soon.

The essential informationOur mission: to come to an agreement on whether the Site Building Tool should be included in D7 and if so, how we can best make it work for both the Drupal technical architecture and existing Drupal users AND for it’s primary target audience.

Add your name to the comments below so we can add you to shared Google documents (use your proper email address in the comment form so you can receive access notifications)

Be online at 16:00 GMT on Sunday 7 June (what time is this where you are? and with profound apologies to our Australian and NZ friends for such an unsociable time)

Spread the word! We want all kinds of people involved from Drupaller to People Who Should Use Drupal But Can’t, from developers to designers to shop owners and site administrators.

Our Moderator
I’m really excited to report that Ivanka Majic, Head of Design at Canonical, will be moderating our Summit on Sunday. Ivanka has a great appreciation for the challenges of designing for open source projects and a vested interested in D7UX being a good user experience, because the Canonical site is running on Drupal! She’s also a great moderator and I’m confident she’ll help us to ensure that we get to some firm and actionable outcomes on Sunday. Thanks Ivanka!

Homework
If you have the chance beforehand it would be great if you can check out the two most recent ‘prototype’ walkthroughs that we’ve posted (video see below), as well as the Project Framework Page for Structure.

A little background. If you’ve been playing along at home you have no doubt come across the Site Building Tool that we have proposed to live in the Structure section of the D7UX interface. We believe that the design and implementation of this tool can make the most significant difference in making it possible for non-technical users to make a reasonably sophisticated site using Drupal within a matter of hours, not the weeks or months that it often requires of new players at the moment.

The more time I spend talking to people who *should* be able to use Drupal but who can’t, and people who have had brief experiences with Drupal then ran away screaming in either frustration of fear, the more convinced I am of this. As recently as yesterday I took our latest prototype out to show some people, and despite the fact that it is still very rough and confusing, it’s potential was obvious.

We’ve been talking about this tool since early April – time is passing rapidly and if we want to make this happen we need to get on board with the concept and start working out how we can make it work. We need to do this as a matter of urgency. Our current channels are not moving us forward quickly enough, so I’m going to propose that we try something a little different.

Structure Summit Sunday

The absolute best way to get to the bottom of these complex issues is to get everyone in a room to thrash it out. Of course, we can’t all get in the same physical space together, so let’s try the next best thing and all meet this Sunday with the express purpose of coming to an agreement on what this tool can be and how we can make it happen.

I want to walk away from this session on Sunday with a clear vision for the tool and a feeling that the people who participated share this vision and our enthusiasm for the challenge ahead. (Of course, the flip side is that we decide that we can’t do it… which would be unfortunate, but I guess we have to consider it as an outcome).

I considered a bunch of ways to approach this, originally thinking that we’d do it in IRC, but with some more thought I’ve decided to create a public Skype chat that we can all join. This is a less intimidating environment for non-techy, non-Drupally people (and I’d really like to have a good mix of all of us in the discussion).

chances are you’re more likely to be in the target audience for this tool – your insight will be incredibly helpful in helping us get this right. (Especially if you can identify with the Jeremy character sketched out here)

you will be the people who will be able to keep us focused on the right user experience, so that we don’t get caught up in How Drupal Works and What Can Be Done

you can be instrumental in making Drupal an Awesome User Experience – this means putting some pretty powerful tools in the hands of people who can do amazing things with them.

you will win mine and Mark’s undying gratitude by helping us solve a really tricky design problem that will make a big difference.

Designing a big system like Drupal is no easy task, we all know that. Part of what is not easy about it is that you have to design both little chunks and also big stories. Getting these to come together in a coherent way is not easy to design but even more difficult to communicate.

We know that there are people out there who are worried about how the D7UX design will work. We’d also really appreciate it being put to the test. So, here’s a forum where we can do that.

If you have a concern about how D7UX will work, post it here. In order for us to be able to respond to it, you need to make it as specific as possible. The best way to do this is to tell it as a bit of a user story (and try to use as little Drupal speak as possible so we can all play along).

For example, your concern may be that there is no place in the Information Architecture for the people who have signed up to an event to be managed. Your user story would be something like: If I create an event and then I want to see the list of all the people who have registered, how would I do that?

Please feel free to post ANY concern you have here. We will endeavour to answer every single one of your concerns as best we can and as quickly as we can. That way we can *all* start feeling as though the design is robust, get a sense of how it will play out in a range of user scenarios, and we can identify and correct any weaknesses as required.

There’s been a lot of talk about Open Source Design & User Experience lately. Here is a great opportunity to dip your toe in Open Source Design, see what it’s like and work on a small but important project for the Drupal 7 User Experience Project (D7UX).

What is this?

An opportunity for UX people to work with Drupal developers to solve specific, finite and modular user interface issues. No previous experience or knowledge of Drupal is required.

A UX volunteer will be paired with module developer(s) to work on the interface and UX aspects of a module, create wireframes that capture UX recommendations which may then be implemented by the developer(s).

A Drupal UX Mentor will provide guidance and support as required. We’re estimating that each microproject will require no more than 12 hours of a UX Volunteer’s time and those hours can be spread, flexibly, over a 3 week period.

Why are we doing this?

to give UX professionals an opportunity to ‘try out’ designing in an Open Source Community (and hopefully love it so much they stay!)

to give developers the opportunity and framework to engage with designers/UX professionals to maximise the usability of their module

to get feedback and insight into how we can help designers and developers to engage in a much more holistic way on an ongoing basis

to spread the UX workload and maximise the improvements available for inclusion in D7

to help make Drupal 7 an amazing user experience!

How will it work?

This is a brand new and somewhat experimental initiative so your involvement will be instrumental in shaping the way the process works, but this is what we have in mind:

10 June – 1 July 09 – Engagement
A three week period will be assigned for the participants to work together to improve the UX of their assigned module.The work involves
o Developers briefing the UX people on how the module works and anything they need to know about how Drupal works
o UX people creating wireframes or prototypes (your call!)
o UX people and developers collaborate to finetune the user interface and perhaps do a little guerilla usability testing (if possible/appropriate).

1 – 8 July 09 – Evaluation
Each participant will be asked to submit a brief evaluation of their experience (what was good, what was challenging, how they’d do things differently next time, how things could be better) so that we can learn more about how to foster the engagement between Designers/UX people and Module Developers throughout the open source development lifecycle.

What kind of projects?

We would love to sign up around half a dozen microprojects. Here are some examples of projects we think would be perfect as a microproject:

design a great WYSIWIG Editor interface for Drupal 7

design the interface for a great media library for Drupal 7

design some great dashboard widgets for Drupal 7

There will be opportunities to get involved in more complex UI projects for D7UX and we’re working closely with the Drupal Usability team to define and collaborate on these.

Get involved!

Want to get involved? Yay! We’d love to have you aboard!

If you’re a UX person who’s interested in participating, leave a note in the comments below (and use your real email address in the comment form so we can contact you!)

If you’re a Drupal developer and you’d like some UX love for your module, add a link to your module project page or even the specific issue if there is one and give a quick summary of what the module does and what the main user interface challenges are.

If you’ve got some ideas for what needs UX attention (task ideas) even if you’re not a designer or developer – feel free to post your suggestions in the comments below

We’re really looking forward to working with you all on these projects and seeing what we can achieve in the coming weeks!

ps. want to find out more about how you can get involved in the Drupal Usability Community? Come say hello here and see what we’re up to!

As we start to get some outputs that are getting higher and higher in fidelity (that is, more like what they’ll be when they’re done), it becomes easier and easier for more people to take a look and give their feedback. This is great, but it’s also a challenge. Why so? Well, because, D7UX isn’t for everyone – and if it’s not for you, then in order to give feedback we can work with you need to be able to put yourselves in the shoes of someone it *is* meant for, or better still – find one of these people and try it out on them.

A well designed interface doesn’t work for everyone all the time, that’s just an impossible dream. It should work for it’s defined target audience most of the time though, and that’s what we’re aiming for.

So, who is D7UX designed for?

There are two main audiences that we’ve had in mind as we’ve designed this interface for D7.

Our ‘Clients’, the Content Creators – the first group we’ve broadly named ‘our clients’ because for many of the community who make sites with Drupal, these sites are then turned over to another person or group of people who use Drupal to add and maintain content on the website.Often these people share the following characteristics:
– They’re not developers. They don’t know much about code and how it works,
– They’re not in the Drupal community, they don’t love Drupal as much as we do, they don’t speak Drupal-ese,
– Updating the website is probably just one of many jobs they have to do,
– They’ve probably used other Web Content Management Tools than Drupal in the past.

These people tend to have a small number of tasks they need to do on the website, and those tasks tend to be repetitive.
The best thing we can do for these people is to make those tasks as simple, question free, and error free as possible.

Non-technical Site Builders – these guys are a whole other kettle of fish. They have a more advanced understanding of what technology can do and how code works, but they’re not developers. They are, however, considered technology or web experts in their field, which may be something like academia, or ‘social software’ or they may just be the person at their tennis club or church who ‘understands the web’. People expect them to be able to build fairly sophisticated websites and they’d rather like to be able to do it themselves too, except without the technical skills, it can be hard. You’ll probably find a bunch of these people currently using Ning.Often these people share the following characteristics:
– They’re not developers but they do understand quite a bit about how code works and may be able to write and understand a little code themselves
– They find themselves needing to create websites (often for others) that have fairly sophisticated requirements, including forms, community tools, online stores, and content publishing using a range of page templates.
– They have experience with a range of online content publishing tools.
– They have probably heard of Drupal but had little experience with it before and certainly don’t speak Drupal-ese

If you know anyone who fits one of these two descriptions then these people will be idea test candidates for the D7UX interfaces as they emerge. If you don’t then here are a couple of very sketchy ‘personas’ you should consider when evaluating the usability of D7UX.

Verity (our client, the content creator)

Verity is a part time administration assistant for a cancer support charity. She is working part time while she completes her Social Care Diploma. Before she left work to study, Verity was a Personal Assistant in the Finance Sector. Verity is in her late twenties. She is quite proficient with the MS Office Suite (Word, Excel etc.), and she uses Facebook and email but she doesn’t consider herself very good with technology.

One of many tasks Verity has to complete each week is to update the ‘news’ section of the website and any other small content updates that are given to her to make by more senior staff. She doesn’t mind this job but she is often interrupted by the phone and other staff while she is updating the website, which can make it tricky for her to remember where she is up to in the process. If she has any trouble with the website updating there is an IT consultant Verity can call, but she likes to avoid doing this unless something is very broken as the consultant is both very busy and expensive!

What Verity Wants: to be able to complete her website updates quickly, without getting confused, and feeling confident that she’s knows where she is and what she’s doing at all times.

Jeremy (non-technical site builder)

Jeremy is a social software consultant (no, he doesn’t like that job title either). He works with medium to large organisations to help them understand how social tools could help their businesses be more successful and he recommends tools that they should use and how they should be implemented.

Jeremy is often frustrated because it is difficult to customise existing tools to suit his clients. Also, he often has to use tools from many different places to put together the solution they require. He would love to have the ability to ‘build’ a site that would meet his client’s requirements, however his technical skills are not great – for example, he can edit some PHP code to get it to do what he wants, sometimes, but he can’t write much from scratch. He understands what CSS is and what it can do, but he’s never written much himself.

Jeremy has friends who are developers and professional designers and he can call on them for some assistance. He heard of Drupal a few years ago at a social networking event and tried downloading and installing it but didn’t get very far and his general reaction to Drupal now is ‘it’s scary’.

What Jeremy Wants: the ability to build sites with rich functionality and flexibility without have to write code.

Note: these are not formal personas, they are just quick ‘sketches’ drawn from the research we’ve done to date (since August 08) that we hope will assist you to evaluate D7UX interface design.

What about the developers?

Good question. We do care very much about the Developer Experience (DX) but we also know that many developers are perfectly happy with Drupal the way that is is (as long as they have the Admin menu installed) and that they, of all people, know that essentially all Mark & I are doing is ‘theming’ the admin and that they can override this with ease. We’re not doing anything to The Way Drupal Works that will inhibit their ability to do all the amazing things they do now, and more in the future. Having said that, we hope that they are pleasantly surprised by the interface and might even consider keeping it. Or, perhaps, at least part of it. And in particular, we hope this buys them more time to do what they’re great at – development work – rather than spending that time training and supporting people who know (and need to know) Drupal less well.

We are really excited to share with you our initial concepts for a D7. Please take a look at the video above and there are LOTS of sketches and paper prototypes that you can explore over on the Flickr group as well.

In this video you’ll see the three key aspects of the D7UX interaction model we are proposing:

the ‘header’ which will be displayed to users who are logged into the site, comprising of a ‘global’ header allowing access to all functionality (permissions allowing), and a customisable/role based set of buttons allowing fast access to the most frequently used tasks (eg. add/edit) or views (eg. find content).the example shown in the video would be for a ‘content creator’ type role. We haven’t completely thought through the application of this header down to the level of ‘site member’ (eg. someone who adds discussions to the forum on the site you’ve built using Drupal), but we think as a concept it has legs.

the ‘overlay window’, the example of which shown is ‘add content’ (in a very sketchy and unfinished state, I hasten to add!). We see the overlay as a fantastic way to provide a clean interface for these tasks whilst keeping the user in the context of the site for which they are performing those tasks, rather than taking them away into an ‘admin section’. Obviously we would need to allow for users who are not using JavaScript (in which case they probably would have to go into more of an ‘admin section’).

the ‘in line editing’ which will allow you to ‘switch on’ edit mode and edit content in place (wouldn’t that be lovely!). Of course, not all content would be editable on the page so the edit view would also allow for a range of ‘editors’ to be launched into an overlay window. We’re imagining: block editors, content type editors, navigation editors, views editors as a start (some of these terms will probably only make sense to Drupallers – apologies for that, will try to translate in future versions)

In the video we also show another idea that we are quite excited about, although we have a long way to go before it is entirely thought through … we’re not entirely sure that it will work, but the problems we are facing with it seem to be getting easier not more difficult, which is a good sign… You could think of this as a Direct Manipulation Tool for Site and Page Structuring. It’s been inspired by some of the tools that we’ve used in the past to do Information Architecture work (hence the use of that word in the initial header that is currently being CrowdTested, yes, it will most likely change!).

The idea behind this tool is that we are able to make site building and page creation a much easier task for people who don’t know and don’t want to know the ins and outs of Drupal’s technical architecture. We’re really excited by the potential this has for achieving our objective of allowing users who are not developers to build complex sites using Drupal… would love to hear what you think of it, and stay tuned for much more work on this component.

We’re looking forward to pushing some of this out for more Crowd Testing very soon. I’d really encourage you, if you’re concerned about what people will make of this, to get involved in the user research – go put it in front of people and find out for real what people do and what’s usable or not. I’ll post another set of materials and scripts for CrowdSourcedUsabilityTesting very soon!

Ok. So, there you have it.

We’ll just wait here, nervously and excited, whilst you have a look…. then, please, tell us how you like it so far!

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:

pick *something* or *somewhere* in Drupal admin that you think is particularly in need of love

get out your pen, pencil, visio, powerpoint, whatever works best for you (I’d encourage you to consider pencil!)

sketch out how you think it *should* work.

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.

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!