The Karma Project: Code Less, Teach More

August 12, 2009

Building a Better Chakra — Some Ideas

Filed under: News — bryanwb @ 2:09 am

Please bear with my extremely limited skill with Inkscape. I have put together some ideas for the main menu of Karma. I recently read “The Design of Everyday Things” and it convinced me that I too can be a usability expert. Two points from “Design of Everyday Things” that really struck me are that 1) a beautiful design does not equal a usable one and 2) for certain types of tools, there should be one obvious way for the user to use the tool and other ways should be initially visible. Point #2 relates to what author Don Norman terms “affordances.”

Before I show you my crude designs, let’s take a look at what the current main menu, or “chakra“, for EPaath looks like. Please bear w/ me as the EPaath interface is entirely in Nepali and not English.

If you aren’t familiar with EPaath, it is a suite of learning activities that is in line with Nepal’s National curriculum, developed by OLE Nepal. We created these learning activities entirely in Adobe Flash. For a number of reasons, we have decided to move from Adobe Flash to the openweb technologies of html5, css, and javascript. Think of Karma is the OpenWeb son of EPaath. You can also think of Karma as Ruby-on-Rails for developing digital educational content.

Starting Page for EPaath

Starting Page for EPaath

EPaath has a very hierarchical information structure because it follows the Nepali national curriculum. I believe that most countries and schools will require and want something that follows their respective national curriculum very closely. The hierarchy starts with grades, then subjects, then month, and finally displays the available lessons according to the week of the year they should be presented in. Nepali teachers emphatically requested this last feature.

It has been our practice so far to include multiple grades in a single EPaath bundle. We do this so teachers only have to learn one interface and because often students want to look at material in grades above or below their own. For example, we often found 6th graders doing the material from grade 2. Conversely Grade 2 students often look ahead to the higher grades.

In the upper left-hand corner are buttons for each grade we currently support, in the right-hand side are buttons for the subjects Maths, Nepali, and English (Maths and Nepali are written in Nepali script). Just to the left of the subjects is a list w/ a black background. Each line in the list indicates a month and each icon on the line indicates a week. To work with EPaath, you must first click a grade, then a subject and then the weeks available for that course appear, or at least the ones that have been loaded in your particular EPaath bundle. Then you click on a week and icons for the lessons specific to that week appear. Click on an icon and then you finally get to do an EPaath lesson.

With all these steps, we have found that a number of teachers get lost during the process. And those teachers getting lost are the ones we most need to win over.

So I have been trying to think how we can both accommodate this complex hierarchy, which the teachers tell us they really, really like, and to make it easier to use. Let me be frank, I am much more focused on making Chakra usable to the teachers and less concerned that kids will find it confusing. In our experience, the kids master new, complex interfaces much faster than the teachers.

So we need an interface that can:

  1. accommodate a complex hierarchy
  2. straightforward to use
  3. accommodates an arbitrary number grades and subjects

We frequently need to show off EPaath to other NGOs and other government officials. When demonstrating EPaath, it is really nice to have one main interface to show off all the grades and subjects we have. Currently, we only cover three grades and three subjects but our current main menu will not be able to grow to 6-7 grades and 6+ subjects.

chakra1_1

Above is my crude proposal to rework EPaath’s menu stage into what I call the “Chakra“. More specifically, this is Stage1 of Chakra. You may notice that this image looks a heck of a lot like the iPhone main menu. I really find the iphone’s main menu intuitive and I think that teachers might find Chakra intuitive as well. I want the icons for the classes to look like something you physically push, so they have to have a 3D effect. I like that the iPhone main menu is essentially a series of lists rather than hierarchical trees. I think a lot of people think in terms of lists rather than hierarchies, so I want Chakra to be a series of lists that you can work through very quickly.

The upper part are all buttons that take you to Stage2 of Chakra. The lower buttons control administrative functions. The “Student Profile” icon should lead the student to functions such as specifying their student ID and whatever configuration options we want to make available to students. “My Stuff” should take you a screen showing you the assessment results from various karma lessons you have completed. It should also store quick links, or tags, to particular karma lessons you have tagged.

The “About Karma” is a placeholder for a section about whichever organization has packaged your bundle of karma lessons. If Nigerian NGO named XYZ creates a bundle of karma lessons, they should use this section for their logo and take credit for creating the bundle. In my experiences with OLE Nepal, when we did not make it very clear that we created EPaath, other organizations (often uninvolved) were happy to claim full credit for creating them.

I have drawn Stages 2 and 3 of Chakra even more crudely than Stage 1. Below is Stage 2

The Second Stage

The Second Stage

For this stage I want to use a set of icons for the subjects. These icons shouldn’t have any text in them — unlike what I have done in this image. There should be an image in the icon that reflects the subject matter and looks like it should be pushed. A down arrow should appear if there are subjects than can fit “above the fold.” The arrow should only appear if there are additional subjects below the fold.

Last Stage of the Chakra

Last Stage of the Chakra

Advertisements

9 Comments »

  1. Consistent font size and text alignment would go a long way towards making these more beautiful (if not more usable).

    Comment by C. Scott Ananian — August 12, 2009 @ 5:45 pm

  2. agreed 100%

    Comment by bryanwb — August 14, 2009 @ 3:06 pm

  3. Howdy! Do you know if they make any plugins to help with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Appreciate it!

    Comment by Want to lose weight — May 6, 2013 @ 1:03 am

  4. What’s up colleagues, its great article about educationand completely defined, keep it up all the time.

    Comment by e cigarette brands — August 6, 2013 @ 12:37 am

  5. What’s up i am kavin, its my first time to commenting anyplace, when i read this piece of writing i thought i could also make comment due to this sensible post.

    Comment by spinning bike — June 11, 2014 @ 6:46 pm

  6. blog.espaciosuy.com

    Building a Better Chakra – Some Ideas | The Karma Project: Code Less, Teach More

    Trackback by blog.espaciosuy.com — July 8, 2014 @ 4:36 pm

  7. click

    Building a Better Chakra – Some Ideas | The Karma Project: Code Less, Teach More

    Trackback by click — July 15, 2014 @ 10:03 pm

  8. I visit every day some websites and sites to read articles,
    except this website presents quality based content.

    Comment by freebrazzersaccounts.net — August 11, 2014 @ 5:36 pm

  9. social network

    Building a Better Chakra – Some Ideas | The Karma Project: Code Less, Teach More

    Trackback by social network — March 10, 2015 @ 5:02 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: