HCI (Human Computer Interaction) Learning Tool with Silverlight 3 & .NET RIA Services

Continuing from previous post when i got stuck and confused about my research project, i thought you might wanna know how this finally end up. So this post was created to explain further explanation about the project. In other words, IT IS DONE! :) And also i’ve tested it according to its predefined usability goals and it shows a POSITIVE feedback from users. I couldn’t be more happy.. hehehe..

image Project Title : “Developing a Human-Computer Interaction (HCI) Integrated Learning Tool

ABSTRACT :

Human Computer Interaction (HCI) relates to a field study orientated in the evaluation process of usability aspects of a system/product. As people tried to apply HCI onto everyday’s lives, they begin to realize that developing a system based on HCI doesn’t end only when the user’s goal has been successfully achieved, but furthermore it needs to be maximized with what is widely known as a good ”user experience”. Achieving towards the secondary objective may result in facing obstacles vary from the wide range of HCI’s theories as well as interaction design theories, which seems too abstract and at some point make them more difficult to learn without any delineation. And the fact remains, there are still no interactive tool that act as an aggregator for learning these materials. Our study shows that even if there are some tool available at the market, mostly acts uninteractive and appertain smaller scope of HCI theories.

According to the former cause, this project focuses on developing a tool which helps visualize the aspects within HCI learning materials, by providing wide range of former tools that have been developed by others before, and then map them onto related topic of HCI curriculum. The curriculum will later be formulated through comparison between HCI’s curricula being used in ITB (Institut Teknologi Bandung) and few major curricula applied in Stanford and Maryland University, United States.

A tool named ”HCI Learning Tool” is a web-based application which delineatively helps people in understanding what HCI is about, by dividing former tools into 5 different category: Video, Audio, Software, Document, and Web-Based. HCI Learning Tool is expected to become an additional supplement tool beside regular course material learnt by each student, emphasizing the possibilities of HCI self-learning beyond textbook and all stuff. By the end of this final project will be summarized into an evaluation process using usability testing, to measure usability of the system as well as how much have the user experience gained. Final result shows that HCI Learning Tool has prove itself toward positive usability goals measurement and all of the majority user feels satisfied and expresses total enthusiasm during the interaction.

Currently there are 53 tools given for each specific topic. So here’s a final screenshot:

1. MAIN / HOME view. Left panel shows list of HCI’s General Topic Curriculum wrapped in a beautiful Silverlight 3’s accordion. The right panel contains dynamic panel at which you can see what kind of tool represented by selected HCI Topic. If you maximize the panel (yes, it is a modified Blacklight Panel) it will show different view according to its category. If it’s a video then the inside the panel you will find an embedded video player, and so on.

Screenshot 1

2. The picture below, is the ADMIN view. Once you are logged in and known as Administrator you will find 2 option: Topic Management & Tool Collection Management. It is generally a Silverlight Data Grid & Data Form with .NET RIA Services in it. Here’s where you can do some CRUD data modification…

Screenshot 2

3. Finally here’s an UPLOAD view. Once you are logged in as registered user, you can upload HCI tool sample. For example you can upload video, image thumbnail, insert category, insert descriptions, and it will appear right away in the HOME screen. This part is kinda hard for me to implement but that pain is over :) I was doing a lot of research about which Silverlight Upload Tool i should use, but finally i ended up using Telerik’s RAD Upload Tool because it was fully customizable and EASY!

Screenshot 3

Speaking of technology, as I was focusing on developing a system with a good user experience, that led me to RIA (Rich Internet Application). For short, this web application was built in Visual Studio 2008 using Silverlight 3 & .NET RIA Services for front-end + app logic; Castle ActiveRecord as the ORM tool for mapping business objects onto the database, and finally connected through the implementation of WCF (Windows Communication Foundation). So let’s look at the whole architecure below:

arsitektur

Sounds quite complex for such a simple-purpose e-Learning application? Well that’s what makes it interesting, because I’ve had so much to learn in the past couple of month! :) I’ve always been intrigued by the fact that “I’m a Computer-Science student who spend more time in Photoshop rather than Visual Studio” :p So it’s actually kinda nice to finally built something on your own, from scratch, and gets appraised by many people.

See I was planning on deploying it somewhere, but then i realized that i had to switch my Apache hosting into IIX network.  Which, still got me confused on the whole deployment thing :p Primarily because it includes WCF and other problems, such as MIME Type setting and how to register GAC so that your Windows environment could detect the services used in HCI Learning Tool (mainly it causes a problem with the Authentication Service).

Maybe someday i’ll write about it!

Thanks again for reading this long-boring-geeky-post.

Cheers..

Share this post: | | | |
Published Thursday, September 03, 2009 9:19 PM by Umi Fadilah

Comments

# WPF & Silverlight Designer (CIDER) in VS2010: A Closer Look!

Sunday, January 24, 2010 9:36 PM by Umi Fadilah

Coba tanya saya, “Apa yang menarik ketika melihat konten VS2010 Training Kit (January release) ?” Ya

Powered by Community Server (Commercial Edition), by Telligent Systems