Drupal.org redesign – why is it so? Some insights into our design strategies.

Drupal Redesign V10

Over the past few days I’ve been posting a lot in the Drupal Groups at Drupal.org about the rationale for some of the design decisions we have taken on the Drupal.org redesign. I thought you might find them interesting, so I’ll copy them over here as well.

In particular we’re talking about why the header is so big, the global navigation is so small, search is so prominent, the ‘dashboard’ tabs are more prominent than the global header and why there is no ‘download now’ link on the homepage.

I can’t guarantee that the rationale is entirely holeproof, however it has definitely been based on paying close attention to what a broad range of people want to do on Drupal.org, making some decisions around how to best prioritise these needs, designing to suit these prioritised needs and then testing to check that the new design does actually support key user tasks.

There is one fatal flaw in this version of the redesign and that is that we accidentally left off the big ‘Get Started’ call to action from the homepage… d’uh! (Definitely one of the downsides of designing at speed to fit into weekly iterations is that these kinds of oversights can happen – thankfully the Drupal community let us know about it quick smart!)

You can see the interactive prototype here and the historical archive of the past 10 iterations here.

This is directly copied from my forum posts so hopefully make sense in this context… be warned… it’s long!

Post One: Get Started and the Download Button

evaluating a website design is a really difficult task, as the discussion here and elsewhere demonstrates. It is tremendously difficult to see the design from perspectives other than your own and to get some kind of distance from the content. It is also really hard to judge how well a design works from just looking at it and meandering through it – it can really only be properly judged ‘in action’ – does it actually let people achieve the tasks they need to achieve. Does it make easy things easy? Does it make difficult things achievable? Does it support the objectives we have for Drupal as an organisation? for Drupal end users? and on and on. This is why we’re trying to get the design out in as many ways as possible to see how it’s doing – both online and in person, amongst ‘insiders’, ‘outsiders’ and another groups we’ve recently started calling ‘mid-siders’.

Disclaimers aside, there are a few things that might help move the conversation forward, hopefully! I’m going to tackle the first one here and some others in posts to follow shortly.

Get Started and the Download Button

you are dead right, the strong call to action for Get Started from the homepage has disappeared and this was an oversight on our part. Expect to see this re-instated on the next iteration and thank you for making us aware of it. We have been focussing a lot more on other ‘internal’ pages and just made a few small changes to the homepage this iteration which resulted in this dropping off. Our bad.

If you’ve been following the redesign you’ll probably have noticed that we actually started with an enormous ‘Download’ button, which then evolved into an enormous ‘Get Started’ button which then evolved into more of a ‘Why Choose Drupal’ section. As Mark said, this is a part of a deliberate strategy on our part to ‘bury’ the download button a little – what we are trying to do is to make sure that they actually know what they are getting into when they ‘download’ Drupal, and to ‘scaffold’ that experience a little.

We want them not to expect it to be completely easy to set up a website using Drupal (not to apply mental models of the hosted blogging services, for example, which seem to be quite strong in people’s minds), and we want them to know that there is both a strong and supportive opensource community and commercial ecosystem that can help them along the learning curve if they need it. And, I’m sure you know this already – a lot of people who are interested in Drupal will need that support. For many people who are evaluating Drupal as a solution, particularly within larger organisations, the last thing they should be doing is downloading Drupal.

So, the people we are primarily designing the homepage for are people who are coming to Drupal.org to consider it as a solution for whatever their requirements are, and who are not particularly experienced developers, or possibly not even particularly experienced with Content Management Systems/Platforms/Frameworks etc. This means that people who do have this experience, who do understand the existing Drupal vocabulary, who do want to evaluate the platform by downloading it and taking a look – these people are going to have to work a little harder to get to what they want and they will have to put up with some fluffy language (like the Legos, although I think the Lego reference is being deleted as I write this… which I think is a bit of a shame actually). But the thing is that this audience is capable of doing that little extra work, and they are also more likely to easily recognise what is so great about Drupal.

