Devcathlon: UI Recommendation

My software development class is about to start coding the “Devcathlon” system. If you read my last couple of entries, it will tell you what the “Devcathlon” system is. Before we can start coding the system, we have to decide on one user interface.

My previous three blog entries review mockup 4, 5, and 6 for the Devcathlon system.
I choose mockup 4 layout for the basis of the Devcathlon system, but I also liked the mockup 6’s idea of integrating the system with Hackystat. The main page after a user logs in should be change. Add some images, or some create things to make it “hip”. I mean this is the first page that users going to see after logging in.

I kind of liked the military insignia as the ranking for the system and the dev-card with the level ranking. I liked mockup 4 and 5’s idea of not having to display all match details in My Matches page but have it in another page.

The collapsible tabs are excellent in saving space. I think there should be more of a social networking feel to it. Probably integrate a music player, and/or adding some apps into it. The comments on the user profile in Mockup 4 is awesome, lets people add their comments and the user profile.

I also like mockup 6’s idea of an Administrator page for the manager/boss. This page lets them promote and demote ranking of players and team. Also this page lets you award and take away badges. With this in place, players cannot cheat the system and put in bogus points and badges. With an administrator page, he gets to see over all matches and moderate things within the system.

The drop down menu bar might have to be change so it can also be collapsible within each link. Similar to menu bars in online stores, where a user click on a title and that title expands to different sections – this is done within the menu bar. As the Devcathlon is developing and new pages and ideas is added to the system. I think that the menu bar right now will not be able to show up all links.

We should not have an extra “messaging” system with Devcathlon. I think it will be one extra thing to worry about. Also, the system automatically sends emails to users, so keeping the system to sending emails to users is alright. I do not thing we need the extra messaging system. Too much hassle to worry one more “inbox.”

Add an RSS option to the matches, so users can get a RSS feed to anything that accepts RSS feeds. Keeps the user up to date with their current matches and projects. It is awesome with a RSS feed, I use it for my news updates and deals updates. Might be a good idea to have a RSS feed.


Spice up the color scheme by trying out different color combinations. There might be one nice color combination beside the light-blue we have right now for the Devcathlon.

These are the things I have in mind for the user interface recommendation. Hopefully some of them get implemented into the Devcathlon system.

Devcathlon: Mockup 6's Review

My software development class is about to start coding the “Devcathlon” system. If you read my last couple of entries, it will tell you what the “Devcathlon” system is. Before we can start coding the system, we have to decide on one user interface. Soooo… this week, I am going to review my team’s mockup pages and the other two teams – let’s get started.

This entry, I will be reviewing Mockup 6’s team – oh yeah, that is my team. This team consisted of D. Arakaki, J. Ancheta, and me. This team is the “dream” team, the awesome team out of the class.


The first user interface is similar to mockup 4 and 5’s pages, we also have an administrator page called Gamemaster that lets the “manager”/”boss” to promote and demote rankings, also they can add and take away certain achievements. Our ranking system uses military insignias and you can be automatically promoted if you obtain a certain amount of achievements. I kind of like the idea, as you obtain more and more badges you get to go up rank.


I want to review the second user interface that mockup 6 have. The idea was that in order to create a team, first project have to be defined in Hackystat. Once there is a project, it has members in it, and that is how teams are created. Taking that approach of “binding” between Hackystat and Devcathlon. The idea was to have Devcathlon be integrated into the Hackystat project browser.

With this intregration, it is only few clicks away from defining a project and members for that project (that in turn creates a team). The tabs on the left are layout for the user to have easy access to Devcathlon.

The layout is similar to Hackystat browser, most of the Devcathlon pages are one page-r. Following Hackystat’s layout, the Devcathlon have a similar design to its own layout. Since the pages are integrated with Hackystat, the color scheme is all the same. The downturn is that we cannot define a new color scheme for Devcathlon or else it will look entirely different. There is one or two widgets – gamemaster have the widget with military insignias and badges to promote and demote players, widget to add files to Devcathlon.


Mockup 6’s Pros:

• nice idea of integrating into Hackystat Project browser.
• Gamemaster lets player be promote and demote in rankings and badges
• keeping Devcathlon simply by adding extra menu tabs on the left.

Mockup 6’s Cons:

• Color scheme cannot be different from Hackystat project browser.
• might be too confusing to first time users.
• Gamemaster can be bias.

Overall, I liked the idea of integrating with Hackystat, but it does not let us change the color scheme. Also it might be too confusing for first time user. It might be best to have Devcathlon user interface separate from Hackystat.

Devcathlon: Mockup 5's Review

My software development class is about to start coding the “Devcathlon” system. If you read my last couple of entries, it will tell you what the “Devcathlon” system is. Before we can start coding the system, we have to decide on one user interface. Soooo… this week, I am going to review my team’s mockup pages and the other two teams – let’s get started.

