CPSC 581
Human-Computer Interaction II
University of Calgary - Fall 2015
Project One
Smart Phone Interaction Workarounds
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’.
Many patent lawsuits between Apple and other smart phone producers include various
disputes over particular interaction techniques. One well-publicized example is based on
Apple's slide to unlock patents. The technique described in the patent purports to prevent
accidental activation, where an inadvertent touch by a user may unintentionally activate some
function on the phone. The basic strategy is that the phone is kept in a locked state, where the
user has to perform a particular type of input to unlock it and access the phone functionality.
While there are various versions of this patent and its claims (e.g., the '721 in the US and '022
in Europe), they usually describe how a user makes contact with a graphical 'unlock image' on
a hand-held touch-sensitive display, and then moves the unlock image from a pre-defined
location either along a pre-defined displayed path or to a predefined unlock region. The first
figure illustrates how one patent provides an example of this, while the second figure shows
how the Apple iPhone actually realizes slide to unlock.
CPSC 581 - Project 1
1
You will design, implement, document and demonstrate an interface that provides an
alternative way to unlock a mobile phone equipped with a multi-touch display and with multiple
sensors. In particular, you will
1. Develop two different techniques, with
•
One based on gestural and/or multi-touch input, and
•
The other based on sensor input (e.g., for one-handed use).
2. 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.
3. Show how both techniques avoid accidental activation.
It is up to you to be as creative as possible.
To prepare for this assignment, you will learn techniques on: how to brainstorm and refine
ideas via sketching, how to program phones in WPF (e.g., how to access sensor and touch
input, and how to create rudimentary animations), and how to create a portfolio entry
displaying your results.
Pedagogical Objectives
•
Apply principles of sketching and lateral thinking to produce a variety of designs for a
prescribed function with some given constraints.
•
Acquire first-time experiences developing for and thinking about application design for
hand-held phone devices.
Assignment Deliverables
1. 10 competing design sketches, 10 sketch details, and sketch refinements. In your
sketchbook, generate at least 10 competing (different) designs for each of the two
techniques. As before, show and explain your designs to others. Choose the most
promising one, and then produce 10 details and/or variations of that particular sketch. You
will be asked to present your best ones. As your ideas change, sketch them out. You may
be asked at any time to show your sketches to the instructor, TA, and/or the class.
2. An implemented mobile phone application. Implement an application that demonstrates
how your system works on a smart phone. We recommend that you use the Windows
Phone provided to you for this project, but you may implement and demonstrate your
prototype on your own device if you wish. In the latter case, prototypes on iOS or Android
platforms are also acceptable.
CPSC 581 - Project 1
2
3. Visual project summary. Adding to your web portfolio from the previous project, create a
web-based visual summary that illustrates your system. Provide a title, minimal text
(perhaps as annotations), and visuals that reveal what the project is about. Document the
details your design and implementation in a visually appealing manner. Note that this may
become your template for future summaries. The portfolio must minimally include the
following (or equivalents):
A. A front page with an illustrative image, description and index.
B. An illustrated and annotated sequence describing your project. Avoid lengthy text.
Use visuals as much as possible, e.g., screen snapshots, animation, video, etc. The
viewer should get a good sense of how your project works from this.
C. A download page containing the complete source and executables, and
instructions for running your application prototype(s).
4. Demonstrate your work. During class time, you will be asked to demonstrate all the above
work to other class members and the instructor.
Materials
•
A Nokia touch-sensitive phone running Microsoft Windows (provided).
•
Lab computers with Visual Studio and the Windows Phone SDK/emulator.
•
Access to the above software where you can download it to your own computer.
Lateral Thinking
“Seeking to solve problems by unorthodox or apparently
illogical methods. It is about moving sideways when
working on a problem. It encourages people to apply
different perceptions, different concepts and different
points of entry to problem-solving.”
Your first thoughts will likely be something that is fairly derivative of what you are already
familiar with. To go beyond these, think about:
•
The many ways you open, unlock, unlatch, and generally change the state of
everyday things.
•
The many ways you can command some change of state via movements, gestures
and touch.
Look for inspiration from unusual sources. For example,
CPSC 581 - Project 1
3
•
As you move about your day to day world, consider what you see and the action
you are performing, and ask yourself how it can relate and/or be applied to this
exercise. For example, opening a book 'unlocks' it. Would this be a reasonable
metaphor to use in a way that people can quickly understand it?
•
Google images on gestures. For every one you see, sketch out a possible unlock
method, no matter how unlikely. Don't worry about whether you can implement
them or not, or if it is any good; you can make decisions on that later.
•
Similarly, google images on anything that changes state: open, switch, latch, turn,
etc. Let the images inspire you to think in different ways.
•
List all the phone's sensor capabilities. Think about how you can use each one's
input to unlock the phone, where you consider multiple variations for each one.
Then combine sensor input to think about how the fusion of sensor data (perhaps
combined with touch data) can unlock the phone.
Evaluation
Your grade will be based on your sketches, your design creativity, your implementation,
documentation and packaging, and your portfolio summaries. However, great successes or
failures, or incompleteness in one exercise criteria will likely affect your total grade. Note that a
successful implementation is required: if you cannot demonstrate your system, you will
automatically receive a zero. Similarly, missing, late or incomplete work will result in a large
grade penalty.
Schedule
SEP 29
Introduction to Project 1
OCT 1
Homework: Sketch 10 designs for each of your two unlock techniques.
OCT 2
Tutorial: Windows Phone programming basics.
OCT 6
Design critique: Present sketches of initial ideas for both techniques to class.
Homework: Begin sketching variations, details, and refinements based on feedback.
OCT 8
Design critique: Present sketches of refined ideas for both techniques to class.
Homework: Complete sketching 10 refinements to your best design for each technique.
OCT 9
Tutorial: Windows Phone sensors.
Homework: Prototype your two techniques on a smart phone.
OCT 13
Design critique: Present sketches of your final designs to class for critique.
OCT 15
Homework: Finish prototypes and create visual project summary.
OCT 16
Presentation and demonstration of application prototypes in class.
CPSC 581 - Project 1
4
Disclaimer
This exercise and the preceding description make extremely loose use of particular patents,
their meaning, how patent disputes are fought and resolved, whether patents are valid or not,
and what designs would actually infringe on a patent. It does not reflect an opinion, nor does it
necessarily reflect any reality beyond the fact that these patents exist. It should not be used to
suggest the validity or invalidity of particular patents, nor should should it be used as a
summary or characterization of what these patents are about. The sole purpose of this
description is to create an artificial scenario for a student exercise that promotes design and
programming skills.
Appendix: Claims of US Patent 8046721 B2
Claim 1. A method of unlocking a hand-held electronic device, the device including a touchsensitive display, the method comprising:
•
detecting a contact with the touch-sensitive display at a first predefined location
corresponding to an unlock image;
•
continuously moving the unlock image on the touch-sensitive display in
accordance with movement of the contact while continuous contact with the touch
screen is maintained, wherein the unlock image is a graphical, interactive userinterface object with which a user interacts in order to unlock the device; and
•
unlocking the hand-held electronic device if the moving the unlock image on the
touch-sensitive display results in movement of the unlock image from the first
predefined location to a predefined unlock region on the touch-sensitive display.
Claim 2. The method of claim 1, wherein the moving comprises movement along any desired
path.
Claim 3. The method of claim 1, wherein the moving comprises movement along a predefined
channel from the first predefined location to the predefined unlock region.
Claim 4. The method of claim 1, further comprising displaying visual cues to communicate a
direction of movement of the unlock image required to unlock the device.
Claim 5. The method of claim 4, wherein the visual cues comprise text.
Claim 6. The method of claim 4, wherein said visual cues comprise an arrow indicating a
general direction of movement.
CPSC 581 - Project 1
5