Cube Tool How do you want to enter a cube list into a computer?

[Rob Dennis]

So, this is a hard problem, and not because it's a technical challenge, but because it's about human interaction design and usability.

Too often, you're looking at entering a bunch of card names into a text area (or text file) and bulk upload, or perhaps in a text entry box and you'll get some suggestions, but it usually gets added to a big list, or somewhere else entirely and that's lame.

So we want to start editing a cube, but it's a pain to edit cards in a giant text file and it sucks having to make a google doc with a bunch of formatting that's not actually enforced or used to simplify things

Couple of things we can see:

1. This is trying to emphasize getting something usable as quickly as possible, instead throwing people into all the complexity right away (using presets, having some opinionated defaults)
2. What switches we do have, I kind of do want to hide away; let's keep the focus on entering cards
3. No matter how easy we can make this process, folks are still going to want to get their stuff in and out of a particular tool, so import/export is good.

Well, maybe we can start entering a card:

Kind of looks acts like a spreadsheet? That's kind of on purpose, this is borrowing a bit from a spreadsheet since:

1. the grid lets you get the visual mana curve when it's all laid out
2. people expect that they can enter things in a cell
3. people also understand that a column on a spreadsheet might be used to group a alike things

Maybe a user could start typing in a card name, and "potential" cards are in a dropdown. In this screenshot, you're in the white 1-drop creature slot, so it's showing you cards that fit that criteria. In the dropdown, there could be some reminder/clue what a particular card is, and that could help the user make the right choice for them.
And let's make our selection:

an extra row to allow entering another white 1 drop, and the count increments to help the user get a quick sense of what's in the pool.

I dunno, is this on the right track for people? Feedback is basically priceless since I think we can be doing this better.

This is from https://github.com/rdennis463/lambic/wiki/Mockups

 

[Eric Chan]

How do you want to enter a cube list into a computer?

BY HAMMERING MY FACE INTO THE KEYBOARD AND YELLING OUT CARD NAMES (WHILE SHAKING A CAN OF WHIPPED CREAM)

 

[VincePendrell]

Hey Rob, I really enjoyed the way you are disposing the information, but I'm not sure entering the info the same way you are viewing it is the best possible way.

You could have a different tab for entering cards other than whatever you are using to show them organized. By making the user enter the information directly into the cells, you are pretty much frontloading the organization process to the user. When planning my own (now cancelled) cube organizer app, I wanted to use a different tab with all the inputs for the organization information (name, cmc, card type, qtty, tags, etc), so maybe it's just me, but when entering a card to my cube, I'm more interested in first having it enter my list and then finding where it should be organized.

I was going to write a huge paragraph explaining a lot of complicated stuff (but nothing seemed to make sense after I read it a couple of times), so what are you using for your mockups? I'll see if I can get a sketch up here for evaluation.

 

[Rob Dennis]

Eric, I laughed a lot, but come on gimme something to work with

And Vince, I'm using balsamiq and exporting to png. It is a paid app, but it's one of those things where you can do a free trial.
You're definitely right that I'm front-loading organization, because my hope was that a novice cube guy would benefit from "ok, what white one drops do I want?" versus, "what cards in all of magic's history do I want."

It also felt that flipping between the entry and viewing parts would have you take a context switch penalty. Similar to alt-tabbing from a document to the source you're referencing.

There's definitely a user story for "I just want to enter some cards and see where we're at when we're done with that" but I don't know if that's the primary story compared to: "I want to start making a cube but I don't know how to break apart. The task into manageable bites"

Definitely take a crack at a mockup, it'd really help drive some discussion

 

[Peter Angell]

My advice for anyone who's dipping their toes into the cube making waters is to just get a pile and/or list of cards that represents your best ideas, then work from there. Obviously, not every user story is the same, and I try to be open minded about these sort of things. But I'm really having a hard time imagining a user going File->New Cube and saying "ooh, what white one-drops do I want?" It's more likely they want to add their pet cards first, the unique build-arounds, etc.

I don't want to totally rain on your parade, as you've got some good ideas here. That screen looks SUPER useful for managing an existing cube - suggestions seem like a godsend! And also it would help a new cube designer identify their holes and quickly come up with ideas.

