feat(#658): add app screen overview

hpi-dhc · Sep 8, 2023 · 6331562 · 6331562
1 parent 2a34216
commit 6331562
Show file tree

Hide file tree

Showing 32 changed files with 44 additions and 1 deletion.
diff --git a/app/README.md b/app/README.md
@@ -17,10 +17,13 @@ application offers to export a detailed description.
 PGx report | Gene details | Drug search | Drug details |
 :-: | :-: | :-: | :-: |
 (a) | (b) | (c) | (d) |
-![report_screen](../docs/screenshots/report.png) | ![gene_screen](../docs/screenshots/gene.png) | ![search_screen](../docs/screenshots/search.png) | ![drug_screen](../docs/screenshots/drug.png) |
+![report_screen](../docs/screenshots/gene-report.png) | ![gene_screen](../docs/screenshots/gene.png) | ![search_screen](../docs/screenshots/drug-search.png) | ![drug_screen](../docs/screenshots/clopidogrel.png) |
 
 _Please note that these screenshots might not represent the latest app version._
 
+_For more app screens, please refer to the_
+_[documentation](../docs/App-screens.md)_
+
 ## Getting Started
 
 See our [Contribution Guide](CONTRIBUTING.md) to get started.
diff --git a/docs/App-screens.md b/docs/App-screens.md
@@ -0,0 +1,40 @@
+# App Screens
+
+_The last export date is September 08, 2023. Changes applied afterwards are not_
+_depicted._
+
+<!-- Including the export date for PDF export, otherwise would refer to the -->
+<!-- commit history. -->
+
+The table below lists descriptions of screens and actions that lead to them.
+Actions are usually tapping (👆) or scrolling down (⏬).
+If no screen number is given, the action refers to the screen in the previous
+table row.
+
+| # | Action | Screen | Description |
+| - | ------ | ------ | ----------- |
+| 1 | App opened the first time | <img src="./screenshots/login.png" width="60%"> | Login screen with data provider selection |
+| 2 | _Get data_ 👆 | <img src="./screenshots/login-redirect.png" width="60%"> | Alert for login redirect |
+| 3 | _Continue_ 👆 | <img src="./screenshots/keycloak-login.png" width="60%"> | Rectedirect to Keycloak login page |
+| 4 | _Sign In_ 👆 | <img src="./screenshots/import-success.png" width="60%"> | Back to app, import was successful |
+| 5 | _Continue_ 👆 | <img src="./screenshots/onboarding-1.png" width="60%"> | Onboarding (screen 1 of 5) |
+| 6 | _Next_ 👆 | <img src="./screenshots/onboarding-2.png" width="60%"> | Onboarding (screen 2 of 5) |
+| 7 | _Next_ 👆 | <img src="./screenshots/onboarding-3.png" width="60%"> | Onboarding (screen 3 of 5) |
+| 8 | _Next_ 👆 | <img src="./screenshots/onboarding-4.png" width="60%"> | Onboarding (screen 4 of 5) |
+| 9 | _Next_ 👆 | <img src="./screenshots/onboarding-5.png" width="60%"> | Onboarding (screen 5 of 5) |
+| 10 | _Get started_ 👆 | <img src="./screenshots/drug-selection.png" width="60%"> | Initial active drug selection |
+| 11 | _Continue_ 👆 | <img src="./screenshots/gene-report.png" width="60%"> | Gene report, showing all genes that can be mapped to PGx guidelines |
+| 12 | _CYP2D6_ tile 👆 | <img src="./screenshots/gene.png" width="60%"> | Gene details; the notice about influence of other drugs is only shown for genes where drug-gene interactions are implemented |
+| 13 | _Amitriptyline_ tile 👆 | <img src="./screenshots/amitriptyline.png" width="60%"> | Drug with unknown guideline detail; shown in green since standard dosing is applied without guidelines (_note for this example: the guideline for this genotype was not published in the backend at time of screenshot creation, which is why the guideline in missing in this case_) |
+| 14 | _Drugs_ navigation tab 👆 | <img src="./screenshots/drug-search.png" width="60%"> | Drug search page |
+| 15 | _?_ icon 👆 | <img src="./screenshots/drug-search-tooltip.png" width="60%"> | Tooltip explaining search feature; tooltips look the same on all pages  |
+| 16 | Filter icon 👆 | <img src="./screenshots/drug-search-filter.png" width="60%"> | Available search filters |
+| 17 | _Clopidogrel_ tile 👆 | <img src="./screenshots/clopidogrel.png" width="60%"> | Drug with known guideline |
+| 18 | ⏬ | <img src="./screenshots/clopidogrel-scrolled.png" width="60%"> | At the bottom of a drug, a link to the underlying guideline is given; this link redirects the user to the guideline website |
+| 19 | Share icon (in header) 👆 | <img src="./screenshots/pdf-export.png" width="60%"> | Create a PDF document to share with others |
+| 20 | _FAQ_ navigation tab 👆 | <img src="./screenshots/faq.png" width="60%"> | FAQ page |
+| 21 | First FAQ list item 👆 | <img src="./screenshots/faq-first-item.png" width="60%"> | Extended FAQ item |
+| 22 | ⏬ | <img src="./screenshots/faq-contact.png" width="60%"> | "Contact us" at the end of the FAQ in case of more questions; will open the user's default email app with the development team address pre-filled |
+| 23 | _More_ navigation tab 👆 | <img src="./screenshots/more.png" width="60%"> | "More" page with settings and further information; "Onboarding" will start the onboarding again (screens 5 to 10) |
+| 24 | #23 _About us_ 👆 | <img src="./screenshots/about-us.png" width="60%"> | "About us" page; "Privacy policy" and "Terms of use" have the same page style (currently only lorem ipsum) |
+| 25 | #23 _Delete app data_ 👆 | <img src="./screenshots/delete-app-data.png" width="60%"> | Deletes all app data and redirects to screen 1; continuing is only possible when the checkmark was clicked |
diff --git a/docs/App-behavior-when-lookups-unknown.md → ...sion/App-behavior-when-lookups-unknown.md b/docs/App-behavior-when-lookups-unknown.md → ...sion/App-behavior-when-lookups-unknown.md
diff --git a/docs/Drug–drug-interaction-information.md → ...sion/Drug–drug-interaction-information.md b/docs/Drug–drug-interaction-information.md → ...sion/Drug–drug-interaction-information.md
diff --git a/docs/screenshots/about-us.png b/docs/screenshots/about-us.png
diff --git a/docs/screenshots/amitriptyline.png b/docs/screenshots/amitriptyline.png
diff --git a/docs/screenshots/clopidogrel-scrolled.png b/docs/screenshots/clopidogrel-scrolled.png
diff --git a/docs/screenshots/clopidogrel.png b/docs/screenshots/clopidogrel.png
diff --git a/docs/screenshots/delete-app-data.png b/docs/screenshots/delete-app-data.png
diff --git a/docs/screenshots/drug-search-filter.png b/docs/screenshots/drug-search-filter.png
diff --git a/docs/screenshots/drug-search-tooltip.png b/docs/screenshots/drug-search-tooltip.png
diff --git a/docs/screenshots/drug-search.png b/docs/screenshots/drug-search.png
diff --git a/docs/screenshots/drug-selection.png b/docs/screenshots/drug-selection.png
diff --git a/docs/screenshots/drug.png b/docs/screenshots/drug.png
diff --git a/docs/screenshots/faq-contact.png b/docs/screenshots/faq-contact.png
diff --git a/docs/screenshots/faq-first-item.png b/docs/screenshots/faq-first-item.png
diff --git a/docs/screenshots/faq.png b/docs/screenshots/faq.png
diff --git a/docs/screenshots/gene-report.png b/docs/screenshots/gene-report.png
diff --git a/docs/screenshots/gene.png b/docs/screenshots/gene.png
diff --git a/docs/screenshots/import-success.png b/docs/screenshots/import-success.png
diff --git a/docs/screenshots/keycloak-login.png b/docs/screenshots/keycloak-login.png
diff --git a/docs/screenshots/login-redirect.png b/docs/screenshots/login-redirect.png
diff --git a/docs/screenshots/login.png b/docs/screenshots/login.png
diff --git a/docs/screenshots/more.png b/docs/screenshots/more.png
diff --git a/docs/screenshots/onboarding-1.png b/docs/screenshots/onboarding-1.png
diff --git a/docs/screenshots/onboarding-2.png b/docs/screenshots/onboarding-2.png
diff --git a/docs/screenshots/onboarding-3.png b/docs/screenshots/onboarding-3.png
diff --git a/docs/screenshots/onboarding-4.png b/docs/screenshots/onboarding-4.png
diff --git a/docs/screenshots/onboarding-5.png b/docs/screenshots/onboarding-5.png
diff --git a/docs/screenshots/pdf-export.png b/docs/screenshots/pdf-export.png
diff --git a/docs/screenshots/report.png b/docs/screenshots/report.png
diff --git a/docs/screenshots/search.png b/docs/screenshots/search.png