Designing Tomorrow’s Physics Education
& Beyond
Physics is hard. Getting a degree in Physics is especially difficult. As an undergrad about to graduate from Cal with a degree in it, I think there are a few things that can be done differently with how modern technologies are being integrated into the curriculum. Inspired by this, I have come up with a platform to better communicate Physics as a whole— from the textbooks, to the course requirements, to getting research. It’s not just a glorified ebook or an event calendar but rather a whole new way of organizing and meeting the needs of a Physicist. While this design focuses on Physics @Cal many concepts can easily be applied to other higher education fields such as Mathematics, Chemistry, etc. Now before we dive in there’s a few things you need to know.
The Context
Things are a bit convoluted at the moment. Brought on by Operation Excellence, UC Berkeley is undergoing a complete overhaul of it’s web systems across the board. For mail there was the transition from Roundcube and SquirrelMail to bMail which is hosted and managed by Google. Departments are reexamining their websites and are getting a fresh coats of paint by moving towards a trendy graphic centered design. bSpace, UC Berkeley’s website for getting homework and updates on classes, is being replaced by bCourses (managed by Canvas) which tries to solve hierarchy issues of the old.
In addition to these updated systems, there are also the old ones that have yet to be updated. At minimum an undergraduate physicist at Cal would have to interface with bSpace (hopefuly not much longer), bCourses, textbooks, bMail, the physics website, BearFacts, Telebears, and lastly your college website (either Engineering or L&S). It’s a lot to take in and manage on your own. That’s not to mention anything of Facebook pages or university webpages. Often times the experience is very patched together with a strong sense of old paradigms holding these systems back. It’s also not quite clear who the end user is in each case and can vary amongst the websites. The new updates to some of the systems are great however none of them take the opportunity to revolutionize undergrad education. It’s like a fresh coat of paint on a old car. The problems are still there. This led me to ask the question…
What does the future of education look like?
User Research
I’ll be honest that I first didn’t approach this issue with the larger perspective as I do now. I was mainly focused on Physics and most of the user research that I did in the beginning was talking amongst my peers about what sorts of things they didn’t like about bSpace or the PDFs we were given in a particular class. We would exchange annoyances about the learning process with one another and grumble about the new layout of bCourses. There were also day to day issues that I would pick up on such as only bringing one textbook a day to do homework because you physically couldn’t bring two of them to campus. The most common solution I have seen is to have crappy, scanned copies of ones textbooks on an iPad or tablet in addition to lugging one of the large textbooks around. This way your back thanks you in addition the PDFs work in a pinch if suddenly a bunch of your classmates decide to work on Quantum Mechanics and you don’t have a hard copy with you.
Another thing that I have found is that class notes are less utilized than reading the textbook. This has to do with the fact that most of the time the professor lectures on material that is covered in the book and most of the time homework problems come from questions in the textbook. I’m definitely not saying that lecture is not helpful but rather that it is not something that is constantly referenced multiple times a week. In addition, most of the confusion that my peers and I found ourselves in was linking the material covered in lectures with the material covered in the textbook. For example, in my Analytic Mechanics course we learned small angle solutions to the double pendulum in class using a particular lagrangian. When it came to doing a similar problem on the homework, my peers and I couldn’t quite utilize our notes properly because the textbook (which the question originated from) solved the system slightly differently. It’s a small question and thus probably wouldn’t have been brought up in office hours. These discrepancies came about fairly often and while they weren’t detremential to understanding the material it would have been nice to get clarification for the smaller details that require specific context.
The most common web tool used in Physics is bSpace and bCourses (with bCourses being the newer of the two). Both are used in the same way—post grades, announcements, a syllabus, and homework/review sheets. I like to think of it as a bulletin board for professors. It works fine however it leaves a lot of work on the professor/GSIs (graduate student instructors) to fill content out and keep things updated.
Things feel empty and even though the new bCourses allows for more conversations to happen amongst classmates it’s hidden within submenus. Because of this, most of the discussions I have are limited to the classmates that I am friends with on Facebook or have their cell number to text. Keep in mind these are also brief discussions due to the fact that physics equations don’t translate nicely to chat interfaces.
Ultimately, these types of issues manifest themselves in many aspects of a Physics undergrad career. While they might seem small, the friction between the analog practices of the old (what the professors are used to) and the digital communcation of the new (what students are used to) is left to be swallowed by the undergraduates.
Side note: If you are curious what kind of digital technologies there are for higher education in Physics, its pretty slim. In my experience the best that Physics has to offer is over at Hyperphysics, The Feynman Lectures, and Mastering Physics.
The Main Focus
With this in mind I feel that there are three key areas for improvements in higher education technologies.
- Making the reading experience approachable and connected through the use of clean design, links, and integrated comments.
- Providing an easy way to communicate with ones peers using common terminology and symbols so that the barrier to having a technical discussion online is removed.
- Providing a space where students can effectively see their progress as a Physics major and communicating all the available campus resources.
Current technologies are either underpowered, underutilized, or unapproachable. They feel like small additions that don’t quite understand the background for which they are being used in. As such, the function and style should reflect the fact that its a social learning tool rather than a corporate dropbox.*
*dropbox as in a file uploader — I ❤ Dropbox.
The Ansatz & The Start of A Solution
While I wanted to keep the design clean and modern I wanted to reflect the qualities of a Physics textbook. In addition to being a free web font, I chose Adobe Garamond Pro for the content text because this serif font mimics the bold typography found in many Physics textbooks and makes the material readable, familiar, and ultimately beautiful. For the color scheme I chose to go a similar blue hue found on the cover of many Physics books (Griffiths in particular). The blue I choose was a bit brighter than most of the books because I wanted the platform to feel less of a corporate place but rather a more playful and exciting enviornment to learn. Also, if you examine closely, the font color isn’t black but rather a golden dark grey that gives a bit a warmth to the text.
The hierarchy of the design is clear: focus first on the main content, second the figures, and lastly the UI. A number of little details and design practices work together to make the experience intuitive, dynamic, and powerful. I’ll go over a few features below.
Content Cards
Inspired by the Material Design card layout, I sought to utilize these spaces to help govern the content, to organize figures, and to allow for an adaptive, dynamic layout. These cards help communicate the large amounts of information that can seem daunting in other contexts such as PDFs or ebooks (take a look at this chapter in The Feynman Lectures for a contrasting design). By splitting each section of a chapter into its own card the barrier of being overwhelmed is diminished.
Ribbon Tools
Ribbion tools provide easy access to some of the options that users will want to use most often in the context of reading. These include common equations that are usually found at the front or back of books, font options for making changes to how the context is displayed, and a highlighting tool used for creating notes. When a user would enable the “common equations” a card (similar to a figure card) would move in on the right to be accessible while reading. Tooltips display over each UI item when users hover over them long enough. This way new users can get an idea of what each object does while not annoying more experienced users.
Inline Comments
A basic forum-like question and answering system (think Piazza) doesn’t quite translate well over to Physics. Context is often necessary when asking a question and it is often about the textbook. Inline comments try to solve this issue by connecting questions with parts of the textbook. Users can hover over a paragraph and click the ask a question icon —much like how you can do with this article on Medium. Unanswered questions asked by other classmates show up inline as a red question bubble however answered/finished conversations show up as green. The icons are meant to be small and out of the way of the main reading experience. While still being unnoticeable, they cue the reader that there is more information if they wish to indulge into the conversation. In addition to providing this “iTunes Album Art view” to seeing comments there is an overview tab to see all of the conversations going on. This flips the main content card backwards revealing the discussions related to that section. For each question Context sections are provided to help the reader understand what the question is referencing. These Context sections include at least one sentence and are no more than 3–4 lines long. The arrow in the corner of each Context section bring the user back to the other side of the card showing the full context of the question.
Smart Figures
Smart figures allow for easily viewing diagrams and figures. With textbooks and digital books figures are inline. This makes it difficult to reference back to if a section is long or a later section refers back to an earlier figure. While this might seem small, looking for a diagram takes away from learning and often ruins a flow of consiousness. Smart figures will scroll only if they are no longer needed in a section. As you scroll through the main content corresponding figure cards will scroll in and out as you need them. The little icon in the left makes the card expand out to take up the page to allow closer inspection. Eventually, I would love to see these figures become interactive to allow a greater connection and exportation of the material. Making figures interactive (perhaps with D3) is a daunting task to do for a whole textbook (let alone a whole catalog) however the payoff is huge as users will become more motivated to learn through interactivity rather than just remembering the motions of problem solving.
Conclusion
The project currently still has a long way to go however I think these are the right steps towards rethinking how higher education is communicated. Even though I haven’t addressed all my main topics with The Ansatz just yet I hope you see that these tools need to explore how design and interactivity can help provide a deeper, more meaningful way of learning. It needs to be personal, connected, and clear. This project illustrates my approach to problem solving and how I try to come up with solutions that are purposeful. It’s something that is near and dear to me that has been brewing away ever since I first saw bSpace. There is a lot more planned and some more to be worked out. I hope to produce other articles detailing my progress on the other views and to have a fully working prototype. In the mean time…
Reach For The Sky — Woody, Toy Story
I am a physicist, designer, and musician working at the intersection of Physics, Music, and Design. You can find more about me at my Website. If you have any questions or want to get in touch you can email me at kev@berkeley.edu
Social: LinkedIn, Behance, MusiciansPage, GitHub
I want to thank my WDD instructors for helping me along the way (sorry I couldn’t present!), my friend Michelle for Design advice, and all my friends & family who let me ramble on about design practices. You all inspire me to push my ideas and dreams further than I can ever imagine.
