[Meta] UI guidelines

nik commented

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

Owner

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.

leuckeju commented

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

Member

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

leuckeju commented

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

Member

hover is not accessible for mobile devices

- hover is not accessible for mobile devices

leuckeju commented

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

Member

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!)

leuckeju commented

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

Member

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

leuckeju commented

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

Member

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…

leuckeju commented

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

Member

New Decision by Devmeeting: Page title goes into navbar

leuckeju commented

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

Member

Todo: decide which button style to use in which case

leuckeju commented

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

Member

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)

leuckeju commented

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

Member

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.)

leuckeju commented

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

Member

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