The Process of Interaction Design

In my last blog, I was talking about Chapter 7 my Interaction Design textbook which covered the different methods of data gathering. The next three chapters dealt with data analysis, the process of interaction design, and identifying requirements.

In data gathering, data can be broken down into two different categories, qualitative and quantitative. Both types of data can be analyzed differently. Researchers try to find patterns and trends to support their theories and findings. Graphical representation of data helps in identifying patterns easily in quantitative data. Grounded theory, activity theory, and distributed cognition was used by the author of the textbook to analyze qualitative data. These frameworks work by breaking down the qualitative data into smaller and smaller categories so that they can find the trend or patterns at the refined categories.

The next chapter focused on the early stages of interaction design. The planning of interaction design from identifying the needs all the way to implementing the requirements. This chapter emphasized on catering to the user. As a developer, I believe that it's important to base my work upon the user's requirements and request rather than trying to do it my way. This ensures that the user will be happy with the final product. Involving the user during the process is also key to achieving better product. Letting the user play with the prototype let's the designer know what works and what needs to be refined. Different lifecycle models were also explained in this chapter. In my experience, we used Agile development in my software engineering class. Agile development focused on collaboration and that is exactly how we developed for my previous course. Letting you peers do constructive criticism of your code helps you develop and mature as a developer.

Chapter 10 was pretty simple. It uses the previous lectures from data gathering and analysis to identify and establish requirements. Nothing much to talk about since it just talked about how to apply the previous methods.

Next time I hope to find a journal from the ACM library that interests me. I'm currently looking at the latest journals that relates to Android.

Interaction Design

It's been a crazy past two weeks with all the midterms, career fairs, and job interviews. I've been slowly catching up with the readings for my HCI class. Last time we met, Prof. Robertson assigned me a new book to read called Interaction Design: Beyond Human-Computer Interaction.

The book starts out with some basic intro about interaction design. Comparing good and poorly designed products such as voicemail systems and remote controls. I noticed that these books likes to pick on telephone/voicemail as an example of poorly designed products. It's also interesting that in today's world, we still continue to use those poorly designed products. The book defined interaction design as "designing products to support the way people communicate and interact in their everyday and working lives." I understand that interaction design is the bigger picture and HCI is just one aspect of it. There are many different types of discipline that's involved in interaction design. The book explained some of the benefits and negatives of this. The biggest pro of having people from different disciplines and backgrounds come together is the creation of more ideas coming from different perspectives. This could lead to more creativity. This however is also the biggest con. The clashing of different ideas could lead to conflicts and confusion. Some prefer to do it a certain way while others have their own ways of doing things. The book also mentioned the different usability goals and use experience goals that we have to think about while in the process of interaction design. The text also used the design principles that I read from Donald Norman.

In order to create good designed products, designers has to do some research on the consumers. Chapter 7 of the text covered the different ways of gathering data. Data recording, interviews, surveys/questionnaires, and observations are some of the main ways to gather data.

I have a lot more to read so more to come later.

Everything starts with design

This semester, I am taking a course about Human Computer Interaction (HCI). I had no idea what to expect coming in to this class. I thought it would just be about how humans interact with computers. As the semester went along, I slowly realized that this course revolves more around the concept of design. The way we interact with everyday items depend on how good or bad it is designed. The main text that I'm reading for this course is called The Design of Everyday Things by Donald A. Norman. I'm not much of a reader but this book is pretty interesting. The book is outdated but the examples that he provides while explaining the concepts are clear and that makes things easier to understand.

Each chapter begins with a real life situation. I really like this way of organizing the text because it's easier for me to understand the concepts. The main principles in terms of design that I got from the first chapter are visibility, mapping, and feedback.

Visibility basically is the labeling part of design. An everyday example of this is a computer keyboard. Each key is labeled appropriately so that it's visible for us users. For users that aren't too familiar with the keyboard layout, visibility enables them to use knowledge that's available in the outside world. So instead of them trying to remember what key corresponds to to what, the label on the keys will give this information thus reducing stress inflicted upon the user. In today's world, visibility is neglected in designing things to make way for "looks." Take mobile gadgets for example. Some buttons aren't marked at all so sometimes there's no way of telling what that button would do before pressing it.

