Figure out topic/page ordering strategy

[norrishung]

xf

[norrishung]

Here's an exploration to how content ordering might work.

http://chimecms.github.io/chime-prototypes/content-ordering/

I've been weighing whether or not to hide content restructuring (including adding, deleting, editing, and reordering things) behind a button. Some thoughts around this...

• Something like this would be required in the single page activity model in order to request and endorse feedback on changes above the page level.
• It makes it easy to limit topic/subtopic editing to an 'admin' type user if we decide we want to do that in the future.
• It obviously adds a little friction to making structural changes but I think it might be good friction (we wouldn't want people to add/delete topics lightly).

Some other notes:

1. Thinking the no-js version would replace the reordering icon with a input element where you can manually enter in the order number.
2. Before structural changes are approved, new/marked for deletion/edited items could be labeled so that the reviewer can see the changes in context.

[migurski]

This is interesting. Feeling like the “edit structure” button should be nearer to the structure it’s editing; it’s awfully lost up there. Maybe one at the top-right of each block that can be re-ordered, using language that includes the words “order” or “sort” to make clear what’s happening?

[migurski]

“Add” at the bottom of each, also.

[norrishung]

Alternative icons.

[migurski]

The arrows are a bit less hamburger.

[norrishung]

Haha, I agree - the arrows were what I had first. When I showed it to people, some clicked on them thinking they would move the item up or down, which is totally reasonable behavior.

I don't like the hamburger icon because it's a design pattern used on touch devices to represent tactual friction that doesn't make sense when using a mouse device. But for anyone with a smartphone, at least its a known pattern whereas the arrows are not.

When in doubt, user test?

[migurski]

Clicky-arrows seems like a reasonable no-JS default!

I often see the four-way arrow cross used to signify a thing that can be moved, and as a cursor for when a thing is moving.

Possible no-JS view, with buttons that pull something to the way-top or way-bottom:

⬆️⬇️ Snowstorm Operations ⬆️⬇️ Hurricanes ⬆️⬇️ Monsters

[phae]

I've seen another variant for this sort of interaction that's like, little dots usually arranged in a grid (4 dots, I think).

googling

https://camo.githubusercontent.com/ed064dccbfc56c60ae426128f046c81596695302/687474703a2f2f692e737461636b2e696d6775722e636f6d2f4a446a46672e706e67

And an arrowed variant: http://www.smashingmagazine.com/wp-content/uploads/images/css-li-styling-techniques/drag-drop.jpg

+1 to user testing, though.

[migurski]

I like that first one, with the friction pad.

[norrishung]

Sounds like the friction pad might work the best. So here's the thing - I'm using fontawesome for all of my icons in the app right now. I definitely want to make custom icons for everything but that requires us to create our own custom icon font (which I also want to do at somepoint). I don't want to create one off custom icons right now because they are harder to create, maintain, have worse performance, and are worse at browser support.

We can prioritize creating a custom icon font that if we think its important but I was planning about leaving that to a later stage where I can do a full icon audit at some point and I can think about designing all the icons holistically.

[migurski]

That sounds like a sane plan to me.