Discussion redesign Settings-Page

[OliEfr]

This is for discussing improvements for the newly designed settings page by @Noxdor

Let me start:

Front-End

• 1. Page does not adapt to screen size. You can test this by changing the browser window size. Make sure, all tiles are visible on smaller and larger screens. See IMG1. (Of course you dont need to adapt to all screen sizes but within a reasonable range.)
• 2. I would just decrease the size of the tiles a bit. Maybe this will also partially resolve issue 1.
• 3. If you move you mouse quickly along the screen (as I did when the settings page opened first and I think thats what many people do), the animations seem a bit fluttering. The focused tile getting bigger and all the others getting smaller and when the mouse is in between the tiles everything is getting back to normal. I think that is one animation to much and animation speed cant keep up with mousespeed. Maybe dont reduce the size of unfocused tiles - I think that movement is too much - But your call.
• 4. Make it obvious for the ID10T where to click! Not knowing where to click is kind of like the worst thing that can happen, because it completely destroys the flow. I noticed the following
  • I didn't assume you can click on the moon. Mb change cursor and move the icon to the top right?
  • On language selection, I can click both the arrow and the language and the triggered actions are inconsistent. Maybe extend clickable area to include the arrow region?
  • It is not clear that I should click and select a completely white circle. (Its rather unintuitive actually). For instance when switching on/off the OPAL-Features.
  • On Rocket-Selection: It wasnt immediately clear to me, that I should click on the rocket and not on the arrow. Maybe extend the clickable area more to the left so that it includes the arrow-region?
• 5. OPAL-Kurse im Dashbaord: Make Tutorial-Image much bigger. I cannot see anything.
• 6. Question | IMG3. Changing to light mode doesnt change the popups. I dont really mind that. Just asking whether thats intented behaviour. Usually you dont want white on black in light mode, I think.

---

Back-End (I would say thats secondary for now):

• IMG2: this cannot happen

[Noxdor]

@OliEfr Da hast du ja schon schön was gesammelt ;-) Wie gesagt ist es noch in einer frühen Phase, ich wollte wissen, ob es grundsätzlich funktional ist und bei euch lädt, da ich nicht über alle Backend-Funktionen im Bilde war und mir die Sachen so im Code zusammengesucht habe.

1. Ist noch nicht implementiert, bin ich dran
2. Werden sie automatisch, sobald der Screen responsive ist
3. Noted, werde ich drüber nachdenken, bei mir hat es bisher nicht geruckelt und ich fand die Fokusidee nett für den User, werde ich nochmal überdenken
4. Moon ist mir bewusst, bin ich dran, das more obvious zu machen. Hab heute mit einem Kumpel gezoomt der Mediendesign studiert, der hat mir dasselbe gesagt und hatte eine witzige Idee
   Inkonsistentes Design beim Language Change kann ich nicht mitgehen, vielleicht können die anderen dazu was sagen
   Toggle Button hatte ich befürchtet, dass der weiße Kreis zu uneindeutig ist, würde mich trotzdem noch die Meinung der anderen interessieren, aber sehe ich ein, dass ein klassischer Toggle als ein Radio vlt besser ist
   Rockets, gute Idee die Fläche zu erweitern, vlt fällt mir noch was besseres an sich ein für die Auswahl
5. Habe probiert dieselbe Größe anzupeilen, wie bisher, aber ich sehe gerade, dass es echt etwas kleiner ist. Ich mache es größer.
6. Es ändert das Popup, aber läuft noch nicht ganz sauber. EDIT probier mal mehrfach das Farbthema zu ändern, dann müsste sich die Farbe des Popups auch ändern?

[OliEfr]

Zu 3.+4. ich werd das morgen / bei der nächsten Sitzung kurz erläutern was ich meine. Vielleicht klärt es sich dann oder wird klarer, was ich meine
Zu 4.

vlt fällt mir noch was besseres an sich ein für die Auswahl

Ich finde die jetzige Idee gut

Zu 6. Konnte ich jetzt erstmal nicht reproduzieren, aber hatte auch keine Lust so oft zu klicken :D

@Noxdor