Collections

[gbishop]

I hope we can add the concept of collections before going live. A collection is like a named and persistent favorites list. Doing this will help us think about where and how favorites management should be integrated into the UI.

Any logged in user can create a collection. It has a title, a short description, and a list of books. I imagine when you open the url for a collection you see a page very similar to the current Find a Book page without the search tools. The title and description could go in that space.

This will allow teachers to create a set of books on a topic and share them with their students and other teachers.

[gbishop]

I was thinking Links Manager (a wordpress feature for blogrolls) might be relevant to this but they appear to be eliminating it.

[gbishop]

I've just about got a primitive first cut working.

I'm still fumbling around issues of what functions to provide where.

I want to be able to bookmark a collection by name so a teacher might gradually add to it over the year and students still use the same URL. I've got that mocked up at http://gbserver3.cs.unc.edu/collections/test-1/ will (eventually) display the collection test-1. Just visiting /collections/ will list them all and eventually allow a search of the titles and descriptions.

Editing is still up in the air. These things are simply named (and shared) Favorites lists.

I've got creating them going at /your-collections/. You can save your current Favorites by giving a title and description.

Here's where I bog down. You can help me think through it.

For an existing collection. I might want to do several things:

1. Delete it
2. Modify the title or description.
3. Add the books on my current Favorites list to it.
4. Add it to my current Favorites list (for example to merge some lists, or delete some books)
5. Replace it with my current Favorites list.
6. Replace my Favorites list with it.

Having 6 buttons on every collection seems wrong.

So maybe there is a single Edit button for each as on the your-books page?

Pressing it causes the editor to appear with the title and description filled in. I don't want to show users the list of book ids. Maybe it says: You have 3 books in your Favorites list. (we could list their titles but collections could get big and a long list would be a pain). This collection has 4 books.

Then offer them, buttons for:

Delete Favorites = Collection Favorites += Collection Collection = Favorites Collection += Favorites Update title and description

This seems too complicated. How can we simplify?

[gbishop]

Common usage scenarios:

Read a collection, this will be most common by far. No need to be logged in.

For logged in users.

Save Favorites as a Collection. Delete a Collection. Found a book, want to add it to an existing Collection. Update title and/or description on an existing Collection.

[gbishop]

Cenk,

How about playlists? That seems like a similar domain. Can you think about how we might model Collections like playlists in iTunes or whatever?

[gbishop]

Maybe on the your-collections page, Favorites is the first item in the list. Then all your named Collections. You can add your Favorites to an existing collection by dragging Favorites to the Collection. You can add a Collection to your Favorites by dragging the other way. You can delete a Collection by dragging it to a trashcan? Maybe one item is named New Collection. You can drag your Favorites (or another Collection) to it to create a new one.

So maybe your list appears like Title(count) Description. The list might look like this:

Favorites (3) Your current favorites New (0) Drag here to create a new collection Tractors for Billy (5) Billy's Tractor Books Fans for Brad (12) Books on Brad's favorite subject

She could drag Tractors for Billy to Favorites and the count on it would jump up to 8 (unless they had some book in common). Or she could drag, Favorites to Tractors for Billy.

What do you think?

This would be JS users only but it's fine to require JS to create and manage collections.

[cbaykal]

Wow that's a really good idea, that would definitely simplify things and be user-friendly. I am sure a lot of people could relate it to as well.

For even more control over the specific books in a collection, we could have two lists side by side (similar to what iTunes does for playlists). For example, in iTunes, whenever you click a playlist, the list of songs appear on the main list to the right. In our case, the list of songs could be the list of books in that collection. From there, the user can drag specific books to other collections or even favorites. I am not sure if we would even need to go this far, but it could provide some convenience to the users. What do you think?

Overall, I think this is a great idea. If there's any way I can help in implementing it, please let me know.

[gbishop]

You could probably do a better job implementing it than me... I don't use iTunes. I don't know that we need to go all the way to dragging individual books out of them. But that might be the right thing. I was trying to avoid listing the books but I bet people would use it if we did.

I asked my daughter's friend who is visiting with us and he suggested the playlist thing. I never use them so I never would have thought of that.

Maybe it's just a jquery sortable? But they don't sort when you drop them, they just deliver their contents. It would be a bother to accidentally drop one in the wrong place. Maybe we need a Undo button as well?

Would you like to make a first cut at it? Do you have time?

On Fri, Dec 28, 2012 at 8:20 PM, Cenk Baykal notifications@github.comwrote:

Wow that's a really good idea, that would definitely simplify things and be user-friendly. I am sure a lot of people could relate it to as well.

For even more control over the specific books in a collection, we could have two lists side by side (similar to what iTunes does for playlists). For example, in iTunes, whenever you click a playlist, the list of songs appear on the main list to the right. In our case, the list of songs could be the list of books in that collection. From there, the user can drag specific books to other collections or even favorites. I am not sure if we would even need to go this far, but it could provide some convenience to the users. What do you think?

Overall, I think this is a great idea. If there's any way I can help in implementing it, please let me know.

— Reply to this email directly or view it on GitHubhttps://github.com/gbishop/TarHeelReaderTheme/issues/28#issuecomment-11745766.

[cbaykal]

Sure, I could definitely try to see if I can come up with something. The main thing I was working on currently was to allow the users to navigate the navigation/settings via keybinds, and fixing some inconsistencies in the styles.

I'll be out of town with my family for a few days starting tomorrow, but I can still try to help in any way I can. Is there a specific deadline that we are shooting for? I know that we want to get this version released as soon as possible.

[gbishop]

No worries. Continue with what you are on. I'll mock something up while you're away and you can style it for me when you get back.

