in planet drupal

Drupal.org redesign – Iteration 7, for your review!

homepage

Welcome to the latest iteration of the Drupal.org redesign project which you can find here:

http://drupal.markboultondesign.com/iteration7/

We’re both excited and nervous to show you this latest version because we’ve taken a bit of a deviation from our previous path as a result of both feedback from you and usability testing, and us not being quite satisfied with the work that had been done so far.

There were a couple of things that were really bugging us in the versions up to now.  In particular, the navigation in the header (there was so much of it and it looked kind of messy and confusing and in tests, we observed that people completely ignored it!). The Logged In version of the homepage was a good idea but the execution was coming up short as we learned that ‘hard core’ Drupallers thought it was a v valuable addition to the site but just about everyone else wasn’t interested… 

A behaviour which we have observed since the very early days on this project has the use of search – lots of people use search lots of the time, and a lot of the tasks that the site has to support are heavily search oriented (finding modules, finding help etc.). Drupal.org users have some of the most advanced Google skills I’ve ever observed! – and yet up until now, the redesign of the site didn’t really pay this much heed – it was still very much a hierarchical site made up of silos of content… forcing people to choose between this section or that to find the content they required. Another thing that we had largely ignored is the use of URLs as shortcuts to information (eg api.drupal.org to get direct to the api documentation site)

(Having said that, I am very pleased that the information architecture has actually performed well in task based testing - with a few exceptions like, say, ‘Professional Services’ which was too limited for the content it needed to hold and has now been changed to ‘Commercial Services’ (you like?))

So, as a result of these issues, we’ve made some fairly significant changes to the homepage and navigation structures, placing a much greater emphasis on the search behaviour from the homepage (and throughout the site), and significantly simplifying the ‘header’ navigation. Early participants in the crowdsourced wireframing exercise may also be pleased to see the inclusion of the ‘big ass footer’ (refer to some early posts on the Flickr group if you have no idea what this refers to!)

We did some initial usability testing showing a more ‘search’ based alternative earlier this week and it was quite well received – since then we’ve done quite a bit more work on it. 

There is one important thing that has been missed in this version (which hopefully Mark will be able to get sorted tomorrow!) which is that the search refinements (modules, themes, documentation and forum posts) will be links direct to a ‘landing page’ for those sections to better support a browsing interaction style).

The ‘logged in homepage’ has evolved to a ‘dashboard’ which we hope will be more useful to a broader audience whilst still supporting the needs of the ‘hard core drupaller’. The idea would be that you could set whether you see your dashboard or the standard homepage as the default when you visit the site.

There are a whole range of changes and updates and additions, I won’t go through all of them here, rather, dive in and take a look for yourself. I’d really encourage you, as you do so, to think not only about ‘how do I like the look of this‘ but also think ‘how do I use the Drupal.org website now (or how would I?), and how would I do what I want to do on *this* version of the site?’

I do want to give a little more feedback on what we’ve learned from usability testing which explains the high priority and size of the ‘case study’ on the homepage. With virtually everyone that I have interviewed so far, almost without fail one of the most valuable pieces of content (not including modules etc.) is the case study – this is true both for ‘outsiders’ who are evaluating Drupal, but also for ‘insiders’ who are on the learning curve – the case study is a great opportunity for us to challenge the perception of what a Drupal site looks like, to showcase some of the great companies and organisation who use Drupal, to explain more about how Drupal sites are built, what modules were used, the team that is involved, any challenges and learnings along the way – in short – they are really very productive and impressive for a large group of our audience. As I said to Mark recently – I cannot overstate how valuable case studies are to the people I have met and talked to about the Drupal.org website – hence their very prominent position on the site.

We still have a lot of work to do – in particular, I’m hoping that we can make some good progress in the ‘documentation’ section and the modules and themes pages. These are very important parts of the site and what you see there at the moment doesn’t reflect our current thinking on how it should work (which has been influenced and inspired by listening to the community talk about what they need and what they’d like to see!). The community landing page is still very much up for grabs (needs more thought and love and doesn’t really reflect our current thinking).

Please go in and take a look and let us know what you think – show your friends and tell us what they think, and consider getting involved in our crowdsourced usability testing if that takes your fancy. 

This week I’d really like to invite people to do some usability testing comparing the previous (iteration 6) homepage with this one to get some feedback on this new direction.

