iPod touch

Report as inappropriate Your report has been received

Shared by: pengxiuhui

Tags

Stats

views:: 7
posted:: 8/17/2011
language:: English
pages:: 16

Public Domain

Document Sample

iPod touch
Quiz Application

INTERACTIVE MULTIPLE CHOICE

Human-Computer Interaction Design I (I541)
Professor Marty Siegel
Team: Jason de Runa, Qian Huang
Table of Contents

1 The Design Problem 1
Problem Statement . . . . . . . . . . . . . . . . . . 1

2 Our Design Approach 1
Research . . . . . . . . . . . . . . . . . . . . . . . . 1
Personas . . . . . . . . . . . . . . . . . . . . . . . . 2
Prototype . . . . . . . . . . . . . . . . . . . . . . . 3
Selecting Answers . . . . . . . . . . . . . . . . . 3
Removing/Unselecting Answers . . . . . . . . . . 5
Answer Explanations . . . . . . . . . . . . . . . 5
Design Evaluation . . . . . . . . . . . . . . . . . . . 5
Target User Group Selection . . . . . . . . . . . . 5
Pre-Test Questionnaire . . . . . . . . . . . . . . 5
Task-Based Scenarios . . . . . . . . . . . . . . . 5
Post-Test Questionnaire . . . . . . . . . . . . . . 7
Usability Results . . . . . . . . . . . . . . . . . . 7

3 Redesign 8

4 Appendices 11
Pre-Test Questionnaire Form . . . . . . . . . . . . 11
Usability Results . . . . . . . . . . . . . . . . . . 12
THE DESIGN PROBLEM | OUR DESIGN APPROACH | 1

1 The Design Problem

Problem Statement the overall answer is correct or not, and an expla-
nation of the answer .
For our Human-Computer Interaction Design I Question and answers can be from a few words to
(I541) course, our design team, composed of Jason a paragraph in length, and may contain pictures,
de Runa and Qian Huang was assigned to design a text, or a combination of both . The target user
electronic-learning system within the constraints group is adults and teens .
of the iPod touch interface and size (Figure 1) .

2 Our Design
Approach

Research
First, we conducted a literature review on telecom-
munication learning platforms in higher education
and mobile-based interactive learning environ-
ments . We specifically looked at how interactive
mobile teaching supports learning performance .
Then we visited local AT&T stores to familarize
Figure 1: The iPod Touch display specifications are as follows:
ourselves with the iPOD Touch muti-touch interac-
3 .5-inch (diagonal) widescreen multi-touch display . 80-by-320-
tions and carefully analyzed the user interface .
pixel resolution at 163 pixels per inch .
Since the iPod Touch launched yesterday, it was
very difficult to find early adopters we personally
Our task was to specifically focus on a feedback knew .
signaling system that indicates which part of the
With this information we constructed our perso-
multple choice item is right wrong unmarked, if
2 | OUR DESIGN APPROACH

nas according along with task-based scenarios . country . She speaks very little Spanish .

Personas Demographics:
Our goal during persona construction was to ♦ Age: 16
successfully accommodate a variety of users for
specific types of individuals with specific needs . ♦ Occupation: High school student, waitress at
Since our target user group is adults and teens, Applebee’s restaurant
two personas were created: a female high school ♦ Location: Tampa, FL
student and a male sales executive .
♦ Hobbies: playing volleyball, listening to music
on her iPod, shopping at the mall, online social
networks
♦ Technology comfort level: Intermediate . Early
adopter of Apple technology