On Fri, Dec 28, 2012 at 8:39 PM, Cenk Baykal notifications@github.comwrote:

Sure, I could definitely try to see if I can come up with something. The main thing I was working on currently was to allow the users to navigate the navigation/settings via keybinds, and fixing some inconsistencies in the styles.

I'll be out of town with my family for a few days starting tomorrow, but I can still try to help in any way I can. Is there a specific deadline that we are shooting for? I know that we want to get this version released as soon as possible.

— Reply to this email directly or view it on GitHubhttps://github.com/gbishop/TarHeelReaderTheme/issues/28#issuecomment-11745969.

[gbishop]

Another proposal. Perhaps we unify everything on the Your Books page, it could become Your Stuff or something.

The lists of drafts, published books, and collections have fixed height and get scrollbars if they need them.

Each item has the wide button look we're using for menu's and the content is the title and perhaps a bit more information about each entry. One line of text each. Maybe they are gray.

When you click on (or touch) an item it expands and changes color. Or maybe a dialog pops up. In either case you're now in a mode where you are dealing with only that item.

The actions for the item are wide buttons with descriptive labels. I'll use * below to indicate a wide button.

For a draft the expanded item might look like:

Title Date

• Edit
• Delete
• Cancel

For a published book it could be: Title

• Read (do we need this?)
• Edit
• Cancel

For a collection it could be: Title in a text box Description in a text box 8 Books (number of books in the collection)

• Add to Favorites
• Merge Favorites into here
• Replace these with Favorites
• Delete
• Cancel

[cbaykal]

That proposal sounds simple enough. It could also help us maintain consistency throughout the your-books page. Also, I would say implementing this would be more convenient than a playlist-like interface.

In my opinion, the playlist proposal seems a little more attractive. However, I am biased because I am accustomed to using iTunes and iTunes playlists. I can see how it could be hard for a person with no prior "iTunes experience" to move around favorites and collections.

On a second thought, your recent proposal might be a better idea. Integrating simple buttons for managing favorites and collections could be more convenient for the user. As you mentioned before, we could use a dialog for the options panel for each list item in the your-books page (perhaps it can be as simple as a hidden div that expands upon click?).

Do you think we will need to provide keyboard controls to manage favorites and collections? If so, the recent proposal might also be more convenient for this purpose, rather than the playlist idea which utilizes drag and drop gesture.

If we decide to go with the recent proposal, I can try to mock something up tomorrow.

[gbishop]

The drag/drop playlist would look great but fitting it all on a phone could be a trick.

I'm thinking hidden expanding div, that way the controls are just in the markup and the JS is very simple.

I like your suggestion that keyboard access would work better with the simple expandable buttons.

I'm going to try something really simple to see if I can understand the implications of this approach.

On Sat, Dec 29, 2012 at 9:24 PM, Cenk Baykal notifications@github.comwrote:

That proposal sounds simple enough. It could also help us maintain consistency throughout the your-books page. Also, I would say implementing this would be more convenient than a playlist-like interface.

In my opinion, the playlist proposal seems a little more attractive. However, I am biased because I am accustomed to using iTunes and iTunes playlists. I can see how it could be hard for a person with no prior "iTunes experience" to move around favorites and collections.

On a second thought, your recent proposal might be a better idea. Integrating simple buttons for managing favorites and collections could be more convenient for the user. As you mentioned before, we could use a dialog for the options panel for each list item in the your-books page (perhaps it can be as simple as a hidden div that expands upon click?).

Do you think we will need to provide keyboard controls to manage favorites and collections? If so, the recent proposal might also be more convenient for this purpose, rather than the playlist idea which utilizes drag and drop gesture.

If we decide to go with the recent proposal, I can try to mock something up tomorrow.

— Reply to this email directly or view it on GitHubhttps://github.com/gbishop/TarHeelReaderTheme/issues/28#issuecomment-11760247.

[cbaykal]

That's a good point, it would be very difficult to drag and drop on an iPhone, for example. I'll look into implementing it later tonight if you haven't done so already. Either way, I can try make improvements on the code that you have in place.

[gbishop]

I'm going to do something very simple and ask you to make it cool.

On Sun, Dec 30, 2012 at 8:53 AM, Cenk Baykal notifications@github.comwrote:

That's a good point, it would be very difficult to drag and drop on an iPhone, for example. I'll look into implementing it later tonight if you haven't done so already. Either way, I can try make improvements on the code that you have in place.

— Reply to this email directly or view it on GitHubhttps://github.com/gbishop/TarHeelReaderTheme/issues/28#issuecomment-11764701.

[gbishop]

If you get a chance, see what you can do to make this version of the your-books page look decent. No worries for now about what the buttons should do. I've got opening and cancel hooked up. I'll have to write a little server side code to handle ajax calls before we can make the buttons do much.

I'm thinking the text boxes should be full width.

The spans should look like a list of clickable things, like your others do.

When the controls appear they should look really different so the user knows what happened.

[cbaykal]

Sounds good to me, I'm on it.

[cbaykal]

I also sent you an email, however it was probably best put here: I tried to add some styles to the your-books page: http://gbserver3s.cs.unc.edu/your-books/ .

[gbishop]

We've lost the styling on the question-mark images. I factored the help code out of write and modified the css. That got lost in one of the merges I suspect. The ? should appear on the line with the headings for each subsection.

[gbishop]

I suspect the problem with scrollIntoView is it is overlapping with the SlideUp. We should make the scrollIntoView happen after the SlideUp.

[cbaykal]

Ah I see, sorry about that; both issues should be fixed now: http://gbserver3s.cs.unc.edu/your-books/ .

[gbishop]

Look good, closing this.