Public collections design improvement

We’ve started a discussion about improving the library feature within KoBoToolbox, and if you’re reading, you’re invited to participate :grin: It’s already possible to organize questions, blocks, and templates within collections and to share that content with other users, but we want to facilitate collaboration on a larger scale and make it easier for people to find each other’s shared content.

This post is now a wiki! Please edit it directly. I’ve included the notes from an initial meeting of the KoBoToolbox team below, but further discussion will take place here, on the public forum.

Reference material

User stories

“my library content”—since the concept is repeated frequently, let’s define it as the following:

  • my own questions, blocks, and templates
  • questions, blocks, and templates explicitly shared with me
  • questions, blocks, and templates contained in collections that are explicitly shared with me
  • questions, blocks, and templates contained in public collections to which I have subscribed

I want to… (:heavy_check_mark: indicates already possible)

  1. create, organize, and share library items:
    1. use a familiar interface (from the “Projects” UI) to create a new library item
      1. click the “New” button and see a centered modal right away, then
      2. choose between:
        1. question/block
        2. template
        3. collection
        4. upload
      3. enter metadata if only I have chosen template or collection
      4. go directly to the form builder if I have chosen question/block or template
      5. :question: upload a file if I have chosen upload (this already works, but which types do we handle?)
      6. :grey_question: just go back to the library list if I have chosen collection, or to a collection landing page or modal? Answer: go back to the library list
    2. create private questions, blocks, and templates inside my library :heavy_check_mark:
    3. share those library items explicitly with one or more people :heavy_check_mark:
    4. create private collections within my library :heavy_check_mark:
    5. place questions, blocks, and templates inside those collections :heavy_check_mark:
    6. share those collections explicitly with one or more people, so that they receive access to all items inside the collections :heavy_check_mark:
    7. share one or more collections publicly so that they appear in a list visible to all users on the system :heavy_check_mark:
      1. be prompted to enter metadata when sharing publicly
        1. organization, country, and primary sector are required
        2. tags and description are optional
      2. be prevented from publicly sharing an empty collection (but if a collection that’s already public has all its content removed, that’s okay)
    8. add tags to any of my library items
  2. browse through the library:
    1. see only items owned by me (“My Library”). Items’ icons shall have a globe overlay when shared publicly, and a head+torso overlay when shared with individual users. If simultaneously shared individually and publicly, show the globe overlay.
    2. see items either shared with me explicitly or public collections to which I’ve subscribed (“Shared With Me”)
    3. :sparkles: see public collections to which I have not yet subscribed (“Discover”). This is the MVP new list view of collections!
    4. :grey_question: see which collection contains a particular item (collection name as a column?) Answer: replace “Type” column with collection name (blank if none).
      • Replace question/block/template rounded rectangles with smaller icons. Showing a number in the icon is not necessary.
    5. always see the owner’s username, even for me-only views (Google Drive’s convention)
    6. with one query, search through all of my library content (see definition above) :heavy_check_mark:
    7. filter and sort any tabular lists of library items using a consistent interface within the column headers
    8. open any item (question/block, template, or collection) and see a familiar UI from the “Projects” section of the application, including a landing page and a settings page
      1. :grey_question: We wanted metadata to be links, so that clicking any piece of metadata would execute a new search using that attribute as the criterion. Do we still want that, and if so, would that happen on the landing page? Answer: let’s postpone this for now.
      2. when opening a collection, see a list of the items it contains
        1. see an Enketo preview of any of these items
        2. if an item is a block, see how many questions it contains
    9. when “discovering” new public collections, open a quick-view modal—without leaving the list view of collections—that displays metadata, contents (with Enketo preview links), and maybe (low-low priority) a popularity graph.
    10. see an indicator when a collection to which I’ve subscribed has changed since my last viewing (low-low priority)
  3. discover others’ public collections:
    1. search for public collections by:
      1. organization
      2. country
      3. primary sector
      4. tags
      5. language
      6. date
      7. name
      8. description
      9. :grey_question: label of each question within the collection + its blocks and templates? Anwer: No labels.
    2. use a Gmail-style search guide that displays the resulting query in an input box that I can see and modify
    3. see public collections sorted descending by modification date by default
    4. see how many subscribers each public collection has
    5. see whether a public collection is “trending,” i.e. its increase in number of subscriptions over some interval of time exceeds a certain threshold (low priority)
    6. click a shortcut link to have sorting quickly adjusted:
      1. “Newest”: descending by modification date
      2. “Popular”: descending by number of subscribers
      3. “Trending”: descending by “trendiness” (as yet undefined; low priority)
    7. Avoid seeing empty collections—they should be omitted from the list
    8. subscribe to others’ public collections :heavy_check_mark:
  4. make use of library content:
    1. see my library content (definition above) in the “Add from Library” sidebar when building a form :heavy_check_mark:
    2. create a new form from any template within my library content :heavy_check_mark:
      • Bug: “Create project: Choose template” shows the “Owner” as “me” even when the template is part of someone else’s public collection
    3. clone another user’s public collection in its entirety
  5. learn about new library features through an in-app message / forum post once they are released