Personal Goals:
♦ Improving her Spanish speaking skills
♦ Learning basic Spanish vocabulary as quickly
Personas: 1) Female high school student - Leslie Fernandez 2) as possible
Male Sales Executive - Thomas Yu .
♦ Communicating efficiently with the Argentin-
ean locals
Persona 1 - Leslie Fernandez
Product Goals:
“I can’t wait to go to a foreign place like
Argentina, but I’m afraid the people in Ar- ♦ Intuitive GUI, doesn’t have to spend more than
gentina won’t speak English well enough 10 seconds figuring out how to operate the
for me to understand.” quiz application
♦ Easy touch screen navigation from one ques-
tion to the next
Biography:
Leslie is finishing up her freshman year at Jeffer- Persona 2 - Thomas Yu
son High School in Tampa, Florida . In two weeks,
she is flying to Argentina with her family for a “I don’t mind learning my sales data
summer vacation . She is very excited to see the through books, but I prefer portability
shopping malls, the culture in Buenos Aires, and since I’m always on the go. It’s a hassle
the historical and natural beauty of Argentina . carrying my heavy and expensive sales
This will be Leslie’s first time in a Spanish-speaking books everywhere.”
OUR DESIGN APPROACH | PROTOTYPE | 3

Biography:
Bruce is a sales executive for Frost & Sullivan, a Prototype
global growth consulting company . Every year Our design mockup before user testing is based
in June, Bruce needs to take a sales certification on the following design assumptions:
exam for business purposes . His career requires
70% travel and he likes to learn his information us- 1. Our target users are familiar with the Apple
ing tutorials and electronic-learning systems . iPod Touch multi-touch user interface
2. Target user group includes adult and teen
learners in the US .
Demographics:
3. Design is built around the 3 .5-inch (diagonal)
♦ Age: 43 widescreen multi-touch display
♦ Occupation: Sales Executive at AT&T 4. User cannot skip a question . Must complete
♦ Location: San Antonio, TX questions in sequential order

♦ Martial Status: Married 5. Based on our personas, the goals in designing
the quiz application for the iPod Touch
♦ Children: 4
When designing our initial design mockup, our
♦ Hobbies: tennis, reading, spending quality time strategy was to take the worst-case scenario and
with the family build our design around that idea . So we created
♦ Technology comfort level: Intermediate . a quiz question that is more than one sentence
Understands operation of basic computer in length and answer choices that began with a
programs – email, sales programs, Internet, visual image and is composed of at least two sen-
Microsoft Office Suite, etc . tences . To build around the worst-case scenario,
it would address some of the corner case issues
but also resolve a majority of the normal cases or
Personal Goals: operating scenarios (our design target is 90-95%
♦ Learning as much information about the sales of Apple iPod Touch user population) .
process
♦ Obtaining his Frost & Sullivan sales certification
♦ To be successful and well informed in his work
Selecting Answers
After several initial mockups, our team decided it
wasn’t a good design for a user to select an answer
Product Goals: choice using the “tap selection method” . The “tap
selection method” is summarized below:
♦ Information presented is readable and not
cluttered ♦ If the answer choice is not highlighted, tap the
desired answer choice once; the answer choice
♦ Good tactile feedback that is intuitive
is selected and highlighted
♦ If the answer choice is highlighted, tap the
answer choice again; the answer choice is
4 | PROTOTYPE

unselected and no longer highlighted (Figure 2) .
Several issues arose in our design using a “tap se-
lection method” . First, if the answer to a question
is several sentences in length, one dilemma we
faced was, “how will they see the full answer (plus
the visual image)?” If the user tapped a question
is several sentences in length, one dilemma we
faced was, “how will they see the full answer (plus
the visual image)?” If the user tapped the answer
choice, the answer choice would be selected . So
we needed to figure out a new design for the user
to see the entire answer length .
When a user first views the answer choices, they’ll
notice that each answer is horizontally oval-
shaped . They know exactly the spatial area to
tap when selecting their answer choice(s) . Thus,
our team agreed to eliminate the “tap selection
method”, and use the “one tap” to enable the user
to see the entire answer (Initial Prototype, slides
5-7) . Figure 2: Fantasy Football drag and drop roster feature

