Cooperative Game

The rapid growing range of devices that use for viewing webpages has given us a totally new way of viewing a webpage.  In this project, we demonstrate how responsive web design can be an interactive and cooperative game by adopting six individual riddles on each device. One of the advantages is that it only requires a web browser; an app or other installation is not required (e.x. Flash plugin).  Although it seems to be an immature cooperative game at the moment, the concept of how responsive web page can be made into a cooperative game is formed.

In this short essay, I would like to address the importance of playing cooperative game and how playing it can be a benefit for social changes.

 

Finite and infinite Game­s

According to LeFevre (2002), there are two main kind of games, finite or infinite .The purpose of a finite game is played to win; it has a definite starting and finish. A finite game usually resolved within the context of its rules, with a winner of the contest being declared and receiving a victory (Carse, 2011). As shown in Figure 1, the riddle hunt game can be considers as a finite game, it is played for answering 6 riddles correctly with the shortest time spent to solved all the riddles.

 

Figure 1 – Riddle Hunt Game

On the other hand, an infinite game has the idea of keep playing. There isn’t a definite starting and ending in an infinite game. It is sometimes played with the goal of inviting more players into the game. Unlike the rules in a finite game, rules need to be changed when there appears to be an ending for infinite game.

In addition, no matter what kind of game theory is adopted, finite and infinite game, depends on the rules, all have the possibility to be a cooperative game. According to Carse (2011), it is an unchanging principle of all play, finite and infinite, that no matter what kind of games a participant is playing, always can play freely.

 

Cooperative and Initiative Game­

Cooperative games stress participation, challenge and entertaining rather than beating other player. It focuses on enjoyment and communication rather than fight and isolation. The concept of such games is not innovative.  However, Some of the traditional games that people play when they were in their childhood.  There may be competition involved, but the consequence of the competition is not to lose. In its place, it may contain swapping sides so that everybody will be on the winning side.

Initiative games are exciting, cooperative, and challenging games in which the group is confronted with a specific problem to solve. There are several reasons to support initiative games. It offers the opportunity to show and educate management skills to its participants, which enhance the development of trust and problem-solving skills in groups.  Games can be use as a tool to explain a method of thinking about experiences that helps people to learn and practice.

 

Good Reason to play cooperative game

If there is a group of individuals willing to join in social change, breaking down of embarrassments is the first step before they become group mates. Some good essential qualities such as trust and communication are needed to be able to build a team that can solve the problems (Counts, 1963).

Cooperative games also help set the tone of an action.  Social change work is often hard-driven and energy-consuming.  Many groups discover that cooperative games offer kindly method to connect passionate task-oriented aims with ambitious, group-minded teambuilding.  Additionally, entertaining and games help boost social change.

Another benefit of such games is to get its participants to think together, so that individuals in the group have contributions. It is believe that when each group member has inputs they also have ownerships, and usually when more individual has ownership there tend to be more success (Counts, 1963).

It is believe that games can actually emphasize the goal of group’s purpose or even individuals daily work. Through a technique called “framing,” games become relevant and powerful tools to break down barriers, build up focus, and make your group’s process more effective and inclusive of all involved (Rohnke & Project Adventure, 2009).

It is essential to include a sense of purpose, opportunity and passion when creating a cooperative game. Without those pieces as goals, games become pacifiers for the grown, as their potential to stave off the appetite of a group that hungers for power is immense.

 

Conclusion

It can be seen that a responsive web design can be made into a cooperative game, with the benefits from playing such game, the purpose or goal of the game become a very important factor. The goal of the game is usually decided during the start of the activity. Players probably given a deep message, or the game introduced as a metaphor (Rohnke & Project Adventure, 2009). In addition, the group reflection aids participants to see how they met the goal, and to envision the broader social change implications.

 

References

Carse, J. (2011). Finite and Infinite Games: Free Press.

Counts, G.S. (1963). Education and the foundations of human freedom: University of Pittsburgh Press.

LeFevre, D.N. (2002). Best new games: Human Kinetics.

