Report from BADCamp 2012 Views Usability Testing

On Nov 1 2012, we tested the Views UI (7.x-3.5) with intermediate-level Drupal users at the BADCamp UX/UI Summit to provide the community with a clear picture of the usability bottlenecks in the Views UI, which is now in development in Drupal 8. We have identified a number of major problems and a large number of small ones, each of which now has an issue in the Drupal Core issue queue, where we discuss solutions, provide code patches with screenshots of the changes, come to agreement and put these changes into Drupal 8.

The study planning, participant profile, findings, videos and more are explained below.

Contents

Overall findings
Study summary
Screeners and study guide
Findings from study
Next steps
Video recordings (YouTube)

Overall findings

Participants thought that Views was “powerful” but complained about the steep learning curve to understand the concept and using the Views UI when they were first introduced to it. They relied on extensive Googling, face to face explanations from colleagues and video tutorials to learn Views. When they were thrown into unknown territories, their frustrations with using the UI were palpable.

Study summary

  • Number of participants: 8 (1 advanced user, 6 intermediate users, 1 beginner user)
  • Session length: 45 minutes
  • Study Focus: Using Views in Drupal 7
    • Understand existing user’s views usage & experience [behavior focused]
    • Uncover critical/major issues with existing users [UI focused]
    • How users navigate and operate the advanced settings
    • Gather data quickly so that actionable improvements can be incorporated into Drupal core before the feature freeze
  • Compensation offered: Google Open Source t-shirt
  • Recruitment method: Twitter (from BADCamp, @lisarex, @dcmistry), email to BADCamp UX Summit attendees. The email was quite successful.
  • Date: November 1, 2012
  • Type of study: Moderated usability study (in-person)
  • The sessions moderated by Dharmesh Mistry (dcmistry) and Lisa Rex (lisarex). Our volunteer note takers were Olga Biasotti, Angie Byron, Neerav Mehta, Lewis Nyman, Bojhan Somers, and Brian Young. Other volunteer contributors to the usability study planning include Bohjan Somers, Becky Gessler and Garen Checkley. Special thanks to Jen Lampton for coordinating the UX/UI Summit and putting up with us!
  • All the sessions were streamed live on Google+ and are available on YouTube (linked below)
  • Still from usability session with Kim

Screeners and study guide

Potential participants filled in a screener survey to see if they matched our profile, and a followup screener was used to help us clarify, when the scope of the study was narrowed.

We wrote a Views usability study guide (like a script), with the input from the Views in Core team.

Participant profile

  • Participants were targeted to be intermediate users who have done Drupal site building and have familiarity with Views (They have created basic Views and have dabbled with the advanced views). To keep the data focused, this is a report of findings of 6 intermediate users and 1 advanced user only. Data from the beginner participant will be added to future beginner level study data.
  • All participants were screened to be fluent in English.
  • Participants are comfortable with technology in their personal and professional lives.

Detailed findings

Positive comments

  • The first screen of Views UI get’s the user’s foot in the door
  • Participants rated their experience ratings higher as they got more exposure to views
  • Participants like the ability to preview and create custom CSS
  • Participants found theme template information useful