So, to summarise,

  • we are deliberately making the download link a little more difficult to find so as to better support the experience of newcomers to Drupal who do not have the ability or time to evaluate the product by downloading it, however;
  • the current iteration is missing a strong call to action to ‘Get Started’. This was a (bad!) oversight on our part and we’ll make sure it gets back in there in the next iteration.

I hope this helps make things a little more understandable. Do let me know if you have any questions that I can answer regarding this. I’m going to post some notes re: the size of the header and the placement/relative size of the global navigation next. If there are other issues you’d like me to address specifically, then let me know.

Post Two: That header is so big and it’s all about search? What the?!

First up, I’d like to acknowledge that yes, that is one big old header. It is bigger than your average header and designing a header that size does mean that you’re going to fit less ‘above the fold’. This may seem like an unusual strategy, but it’s certainly not unique, nor does it imply bad design or usability IF it is being done to support a strong strategic objective.

Hopefully you won’t be surprised to hear that we do have some strategic objectives in having such a big-ass header!

Again, if you have been following the redesign process, you’ll have noticed that the big-ass header is actually a relatively recent introduction to the homepage design, coming as late as iteration 7. Here is the last version before it: http://drupal.markboultondesign.com/visual/iteration6/homepage_notlogged…

1. approachability

Use of white space (or in this case, blue space) is very important to design, as I’m sure you know. Allowing breathing space around elements helps you to more easily review the content on the screen and for the designer to guide your eye from element to element. Mark is much more the expert on this tho, (In face, he’s written a bunch about it that is not directly relevant to this conversation but you might find interesting here: http://alistapart.com/articles/whitespace/ )

When I’ve been observing people using this ‘big ass header’ design, the response has been overwhelmingly positive. People say that it feels calm and approachable and easy. People have compared it to a horizon line. It does seem to create a positive effect. This is great because we are trying to ensure that people aren’t overwhelmed by Drupal, and that they feel positive in their ability to understand and engage with it. Everything that I’ve observed to date has demonstrated that the big-ass header is very helpful in achieving this end.

I can’t overstate how intimidating Drupal can be to novice users, although it may strike you as ridiculous. Alleviating this intimidation without getting in the way of active Drupal users is one of the big challenges for this project and the size of the header is a big part of that.

2. focus on search

As you’ve picked up, one of the reasons that the header is so large is because the search element is so large. As with the header, this is somewhat unconventional, but we’ve done this to support the way that people want to use the Drupal.org website.

I’m going to do a separate post about the size/placement etc. of the global navigation and the rationale for that, but suffice to say that for the majority of users, and especially for regular users of the site, Drupal.org is not a ‘browsing’ site- it is predominently a searching site, and secondarily a place to monitor and engage with activity and conversations.

This makes perfect sense, though, when you think about what people actually come to the site to do.

This is a big part of how we conduct our research. A lot of it is talking, asking people about what tasks they need to do on d.o, watching how they currently perform those tasks (much use of Google, as you’d imagine!), getting them to perform those tasks on the new design.

Invariably, for regular users of Drupal, search was the way that people wanted to get to their content. Many people would just just Google search, when compelled to use our redesigned site, they’d go straight to search. I can’t tell you how many times I’ve had to ask people ‘if you had to use the navigation, which link would you choose?’ when asking them to perform a task. This was true back when the global navigation was much more extensive and prominent, and it remains true today.

It was in response to the strong demand for search that we re-made the header to be so big and search focused.

We did some A/B testing between the more conventional navigation approach and the search-centric approach and the search-centric approach was more successful.

If you’re not convinced I’d encourage you (as I have encouraged the community throughout the project) to do your own research – get people who are regular d.o users to define the tasks they do on d.o and have them ‘do’ the tasks using each of the designs – and see what you find. I’d be really interested to hear the results.

Finally, the size of the search element is a show of faith in the ability of the d.o search to ‘do the job’ in finding the information. Generally speaking, search on sites is rubbish and a conventional positioning carries this expectation of rubbish-ness.

The bold positioning of the search element here says – search is the right option for finding what you’re looking for. Give it a try. (And yes, we have been assured that much work will be done on the search functionality for Drupal.org so that it does deliver on this promise).

3. search ‘furniture’

Some other feedback we’ve received is about the ‘stuff’ that’s around the search field and that it takes up space/wouldn’t be used etc.
I agree that the vast majority of people won’t refine their search on the homepage, nor will they use the ‘most popular’ searches… although these are able to be used, their primary purpose is to give information about the search capabilities of the site and to help people use the search properly.

By showing the ‘filter’ options, what we are telling people (more or less subconsiously) is the types of content that will be shown in the search results and that you are able to filter out types of content. We’re exposing the range of content on the site and providing a hint that the search will be more fully functioned than a typical ‘sitewide search’, and certainly than the current d.o website. (and yes, significantly improved search functionality is on the menu for the implementation of the redesign!)

By showing the ‘popular’ searches what we’re doing is alleviating ‘blank page syndrome’ – what do I search for? They are tiny prompts that are intended to help people formulate a search query, and especially if they are relatively new to Drupal, help to expose what others are looking at.

I could quite happily live without ‘popular’ searches, or replace it with something else, but the ‘filter’ options play an important role and should not be removed. In fact, we intend to add ‘API’ to the list of filters in the next release.

search results

A big part of this strategy is a much improved search results page. We’ve only shown hints of this so far in releases, but the next iteration will hopefully show the enhanced faceted navigation within search results to make it a really powerful and useful tool for locating information on the site.

not everyone searches!

There is an important audience who do NOT search, and they are our newer, less technical/experienced audience. They are the least likely to use the search element, and for that reason, the majority of the ‘index’ or ‘landing’ pages are designed specifically for their needs. Starting with the homepage and through all of the ‘section’ landing pages.

OK. That’s a bit of an overview of the rationale and reasoning.

Post Three: Teeny, (Relatively) Tiny Header

ok. This is the last in my series of three monster posts trying to throw some light on why things are as they are in the Drupal.org redesign.

Before you read this, make sure you’ve read the previous monster post on the big header and search, it’s related.

Several people, on this forum and others, have made note of the fact that global navigation on the current design is relatively understated and certainly not one of the most prominent elements of the design. Absolutely true and, for what it’s worth, entirely intentional.

Why so? Well, a number of reasons.

First and foremost, when we considered what the most important and most frequent user journeys on d.o would be, accessing the landing page for a site ‘section’ was very low on the list. Finding out about Drupal, getting access to specific information, monitoring issues and continuing conversations – these were much more important. None of these important user journeys require global navigation.

For ‘new’ users (outsiders) , we consider the movement from Home to About/Why Choose Drupal and/or Get Started the most important user journey. (granted you can’t tell this from the missing links to these on the current iteration homepage – our bad, and an accidental omission as discussed elsewhere)

for ‘existing’ users (insiders) the primary user journeys are to specific content via search/search results and to monitor content/issues/discussions/news etc. which is done via the dashboard.

Hence the emphasis on the search element and the dashboard element (which for existing users will generally replace the generic homepage and will be highly customisable and focussed on monitoring content of personal interest). And hence the demotion of the generic ‘global’ navigation.

We also know that you guys, once you get involved with Drupal, don’t tend to use the global navigation yourself. You use bookmarks, you use the URL (eg. groups.drupal.org etc.) using the browsers memory – both of these are more efficient than going to the homepage and navigating through a hierarchical navigation structure.

Yes, it does seem like a somewhat unorthodox approach, and contradictory to ‘good usability’, but that’s not necessarily the case either.

There is a lot of evidence that shows that people would really rather NOT use global navigation if they can avoid it. People much prefer to use contextual (in content) links for navigation and local (relevant to that section) navigation to get to where they want to go. Global navigation is usually used only as a last resort (or if someone forces you to use it in a usability test!)

Again, if in doubt I encourage you to conduct your own research. Get people to define a few tasks that they would ‘do’ on d.o then put them in front of this prototype and ask them to do the tasks here, and watch them. very few people will go to the global navigation as their first port of call. In my experience, if they are doing that, it’s because there is important information and links missing from the central content area.

A few authors more eminent than me have written on exactly this behaviour. If you have a moment, take a look and see what their experience has been with global navigation vs. local/contextual navigation and search.

http://www.useit.com/alertbox/20000109.html

http://blogoscoped.com/archive/2004_05_25_index.html

http://www.guuui.com/issues/01_05.php

http://www.uie.com/brainsparks/2005/10/19/global-navigation-not-worthwhile/

hope this makes sense and, as ever, awaiting your feedback.

19 Responses to “Drupal.org redesign – why is it so? Some insights into our design strategies.”

  1. steve December 4, 2008 at 8:33 pm #

    i don’t search either, but that’s only cause the search functionality on d.o sucks. hopefully we’ll get the search functionality working along with getting the interface better.

    good design + emphasis on search + bad search results = still sucky d.o :(

  2. alex December 4, 2008 at 9:08 pm #

    Thank you for taking the time to write all of this. I plead guilty to only following the iterations of drupal here in disambiguity, but I wanted to say that I found your explanation of the decisions you and Mark have made in terms of the “big-ass header” and the focus on search, very interesting and insightful. From my own dabbling with Drupal, I would agree that I abandoned the homepage very quickly as a landing page, and moved to inner page bookmarks and google searches to find answers.

    One suggestion, which I suspect has been mentioned elsewhere, would be to have in the homepage a link to some of the screencasts that have been made for Drupal (I used to refer to the ones at dudertown.com, but I see now that the domain has been released). I think they would be very useful to your target audience (‘outsiders’)/ new users.

    Just a thought.

  3. devinsandberg December 4, 2008 at 11:05 pm #

    Great work! I agree with your analysis of the situation–particularly the need to make search a priority. Like Steve said, I hope the search functionality catches up to the beautiful new presentation.

    As someone who already knows and loves Drupal, I was disappointed that the download link is so hidden. I agree with your reasoning, but I wonder if it could be just a bit easier to find for repeat downloaders like myself.

    What if the lists were rearranged for a better conceptual grouping? The download link is not in a list that I would expect to find it in. What if the modules and themes links were up by the download link and the security/api/issues links were in the section below? That way the link is no bigger, but it’s grouped so that it’s easier to find.

    Incidentally, I love the type you’ve made for the Drupal logo.

  4. Alex J December 5, 2008 at 12:03 am #

    Great post about the design process, it’s great to see that things are starting to really come together.

    Small suggestion: Maybe you’ve already tried this, but I’d like to see the top navigation box have rounded rather than square corners. The square corners are oddly “harsh” in this design and my eyes keep getting drawn to them involuntarily (and unpleasantly). Rounded corners would also add symmetry between the main navigation and the tab bar. Just a thought.

  5. Jacques (xmacinfo) December 5, 2008 at 12:18 am #

    Well, altough the design is nice, I don’t find what I’m usually looking for in the current drupal.org site.

    No one will want to bookmark the home page anymore.

    No one will be able to find updates to modules or to sort out for which Drupal versions modules are available.

    I hope the drupal.org administrator will be able to use the new design without removing the current drupal.org usability.

  6. dalin December 5, 2008 at 7:17 am #

    I haven’t looked at this since ~ it. 7. Things have come a long way. This iteration looks really top notch. I think you guys are doing a stellar job.

  7. Drupal Theme Garden December 5, 2008 at 12:20 pm #

    I think that visual design of drupal.org not too important. More important is usability.
    Design is important for newbies.

  8. cpugeniusmv December 5, 2008 at 3:21 pm #

    If you’re going to show popular searches, the items should link to their respective pages of results.

  9. alphex December 7, 2008 at 8:05 pm #

    By and large, I am very excited and happy with the design / UI / IA decisions that have been made.

    But I have to say on version 10, you’ve removed the nice big button for “download 6.x”…

    As someone who has not yet set up a fancy repository retrieval method yet, I still hit the drupal.org website for a fresh download when I need it.

    I think its important to keep a prominent link on the home page for downloading the latest version.

    Thanks.

  10. Setvik December 9, 2008 at 3:51 am #

    The latest iteration is looking great!

    One suggestion: for visitors who’s native tongue isn’t English, their 1st action would be to switch the site to their language and some may give up before finding the language selection at the bottom of the homepage.

    A header position for language selection may help those users

  11. mori December 11, 2008 at 12:44 am #

    removal of the download button is controversial, but considering the fact that experienced users remember urls they need anyway, I guess it’s okay.

    Problem with d.o.’s search is not only to do with the way it is designed, but also the server’s capacity. Either way I hope it will be sorted.

  12. Vizor January 11, 2009 at 11:08 am #

    Thanks, good post about the design process.

  13. Sean January 11, 2009 at 12:47 pm #

    I’ve said it for a while but I really feel the global navigation at the top of the page and the search box should have rounded corners, it feels so out of place due to the rounded corners on the search button and the dashboard navigation.

  14. antareja January 19, 2009 at 11:21 am #

    focusing in search is not a ‘green’ idea. think how much processor cycle & electricity could be saved if you put the download button in the front page.

  15. greenbirdmedia February 12, 2009 at 6:05 pm #

    Thank you for the tremendous work done in public no less. You are braver than me. In the top nav perhaps a more intuitive order: About / Get Started / Download & Extend / Documentation / Community & Support / Marketplace — as this is a natural usage flow from start to finish.

    I also have a logo design to contribute if anyone is interested as I am more designer than developer and not a useful person for adding code. Thanks again!

  16. Steven April 9, 2009 at 3:31 pm #

    Love it. Thanks for sharing your process and also communicating so well. Good luck. Keep up the great work.

  17. shunting April 9, 2009 at 10:19 pm #

    I’m sure this issue must have been beaten to death already, but allow me to say that “Build for Today. Create for Tomorrow” is the kind of market-droid-speak gives me the creeps. I’m not advocating a return to “Community Plumbing,” but if that and the new slogan were the only two options, I’d pick it.

    In addition, it’s factually false. I use Drupal in a content-creating persona, thousands of posts worth. I create content for today constantly — which the slogan implies that I do not do — and build for tomorrow constantly — on the theory of “If you build it, they will come.”

    A content management system with a slogan that implies that content creators aren’t creative “today”… Well, I’m not sure what that marketing droid would think of that.

  18. BG June 1, 2009 at 4:15 pm #

    Hi, I truly appreciate the work done on the d.o redesign. I also understand the rationale behind the missing download button. Though I do not agree completely: part of your rationale is “to make downloading more difficult” which seems quite odd especially when speaking about good UI/UX design.

    I would suggest to keep Download button on the front page (could be smaller though) and add important information on the download page itself to let people know this is not a product-in-a-box kind of thing. Having in mind a lot of traffic comes from search engines this seems like a better idea to me.

    Anyway, just my 2 cents.

Trackbacks/Pingbacks:

  1. A tour of the redesigned Drupal.org | Drupal - October 25, 2010

    [...] made it may be helpful to read the redesign user experience research lead Leisa Reichelt’s post Why is it so? Some insights into our design strategy. Here’s what’s new on [...]

odminblog.ru | обструктивный бронхит | лечение бронхита | Просто скачайте игры для девочек и получите удовольствие.