Rohnke, K., & Project Adventure, Inc. (2009). Silver Bullets: A Revised Guide to Initiative Problems, Adventure Games, Stunts, and Trust Activities: 25th Anniversary Edition: Kendall Hunt Publishing Company.

 

 

Is RWD really perfect?

In this semester, I study Responsive Web Design (RWD) and I have managed to use media query to control different styles for multi-device support. However, I began to think about two questions since the first time I knew RWD.

  1. Is RWD suitable for any types of websites? (or every website should be designed responsive?)
  2. Are there any problems brought by RWD?

 

For the question “a”, I found that RWD is not suitable for any types of websites. I classify the websites into eight types (some with examples) as followings:

All of them have different characteristics. Any companies and websites have different target user needs. So I will discuss how to choose the appropriate design solution from two aspects.

Firstly, I think if we want to make them responsive from the aspect of design complication, we just need to consider the amount of information.

We can see from the examples, web portal, company/industry information websites are all portal websites and E-commerce websites that gather information together in one site. These kinds of websites have complex navigation and layout to help users to reach the information they want. The more content we should take into account, the more error will occur when we do responsive web design. This means that websites with complex structures are not easy to design.

Second, as user-friendly is the key to the success of responsive website I will discuss from the aspect of user experience. If we want to design the website to be responsive, we should redesign it for mobile users. For example, hide unnecessary design, change the display style for the navigation bar, and change the layout of the content. These changes will cause the change of users’ operation. The responsive design has no meaning for us if these changes are designed bad and bring users a negative impact. So whether the website should be made responsive, we must evaluate our team first. We must make sure whether we have ability to understand our users and know their habit accurately.

 

For the question “b”, I found many problems brought by RWD when I wrote the code for our group work.

Problem 1. Data redundancy

It is obvious that we need to write more codes than before because we should redesign the website for different devices. I found this problem when I wrote media query for iPhone5 below the media query for iPhone4. When I tested, I found that the code in media query for iPhone4 still have impact on the display of iPhone5. That means iPhone5 need to download all the code until it read the media query for itself (see Appendix). The data size of the code is not big enough to cause my attention to consider this problem. But for images, it is a big problem. When we make the website responsive, we always set the images non-viewable for mobile devices. However, the mobile devices still download the images. The traditional design (apply another css style for mobile devices) will not have this problem.

Problem 2. Testing

Opera Mobile (www.opera.com/) is a good browser for testing the code but it still cannot truly simulate a mobile phone. Because it can only read width and height in media query but cannot know the accurate devices that the media query refers to.  There is no browser supported to test the code so I must borrow many kinds of devices from my friends and then test and debug the code on them. The time I spend on the debugging may equal to the time I write another style for each device.

Solution:

There are a few online sites available on the Internet which provide facilities to check the various functionality of the sites with RWD. Designers can make use of these sites to view the appearance and other aspects of their sites. It is worth mentioning that there are a few companies available these days which help the designers to have a look at their sites on rental basis. The designers are only required to visit the outlets of these companies and avail the facilities just by paying for it. (Themes4CMS, 2013)

 

Problem 3. Code order.

I found that media query is not so smart as I imagined. In this project, I spend a lot of time on the order of media queries. At the beginning, I did not know that we should to write media query according to the order from narrow to wide width. After Amy told us this rule, it can mostly work well. But it still have little problem. I must put the media query for iPad mini below that for the new iPad or it cannot display well. I still don’t know why.

 

I also research online about the problems of RWD and find that there are more that are really worth to consider although I did not occur in my project (WebDesignShock, 2012). Responsive web design is not perfect due to two reasons I have discussed above.

 

 

References:

Theme4CMS (2013), Common Responsive Web Design Problems

www.themes4cms.com/blog/common-responsive-web-design-problems/ [Accessed on 22 April, 2013]

 

WebDesignShock (2012), 11 Reasons Why Responsive Design Isn’t That Cool! www.webdesignshock.com/responsive-design-problems/ [Accessed on 22 April, 2013]

 

 

 

 

 

 

