A user of our medical survey application needs to review, understand, and accept (actively agree to) each of the individual consent criterion needed to use the web app. Consent criterion may be things such as "We will email you" or "we will save your health data in a secure server." The intent is achieve two goals:
- Inform a user (using text and a pictographic representation) of what they are agreeing to with each criterion.
- Accept the criteria a state change (functionally, a checkbox).
Permissions have been divided into categories (such as "Methods of Contact" or "Medical Data Collected"). Each category will get its own view, with all the criteria for this category displayed at once. The user will review and agree to each of the individual criterion within a category provided the following components:
- Category Description: A text description of the criteria set. EX: "Contact Methods", "Medical Data", "Sharing Data" (Text, 0-50 characters).
- Category Summary: An expanded description of the criteria set's description. EX: "Occasionally, we'll send you information about clinical trials in your area. Additionally we may contact you via a telephone call or via email." (Text, 0-280 characters).
- Action Summary: A description of the action needed to confirm your understanding EX: "Click on the icon of the email, and the icon of the ringing telephone to confirm you understand you will be contacted via phone and email" (Text, 0-280 characters).
- Action Button (Inactive State): A visual representation of the "not accepted" state of a criterion. Ex: ringing telephone, A sealed email envelope (button with image, text description of image)
- Action Button (Active State): A visual representation of the "accepted" state of a criterion. Should be brighter than the inactive state Ex: An answered telephone (with speech bubble saying "hello"), a opened email envelope (button with image, text description of image).
- Navigation State: Confirm and back buttons (buttons, confirm disabled until all consent criteria in section are accepted).
- A progress indicator: Indicates the current step over number of total steps. EX: step 1/10 (number, number)
- Navbar: 68px of space at the top of the mockup. Blocked off, labeled "navigation".
Using the provided wireframe and table of components, design a screen that allows a user to preform the following tasks:
- User will confirm that they want to be contacted via email (user checks
Action Button 1). - User will confirm that they want to be contacted via telephone (user checks
Action Button 2). - User will advance to next page.
Additionally, screenshots of the application have been included. These are merely suggestions for a visual style, you are welcome to use them as constraints or create something completely different. You may design your own icons/images or find stock content that fits your need. Please use approximately two hours to complete this task. You should provide a PDF with screens 1440px wide (variable height; near a standard desktop aspect ratio) — For extra credit, consider what type of enhancement you could provide to this screen to better reach the two goals indicated above.
| Component | Content | Notes |
|---|---|---|
| Category Description | "Contact Methods" | |
| Category Summary | "Occasionally, we'll send you information about clinical trials in your area. Additionally we may contact you via a telephone call or via email." | |
| Action Summary | "Click on the icon of the email, and the icon of the ringing telephone to confirm you understand you will be contacted via phone and email" | These are suggestions, feel free to interpret the active and inactive states however you like. |
| Action Button (1) | Contact via email (active and inactive states) | Designer is to create/source icons for the inactive and active states. |
| Action Button (2) | Contact via telephone (active and inactive states) | Designer is to create/source icons for the inactive and active states. |
| Navigation State | "Continue", "Back" | Continue is disabled until all instances of Action Button are in an active state |
| Progress Bar | "step 7 of 10" |
This can be a visual progress indicator, or text. |