As a result of eliminating the “tap selection meth- To make it more intuitive and reinforce that the
od” from our design, another issue that arose was, drag and drop feature mode is on, an icon was
“how can the user select their answer choice(s) added to indicate that the answer is maneuver-
quickly and without tapping?” able .
One idea we decided to experiment with was
dragging and dropping your answer choice(s) .
We designed it where the user can drag and drop
their answer selections to the black transpar-
ent area at the bottom of the iPod Touch screen
(Figure 3) . This concept is not a new multi-touch
feature on the iPod Touch . The “drag and drop
method” is an interaction currently used when
you want to personalize the buttons you want to
display the most . Tap ‘Edit’ and drag the button
to the location you want . For example, in the iPod
Touch guided tour, if you listen to audio books
and want to get to them faster, drag audio books
over songs to replace songs . In addition, we found
Figure 3: Drag and drop multiple choice answer to answer
this same idea applied on the web when select- selection area
ing your roster on Yahoo’s Fantasy Football game
PROTOTYPE | DESIGN EVALUATION | 5

Removing / Unselecting Answers wrong, we color-coded the letter to give contex-
Removing answer choice(s) also uses the drag and tual meaning . If the letter is highlighted green, the
drop method . For example, if a user feels that they answer selected is correct . If the letter is highlight-
selected the wrong answer by mistake and would ed red, the answer selected is incorrect . We chose
like to unselect it, the user may do so by maneu- these colors because in the American western
vering your selection anywhere outside the black culture, a red mark on a quiz is normally associ-
transparent box, the answer becomes unselected . ated with a bad or wrong connotation, while
(Figure 4) . green means correct . In other cultures, we are
aware that these colors may represent different
meanings . Our color usage was chosen according
to our design target, 90-95% of Apple iPod Touch
user population .

Design Evaluation
Target User Group Selection
We recruited three test participants that matched
our personas for our usability testing . An under-
graduate student and a Technical Sales Engineer .

Pre-Test Questionnaire
A simple pre-test questionnaire form was pro-
duced (See Appendices) . This includes writing the
introduction, the questions and responses, as well
Figure 4: Unselecting an answer: drag it our of answer selec- as designing the overall format (“look and feel”)
tion area of the questionnaire . For this specific assignment,
we were not required to create the statement of
Answer Explanations informed consent form .
Our team utilized transparencies in answer expla-
nations . Why did we use a transparency layer for Task-Based Scenarios
the answer explanation? So users have a visual
Our team developed two context scenarios and
reference within the sequence of questions . If
under each scenario, the test participant had to
you look carefully, the question and the answer
accomplish specific tasks . The goal was to observe
choices can be seen in the background, while
our test particpants usage patterns and uncover
the answer explanation to that question is in the
information that can help our test participants
foreground (Initial Prototype, slide 29) .
reach their goals .
Also to inform the user which answer is right or
6 | DESIGN EVALUATION

select a single answer? If so, why?
Scenario 1 2. Was the drag and drop method intuitive?
You just installed a new e-learning application
3. Any suggestions for making this task easier?
on your iPod . You currently have some spare time
to start a quiz to learn some new material . You
are reading the first quiz question and you scroll
Task 1 .3: Selecting answer choices (multiple)
down to see the answer choices .
Expected actions:
1. Press and hold down the answer choice you
Task 1 .1: View the entire answer text desire .
Expected actions:
2. Drag your desired answer choice down to the
1. Tap the desired answer choice on the touch transparent black box area, at the bottom on
screen the screen .
Follow up questions: 3. Release your finger to place your choice in the
selected answers area (black transparent box
1. Is it clear and intuitive where to tap to view
at the bottom on the screen) .
the entire answer choices?
4. Wait for you choice to appear in the selected
2. Did you have trouble finding your way back
answers area .
to your answer choices from the entire answer
description screen? 5. Repeats step 1-4, until you selected all your
desired choices .
Task 1 .2: Selecting an answer choice (single) Follow up questions:
Expected actions:
1. Did you have trouble figuring out how to
1. Press and hold down the answer choice you select multiple answers? If so, why?
desire
2. Any suggestions for making this task easier?
2. Drag your desired answer choice down to the
transparent black box area, at the bottom on
the screen .
3. Release your finger to place your choice in the Scenario 2
selected answers area (black transparent box You selected your answer choice(s), but after
at the bottom on the screen) . thinking about the question more, you realize one
of the answers you selected was incorrect . You
4. Wait for you choice to appear in the selected
decide to change your answer and remove your
answers area .
incorrect choice before submitting your answer(s) .