Appendix

/*show block1 for iphone 4 and iphone 4s*/

@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

#block1 {

display: block;

background-color: #f7edd4;

height: 600px; width: 100%;

margin-top: -70px; }

}

/*show block1 for iphone 5 */ /*hide the block1 because we have let it display in the media query for iphone 4 above*/

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {

#block1 { display: none; } /*important*/

}

 

Parallax Scrolling

Parallax Scrolling

 

Introduction  

In recent years, the word “Parallax Scrolling” becomes increasingly more popular in the web design, and has gradually become a trend of web design. (King D., 2013) This amazing visual effect first appeared in Nike Better World in 2011, and since then widely in use.  (Joe, 2011) It is usually a long web page, in a storytelling way, to show a complex process to users and allowing users to feel as if they are in it, rather than the monotonously dull design. It uses some stunning illustrations and graphics, and use parallax scrolling effect by moving multi-layer at different speeds, to form a 3D motion effects, bring pretty good visual experience.

In this essay, I will discuss the concepts and features of parallax scrolling effect firstly, and then talk about the long page website, which is related closely to the parallax scrolling effect. After that, there will be several examples of gorgeous parallax scrolling websites. At last but not least, it will state some tips about building a parallax-scrolling web.

Concepts and Features

There are no exactly definitions of Parallax Scrolling. So, according to experience of several parallax scrolling website, the concept and features can be summarized as following.

The “parallax scrolling” effect about refers to a multilayer background moving at different speeds, forming the 3D motion effect, in order to bring a great visual experience.

Based on personal experience, I think it has several distinctive features.

First of all, it usually applies to a single web page. Secondly, to form a parallax scrolling effect, it needs that setting those elements on the page hierarchically to make them scroll independently. Besides, parallax-scrolling web contains both vertical scrolling and horizontal scrolling. In addition, parallax-scrolling web always has long webpage.

Parallax Scrolling and Scrolling Long Page

In submission 2, our entire webpage was designed into such a parallax scrolling effect, but in my opinion, to be honest and strict, I personally think that our website cannot be regarded as parallax scrolling page – although it was designed in accordance with the principle of parallax scrolling, but it did not show a parallax scrolling effect as setting different scrolling speed for different layers. However, it did achieve the effect and principles of scrolling long page, which is still classified as parallax scrolling website technically.

Take Kentisbury Grange and The World’s Highest Website for example:

Source: www.kentisburygrange.co.uk/

 

Source: worlds-highest-website.com/

About the reason why use long page, Tunde Corkshott (2012) explained that it is related to “aspects of user psychology and behavioral economics”. Users need automotive site, with the constraint of retaining the existing visual design and the reuse of existing content. (Corkshott T., 2012) Human’s foraging and anchoring behaviors can explain it. Website designers and users always have different perspectives when they acquire information from the website. Designers do know available information in it, while unfortunately users often get information from illogical way in designers’ sight, and they easily miss sections or cannot find helpful tools and functions to guide them. The reason is that they do not explore more, but only get information within few areas they are familiar with; even other aspects have better sources or more available tools. This behavior is similar to “hunter-gatherer tribes or foraging animals” – regarding information as nourishment they need. Users require to know “where they are, what they can achieve, and there are other options available on the site that will meet their needs”. (Corkshott T., 2012)

Furthermore, parallax-scrolling page mixes emotional and rational content together, rather than traditional way – set emotional content, images, or video galleries and then give access to the details. It simplifies the navigation and provides a more interactive user interface. (Corkshott T., 2012)

10 Examples

Here I would like to show some excellent examples of parallax-scrolling web.

1. iutopi

Source: www.iutopi.com/

2. Bowtie

Source: bowtieperiod.com/

 

3. These are things

Source: www.thesearethings.com/

4. Parallax Scrolling Tutorial – Smashing Magazine

Source: richardshepherd.com/smashing/parallax/background.html

 

5. Lost World’s Fairs

Source: lostworldsfairs.com/atlantis/

6. Ben the bodyguard

Source: benthebodyguard.com/index.php

 

