Adding items to lists


#1

I’m doing mock-ups for a flashcard* app. I have decided that a card/word** must belong to a deck and that a deck must belong to a class (or would “course” be a better word?) and that a class must also have a language associated with it.

In the app you have the Classes screen where you can add and remove classes. Once a class is created you can add decks to it. Once a deck is created you can add words (cards)** to it.

Please see the pdf below for clarification.

https://dl.dropboxusercontent.com/u/22188416/flashcard_app.pdf

First there is a floating action button that opens up a dialog box where you can enter the information necessary to create a class (language and name).

Then I need to add decks to the classes. I have to do it in the class itself since there can be several classes on the screen simultaneously.

Then there’s the screen where you add words/cards to the deck. I could use the same method as above, but having the entry field at a bottom of a list that can contain hundreds of entries feels like poor design to me.

So I have three lists and three ways of adding items to the lists. It seems rather discoverable to me, but I can also see that it is inconsistent. Do you think this is an acceptable solution, or is there a better way of doing it?


_*Flashcards are a language study aid. You write a word in the language you're learning on one side, and write the same word in your own language on the other side._

**I’m struggling a bit with terminology too… words are created elsewhere with translations, mnemonics and other info, and the cards are created on the fly from the words in the deck. Maybe I should call them cards here too. I thought it was a bit more clear to write “Add a word” because that’s what you really do.


#2

Hey Bleke,
please keep in mind I’m only exploring here, ignore any apparent condescension.

removing the FAB
https://nimbus.everhelper.me/client/notes/share/627522/oivp8y5bw7ayofaomg5l

This pattern seems unnecessary. Why use the “FAB > dialog” pattern when you have other useful patterns? I guess it’s pretty popular… if you wanted to use the floating action button as you suggest here >

Using the FAB
If the floating action button is floating, why would it be at the bottom of a long list? I think it floats over the content and you could use it for any primary action on any page. Maybe I missed something. I used to use an app called Textra for SMS (loooong lists), when I would scroll down the (+) would appear. (see: http://www.infinitelooper.com/?v=fhC3kTcOVhI#/105;112)

Material design
I’d never actually read the material design documentation. Ironically, it seems the in-browser PDF software I use seems to be “stretching” the floating action button (FAB). You can see in the screenshot that there are 3 of them. Thanks for the opportunity :slight_smile:


#3

Thank you! I don’t quite see how to add new classes with your proposal. And I think that list should primarily be lists and not have much functionality except listening for clicks. Even having the ability to add decks in the list is probably stretching it.

Also, I don’t want the class to be created unless both a language and a name has been chosen for it. With a dialog the “add class” can be greyed out until both criteria are fulfilled.

But your design did inspire this idea which I think is better than using a FAB: https://dl.dropboxusercontent.com/u/22188416/flashcard_app_2.pdf

Because I’m a complete novice at this and don’t know many patterns.

It isn’t at the bottom of a list. It is on the lower half of the screen, yes, and it stays there as the list grows longer much like the FAB in Textra. Anyway, you’re right. Let’s get rid of the FAB.

I bet that PDF viewer isn’t a google implementation. The Material documentation is very clear that there should never be more than one FAB on a page. :slight_smile:


#4

TBH I didn’t think it that far through, nor was I completely sure what I was looking at :smiley: … I can see now even that my original understanding of the screens was incorrect. Regardless, I roughly understood the patterns I was seeing and just wanted to propose a way out, I know how tunnel vision goes when you look at your own work for a long time.

Patterns
Also, regarding what I keep calling “patterns” - that’s a sort of catchall term. It can refer to actions, how something is achieved (adding things to a cart, adding cards to a deck, sending a message, receiving a notification, etc) but it can also refer to visual patterns (google’s material design, or components a la patterntap ). When you find a pattern that works for X, it’s worth seeing “how it might” work for Y.

In general, I tend to think of everything in their most basic form: as list of x that get sorted, filtered, deleted, etc. I think that because of this, I feel pretty comfortable thinking of elements in very different contexts. I notice this isn’t shared with some of my peers.

But anyway, I’m just happy I could help. I surely prefer the newest iteration.


#5

My description of the problem was messy. I was thinking that as I wrote it.

I think we’re pretty much alike there, but at the same time I’m wary about breaking conventions that the user has gotten used to. If I do it should be completely obvious how it’s supposed to work. I’m afraid that tapping an unlabeled flag is slightly outside the range of the obvious. :wink:

Patterntap seems interesting. Checking it out now.