Interactive Design
Task 1 - ideas & research
Gamification
The use of game elements and game design techniques in a non-game environment. Gamification is about learning from games not just in a sense of learning about the games themselves but understanding what makes the gamesuccesful. It can identify behaviors that increase engagement, by means of stating or posting, target factors that motivate people's behavior, and reward those behaviors with leaderboards. It is an emerging business practice as it supports businesses to sell more and increase customer loyalty. Increases awareness making you do and understand things more. Encourage competition by showing others score. Achievement of challenges can be hard to unlock advanced levels.
Gamification can be used in: education, health, environment, government, marketing, news, work and social.
Benefits
The use of game elements and game design techniques in a non-game environment. Gamification is about learning from games not just in a sense of learning about the games themselves but understanding what makes the gamesuccesful. It can identify behaviors that increase engagement, by means of stating or posting, target factors that motivate people's behavior, and reward those behaviors with leaderboards. It is an emerging business practice as it supports businesses to sell more and increase customer loyalty. Increases awareness making you do and understand things more. Encourage competition by showing others score. Achievement of challenges can be hard to unlock advanced levels.
Gamification can be used in: education, health, environment, government, marketing, news, work and social.
Benefits
- Encourages participation
- Rewards lead to motivation
- It's fun
- Boosts productivity
- Challenging
Existing Projects
Nike+ Developed a device that fits into the sole of your shoe and it tracks every single step that you take when you are running and so therefore the device knows how fast you're going, this communicates wireless with a smartphone or a PC which you can see all the data. The Nike+ application have some function like: telling you how fast you run, compare yourself to previous times, the longest run you have etc. You can also establish goals and challenges, if you are achieving those goals you will get a trophy or a medal. You can also compete against friends. This helps you to go running more often. |
M&M's Eye-Spy Pretzel Campaign
M&M's eye-spy game engaged participant's with an online social game. Framed within the M&M's Pretzel campaign, this simple cost-effective game consisted of a simple full-page graphic design of M&M's and 1 small pretzel which users had to find. This simple, cheap game brought huge gains to M&M, with a boost on their Facebook page, shares and comments. |
Recyclebank
"Rewards users for doing everyday things that are good for the environment, such as learning how to cut back on water consumption or purchasing greener products. Users earn points by working their way through a tiered series of questions and answers. They can also exchange their points with rewards." http://blogs.clicksoftware.com/clickpedia.top-25-best-examples-of-gamification-in-business/ |
Phonegap
I was looking through the internet to find something that while coding I can actually see the preview on my mobile phone so that I can see and check that the code I type works. Using html, css and javascript on any platform you prefer. This can even be used in class for our final presentation to present the mobile application to the class and to our teachers. http://phonegap.com/ |
Group - Debbie Frendo
Elaine Calleja
Daphne Sammut
Jonathan Bernard Pace
Elaine Calleja
Daphne Sammut
Jonathan Bernard Pace
Tipper – Our Application
The idea evolved from Daphne and as a group we continued to discuss and add thinks in our application, stopping to think about relationships in today’s world. This problem is continuously growing, as people prefer using mobile applications than real-life conversations.
The idea was to keep the user smiling, giving him/her tips daily to constantly remind him of his/her lover. The app will suggest you go out on dates, adding a little bit of humor to attract the user’s attention. If the deed is done, you will need to take a photo of the event, so that the app will suggest you with another tip. This is a form of clarification so that the app knows you actually went on the date. The couple is connected via their profiles, and each person is notified with the events that are being held. The app works with a sort of news feed, keeping track of what is going on (like a small social network for couples). Later on, this could actually be developed so that couples interact with other couples and challenge each other over a social network.
The app will record everything, while including a point system to achieve a sort of leveling method, so that the user has a scope for using this application. The levels will be designed in a humorous way, using titles such as: the cool dude, for achieving something unexpectedly cool, etc. In return of clearing a tip, you will get rewarded not just by points, but your other half will have to do something to favor you. The app’s aim is to challenge, the couple keeping their relationship healthy, fun and motivated. if the guy wins the woman has to do something for him or if the girl wins the guy has to do something for her.
The idea evolved from Daphne and as a group we continued to discuss and add thinks in our application, stopping to think about relationships in today’s world. This problem is continuously growing, as people prefer using mobile applications than real-life conversations.
The idea was to keep the user smiling, giving him/her tips daily to constantly remind him of his/her lover. The app will suggest you go out on dates, adding a little bit of humor to attract the user’s attention. If the deed is done, you will need to take a photo of the event, so that the app will suggest you with another tip. This is a form of clarification so that the app knows you actually went on the date. The couple is connected via their profiles, and each person is notified with the events that are being held. The app works with a sort of news feed, keeping track of what is going on (like a small social network for couples). Later on, this could actually be developed so that couples interact with other couples and challenge each other over a social network.
The app will record everything, while including a point system to achieve a sort of leveling method, so that the user has a scope for using this application. The levels will be designed in a humorous way, using titles such as: the cool dude, for achieving something unexpectedly cool, etc. In return of clearing a tip, you will get rewarded not just by points, but your other half will have to do something to favor you. The app’s aim is to challenge, the couple keeping their relationship healthy, fun and motivated. if the guy wins the woman has to do something for him or if the girl wins the guy has to do something for her.
At school as a group we had an exercise, to find an application that in any way resembles our application. Wrangler-mileage was the one we found that interested us.
Social media, with its reviews and recommendations, has made us less instinctive. Believing that technology could be used to reignite our instinct for adventure, Wrangler, the Western apparel maker, introduced the Wrangler Mileage app, a mobile companion for the open road. Built over nine months by teams from TBWA and Digital Arts Network, the app aggregates all your travels to create a highly personalized, infographic-style dashboard profile of all your moves and experiences. The app even keeps a mileage score and awards badges for special experiences, making it the perfect travel tool to match the competitive American spirit. |
Logo idea which I designed myself.
Gamification presentation
Task 2
For this task we have divided the group into 2 persons for the design of this application which are Jonathan Bernard Pace, Debbie Frendo and 2 persons for coding the whole application which are myself and Daphne Sammut. We have also set up some deadlines for this assignment so that we have everything working on time.
Wednesday 12th November - Finalised design of pages
Wednesday 19th November - Finish the CSS and HTML for all the pages
19th November - 22nd December - Coding the application
Myself and Daphne starting working out on the Login page using HTML and CSS, while coding we were using Phonegap so that we can see how it is looking on our mobile phones. We started laying out the setup while the others were working on the logo and layout design.
Wednesday 12th November - Finalised design of pages
Wednesday 19th November - Finish the CSS and HTML for all the pages
19th November - 22nd December - Coding the application
Myself and Daphne starting working out on the Login page using HTML and CSS, while coding we were using Phonegap so that we can see how it is looking on our mobile phones. We started laying out the setup while the others were working on the logo and layout design.
Application layout - Css + HTML
Today Tuesday 11th November we have discussed the color design for our application as a whole group. Together we have concluded to design 3 color themes for this application, neutral color (orange), women color (purple) and men color (mint/blue), the user would be able to change the theme from the login page. Jonathan took care to design the layout for the 3 themes.
Today Wednesday 12th November we started coding the pages in CSS and HTML. I took care of the register page while using Phonegap for real time tests. The font we chose had to be generated for web browsers, we used fontsquirrel.com to be able to do this. This generate a CSS file with the font we wanted, then we used to CSS code in our CSS sheet.
|
Till now the 'Choose File' button works perfectly it opens everything from where you can choose a photo. The onclick button for the camera to open and take a picture is not working, when pressing on the button 'Capture Photo' nothing happens.
I worked on the layout for the Profile page by coding the HTML and CSS.
On the profile picture I needed to integrate that when the user press the icon profile the gallery of the phones open so that the user can choose a photo to upload. In the website folder I created a folder for the images to be stored in when they have been uploaded.
I have coded this part with Javascript and HTML: <script> function openFileUpload() { document.getElementById('fileSelector').click(); } </script> <div id = "profilepic"> <input id="fileSelector" name="file" accept="image/*" capture="camera" /> <button id="clickButton" onClick="openFileUpload();"> <img src="Images/profilepic.png" width="170" height="170"/></button> </div> #profilepic { display: block; margin: 20px auto 0; width: 200px; height: 200px; } |
The only problem here was that the button was showing and we wanted it to be hidden as the user is going to click on the icon of the profile. In the CSS we added:
#profilepic
{
display: block;
margin: 20px auto 0;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
#profilepic input
{
display: none;
}
#profilepic
{
display: block;
margin: 20px auto 0;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
#profilepic input
{
display: none;
}
Daphne took care the button with the 3 line, this button is used for the user to press and choose a color scheme. The problem was that when you press the button it will stay there. Together we added some CSS code for this part to work properly. When you check a color scheme the window will close back.
For the code to be more clean and understandable I made the connection to the database code in a page called connection.php, then when we need to call the connection we use the require().
Testing some swipe code to see if it works on the mobile phone. I tested it out on my mobile with phonegap and it worked. This can only work on mobile phones. When swiping left or right the background color changes. This is just a test.
Background images that can be used for our app:
I am working on the information page about our application. The instructions of each page are going to be shown, for this to be done we need this part to be code in swipe, for the users to swipe left or right. For this to work I had to code in CSS, HTML and Javascript. At the moment I have something wrong with my code as the images are not changing, When you click on an arrow nothing happens.
Today 6/1/15 I have told the teacher what my problem was in the sipe section, He have told me that all that I have missing is a swiper plugin. I searched the code for this swiper plugin and inserted the code in the swiper.js page.
To see the instructions about Tipper application you have to swipe left or right. |
In the bellow image I have added 3 circles under the instruction as an image, for the user to know how many pages there are to swipe.
Bellow is a short clip showing the swipe working.
I am working on the other two color themes, I am also changing colors of images from Adobe Illustrator so that they can fit with the other two color themes, like challenges, level icons, points, instructions etc..
These are the 3 color themes for our application. I have worked a CSS sheet for each color.
The images bellow are the background image for each theme color, this image is animated with a movement. The effect shown in the image was done by myself by using Abode Photoshop. I have used 3 layers for this effect: layer 1 just the purple color with 100% opacity, layer 2 with the people image at an opacity of 20% and layer 3 again just purple color with 60% opacity.
CSS code was used for the background image to move. The bellow is the code that was added.
A short clip to show the moving background.
Today 14th January 2015 I have organized the CSS files more by creating 4 CSS files:
One for the layout design of the application - in this CSS sheet you will find everything that is styling the application the way it is going to look, you will find many CSS declarations like: position, font-size, margin, font-family, width, height, padding, float, display, overflow, text-align and many more.
Three style sheets for the colors of the buttons, text, images, background and all the other things that needs to give color to something.
One for the layout design of the application - in this CSS sheet you will find everything that is styling the application the way it is going to look, you will find many CSS declarations like: position, font-size, margin, font-family, width, height, padding, float, display, overflow, text-align and many more.
Three style sheets for the colors of the buttons, text, images, background and all the other things that needs to give color to something.
Following Jonathan design I have created more rewards for our application by using Adobe Illustartor.
More rewards:
Free segway tour
Playing a favorite game with friends
Free hair treatment and blow dry
Free segway tour
Playing a favorite game with friends
Free hair treatment and blow dry
Today the 27th of January we started the filming process for our application promo. We started filming the intro for our promo, the place we filmed is the public garden behind the school.
Today the 28th of January myself together with Jonathan we have hosted the application on arvixe.com because the other one was giving us some problem. We have still not managed to host this application without any errors, and for a reason some buttons where not working on Google Chrome but then we tried on the Internet Explore and the buttons have worked.
These are the two links for our application:
www.tipperapp.net
www.tipperweb.com
They both have the same error message, the problem is something within the database.
These are the two links for our application:
www.tipperapp.net
www.tipperweb.com
They both have the same error message, the problem is something within the database.