CS3217 Application Timetable

Assignment 3 - Nielsen's Heuristics Evaluation on IVLE

The 5 heuristics that we have chosen:-

1. Visibility of System Status


2. Recognition over Recall


3. Help and Documentation


4. Aesthetic and Minimalist Design


5. Error Prevention

We have selected the IVLE main page as it is the most commonly accessed and the most frequently used functions are all here:-

Please click to see the full image.

At a glance we see the following functions for students

1. Download notes/tutorials/assignments/materials.


2. Watch webcast.


3. Read announcements from lecturers.


4. Communicate and ask questions through the forum.


5. Check timetable.


6. Check module information (exam datas, grading scheme, lab/lectures locations, textbooks, TA/Lecturer contacts).


7. Signing up for project groups.


8. Look for past year papers.

Hence we will perform heuristic analysis on the various sections on the page and see how well they perform these functions.

IVLE Main Page

Please click to see the full image

IVLE Main Page	Purpose : Provide a portal for students to access vital school information and materials.
Visibility of System Status	Visibility is decent for the main functions that the website provides, however, almost all the data is presented in a popup, which can be distracting to the user, as it diverts them away from the page.
Recognition over Recall	The main site does it well, all the main functions are visible. Except for peripheral functions in section 4, which are obscure and very rarely used.
Help and Documentation	There are almost no help and/or documentation for any functions, which can be very confusing to new students. While most functions are self-explanatory, certain features are located at obscure sections such as the "Groups" function for signing up for project groups.
Aesthetic and Minimalist Design	NOT minimalistic at all. Every single function is frontloaded onto the user.
Error Prevention	Error prevention is as functions are straightforward so there are few things the users can do wrong.

Section 1: Announcements Row

Announcements Row	Purpose : Provide Updates to students on new postings and announcements by fellow students and by the lecturer.
Visibility of System Status	There used to be announcement popups but this feature has since been removed. Students may sometimes forget to check certain updates and miss out on important information.
Recognition over Recall	Not particularly visible. The buttons are situated on the top right corner and are not prominent at all.
Help and Documentation	Should be self-explanatory except for the download button, which serves to download all of the Module's materials in a go. This particular function is rarely used and not documented.
Aesthetic and Minimalist Design	They should not appear as popups. Distract the user from the main IVLE page and other information. Since there is so much blank space on the right side of the page, announcements and news(Whats New) feed should appear as an (AJAXed) list that is updated live and the student has a choice to hide it. Announcements marked important by lecturer should also be bumped to the top of the feed. Not only that, but students are unable to access contents in the "Whats New"(shown below) tab, they should instead be links that allow the students to visit the specific post. Instead of forcing students to go to "whats new" look at the updates, and find them in their respective locations, this adds a new layer of complexity.
Error Prevention	Few things can go wrong.

Section 2: Forums

Forums	Purpose : To facilitate discussion among peers and lecturers, allow classmates to know each other better and for students to sign up for project groups
Visibility of System Status	Visible. But unlike most other forums a student does not receive updates that are Directed to at a specific reply he/she made That quoted a post he/she made Subscribe to a currently existing thread without replying Also only displays the 1 post per click, whereas it should follow the standard convention of displaying a scrolling conversation. Instead of forcing the student to click through every single individual post. This strains the memory of the user as he/she might not be able to keep track of the information in every single post.
Recognition over Recall	Well done, follows the standard of most forums nowadays
Help and Documentation	Self Explanatory, and very common to the standard forums, thus users students will find it very easy to learn.
Aesthetic and Minimalist Design	Minimal enough, but suffers from the same problems due to the popup display. Should also become an AJAX pop-open forum in the main page.
Error Prevention	Few things can go wrong.

Section 3: Links in the Module Row

