Table 1.
Layout and visual design checklist and respective peer review test results.
| Checklist item | Evaluation | |||||||
|
|
|
Ta1 | T2 | T3 | T4 | T5 | Mean (SD) | Median |
| 1 | Displayed content density is appropriate for target users and their tasks | 3 | 4 | 2 | 4 | 4 | 3.4 (0.89) | 4 |
| 2 | The layout helps to keep the focus of attention on what to do next | 3 | 3 | 2 | 2 | 4 | 2.8 (0.84) | 3 |
| 3 | There is a clear “starting point” for each screen | 3 | 3 | 3 | 3 | 4 | 3.2 (0.45) | 3 |
| 4 | The app is pleasant to look at | 3 | 3 | 2 | 3 | 3 | 2.8 (0.45) | 3 |
| 5 | The app has a consistent and clearly recognizable appearance that will interest users | 4 | 3 | 2 | 3 | 4 | 3.2 (0.84) | 3 |
| 6 | The different app screens share a consistent layout | 3 | 4 | 3 | 3 | 4 | 3.4 (0.55) | 3 |
| 7 | Related information and functions are grouped and clearly recognizable | 4 | 4 | 2 | 3 | 4 | 3.4 (0.89) | 4 |
| 8 | The screens respect a grid of horizontal and vertical alignments | 4 | 4 | 3 | 3 | 4 | 3.6 (0.55) | 4 |
| 9 | There is a good balance between information density and white space | 4 | 3 | 3 | 2 | 3 | 3.0 (0.71) | 3 |
| 10 | Colors work well together, and the use of complicated backgrounds is avoided | 3 | 4 | 2 | 3 | 3 | 3.0 (0.71) | 3 |
| 11 | Colors are used to structure and group items | 4 | 2 | 2 | 3 | 2 | 2.6 (0.89) | 2 |
| 12 | The use of contrasting elements (eg, bold text) is applied to emphasize important topics/ or categories | 4 | 4 | 2 | 2 | 3 | 3.0 (1) | 3 |
| 13 | The screens are organized well and have no irrelevant information | 4 | 4 | 4 | 3 | 4 | 3.8 (0.45) | 4 |
| 14 | Icons, pictograms, and graphics are recognizable and/or intuitive to understand (concrete and familiar) | 3 | 3 | 2 | 4 | 4 | 3.2 (0.84) | 3 |
| 15 | The basic elements (screen titles, navigation items...) are easy to find | 4 | 4 | 4 | 4 | 2 | 3.6 (0.89) | 4 |
| 16 | Attention-grabbing elements (eg, animations, bold colors, distinctive sizes) are used with caution and only when needed | 2 | 3 | 3 | 2 | 2 | 2.4 (0.55) | 2 |
| 17 | Icons are visually and conceptually distinct but share a common harmony (clearly part of the same family) | 3 | 4 | 2 | 1 | 4 | 2.8 (1.3) | 3 |
| 18 | Clickable contents (buttons) are clearly recognizable as such | 3 | 3 | 3 | 3 | 4 | 3.2 (0.45) | 3 |
| 19 | The relationship between controls and their actions is obvious | 3 | 4 | 4 | 3 | 4 | 3.6 (0.55) | 4 |
| 20 | Radio buttons and check boxes are used appropriately | 1 | 4 | 3 | 3 | 3 | 2.8 (1.1) | 3 |
| 21 | Nonbutton items do not have button characteristics | 2 | 4 | 4 | 3 | 3 | 3.2 (0.84) | 3 |
| 22 | Clickable items and content (buttons) include redundant labels or subtitles | 1 | 3 | 1 | 1 | 3 | 1.8 (1.1) | 1 |
| 23 | The most important information is clearly displayed in the start zone (no need to scroll) | 1 | 4 | 4 | 3 | 4 | 3.2 (1.3) | 4 |
| 24 | The app clearly shows when there is off-screen content that requires scrolling to view | 1 | 2 | 4 | 3 | 3 | 2.6 (1.14) | 3 |
| 25 | Meaningful labels, functional background colors, and the use of margins and white space help the user identify distinct items | 4 | 3 | 3 | 4 | 4 | 3.6 (0.55) | 4 |
| 26 | Typeface fonts are used consistently | 4 | 3 | 3 | 3 | 4 | 3.4 (0.55) | 3 |
| 27 | Text fonts (typeface) are readable | 2 | 4 | 3 | 4 | 3 | 3.2 (0.84) | 3 |
| 28 | Use of italic text is avoided | 4 | 4 | 3 | 4 | 4 | 3.8 (0.45) | 4 |
| 29 | The app avoids extensive use of capitalized text | 4 | 4 | 3 | 4 | 4 | 3.8 (0.45) | 4 |
| 30 | Textual content is neither too short nor too long | 4 | 3 | 3 | 4 | 3 | 3.4 (0.55) | 3 |
aT: Test.