ICS 499: Learning the Yahoo User Interface

In my efforts to improve the web user interface for the Devcathlon, I have spent an extra amount of time on researching the use of Java Script.  There are a number of things I want to implement onto the user interface; but as a novice in web scripting, I will have to take small steps.  As I mentioned in my last blog, I have been researching on inserting a progress bar and a pop up box (Yahoo UI tooltip).

Have you seen my Tooltip

After downloading the YUI package from Yahoo, I realized I was in for a long ride.  The package was filled with a lot of useful and complicated things.  So as I searched for an example of the tooltip, that’s located in the container folder and apart of the container class.  It was fairly simple to understand what was going on; basically when the mouse is hovered over a specific item on a page, a pop up box will appear with text inside.  There is a simple HTML attribute that will do this as well, the “alt” attribute.  Unlike the “alt” attribute, what the YUI tooltip with the Java Script does is; the programmer can not only set the inside text, but also set how long the pop up box will appear and disappear. 

Also the inside text messages can be set by a Java Script function, where it becomes more dynamic.  One way I saw the dynamic text messages was at my work place, Star Degree’s website.  Setting the pop up box with dynamic text messages gets more complicated.  The programmer would have the Java Script function access a database with all the information; this is where AJAX and Java Script inter twines with each other.  Another cool thing with the YUI tooltip was setting some CSS to make the pop up box to your liking. 

 

 

This tooltip has round corners, this was possible by manipulating the CSS and adding in the corners into the CSS folder. 

Finding a progress bar

Another improvement to the Devcathlon user interface I researched on was a progress bar.  When I Googled some examples of a progress bar, the results given was not what I wanted.  Many of the examples showed a download progress bar, but what I wanted was actually a page loading image.  An image that would appear when an action was made, like after pressing a link, then disappear when the page for that link was done loading. 

 

After hours of researching, I found that YUI also has this feature; but was called a loading panel, also apart of the container class. The loading panel not only shows the animated loading image, but also grays out the web page.  When I was done looking at the YUI loading panel example and narrowing down what was needed, I proceeded to implement my own version.  After many attempts to have a web page load just like the example did, nothing worked.  I then assumed that the web page that uses the loading panel must be on an online server.  My assumptions were correct, I test this by loading a web page onto my works server and everything worked. 

 

Conclusion

I realized after researching these two web page improvements was not easy at all.  A good thing I found was the Yahoo UI has many great features to use for a website, and a good API to make researching easy.  Also a lot of the hard Java Script is pre-written; a programmer can also add in new Java Script functions to work with the YUI.  In an effort to possibly write and understand, Java Script and YUI; I have obtained a copy of these two books “Learning the Yahoo User Interface” and “Head First JavaScript”.  Both books were highly recommended by one of the web programmers from my work.  

ICS 499: Taking my first step into Java Script

In my ICS 414 class, I will be participating in developing a game called Devcathlon.  The Devcathlon is a game that will help programmers gain good programming habits, by the help of the hackystat system.  The hackystat system uses sensors, which are installed into the programmers system, to follow what the programmer does.  So, also for this semester, I am taking ICS 499, which is an independent study course.  I will be using the Devcathlon game as a guide for my 499 course. 

 Learning to Walk

During the first and second development stage of the Devcathlon game, the class has been working on creating a web user interface.  So far the interface was fairly simply, the class mainly worked on creating possible event and concepts for the game and not really focusing on the look of the interface.  As a part of my 499 class, I chose to help “beef up” the interface. 

 

At first I looked at what everyone contributed to creating pages, so far the only thing that made it look really good was the tab drop down menus.  So as I observed, I thought of adding in a collapse and expand feature.  Initially having only a little knowledge in web programming, I only knew a few html tags, this task seemed difficult.  I researched on the internet on how to implement this new feature, and the results I got was to learn Java Script.  After reading through the w3scools tutorial website, I had a better understanding on what the code meant and did. 

 

I continued on my search for this new feature, this time with some java script knowledge. In which I found a good example in a forum, called webmasterworld.  In here I found what I needed to implement the collapse and expand feature.  After tracing the coded the forum provided and a few foul ups, with inserting the code into the Devcathlon pages, the feature finally worked. 

Web page when not expanded

When expanded.

Conclusion