Critical, major and moderate usability issues

  1. Critical Lack of guidance: The views UI wizard page helps participants get the foot in the door but provides little guidance when they land on the second page. This is because the terminology is unclear and the visual hierarchy is flat. The problem gets severe under “Advanced” section.

    Possible solutions:

    • Use the Views UI wizard anytime a new display type is created.
    • More visual hierarchy on labeling and/or positioning
    • Contrib module with guided tour of Views
    • tooltip on hover of difficult labels

    [needs exploration + design]

  2. Major Too many items under configuration options for fields/ filters/contextual filters/ relationships: Participants feel “overwhelmed” when they see the long scrolling list of options. The problem gets worse because the participants do not necessarily see the “Search” option. The search option is visible only when you are on the top of the modal.

    Screenshot showing huge list of options for filters/fields

    Possible solutions:

    • Limit initial list to user created fields/filters.
    • Reduce visual clutter caused by descriptions.
    • Divide ‘filter’ (e.g. content, global) and criteria (e.g. Body, Comment count) into two columns, making the criteria more scannable
    • Search box has no visual weight and/or fixed positioning.

    #1832862: Users feel overwhelmed by handler listings

  3. Major Using “Contextual Filter” is difficult: When a participant selects a field in contextual filter, they are presented with a lot of options in a flat structure making them unsure how to proceed. This is mostly because of lack of workflow. The expectation was to select a default argument first and then move into related steps based on the choice. A related issue is the help text was unclear “Also look for node and node author ID” The advanced tools like contextual filter, relationship, exposed form require more guidance because it is a harder thing to do.

    Possible solutions:

    • Progressively disclose the functionality instead of all at once
    • Revise the text to be less Boolean, more human
    • Provide short UI / help text in a standard help block on these section to explain what they are

    [needs exploration + design]

  4. Major Several participants forgot to save/didn’t realise they need to save in order to see their changes to the view when they click “view page”. On smaller screens you can’t see the drupal_set_message() warning of unsaved changes.

    Possible solutions:

    • Provide an ‘Unsaved changes’ signal/notification within the main area of the Views UI, where they are looking [needs design]
    • Move save to button towards the bottom of the page (between preview, or at the end, or both)

    #1831894: Users miss “save” button and can’t distinguish “editable” and “preview” areas

  5. Major Participant had difficulty determining where the view showed up. If it’s a Page you can see the path. If it’s any other display type, you have no way of knowing where those displays appear on the site (P4).

    Possible solutions:

    • Show on the views listing the region where the block appears
    • Show in the views ui where the block appears (Attachment does this!)
    • Show when there’s an attachment in the Views listing (Block, Feed, Page appear in alphabetical order)

    #1834576: Improve details on the Views listing page

  6. Major Disconnect in the workflow of adding a block, as you have to create the block display, then save, then go out to the Blocks UI.

    Possible solutions:

    • Add “place block in region’ to the Views wizard.
    • Add “place block in region”to the advanced views.

    #1836390: Add “place block in region’ to the Views wizard to help workflow and #1836394: Add “place block in region’ to the Blocks settings in Views UI

  7. Moderate People often forget to add a path on a page, and if they hit save, they don’t see see the dsm() letting them know. If they haven’t saved, they still don’t realise the path is missing because the default / is very small and subtle. It’s also a very small target area for such a critical step in creating a page view. (P3)

    screenshot of the Views UI page showing the easy-to-miss default path setting

    Possible solution:

    • Replace the / with text such as ‘path is undefined’

    #1831142: Path is never empty in option summary.

  8. Moderate ‘View page’ link goes to the home if the path isn’t set, causing confusion because people think that is what they created when in fact its not.

    Possible solution:

    • ‘View page’ is not an active link until the view has been saved

    #1831696: View page link goes nowhere, if you have not saved

  9. Moderate ‘All displays” is the default option, even when there’s only a single display. This is unnecessary and is one more decision a new user has to fret over.

    Possible solutions:

    • Hide “all display/This page” options e.g. filtering when there is only one.
    • Significantly decrease the visual importance of this functionality.

    #1836384: The views UI should display “All Displays” option only when there are more 1 displays.

  10. Moderate Other related issue to “All displays”/ “Override this display”: In order to override a display you have to go to the drop down on the top left of the modal and to apply the display you have to go to the bottom right. As users are focused on the task at hand, they don’t realize that they have to change the filter and may accidentally apply to all displays. What makes the matter worse is that when it is changed to “Override this display”, the label changes to “Apply (this display)” but the difference is so subtle that the user did not register the difference.
    #1836392: In the Views UI, the interaction pattern of “All displays”/ “Override this display” is confusing
  11. Moderate Participant did not understand the Preview was updated automatically. They didn’t use it, and just went straight to ‘view page’.

    Possible solution:

    • Show when the last time the preview was updated

    #1836470: Participant did not understand the Preview was updated automatically

  12. Moderate On Views listing, participants have trouble determining what’s active and what’s disabled.

    Possible solutions:

    • Split them into two tables, with disabled underneath
    • Have the inactive views on a separate page, which is a gallery of possible views.
    • Change them to a tabbed display, with Active being the default tab
    • Fix the accessibility of the listing:

    #1830822: Split the Views UI listing into two tables for enabled and disabled

  13. Moderate The More section only contains the Administrative title. The “More” area is perceived as this magical area, where you might find something magical. Participants opened it and were disappointed to only find the administrative title.

    Possible solutions:

    • Move it out of this section until there’s more than one item, or label it with something less vague.:
    • Only show it upon clicking a checkbox using states, e.g. Add administrative title.

    #1831080: Remove the “More” area from the bottom of handler configuration

  14. Moderate ‘Theme: information’ label is misleading.

    “Theme information name is misleading because we are talking about templates. I have been on this page so many times and it’s still complicated. How are you supposed to know that this has theme’s real output?” (P4)

    Another participant didn’t know what Theme: information meant.

    Possible solution:

    • It should be relabeled to something like Theming: templates (P4)

    #1833834: Theme: information label is unclear

  15. Moderate People often click the “Settings” link when they see “HTML list | Settings” which causes them to miss how to change the main formatter settings.

    Possible solutions:

    • Merge the two settings
    • Make settings a tab of HTML list.
  16. Moderate When adding a field, “Create a label” is checked by default but we observed most people deselecting this. It’s only mostly useful for table display. (P4, P6, P7, P3). Needs more discussion to determine if this observation is accurate.

    Possible solution:

    • Deselect by default, collapse options. Limit # of items isn’t labeled so participant was unsure how to limit items on a block display. Assumed Pager label was specific to pages.

    #1831674: “Create a label” should be off by default, with an opt-in for style plugins