For future discussion

  • Global toggle to show/hide tags in list view. Right now, they can only be shown by clicking each individual library item
    • Or, always show tags in a compact way (similar to Discourse?)

Here are the updated wire frame mock-ups to go along with the proposed public collection upgrade - https://app.atomic.io/d/Mb6TvK9HKid0

They’re fairly rough, so if anyone has any questions please feel free to ask and I will clarify and if necessary modify the slides.

Here are a few notes of my own in response to the list above:

If the ‘make public option’ lives in the Manage bubble, then is it necessary to also have it in the initial drop down?

Also currently the “make public” icon is the same icon being used at the bottom right of the project dashboard to switch to the legacy version. It should be changed to something else, like a globe icon.

I used a magnifying glass icon, but could also be a globe icon

I disagree with this. I think the public collections should remain with that name until you chose to subscribe to them, where they then show up under your “My Subscriptions” tab in your library. They only become subscribed once you subscribe to them, until then they’re just publicly available.

Are these discussion open to general public? I’d actually be quite interested in listening in.

Hi @Xiphware

Thanks for reaching out about this. I think our intention is to keep the conversation going here and publicly available for anyone to follow along and add in their own two cents. However, if we do end up having another call offline about this, I can certainly send you an invite to join.

@mike.destaubin @jnm Here are some thoughts on the proposed wireframes for improving the #public-collections feature:

  • Menus:
    • I’d suggest sticking with the current structure:
      • Library
        • My Library (contains own collections, subscribed public collections, and those shared by others)
        • Public Collections
          • Explore
          • My Subscriptions
  • I’d take out “Trending/popular/newest”:
    • There’s no easy definition for ’trending’ or ‘popular’
    • Instead, I suggest adding a sort option (in place of the ‘Filter by type’ menu):
      • Sort A…Z
      • Sort Z…A
      • Sort by popularity [number of subscribers]
  • Take out “Filter by type” (only applies to viewing content of the Collection)
  • Making public
    • There are two places, in context menu and in ‘manage’ screen. Do we need both?
  • Search filter
    • Add a filter option “Has more than X subscribers”
    • Do we need ‘has GPS/media/repeating questions’?
  • Curating: We still need a wireframe on how to view / filter by curated collections.

My two cents:

  1. icon for “Public Collections” should be different (this one means “search”, will be confusing)
  2. “Type” column header + “Filter by type” functionalities could be merged
  3. column headers - sorting A<->Z or dropdown with filtering selected values? some make sense sorting some filtering
  4. I don’t think tags are that important to put them on top of modal - but I’m guessing the design of modal will be adjusted during development
  5. what does the graph icon mean/do on the start of the row?

Agree with leszek.
Moreover, what about adding sorting on column header in “My public Collection”?
A fourth link “Custom” could appear when users click on “Type”, “Primary Section” “Organization”, “Name”

I agree, maybe a combination of a magnifying glass and a globe icon? or just a globe icon?

I think you can keep the filtering at the top search bar and then just add the down arrow next to the column headers to sort the columns alphabetically. That way you can do both filter and/or sort

Sure, no important reason they’re placed there other than for looks

That was my attempt at a “Trending” icon

Good idea @nolive!

Following our discussion on 5/6/2019 about the updated set of wireframes for the public collection design. The following changes will be considered and incorporated into the UI design:

  1. Remove feature to share public collection with other users.
    a. Future integration would require an approval request for intended shared with user

  2. Remove quick links in public collection landing page and replace with blue ‘subscribe’ button
    a. Add ‘make public’ button in same location in users personal collection landing page
    b. Add subscribe button (when hovering?) to public collection items in the public collection home page

  3. Design collection page option with only one page and not separate tabs for summary and content
    a. Put all detail/description data into one section and add collection content list below
    b. Pagination (?)

  4. Consider the formbuilders ‘search library’ UI

  5. The collection list in the side bar should show full collection titles with line breaks.
    a. The first line should be indented to show folder icon

  6. Update “new” modal with title and short description
    a. Change “question/block” to “Question Block”

  7. Reconsider Owner Details block in collection page

  8. When creating a new collection it should navigate you to the collection landing page, even though it is empty to begin with

  • Which columns should we show in public collections list view? Let’s consider this as we build.
  • In the public collections content list, for each library item (row) in the collection, let’s show the same action buttons as the form list.
  • If a collection is empty, disable the “MAKE PUBLIC” button (as shown already in the wireframes).
  • If a collection has content but lacks required metadata, enable the “MAKE PUBLIC” button (change to the current wireframes). However, when clicking that button, the metadata input screen should appear to prompt for the required metadata.
  • The content within the collection screen will scroll infinitely, and the details can scroll out of the viewport, i.e. they are not frozen at the top.
1 Like

Since we will soon no longer be able to use atomic.io for creating and sharing wire frames, here are saved png files of each frame.