During my research for this feature I found a very useful tool, called firebug.  Firebug is an add-on to the Firefox web browser, and helps web developers trace the code in a section of any website.  This tool will be very useful to find the next feature I will be looking to implement into the Devcathlon pages.  My next feature will be either one or both; an on load progress window or bar, and using Yahoo’s user interface widget tooltip feature.

Recommending a Mockup

After reviewing the three devcathlon user interface mockups from team 4, team 5 and team 6, I would recommend using all three mockups.  Actually a combination of all three mockups all had a key feature that would complement each other.  An example of a combination can be; using the expand and the collapse feature from team 6, with the match details used in team 5.  Also the level system from team 6 can be used as the games level system. 

Out with the old

Once these three teams can combine the key features from each, they can work on removing things.  One part that they can remove is the home page section; after logging into the game, the user should just proceed to his profile.  Also having the capability of receiving mail through devcathlon, just have a section where you can write mail.  Then the mail would be received at the user’s registered email address.  It would lighten the programming burden and lessen the user’s trouble of having another mail box to check. 

In with the new

When all the unnecessary parts have been removed, the team might want to add in some new features.  Possibly taking advantage of the Yahoo’s user interface widget’s tooltip, with this feature added in pop up containers can hold dynamic information for images, links, or even text.  Also another thing that the developers may want to incorporate into the interface is the use of some Ajax.  With more white spaces becoming available; Ajax can be used by having a new page load within a current page, making it more dynamic.  An example the dynamic page and tooltip feature can be seen at Dynamic Drive DHTML Scripts. 

     

Example of dynamic pages.

 A small additional feature that could be included is the ability to open a new window when a certain link is clicked.  For instance a user browses a team’s project list and sees a project that’s appealing.  When the link for that project is clicked, it shouldn’t take the user away from the devcathlon site; but simply open a new window to the project page, possibly a Google project page.  This can be done by easily using this hyper link line, “target="_blank">Link text here”.

 

Having the new features of a dynamic page and a tooltip with dynamic context, will making traveling around the site less annoying; having the user not have to keep clicking back to previous pages.  Also with a new window or tab opening for outside links, the user can explore outside of the devcathlon site, but still be inside.  The new additions will highly reduce back tracking, also make the site more professional and presentable. 

Recommendation

My recommendation, though all the teams did an awesome job in their mockups, but I would have to go with Team 4.  Not on any bias feelings, but because it would be less code to import into this mockup.  The expand and collapse feature requires a lot of coding, rather than tracing and pasting hug chunks of code into another mockup.  I really can’t wait to see how the site will look after its combined and cleaned up, hopefully with the new features I mentioned.  

Mockup 4 Review

I will be continuing with reviewing the different mockups built for the devcathlon game.  For my final devcathlon mockup review, I will be looking at the team of Anthony Du, John Ly, and Robin Raqueno. 

  

After signing into the mockup site, I was first taken to the user’s home page.  Not much difference in this page in contrast to the other two teams I previously reviewed.  So I then proceeded to the next option on the top tab menu, the user’s profile page.  Even though this page has a different lay out, it contained similar links like the home page did.  I’m presuming that in the next mockup version, they will eliminate the home page and just have the profile page be the page displayed once the user logs onto the site. 

  

The further I went into the site; I realize that it had the some similarities to the other two team mockups, team 5 and team 6.  The logical structure remained the same, along with the lay out of the pages.  The lay out of the pages took advantage of using as much of the empty white spaces to add more items into the page. 

  

One new feature I saw from this mockup was the collapse and expanding of parts of the page.  With the ability to expand and collapse the pages, you can fit more items onto the page with out having it increase in size initially.  Although I it was a good idea to implement this new feature, I did see some draw back.  In the “my team page”, there was no reference to having the ability to expand the page; unlike the other two pages, my profile and my matches pages, with this ability.  The developer should have included possibly an arrow or a “show/hide” option.  Other than that small draw back, this new feature was very good. 

  

The ranking system was somewhat amusing, yet socially offensive.  The ranking page was just an image, unlike the other two groups; it was not organized like a list.  The achievement badges page was structurally like the other two groups, but with less content to look at.  Also none of the input fields work, but that’s understandable; since this is just a user interface mockup. 

 

 Conclusion