Please feel free to post any feedback here, or there is also a discussion over on groups.drupal.org if you’d like to join in over there. I look forward to talking with you about this some more!

24 Comments

  1. Great job! I LOVE the home page! You’ve done some great things since I last looked. I like the refined search on the top. That alone will be a time-saver for new users and experienced users alike! Keep up the good work!

  2. hi,
    i like the direction this is taking. but one point of caution from a “product” point of view . i fear that the search functionality that drupal.org provides (drupal’s own search function) does not live up to such a prominent positioning. i think i remember even some core developers recommend using google to search drupal.org as a remedy (robert douglass talk on the new solr search, i think …) – search is actually sometimes disabled under heavy load – so unless the search functionality is considerably improved, placing it as prominently as you suggest, could lead to some unhappy, unsatisfied users … just my 2c
    best,
    fredrik

  3. @andrew – thanks, glad you like it :)

    @ fredrik – indeed, a much improved search functionality and search results page is definitely a requirement for this search-prominent approach!

  4. it’s very very… very nice!

    two remarks, though:

    - what about internationalization? This has become one of Drupal killer features and we won’t use it in Drupal.org?

    - does search deserves this highlight? I think “Get started” does. Couldn’t “Get started” and “Search” switch places?

  5. I don’t know about the homepage. The blue header takes almost half of my viewscreen (on a 1084×768 resolution).

    Also, if I were totally new to Drupal, I wouldn’t know were to look, there is info in the header (“Change the web…), info in the row below (“Get started…”, “Develop”, “Our stories”) and a huge search box (“hey, I just got here, I have no idea what I should search for!”)

    IMHO the first thing people should see on the homepage is a clear explanation of what what Drupal is and what it is capable of.

    Also, I’m not to excited about the green “web 2.0″ buttons, but that is a personal taste :)

  6. I really like the way the search bar with radio buttons is placed in the header although I thought the whole block can be shrunk a bit.

    What impressed me the most was the ‘Get started’ section. By having the steps laid out horizontally with arrows and numbers, what’s involved in getting a Drupal site up and running is nicely visualised. The list of options below each step makes required information really findable for people who are getting started. Well done!

    content of ‘Get Involved’ and ‘Community & Support’ is very similar and I don’t really see the value in having them both. Maybe they can be merged into one? The former also seem a bit like ‘Get started’ page from the previous previous iteration (http://drupal.markboultondesign.com/visual/iteration6/getstarted.html) which looks a bit crude. I think the information on the page can be organised to show the options more clearly. Well done!

    By the way, is the Drupal logo in the prototype going to be the new official logo?

  7. Search is going to have to be dealt with no matter how featured it is – splitting modules/themes into a subdomain, search into a subdomain – these require robust cross-domain solutions for both search and authentication – and people have already volunteered to ensure this is in place when we actually implement the redesign.

  8. Oh Snap! Below are reactions and ideas as I went through the iteration 7.

    Homepage below the header looks less designed and I actually find it harder to see the case study.

    Homepage above the header? Sweet, sweet goodness.

    Get Started…? My grandmother could get started with this layout. EVERY STEP IS ABOVE THE FOLD. This is probably the most useful summary page I’ve seen on Drupal, ever. I wanted this page when I started and I couldn’t find it.

    Get involved needs some love. This should be a quick way to jump in and help. Why not something with a module spotlight, or a list of the 10 newest support forum posts with no replies? It should dare you not to get involved.

    Commercial Services. Can the “Showcases” include an avatar/real photo for the user and a logo for the company? Where’s the plug for Acquia?

    Choosing Drupal. I like the name of this section, and I especially like that the first tab asks the question: What is Drupal? I get asked that 2-3 times a day. Its still hard to answer that question. I see that the requirements are there for the user on this page (something not immediately visible on iteration 6). Excellent layout. Easy to find bits of good information.

    D&E Home. Sounds like a cable channel. I think the installation profiles need a much larger header and it should be rewritten to say something more benefit than feature: “Jumpstart Your Drupal Site” or something like that. The “Help us Build Drupal” belongs in the “Get Involved” section and not the D&E section. Maybe a simple glossary with easy to comprehend definitions. Maybe a cool chart with the most popular modules by day, week, all time (like youtube’s popular videos) — you could even crop in on their screenshots to generate visual interest.

    Module Detail Page. The reviews are a wonderful idea, but can we keep them super short and direct them away from support questions? The reviews on http://www.NewEgg.com come to mind. You get 500 words for Pros, Cons, and Other and a star rating. You can gripe or guide without saying “will someone help me with X?” Oh, and the vote up and down smiles need an icon please.

    Search Results. Can we search within our results? Can I see a link to use an advanced search form? I would like a button to add the results of this search to my dashboard. I would also like a “Did you mean?” feature. Hey, you guys admitted people use search a lot… lets give them some real features to make it useful. The hardest part about searching on Drupal is not knowing what to call what you want. Maybe this would be a good place to list “Recipes” of modules that accomplish certain tasks. Maybe we could list the most read documentation/api pages along with the popular searches.

    Overall, good work guys!

    Josh

  9. Plus 100 for the design. This is the first overall design I like and now the famous blue header background is a lot more bearable (no more headache).

    But minus 100 for the amount of clicks! You have to love to click. Click here, click there, click more here and there. With this design, user will indeed orient themselves on the search screen.

    We can no more have a nice News page wich you can read the title and teaser one after the other, with this design we need to click on each news items now. Clicks, clicks, clicks.

    Give us back longer page.. scrolling is a lot more usable than clicking after click.

    Furthermore, we do we keep a separate Dashboard! Drupal can display block for logged in user and display it in the main content page. So, with Drupal we can insert all the Dashboard block inside the main home page.

    The home map and the tabs block on its right are a duplicate of what’s available in the Dashboard. One reason more to remove the Dashboard (aka Logged in page).

    We should not try to present a uniform home page to all users (logged in or not), but rather be a showcase of Drupal features.

    The best way to show case Drupal is to use it’s feature to build a powerful home screen that adapts to the user.

  10. Stunnning! Awesome! CAN I HAZ IT? :)

    The only thing that shocked me a bit was how unimportant project issues became now, and how hard they are to find. I still think they are *the heart* of the Drupal world, be it core or contrib.

  11. Hi Leisa, it was great to hear about it during your talks at Web Expo 2.0 in Berlin, will follow this closely. Huge great experiment! Btw, your interview is up on berlinblase.de ;-) Greetz, the Bubblers

  12. Iteration 7 is rocking Leisa!

    Homepage – the modification to search is way more usable. The embedded community split by ‘involvement type’ (events, embeds, etc) is brilliant – now I know scale and local/global activity. The footer is perfect – just what it needed to square off the page.

    Get Started – ooooooh this has nailed it, just what I was hoping to find in interation 6. Steps are a brilliant idea, as people at all levels of understanding have a clear path forward from here. Perhaps a similar layout could also work for Get Involved?

    This redesign is evolving very nicely. I should have some more time available over the next 1-2 weeks… if you’d like a hand again with testing, just shout!

  13. Layout looks good.

    The flash still doesn’t fly for me. Looks like something I’d use in my shower.

  14. Browsing through this : looks GREAT !

    - Get started : Love it !
    ’2 – Extend Drupal’ sounds like ‘contribute’ (do some work for the community) rather than ‘install add-ons’ to me.

    - About : the tabs (‘What is drupal’, ‘Easy to install’…) are too easily missed IMO
    Not clear where the ‘Features’ and ‘Benefits’ would take me.

    - ‘News’ : ‘Filter your search’ in right sidebar sounds like ‘faceted search refinement’ to me, which it isn’t, right ?

    - ‘Get involved’ / ‘Community’ pages : there seems to be an overlap / duplicated content. Couldn’t that be merged somehow ? Maybe at least a link from ‘Get involved’ to ‘Community’ ?

    - Downloads (‘core’, ‘modules’, ‘module example’) : I’m not sure the upper tabs metaphor works here.
    2nd level section with highlights, sure, but formatting those like tabs is misleading IMO, because there’s no ’1 tab = 1 page match’, as is usually the case in drupal sites.

    - ‘Core’ : Tags, Maintainers, Page Views, Downloads, Reported installs – do those really apply here ? Even Screenshots, I’m not sure, for drupal itself there’s a whole site section dedicated to ‘short presentation’

    - ‘Module examples’ : I think the ‘numbers’ (Page Views, Downloads,
    Reported installs) could be given a more visually straightforward appearance and location. Too much text here.
    ‘Join Group’ button is a little prominent; ‘Join group’ and ‘Recent group posts’ sideblocks could probably be merged.
    Too much stuff is deported on the sideblock IMO, some of it should reintegrate the main area, for instance as half-width sections under ‘downloads’ (maybe ‘documentation and ‘issue queue’ ? – ‘issue queue’ is too buried IMO)

  15. Great Progress! I have to join everybody for praisint the “get started” page: this is really, really great, encouraging and directing the user very well.

    Also a nice CI-like look is evolving – the pages are growing together and a beatiful pattern of coherence is starting to shine through. The balance of blue, green and the khaki tone gets ever better.

    Though: The starting page has even become worse concerning the task to not overwhelm the user. Even though I like it being different in design from the rest, it is even more confusing to me than before.

    But I gotta say I like the general balance of elements. There is a clear top, middle section and bottom. But too much information and choices.

    Maybe there is a way you could present e.g. the choices below the search box as some kind of drowdown or javascript widget? This would clear up this section.

    Have a look at my wild and messy annotated Screenshot here: http://www.flickr.com/photos/14250508@N02/3017123564/

  16. While this looks great, you probably don’t need show a “Your Dashbord” tab on the frontpage if your not logged in…

    On the “Get Started” page, perhaps another couple of options in the “4 Get Support” column would be ‘Commercial Support’ and ‘Community’ (groups.drupal.org) …

    Also change the current ‘Get Support’ to ‘Community Support’…

    How do I find the Drupal forums???? not accessible from the frontpage.. (Compare with WordPress http://wordpress.org/support/ )

    Also the current “Books” pages are at least two links in from the front page…

    There is no “Blog” page, this is very common ever on large commercial web sites… I use these pages to find out whats ‘really’ happening when I follow a developer community.. (compare wordpress which has this on the front-page)

    Consider eliminating the words “Search Drupal.org” from the front-page the search is obvious due to the large “Search” button to the right, reorder the space around in the banner area to give back some screen real-estate…

    Consider adding a button “New to Drupal” which steps a new user through a “Wizard” of how to asses a CMS..

    Note: The getting started page assumes that a new person has already made the leap from a newbie who has no idea what Drupal does or what it can do for them.. (WIIFM)

    Don’t refer to “Drupal Core” (item 1 in getting started page), simply call it “Drupal” most normal (non-drupal) people would not know what this means…

    The list of NO’s
    > No RSS icon on the frontpage
    > No report a website bug
    > No link to the Drupal Newsletters
    > No link to security advices
    > No links to email subscriptions
    > No sitemap (http://ez.no/sitemap)
    > No http://m.drupal.org option

    What is importance of “310,721 people in 24 countries speaking 14 different languages” does this illustrate anything? What is its relevance to regular users…

    If I was Joe Schmo and I visited the proposed Drupal.org site, I would want to know how it was put together… what modules & versions were used, how the front-page was constructed, what Drupal version the site was etc…

    The Donate link is buried 2 links deep, consider a place on the front-page.

    Anyway… 1:00am…. I am going to bed… Best of luck..

    Russ

  17. Way too much going on on all pages. This needs to be simplified dramatically.

  18. The new site looks very promising; crisp design with al the functionality immediately to hand.

    Two comments:

    1) The logo. The use of the star in the logo is very reminiscent of the Mambo logo. Is this deliberate? In another category of software it wouldn’t matter but, as mambo is a leading competitor to Drupal, it could confuse the products.

    2) The footer tag line. The word Drupal is based on ‘Dorp’ not ‘Drop’ and means village. A minor point but these matter.

    Kind regards
    Ian

  19. First, I Love this new I-7 version.
    Most important to me is SEARCH and the specifics. Currently I mostly use direct google searches. site:drupal.org whatever… One major search frustration is post time “DATE”. Many times when looking for Drupal stuff I really want whats True and New for the past 3 to 6 months. I don’t need to read 2 year old posts when the problem was addressed more recently. Even Google’s DATE function gives no option between the past month and past year. Yes, sometimes this is version related… Like when the heck will Version 6 have the “X” feature that Version 5 now has (Module Related). I agree with others that an EXCELLENT SEARCH is the MOST IMPORTANT FEATURE. “Gimme what I’m thinking about, PLEASE!” :-)

Comments are closed.