We all know that pressing the power button turn on/off something, pressing the letter J on the keyboard inputs that same letter. We know this because those things are designed to map out with their respective outcome. Poor mapping occurs when a single thing is mapped out to do multiple things. Norman used the telephone as an example of bad mapping. One of the buttons on his telephone example is mapped out to hold, park, or transfer calls. His example wasn't labeled appropriately so bad visibility is shown. I believe that visibility and mapping goes hand in hand in the design process.

For a user to know if their action was taken, the designer needs to implement a feedback mechanism. Many smartphones in the market today are equipped with touch screens. Manufacturers enables haptic feedback so that the device vibrates when the user makes a selection. This example has a tradeoff in terms of battery life. Because UI navigation heavily relies on the user touching the screen, it means that the device is constantly vibrating which sucks a lot of battery life. I always turn this feature off because I rely more on visibility for feedback with my mobile device.

It clearly takes a lot of thought when designing not just software but anything in general. I think that catering the design according to the intended users are important rather than just doing whatever works for the designer. This is where research and studies come first to help with the design process. But no matter how well you design a product, users will always make an error. We are humans, no one is perfect. This is why the designer must also implement the appropriate responses when the user makes an error. A cool example of error detection/correction is the swype technology on android smartphones. This technology enables the user to swype around the software keyboard instead of the traditional tapping method. It's algorithm is smart enough to know the intended word that the user is trying to type. Basically you swype from letter to the next till the word is spelled. But what if the user uses shortcuts words that aren't in the dictionary? Swype is smart enough that it learns the user's custom words by typing it the normal way. Swype adds the new word to the library so that the user can just swype it next time. A lot of times, swyping a certain way can yield multiple result. Swype addresses this issue by having a pop up of words that matches that pattern. The user can quickly tap the intended word and continue swyping. This method makes user input much more efficient and even faster than using physical keyboard on mobile devices. I want to post example pictures of how this technology works but I can't find a way to take a snapshot while trying to swype at the same time. I'll update this post once I figure that out.

Finals week is just around the corner...

Finally made some progress this week after being stagnant for a while. We tried to tackle our database problem lately with a less efficient solution but it seems to be working so far. So far we only have one verification working (Text Input). Our goal is to make sure that one verification works perfectly so we can apply the same to the other two verification types. The following screenshot shows the text field when a user selects an activity.

This next image shows a list of available activities. It also displays a list of activities that the user participated with.

Lastly, this screenshot shows the backend side where the admin can view a list of user submitted activities for confirmation. This is where the admin can confirm or deny the submission.

We still have a long way to go but I know our group will pull through. Summer, are you here yet?

-David Joel Lazaro

