[Meta] UI guidelines

nik commented

2021-03-03 09:57:50 +01:00

(Migrated from edugit.org)

We should document how we design the UI of AlekSIS, as a set of guidelines and probably checklists we can check when reviewing front-end changes and designing UIs in the first place.

@ZugBahnHof Please get this started by documenting the principles you use when reviewing frontend changes.

We should document how we design the UI of AlekSIS, as a set of guidelines and probably checklists we can check when reviewing front-end changes and designing UIs in the first place. @ZugBahnHof Please get this started by documenting the principles you use when reviewing frontend changes.

ZugBahnHof commented

2021-09-16 11:18:46 +02:00

(Migrated from edugit.org)

Notes (WIP, tba):

Mobile First development
Same information on all screen sizes
Don't overwhelm with too much information
Scrolling is better/easier than clicking (→ The fewer clicks the better)
Use color for accents, actions or important info, but only in small amounts (e.g. no filled cards)
Try to reuse existing templates (like turnable.html, savebutton.html, etc)
On a detail view, add a possibility to go back to the list view, without using the browser history.
Try to get an opinion of "normal" users about big UI changes
tba

Notes (WIP, tba): - Mobile First development - Same information on all screen sizes - Don't overwhelm with too much information - Scrolling is better/easier than clicking (→ The fewer clicks the better) - Use color for accents, actions or important info, but only in small amounts (e.g. no filled cards) - Try to reuse existing templates (like turnable.html, savebutton.html, etc) - On a detail view, add a possibility to go back to the list view, without using the browser history. - Try to get an opinion of "normal" users about big UI changes - tba

ZugBahnHof commented

2021-09-16 11:21:31 +02:00

(Migrated from edugit.org)

hover is not accessible for mobile devices

- hover is not accessible for mobile devices

ZugBahnHof commented

2021-09-29 22:05:41 +02:00

(Migrated from edugit.org)

try to use correct inputs (https://better-mobile-inputs.netlify.app) (possibly irrelevant because of vuetify, Check this!)

* try to use correct inputs (https://better-mobile-inputs.netlify.app) (possibly irrelevant because of vuetify, Check this!)

ZugBahnHof commented

2021-11-24 21:04:52 +01:00

(Migrated from edugit.org)

CSS:

DRY (Don't repeat yourself)
The less absolute values ("magic numbers") and units (rather em, rem, vh, vw, % in oppose to pixels, cm, inch etc) the better

CSS: - DRY (Don't repeat yourself) - The less absolute values ("magic numbers") and units (rather em, rem, vh, vw, % in oppose to pixels, cm, inch etc) the better

ZugBahnHof commented

2023-03-08 15:22:40 +01:00

(Migrated from edugit.org)

Important: Never convey information solely by color, as this is not accessible. Places where this currently happens (list is not complete):

sidenav
Maintenance mode/Debug mode page
tba…

Important: Never convey information solely by color, as this is not accessible. Places where this currently happens (list is not complete): - sidenav - Maintenance mode/Debug mode page - tba…

ZugBahnHof commented

2023-03-20 18:15:45 +01:00

(Migrated from edugit.org)

New Decision by Devmeeting: Page title goes into navbar

ZugBahnHof commented

2023-03-20 18:17:12 +01:00

(Migrated from edugit.org)

Todo: decide which button style to use in which case

ZugBahnHof commented

2023-03-22 20:10:16 +01:00

(Migrated from edugit.org)

Devmeeting decided:

pick UI-Flows and
common usecases of components
Create respective Components etc. in the Core (such as save-button, cancel-button, etc.)
If some new non-component guidelines come up, collect them in a fixed global place (e.g. in this issue)

Devmeeting decided: - [ ] pick UI-Flows and - [ ] common usecases of components - [x] Create respective Components etc. in the Core (such as `save-button`, `cancel-button`, etc.) - [ ] If some new non-component guidelines come up, collect them in a fixed global place (e.g. in this issue)

ZugBahnHof commented

2023-03-22 20:11:21 +01:00

(Migrated from edugit.org)

When to use which item for selects

(e.g. Switches, Checkboxes, radios, Autocompletes, etc.)

When to use which item for selects (e.g. Switches, Checkboxes, radios, Autocompletes, etc.)

ZugBahnHof commented

2023-03-22 20:11:52 +01:00

(Migrated from edugit.org)

Always provide a way back to the previous page (most PWAs don't have browser navgation)

ZugBahnHof commented

2023-03-22 20:12:13 +01:00