This entry, I will be reviewing Mockup 5’s team. Their team consisted of A. West, J. Zhou, and S. Sanchez. This team also has an advantage in creating some awesome pages and coming up with some cool ideas for the “Devcathlon” system.

Mockup 5’s main page after logging in is similar to Mockup 4’s main page. The main page shows most links that a user can click on to get started. The drop down menu bar right after banner also has most of the links for the user to examine. A user can get a team and a match started fast – just takes three to four clicks to get both a team and match.


The main page, user profile, and drop-down menu bar shows everything a user needs. The user profile is different from Mockup 4’s user profile. This user profile shows information about that user, I wonder if this applies to all users, and do they have any option of not showing certain information, like their address. The user profile, everything is on the left side, too much white space on the right side of the page. The team should have thought of lay out in a way to get rid of white space. I liked their idea on the “My Matches” page, only if they have thought of getting open and close tabs that would have been excellent. They will save time from linking all the html pages together.


The pages organization looks somewhat consistent. The user’s profile has to be fix to get rid of the white spaces on the right side. The icons on the achievement page should be all one size and not different sizes – it looks messy and the color scheme on that page does not match the color scheme for the entire site. Overall, the layouts looks similar, they are not confusing and “messy.” They have one or two widgets in place, like importing a file – a window pops up for you to find the files on your local machine.


Mockup 5’s Pros:

• My Matches page – good idea in making the each match clickable and shown on that page.
• two to three clicks away gets a team and match started.
• The pages are consistent and layout does not show the pages “confusing.”

Mockup 5’s Cons:

• icons on the achievement page are different sizes, should make them all one size
• user profile is bunched up to the left, too much white space on the right.
• saving the hassle from making new pages, use the idea from Mockup 4’s open-close tabs

Overall, the team has a similar idea in creating an easy to use interface for the “Devcathlon” system. They have the similar laying out the pages so the pages are not confusing to a user.

Devcathlon: Mockup 4's Review

My software development class is about to start coding the “Devcathlon” system. If you read my last couple of entries, it will tell you what the “Devcathlon” system is. Before we can start coding the system, we have to decide on one user interface. Soooo… this week, I am going to review my team’s mockup pages and the other two teams – let’s get started.

This entry, I will be reviewing Mockup 4’s team. Their team consisted of J. Ly, R. Ranqueno, and A. Du. Personal, I think this team is stacked with developers who can think over the top and beyond.

Mockup 4’s main page after login shows most links that a user can click on to get started. The drop down menu bar right after banner also has most of the links for the user to examine. A user can get a team and a match started fast – just takes three to four clicks to get both a team and match.


The main page, user profile, and drop-down menu bar shows everything a user needs. All the pages looks like they are one page-r which is good because some people (I am one of them) do not like to scroll down a web page that is three or more pages long. I like their idea of using closeable drop-down pages within their pages; it saves page space and keeping the pages to one-two pages long. I do not like the user’s profile page where I have to scroll to the right in order to see the inbox. It is a hassle to scroll to the right of the screen in order to see the user’s inbox and scroll back to the left.


The pages organization looks somewhat consistent. The user’s profile has to be fix to get rid of scrolling right and left. Overall, the layouts looks similar, they are not confusing and “messy.” They have one or two widgets in place, like importing a file – a window pops up for you to find the files on your local machine.


Mockup 4’s Pros:

• the closeable pages within a webpage is awesome, saves space.
• two to three clicks away gets a team and match started.
• it has the facebook/myspace feel to it, overall the pages are consistent.

Mockup 4’s Cons:

• User’s profile have to scroll right to see the message inbox.
• not all the links are in the menu bar
• the closeable pages show have a drop-down indicator so user will know they are open-able.

Overall, the pages are consistent. I liked the idea of the close-open pages within each web page. It has a social networking feel to it, which is good because most people have a social networking site.

Devcathlon: Mockup 2

