Skip to content

User Interface Mockups

Daniel Chu edited this page Apr 9, 2021 · 22 revisions

Hamburger Menu Open


Menu that appears when the triple horizontal line button is pressed on the nav bar. Users can access the 3 experiment list pages and their own user profile from this menu. This serves as a "main page" that can be accessed from any of the experiment list pages or the profile page.

My Experiments


Lists all the current users experiments. An experiment can be easily published/unpublished by clicking on the eye icon. If the eye is a dark grey and not crossed, the experiment is published. If the eye is a light grey and is crossed, the experiment is unpublished. New experiments can be created by pressing the "+" button in the bottom right corner. The experiment can be viewed by clicking on the experiment. Since the owner of those experiments shown by the definition of this page has to be the current user, we do not display them in this view.

Subscriptions


Lists all the current user's subscribed experiments. Shows the description, owner, and the status of the experiment (colour-coded).

Published Experiments


Lists all published experiments from all users. Shows the description, owner, and status of the experiment (colour-coded).

Add Experiment


Dialog appears when a new experiment is created Description, the minimum number of trials, trial type, region, location logging and whether new trials are being accepted can all be specified here. Changes take effect after the ok button is pressed. No changes occur if the cancel button is pressed.

Edit Experiment


An existing experiment is modified. Description, the minimum number of trials, region and whether new trials are being accepted can all be specified here. Changes take effect after the ok button is pressed. No changes occur if the cancel button is pressed.

Search Experiments


Interface that is used to search through experiments. A search query is performed when the user presses the enter/send button on their keyboard. There is an X that when pressed, deletes the search text that has been typed. If nothing is typed, then no search will occur when the user pressed the enter/send button on their keyboard.

Discussion


Discussion page for a particular experiment. Contains questions and answers from users. The + button will add a new question. To answer a question, the user presses the reply button on the specific question.

Add Question/Answer

Dialog that appears when a question or answer is created.

View Experiment (Experimenter)


Page for viewing an experiment as an experimenter. Discussion, Experiment QR code generation, trial locations map view and subscribing are all done from this page. The heart button colour shows if you're subscribed. If subscribed, the colour will be a dark grey like the rest, else, the colour will be a light grey different from the other icon colours. Statistical summaries are also shown on this page. A new trial can be started by the experimenter by pressing on the "+" icon in the bottom right corner.

View Experiment: Location Warning


Warning dialog that appears when an experimenter makes a new trial on an experiment that has location logging enabled. Important for privacy concerns.

View Experiment (Owner)


Page for viewing an experiment as an Owner. This page is a scrollView. Functionality is the same as the Experimenter version except the subscribe button is replaced by a button for editing the experiment (which opens up a dialog) and trials submitted by experimenters are shown in a list at the bottom of the page where the owner can accept/reject submissions with the checkbox.

View Locations

Page with a map containing pins where all the trial locations, if location logging is enabled.

Record Count-Based Trial

\ Page for creating a new count-based trial. When the confirm button is pressed, the trial will be submitted.

Record Binomial Trial

Page for creating a new binomial trial. When the confirm button is pressed, the trial will be submitted.

Record Measurement Trial

Page for creating a new Measurement Trial. When the confirm button is pressed, the trial will be submitted.

Record Non-neg Int Count Trial

Page for creating a new non-negative integer count trial. When the confirm button is pressed, the trial will be submitted.

Make QR Code


Dialog that displays a QR code for sharing an experiment. QR code format is listed here.

Scan QR/Barcode Code


Opens the native camera app of the user's phone to take a photo of the QR/Barcode. Barcodes can either be associated with a specific trial value or scanned to create a new trial based on the associated trial value. QR codes bring you to the scanned experiment and create a trial based on the scanned content.

User Profile


Displays a users profile. Contains their username, email and phone number. The person who owns the profile can edit their own contact information by pressing the edit button.

Edit Contact Info


Dialog that appears when a person edits their own profile contact info.