{"id":1448,"date":"2021-05-31T16:57:51","date_gmt":"2021-05-31T14:57:51","guid":{"rendered":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/?p=1448"},"modified":"2021-05-31T17:00:26","modified_gmt":"2021-05-31T15:00:26","slug":"a6-p8-paper-prototyping-and-usability-testing","status":"publish","type":"post","link":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/05\/31\/a6-p8-paper-prototyping-and-usability-testing\/","title":{"rendered":"[A#6, P8] Paper prototyping and usability testing"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Part I. Assignments<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">(1) Continue to develop (or start a new) paper prototype based on new insights or feedback from your peers.<\/h3>\n\n\n\n<p>We skip this subtask since we considered the feed back from peers was planned to gathered during last lab session on 25. May which didn&#8217;t happen (question asked and got confirmed in Mattermost).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(2) Conduct (at least) 3 formative usability tests. <\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1.Develop a script for your usability test.<\/h4>\n\n\n\n<p><strong>(1) Hinweise f\u00fcr den User<\/strong><\/p>\n\n\n\n<p><em>Wir testen die Webapplikation, nicht dich! Fragen bitte gerne stellen, ich kann aber nicht versprechen, alle Fragen direkt zu beantworten! Bitte laut denken (<\/em><strong><em>Think aloud<\/em><\/strong><em>). (\u00fcbernommen von Lab 07)<\/em><\/p>\n\n\n\n<p><strong>(2) Kontext der Anwendung erkl\u00e4ren<\/strong><\/p>\n\n\n\n<p>Wir wollen eine Webapp entwickeln f\u00fcr online Spieleabende mit Freunden. Sie soll die remote Brettspielabende unkomplizierter und \u00fcbersichtlicher machen. Neben der Kommunikationsformen, wie Audio-, Videochat, soll unsere Webapplikation eine Filterfunktion f\u00fcr Brettspiele haben, sowie die eigentlichen Brettspiele eingebettet haben. Wir haben einen ersten Prototypen gebaut und w\u00fcrden in diesem Test gerne die Verst\u00e4ndlichkeit und \u00dcbersichtlichkeit testen.&nbsp;<\/p>\n\n\n\n<p><strong>(3) Fragebogen<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Wie hei\u00dft du?<\/li><li>Wie alt bist du?<\/li><li>Was machst du beruflich?<\/li><li>Spielst du gerne Gesellschaftsspiele in deiner Freizeit?<\/li><li>Hast du schon einmal einen remote Spieleabend gemacht?<\/li><li>Hast du schon einmal einen usability test (als Testperson) gemacht?<\/li><\/ul>\n\n\n\n<p><strong>(4) Szenario(s)&nbsp;<\/strong><\/p>\n\n\n\n<p>erste Szenario: per Link einladen<\/p>\n\n\n\n<p>Du hast einen langen Tag der Arbeit beendet und w\u00fcrdest gerne mit deiner Freund_Innen ein Spielabend machen. Nach der Absprechung habt ihr entschieden, gemeinsam online ein Spielabend auf Social Play zu organisieren. Du w\u00fcrdest gerne erstens ein Account auf Social Play einlegen und deine Freund_Innen per link einladen. Du hast \u00fcber Social Play einen Link per email an deindem\/r Freund_In geschickt. Nachdem deindem\/r Freund_In sich eingeloggt ist, habt ihr eingefangen in einem Treffen zusammen Spiel auszuw\u00e4hlen.&nbsp;<\/p>\n\n\n\n<p>zweites Szenario: Spiel aussuchen und filtern<\/p>\n\n\n\n<p>Du triffst dich mit deiner Freund_Innen zusammen im online meeting Raum von Social Play. Ihr habt gestartet ein Spiel auszusuchen. Jenach euer gew\u00fcnschte Filterkriterien (z.B. Spielzeitl\u00e4nge, Spielart, geeignete Personenanzahl usw., die sollte Testperson selbst gegeben werden, um zu gucken, ob wir einige Kriterien vergessen haben) sollte eine Liste von Spiele ausgegeben werden. Dann du und deine Freund_Innen gucken solche Spiele durch und sucht ihr ein Spiel aus. Anschlie\u00dfend spielt ihr das Spiel zusammen.<\/p>\n\n\n\n<p><strong>(5) Aufgaben<\/strong><\/p>\n\n\n\n<p><strong>Mache dich mit der Anwendung vertraut<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><em>Beschreibe was du siehst und deinen ersten Eindruck.<\/em><\/li><li><em>Was w\u00e4ren deine ersten Schritte, um in eine Gruppe mit deinen Freund_innen zu gelangen ?<\/em><\/li><\/ol>\n\n\n\n<p><em>Finde die Gruppe No board games, no gain.<\/em><\/p>\n\n\n\n<p><strong>Lerne die Gruppenm\u00f6glichkeiten kennen<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Wie w\u00fcrdest du einer Gruppe per Link beitreten?<\/li><li>Wie w\u00fcrdest du eine Gruppe erstellen?<\/li><\/ol>\n\n\n\n<p>Erstelle ein Gruppe, bei welcher du deine Freund_innen hinzuf\u00fcgst.<\/p>\n\n\n\n<p><strong>Lerne die Filterfunktion kennen<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Wie w\u00fcrdest du ein Spiel finden?<\/li><li>Wie w\u00fcrdest du das passende Spiel f\u00fcr euch ausw\u00e4hlen?<\/li><\/ol>\n\n\n\n<p>Finde ein passendes Spiel f\u00fcr deine Gruppe und w\u00e4hle es aus.<\/p>\n\n\n\n<p><strong>Lerne die Spielfunktion kennen<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Was w\u00fcrdest du machen, um mit deiner Gruppe zu spielen?<\/li><li>Wie w\u00fcrdest du ein Spiel starten?<\/li><\/ol>\n\n\n\n<p>Spiele ein Spiel durch mit deiner Gruppe<\/p>\n\n\n\n<p><strong>(6) Abschlie\u00dfende Fragen<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><em>Welche Vor- und Nachteile siehst du bei der Benutzung der WebApp?<\/em><\/li><li><em>Was fehlt dir an der Social Gaming App?<\/em><\/li><li><em>Hast du Schwierigkeiten (Wo hast du Schwierigkeiten) bei Nutzung des Apps? (z.B. eine bestimmte icon oder Funktion zu finden, verwirrende icon design oder Layout design usw.)<\/em><\/li><\/ol>\n\n\n\n<p><strong>(7) Abschluss<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Hast du weitere Fragen oder Anmerkungen?<\/em><\/li><li><em>Vielen Dank f\u00fcr deine Teilnahme! Du hast uns sehr geholfen.<\/em><\/li><li><em>(\u00fcbernommen von LU 7)<\/em><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">2.Document who is taking what role<\/h4>\n\n\n\n<p>In the first and second usability tests Ina will be the Facilitator and in the third Brendan. Xin will be the Observer in all usability tests.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3.Decide if you want to record your test session and how you take notes during the test sessions.<\/h4>\n\n\n\n<p>We don\u2019t want to record the test sessions as our users expressed uncomfort with the idea of being recorded. We will take notes on paper during the usability test, as we find it the easiest way to create \u201ccreative\u201d and adaptable notes. We will later summarise these notes in a more structured way in a Google Doc.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4.Document who you are inviting for a test session and how long the session lasted.<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"132\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/TestPersonen.png\" alt=\"\" class=\"wp-image-1449\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/TestPersonen.png 911w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/TestPersonen-300x43.png 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/TestPersonen-768x111.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>Table created in word document. We hide test perons&#8216; name for privacy reason.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">(3) Document and evaluate the results of your testing.<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Results Evaluation<\/h4>\n\n\n\n<p>We first wrote down notes on paper block and then tranformed them into structured notes in word documents (each document for one single test person). The document is structured as the usability test workflow. We take Affinity Diagram to evaluate our results of usability testing since we consider it as the best way to fulfill our &#8222;gather and then organize&#8220; evaluation steps.<\/p>\n\n\n\n<p>Since we most concentrate on the improvement suggestions and critics from our test persons, we organize only the &#8222;negative&#8220; feedback from our test persons and didn&#8217;t write down &#8222;positive feedback&#8220; in our affinity diagram (of course positive feedbacks are noted in our structured documents).<\/p>\n\n\n\n<p>The affinity diagram is generated using online tool <a href=\"https:\/\/flinga.fi\/\">Flinga<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_1-1024x444.png\" alt=\"\" class=\"wp-image-1450\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_1-1024x444.png 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_1-300x130.png 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_1-768x333.png 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_1-1200x520.png 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_1.png 1312w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>It is the first version of our affinity diagram which consists of all unorganized ideas from our test persons. <\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_2-1024x462.png\" alt=\"\" class=\"wp-image-1451\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_2-1024x462.png 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_2-300x135.png 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_2-768x346.png 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_2-1200x541.png 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_2.png 1474w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>We then organized them into two sub categories: general suggestion (left) which doesn&#8217;t correspond to a single function\/page and feature\/design suggestions (right) which correlate to a single function or page design.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_3-1024x402.png\" alt=\"\" class=\"wp-image-1452\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_3-1024x402.png 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_3-300x118.png 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_3-768x301.png 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_3-1536x603.png 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_3-1200x471.png 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/05\/AD_3.png 1712w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>As the last step, we again subcategorized the Feature\/Design suggestions(right) into four subgroups: social functions (left), interaction features (middle up), design defects (middle down), and gaming functions(right). Social functions are functions are regarding accout and group creations, where as gaming functions are regarding all functions correlated to games (including filter, in-play scree etc.).<br>Design defects is a subcategory which should not happen but we still have it based on our carelessness in first design. <\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Learning and Takeaways<\/h4>\n\n\n\n<p>We learned that all test persons liked our design idea behind our application. And they think our first design is not overwhelmed with non-necessary information, wo that the it is easy to follow the test process. However, some confusions can also be found in testing. Part of the confusions are based on the <a href=\"https:\/\/marvelapp.com\/\">Marvelapp<\/a> and partly is based on our design defects. There are also some functions we didn&#8217;t think of but proved to be important by testings. We think there are really lots of improvements to be done in further design iterations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Part II <strong>Reflexion<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">(1) Team member contribution.<\/h3>\n\n\n\n<p>We first meet together in Discord and discussed the organisatorial stuff of how to organize the usability tests. Then we worked together on our script for further steps (Ina for contextual introduction and questionaire, Brendan for following-up questions, Xin for scenarios. However the separation is not 100% clear since we review and improved each other&#8217;s parts though).<\/p>\n\n\n\n<p>The three usability tests are taken part separately over the weekends (responsible persons can be found in the table for task (2)). Notes are generated after the test and uploaded into our shared google folder.<\/p>\n\n\n\n<p>We created the Affinity Diagram after gathering all three notes and evaluate the results. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(2) Learnings from assignment.<\/h3>\n\n\n\n<p>We learned how to formly conducted a usability test. It was an interesting experience because somehow the test person can get confused by some designs which we didn&#8217;t notice it at all. We are pleased to get constructive feedbacks from our test persons. We will take their feedback into serious considerations and think about how to improve our design. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(3) possitive\/successful experience<\/h3>\n\n\n\n<p>We successfully found 3 different test persons to help us with the usability testings, which we really appreciate their kindness and helpfulness. All our test persons are so cooperative which make our test processes much more smoothly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(4) <strong>What would you like to improve?<\/strong><\/h3>\n\n\n\n<p>It seems that the assignment workload is not so evenly distributed throughout weeks, for example three usability tests over a weekend is somehow a little bit more. It is also not so easy to find and contact test persons, and then finish usability testings so shortly within a week (for example, some people may be really suitable for usability testing but due to their tough schedule they need to be contacted at least one week before for appointments). That would be so nice if we can see some assignments in advance and maybe prepare it in advance.<\/p>\n\n\n\n<p>Another improvement lies in our previous assignments.  In our assignment #2 we didn&#8217;t chose &#8222;Analyze existing software&#8220; for data gathering. Based on our usability testing results, we found it essential to do that since some of our design defects can be easily resolved by viewing similar apps or apps offer similar functions. If we view similar app designs, we at least won&#8217;t forget registration function on the main page. <\/p>\n\n\n\n<p>Additionally, we didn&#8217;t undertake probe testing on ourselves before formal usability testing. If we did so, some problems can also be detected earlier. <\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Part I. Assignments (1) Continue to develop (or start a new) paper prototype based on new insights or feedback from your peers. We skip this subtask since we considered the feed back from peers was planned to gathered during last lab session on 25. May which didn&#8217;t happen (question asked and got confirmed in Mattermost). &hellip; <a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/05\/31\/a6-p8-paper-prototyping-and-usability-testing\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e[A#6, P8] Paper prototyping and usability testing\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6151,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[384608,395639,401100],"tags":[],"class_list":["post-1448","post","type-post","status-publish","format-standard","hentry","category-projekt-8","category-week-6","category-assignment-6"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/users\/6151"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1448"}],"version-history":[{"count":2,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1448\/revisions"}],"predecessor-version":[{"id":1454,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1448\/revisions\/1454"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/categories?post=1448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/tags?post=1448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}