Created by: Haris Ahmad, Anish Pokhrel, Haider Tawfik
Sketch, design, implement and document via a portfolio an animated touch-based and sensor-based interface for a mobile phone that is an alternative to ‘slide to unlock’.
You will develop two different techniques, with
Touch-Based: One based on gesture or multi-touch input and,
Sensor-Based: The other based on any sensor input (e.g. for one-hand use) Examples of sensors: accelerometer, gyroscope, light, camera, etc.
Use animation to provide feedback that the system is recognizing the action you are taking, and how the system then unlocks the device after the action is completed. Show how both techniques avoid accidental activation.
Our design process for the sensor-based input began with 10 concept sketches from each of the three group members (30 in total). We selected the 10 best concept sketches to display, which are all shown below.
Alongside each of the 10 concept sketches, there is a description of:
what the project or each sketch is,
how the designer came up with, and
why did the the group end up choosing it or not.
This idea comes from user’s being able to unlock their phone by shaking their phone. There would be two main ways to implement this, either to shake your phone a specific amount of times or to shake it for a specific amount of time. We decided to continue forward with this idea since it will be hard for user’s to accidentally unlock their screen’s doing this but a potential downside to this idea if it were to be implemented in an actual phone would be the security, since this can be unlocked by a random person as well.
In this implementation the user would essentially be in a 360 degree environment and the concept is that they have to pan around a certain amount to catch the apples. For example: Assume we start at 0 degrees (or 360 degrees), and the first apple will drop to our right in 3 seconds, we must pan the phone around 90 degrees. Suppose the second apple drops to the left of our original starting point, we must then pan our phone around 270 degrees from the starting point. We decided not to move forward with this implementation because it would be difficult to incorporate a 360 degree environment and it would be a lot of work for the user to do each time they want to unlock their phone.
This implementation involves the user singing a song to the phone. This could work in two ways, either have the user sing the song back and it only unlocks if the voice of the user matches the voice used to save the song (they originally sing the password to the phone essentially), or have the user just complete the lyrics to a song and it will work for any user as long as the lyrics recited are correct. We decided not to move forward with this idea because it seemed very basic both concept and UI wise.
This idea comes from wanting to use the gyroscope function to unlock a user's phone. The user will be shown a red ball in the middle of the screen and 8 holes, one in each corner and one on each side. This user will need to roll the red ball into one of the 8 holes, if the ball is rolled into the correct hole three times in a row the user’s phone will be unlocked. We decided to not continue with this idea as it lacked originality and having to roll it into the correct hole three times will end up being tedious for the user.
This idea comes from wanting to use tilt functionality to unlock a user’s phone. The user will be given blocks in specific shapes and colors and will need to use the blocks to create a specific pattern in order to unlock the phone. The blocks resemble pieces from tetris and will fall from the top of the screen and the user will need to tilt their phone either right to left to place the object in a specific place, once the object reaches the bottom the next will begin to fall. If the user successfully puts all the pieces in the correct location the phone will unlock. We opted not to proceed with this idea as it can be difficult to place the object in the exact location in order to complete the pattern.
This idea comes from wanting to use the camera to read some sort of input from the user. In this sketch the user has to use a hand gesture in front of the camera in order to unlock the phone. The phone will detect if the hand gesture is the correct one that was set up by the user and will unlock if the correct one is detected. Hand gestures can be things such as a thumbs up, a fist, pinky finger up while the rest of the fingers are down, etc. We decided to not continue with this idea as it is awkward to position the camera in a way so that it can see your hand at the correct angle.
The idea for this comes from wanting to be able to quickly unlock a user's phone using the gyroscope. In this sketch the user will start by holding their phone in a vertical position, then rotate the phone left for x amount of degrees, after the user will rotate their phone right for y amount of degrees, if they correctly rotated it the set amount of x and y degrees the phone will unlock. We decided not to continue with this idea as the margin for error is too great, as it would be difficult for the user to figure out how many degrees they are turning their phone.
The idea behind this design is to use voice input on a mobile device. The user would be shown a shape and asked to yell at the device until the shape would get larger and fill the dotted outline. Once the shape has become large enough to fill the dotted outline, the phone would unlock. We decided not to move forward with this design because we believe it would be too awkward and uncomfortable to be yelling at a device every time you wish to unlock it. In addition, to prevent accidental activation this design would have to make sure the user yells at a certain decibel range for a certain amount of time. This would make the device even more intolerable to use.
The idea behind this design is to draw a shape/figure with the mobile device to unlock it. The user is given a shape in which they must “draw” by moving the device in the pattern of the shape. The user is given visual feedback on the shape that they are drawing by showing the trajectory of the motion on their screen. Once they have done this successfully, the mobile device is unlocked. To prevent accidental activation, the user would have to move the device at a certain speed, distance, angle, etc. We decided not to go with this design as we believed successfully determining if the shape has been drawn would prove to be too difficult for the scope of this project.
The idea behind this design is to use temperature to unlock a mobile device. The device prompts the user to heat the screen to a certain temperature, which is done by applying friction. The user can do this by placing their hands over the screen, rubbing the screen with their clothing, etc. A temperature indicator is shown to indicate how close the user is to reaching a certain temperature. To prevent accidental activation by heating the device, the user has to reach another temperature target. After reaching the temperature target, the device must be immediately cooled down to a certain temperature. Once this has been done, the mobile device will be unlocked. Although this was a very creative and unique idea, we decided not proceed with it as current phones do not have an accessible temperature sensor, meaning this design was impossible to implement.
Out of the 10 design concepts, we decided to move forward with Concept #1: Shake the Bottle (Haris) shown below.
Once the final design concept for sensor-based technique (Concept #1: Shake the Bottle) was chosen, the team proceeded to sketch detailed variations.
Below of this page is a total of 10 sketch variations, each with a description of:
what the project or each sketch is,
how the designer came up with, and
how did the the group end up choosing it or not.
This sketch variation asks the user to shake the mobile device until a certain amount of apples fall off the tree. It utilizes the motion sensor by unlocking the phone once a certain number of apples have been shaken off. The reason why this sketch asks the user must get a certain number of apples off the tree is to prevent accidentally unlocking the device. Having the user shake the phone multiple times for a certain period of time guarantees this security. We decided not to go forward with this variation as it was not unique enough to be implemented; the other variation sketches seemed to have more innovative and unique designs.
This sketch variation adds some more functionality to the Shake the Bottle (Haris) concept sketch. The task is to unlock the mobile device by pouring all of the soda inside the Coca Cola bottle. Before doing that, the user must take the lid off the bottle by twisting and dragging it away with their fingers. This adds an extra layer of security by preventing accidental activation. Then, the user must pour the Cola by tilting the device until all of the soda is drained (this could take around 5 seconds). Once this has been done, the phone is unlocked. We decided not to implement this variation as the risk of accidental activation is high (even with dragging the lid off) as users could easily take the lid off by mistake without even looking at their devices. Once the lid is off, accidentally tilting the device and unlocking the phone is a high possibility.
This sketch variation experiments with different visual queues as to how long it will take to unlock the phone using the “shake” concept. The user is shown a big tree branch and they must vigorously shake the mobile device until the bug falls off the branch. The expression on the bug’s face will indicate how much more force or duration the user must shake their phone: as the bug gets increasingly sad, this means that the user is correctly shaking the phone. Once the bug is thrown off the branch, the phone is unlocked. We decided not to go forwards with this variation as it was not any different from the other sketch variations that utilized mobile shaking. Since the implementation should be as user-friendly and unique as possible, this variation would prove to be very frustrating to use as no one wants to aggressively shake their phone to unlock it.
This idea of this sketch variation is to track and show the quantity of shaking-movement the mobile device has experienced. The user has to shake the mobile device a certain amount of times (displayed on screen). During this, the user progress is displayed. Once the user has successfully shaken the phone for a number of times, the mobile device is unlocked. We decided to go forward with this variation for the implementation as it is important to show the user a progress of whatever task they are prompted to do. Most users wish to know how long and how much work they must do until their mobile device is unlocked.
The idea behind this detailed sketch is to provide the user some sort of feedback as to how much they have shaken the phone. In the sketch there will be a bar on the right, this bar will indicate how much amount of “fizz” is present in the soda. If the phone is not shaken for a certain amount of time the amount of fizz will decrease. Once the fizz reaches a certain level the user will perform some sort of action to open the bottle, if the amount of fizz is correct the phone will unlock, otherwise it will fail. We decided not to proceed with this idea as we no longer would be using a coke bottle for our implementation.
The idea for this variation sketch comes from the user’s phone become the bottle in which the carbonated beverage is contained in, when the user moves their phone the liquid will flow in accordance to how the phone will move, if the user begins to shake their phone this will be demonstrated with bubbles starting to appear in the liquid, and a foam will begin to form at the top. We did not continue forward with this idea as we decided to no longer use soda for our implementation.
The idea for this variation sketch comes from wanting to use something other than a carbonated beverage. In this sketch the user is shown a ship. The user will then shake their phone to build up power for the ship to launch. If the phone is shaken enough times the ship will successfully take off, if the user does not shake the phone enough, or over shakes their phone, the ship will tip over. We decided to not proceed with this idea as it did not make much sense to shake a ship to power it up.
The idea for this variation sketch comes from wanting to use something other than a carbonated beverage as well. The goal is for the user to shake their phone until a certain threshold point is reached, at which the bomb will explode and the phone will be unlocked. We decided to use this for our final implementation since the bomb exploding if shooken enough seemed fitting.
The idea for this variation sketch comes from wanting to still use the shaking mechanism to implement a phone unlock. However, this idea would also work (and would probably be more fitting) if done using sound to break the cup. For example, if the user holds a certain note the cup will crack and will continue cracking for a certain amount of time until the cup breaks and the phone is unlocked. The concept was dropped because it seemed better implemented using sound as input rather than shaking.
The idea for this variation sketch is to take out the house fire by shaking your screen sort of like a hand-fan. However, just like the wine glass, this idea would be better implemented by having the user blow on their screen, simulating blowing out a fire, rather than shaking their phone and so for that reason we decided to also not move forward with this design idea.
For the final sensor-based design, we decided implement the following variations:
Variation #4 (Anish)
Variation #8 (Haris)
The final design consisted of a bear (called The Bear) character that the child would have to take care of. They would do this by feeding The Bear different foods, managing his sleep, and/or encouring him to participate in physical activitity. To indicate the wellness/health of The Bear, a wellness bar is always on display. Depending on if the user makes a healthy or unhealthy choice, the wellness bar will increase or decrease.
The following are my contributions to the sensor-based design project:
Concept Sketches
Concept #8: Scream
Concept #9: Draw Shape
Concept #10: Hot and Cold
Variation Sketches
Variation #1
Variation #2
Variation # 3
Variation # 4
Used HTML, CSS, and JavaScript to implement logic for animations and page transitions for the device movement (group members: Haider, Haris, and Anish contributed equally as much to the implementation)
This video showcases the final design.
The final implementation is a sensor-based design called “Shake the Bomb'' which allows you to unlock your mobile device by shaking your phone a number of times.
🐻 View the application (view in mobile for best experience): Shake the Bomb
💻 See the source code: Glitch
Our design process for the touch-based input began with 10 concept sketches from each of the three group members (30 in total). We selected the 10 best concept sketches to display, which are all shown below.
Alongside each of the 10 concept sketches, there is a description of:
what the project or each sketch is,
how the designer came up with, and
how did the the group end up choosing it or not.
The concept of this was to turn the clock hands to match a specific hand location that was set by the user. The hands on the clock would be turned by dragging each hand one at a time, letting go once positioned, and then clicking enter. We decided to abandon this concept as it was very basic.
This implementation involves blocks being placed on both the left and right hand side of the screen, and if the blocks are placed in the correct order, the user can press enter and the phone will unlock. There were two ways we were thinking of implementing this, either have a block fall every second and the user selects whether to place it on the left or the right, or for faster input, just have the user tap left or right and the blocks will appear. We also decided to color-code/number the blocks so that you can tell when blocks swap between the left and right side of the screen. Overall we decided not to move forward with this implementation for the same reason, that being that we felt it lacked creative input from the user.
This implementation involves dragging a circle to resemble a specific object that is pre-designed by the user. If the user’s stretched out circle matches the shape at any point the phone will automatically unlock, reducing the need for an “enter” button. Decided not to move forward with this idea as the specifics for dragging the object would be unclear (how close to the predefined shape does it have to be), and the idea was also relatively simple.
The idea for this sketch comes from wanting a quick and easy way for the user to access their phone using their hands. In the sketch the user is placing their finger in a specific position and holding it there for a set amount of time, once the time has been reached the user’s phone will be unlocked. The user can set how many fingers are to be used, where each finger should be placed, and for how long in order to unlock the phone. In the sketch the user has decided to have it set to two fingers in the bottom right corner in order to unlock the phone. We decided to not proceed with this design because it is very simple and not creative.
The idea behind this sketch comes from using a combination to unlock the phone. In the sketch the user is given a variety of food items in order to make a burger, these include a top bun, bottom bun, lettuce, cheese, patty and ketchup. Once the user clicks on an item at the top it will be added to the burger starting from the bottom. Inorder to unlock the phone the user will have to use the food items to make a specific burger. If the burger created satisfies the combination the phone will unlock. We decided not to proceed with this idea due to it lacking creativity as it can be seen as just a number lock, but instead of numbers there are components of a burger.
This idea comes from wanting to implement some sort of game in order to unlock a phone. In the sketch the user plays as a fisherman and has to catch a specific combination of fish in order to unlock the phone. In order to do when the fish required in the combination swims close to the user, in the sketch we can see how the user would catch a redfish, they can tap the screen to cast the reel, and if the fish bites, they tap the screen again to catch the fish. Once the user collects all fishes for their combination, the phone will unlock. We decided not to proceed with this idea as it would be tedious to have to wait for the fish to come swim to you to catch it, and having to wait for the specific fish to come would also be tedious.
This idea comes from using a swiped based implementation to unlock the users phone. In the sketch there is a stickman that will perform specific actions depending on the type of swipe. For example if the user were to swipe up, the stick man would perform a jumping action, if the user were to swipe left, the stick man would perform a backflip. In order to unlock the phone the user would have to make the stick man perform the correct sequence of actions such as jump, backflip then jump. We decided not to proceed with this idea as it is very simplistic and not unique.
The idea behind this design is to allow the user to unlock the phone using a rhythm. The user would be prompted with a song and the task is to use a finger to tap the screen with the rhythm of the song. If the user is progressing with the correct rhythm, the screen would turn green and indicate via text that they are being successful. If they are off rhythm, the screen would turn red and indicate via text that they are being unsuccessful. Once the user has successfully tapped on the rhythm of the song for 10 seconds, the phone is unlocked. The 10 second interval exists to avoid accidental activation. Although this was a clever idea, we decided to not go forward with this design as we thought users might not know many songs that the device provides; it would be difficult to choose which songs would be best to provide for all users.
The idea behind this design is to have the user touch parts of their mobile device screen in a particular order to unlock it. First, multiple balls are displayed. Among those balls, a few of them are numbered. The user must tap the numbered balls in order from the lowest to smallest number. Upon successful completion, the phone is unlocked. If the user taps a ball that is not numbered, or taps a ball in the wrong order, they are prompted to begin all over again with a new arrangement of balls. We decided to go with this concept sketch as it proved to be the most interesting and unique idea that accounts for accidental activation.
The idea behind this design to prompt the user to complete a simple puzzle in order to unlock their mobile device. The user is shown coloured rectangles and told that a certain stacking order of the rectangles will unlock their mobile device (they will do this by dragging the shapes). If the user incorrectly stacks the order of the rectangles, they are notified with a message and allowed to try again. Upon successful completion, the device is unlocked. This design prevents accidental activation as the user must drag and drop to stack the shapes in a particular order; it is highly unlikely that this can happen by accident. However, we decided not to include this idea for the final implementation as the above Tap the Pattern design proved to be more fun, unique, and secure.
Once the final design concept for touch-based technique (Concept #9: Tap the Pattern) was chosen, the team proceeded to sketch detailed variations.
Below of this page is a total of 10 sketch variations, each with a description of:
what the project or each sketch is,
how the designer came up with, and
why did the the group end up choosing it or not.
The idea for this sketch comes from having multiple objects on the screen instead of just one. In this variation sketch the user is shown multiple balls moving around the screen. In order for the user to unlock their phone they must catch all the individual balls by tapping on it. Once a ball is caught it will disappear from the screen. We decided to not move forward with this idea as it made the screen appear confusing and overpacked.
The idea behind this sketch comes from thinking of different objects that it would make sense to catch. Here the user is shown 5 mice on the screen, the user then has to catch by tapping on the mice in order to unlock the phone. We decided not to move forward with this idea, as it felt unethical to continuously catch mice to unlock your phone.
The idea behind this sketch comes from thinking of different objects that it would make sense to catch. Here the user is shown 5 mice on the screen, the user then has to catch by tapping on the mice in order to unlock the phone. We decided not to move forward with this idea, as it felt unethical to continuously catch mice to unlock your phone.
This sketch variation adds constant movement to the ball. The user begins the process by tapping the screen. Then, the ball rapidly moves around the screen in random directions. The task of the user is to catch the ball by tapping it once. When this is done, the mobile device is unlocked. We decided to go forward with implementing this variation in the final design.
This sketch variation asks the user to locate a red ball hidden on their screen in order to unlock the mobile device. Searching for the ball is done by scratching the area on the screen with a finger. Once the ball is found, the phone is unlocked. We decided not to move forward with this design variation as finding the ball is too simple (all you must do is scratch the entire screen) which defeats the goal of this design as it is to try to actively “find” the ball. Also, it is easy to accidentally unlock the device having it in your pocket can accidentally scratch the screen and locate the ball.
The idea behind this touch variation design is to allow users to use physics to unlock a mobile device. The goal is to throw a ball into a bucket by dragging it so that the trajectory of the ball reaches the bucket. The issue with this design is its limited interaction. Other than barriers and various distances between the ball and the bucket, there was limited functionality to this idea. Also, unlocking a mobile device may be too easy, which means it can risk accidental unlocking. We also wanted to design something that would provide a more original experience and not just a simple game that is popular.
This implementation involves the user pressing any buttons lit up in blue before the timer countdowns. If done within this time, the user succeeds in unlocking their phone and if not the phone will remain locked. A design choice that we decided to keep from this implementation is the countdown feature, so that the user has to be cognizant of what they are doing, but we got rid of the rest of the design since it is already similar to the unlock passcode layout that a lot of phones currently already implement.
There will be an array of objects (could be more than just moon’s and star’s as shown in the example) and the user will have to tap on the object that is prompted for at the top. Once complete, the phone will unlock and if at any point an incorrect object is tapped you will get an unlock error attempt. A design implementation feature that we decided to take from this sketch is the use of the counter at the bottom right to show the current progress and we got rid of the rest since it wasn’t as interactive for the user.
The objective of this touch based design is to whack the mole a certain amount of times as it slides across both ends of your screen. If done successfully the mole will appear to be dazed and your phone will be unlocked. Similar to the example above, we kept the implementation of the counter to help the user track their progress but discarded the overall idea since a mole moving side to side is not as interactive as our final design choice which moves all around the screen randomly.
The objective of this sketch is to have the user turn on all of the lights in a house. The concept is very straightforward and we decided to abandon this idea since it can get very repetitive and involves no significant attention from the user’s end. Perhaps this could have worked better if we implemented a timer feature but even then the idea is quite boring and basic so we decided not to move forward with it.
For the final touch-based design, we decided implement the following variations:
Variation #2: Catch the Mouse (Haider)
Variation #4: Chase the Ball (Anish)
Variation #7: Time-Based Presser (Haris)
The following are my contributions to the touch-based design project:
Concept Sketches
Concept #8: Tap to the Rhythm
Concept #9: Tap the Pattern
Concept #10: Stack the Blocks
Variation Sketches
Variation #4: Chase the Ball
Variation #5: Find the Ball
Variation #6: Toss the Ball
Used HTML, CSS, and JavaScript to implement ball movement, on-click functions, and page transitions (group members: Haider, Haris, and Anish contributed equally as much to the implementation)
This video showcases the final design.
The final implementation is a touch based design called “Catch the Ball'' which allows you to unlock your mobile device. If you manage to tap this moving ball 5 times under a time limit, it will unlock your phone.
🐻 View the application (view in mobile for best experience): Catch the Ball
💻 See the source code: Glitch