Week 7–8 Megapost
Most of my work recently has been onscreen in Keynote. Currently my process has been working like this: I will begin developing a particular “screen” by doing two or three “microframes” which are just little tiny 3“ x 4” pencil wireframes and then iterate off of those in Keynote. This workflow was adapted from Travis Isaacs in a lecture I’ve referenced several times, Keynote Kung-Fu: How Ninjas Wireframe (a wonderful watch, if you are at all interested in the power of Keynote).
So, like I said in class, I started last week out with a visual identity crisis. Jan and Maria had some really helpful comments about the aesthetics of my interface. They gave me feedback particularly on this comp: V1.
They were generally receptive to what was going on, but they shared a desire to see my sketches take form somewhere—particularly in my narrative scenario video. In my interpretation, this would mean switching general execution from an animated Keynote prototype to a walkthrough of hand-drawn (or computerized in a hand-drawn style) wireframes. I had not given this much consideration (given my love for digital execution methods), but I thought they had a good point that there was a degree of freedom that I had with the hand-drawn wireframes, and it might shift focus from the UI visual design toward a more holistic overview of the service, which I am in full support of.
I considered several strategies before I wound up (not surprisingly) back in Keynote, however with a new mindset about how to execute the visual design. Inspired partially by the Windows “Metro” UI design, which was brought back into my mind by Pentagram’s recent Windows 8 identity, I wanted to take off the layers of “polish” I wiped all over my initial Keynote wireframe (above). The gradients, drop shadows, etc. certainly made my interface feel more “real,” but I don’t believe they were doing me any favors other than the “real-factor.”Windows 8 Metro UI
At this point, I’m getting a little tired of using the “Apple UI crutch” and it feels quite like I’m jumping from a sinking ship with all of the outlandish interface Apple keeps delivering (I’m looking at you, iPhoto for iOS). It’s like they’re constantly trying to out-do themselves in the Skeuomorphism Olympics. By “Apple UI crutch,” I’m referring originally to a systematic application of subtle gradients and slight drop-shadows that give almost every interface element “depth.” However it has now gone as far as this interface blunder:
It’s the idea of taking affordances way to far. Affordances are the qualities that make a doorknob look like it should be twisted, or that make a lever look like it should be pulled. These may have once been necessary in UI design, however today’s users are quite familiar with the concepts of buttons, entry forms, and scrollbars. While consideration should absolutely be taken that these visual devices appear to be interactive, and that their functions should be obvious, aesthetic complications such as gradients and shadows are by no means necessary, in my opinion.
I think it’s about time that I followed my own advice here, as I am subject to over-complication of my interface visuals at times. With this project, I am going to dedicate lots of effort purely into simplifying all interface at every level. That said, I will make sure to remembered Jan’s important advice earlier in the semester when he cautioned me not to go around using “simple” all willy-nilly, particularly when, after all, I’m striving to accommodate complex content.
My first instinct, somewhat of a knee-jerk reaction, was a quick and dirty translation of geometric form to computer-rendering-of-hand-drawn form. In hindsight, I have no idea why I thought this would work. Also to note: using “Marker Felt” won’t help show anyone that I know how to design anything. I plan on this being my first and last attempt (ever) at this sketchy strategy of execution: V2. OOPS!
I kept going, and I wound up with a visual solution that takes a lot of elements from my wireframes: namely the focus on value (formally; i.e. color-value/brightness), and then stroke, as defining visual factors. This is opposed to previous attempts that foregrounded at first, “shinyness” (V1), and next exclusively “stroke” (V2). Value is really simple, but does a lot of work. At the beginning of the project I bought a bunch of grey markers, and they make my interface sketches make about twice as much sense.
Value, when used correctly in UI, can:
- Define space
- Establish hierarchy
- Reinforce visual and conceptual grouping
And it does all this with subtlety and elegance, particularly when working in grayscale. Applying stroke can help with the three points above, but I have to be careful. In some cases, it simplifies interface elements, but often it can complicate everything.
Here is my third major revision to the interface: V3(a).
Some of the breakthroughs in this iteration were: The development of a tab structure to reinforce navigation and “sense of place;” Grouping notes together based on the source that they reference; and Settling on a “final” visual design aesthetic for my interface. It really relies on the work of value that I talked about above.
Overall, this idea of frictionless software in an educational environment really does demand interface that requires little to no conscious thought and consideration. When using the software, I want users to be concentrating on objectives: content consumption or manipulation, writing notes, sharing -content- ideas, or asking questions; not navigating menus, switching modes, dismissing prompts, or searching for a feature.
In what I hope to the the final significant change to the UI, I did a re-group of the primary navigation structure. I tried to emphasize the “add a note,” and “ask a question” buttons, as these are the most important functions for students. Changing their appearance clarifies that “adding a note” and “asking a question” are actions, while the other buttons like “Notebook” or “Assignments” are really just portals to other places. Stretching the toolbar down for the two primary fuctions also let the tab structure I developed in the last version nest right in that little space: V3b.
I have these two screens also built out, but to explain the functionality really requires motion, so you’ll just have to trust me that these will make sense:
Narrative User Scenario Video
Last week I mentioned and briefly showed a clip of a “Demo video” for Virgin Mobile’s LG Optimus V phone done locally by Beam Interactive. What I liked about the video was it’s simple but effective setup for a demo:
- Grab a decent camcorder and shoot hands using a device in front of a green screen. Sync all hand motion to interface motion (this is quite difficult with touch interfaces, but now I’m leaning toward doing most of my video on a laptop, rather than an iPad, which would be a lot easier).
- Go into AfterEffects, and use motion tracking to superimpose your interface video (which I would export from keynote) onto the device itself.
- Chromakey out the “green screen” of the hands-and-device footage and pop a super blurry environmental photo in the background. (“Classroom shot” or “bedroom shot” just to add some general context.) The Virgin Mobile demo uses high quality video for all visual narrative development, but I would probably have to resort to still photography montages or basic iconographic AfterEffect animation (either would probably be fine, but photography might feel more natural).
With all that said, there is a chance that this particular application execution might be too involved given the amount of time left. In that case, I would probably use simple Illustrator graphics to add context of the device and user’s hands/fingers. I could make basic environmental backgrounds, or even consider using photography-as-collage. This direction would free me up from reality, however it would demand effective and well-executed illustrations (which are also time-staking).
This has proved to be one of the hardest problems to solve, believe it or not. I am looking for some sort of identity that encompasses the accessibility, ubiquity, and unifying nature of the project. I want it to say how it brings all of your digital resources together, and what I have now is “Gather”:
However, “Gather” misses any connection to school, education, or the learning environment. And I think this is a big problem. So I’m definitely going to be iterating on this some more, and I’m not opposed to going back to the drawing board on this one, especially if people are particularly put off by it.
I am a little bit more sure about the visual identity. I want to preserve the simplicity and clarity of the interface visual design, but all Helvetica would feel like certain death for any originality or feeling of a “human hand” in the visuals. I think a nice chunky-ish serif is the solution. Right now, I’m using Arno Pro semibold caption, and I think it’s working quite all right. The service name is the problem.
Finally, I get to the state of the poster. I haven’t settled on any visuals yet, but I wanted to do some experimentation with general visual style, design, and content. Again, I want to communicate the idea of ubiquity and “synchronosity” (to steal a page from the corporate jargon dictionary). Here is a quick Keynote 1024x768 style test.
Here I’m having the same problem I’m having with the general identity design. It does’t say anything about “school,” “education,” or “learning.” I like the direction the visuals are headed in, and with enough time and care, that the poster can get where it needs to be. My only concern is their need to communicate “SCHOOL!”
Any comments, suggestions, or corrections are very much appreciated.
First of all, I successfully started a worklog on my website for all my degree project thinking, writing, and sketching. I’m glad it has a place to live for now as I consider how to “package” my “final process” piece. Anyway, I just basically modified my Tumblr layout. It took a lot more work than it looks like, and there were some hiccups, but everything appears to be smooth sailing for now.
The past two weeks have been pretty crucial for my degree project. No big revelations, no significant changes, but I think I’m making some good progress and finally moving beyond concept and on to execution, which is a relief.
Maria’s resources on the wiki have been helpful for beginning to plan the narrative for my user scenario (particularly The Narrative Storyboard from Sketching User Experiences). I have been thrilled with the high quality of rescources available on the interaction design process. Of course, the work of Bret Victor is mouth-wateringly brilliant. His website worrydream.com is an extended glance into the mind of a true genius. Magic Ink, Dynamic Pictures, and Explorable Explanations are fantastic examples of interaction criticsm. Also, I cannot recommend watching this lecture enough: Bret Victor — Inventing on Principle. There’s also anotherlecture I recently posted on my blog about protyping with Keynote that I’m super excited about. The lecture,Keynote Kung-Fu: How Ninjas Wireframe, is by a young interactive designer named Travis Isaacs. Isaacs published a “graphic toolkit” that Brian introduced us to in Information Architecture known as “Keynote Kung-Fu.” It’s like a framework for building interface prototypes, and it’s part of how I’ve been working on my degree project. Isaacs referred to Mark Kraemer’s High Fidelity Prototyping lecture, which is also a great read. Read more on Keynote Kung-Fu →
I have also picked up quite a few of my interactive process techniques from a surprisngly keen article on Smashing Magazine called The Messy Art of UX Sketching. The author recommends buying a quilting ruler, grey markers, and Post-Its. I swear that is the holy trinity of sketching interactive prototypes.
Here’s the closest Keynote prototype I have built out so far:
I am using Pictos for all my icons. Pictos are awesome. Check them out →
Another great resource I’ve come across recently was a 60 Minutes segment on the Kahn Academy that my girlfriend pointed me to. I’ve mentioned Kahn Academy several times, but I haven’t gone into too much detail. Salman Kahn’s mission statement is to provide “A free world-class education to anyone anywhere,” which is ambitious, but the guy seems to be doing it. One of the most interesting things I saw in the video was the idea of “flipping the classroom,” where students watch lectures and do what we traditionally think of as “learning” at home. In class they practice exercies and receive real-time help from their teachers as they do their “homework.” My platform does not adopt this extreme model. While I strongly support the idea, the education system is not there yet, so I want to create something that can serve both traditional and “flipped” classrooms. In fact, my platform would support a “flipped” classroom quite well in its focus on universal accessibility and being able to get the same information on any device at any time.
Also I was really inspired by some stuff Evernote has put up on their site about working with Evernote in schools. Several schools nationwide have adoped Evernote-as-a-notebook, and Evernote has featured a couple on their website. A lot of my “note” interface and thinking is related to Evernote — it’s a sucessful example, it works well, and I use it all the time for my own life (school, work, and personal). I think my platform can learn a lot from Evernote.
The most important recent breakthrough is the development of the “note taking” process. I’ve been struggling all along with how students input their own information into my platform. I knew from the start that my solution had to deal with “notes” — how the students took them and how and where they stored them. I’d played with systems that had multiple tools for “highlighting,” “note taking,” and “clipping,” but this felt very clunky, and Kat pointed out that this would be a nuisance in the classroom. If students are trying to take digital notes on a lecutre in class, it has to be super simple. With the help of my girlfriend Kat, I think we’ve come up with a very logical and elegant solution. The student takes notes with one tool. When a student selects the “add note” button, the first step is to select where the note will go. This acts as a highlighting feature. Students can select a passage of text, an image, a video, a headline, or anything else. Upon releasing the mouse (or finger depending on the device), a blank text box prompt immediately opens up for the student to take their appropriate note. They can look at all of these notes together in their Notebook, or see them in context as they have taken them on their material. I am excited to build this feature out into the interface.
I also had some interesting thoughts on privacy/sharing this past week. I’ve decided that anyone can share any note. I understand this is dangerous territory because you start getting into the “copying notes” issue that teachers regularly have at school, but I think we are talking about a new kind of learning where all sharing is positive. All sharing promotes discussion and furthing of the class material. Again, with the help of my girlfriend Kat, we decided all materials should be re-shareable. That is you could “re-pin” or “re-blog” anyone’s note into your notebook. It would always exist as distinctly “their” note, but I think sharing notes is really powerful. Instead of shaming or pushing those who copy notes, how about rewarding those whose notes are copied the most? My thoughts on this matter are still somewhat immature, but I believe I’m on the right path with this “universal sharing” direction.
How do we unify digital learning resources into a single cohesive environment that can serve complex content but is simple to use? (February 20)
How can we utilize interactive design to make digital learning environments more cohesive and user-centric?(February 14)
How can we rethink classroom experiences by optimizing technology to engage students and augment the learning process?(December 7)
I’d like to start with something I found a week ago that I had forgot to mention in class or here on my worklog. STEPS was a 2012 IXDA Interaction Award-winning project created at the Art Center College for Design in Pasedena with the guidance of Microsoft Research:
It is essentially a service design project that manages classroom activity for teachers and lets students learn and work, both using tablet devices in a one-to-one digital learning environment. This is solid work. At the same time it: 1. makes me nervous that this is work that has been done many times. It is hard and I’m intimidated by efforts such as STEPS, wich is backed by hardcore research and user testing and is presented with polished deliverables; and 2. reaffirms my position on the matter. This work is high caliber stuff and they are thinking along the same lines I am. If I am to stand on the shoulders of giants (as all smart people do), then my only choice is to see what they did right—improve upon it, see what they did wrong—fix it, and then frame the whole damn thing in a way that makes sense to my audience (high school and community colleges, rather than the K-12 crowd that STEPS serves).
Jan very helpfully stopped me when I said the above in class last week. He told me that yes, this is indeed what I ought to be doing. I keep talking about the “learning environment,” “learning management systems,” “learning software,” lectures, and text books. I have been getting caught up in defining exactly what my role is in this system. This idea of "unifying digital resouces" seems to be a great mantra for the overall goal of what I want to be doing.
Somewhat disappointingly, I remained mostly in research mode this week. However, the good news is that I read some awesome stuff. More Bret Victor, for the most part, but this stuff was pure gold and related well to the goals of my project. The conclusion I came away with this week is that my platform must serve as a layer of abstraction between the disparate and complex digital learning resources that are available for students and teachers. And Bret Victor has urged me in his paper entitled "Magic Ink" that the primary way to do this is through… GRAPHIC DESIGN (dun dun dun!). With all of the hype around interaction, user experience, andengagement, it is almost funny to hear such a sharp and tech-minded thinker championing “good ‘ole” graphic design as the primary design practice, even in interactive and dynamic media. But I think the guy has a great point. The paper talks almost exclusively about what he calls “information software.” In “information software,” Victor argues that interaction is bad—it is the enemy of learning, unless said interaction is explicitly for the sake of educating the user. He walks through the process of creating a BART train schedule widget for the San Francisco transit authority where he created an interface that relied foremost on graphic design rather than interaction (see below).
How can we utilize interactive design to make digital learning environments more cohesive and user-centric? (February 14)
How can we rethink classroom experiences by optimizing technology to engage students and augment the learning process?(December 7)
This week I had hoped to jump into primary research, but something else happened. I would not say that mydirection has changed, for the project, but I believe I now have a much better way of framing my idea. Up until now I had been stuck in a “lecture” environment. Last week had some really fantastic revelations, but the best was right here in last week’s crit:
This idea of a cohesive educational experience has really been exciting for me. Rather than make my life harder, it actually solves a lot of my problems. The more research I have done, the more I find out that the things I want to do have been done a million, gazillion times. BlackBoard Learn+ is the closest thing to what I want to make. It currently has three free open source competitors in Moodle, Claroline, and ATutor, and while functional, none of these are without major issues. And these are just the Learning Management Systems.
Beyond these are some really fantastic sources for educational interactive simulations available for free online. I was really blown away by the University of Colorado’s PhET collection of free, quality material. Connexionshas free “modules” that go over all kinds of source materials in a text-book-like format. However, these digital resources all live separately, now.
My goal is to create a digital learning environment that unifies all of the disparate digital resources into a single, cohesive, simple product.
How can we rethink classroom experiences by optimizing technology to engage students and augment the learning process? (December 7)
1:1 High School Case Studies
I started this week with what I call “Exploratory Research.” This is where I read anything that I can find that excites me about my topic, but I don’t quite know what to do with. I read a lot about Burlington High School’s 1:1 (“one-to-one” refers to education initiatives that provide every student their own personal electronic device) iPad initiative program. I was planning on going in to visit the school last week, but Laura found out that the principal has weekly information sessions where he (I assume) briefs members of the public and press about how BHS operates its digital learning environment. I got TONS of info, and I still have much more to go through. The principal, Patrick Larkin, seems largely responsible for the paradigm shift at BHS. He runs aschool-related blog and updates it regularly. I had planned on trying to interview Mr Larkin ASAP if I could, but I recently dug into his blog content and theres so much! He has taken the time to extensively document all of the progress he has made with the school. In addition, a teacher at the school, Andrew Marcinek, writes for digital education website, Edutopia and has written a five-part series on digital learning.
One of my favorite parts of this process is when Marcinek describes the process of teachers creating digital resources for students. He outlines a process where faculty form groups according to discipline and discuss yearly curriculums and gather data in a Google Doc of Wiki page. This is slowly refined and restructured. They brought advanced digital educators to show the teachers how to turn this into an ePub format that they could distribute to students via iBooks. This got me super excited. First, I thought it was so cool how teachers essentially created a textbook in a matter of days. They even had workshops on Creative Commons on how to do this process legally! It reminds me of the teachers who photocopy readings and have them bound at the Print House. No more accepting whatever crap big textbook manufacturers decide to push on students. Second, this is really inspiring for my project. I had not yet gotten in-depth about thinking about the “authoring” process (is this “just” an aggregation of resources?). This word has become very important. I hypothesize that my product/service could have three major states: 1. Teacher Authoring; 2. In-Class Presentation and Interaction; and 3. Out of Class Studying and Interaction.
VLE’s, CMS’s, LMS’s, etc.
I also really ramped up my investigation into the “Digital Education Landscape.” I’m trying to avoid the whole “competitive analysis/landscape” terminology, because I don’t think of the other products/services so much ascompetition so much as inspiration — additional services that may be rolled-into my service, or maybe just alternatives to my product/service. Regardless, there are TONS of these guys. Starting out required that I figure out how the hell this whole Education Environment works and what systems are at play.
One of my first important discoveries was the terminology of how these systems are referred to in education. Moodle, one of the first targets on my list, is classified as a LMS or Learning Management System, which is essentially a Content Management System specialized in handling academic course information. Think “Wordpress for school.” This is a fantastic idea. However, where it stands, Moodle is right on par with Blackboard as far as I can tell so far. I spoke last week about Blackboard’s clunkyness and poor class integration, and Moodle suffers from both of these problems. The class integration can be mitigated by good management (Brian Lucid’s course site is very intelligently organized, but you should NOT have to be in the information design business in order to compile a successfully-organized course page), but the clunkyness is unforgivable. So is the Trajan header *cringe*. A step in the right direction, but it needs more integration and better design. Further research is required into details of Moodle, Blackboard, and its competitors.
Virtual Learning Environments, or VLE’s, are one step bigger, conceptually. This is a whole technological system, of which a Learning Management System is a part. Moodle is considered on the verge of working as a VLE, but I would beg to differ (not that I’m really one to be making these claims). In my opinion, a true VLE extends much further into the class experience. I essentially want to make a great Virtual Learning Environment.
AH! Content! It already exists!
Course content is a pretty scary variable in the project, but I think I’m starting to get a hold of the reigns. I think I will not worry much about details of content. This is because I want to design a system that could work for most any lecture-based high school-level class. It has to be a flexible system that teachers can easily work with. I plan on contacting teachers to look at lesson plans in the near future.
One scary roadbump I hit this week was my realization that lots of digital learning involves complex interactive experiences. This sounds really dumb having written it out. What I’m trying to say is this: I’ve been thinking about digital learning in terms of “How can a teacher do better than Powerpoint?” This isn’t a surprise. Hell, the title of my project is now “Rethinking the Lecture.” I’ve been focused on lectures and lecture-type learning. However, a large part of digital learning, particularly in Maths & Sciences now exists in highly customized game-like interactive experiences.
My first reaction was minor panic, but after some serious thinking, I think these learning experiences can successfully co-exist. These instance-critical “games” could be included in my Virtual Learning Environment as if they were “apps.” This belongs on an important train of thought I developed this week of: my product/service as a “hub.” This goes right into my…
As of now, I really do see my product/service as a Virtual Learning Environment. I want it to be a hub to bring all of these disparate sources of learning together under one roof. As I wrote somewhere in my notes, I want to “Steve Jobs” the whole digital learning experience. By that I mean: I really see myself as pretty much only a “tinkerer” here. These other “disparate” (to quote myself) products and services have already been invented, and many have been quite refined. However, I feel that it’s painfully obvious to the user that these products and services were invented separately, and not envisioned, from the outset, to work together in one experience. Wrapping up other people’s inventions into one pretty box seems to be an invention itself — if one considers any iProduct to be an invention. I want to do that with learning. Minus Apple’s walled-garden approach which really kills accessibility.
I want this product to be CRAZY ACCESSIBLE. I’m talking you-can’t-avoid-it-anywhere-even-if-you-have-a-dumbphone accessible. Now I know the idea of reading lectures on a Nokia brick might sounds a little silly, but I think this whole “mobile-first” kick that responsive web design has gotten us on is really great for content (what I love!). If we could have one dedicated education environment that is build from the ground up focused on classroom content, I think we would be putting ourselves in a good situation to establish UNIVERSALLY ACCESSIBLE education software.
I envision a product that transfers seamlessly between desktop, SMART-board, tablet, mobile, and maybe even “dumbphone” environments. I know it is dangerous to be thinking this detail-oriented this far down the line, but I could imagine my product as its own “browser.” Like Google Chrome, it would default to an “App Page” where teachers could install all kinds of learning apps. I am talking about these already existing databases of virtual “lessons,” such as Connexions. Many of these are free and open source (yay!).
These are hardly the “meat” of my product/service. Its focus is all on the lecture — all this app-based content and interaction will be packaged up to “fit into a lecture.” I’m imagining these sort of multiple-view environments where students can get SIMULTANEOUS MULTIPLE REPRESENTATIONS. These are a “big thing” in digital learning, and I get really excited about them (so would Howie Gardner!). Now I know that the sketches I have (especially that one below) may look anxiety-inducing, but please remember that these are FOR DIRECTION ONLY. By no means would I accept such an unwieldy environment. However, I’m really liking the idea of “panes” to hold multiple representations of data
Moving on, I hope to tackle some IRL Q&A soon. I still have my fair share of Googling to do, but it’s about damn time I get out there! I’m planning on attending one of BHS’s IT information sessions, which should be awesome. I am thinking about seeing if the principal might let me send an online questionnaire to a select number of students (although there’s a good chance he gets requests for things like that all the time).
I would also like to talk to some MassArt Critical Studies faculty who could give me some general insights about teaching, lecturing, and preparing for class.
Initial abstract (December 12)
Learning today has become a repetitive process of attending lectures, reading texts, and writing notes and papers. This works — it is practiced at virtually every academic instutution. However, all three of these processes have not seen a real facelift for the digital age. I am aware that lectures got Powerpoints; texts got many various formats across multiple screens; and notes got Word, Evernote, etc., but these technologies rarely go further than imitating analog experiences. We can do better.
I will serve students and teachers by employing the design process to facilitate educational experiences. I think the lecture is the right place to intervene, but I am additionally looking at note-taking. It is intrinsically linked lectures and completes the “broadcast to capture” process. Rethinking this experience will involve struggles and triumphs of primary and secondary research, user experience, information architecture, information design, service design, and graphic design. I will study the history of pedagogical methods, as well as current education practices. I will try to find what makes today’s system work, why it has stayed the same for so long, and what needs to change. I will interview students and teachers for insight about the current state of learning and seek opportunities for intervention.
These are some of the more informative slides from my keynote at “Checkpoint 1:”