Birthday Weekend Over :( back to work

Took a little break last week to celebrate my 23rd birth anniversary :D. Nothing really much to say about our project at the moment. Still working and getting stuff done slowly but surely.

One interesting thing that I started recently was my Android development. This is a side project that I've been meaning to do since it's free compared to Apple's $100 dev fee platform. I've set up a separate workspace in Eclipse for my Android apps. Right now I'm still in the learning phase. Still trying to familiarize myself with it. So far it's not too bad because I'm coding in Java. Here's a little screen shot of what I have so far:

I can almost see the finish line....

Wishes do come true! We get to stay in the same group and continue working on this project for the rest of the semester! Only couple weeks of school left and our group is planning on finishing strong. Our current status is still trying to catch up with the other CMS group. We might be a little behind schedule but I think that we are on the right direction and I'm confident that we can pull through.

Right now we are still trying to figure out how to approach the verification type aspect of our Joomla component. We have some ideas to implement so it's a work in progress. Not sure if I mentioned it before but there are three types of verification for this component. A text input, confirmation code, and an upload image form. The following image is the schema that we are currently working with.

This schema might change as we are constantly trying to improve our component. After we finish developing this component, we plan on publishing the final package so that the general public can download and install this on their own Joomla websites. With our DeveloperGuide, we hope that any developer can tweak it to achieve their own requirements. There's a lot of things to do so it's time to do work son!

-David Joel Lazaro

Joomla module madness

Wow this has to be the most challenging milestone so far. After learning that there's no pre-made module out there that would satisfy the UseCaseActivity, we had to come up with our own component. Unfortunately we didn't satisfy every single requirements for this milestone but I feel like we still accomplished something because our team had to create the component from scratch. So without further ado, lets do a quick tour of what I worked on for this milestone. By the way, before I continue, most of the work I've done was for the back-end of the system.

The first screen shot shows the back-end login screen. Here we have two login modules. One can login with a regular Joomla username and password, and the other uses UH's CAS login service. The UH CAS login module will probably be the main module used for logging in. I just left the other module on so that if the CAS service is down, I'm still able to login to the system. I also finally managed to fix the bug that won't delete the cookie that stores the CAS login information. Now whenever someone logs out of the back-end, they would be prompted to sign in again by UH CAS service.

The next screen shows the back-end's home page. Our main focus here is the addition of Activity Manager in the components menu. Clicking that menu item will take us to the component's main page.

So here is what we have so far in terms of the admin side of the component. Shown here is the main page of the UseCaseActivity component that we created. We have preloaded some sample activities as show in the image. Most of the menu button at the top works except the publish/unpublish buttons. Those are still a work in progress. So far, this component is able to create, edit, and delete an activity. We made the activities in the table linkable so that if we click on one of them, it will take us to the edit page where we can change the details of the activity.

Here is the page with all the forms that we need to fill out to publish an activity. This part was a real pain in the butt to create because the tutorial I was following is outdated. For some odd reason, the Joomla class that I was using was renamed in the new API update. After that problem was fixed it was smooth sailing.

In this screen shot we see the database part of the component. I had to create the table that would hold the information we submit from the forms page. The administrator would never deal with this part of the website. I'm just showing it to show that the component is indeed saving the information the right way.

This last screen shot shows our updated DeveloperGuide. We've added information about our current component development. There's still many things to do and a lot that we can improve for this Joomla prototype. My hope is that we don't get shuffled around and continue developing for this project. *Crossing fingers*

-David Joel Lazaro

Joomla Modules: Time to Program

After last week's meeting, it was clear that our group was taking the wrong approach for our goal this milestone. We have the UseCaseActivity all laid out for us but were trying to implement it the wrong way. Our group was looking for modules that would implement most if not all of of those requirements. The problem is, there is no such module that would take care of the whole use case for this milestone. Realizing this two weeks before the end of milestone, I feel our group is way behind now because of our wrong approach to the problem.

Now to start catching up, I've been reading up and watching tutorials on how to develop our own Joomla module that would support the use case of activities. I've been reading up on Joomla API and brushing up my PHP so that we can start ASAP. Android development will have to wait until I'm done with this semester's projects....

Done with Spring Break...

That break went by super fast! Can I get a rewind? Home (Maui) was super relaxing. It was a great time to chill and hang out with family and friends back home. But now it's time to get back to business and continue working on the Dorm Energy Competition website. As I mentioned, I will now be working with Nate as a group. Our main focus for this milestone is to figure out how the activities and goals are carried out for the competition. So far we came up with a bunch of "activity manager" type of modules that we will be testing for the next coming days.

On a side note, I've downloaded the Android SDK last week. Being a phone geek, I want to start learning how to develop mobile apps. I currently have an iPhone but Apple requires a fee to to be a developer. Android is free and is really picking up since it first came out. Didn't have the time to set up everything on my machine yet but I will soon. I'll blog about it later once I have everything set up and running. That's all for now.

-David Joel Lazaro

Milestone 3: Time to collaborate!

Milestone two came and went and now we are halfway through the semester. Our Joomla prototype has come a long way since the project started but there's still a lot of work to do. We are down to two CMS for this milestone. Our group dropped Silverstripe and dotCMS to focus more on Drupal and Joomla. My partner, Nathaniel Ashe, will be working with me to continue development for Joomla. Our plan is to continue adding features needed for the competition and combining them together at the end.

For this milestone, our focus shifts from mockups to actually developing the more necessary features of the competition like commitments, activity, and goal processing. This week, we plan to work on the illustration of kukui nuts accumulated by each floors. By the way, Kukui nuts is the point system used for the competition. So the more kukui nuts you have, it means the more points you accumulated. We are looking at using Google chart APIs for this part of the prototype. Lots of work needs to be done but collaboration should ease up the work for us a little. Stay tuned for more updates later.

-David Joel Lazaro

End of Milestone 2

Here we are finally at the end of milestone 2. This version of the Joomla mockup site is better and contains some new useful features for the dorm energy competition. Let's start by having a tour of the updated mockup site.

Here we see the homepage that the general public can access. Currently it contains a featured youtube video, a chart that shows the energy usage of the dorms, a slideshow, and a little description of what the website is about. Also on the left is the Login button that uses the UH CAS login for authenticating the participants.

The user will be taken to this page once they click on the Login button.

If the user tries to login is not listed as a participant, they will be redirected back to the homepage with an error message. Before I forget, if you look at the right side of the top menu, a random tips ticker is displayed. A new tip is displayed every time a page is loaded.

This is where things change depending on what type of permission the user has. The screen shot on the left shows the homepage for an administrator while the one on the right shows the homepage for a regular participant. There are some noticeable differences. The administrator will have an extra item on the top menu named Admin. This takes the user to the admin page where they can modify the website.

The admin also has extra items in the user menu on the left column of the page. These extra options are for adding content to the site. You'll also notice a bunch of edit buttons in the homepage. This is because the administrator have the ability to edit these items. Those edit buttons are hidden for regular participants.

Remember the error that shows up when a non-participant tries to login? Joomla actually creates a user for them but by default they are disabled. The administrator has the ability to grant them access by enabling them or the admin can also delete the user.

Nothing new with the forums page so moving along.

This page provides users with a brief overview of a Dorm Energy Competition. There are videos which will allow individuals to browse through several videos pertaining to Dorm Energy. It also contains links to other universities doing dorm energy competitions. The Resources menu contains three submenu pages, Dorm Energy, Energy Hub, and Have Fun. Only the Dorm Energy page is implemented in this mockup.

Next is a work in progress stoplight page. This page is mainly to test the stoplight group's google gadget app.

This page shows the user information about the Dorm Energy Competition.

Next is a work in progress stoplight page. This page is mainly to test the stoplight group's google gadget app.

The kiosk serves as the billboard page that will be displayed in tv monitors. This gives people a general info about the dorm competition at a glance.

This is the help page of the dorm competition website. It includes contact info incase users run into problems using the website.

This page shows upcoming events related to the competition. This menu item only shows up once the user logs in successfully.

The last two screen shots shows how the user can edit their personal info. They also have the option of posting a profile picture.

For more information about this project, please visit Google Project Hosting. There's info on how you can download and give this mockup site a testdrive on your own server. You'll also find the current status of the project there (ie. what works and what doesn't work, bugs, etc.). I will continue working and improving this prototype website.

-David Joel Lazaro

Lots of catching up to do..

After being stuck with trying to fix the CAS login, Professor Johnson suggested that we move on to other parts of the mockup. I got caught up with this bug and now my Joomla mockup is behind others' CMS. So this final week of Milestone 2 will be dedicated to pumping out as many webpages as I can to catch up and have a close-to-functional website for the dorm energy competition.

For the next coming days I have some important features lined up to be implemented in my mockup site. I might also change the theme (CSS) of the website. If I find one that looks better and easier to work with then I might implement it before the end of the second milestone. Once I have enough pages done I will update you guys with screen shots of the mockup site. I have a feeling this week will be a long one..

-David Joel Lazaro

Joomla Mockups Galore

So the past week was all about building the mockups that the design group puts in the project wiki page. So far everything is going along pretty smooth. The only issue that I came across so far was the positioning of the boxes for each tab. My Joomla template has two columns for content. The left side is for other menu items such as the user menu and the latest discussion module. I still have no luck fixing the logout problem I have with the UH CAS login. I've looked at the php files for the external login module that I'm using the CAS with and I can't seem to find where it's doing the logout part. The good news is that I've read the support document from ITS and there might be an easier way to fix the logout bug that I'm having. Fixing this bug is still in my top priority for this milestone.

Another thing that I tried this past week was setting up the mockup site to a host server. I signed up for a free web hosting account at http://www.000webhost.com/. Setting up the database part was a cake. I simply exported my local database and imported it on the host server. Uploading the actual site files was the part that gave me hell. I ended up working on it for about 5 hours straight trying to get everything to work. Basically FTP won't upload some of the files from my machine. Still not sure why it wasn't letting me. I ended up trying the One Click site restore option from the host server. I had to zip the site files from my machine and upload it that way. The problem was the host would extract the directory on its own folder and not in the public folder. What I had to do was use the server's GUI setup to move the files out of that directory and into the public directory. So after about 5 hours and many trial and error, I finally have the test mockup up and running in the host server. I did this only for testing and learning purposes. This was not required for the project but I think it's a good way to learn things for future work. Stay tuned for more updates :)

-David Joel Lazaro

Plans for Milestone #2

We were really productive with the first milestone for this project, therefore we are now ready to move on to the next. So far Joomla has been on the lead in terms of getting the things we need to work. But we aren't ready to give up on the other CMS' yet. For the next milestone, we will be shifting from just getting things to work with the CMS on to actually following a mockup to replicate a somewhat final product. This way, we might discover something about the other CMS that we didn't know from the first milestone.

As I mentioned, we will be following actual mockups now. Our approach will stay the same by trying to implement things the way the CMS wants to do it. It's quite difficult to force the CMS to do something for us first beginners. One of our main focus for the next coming weeks is to try and separate the content depending on what privilege the current user has. Our site will have three users, public, admin, and participant. Each different users will be able to access different contents. Some of these features are already present in my current Joomla mockup. It's not perfect yet so I have to clean it up. I will be focusing on how the admin account will be able to administer the site using the frontend tools instead of loggin on the backend. By the end of milestone 2, we are hoping to have a usable website for the competition. Stay tuned for more updates.

-David Joel Lazaro

Kukui Cup Tech's 1st Milestone

After weeks of working with Joomla, I now have the ability to create and manage simple websites. I've learned a lot since we started working on the Kukui Cup project. This post will go through the implemented functionalities that can be used for the Kukui Cup competition.

This is the public home page. I made it so that public and registered users see different articles on the front page of the website. My public front page contains an RSS feed to Forbes.com's energy news and a sample chart made from Google Docs using their Visualization API. The energy news feed keeps the public on news that relates to the goals of this project such as energy literacy. The chart can be used to track of the daily energy usage of the participating buildings.

Another working feature for the Joomla mockup site is the implementation of UH CAS Login. I implemented it using the External Authentication plug in for Joomla. Once installed and configured, a UH user can login in fine. The only problem right now is the Logout part of this plugin. The CAS login uses session that the browser stores in memory. The plugin doesn't destroy the session instance when logging out. This results in the previous session being reused if someone tries to login right after a logout. I'm still working on getting this problem fixed. The author of the plugin is currently unavailable because he is helping with the next release of Joomla. He won't be updating the plugin until around summer time.

Once logged in, a different frontpage will be seen by the user. The registered user has access other parts of the website now. The frontpage now has a Google Calendar that would lists events for the competition. A Google Gadget is also implemented in the registered user's frontpage. For now a gadget that displays the top Green Products at Amazon is good to have. Later on the Stoplight gadget would be added to this page once its done. There's also a User Menu module on the left side which can be expanded as needed later on in the competition. The Latest Discussion module shows the latest posts from the competition forum. A workflow module is also implemented on the right. This can be useful later on for the competition administrator.

The next part is the Discussion Forum for the competition. The administrator can tweak this forum for whatever the needs of the project website. This forum is implemented by installing the Kunena plugin. The cool part of this is that it's fully integrated in the project website meaning its not running on another database. This eliminates the need for dual logins. Every website user would have a forum account automatically.

The standings page shows the implementation of two charts using Google Visualization API. Both were made from Google Docs spreadsheet. This makes it very easy and simple to create charts that shows the buildings' energy consumption. It's also easy to update the charts. Simply update the spreadsheet and Google Docs and the charts should be updated.

-David Joel Lazaro

Joomla: Status Update

So it's been weeks since this project started and I like our group's progress so far. In last week's meeting, we discussed the difficulties we faced trying to re-create the current mockup. We agreed that it's not the best way of creating a demo mockup for the competition website. Instead, we tried to replicate the mockup the way the CMS wants to do it. In other words, try to replicate most of the functions seen in the mockup even if it doesn't look exactly the same as the mockup images.

Last week, I was stuck trying to get phpBB3 to work with Joomla for our forum. I stumbled upon a Joomla plug in called JFusion. It's main purpose is to integrate other software like phpBB3 into Joomla. Installation was easy as always with Joomla. The problem is that JFusion failed to do what I wanted it to do. The dual login module of this plugin wasnt working for some reason. I spent hours reading the forums and other websites for possible fix but failed to fix the problem. After two days of trying to get it to work I finally gave up and looked for ano

ther way to get a forum running for our project. This is when I found Kunena. Kunena is so much easier to work with and the best part, it's integrated in Joomla as a module! No need for dual logins because every website user will be part of the forum. I also like that it opens up within the Joomla website instead of going to a whole new different page.

Another goal that we achieved this past week was the implementation of Google Gadgets. It's actually pretty simple to put any gadget in our Joomla website. I installed a Joomla module called Mod HTML. This allows developers to copy and paste a script and act as a module in

Joomla. I then did some manipulation to get the module to be in an article so that I can post it in the home page once the users log in. So far everything is running smooth. I have a Bejeweled game gadget on the home page of our Joomla website. I also tried to implement a work in progress Stoplight gadget that the other group is working on.

For next week, I will try and add more content to the website to have a fully working Joomla mockup site. Another feature that I will try to implement is UH's CAS login. This is what UH uses to authenticate the users of their web services. Below are some screenshots of what I have so far in Joomla.

-David Joel Lazaro

Joomla!: My First CMS Experience

Last week, our kukui tech prototype group's task was to narrow down our selection of CMS for

the project. After our first group meeting with Professor Johnson, we now have a better idea on what to look forward to with the project. Our initial comparisons consisted of 10 different CMS. We read up on Anahita, dotCMS, Drupal, Elgg, Joomla!, MODx, Ning, Pligg, Silverstripe, and Wordpress. We found a lot of good information about these CMS. We setup our review by categories which were based on what we already knew about dorm energy competition. The categories that we gave importance were ease of use, social networking, and

extensibility. We then decided as a group to select dotCMS, Drupal, Joomla!, and Silverstripe to do actual testing. My task for the coming weeks is to get familiar with Joomla and try to create mock up pages for PublicHomePage and StudentHomePage.

So far I have set up my machine (Macbook Pro) to be able to host and manage websites locally with the help of MAMP. MAMP allows me to set up my machine to act as a personal web server. After setting up the web server, I went ahead and downloaded a copy of Joomla. Setting everything up from MAMP to Joomla was pretty easy. So far, all I have are the default pages that Joomla provides. I'm still getting used to how everything works by playing around with the backend administrator settings. There are lots of things to be learned and hopefully by next week I will have a full page mockup.

-David Joel Lazaro

New Semester and New Projects

This semester, our software engineering class is all about UH Dorm Energy Competition. Our main goal for this semester is to plan and build everything for the competition for next Fall. Our class is divided into groups. Each group has a specific task that benefits the overall project. For the first milestone, I was assigned in the Kukui Cup Technology Prototypes. Our group's goal is to explore various technology infrastructures for the dorm energy competition.

For this week, our group's task is to research content management systems. So far I have read articles and watched videos about CMS such as Drupal and Joomla. Other group members are doing the same. Our plan is to meet up before our first group meeting with Professor Johnson and discuss everything that we researched so far. We will then try to come up with the best technology out there that we can implement in the dorm energy competition. The way we intend to accomplish this is by creating categories and grading each technology that we researched on. We will then tally the scores and discuss the selection before presenting it to Professor Johnson.

-David Joel Lazaro