The idea for Flipping Flashcards was inspired by an online discussion about studying, where the consensus was that flashcards were a brilliant tool for learning anything under the sun and the key to passing exams. This being the 21st century, I was not about to make paper flashcards, but a realistic flipping animation was essential to my vision. At no point did I try any existing flashcard apps; it was no more than a millisecond between “I’d like to try a tool like this” to “I think I can make a tool like this”.
The main features I envisioned for this project were:
– the card should seem to physically flip,
– the user should be able to upload their own content,
– the user should be able to influence which questions get repeated more often.
All of these generated issues that needed solving.
Coding the interface was the most fun part. For the first iteration, I went a bit crazy with a retro neon design before settling on a more toned down colour scheme.
I chose jQuery Flip as the mechanism to handle card movement. However, it required additional work to make the design accessible. (I ended up binding the space key to the flip() function. In the first version, buttons for assigning a rating to each card were positioned outside of the actual flashcard.
A crucial part of the project was allowing the user to indicate how well they knew the answer to each question and translating that input to how often a particular card gets shown. To that end, each card object is assigned a rating of 6 points when created. These ratings indicate how many times the card gets copied into the temporary array out of which the next random card is drawn. This array gets created every time a new card is needed, so the number of cards gets refreshed whenever a rating changes; the user's click on one of the three rating buttons removes 2, 1, or none of the card's points. This system is easy to customise - changing difficulty is as easy as assigning a different rating when the card objects are first created. (Difficulty level was included as an option in the settings.)
The single most important decision in the lide of this project was bringing in a test user. His feedback, combined with Jakob Nielsen's article on design heuristics, led me to implement the following changes from version 1.0 to 2.0:
- add a welcome page with a prominent call to action,
- automatically prompt to choose a study subject on load,
- more muted default colour palette, with the option to choose neon colours from settings,
- integrate the rating stars into the back of the flashcard,
- include a status box with information about the current card set, the user’s progress, and current ratings,
- introduce keyboard shortcuts,
- remove detailed user instructions, opting instead to make the interface self-explanatory by employing game-like design solutions.
This project is not completely finished and may never be. I have yet to find the one best format for importing user questions; .csv is a simple, convenient, readable format, but its lack of text formatting features makes it only suitable for simple questions and one-sentence answers. More options are offered by .json, but in both cases the user has to create a file especially for use with Flipping Flashcards.
With accessibility in mind, I made sure the interface includes keyboard shortcuts for rating as well as flipping the card without clicking.
Since this project has changed so much during development, version control was essential; I took advantage of the option to work on different branches without feeling like I needed to give up one approach to try another. However, for the next project I will make sure to follow a design plan in order to stay on track and avoid working on multiple features at once.
Additionally, I will involve user feedback at a much earlier stage. It was essential in order to flesh out Flipping Flashcards 2.0, but those choices could have been made much sooner.
Finally, in an ironic twist, I discovered that studying with flashcards is not my thing after all, and I’ve since gone back to trusted mind-maps and lists.