Week 5 - Interactive Prototype 1 Development

For the Prototype 1, I aim to implement the function of controlling the frog by pressing direction keys on keyboard. There will be four yellow blocks moving randomly on the screen to impede the frog go forward. At this stage, there is only one frog you can play with it and once you touch one of the blocks, the frog will be replaced at its starting point. The red ball hasn't been implemented at this stage yet but players could still easily understand this game and interact with it using keyboard. Because this is the game for two players so the left frog will be controlled by W S A D as up down left and right. Here are the screenshots of the interface and ActionScript I have developed so far.

For the next step, I will keep testing and adjust the speed of the frog and the blocks to make sure the game is easy to control but also achieving the challenge.

Video Prototype - Development and Feedback

Development

The tool that I used to make this video prototype is Adobe Photoshop and Illustrator. At the beginning, I made several interfaces by illustrator that showed a scenario of the game. Here are some interfaces.

Next, I put them into Photoshop and played them one by one to tell the scenario with my explanation. However, the video was very boring because each picture was motionless without any animations on it. Therefore, I decided to take some videos to make the prototype more interesting. I made some paper cuttings and played them by hands to give the audience a more dramatic explanation. Here is a screenshot of one of the videos.

Then, I imported all the videos into Photoshop as long as some other pictures I have made in illustrator. I am not very good at using Photoshop to edit a video so I just add some text animations into the video as well as the fade between each video to make it look smooth. Finally, I recorded my voice-over by Audacity and imported them into the video. Here is a screenshot of my Photoshop while editing my video prototype.

Feedback

During the practical session, the video was tested by some of my classmates. I asked some questions about my video. 

Does the video interest you and catch your attention?

How do you think of the concept of this game?

How do you understand the concept of this game through watching this video?

Do you have any suggestions for this game that could be improved?

Most audience thought the video is easy to understand and had a clear concept of this game. However, some of the testers thought it was a little bit boring because the beginning of the video has no animations and takes too long to play. Most of them love the idea of Hungry Frogs and would like to play it. For the improvement of this prototype, they thought I could add more animations as long as a background music to make this video more interesting. For the game, they thought it would be more interesting if the red food would go around for players to grab.

Reflection

Through making this video prototype, I have learnt much about how to make a good prototype and demonstrate with the existing technology. The progress of making a good video prototype contains some steps such as writing script, making a scenario, sketching and taking videos. According to the feedback from the audience, I think my video still got lots of things to improve. If I have a chance to make the video again, I would add more features into my video such as background music, text animations and a more attractive voice over. I should also improve my skill of Photoshop to make the screen more aesthetic. 

Week 4 - Class Exercise

1. Redesign a functional element of a car dashboard

There are many components that are relevant to driving behaviour such as GPS system, buttons on the steering wheel and also voice user interfaces. Here is an example that descirbes one of the interactions. I would design a car that has a function of recognizing a driver's voice commands. If the driver wants to turn down the music, he could just say 'turn down the music'and the music would be automatically turned down. In this situation, the driver does not need to turn down the volume by hands while he is driving. This could also be implemented into the GPS system so that the driver does not need to type the address.

To test this interaction, I would make a few different commands such as calling someone by saying 'call Lucy Chen' to test its recognition.

2. Design and describe a horizontal, a vertical and a diagonal prototype for the alarm clock application

Horizontal Prototype

The user goes to the first interface that shows the overall information of each alarm. Then the user presses edit button and chooses Alarm 1 and it goes to the second interface. The second interface shows the detail of the Alarm 1. The user could change the time and set different tones for each alarm. The third interface is provided for the user to choose the alarm that wants to be daisy chained.The last interface is for the user to snooze by shaking the phone or slide to dismiss.

Vertical Prototype

Only testing the last interface of shaking to snooze and the function of sliding to dismiss the alarm.

Diagonal Prototype

A user wants to add an alarm that has a different tone with other alarms. He firstly goes to the first interface and presses the add button and then sets the time and presses the sound button to change the sound he wants.

Week 3 - Video Prototype Ideas

In the first contact session this week, I came up with an idea by combining the game Hungry Hungry Hippos with the game Frogger. There will be only one character in this game who is a hippo. He needs to go through each movable block without touching it and get the food as much as he can to get high score.Once the hippo touches the block, he will go back to his starting point and lose one life. Each food will be between the movabale blocks so that to make the game become more challenging. The sketch below roughly describes this game. 

However, in the second contact session, the tutor said I did not put the key thing of Hungry Hungry hippos into the game. The purpose and the fun of playing Hungry Hippos is to fight with each other to get the food. Therefore, I changed my initial idea of making only one character. I added one player into the game and changed the character to frogs. There will be two frogs in this game and fight for the food. There is only one food in the middle of the screen. The two frogs have to go through the movable blocks in front of them and catch the food. Once one of the frogs catches the food, the other frog can chase him and grabs the food by touching him. If the frog touches the blocks, he will go back to his starting point as well as the food. The frog who arrives his starting point with the food will win. Here is the sketch for this game.

 

Week 2 - Mixed Reality

Mixed reality or augmented reality is to combine the real world with the virtual world to produce a new environment and visualisations to be interacted with. There are many home devices that can be designed to be a mixed reality prototype.

Mirror is one of the home devices that we could interact with. In this image, the mirror shows the date, the weather, the time and the user could even use it to surf the internet as well as watching her face.To control the mirror, users just easily touching the screen and do whatever they want.

Week 1 - What do you think a prototype is?

What form does it take?

A prototype is an early sample or model that gives people a concept and a learning experience of the final product. It could be in the form of a physical deisgn or an electronical design.
  

What do you need to make one?

An idea that could be built, designed and tested to deliver the concept of the final product such as a paper model or some mock-up screenshots.

What is it used for?

It is used for making your idea become visible or realizable and thus helping to test and finalise the final product by analysing its features. 

What is it’s purpose?

The purpose is almost the same as the answer above that is to test and analyse the concept of your product.

When would you create one? 

When you want to realize your idea and it would be your first step to start your project.

Example 

 

The image above is a paper prototype of a mobile application. It shows the sign up interface of the app and once the tester presses the button as shown in the image, it will go to the next corresponding paper interface.