Everything for this mockup looked good; some parts were different from the other two groups.  In a match page, they added in a section called the Most Valuable Programmer.  With this section, users and viewers can see who the MVP of the entire match was; which again would bring out some spirit of competition, other users wanting that kind of recognition.  Also because of the collapse and expand feature, the pages seemed compress; creating more empty places to add more things.  Over all this mockup is looks really nice, with the good use of css and adding in new graphics.  

Mockup 6 Review

Continuing the review of the mockups for the Devcathlon, just like my previous blog, this time I will be reviewing the mockup from team 6.  The members of team 6 are Philip Lau, Dan Arakaki, and John Ancheta.  This team created two different versions of the mockups; one being taking the original mockups route and the other was incorporating the devcathlon game within the hackystat website.  For this review, I will be critiquing both versions of the mockup.

In their original mockup path, there was also not much difference with the layout of the pages compared to the previous mockup; although they did a good job of integrating the css, cascading style sheet, with the pages.  They did not waste any of the white spaces, aligning things horizontally.  Navigating through the site was not difficult also; it did not take to many clicks of the mouse to travel around the site. 

The sites logical structure seems to be well laid out.  All links leading to pages that they integrated into the site worked fine; but a link, in the profile page, directing to the achievement badges page bugged me.  There was a link for going to the list of badges, but just to keep in uniformity, comparing it to the link leading to the level page.  The team should have incorporated on the badge images; just like the image of the level displayed. 

 

There was one tab option that caught my eye, the game master tab.  As I proceeded to enter that page; my first that was, “Is this option only available to website administrator or can any user be a game master?”  As I thought to myself of a user becoming a game master, another thought entered.  What if the user that’s a game master decides to cheat and award people in his team badges, having them level up faster?  I guess these are questions the developers of the game must discuss.  Though, I would presume that there would be a set system for the distribution of levels and achievement badges.  That way no favoritism would affect the game. 

Proceeding to their next version, the one embedded into the hackystat site.  I can see they spent more of their development time with this version.  They took a whole different path to the advancement of the devcathlon game.  Instead of having a second top menu tab for devcathlon, they built-in a side panel, with some of the same options from the original.  Even though the pages did not look the same as their other mockup version, it did show a new lay out for the pages.  With this new lay out, it gave the whole class a preview of “What if we built the devcathlon game as an add-on to hackystat”. 

 

 Conclusion

I like the idea that this team brought to the class, giving us another version of the mockup.  Also the idea they used for the leveling system, basically they used the military ranking system.  Another part that I liked was the use of a slide bar, but they should have implemented an input box next to it.  That way the user can not only see the value the side bar distributing, but also for the user to enter a numeric input for precision.  In all, to me, this team did very well in creating two versions of a mockup, also in utilizing Yahoo’s user interface widget.  

Mockup 5 Review

This week the class was given the difficult task of critiquing the mockups of the Devcathlon game the other teams created, along with my team’s mockup as well.  I will be looking at mockup 5; the team consists of Aric West, John Zhou, and Scheller Sanchez. 

 

When I first entered their mockup site, opening into the homepage, there was not so much different from the previous mockup done earlier in the semester.  It was the same page layout when a user first enters; having all the functions in the opening page, after signing in.  The logical structure of the site was also the same as before, all pages leading to where they were linked to previously. 

 

Proceeding to the profile page, I initially noticed that the team did not utilize the use of css, cascading style sheet, in organizing the layout of the page.  The tables of the page lead downward, which increase the size of the page.  Having the page gain in size, would force the user to scroll up and down to view the information in the page.  They left a lot of unused white spaces to the right of the profile page.  With the using css they could have brought table that were at the bottom, up to occupy the unused white spaces. 

 

 

Looking at the page consistency, it looks like the layout is constant.  All items implemented into the page, aligns to the left of the page; but again it increases or may increase the size of the page.  Another consistency problem I saw was linking the list of achievement badges page.  Nothing was wrong with the linking, but they only had one link.  This link was located at the top of the page, on the drop down menu bar of the page.  They could also link the achievement badges page to the profile page, having a hyper link when a user clicks on a badge image.  Also when I went to another page, at the top drop down menu, the link for the achievement badge page was gone. 

 