7. Paramount Farms

Source: paramountfarms.com/#processing

 

8.Kinetic V5

Source: www.kinetic.com.sg/main.html

9. Like There is no Tomorrow

Source: www.like-there-is-no-tomorrow.com/

10. Hexaedro

Source: www.hexaedro.eu/#index.php?locale=pt_PT

 

Tips for Building Parallax Scrolling Website

As long page website becoming a fad, digital specialists give up some tips for designers.

Firstly, Make it responsive or at least mobile friendly. Parallax scrolling web design becomes more and more mature, but it still cannot be used widely on mobile devices. People use mobile to connect the Internet very often currently, mobile web usage also became a trend, so that it should be considered to broad the utilization of parallax scrolling on mobile devices. Secondly, make it fun. Thanks to the storytelling style, parallax scrolling often brings users some entertainments by take users on a journey through a timeline or story.  Thirdly, add layering and depth. It is important to clarify the different layers, which need different speeds. “The art of parallax is about creating an illusion of depth. Remember to experiment and not to give up” (Chan J, 2013). Fourthly, do not forget pre-loading assets. Parallax scrolling websites tend to involve pretty heavy utilization of imagery and multimedia assets. (Chan J, 2013)

Conclusion

I started to get engaged in web design since this school year. During the Christmas holiday, I learned and discussed web design together with my friends and got to know about this kind of website formwork. I am attracted by its unique design of the UI experience and fresh style. This creative web design effect gives a smooth and gorgeous animation shock to large extent, making users indulge in the wonderful operation design and impress by the designer’s inspiration of construction.

Parallax scrolling web design becomes more and more popular. Its design and implementation both needs to be deeply researched and practiced a lot for me.

 

Reference

Joe (2011), Experiments with Scrolling Effects since Nike “Better World”, Design. Available at www.publicreative.com/blog/design-2/2011/07/experiments-with-scrolling-effects-since-nike-better-world/

Cockshott T. (2012), Why the Long Page? Tech-the week in technology.net Available at: www.netmagazine.com/opinions/why-long-page

King D. (2013) 15 Web Design Trends for 2013. Slideshare.  Available at: www.slideshare.net/davidleeking/15-web-design-trends-for-2013

Chan J. (2013) Build a Parallax Scrolling Website: 10 Pro Tips. Available at: www.creativebloq.com/web-design/parallax-4132336

How does our project affect Social Communication

There is no standardized definition of Social Communication online but as far as my understanding, Social Communication is about talking to the people around you no matter who they are or what they do. However, there are natural barriers in terms of Social Communication in many aspects. They are physical barriers, psychological barriers and linguistic barriers, etc. (Michael K. Swan, 2009). Moreover, with the development of Internet Technology some people are getting more and more independent and isolated since they can see the whole world by just simply viewing news pages on a tiny laptop. “It has been suggested that shy and socially isolated individuals communicate more on the Internet because it provides some protection from social anxiety.” (Sarah A. Birnie, 2006) Thus, to some extent, letting people become familiar with each other via Internet is no longer an easy task.

 

At first stage our group was only focusing on the technologies used on Responsive Web Design since the term RWD was originally brought out by Ethan Marcotte for more convenient use of web pages when displaying on different devices. (Ethan Marcotte, 2011) However his intention was all about removing a wall between laptop and mobile when users view a website on them. The navigation panel may appear differently according to the size of the browser, which can be recognized as the size of the device as well. The video shows on the website may shows at a different position when viewing this page on another device. Users are typing in a same URL but the whole pages shows differently on assorted devices.

