One of the most common design challenges we face is providing learners with a set of pathways for learning that include a quick overview of a set of possibile next steps, and then the option to dig deeper and learn more about specific topics.
The materialize css framework gives us a few options to explore - and we often find ourselves trying to compare and gather feedback on which of these options to choose in different scenarios.
Let's look at an example from our current reading strategies project. How can we provide learners with quick overview of a bunch of reading strategies, and then allow them to dive in and learn more about each strategy? Also for this project, we're thinking about how to present both text and media together for each strategy.
Cards with Reveals
Card Reveal - 1
Here's a start, using the "card" componenent in materialize and the reveal feature, which allows you to click the card to reveal additional content (kind of like flipping over a 3x5 card). This approach gets the key elements on the page, and allows the user to click the card to see the video. The main challenge here is that it is not entirely obvious that you need to click the card to reveal the video. Another challenge is that the tip description gets lost when you're watching the video.
Summarizing content in your own words ensures that you have understood the text and helps you remember what you’ve read.
- Whenever you encounter an important concept, paraphrase it in your notes or outline.
- Avoid summarizing using the exact words in the text, taking notes verbatim is not nearly as effective as writing in your own words.
- A few words or a sentence will suffice for each summary.
Card Reveal 2
Here's the same idea again, this time replacing more_vert with a more prominent button. Better, in that the video is easier to find, but we face the same challenge with the tip text getting lost while watching the video.
Summarizing content in your own words ensures that you have understood the text and helps you remember what you’ve read.
- Whenever you encounter an important concept, paraphrase it in your notes or outline.
- Avoid summarizing using the exact words in the text, taking notes verbatim is not nearly as effective as writing in your own words.
- A few words or a sentence will suffice for each summary.
Custom Card with Grid
Another approach is to try to do all the work on the card, without the reveal. The default card layouts in materialize make this challenging, so here we're creating our own card layout using the materialize responsive grid to place items inside the card.
Paraphrase as you read
Summarizing content in your own words ensures that you have understood the text and helps you remember what you’ve read.
- Whenever you encounter an important concept, paraphrase it in your notes or outline.
- Avoid summarizing using the exact words in the text, taking notes verbatim is not nearly as effective as writing in your own words.
- A few words or a sentence will suffice for each summary.
What do you think? Which is your favorite?