One idea I find difficult to comprehend was in the profile page.  In the section next to the user’s picture, there are two labels, rank and level.  What does rank or level reflect?  Does rank indicate the progress of the user in the game?  Or does it reflect on the user’s progress compared to his team, possibly making him the highest rank; thus, making him the leader of the team.  This could lead to some level of confusion to users when wanting to know their advancement in the game. 

 

 

The one thing I found very well thought out about this mockup was the idea of comparing badges to another user.  When the current user browses to another user’s page, the current user has the ability to compare his or her badges to that other user.  To me, this would bring more competition spirit to the game.  After all what’s a game with out a challenge.  Another part I found good about this mockup, was having a progress bar in the list of achievements.  This would help a user keep track on how much more points needed to achieve a certain badge. 

 

Conclusion

The mockup from team 5 didn’t have too many differences from an earlier mockup developed by team 2; though, team 5 did add new ideas to the mockup.  To me this team didn’t take to much time to readjust the layout, but to mainly think of new ideas for the game; the level system, badges, and events.  I did not expect any “wow” type of new interface, since none of the programmers from the team are web developers; but I did expect new ideas for the game.  I feel that this team brought some good new ideas to the game and especially a new way of encouraging the spirit of competition for the game.

The Evolution of the Devcathlon

This week we continue with the further development of the Devcathlon. The class was again split into groups, but this time each person will be working with someone new; other than a person from their previous group, during the initial development stage. The new members of my group, Mockup 4, are John Ly and Anthony Du. For this part of the development, all groups were charged with creating three new badges, three new events, and at least three new levels.

Finding a Level System

Creating a level system was fairly hard; we wanted to do something original and not to copy other games. For one moment I thought of using an anime called Naruto and its ninja ranking system, but like I said earlier we wanted something original.

So after putting the idea off for a few days, jokingly I blurted out, “How about the evolution of man”. Apparently the guys liked the idea and decided to go with it, John who was in charge of developing that page, found an awesome image that depicted what we all thought, with some humor….

Knitting a Badge

Next we brainstormed with the badges, this part was even tougher. At first there was some mixed communications with using the term badges and achievements among us three; but we cleared it out by declaring that a badge is an achievement, like how a trophy/badge will show that achievement. Also another thing that was puzzling us was how to increase levels. Sure enough after Anthony and I, explained to John that a person can gain leveling points by receiving badges.

Once the confusion was out of the way, we then thought if a person and a team receive a badge or just a person. After a long discussion we decided that just a person may receive a badge. So now we had to think of ways for a person to get one. We all threw out option for a person win a badge, like for winning the match for his team or for a person to have builds that never failed. We then took some of our earlier ideas and developed them further. Such as, the idea of a person with builds that never failed, but the user must have 25 consecutive commits without breaking the builds in order to receive a badge. Later the ideas for the other two badges easily came. One of the badges is for winning your first match and the other is for gaining the most points in a match, in which you receive the Most Valuable Player badge.

Finding the Main Event

Lastly, the 3 new events, was really hard; because, our professor had already made a list of events that will be in the Devcathlon. We contemplated really long and hard for this one topic. We came up with some ideas, but nothing was sticking down. So why not come up with an event that may lose points for the team instead. So we generated an event called “Falling Coverage”; which is, if the team does not meet a decided minimum coverage then the team will lose points from winning. Also vice versa for the “Falling Coverage”, an “Increase in Coverage”; but the team must maintain that increase with out falling for a certain period of time.

Apart from creating new events and such, we further developed the web user interface of the Devcathlon. We redesigned some of the existing pages, such as the user’s profile page. Also we added a really cool feature into all our respected pages, the ability for sections of the page to expand and collapse. With adding in the new page functionality, we maybe able to combine web pages; to reduce the user from having to navigate from one page to another.

Conclusion

This part of the advancement to the Devcathlon game was fairly rough on my team. Coming up with new ideas for events, levels, and badges was really hard, plus we spent more of our time redesigning the web user interface to the game. We also tried to meet as often, but with members of the team taking other class, also having the Super Bowl and the B.J. Penn fight all right smack in the middle of the development period. Lastly I see why a project has different development teams, but all working towards the same goal of making the product work. Well so far so good with the evolution of the Devcathlon, I can’t wait to see what new ideas the other teams came up with.