Additional idea: the screen feels like it could also use a text field near the top for either quick adds and/or searches.

Keep up the good work!

 

[Rob Dennis]

My advice for anyone who's dipping their toes into the cube making waters is to just get a pile and/or list of cards that represents your best ideas, then work from there. Obviously, not every user story is the same, and I try to be open minded about these sort of things. But I'm really having a hard time imagining a user going File->New Cube and saying "ooh, what white one-drops do I want?" It's more likely they want to add their pet cards first, the unique build-arounds, etc.

This (and Vince's) perspective is the kind of thing I really do want to hear about. At this point, I'm too insider-info about cube building, and I'm definitely an "alright, what are some black 4 drop flyers that I haven't seen before?" kind of guy, so I have a hard time getting away from the nuts and bolts. There's a lot more "go by feeling" folks than I would have appreciated even a few months ago and I want them to be served.

Additional idea: the screen feels like it could also use a text field near the top for either quick adds and/or searches.

my local friend had a similar suggestion after showing him the mockups that seems totally logical/good

I don't want to totally rain on your parade, as you've got some good ideas here. That screen looks SUPER useful for managing an existing cube - suggestions seem like a godsend! And also it would help a new cube designer identify their holes and quickly come up with ideas.
.....
Keep up the good work!

that's thoughtful and don't worry, raining on my parade would be not providing any feedback at all. :O

 

[VincePendrell]

Just played with Balsamiq a bit and the app seems wonderful. I was using Gliffy a while ago, but it just bothered me to no end. Thanks for the tip!


On the input thing, I don't think you really need to constrain yourself on which input style you can use. Both the separated tab and the cell-editing work for different purposes that might happen during cube creation or edition. You could even have the "separated tab" as a quick add field just as Peter suggested.

This is what I was thinking for the card input window/tab/area:

(options would be better as a folding tab, but balsamiq didn't have one)

Auto completion could work both ways... either by completing the fields after name input (like the following image)...

...or by autocompleting names after all fields are selected (respecting the rules that we set through the options).

(also, pretend that I remembered to put the Add button on every image above)

We could also customize our organization by creating new categories (idea taken from my now defunct app)

and this category would then be acessible through the dropdown menu

 

[Rob Dennis]

Vince, you need one of those "Buy Me A Beer" links. That is some nice mock-upping, and there's a lot of good stuff going on there.

 

[VincePendrell]

Vince, you need one of those "Buy Me A Beer" links. That is some nice mock-upping, and there's a lot of good stuff going on there.

Hahaha, thanks! I've been trying to pick up as much as I can about interface design since my second year in college. I'm glad it is useful once in a while.

Also, no need to pay me a beer if you go ahead and implement the cube organizer.

Speaking of which, I sketched some other functionalities that might come in handy. Not exactly sure if this would be possible, but this might also help beginner cube builders, so here it is:

Each card could have its own tags to help filter/organize cards.

When picking what tags to add, autocompletion could lend a hand to the user by pointing to default tags that already used in the database. Autocompletion could also help suggest cards if tags are selected before the name input.

(tag here is Removal(Creature))

Context-specific tags would be inserted by the user while typing his own tags:

If a new tag is similar to some other tag that already exists, autocomplete might point it to them:

A window specific for easy tag editing would be acessible through button represented by the [+] button.

As pointed above, using card tags has the pitfall of demanding more interface space and the ability to select cards in the cube view to display more specific information about their tags. This might also be a good thing if we get to use the inspector for quick fixes (like I just added spellskite as an artifact and wanted him to be blue, so I just change it in the inspector instead of deleting and re-adding the card).



Well, I hope all of this above is understandable. I'm having a blast playing with Balsamiq and making these interfaces, I would sure click the donate button for an app that has all of these functions

 

[Eric Chan]

The more I think about it, the more I like the idea of tags. Maybe it's just Apple's brainwashing effects on me from their myriad announcements yesterday, but tags seem like a logical way to group, organize, and classify your cards. I guess I already do that, of sorts, in the Google Doc that I use to track my cube. Right now, rather than tags, I have a set of columns with property names - Spot Removal, Card Draw, Counterspell, Discard, Works from Graveyard, Ramp, Good In Aggro, Aggro Hoser, etc. Then in the rows that each card occupies, I check off the column if that property is true. This lets me tally up the totals for each property across individual colours, and sum them for the cube as a whole. To be honest, keeping this up-to-date is a little painful right now, but the benefit is that I can eyeball, say, my total spot removal density at any time.

Tagging would be a natural replacement for this. The benefit of tagging is that we all classify our cards slightly differently, and we wouldn't be tied down by any preset series of tags. Of course, having a consistent set of tags among cube owners would let people quickly draw comparisons between cube lists of varying shapes and sizes, and possibly draw useful conclusions ("most people here run 3% mass removal, but I'm at 6% - should I cut down?"). Perhaps the UI could suggest commonly used tags for cards as you add them to your cube (e.g., for Disenchant, the UI would prompt with tags Artifact Removal and Enchantment Removal).

I'm not the right guy to consult for UI design considerations, so I can't really comment on whether Vince's proposal would make the most sense for entering tags. But I think the concept of tags is pretty open-ended, and most importantly, useful, so let me throw my vote into the hat for this feature!

 

[Rob Dennis]

Eric; tags, for all the reasons you mentioned, was the natural extension of the heuristics that I started with on http://cuesbey.com and where the cube classification part of that user story was going to grow.

Tags are a great way to go about making suggestions, which is where I could see something like going, but there's a currently unanswered question of who is providing the database that has made all those associations. The result of this work would preferably have been that magic sites could drop into whatever they're doing, (test include the external dependencies, etc) so I've initially been targeting features that are supportable just by querying gatherer.

Vince; as I mentioned before, you're amazing. The work/kid/moving-in balance is shifting such that I'll have a bit of time weeknights and this weekend, and you're letting me hit the ground running.

 

[VincePendrell]

Vince; as I mentioned before, you're amazing. The work/kid/moving-in balance is shifting such that I'll have a bit of time weeknights and this weekend, and you're letting me hit the ground running.

Thanks! If you need anything else to help you through the development process, just let me know.

 

[Kranny]

Absolutely loving the brainstorming in this thread.

To contribute, I absolutely hate updating my cube list. For me a simple In > Out functionality which pushes the outed card to an 0n-deck binder would be huge. I often remove cards from my on-deck binder to save space, so having a mini admin area to look at those cards and swap in and out would be great.

 

[VincePendrell]

Absolutely loving the brainstorming in this thread.

To contribute, I absolutely hate updating my cube list. For me a simple In > Out functionality which pushes the outed card to an 0n-deck binder would be huge. I often remove cards from my on-deck binder to save space, so having a mini admin area to look at those cards and swap in and out would be great.

This got me thinking... maybe the Quick Add area could be an Add/Remove/Replace area. If we go forward with the card suggestions for autocompletion (with or without tags), we can make the replace feature into something that helps new users with their updates by using the same characteristics of the card we are removing.

Here's the mockup:

Autocomplete at the remove field would obviously have to point only to cards that we are already running and never let we remove more than the amount we have.

And yes, sometimes we don't want the same functionality on our replacement card, so we can simply disable the functionality by toggling the checkbox.

(heuristics in my brain made me focus more on tags than cmc and type for this autocompletion list)

So, there you have it! A quick way to switch cards from your cube that makes use of another previously suggested feature.

Oh yeah, and the Remove part of the interface doesn't even need all that much fluff:

 

[Rob Dennis]

so, the latest demo code will be continually updated at:
http://rdennis463.github.io/lambic

Currently just the barest essentials of lay outs and getting some hardcoded interactive elements (e.g. tab bar does work, but there's just static content there)

 

[Jesse D.]

Here is a screenshot of something I've been tinkering with for my groups use.

Selecting a card on any of the lists updates the card pic and the oracle text which is displayed underneath. The set abbreviations after each card name are used to get the correct art in the case of reprints.

I'm still ironing out some bugs, most of which are from me making changes for Commander related Color Identity stuff.

Edit. More on how it is organized/"the workflow".

Users can either type in a (partial) card name int the textbox to the right of the "White" section, just above "Search Current List" button. That will find the next card alphbetically in the list just above it, which currently has every card in gatherer loaded. Clicking "Add to Cube" will add a copy of the selected card to the appropriate list based on its color.

All Gold/Multicolor cards go to Multicolor

Cards like Pact of Negation, Evermind, Kobolds, and Dryad Arbor go to their respective color piles(Blue, Blue, Red, Green). I am not sure if that is the best way to handle Arbor, but it will do for now.

The Possible and Ban buttons add the card selected in the list next to the card pic to those lists. This lets me track cards my group wants to try out or never play with again.

A cube is saved as a single file, so you can manage as many as can fit on your computer. The Possible/Ban lists for Cube are per cube, so a card like Yawgmoths Will which might be too much in a fully powered cube could be banned there and also used in a Urza's Block only cube. Or Ban Lin-sivvi in Masques block but not everywhere.

When I enough to release it I'll put it up on github.

 

[Rob Dennis]

so, the latest demo code will be continually updated at:
http://rdennis463.github.io/lambic

Currently just the barest essentials of lay outs and getting some hardcoded interactive elements (e.g. tab bar does work, but there's just static content there)

alright, since then, you can click on a super barebones "quick add" button that does support "type-ahead"

careful observers will note this using a 3.5MB file that's essentially ALL OF GATHERER, heh

 

[Eric Chan]

Really impressed with the performance of the typing auto-complete, Rob! I don't know how you managed to get the widget to respond so quickly, especially compared to most of the existing commercial Magic databases.

 

[Rob Dennis]

although I'd like to take all the credit, it's really because it's auto-completing over data that your browser has already loaded (the 3.5 MB file I mentioned) as opposed to calling out to a remote server after a few letters

edit: some anecdotal testing shows that although the file was really just there as a test/development aid, I may use it since it doesn't appear to be a big deal for my FiOS connection.

wireless phones would be screwed, but :x

 

[Rob Dennis]

ALRIGHT! after what was probably ~8 hours spent "learning" nitpicky things about javascript, the demo at: http://rdennis463.github.io/lambic/ does the most difficult thing:
puts a card that was selected into a table or tables that match what kind of card it is. That's the foundation that every one of Vince's, et. al suggestions are based on. And the best part is that it's self contained so you can just drop it in to your website or whatever

 

[VincePendrell]

Looking good!

Just a question: Why are you saving space just under the quick add button if the card addition is hidden? Not sure if this would be too hard, but I feel that it would be a bit better if the hidden stuff from quick add pushed the table below and didn't lock table interaction. Maybe you have it planned and is under way, but thought I should mention it as well.
Oh yeah, multicoloured is missing, but I guess you might be figuring out what to do with the subcategories.

 

[bella1li12013]

Awesome!I just puzzled by this problem too.

 

[Rob Dennis]

Looking good!

Just a question: Why are you saving space just under the quick add button if the card addition is hidden? Not sure if this would be too hard, but I feel that it would be a bit better if the hidden stuff from quick add pushed the table below and didn't lock table interaction. Maybe you have it planned and is under way, but thought I should mention it as well.

I'm using this a chance to learn twitter-bootstrap, and I'm not 100% on what to do certain things. most likely, I can move the table down, but I'm not sure and if I can't I won't have it hide.

Oh yeah, multicoloured is missing, but I guess you might be figuring out what to do with the subcategories.

yeah, I'm also missing Lands for kind of the same reason. Now that I hit this plateau, I can use most of the logic that I had over at http://cuesbey.com

 

[schof]

First of all, this is all freaking sweet. Great work!

Second, I just want to mention something I don't see above but might be relevant: suspend costs.

 

[Rob Dennis]

First of all, this is all freaking sweet. Great work!

Thanks , I'm now more confident that there's a correlation between effort and "betterness" and I'm very happy about that.

Second, I just want to mention something I don't see above but might be relevant: suspend costs.

definitely, this is the kind thing that I had put in http://cuesbey.com (suspend cost acting as mana cost) and each of those checkboxes are examples of heuristics that I know I want to support