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 .
Pages to are hidden for
"iPod touch"Please download to view full document