In order to dig something new from RWD and challenge the original intention when inventing this term, after our team’s brain storm a creative idea came out. Other than showing the whole page on various devices which is a way that traditional RWD would do, we focused on one aspect which is media-query to build our website. Moreover, we designed a game related to our site for people to play. Our responsive web consists of six different parts of puzzles and each puzzle could only be showed on one specific device such as iphone, ipad or mac, etc. People who play this game need to guess what device she/he may need to find the puzzle and answer it. However, if we do it this way, there would be a problem for people to find devices since there are so many kinds of devices and it is impossible for one person to hold them all. So teamwork is all needed. “Teamwork is the coming together of an alliance or group of minds to collaborate, co-operatively work on a project, solve problems, negotiate, resolve conflict etc.” (Lovemyaj, 2008) Just like we do this project by six people of different races, colors and we are from four countries in the world. Teamwork is essential to us and besides teamwork, nothing can be more important than communication. “One key element to successful teamwork is communication and communication is what bridges teams together”. (Lovemyaj, 2008) Due to media-query, we are able to control the display of every puzzle by defining which puzzle could appear under a certain resolution and other puzzles would display none. If they open our website on a device that is not on our design list, they would see hints for them to try other devices. Our big prize goes to the person or team who find all the puzzles and answer them correctly.

 

On the day we presented our project, teachers came and some of our friends came as well. They formed teams by themselves and competed with each other.  As far as I know, two of my friends formed a team but they didn’t know each other before that day. Even though their team didn’t win the big prize, they got to know each other through playing this game. To find the right device for displaying the puzzles, they cooperated with each other and communicated in order to exchange thoughts together. One of them is my classmate and the other is from Sound Design. Although we attend courses in the same building and even have a same course this semester the two lovely guys don’t know each other. I am satisfied to see one of my friends becomes friend of another friend of mine through this project. The friend from Sound Design is talented in Music and instruments while the other is an excellent guy who is capable of writing any codes and a man of creativeness. There is a high possibility that these two people work together in other area to create something new and exciting since they are friends now. No one can deny the potential power of social communication resulted from our project. There is another way to expand the value of social communication from our project according to Prof. Martin’s suggestion. We could present this project in a way that people gather here with the purpose of finding a date. Moreover, this game could be brought as a game for icebreaking at the beginning of each academic year.

There is another aspect I would like to mention here about the communication between website and people. It would be a disaster when a puzzle is explained in a vague way. When designing my puzzle I made a mistake that I forgot to put “”diagonal“ after “horizontal” and “vertical” for people to guess how many words there are in total. This critical mistake had made people entered wrong answers.

So, the importance of communication both among people who play our games and between website and people who viewing it cannot be more obvious.  “Only with communication will the project beneficiaries become the principal actors to make development programmes successful.” (Jacques Diouf, 2000) It is a big breakthrough for us to change the traditional routine of designing a responsive web and challenge media-query to make our presentation to be a way of enhancing the social communication among people.

 

References:

Michael K. Swan. (2009). Barriers to Communication. FACTSHEET.

Sarah A. Birnie. (2006). Psychological Predictors of Internet Social Communication. Journal of Computer-Mediated Communication. 7 (1), 0.

Ethan Marcotte (2011). RESPONSIVE WEB DESIGN. New York: Jeffrey Zeldman. 1,74, 128.

Jacques Diouf. (2000). COMMUNICATION a key to human development.Available: www.fao.org/docrep/t1815e/t1815e01.htm. Last accessed 24th Apr 2013.

Lovemyaj. (2008). How Does Communication Affect Teamwork.Available: www.studymode.com/essays/Does-Communication-Affect-Teamwork-160300.html. Last accessed 24th Apr 2013.

Cooperation vs. Competition

Cooperation is a tenet of our society. It is the underpinning of civilization and the difference between the modern world and antiquity. Grouping of individuals holds cultures together. It is this instinct that enables the populous to thrive, keep food on the table and survive. It is human nature. We want to be on a team.

Conversely, human kind is also fiercely competitive. A basic desire to be the best – and a need for the less capable or skilled individuals to fail is even present subliminally; natural selection is a striking example. It is also human nature. We want to win.

It is the point of intersection between these two evolutionary necessities that I find most interesting.

I believe the best way to highlight these traits is through a cooperative game or puzzle. It is this idea that served as the platform for the responsive web design project.

A combination of human nature and digital technology enabled the development of a skills-based game that showcased the power of media queries’ device-specific content and cooperative-competition (if such a thing exists).