Links in Module Row	Purpose : Bookmarks-> For students to follow modules(that they are not taking)/groups Communities -> For students to create their own groups, that they can use to transfer files, schedule meetings, forum discussion and make announcements.
Visibility of System Status	Not visible, updates don't appear in the standard "announcements" popups, only when users go into the specific tabs and check for updates. The best way is for users to subscribe to email updates, but it is not on by default, and can be spammy for students.
Recognition over Recall	Not well done, a new student will have absolutely no idea what these tabs are for, as they are empty by default.
Help and Documentation	Poor, most students, and even lecturers have no idea what these functions do. Only the IVLE implementation team and "power users" know these functions, and there are almost no help and documentation for new students.
Aesthetic and Minimalist Design	Empty pages are minimalist enough. Whilst effort can be seen in the design, I would hesitate to call "shrinking" buttons to their minimum good aesthetics or minimalist.
Error Prevention	No one uses them, what can go wrong?

Section 4: Links in the Workspace Row

Links in Workspace Row	Purpose : For students to access almost most functions through shortcuts.
Visibility of System Status	Not visible, of the functions that this bar wants to provide shortcut to, there is a more visible method of access.
Recognition over Recall	Decent, but the fact remains that these are rarely used features, that few students access.
Help and Documentation	Lacking, especially for "resource banks" and "communities", both of this are confusing and lacking in documentation.
Aesthetic and Minimalist Design	Menus are minimalistic in nature, by reducing clutter to a minimum, but more important is question the need for a menu bar as most features here are not related to a single theme, and therefore should each find a better place to stay, instead of forcing themselves into a menu bar.
Error Prevention	No one uses them, what can go wrong?

Section 5: Workbin

Workbin	Purpose : For students to upload homework and for lecturers to release materials(homework/lecturer notes/other materials)
Visibility of System Status	Visible only when students click on "whats new" or open the workbin, can be done better.
Recognition over Recall	Once the student establish the initial understanding the rest of the features are very self-explanatory.
Help and Documentation	There are few official help channels, but most lecturers and seniors are very familiar with the workbin and often give good information to students. Most features are nonetheless intuitive.
Aesthetic and Minimalist Design	Relatively aesthetic with the tree-hierachy on the right side, very intuitive structure.
Error Prevention	Access to folders with permissions are restricted.

Section 6: Organizer

Organizer	Purpose : For students to view their timetable and add personal events
Visibility of System Status	Not too visible, the student has to click into the page, instead of being able to view upcoming events on the sidebar of the main IVLE page.
Recognition over Recall	Similar to most online sync calendars, however, the 3 calendar views should be merged into 1, i.e. the student should be able to add personal events into the organizer directly, instead of having to move to the personal view. Also does not support syncing with google calendar.
Help and Documentation	Self-explanatory, but help and documentation is not provided if needed.
Aesthetic and Minimalist Design	Minimalist. There isn't information that we don't need. What we expect to get from an organizer is there.
Error Prevention	Not applicable. Users can't change anything.

Section 7: Module Main Page

Module Main Page	Purpose : For Lecturers to provide useful information regarding the course
Visibility of System Status	Visible, but this is module-by-module basis. Some lecturers release very little information on this page.
Recognition over Recall	Intuitive
Help and Documentation	Self-explanatory and probably not needed.
Aesthetic and Minimalist Design	Depends, some lecturers don't like using this and prefer a course website, some other lecturers don't like to release much information over IVLE.
Error Prevention	Not applicable.

Sketching A New Design!
And we have come to the most fun part of the assignment! Here are some proposed improvements:-

Please click for the full image

Forum Expands Downwards - We think that it would be really nice if the forums could expand downwards (maybe on mouse-click or mouse-over) instead of bringing us to a new page. Maybe we could only show posts that were not yet read the last time.

Edit Profile by Clicking on Name - Why is there a 'Profile' button so that we can edit our profile? Shouldn't we be able to edit it just by clicking our name? That would save us some space and minimize some clutter.