Follow up questions: Task 2 .1: Removing/unselecting your answer
choice(s)
1. Did you have trouble figuring out how to
DESIGN EVALUATION | 7

Expected actions: 4. After exiting the answer explanation screen,
did you expect to see the next question?
1. Press and hold down the answer choice in the
selected answers area (black transparent box 5. Any suggestions for making this task easier?
at the bottom on the screen) .
2. Drag your desired answer choice anywhere
outside the selected answers area .
Post-Test Questionnaire
3. Release your finger anywhere outside the
Post Test Question 1
selected answers area .
How do you feel about the overall design of the
4. Wait for you choice to disappear in the se- quiz?
lected answers area .
1. I thought it was ok . I’m concerned how the
5. To unselect multiple answers, repeat step 1-4 . selection of answer choices is designed . Since
this is an important part of the overall quiz,
it should be easier to use . I don’t want to be
Follow up questions:
second-guessing what my next action will
1. Did you have trouble figuring out how to be . I should already know by looking at the
unselect your answer(s)? If so, why? design and my knowledge on iPhone’s current
behavior .
2. Any suggestions for making this task easier?
2. I’m used to selecting things by tapping it
rather than dragging and drop . Its a lot more
Task 2 .2: Submitting your answer choice(s) work and thinking done by the user .
Expected actions:
1. Verify your answers are correct .
2. Press the submit icon (green circle with white
right arrow) located at the bottom right of the Usability Results
touch screen .
Test Participant 1:
3. Wait to see if your answer is correct/incorrect
and an explanation . ♦ Gender: Male
♦ Not an iPhone owner, but was educated by the
iPod Touch guided tour on the Apple website .
Follow up questions:
♦ Technical Sales Engineer at Intel
1. Is it intuitive to view the rest of the answer
explanation by scrolling up? ♦ Knowledge level of the Apple iPod Touch
multi-touch features is comfortable
2. Is it clear why the selected answers in the
black transparent box are certain colors? ♦ Familiar with electronic learning software

3. Is it clear how to dismiss the answer explana-
tion screen?
8 | DESIGN EVALUATION | REDESIGN

Test Participant 2: wrong .
♦ Gender: Female The modifications implemented into our final
prototype are explained in detail .
♦ Not an iPhone owner, but was educated by the
iPod Touch guided tour on the Apple website .
♦ Undergraduate student Modification 1
Eliminated the drag and drop feature . Replaced
♦ Knowledge level of the Apple iPod Touch
answer selection/unselection using the tap
multi-touch features is slightly uncomfortable .
method .
♦ Familiar with electronic learning software
After user testing we discovered a large design
flaw in our initial design mockup . It came to our
attention that the drag and drop feature was not
The detailed usability results can be found under intuitive . It took one test user approximately one
Usability Results in the Appendices . minute (with our assistance) to accomplish task
1 .2 . When a user scrolls to the answer choices,
and all the answer choices occupy the entire
screen, to make a selection he tapped the answer

3
choice . We found on several occasions, our users

