Last modified: 26 July 2011
As Khan Academy continues to grow, it's imperative to continue offering a top notch user experience. Our goal is to continue being the best resource on the web for free education, and we want to retain as many users as possible. As our largest code update looms around the corner and we prepare to launch our new exercises, we want to ensure that current and future users know about Khan Academy's exercises. Currently the exercises are linked to, but the current exposure can be difficult to locate, and users may overlook the wealth of practice opportunity that the exercises offer.
The goal of this feature is to increase visibility and awareness of the exercises though out the site. Currently the "Practice" link in the page header links the users to the Knowledge Map, but that's about it. This feature will attempt to help personalize exercises by relating them to videos in a cleaner and more prominent manner and by increasing overall exposure on the site. This proposal is extremely flexible and can be rolled out and changed at our convenience. The changes are meant to be independent and can be modified, added, or removed without effecting the other proposed tweaks to meet our goal.
The following are some proposed changed that can be implemented to help make the user's experience better when dealing with exercises. New ideas are welcome, as are changes, discussion, and suggestions.
Currently on the home page, the "Watch a video" and "Practice with an exercise" are green and blue, respectively. To keep consistent with this patern, and to help visually convey that exercises and videos are different, this palate should be used for the changes as well.
Current buttons on homepage
For example, when displaying exercises on the home page (see next section) we could change the playlist bar to blue to signify the change in content. Additionally, on the home page it may be smart to change all exercise links to blue, and all video links to green. We will have to change the color of visited links to a third color to prevent confusion.
Exercises On The Home Page
One of the key features of the knowledge map is that it visually displays the exercises status (Suggested, Proficient, Review, etc) to the user in a simple and elegant manner. While not all of the features of the knowledge map can be implemented on the home page in text form, the status can. Each exercise will display a symbol next to it if it has either been completed, or is up for review. To avoid user confusion, suggested exercises and untouched will not have an icon; at such small sizes suggested and proficient icons could easily be mistaken for one another, due to their similarity in all aspects, sans color. A possible work around for this is to either display a different icon, such as a green 'S' or to highlight the text in some manner. Also, by reducing the amount of exercises with icons next to them, it's easier for the user to pick out exercises they need to do. Instead of having to squint and figure out the color of the icon, they can simply look at whether or not there is one.
Proposed status icons. The actual text will differ to represent available exercises. Note that only proficient and review exercises are marked
Switching between Videos and Exercises
One way to do this switch would be on a "per playlist" manner, with the following option appearing next to each playlist:
Two text links, Videos and Exercises, will appear for eligible playlists. When the user clicks one or the other, the list will repopulate to display either the videos (as is the current default) or exercises. The exercises will be displayed in the manner shown below.
Another possibility for front page exercises. A gradient will show the users progress
If it is feasible to do in a clean manner, it would be ideal to let users view related exercises on the home page. One idea is to highlight all related exercises to show the relationship and where the user should go next if they want to follow the suggested path. This idea is not as high priority as the knowledge map already offers this feature.
Something similar to the video playlist will be available to let users easily navigate to recent/suggester exercises. For unregistered users it may be ideal to show random exercises, to prevent potential users from thinking that the site only offers practice exercises for simple things, like Addition, Subtraction, and Angles. One the user is logged in they will be able to pick "playlists" of suggester exercises, recent exercises, proficient exercises, etc. Exercises will be sorted in the same manner that they are on the knowledge map.
Quick mockup. The final version will be cleaner and will have the ability to switch between "playlists" to make navigation easier
Currently, the exercises on the left hand side of the knowledge map are bulky and take up space. Due to the small amount displayed, the user will first get a glimpse of the elementary topics, which may lead users to believe that more complex topics are not covered. The current design could be simplified and compressed to save almost 50% of existing vertical space, which will allow more exercises to be viewed at once. The exercise name will appear in the streak bar, and a star will reside at the end. The star will start out white, once the streak bar fills up (10 problems in a row), the star will light up, showing proficiency. The current streak will display within the star, and the point value will appear in the top right.
Proposed change to exercise drawer badge, with the behavior mentioned above
An alterative proposal, it will have the same behavior as the current badges, it is simply reduced and has less white space
Currently videos have an "Exercises" button beneath them, but it blends in and may be overlooked. A way to alleviate this problem is to add a "Practice This" link above the video. The image next to the link will represent the current exercise status.
Proposed Video page change. Click to enlarge
While the current exercise view shows "related videos" (which now show in order), the user may be more interested in going to a recently viewed video. If the user comes to an exercise directly form a video, it would be wise to offer them a "Go back and watch _______" link to take them back to the video they were just at.
Click to enlarge. Proposed link to referring video
In addition, related videos are not as prominent as they could be. A carousel display, similar to that on the home page, could graphically display related videos in a way that might entice the user to view them more.
In exercise video viewing
Currently, when a user clicks a video link within the exercise module, the link redirects the user to a new window and take their focus away from the exercise page. In essence this is separating the exercises and videos, and defining them as different entities. On the contrary, our goal is to make the videos and exercises appear more related. This issue can be remedied by showing the video within the page. If the user wants to view the video at the video page (to see questions, etc) they will be able to click a link to take them there. However, the default will be the inpage display shown below.
Note that this is just a quick way to give a visual of the home page if certain proposals are accepted. The final homepage will vary depending on what proposals are accepted, what are rejected, and what future changes occur. When choosing what to follow through with, the individual ideas should be considered, not the full page mockups below.
Click to see full size.