Less-actionable issues

  • There are 3 places the user sees for titling the page. (P2) http://screencast.com/t/S3BL6wdcflj
  • Medium: Help text is not helpful “also look for node and node author” (P4)
  • Large: Participants arent’ clear on what contextual filters are or when to use them (P2, P4)
  • Large: Participants arent’ clear on what relationships are or when to use them (P2, P4)
  • Medium: Grouping on fields is not widely understood
  • Grid display is not responsive because it is table based (P1)
  • Format level doesn’t signal about display (HTML/settings) (P6 & P7)
  • Preview contextual filter doesn’t have format settings (P6)
  • Large: observed people applying changes to All displays when they meant to override

Next steps

We will discuss the issues and explore other alternatives in the Drupal core issue queue. Relevant issues are tagged BADCamp2012UX.

Video recordings (YouTube)

Participant 1
Participant 2
Participant 3
Participant 4
Participant 5
Participant 6
Participant 7
Participant 8 (new user)

DrupalCon São Paulo Updates and Call for Session Proposals

Olá! Join Drupal project founder Dries Buytaert and core committer Angie Byron this December 6-8 in beautiful Brazil to bring a little Carnaval to Drupal. DrupalCon São Paulo will focus primarily on content for Drupal developers, but there will of course be plenty to offer for designers, themers, project managers, architects, engineers, and those involved with the business side of Drupal. The multi-lingual conference program will feature a sessions in English, Portuguese and Spanish, as well as plenty of opportunities for informal “Birds of a Feather” meetings and a coder lounge that will be open throughout the conference.

Small and intimate, we expect DrupalCon São Paulo to capture the feel of early DrupalCons. Our goal is to make it easier for attendees to meet the people that are deeply involved in the Drupal community and find out how to become involved themselves.

Sprinters wanted!

DrupalCon São Paulo immediately follows the Drupal 8 feature freeze deadline. There will be a hosted sprint focused on getting D8 features polished for core. Lead by Angie Byron and other key core contributors, this will be a dedicated day for crafting code, preparing APIs and tidying the documentation. There will be plenty for everyone to do, and it’s a great time to get involved to help make D8 the best version of Drupal yet. All hands on deck!>

Submit Your Session Proposal Now!

Share what you know and choose your lingo! We are actively soliciting session proposals in Portugese, Spanish, and/or English. Learn more and submit your session proposal today! Tracks that will be offered at DrupalCon São Paulo include:

  • Coding + Development
  • Backend + Webservices
  • Frontend Theming, Design + User Experience
  • Business + Strategy
  • more to be announced!

Important Dates

Please note that all deadlines are 11:59PM BRT (UTC-3)

  • Call for session proposals opens: June 28, 2012
  • Call for session proposals closes: August 24, 2012

Other Cool Stuff

Google announces Summer of Code results for 2012 – Drupal gets 13 projects!!

We are thrilled to announce that Google will be sponsoring 13 Drupal projects for Summer of Code 2012. We would like to extend our sincere thanks to Google, who are investing over $72,000 in the Drupal project.
As always, we had many more projects tha…

UX Team Q1 2012 update

Bojhan Somers and Roy Scholten are the Drupal UX Team leads.

We believe that Drupal 8 User Experience needs a lot of work to truly make all users of Drupal love what they are working with. We believe that by improving core, we improve the entire Drupal experience for everyone.

How are we doing this? By working with core initiatives, providing ideas, sketches, wireframes, detailed designs, and actively engaging in discussion. D7UX taught us a lot of hard lessons, we now know how to communicate our design rationale more clearly, maintain a UX vision throughout the maze of issues, and empower developers.

What are we working on? We are working on a few initiatives; mobile, blocks & layouts, multilingual and leading a lot of smaller efforts around improving our content authoring and site building experiences.

Drupal 8 design progress so far

Content creation

Our content creation experience is still far from being great, but we have been improving the content creation experience from all angles. We have received lots of feedback on our proposals, and iterated with the community on various parts of this experience.

We have now finalized most of our research activities and we want to start implementing a few of our major ideas. For this to happen, we need developers who want to improve this part of core.

There are two very actionable issues at #1510532: [META] Implement the new create content page design and #1510544: Allow to preview content in an actual live environment for you to help out on!

Blocks & Layouts

The blocks & layout initiative started by EclipseGC focuses on solving the messy experience of placing parts (blocks, views, panes) on the page. We believe this can be fundamentally better if we tackle it in core. This initiative will allow us to arrange and organize blocks into flexible layouts through a drag and drop interface. This initiative has many UX components, from finding the right blocks, to selecting the context, to creating mobile layouts.

We have done a lot of research the past few months to understand the space we are designing for. It’s incredibly complex, but will be a huge win if we can provide a great solution straight out of the box.

We will need help from everyone; developers, designers, user researchers, end users and business owners! Become part of the discussion in the Drupal 8 Blocks & Layouts everywhere initiative group.

UX team activities

ux_sprinting.jpg

UX team bi-weekly office hours

We started to hold bi-weekly UX “office hours” (next one will take place 16 April, 20:00 UTC, 4PM NYC, 4 AM Tuesday Singapore/Shanghai), where we will discuss recent activities of the team but also review contributed modules. This has resulted in modules such as Taxonomy Acces Control making major improvements.

UX team activity

The team has been busy in Q1 2012:

  • Becky Gessler, Garen Checkly and Jen Lampton conducted a usability study at the Google offices, resulting in a detailed findings report and Drupalcon Denver core conversation talk on how to solve it.
  • Lisa Rex, Dharmesh Mistry (dcmistry), Erik Stielstra (sutha), Alexander Ross (bleen18) have done a total of 22 interviews about how people use the module page.
  • Lewis Nyman has been working hard on designing Drupal’s mobile interface, resulting in interesting discussions around navigation, principles and actual implementation of ideas in the mobile issue queue.
  • Roy Scholten (yoroy) has presented on Core product: 3 is the magic number and organised several sprints around UX at Drupalcon. There was also a BoF.
  • Jared Ponchot has been contributing design proposals, to our effort to redesign the content creation page.
  • Kristjan Jansen (kika), Jeff Noyes (Noyz) and Kevin O’Leary (tkoleary), Michael Keara (UserAdvocate) have put out various ideas around media UX, creating UI standards for add/edit flows, optimizing the content listing and research for the Blocks & layout initiative.

We have also released our ideas around redesigning the module page, adding a project browser to core, adding search everywhere, draft revisions and much more in the usability issue queue!

We need your help!

We need volunteers:

  • Developers who can help us with the PHP, CSS or JS parts of these changes.
  • New and experienced UX designers to work on the new features that we want to introduce in Drupal 8.
  • A project manager who can help break down tasks, coordinate contributors, update blog posts and issues, and help the UX team & leads focus more on UX.

If you’re interested in becoming a contributor to the UX Team in one of the roles above, contact Bojhan Somers and/or Roy Scholten.

You can find us in in the usability group, contact us directly by e-mail (or drupal.org contact form), join us on IRC in #drupal-usability, or find us in person at Frontend United.

The cool stuff we’re working on

Still not sure? We we love a lot more help to pursue all these crazy ideas within the next 7 months:

Thanks!

- Bojhan and Roy

Attachment Size
ux_sprinting.jpg 55.93 KB

The Google Summer of Code is Back for 2012!

Some of Drupal’s Summer of Code success stories include:

Angela ByronAngela Byron (webchick) the Drupal 7 co-maintainer, Director of Community Development at Acquia, a Google-O’Reilly Open Source Hall of Famer and a Drupal Association board member. She originally got her start in Drupal writing Quiz module for GSoC 2005. Sumit KatariaSumit Kataria, started as a GSoC student back in 2009 working on OAuth module, and now not only is one of the foremost experts in the Drupal community on mobile (look for his mobile apps for DrupalCon Denver in an app store near you!), but co-manages Drupal’s involvement in GSoC. He works as a Drupal consultant with companies like CivicActions and Lullabot.
Bojan ZivanovicBojan Zivanovic (bojanz) became a preeminent contributor to views and contributed to EntityFieldQuery for Drupal 7. Gábor HojtsyGábor Hojtsy, the co-maintainer of Drupal 6, and the Initiative Lead for the Drupal 8 Multilingual Initiative worked over GSoC in 2006 to get i18n in Drupal core in Drupal 6. He is now an engineer for Acquia.
Jimmy BerryJimmy Berry (boombatower) was instrumental in the development of Drupal’s automated testing framework, and he and his father Jim Berry (solotandem) were the first Google Summer of Code father/son team! :) They both offer testing-related services at http://boombatower.com. Lin ClarkLin Clark (linclark) created SPARQL Views, making it possible to query SPARQL endpoints from Views, as part of GSoC 2010. Her demonstrations of Linked Data capabilities in Drupal have been published on IBM Developer Works. She is now an independent consultant working data publishing and consumption using Drupal.

So if you’re:

  • a post-secondary student looking for an exciting project with a thriving development community and tons of smart people you can work with
  • an existing Drupal contributor who happens to be attending college/university and would love a chance to get paid over the summer to work on the “Next Big Drupal Thing”
  • a seasoned Drupal developer with some time over the summer, who’d truly enjoy mentoring and helping the next generation of contributors make Drupal the best that it can be
  • a Drupal community member who might not have the time or coding experience to mentor, but knows where to find resources and enjoys helping others find them.
  • someone with a great project idea for an improvement in Drupal that would be perfect for a student to work on over the summer
  • a Drupal evangelist who wants to help grow the community by actively engaging students

…then there’s something for you in Summer of Code! Read on to find out more.

Prospective Students

If you have enthusiasm the drive to work on something great, now is the time for you to get started! Subscribe to the Google Summer of Code group, look over the developer’s guide and API reference, stop by Core Office hours and take on some new contributor tasks, find a Drupal event near you to get to know Drupal’s amazing community, and take on a few bite-sized tasks in the Novice Issue Queue.

Most importantly, start thinking about your project proposal! Prior to submitting your application, stop by #drupal on irc.freenode.net or post your project ideas to the Summer of Code 2012 group to get community feedback. Your chances of getting into Summer of Code increase if the community has the opportunity to review your ideas and offer feedback to help you in improving your project idea.

We have already started accepting applications. For more tips, students should check out the Student Template Page.

Mentors

Please sign up to be a mentor if you have either experience with Drupal development or expertise in a particular area of interest (for example, newspapers, education…) and have some free time from now until the end of August.

To become a mentor,  join the Drupal SoC-2012 group and the sign up on Google’s SoC mentor web app (now known as Melange). Please describe who you are, what your level of Drupal experience is, and your motivation for being a mentor. Your application will be reviewed by SoC admins (Chx, SumitK).

You can go through Advice for mentors page to find more tips on mentoring students.

The more mentors we have, the more students we can get in, and the more exciting projects of varying types we can accept.

Community members

Great project ideas are vital to attracting both great students and great mentors. If you’ve ever thought “if Drupal could be…”, now is the time to turn it into a project idea. The project should be feasible for a Drupal-novice developer student to achieve in a 3-month time frame. Suggest a SoC project idea in the SoC 2012 group or help elaborating already proposed ideas

In addition, you can help review the existing SoC project ideas by providing students and other community members with feedback. Community members are in the best position to help students understand the finer intricacies of existing modules, and help their energies to meet the the priorities of the Drupal project.

To help the new Drupal family members, we need some existing community members to be active in #drupal-contribute on irc.freenode.net to answer student questions, point them to the correct resources, and people with expertise.

If you think this sounds like fun, be sure to get on to IRC!

Announcing Jennifer Hodgdon as Drupal core committer!

As the Documentation Team lead, Jennifer “jhodgdon” Hodgdon has done a fantastic job of not only keeping Drupal core’s API documentation high-quality and consistent, but also of on-boarding new Drupal core contributors through the “Novice” issue queue….

Community Spotlight: Jess (xjm)

Jess (Drupal.org username xjm) is a Drupal developer, core contributor, module maintainer, and mentor, and just plain all-around awesome! She is a web developer for the University of Wisconsin’s Department of Family Medicine. She also volunteers at th…