From the very beginning, the development hinged on the fact that most, if not all, of the users would not own every device needed to complete the puzzle from start to finish. The observation of how a game requiring the use of multiple devices was played by a group of participants was an experiment not only in technology, but also of psychology.

It was difficult to predict how participants would behave prior to the game.

In an article from the Quarterly Journal of Economics in 1999 discusses the balance between cooperation and competition in not just an economic sense.

“Some pieces of evidence suggest that many people are driven by fairness considerations, other pieces indicate that virtually all people behave as if completely selfish, and still other types of evidence suggest that cooperation motives are crucial.” (Fehr, E. & Schmidt, K. The Quarterly Journal of Economics (1999) 114 (3): 818.)

This statement rang true was in our project, as some participants chose to compete, others to cheat, some to cooperate and many chose to be fair and share. The amount of competition was especially interesting to note, given the fact that the only prize winnings were chocolate eggs.

Since the point was to complete the game in the shortest time possible, participants hurriedly solved the first puzzle. This is when it got interesting. The first puzzle completed by most people was on an iPhone or iPad; two devices that many brought with them.

This meant that sharing was not required. There was a competitive, urgent rush onward – until it was made clear that the use of some uncommon devices was also needed. Some groups were unaware that a communal effort was required while still maintaining the rivalry of individuals. This provided a point of contention for some players. If devices were shared – others would have the ability to catch up. If they weren’t shared – others would be stuck, but there would be the very distinct possibility that no one would be able to complete the entire game.

In addition, devices were snatched and teams ran off to complete a particular puzzle away from the rest of the participants (as to prevent overhearing the correct answer). This tactic was quickly derailed when it was discovered that some devices did not clear the answers after the ‘submit’ button was pressed; thus leaving a hint (or sometimes more) for the next group to use the device. Frustration was a common denominator for many.

An aspect of the sharing/competition quandary found in this experimental project that was not anticipated was the prevalence of cheating (or ‘alternative completion methods’ – for lack of a better term). Some players late in the evening found that the Opera browser’s device emulator allowed for a one-device solution for most of the puzzles. Through desktop-based emulation of many of the devices used for the game, the need for sharing was removed altogether. This was not only a quick way to solve the puzzles, but a sly one – and not something that was thought to be a problem during the development stage of the project. The Opera emulator’s functionality on our site has since been removed.

Another important point of contention for many players has to do with score security. Solutions to puzzles are entered through ‘team name’ and ‘solution’ input boxes. The ‘team name/number’, if entered exactly the same way on every puzzle, shows up on the results page as a single entry with each puzzle completed, an indication of the correct or incorrect answer and the time elapsed. It was quickly determined that any team on any device could re-enter a name/number with an incorrect answer to remove a previous team’s correct answer. This form of sabotage was quietly executed throughout the game and resulted in some upset teams. Also, if a team did not pay attention to exactly how their name/number were entered in the input field, a duplicate entry was created on the results page and a new timer was started.

Overall, the human interaction with our project showed that a fine line between competition and cooperation exists. People tended to not share unless absolutely necessary and many will go to great lengths to win, even if that includes bending the rules. I, for one, did not think that a small group’s studio project would allow for such a psychological observation or elicit such a competitive response from participants.

Requirements

From the main DMSP project brief:

Short online article 20%, 1000 words max.

“Taking your lead from interesting online magazines such this one in artcritical, 2011,
write a short, punchy article on a theme relating to your project. We definitely DO
NOT want personal diaries about how well or badly the project went, but a discus-
sion of an interesting theme that you might have had to engage with directly or that
interests you now that the practical work has been completed.

“For example, if your project was about projection mapping, you could write about
the issues relating to how projection mapping has been co-opted by the advertising
industry and how might have limited the artistic potential of these approaches. You
SHOULD NOT write about how you fell out with everyone because your projector
broke on the night of the presentation.

“The article should be no more than 1000 words long but can include images and
references to the documentation and resources you published in submission 2.”

Due: Friday 26th April