Show Events in Calendar - True to its function, we have decided that things that are not related to modules and learning shouldn't be included in this portal. Someone should build another portal where the students can log in to view available activities/events. Better still, integrate the student events with the Calendar.

Clean! Clean! Clean! - After asking around, to be honest, I think nobody clicks on 'Career Development' anyway (at least not during the semester). That too, could be omitted in the IVLE. The library already has its own portal and therefore, the link could be omitted. We don't even know what 'Radio Pulze' is doing here. We have Facebook (and other social networks) for socializing, so the 'Friends' function isn't really needed. Poof! We get rid of them and we now have a very clean and minimalist interface. =)

Make Good Use of Space - After we cleaned up, there seem to be a lot of nice empty space. Also, due to technological advancement, most of us have large and wide screens anyway and maybe we should put these space to good use. Announcements, 'What's New' and Community updates could possibly be placed in these empty space. All these information is rather important to us as a student and we think it would be nice if we could get the latest information at a glance.

Assignment 2 - More Behind The Scenes

Someone needs to invent a yellow marker! This image is found in Dr. Bimlesh's office on the day we went there for consultation. =)

A question that is often asked in introductory probability lectures is what is the probability of having two persons having the same birthday? What a big coincidence, we have four members and we're very lucky to have two of them were born on the same day of the year! This calls for a celebration! =)

Yummilicious cake! =>

Happy Birthday to Flora and Jialong!

Happiness after a long and tiring school day...

We're a team!

We hope to get A+ for CS3240!

Having fun... =)

And enjoying the cake! =)

Mooncakes for Mid-Autumn Festival!

As the mid-semester break progresses, most of us were very busy preparing for various mid-term tests that we have in the week that follows. Nevertheless, we managed to squeeze out some time to get the whole group together in preparation for Home Assignment 2! It was just a coincidence that the Mid-Autumn Festival was around the time.

One of us decided to bring mooncakes (which were totally yummy by the way!)! Wai Hong, who usually dislike mooncakes, had to agree that they were good and he was asking for more!

Thank you Orry for the mooncakes!

Well, Mid-Autumn Festival, it also marks the mid-point of our mid-semester break. Jia you! Gambateh! Hang in there! We're already halfway there. =)

Assignment 2 - Prototyping

Our project in on information visualization and we're attempting to present information is an easy and intuitive manner. We're hoping that users would be able to save time and proceed to be more effective in understanding the vast amount of information that was presented to them.

Remember the day you signed up for School of Computing and suddenly find yourself having to plan your 4-years here? Everything look so daunting. In addition to planning the 4-year, you'll have to plan your timetable (and deal with timetable clashes), bid for your modules carefully (Argh! Outbidded again!), look for CCAs to join, go for orientation, scout venues, get used to new environment, make new friends and so on. People who live on campus will have an extra step of having to move their stuffs on campus and having to shop for necessities. It's all very complicated. Well, welcome to a new chapter of life! =) But sometimes, wouldn't you just wish that part of the process could be easier?

Like most freshies, I was armed with my copy of the NUS Bulletin with me while planning my 4 years down here. Some people wanted to clear all their cores first. Some people wanted a balance of what they like and the core modules. Some people want to test their interests and proceed to take modules that they think that they'll like first. Some people choose their modules based on what would give them a better time-table (I had an Arts student friend with 3 free days per week back then!). Some people choose their modules based on number of bid points left, and choose modules to maximize bid points rolled over the next semester. Whatever it is, we're unique individuals and we probably want to do things our way.

The NUS Bulletin does its job quite well, but at first we notice that there will be a lot of flipping of pages to check descriptions to see if you'll like the module. Since most of us don't have a very huge working memory ('buffer?' =p), we tend to forget those we read first and only remember those we read last clearly. We were thinking, wouldn't it be nice if all the information were presented in a single page, then you save the trouble of flipping around. We think that people should be able to memorize a single page better than multiple pages.






