A10: Prototyping two UIs for a music player app and planning a test for choosing between them
Similarly with the previous assignment (A9), also this last one will mostly draw together some of the earlier lectures’ and assignments’ contents while adding a bit of new topics to it. In this case, the content adopted from the earlier lectures are prototyping (Lecture 3) and quantitative research designs (Lectures 5 and 6). The new topic in this assignment is interaction design for a mobile setting (jogging) using a web-based prototyping tool Marvel.
Scenario: Let’s assume that you are developing a new music player tailored for jogging. The music player should be usable while the user is running, where the user keeps a mobile phone in one hand, and taps the screen with the index finger of the other hand. As an early version of the system, you are designing a 3-level music selector that lets the user select an artist, an album, and a song to be played. When starting to design this selector, you have run into a problem: which one of the following designs should you choose?
- a single screen that presents the three levels using accordions (Wikipedia, demo) that open and close when the user clicks them, and close when the users makes a selection, or
- three horizontally swipable screens (demo), one for each level (artist, album, song)
You have decided to find out which design is better by prototyping both designs and testing them empirically. This Assignment therefore consists of two parts:
- Part 1: prototyping two simple alternative UIs
- Part 2: planning a research design for choosing between them empirically.
Your report should consist of these parts, with the contents detailed below.
Part 1: Prototyping
Sketch the two interfaces on a paper so that you know which visual elements and interactions are needed so that user can move between the different UI states by tapping and swiping the screen. Plan also some mockup content: some artists, albums from one these artists, and songs from one of this artist’s albums. That is, in this prototype, only one artist’s album list needs to be shown, and only one album’s songs need to be shown in the prototype.
Create a user account in Marvel, which provides a free web-based prototyping tool that can be used both from a web application (good for designing) and from a mobile phone (good for testing the design). In this assignment, use at least the web version. Installing of the the mobile version from Google Play or Apple App is recommended but not required.
In Marvel, create a project that has the following structure:
- Start screen where the researcher/designer can choose which UI design will be shown to the user/participant in the test. A choice between these alternatives will present either one of the following UIs:
- Accordion UI with its screen(s)
- Swipe UI with its screen(s)
Transform your paper-based sketch into a prototype in Marvel. To save time, focus on designing the basic blocks and their interactions, not on making beautiful visuals for the UIs. Test that your prototype can be “played”.
Tip: Finding where the interactions and transitions between screens are defined can be difficult at first in Marvel. They can be defined by going to the project’s main screen, choosing a screen that needs interactions, and clicking “Prototype”. Watch e.g., this YouTube video, from 6:20 onwards, to see how: https://bit.ly/2OJ9cWN
In the report:
- Present screenshots of your Marvel app’s screens (e.g., a screenshot from your project’s main screen). These screenshots do not need to to be large, but they need to be legible when zoomed in.
- Also (important!), provide a public URL to your project. You can get it by pressing the orange “Share” icon in the top-right corner of Marvel’s web version.
Part 2: Planning a research design
Develop a research design for an empirical study that would help you find out which UI is better for use during jogging. In the minimum, this study should use a quantitative method, but it can also include a qualitative part too if you find it important.
In the report, answer the following questions:
- Which one of the three research designs introduced in L6 (i.e., ANOVA/t-test, linear regression or contingency table analysis) will be used as the statistical test? Explain your choice.
- Will the test apply a within-subjects (i.e., “repeated measures” from the same participant) or between-subjects (i.e., comparison of measures from different participants) research design, or both?
- What will be the independent variable(s) and dependent variable(s) in the study?
In addition to the slides in Lecture 6, there are many books and websites offering information on different statistical tests and how to choose between them. See e.g., this page by University of Sheffield: https://www.sheffield.ac.uk/mash/what_test