Redesign were tapping the screen 3 to 5 times, only to find
they were seeing the wrong function (view entire
answer) occurring .
To reflect on our personas goals, we reevaluated
our design and redesigned it using the tap selec-
There were several modifications made to our tion method . (Redesigned Prototype, slide 12-13)
initial design after user testing . In summary we:
Again, the “tap selection method” is summarized
♦ Eliminated the drag and drop feature and below:
replaced answer selection/unselection using
♦ If the answer choice is not highlighted, tap the
the tap method .
desired answer choice once; the answer choice
♦ Spaced out the answers choices so users can is selected and highlighted .
scroll in between choices .
♦ If the answer choice is highlighted, tap the
♦ Made the submit button more apparent . answer choice again; the answer choice is
unselected and no longer highlighted .
♦ Made it more apparent where to tap, when
viewing the entire answer .
Modification 2
♦ Redesigned the entire answer choice view .
Space out the answers choices so users can scroll
♦ Added a “Next” UI element in between choices .
♦ Added an “X” transparency layer on top of The second issue found in our initial design
incorrect answers to reinforce the answer is mockup was the amount of spacing between each
REDESIGN | 9

answer choice . As a result of no spacing, users forth from the answer choices to the entire answer
did not know where to position their finger when choice text (Initial Prototype, slides 5-8) . To reduce
scrolling up/down the touch screen . the number of taps, to eliminate the issue of going
back and forth between screens, and to have the
To resolve this user interface issue, we placed a
entire answer choice text to appear on the same
quarter of a centimeter of spacing between each
screen as the answer choices, we redesigned this
answer choice . This provides the user some affor-
process (Redesigned Prototype, slides 5-10) . The
dance for screen scrolling .
design objective was to fulfill not only our user
testers suggestions, but also to fulfill the product
goals of our personas .
Modification 3
Make the submit button more apparent .
Making the graphical element more discernible Modification 6
for the submit function was a suggestion brought When dismissing the answer explanation screen,
up in user testing . Testers misinterpreted the make it clear to the user you are moving to the
graphical element as an icon that forwards them next question .
to the next question . The function of the icon did
User testing in our initial design mockup revealed
not appear until it was actually tapped .
that users appeared to have problems dismissing
Our team decided to replace the icon with a “Sub- the answer explanation screen . Their first re-
mit” graphical element to reduce any ambiguities . sponse was to find a specific icon or button to tap,
This fulfilled our persona (Leslie) goals to have an rather tapping the touch screen anywhere .
intuitive GUI .
As a solution, our team chose to add a “Next”
graphical element at the bottom right of the
touch screen (Redesigned Prototype, slide 23) .
Modification 4
Its purpose is to dismiss the answer explanation
Make it more apparent where to tap, when view-
screen and take the user forward one question in
ing the entire answer .
the sequence of questions .
During user testing, users were tapping in the cor-
rect area to view the entire choice selection . Our
team decided to add more attention to that area Modification 7
by updating the icon (similar to the icon Apple Added an “X” transparency layer on top of incor-
uses for its Contact section) . In general, we made rect answers to reinforce the answer is wrong .
that graphical element consistent with Apples UI
The reason why we added an “X” transparency
(Initial Prototype, slides 5) .
layer on top of an incorrect answer selection
(Figure 5) was to build our design for users who
are color-blind or posses color vision deficien-
cies . According toshington, DC: Optical Society of
Modification 5 America, color blindness is a problem for 8% to
Redesigned the entire answer choice view . 12% of males of European origin and about half
a percent of females . This is about 7 .2% of the
Our test users found it annoying going back and
10 | REDESIGN

90-95% of our target users .

Figure 5: Redesigned answer explanation screen

There are two major types of color blindness:
those who have difficulty distinguishing between
blue and yellow, and those who have difficulty
distinguishing between red and green . For these
people, the red and green letters appear exactly
the same color rendering them useless . Our team
was concerned with the later . We agreed that to
distinguish between red (incorrect) and green
(correct) answers, to add a white transparent “X”
layer above the incorrect answer . Although users
with color vision deficiencies will not recognize
the colors, they will recognize textures and
shapes .
APPENDICES | 11

4 Appendices

Pre-Test Questionnaire Form
Our team from the Human-Computer Interaction Design graduate program at Indiana University invite you to
participate in a research study involving multi-touch technology using the Apple iPod touch for educational
learning . The test will take a maximum of thirty minutes . If you are selected to participate in our study, you will
be contacted by the members of our team and informed of test dates, test location, and additional instructions .