My software development class is still in the mockup phase for the devcathlon system. If you read my last two blog entries, it will talk more about the devcathlon system. This week, we switch around the teams, and I am currently working with J. Ancheta and D. Arakaki. With the new teams means new ideas and that means a new set of new pages for the mockup devcathlon system (http://code.google.com/p/hackystat-ui-devcathlon/source/browse/#svn/ui/mockup6).

My job was to redo the badges page (devathlon system is using a badge rewarding system, an individual achieve an event i.e. commit early to their main repository, will be rewarded a badge) the badges page had different image sizes, so I resized all images to 50 by 50 pixels. I added four new badges that an individual can get:

My next step was to create a level system (also can be call a ranking system, right now we are using D. Arakaki’s idea of using military insignias as our ranking system. For example, an individual will get a rank of a private when he gets two badges, and so on. The following image will show an example of the ranking system.

My last task was to create an event idea that might get into the devcathlon system. My event idea is:

Coaching
Summary: Reward to the individual that solves a problem and shares it with the other programmer, who cannot effectively solve problem alone. This other programmer has to understand the solution and how it was implemented so he can become a better developer.
PAR: After reaching a solution and shares with the other programmer, the developer that come up with the solution logs in to a special section to indicate their participation. They must indicate (a) what was the problem; (b) what was their solution; and (c) the other developer they were working with. This event instance then gets put on a queue of items to be validated by a member of the opposing team. If validated, the individual came up with the solution gets +15 points. While the other programmer gets +10 points.
Decay/Incentives: No more than 1 solution can be awarded in a single day to a single programmer.

We did at least two in-person meetings and one online meeting. I do not have any Hackystat (http://code.google.com/p/hackystat-utilities/) data for this week. Just like last week, I did my mockup pages using Adobe Dreamweaver CS3. Maybe in the next couple of weeks where we start coding the devcathlon system that I will get development time data from Eclipse IDE.

Devcathlon: Mockup 1

In my previous blog entry, I talked about the second semester of software development class. This semester we are going to code a game called Devcathlon (http://code.google.com/p/hackystat-ui-devcathlon/), a collection matches for programmers. Points are based on variety of things: program code compiles, build successful; points can also be deducted on compile failure, and other things. Programmers can team up and go against other team. Devcathlon is based on Hackystat (http://code.google.com/p/hackystat-ui-wicket/) and/or Hudson (https://hudson.dev.java.net/).

I am teamed up with fellow classmates John L. and John Z., to create a mock draft of what it should look like, the first couple of days we were planning on what should go on the site, so each of us made a sample. Friday night we had an online meeting and showed our sample. We agreed on John L’s layout and took my idea of a drop down menu bar.


So everything was agreed on and we started to tackle the mock draft. I created my set of sites and uploaded to our team’s repository folder. By now we have our mock draft of Devcathlon, it looks decent and alright. The bad part about my Hackystat data is that I did most of the pages using another program and not in Eclipse. Since we are creating web pages, I did most of my set of pages using Adobe Dreamweaver CS3. So I might not have any Hackystat data for doing my set of pages.


Some Devcathlon events I think would have been good for this “match” are committing no more than 300-500 lines per one time, spread time out evenly (like working no more than two hours each day), meeting at least once in the week, spread work evenly with team. I do not see getting coverage as one of them, and building/compile correct as another. I think our team would have won; the points probably came from rules being set before a match, and one or two self-reporting points.

"Devcathlon" Game

Had a blast in 2008, welcomed the New Year, out with the old. A new semester at the University of Hawaii, taking the new software engineering course two with Dr. P. Johnson.

Right now, the project for the class is to develop a similar game (http://www.ddj.com/cpp/184401568?pgno=1) that will reward and deduct points from a group of people. The points are based on if a person fails a build (does not have automated tools [PMD, FindBugs, Checkstyle, and etc.], does not pass Junit test case runs, and/or does not compile). There are other ways the points can be given out. The game will be called “Devcathlon”; the ‘dev’ is for code development, the ‘cathlon’ is similar to the Olympic event Decathlon. The game racks up points for each developer and at the end of a time length, the group of developers can see who racked up the most points and have bragging rights for the time being.

Before the class begins working out the code, GUI, and the works of this game, each of us have to find out what makes a game “good?” I took a game designing class a year ago, and this question was brought up to us on the second day of class. The class used Adobe Flash, and we did animated games, you can view the games I done by clicking on the following link: http://sites.google.com/site/phillipkhlau/projects-page. Back to the subject, what makes a good game, so I read an article (http://serc.carleton.edu/introgeo/games/goodgame.html) and I agreed with the points the author made, it got to be fun, it has to be balance between the AI and player, player and player and etc. Other points includes getting the player hooked onto the game, there are certain games that I played and got bored of it (I have one or two games where I still did not get though the story) and there are some games where I finished it in three – four days. This article http://www.gamegrene.com/node/591 I read, talks about why Halo is a good game, maybe because they are “fun.” That is one good point; the game has to be fun to the player. Another site I read was a forum site; it was asking why the game Silent Hill is scary, what makes it scary http://boardsus.playstation.com/playstation/board/message?board.id=horror&thread.id=41323, another point of making a good game is probably the surprises that come along with the game.

Taking what I read about making a good game into making the Devcathlon system. The system can have “surprises” like extra rewards (like reward of 20 consecutive successful builds) and deductions. Can have some animation in it, in this day and age, I do not think a text-only game will be “fun” (I might be wrong). Can the points be useable, or it is just there.