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.

Preliminaries of the Devcathlon

This week, our class was split into three groups to initialize the development of the Devcathlon.  For this first stage of the development, each group was given the chance to create a mockup of the how the user-interface would look for the Devcathlon. 

My group, consisting of Schellar Sanchez and John Ancheta, took many different approaches when going through of what a user of the Devcathlon might see.  Schellar and I used a possible page similar to Myspace for the user’s profile.  John also thought of using Yahoo Games way of creating matches between teams.  We all put our ideas together and came to terms of what the interface will be, dividing the pages to each member.

One of the pages I was charged with developing was the Team’s Page.  I thought of some ways to do this page, looking at how Myspace and Facebook designed their group pages and what options they gave to members of a group as examples. 

Each group also put the Devcathlon events to the test for this assignment, where we would rate ourselves.  The events we used for this round of the Devcathlon can be seen in this table:

Event	Points
Commit early	19
Commit regularly	19
Don't wait until the last minute	-5
Collective ownership	5
Provide issue ID in commit message	-1
Every member has an open issue	-3 (total)
Team meeting	20

Since no programming was involved, not all the events of the Devcathlon were put to practice on this round.  We came up with a total of 40 points, which isn't so bad.

Seeing that we got a head start with 20 points for an early commit, I sure hope we won.  Points wise, I think we won; but in the design walk-through of the site, maybe we have something other teams might like or might have missed.  In web designing, I noticed that a lot of the “wow” features comes from the CSS part of the webpage.  Unfortunately none of us in the group are web page programmers, but I say we did a descent job in designing the web pages.  

A new view to Game Designing

Intoducing the Devcathlon

This semester, yours truly, will be continuing the journey into software engineering by taking the next level, which is ICS 414.  I will be participating in the development of the devcathlon, which is inspired by the decathlon.  Unlike the decathlon, the devcathlon will involve software developers and there will be no physical event involved.  Though, the devcathlon will be very much similar to its original counterpart the decathlon; it will have events that developers can participate in.  Software developers partaking in an event by entering, either individual or team, projects.

The development of the project will earn points by events, such as: the number of commits you do to the repository, having a high coverage, keeping complexity of the program low, and many more.  All these can help you gain points or possibly have you lose points, in either an individual or team event.  This will be possible by the use of Hackystat and its sensors, which monitors the project entered to the devcathlon. 

Right now the devcathlon is still in its design phase, but I’m looking forward to taking part in the progress of this semester project. 

 

Gaining wisdom

 In an effort to understand on how to design the devcathlon, I did some readings on effective game designing.  I first found an article containing pieces out of Richard Rouse III’s Game Design: Theory & Practices, which focuses on the elements of game play.  The articles talks about how game designers are expected to instinctively know what makes a game really good, like a sixth sense of that person.  Also that, designers should use holistic methods in devising puzzles or other problems that a player must solve in order to progress into the game.   One idea that I found interesting was to not have the game be linear, having the player became apart of the design of the game’s story; such as, taking a number of different routes to get from point A to point B.  Using the non-linear idea will make the player not feel enclosed to just one way of playing, that way he or she would not become bored of the game. 

Another interesting article by Ernest Adams, entitled Simplification, he discusses how inexperience designers aim to include realism into a game.  An example would be, including air factor and gravity in an airplane simulator game.  Adding such realistic features, make the game complicated, having the player that isn’t a real life pilot not want to play.  He then mentions that designers should include such possible features at the beginning of the game’s design, later removing them and possibly adding back in; taking into account the load it may cause on the tools used to play and make the game. 

I also read a few other articles, another by Ernest Adams, called “Bad Game Designers, No Twinkie”.  He lists a number of characteristics that have not been thought out well in games, both old and new.  Another piece I found was an excerpt of the first chapter of Richard Rouse III’s Game Design: Theory & Practices.  In this chapter he converses on the subject of what players want out of a game.  The last article I read, by David Harlow, was Games as an Educational Tool.  In this, the author talks about how games could be a very useful tool to share some education through some parts of the game.  An example of this would be, using a player’s math skills to unlock a treasure chest.  He then lists things that designers should remember when designing educational games, such as keeping the player motivated to play. 

A better grasp of designing

After reading many articles on effective game designing, I now have a better grasp on how to construct the devcathlon.  Such as, keeping the user interface simple; we wouldn’t want a new player to have so much trouble just to find out his daily event score.  Also another is to find a way to motivate a player, at times competition brings the best out of people or it can also bring out the worse.  Hopefully all the programmers that participate have good sportsmanship.  Lastly is to not drift away from it being an educational tool, but still being fun to play.