Thanks,
Jason de Runa (jderuna@indiana .edu) and Qian Huang (qiahuang@indiana .edu)

Please fill out the questions below if you choose to participate:
1. Full Name:
2. Contact Information (phone number):
3. Age:
4. Profession:
5. Indicate your technology comfort level?
1) Not at all comfortable
2) Slightly uncomfortable
3) Comfortable
4) Very comfortable
5) Extermely comfortable
6. Have you ever used an Apple iPhone or an iPod Touch?
a) Yes b) No
7. Are you familiar with electronic learning software?
a) Yes b) No
8. Are you familiar with multi-touch interfaces?
a) Yes b) No
12 | APPENDICES

Usability Results
ANSWER KEY: 1. Test Participant 1 response 2. Test Participant 2 Response

Task 1.1 Questions
Is it clear and intuitive where to tap to view the entire answer choices?
1. Yes, I just tapped on the right arrow .
2. Yes

Did you have trouble finding your way back to your answer choices from the entire answer description screen?
1. No, it was clear to press the back arrow .
2. No, but its annoying for me to keep going back and forth every time I need to see the entire answer choices
from the answer choice extended view .

Task 1.2 Questions
Did you have trouble figuring out how to select a single answer? If so, why?
1. Yes . I was tapping on the answer several times, but the entire answer would keep showing . At first I thought
I had to tap twice or three times to make my choice . I was really confused .
2. Yes, I kept tapping the answer more than once . When I found out that tapping the answer displayed the full
answer choice description I was lost .

Was the drag and drop method intuitive?
1. Not at all . The drag and drop technique confused me . The same motion used for dragging and dropping is
the same motion used for scrolling up and down the screen . If all your answer choices are on one screen,
how would you scroll back up the page to see the question again, without selecting or moving one of the
answer choices?
2. No

Any suggestions for making this task easier?
1. Don’t use dragging and dropping to select an answer . It would be easier to understand if you just press or
tap the answer to select it . Also don’t change the current functionality of the iPhone features (since the
iPod Touch is similar) . People are used of features behaving a certain way . Ie . scrolling, tapping to select .
APPENDICES | 13

What I did like was that my answer choices appeared at the bottom of the touch screen . It makes it much
easier if I’m reviewing the question again . I don’t have to scroll all the way down to see my answer selec-
tions .
2. My first instinct is to tap the touch screen to select an answer . Its not obvious to have a drag and drop fea-
ture . My suggestion is to add “drag answers here” at the bottom of the touch screen .

Task 1.3 Questions
Did you have trouble figuring out how to select multiple answers? If so, why?
1. Initially yes, but after I realized and learned how to use the drag and drop feature it was easy . I still do not
like the drag and drop feature, its not clear when you see all your answer choices .
2. No

Any suggestions for making this task easier?
1. Again, don’t use dragging and dropping to select an answer . It would be easier to understand if you just
press or tap the answer to select it . Its faster to tap for me, then to drag and drop .
2. To add “drag answers here” text at the bottom of the touch screen .

Task 2.1 Questions
Did you have trouble figuring out how to unselect your answer(s)? If so, why?
1. No
2. No

Any suggestions for making this task easier?
1. None
2. No

Task 2.2 Questions
Is it intuitive to view the rest of the answer explanation by scrolling up?
1. Yes
2. Yes

Is it clear why the selected answers in the black transparent box are certain colors?
14 | APPENDICES

1. Yes . A red letter means wrong, green means correct . One thing I would like to add is if people are color-
blind, how will they able to distinguish the colors?
2. Yes

Is it clear how to dismiss the answer explanation screen?
1. No, I was looking for a button to push .
2. No, I tried to move my pointer finger from left to right to get to the next question .

After exiting the answer explanation screen, did you expect to see the next question?
1. Yes
2. Yes

After exiting the answer explanation screen, did you expect to see the next question?
1. To add a next button .
2. To add some sort of icon to go onto the next screen .