Argh!! I'm going crazy! How to make sense of all these?
Then we decided to take it a step further. Some of us play computer games and one thing that we notice is that mapping your modules could be similar to skill trees (in role-playing games) or technology trees (in real-time strategy games). First, you start off with the basic modules, and there are a lot of paths of 'upgrade' until you finally acquire a good arsenal of skills (or technology). Since we're unique individuals, there should be a lot of paths but it should lead to one goal:- graduation.

Or we could think of it like a map. If we go down to Google Maps, we would realize that there are a lot of information all at the same time (elevation, bus service information, places of interests, direction and so on), but we are able to tell direction and get the information that we want from a map through legends and other guides. I suppose many of us find reading a map intuitive (especially so for places which we are familiar with).

So we began a journey of mapping all possible routes you could take through School of Computing in NUS and condensing the information into one-screen. We believe this would be doing a great service to the new students. In addition, we hope that it looks cool too! (So that the new students can say, "I'm so proud to be in NUS, they have cool module map! =)")

We probably underestimated the mess that we got ourselves into and how convoluted our module dependencies are. Here is our first try, on paper, where we tried to organize the technical elective trees with color code. We used post-it notes so that we could quickly re-arrange and re-organize the tree as needed but it still looked messy at the end of the day:-

The mysteries of School of Computing modules.
Refusing to give up, we tried again on another day, to get the mess more into an organized mess. =) We tried to make sure that the module dependencies (arrows) do not cross each other and we tried to make them straight (minimizing diagonals). This is inspired in some ways by circuit design (PCB design) where you have to route the copper in ways where they do not overlap:-

Now this looks somewhat like a printed circuit board. =)
However, the general consensus was that while the module dependencies (arrows) look better, it is still not that intuitive and clear. We thought we could probably group more things together or use colours as a way of classification. Our third attempt was once again on paper:-

This looks a lot cleaner right?
We tried to visualize the above in Prezi as well:-


(If this isn't that clear, do click the Prezi link above to get a better view.)
And one last attempt at the prototype, just in time for Home Assignment 2 submission. We tried to minimize crossing lines and adopt an outward radiating hierarchy. And our final version of the prototype, with minimal crossing lines and a outward radiating hierachy:-

Pretty!
Our work has only just began. In the future, we hope to improve this by adding intelligent animations. For example, the user could just mouse-over one of the modules and all related modules should be highlighted and unrelated modules should be fade out or be blurred to background so that the relevant information should 'pop-out' to the user. It would be great if the tree could re-arrange itself to a simpler view when mouse cursor is over interesting points.

Also, the full view is convoluted and not always what the users want(or need) so we would also like to add features that allow the user to easily hide information that they don't need.

Assignment 1 - More Behind the Scenes

Thought that was all? When the Ice-Cream Waffles come together, there's bound to be something good happening! =) Aside from the boring Seaweed flavoured pop-corns from Taiwan! I heard that it takes half a year to get yours when you place your order.

Of course, we can't wait to lay our hands on it.







Getting cosy here in COM1! =)

Assignment 1 - Past, Present and Future of HCI

Finally our first assignment is done&up! Hurray! :D

Following are some behind-the-scene stories and technical details. We believe that understanding and applying what we have learned about 'design process' is very important here in this module.



At first we planned to do everything in Prezi. The best thing about Prezi is about its zoom and rotation fuction, providing the audiences a 'magical' experience of flying through space and time. However, we found that a Prezi presentation may require the audience to click to play each every slide, which is not a very user-friendly way of presenting ideas. Therefore we agreed upon using a scree recorder to capture the entire flow, plus a bit video editing, and adding bgm.

Here is the initial sketch of Prezi layout design:



Followed by the screen shot of the layout-editing:



Oh, last but not least, about the bgm. It's the 13th track 'この世の限り' from Shiina Ringo and Saito Neko's album 'Heisei Fūzoku', which matches perfectly with the video clip. More details of the album here.

Happy watching :)

Cheers,
Group 6