Alternative zu lighterpack

[zeank]

Ich hätte eigentlich gerne, dass auch beim Drücken der Enter-Taste der Fokus in der Maske um ein Element weiterspringt (also wie bei Tab). Geht das irgendwie einfach umzusetzen? Oder ist das aus Usability-Perspektive vielleicht sogar kontraproduktiv? Sollte man das eher dem Browser überlassen?

[sja]

vor 10 Stunden schrieb zeank:

Accessability ist ein Muss, auch wenn ich da sicher nicht ausreichend Wissen habe.

Wow, toll, das mit dem "Muss" höre ich nicht jeden Tag . Das freut mich. Frag mich gerne, gebe gerne mein Wissen weiter.

Ich schau mir das Tool die Tage nochmal an (sitze grad im Zug mit schlechtem WLAN).

[sja]

vor 7 Stunden schrieb zeank:

Ich hätte eigentlich gerne, dass auch beim Drücken der Enter-Taste der Fokus in der Maske um ein Element weiterspringt (also wie bei Tab). Geht das irgendwie einfach umzusetzen? Oder ist das aus Usability-Perspektive vielleicht sogar kontraproduktiv? Sollte man das eher dem Browser überlassen?

Hm, würde ich von abraten. Würde mich an das zu erwartende Verhalten gemäß HTML-Standard halten, sonst können Nutzer irritiert sein.

Dass der Fokus irgendwohin springt, würde ich auch ganz vorsichtig einsetzen, also nur wenn es wirklich Sinn macht. Bei "Add new Item" wird z.B. oberhalb des auslösenden Elements etwas eingefügt.

[sja]

Am 5.11.2018 um 10:42 schrieb zeank:

hab es jetzt so gemacht, dass selektierte Elemente auch ein Unterstrich bekommen und blau werden. 

Sieht gut aus!

 

Am 5.11.2018 um 10:42 schrieb zeank:

Ist mir kein richtig gutes Wort eingefallen, hab es jetzt mal "Type" genannt. Macht das Sinn?

Finde ja.

 

Am 5.11.2018 um 10:42 schrieb zeank:

Hm, nicht unbedingt, lighterpack macht das auch so und persönlich finde(!) ich das recht eingängig, denn ein Total in g ist eher schwer zu lesen. Kann man doch aber oben bei den Total-Totals ändern.

Ah, ok jetzt verstehe ich es. Es ist so gedacht, dass ich unterschiedliche Items theoretisch in unterschiedlichen Gewichts-Einheiten eingeben kann (oder eben zumindest in g) und das Ergebnis immer in kg umgerechnet und angezeigt wird?  Dann macht das Sinn.

Hatte über den Drehschalter dreimal 0,1 eingegeben und mich gewundert dass 0,0 rauskam . Außerdem hatte ich irgendwie gedacht, dass 0,x ja kg wären (und nicht g), aber ich kann ja auch 200 direkt eingeben...., dann klappts (war zu sehr auf den Drehschalter fixiert, sorry mein Fehler).

Am 5.11.2018 um 10:42 schrieb zeank:

(-) wurde durch Graphik ersetzt.

Wäre es nicht konsistenter hier auch ein "x" zu verwenden (wie bei "delete item"?)

[sja]

Nochwas zur Tasgtaturbedienung/Fokushervorhebung:

Items: Das "x" zum Löschen taucht nur bei mouse:over auf? Kann das immer sichtbar sein? Oder zumindest, wenn man es mit der Tastatur fokussiert, eingeblendet werden? Wobei es nutzerfreundlicher wäre, wenn es immer sichtbar wäre, oder?

Icons (+, -, x): Hier bekommen Mausnutzer einen Farbwechsel, Tastaturnutzer nur den Pixelkranz des Browsers - funktioniert. Hübscher wäre, wenn das bei Tastaturnutzung auch zusätzlich den Farbwechsel bekämen (vergl. jetzt "Add new Item")

LISTS (wenn hier mehrere Links sind): Evtl. auch noch ne zusätzliche Unterstreichung für Tastaturnutzer (also nur den Listennamen)?

Link smrtpck (alpha): Ist das tatsächlich ein Link, d.h. führt der später irgendwo hin? Wenn ja, könnte der bei Tastaturbedienung auch eine Hervorhebung bekommen? Wenn nein  (was ich eher vermute), Link entfernen? --- und dann eine h1 draus machen, vielleicht sogar mit einer Ergänzung? Z.B. smrtpck - Gear Lists Ultralight (oder whatever - hm keine Ahnung, also nur, wenn einem da was vernünftiges einfällt Gedanke ist nur, wenn h1, dann besser für SEO und wenn die dann noch etwas aussagekräftiger, dann auch für SEO besser? Wobei ich mir nicht sicheer bin, ob letzteres schon ne Auswirkung hat), aber mit h1 auszuzeichnen schadet ja nix. LISTS könnte dann h2 sein (statt h6).

So nun noch was Schwierigeres

In der mobilen Ansicht gibt es diese Listen-Navi noch nicht? Seh ich das richtig? Was die Barrierefreiheit betrifft, bekommt man die mobile Ansicht, wenn man nicht so ein großes Fenster hat und z.B. auf 200% über den Browser zoomt. Aber ich meine auch auf meinem Iphone ist die Listen-Navi weg?

Könnte in der mobilen Ansicht ein Hamburger-Icon-Button (Textalternative, mit Hilfe von aria-label="navigation" im a-Element) da sein (Standard-Ansicht versteckt), wenn man draufklickt wird die sidebar eingeblendet? Nich so ganz einfach dies barrierfrei hinzukriegen, wenn man das noch nie gemacht hat? Aber vielleicht hilft dieses kurze Tutorial (6min), evtl. sogar das erwähnte polyfill. Das Problem mit dem offscreen-Focus hast du derzeit nicht, weil die sidebar ganz weg ist...?!). https://www.youtube.com/watch?v=fGLp_gfMMGU&t=0s&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=30

(Bei zdf.de ist das übrigens auch gut umgesetzt, wenn du da das Browserfenster klein ziehst, und dann mal durch die Navi tabbst, siehst, du, dass das ganz gut funktioniert. Fokus immer sichtbar, wenn du durch bist, schließt das Ding automatisch. Ein aria-expanded="true" bzw. mit dem Wert "false" auf dem Toggle-Element sagt dem Screenreadernutzer, je nach Zustand, ob das Ding aus- oder eingeklappt ist.... ("true" ausgeklappt, "false" eingeklappt) -  aber das nur so am Rande ).

[cergol]

Zitat

Ein aria-expanded="true" bzw. mit dem Wert "false" auf dem Toggle-Element sagt dem Screenreadernutzer

Wenn ich solche Sätze lese bin ich nur sprachlos...

Ich habe keinen blassen Dunst um was es hier geht, kann aber erkennen, dass sich hier ein paar Leute mit viel Sachverstand und Engagement große Mühe geben, um für dieses Forum und uns Nutzer etwas tolles und sehr praktisches entstehen zu lassen.

Schon mal zwischen durch: Hut ab und herzlichen Dank für Euere Mühe, Dir vor allem @zeank!

[sja]

vor einer Stunde schrieb cergol:

ch habe keinen blassen Dunst um was es hier geht, 

Ui, so war das gar nicht gemeint. Das ist "einfach" was, was man ins HTML schreibt und Leute, die sich mit ner Sprachausgabe die Seite vorlesen lassen, weil sie nicht so gut gucken können, bekommen dann quasi angesagt, dass sie Inhalt eingeblendet haben. Aber schon sehr speziell 

Bearbeitet 6. November 2018 von sja

[zeank]

vor 14 Stunden schrieb sja:

Hatte über den Drehschalter dreimal 0,1 eingegeben und mich gewundert dass 0,0 rauskam . Außerdem hatte ich irgendwie gedacht, dass 0,x ja kg wären (und nicht g), aber ich kann ja auch 200 direkt eingeben...., dann klappts (war zu sehr auf den Drehschalter fixiert, sorry mein Fehler).

Bin mit der jetzigen Lösungen selbst nicht so ganz zufrieden, nur scheint es nicht anders zu gehen. Wenn ich input[type="number"] habe, dann akzeptiert das Feld nur dann Nachkommastellen, wenn das 'step' attribute selbst auch eine Nachkommastelle vorgibt. Und zwar dann auch jeweils nur soviele wie in 'step' angegeben. Ich denke die meisten metrisch orientierten Leute werden zwar das meiste in Gramm angeben wollen, aber nicht auf Komma genau. Das machen nur wenige, aber wenige machen es halt. Deswegen wäre mir ein 'step' von 1 eigentlich am liebsten, plus der Möglichkeit Nachkommastellen auf Bedarf angeben zu können. Scheint nicht Möglich zu sein. Wer seine Items mit 'oz' einträgt, hat das Problem weniger, würde aber vielleicht gerne zwei Nachkommastellen nutzen?

Vermutlich muss ich den Wert dynamisch anpassen, je nachdem was für eine Einheit ausgewählt ist. -> kommt auf die Todo

vor 14 Stunden schrieb sja:

Wäre es nicht konsistenter hier auch ein "x" zu verwenden (wie bei "delete item"?)

Hm ja. Kommt drauf an. Ich dachte mir, da oben ein '+' für hinzufügen ist, macht dann an der Stelle ein '-' mehr Sinn (als das Gegenteilige). Während aber bei den Items ein '-' sich irgendwie komisch anfühlt wiederum.

[zeank]

vor 13 Stunden schrieb sja:

Nochwas zur Tasgtaturbedienung/Fokushervorhebung:

Items: Das "x" zum Löschen taucht nur bei mouse:over auf? Kann das immer sichtbar sein? Oder zumindest, wenn man es mit der Tastatur fokussiert, eingeblendet werden? Wobei es nutzerfreundlicher wäre, wenn es immer sichtbar wäre, oder?

Hm ja. Ich finde den Effekt halt schickt mit dem 'mouseover', es sieht ein bisschen fad aus, wenn es immer da ist, zumal es beim reinen betrachten der statistischen Daten einfach stört. Das mit dem Focus ist ein Bug, ich hab versucht das zu beheben, aber hab noch keine Lösung gefunden. Vermutlich stimmt einfach der CSS selector nicht, bzw das Element auf das ich ihn setze. Denn der tatsächliche 'focus' scheint auf einem anderen Element zu liegen als ich denke, nur auf welchem? Bin ich mit :focus überhaupt richtig?

vor 13 Stunden schrieb sja:

Icons (+, -, x): Hier bekommen Mausnutzer einen Farbwechsel, Tastaturnutzer nur den Pixelkranz des Browsers - funktioniert. Hübscher wäre, wenn das bei Tastaturnutzung auch zusätzlich den Farbwechsel bekämen (vergl. jetzt "Add new Item")

Ich weiss, selbes Problem wie oben. Setze mich nachher nochmal ran.

vor 13 Stunden schrieb sja:

LISTS (wenn hier mehrere Links sind): Evtl. auch noch ne zusätzliche Unterstreichung für Tastaturnutzer (also nur den Listennamen)?

Da gibt es beim 'mouseover' auch keinen Unterstrich (dafür ist beim '-' der Kasten rot, nicht gut, aber vielleicht ein Hinweis auf das ungelöste focus Problem). Soll da beim mouseover dann auch ein Unterstrich hin? Warum nur bei der Tastatur? Da hat man ja immerhin den Kasten...

vor 13 Stunden schrieb sja:

Link smrtpck (alpha): Ist das tatsächlich ein Link, d.h. führt der später irgendwo hin? Wenn ja, könnte der bei Tastaturbedienung auch eine Hervorhebung bekommen? Wenn nein  (was ich eher vermute), Link entfernen? --- und dann eine h1 draus machen, vielleicht sogar mit einer Ergänzung? Z.B. smrtpck - Gear Lists Ultralight (oder whatever - hm keine Ahnung, also nur, wenn einem da was vernünftiges einfällt Gedanke ist nur, wenn h1, dann besser für SEO und wenn die dann noch etwas aussagekräftiger, dann auch für SEO besser? Wobei ich mir nicht sicheer bin, ob letzteres schon ne Auswirkung hat), aber mit h1 auszuzeichnen schadet ja nix. LISTS könnte dann h2 sein (statt h6).

SEO spielt an der Stelle keine Rolle, die sehen nur ne "weisse" Seite. Aber <title> usw im <head> muss ich noch gescheit setzen. Ansonsten wär für SEO später die geteilten Links auf die fertigen (read-only) Listen relevant. Wenn überhaupt.

Das ist deshalb ein Link, weil man durch Draufklicken dann flott zurück nach oben (Anfang der Seite) springen kann. Das ist bei ziemlich vielen 'apps' so und besonders unter mobile finde ich das recht praktisch. Nein? h1 und so muss ich mir anschaun, dachte das wär so. Bin mir unsicher, h1 oder h2 muss dann ja aber eigentlich der Name der Liste und die Kategorien im Hauptfenster sein, das Links ist ja nur das Menü, also eigentlich nur <nav> und <ul><li> und keine Überschriften. Oder versteh ich Dich falsch, bzw etwas nicht?

vor 13 Stunden schrieb sja:

So nun noch was Schwierigeres

In der mobilen Ansicht gibt es diese Listen-Navi noch nicht? Seh ich das richtig? Was die Barrierefreiheit betrifft, bekommt man die mobile Ansicht, wenn man nicht so ein großes Fenster hat und z.B. auf 200% über den Browser zoomt. Aber ich meine auch auf meinem Iphone ist die Listen-Navi weg?

Japp, ist Dank @Dean auf der TODO, will sich @bri netterweise drum kümmern <3 

vor 13 Stunden schrieb sja:

Könnte in der mobilen Ansicht ein Hamburger-Icon-Button (Textalternative, mit Hilfe von aria-label="navigation" im a-Element) da sein (Standard-Ansicht versteckt), wenn man draufklickt wird die sidebar eingeblendet? Nich so ganz einfach dies barrierfrei hinzukriegen, wenn man das noch nie gemacht hat? Aber vielleicht hilft dieses kurze Tutorial (6min), evtl. sogar das erwähnte polyfill. Das Problem mit dem offscreen-Focus hast du derzeit nicht, weil die sidebar ganz weg ist...?!). https://www.youtube.com/watch?v=fGLp_gfMMGU&amp;t=0s&amp;list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&amp;index=30

(Bei zdf.de ist das übrigens auch gut umgesetzt, wenn du da das Browserfenster klein ziehst, und dann mal durch die Navi tabbst, siehst, du, dass das ganz gut funktioniert. Fokus immer sichtbar, wenn du durch bist, schließt das Ding automatisch. Ein aria-expanded="true" bzw. mit dem Wert "false" auf dem Toggle-Element sagt dem Screenreadernutzer, je nach Zustand, ob das Ding aus- oder eingeklappt ist.... ("true" ausgeklappt, "false" eingeklappt) -  aber das nur so am Rande ).

Tausend Dank! So wär das natürlich perfekt.

[mawi]

Ich weiß nicht, ob die Dinge schon berichtet wurden. Vielleicht sollten wir das Feedback, Fehler, etc über einen Issue-Tracker machen?

• Das drop down Feld für die Gewichtsangabe in der Übersicht oben ist anders als die drop down Menüs bei den Kategorien (da ist der Pfeil grau unterlegt)
• Die In-/decrease Buttons bei den Items in den Kategorien könnten mehr Abstand von der Zahl davor haben.
• Beim Betätigen von "delete category" sollte meiner Meinung nach eine Nachfrage kommen, ob man das wirklich möchte. Denn es ist schnell mal nur so drauf geklickt und dann ist alles unwiderruflich weg.
• Ich fände es besser, wenn das Löschen-Icon für die Items immer zu sehen wäre. Gerade bei der mobilen Ansicht, da passiert es schnell mal, dass man in die "freie" Fläche klickt und schwups ist das Item weg und man weiß nicht warum. Ist für mich auch nicht ersichtlich, warum gerade das Löschen-Icon versteckt ist und mehr Interaktionsschritte benötigt als die anderen.

Ansonsten wäre es langsam mal Zeit für eine Item-Library und Drag&Drop- Funktionalität

Danke für deinen Einsatz und die tolle Arbeit!

[zeank]

vor 33 Minuten schrieb mawi:

Ich weiß nicht, ob die Dinge schon berichtet wurden. Vielleicht sollten wir das Feedback, Fehler, etc über einen Issue-Tracker machen?

Ja, bin ich grad dabei!

vor 33 Minuten schrieb mawi:

• Das drop down Feld für die Gewichtsangabe in der Übersicht oben ist anders als die drop down Menüs bei den Kategorien (da ist der Pfeil grau unterlegt)

Korrigiert, sieht aber scheisse aus unter Mac+Firefox... 

Zitat

• Die In-/decrease Buttons bei den Items in den Kategorien könnten mehr Abstand von der Zahl davor haben.

Darauf hab ich AFAIK keinen Einfluss, das ist von Browserimplementierung abhängig, Standardfeld input[type="number"].

Zitat

• Beim Betätigen von "delete category" sollte meiner Meinung nach eine Nachfrage kommen, ob man das wirklich möchte. Denn es ist schnell mal nur so drauf geklickt und dann ist alles unwiderruflich weg.

Persönlich mag ich dieses Infragestellen sämtlicher Interaktion nicht. Mein Gedanke ist der: es wird später ja eine Versionierung geben, jedwedes Löschen erstellt automatisch einen Speicherpunkt. Sollte man einen Fehler gemacht haben, kann man so leicht zu einer vorherigen Version zurückkehren.

Auch Listen sollen nicht wirklich gelöscht werden sondern nur archiviert. Selbes für items aus dem Inventar.

Zitat

• Ich fände es besser, wenn das Löschen-Icon für die Items immer zu sehen wäre. Gerade bei der mobilen Ansicht, da passiert es schnell mal, dass man in die "freie" Fläche klickt und schwups ist das Item weg und man weiß nicht warum. Ist für mich auch nicht ersichtlich, warum gerade das Löschen-Icon versteckt ist und mehr Interaktionsschritte benötigt als die anderen.

Ok, ok, 2:1

Zitat

Ansonsten wäre es langsam mal Zeit für eine Item-Library und Drag&Drop- Funktionalität  

lol *schwitz*

Zitat

Danke für deinen Einsatz und die tolle Arbeit!

Geht zurück an Euch alle hier!

Bearbeitet 7. November 2018 von zeank

[mawi]

vor 45 Minuten schrieb zeank:

Zitat

• Das drop down Feld für die Gewichtsangabe in der Übersicht oben ist anders als die drop down Menüs bei den Kategorien (da ist der Pfeil grau unterlegt)

Korrigiert, sieht aber scheisse aus unter Mac+Firefox...  

Stimmt! Wenn du die Höhe des Menüs in der Übersicht oben verkleinerst, dann sieht es deutlich besser aus. Aktuell ist sie auf folgenden Wert gesetzt: height: calc(1.8125rem + 2px);

vor 48 Minuten schrieb zeank:

Zitat

• Die In-/decrease Buttons bei den Items in den Kategorien könnten mehr Abstand von der Zahl davor haben.

Darauf hab ich AFAIK keinen Einfluss, das ist von Browserimplementierung abhängig, Standardfeld input[type="number"].

Probier dit hier mal: https://stackoverflow.com/questions/32505389/how-can-i-add-padding-right-to-an-input-type-number-when-aligning-right

vor 50 Minuten schrieb zeank:

Zitat

• Beim Betätigen von "delete category" sollte meiner Meinung nach eine Nachfrage kommen, ob man das wirklich möchte. Denn es ist schnell mal nur so drauf geklickt und dann ist alles unwiderruflich weg.

Persönlich mag ich dieses Infragestellen sämtlicher Interaktion nicht. Mein Gedanke ist der: es wird später ja eine Versionierung geben, jedwedes Löschen erstellt automatisch einen Speicherpunkt. Sollte man einen Fehler gemacht haben, kann man so leicht zu einer vorherigen Version zurückkehren.

Auch Listen sollen nicht wirklich gelöscht werden sondern nur archiviert. Selbes für items aus dem Inventar.

Oki, vor dem Hintergrund ist es etwas anderes.

 

[zeank]

vor 50 Minuten schrieb mawi:

Stimmt! Wenn du die Höhe des Menüs in der Übersicht oben verkleinerst, dann sieht es deutlich besser aus. Aktuell ist sie auf folgenden Wert gesetzt: height: calc(1.8125rem + 2px);

Wenn ich das ändern, siehts es erstens kacke aus und zweitens sind wir wieder beim alten problem, dass es oben anders ist als unten. Deshalb hab ich jetzt einfach bei dem Text davor ein vertical-align:middle gemacht.

vor 50 Minuten schrieb mawi:

Probier dit hier mal: https://stackoverflow.com/questions/32505389/how-can-i-add-padding-right-to-an-input-type-number-when-aligning-right

Ah, ok, nice, jetzt hab ich mal die spinners ganz weggemacht beim weight, nerven mich eh, bei qty ist jetzt, falls supported, ein Abstand.

 

[mawi]

vor 2 Minuten schrieb zeank:

vor 53 Minuten schrieb mawi:

Stimmt! Wenn du die Höhe des Menüs in der Übersicht oben verkleinerst, dann sieht es deutlich besser aus. Aktuell ist sie auf folgenden Wert gesetzt: height: calc(1.8125rem + 2px);

Wenn ich das ändern, siehts es erstens kacke aus und zweitens sind wir wieder beim alten problem, dass es oben anders ist als unten. Deshalb hab ich jetzt einfach bei dem Text davor ein vertical-align:middle gemacht.

Ach so, die Höhe solltest du nur bei dem oberen Element anpassen und die anderen sollen so bleiben. Na ja, ist ja nur ein Detail, da kann man später auch noch mal ran. Wie oben schon angeschnitten, die große Arbeit liegt ja noch vor uns/dir

[zeank]

Aktuelle todo list für eine Art v1.0.0 (MVP): https://github.com/sstrigler/smrtrpck/milestone/1

Bearbeitet 7. November 2018 von zeank

[mawi]

Ich würde es gut finden, wenn der Link zu den Issues und der Link zur Webseite im ersten Beitrag verlinkt werden würde. Dann muss man nicht immer danach suchen und wäre für alle schnell auffindbar.

[zeank]

vor 19 Minuten schrieb mawi:

Ich würde es gut finden, wenn der Link zu den Issues und der Link zur Webseite im ersten Beitrag verlinkt werden würde. Dann muss man nicht immer danach suchen und wäre für alle schnell auffindbar.

Müsste ein Admin machen, ich kann den nicht mehr bearbeiten.

[sja]

vor 7 Stunden schrieb zeank:

Hm ja. Kommt drauf an. Ich dachte mir, da oben ein '+' für hinzufügen ist, macht dann an der Stelle ein '-' mehr Sinn (als das Gegenteilige). Während aber bei den Items ein '-' sich irgendwie komisch anfühlt wiederum.

Ja, ok, verstehe so kann man es auch sehen.

[sja]

vor 7 Stunden schrieb zeank:

Da gibt es beim 'mouseover' auch keinen Unterstrich (dafür ist beim '-' der Kasten rot, nicht gut, aber vielleicht ein Hinweis auf das ungelöste focus Problem). Soll da beim mouseover dann auch ein Unterstrich hin? Warum nur bei der Tastatur? Da hat man ja immerhin den Kasten...

Also das "-" ist jetzt prima rot (der Kasten drumrum etwas schäps ist bei "x" schöner.

Bzgl. der Links... vielleicht erstmal noch zurückstellen. Eigentlich sieht man es jetzt schon ganz gut mit dem Kasten, ist vielleicht auch die Frage, wie es später in der mobilen Ansicht aussieht. Dann kann man gestalterisch immer noch überlegen. Und klar, wenn man da für die Tastaturnutzer rangeht, könnte man auch für die Mausnutzer...

Aber vielleicht noch ein Farbwechsel bei "+" (Add new List)?

Finde übrigens ein normales Input für die "g" auch besser . Macht bei "Qty" mehr Sinn.

[sja]

Hab s mir grad mal mit dem Screenreader angehört:  Bei den Listen-links wird jetzt vorgelesen: "New List Delete list" beim nächsten TAB wird dann das Icon focussiert und nochmal: "Delete list" (das eigentlich verlinkte Icon) vorgelesen. Das ist natürlich verwirrend. Liegt wohl daran, dass das verlinkte Icon im Textlink verschachtelt liegt, dachte erst, das würde nichso viel machen, aber da wirkt sich das ungut aus. Besser innerhalb eines li die Links hintereinander positionieren?!

Weight: Nur zum Verständnis: soll es ein Drehschalter sein oder ein normales input? Mit dem Screenreader wird Drehschalter ausgegeben.. Semantisch wahrscheinlich ok?!

Schloß-Icon: Besserer Fokushervorhebung bei Tastaturbedienung?

Die aktuell ausgewählte Liste: blau kontrastiert wieder etwas zu wenig (IST 3,8:1 SOLL 4,5:1) kleines bissl mehr?

[zeank]

Gibt ein größeres Update. Unter anderem habe ich

• Alle Links (<a>) durch echte Buttons (<button>) ersetzt, hoffe das hilft. Denke dass echte buttons semantisch (aber auch optisch) besser sind, weil man mit ihnen Aktionen verbindet und nicht dass man irgendwo hingelangt wie bei Links
• Dank @bri gibt es jetzt ein Ausklappmenü bei kleinen Bildschirmen so dass man zB auch am smartphone durch seine Listen navigieren kann
• Die stats table wandert von allein nach rechts, wenn der Bildschirm breit genug ist 
• Das Anlegen und Löschen von Kategorien hab ich überarbeitet und wird nun innerhalb der stats table gemacht. Vorher hatte ich dafür auch Buttons aber das wurden dann ziemlich viele zu bunte Buttons. Weiss nicht, ob der jetzige Zustand der Weisheit letzter Schluss ist.

Als nächstes würde ich mich ans Verschieben von Items und Kategorien machen. Da stellen sich mir aber einige Fragen, bei denen ihr mir vielleicht behilflich sein könntet  ( @sja )? Es wurde ja nach Drag & Drop gefragt, und lighterpack macht es ja auch so. Ich denke, das braucht es also auf jeden Fall. Allerdings ist es so, dass ja viele Geräte kein DnD unterstützen. Screen reader sowieso nicht aber auch am smartphone. Also braucht es ja auch jeden Fall noch eine Alternative. Und da frag ich mich, lieber erst die Alternative (die dann ja überall funktioniert) implementieren? Ich dachte da an so rauf/runter Pfeile. Hat jemand eine bessere Idee? Gibt es da vielleicht irgendwas "fertiges"? Oder vielleicht sogar etwas das verschieben mit Pfeilen und DnD gleichzeitig unterstützt. Wo gibt es Beispiele? Jira hat afaik sowas, hab aber keinen Zugang grad zu einem Jira. Mal bei github schaun, ob die nicht auch sowas haben irgendwo...

 

Als nächstes frage ich mich, ob ich überhaupt bei der linken Spalte bleibe. Hier kommt es letzten Endes darauf an, ob ich das Inventar wie lighterpack links in die Spalte packe. Finde das aber eher schlecht gelöst. Vielleicht fällt mir (oder jemand) da was besseres ein, wie man Items aus dem Inventar in eine Liste kopieren kann. Zwei Ansätze:

 

• Sobald man ein neues Item hinzugefügt hat und das Tippen anfängt wird gleichzeitig im Inventar gesucht. Bei Treffern erscheint eine Auswahlliste unterhalb des Cursors und man kann eines auswählen, welches dann in die Spalte kopiert wird
• Oben in der Navbar eine Suchleiste mittels derer man im Inventar suchen kann. Treffer erscheinen unterhalb in einem bubble (wie oben) und man kann wieder auswählen, müsste dann aber sagen zu welcher Kategorie das gehört (umständlich)
• Beides?
• Noch was anderes?
• Ne generelle Inventarseite wo man einfach direkt sein Inventar bearbeiten kann?
• Oder doch alles in der Leiste wie bei lighterpack
• kommt die Leiste weg, würden die Liste der Listen oben ins Menü wandern und dort in einem Dropdown verwaltet werden. Zu umständlich? Muss man da sooft hin?

 

 (Der Editor hakt hier übrigens regelmäßig, enter + pfeiltasten geht manchmal einfach nicht - sehr nervig)

Bearbeitet 9. November 2018 von zeank

[sja]

vor einer Stunde schrieb zeank:

Alle Links (<a>) durch echte Buttons (<button>) ersetzt, hoffe das hilft. Denke dass echte buttons semantisch (aber auch optisch) besser sind, weil man mit ihnen Aktionen verbindet und nicht dass man irgendwo hingelangt wie bei Links

Ja, sehr gut.

vor einer Stunde schrieb zeank:

Als nächstes würde ich mich ans Verschieben von Items und Kategorien machen. Da stellen sich mir aber einige Fragen, bei denen ihr mir vielleicht behilflich sein könntet  ( @sja )? Es wurde ja nach Drag & Drop gefragt, und lighterpack macht es ja auch so. Ich denke, das braucht es also auf jeden Fall. Allerdings ist es so, dass ja viele Geräte kein DnD unterstützen. Screen reader sowieso nicht aber auch am smartphone. Also braucht es ja auch jeden Fall noch eine Alternative. Und da frag ich mich, lieber erst die Alternative (die dann ja überall funktioniert) implementieren? Ich dachte da an so rauf/runter Pfeile. Hat jemand eine bessere Idee? Gibt es da vielleicht irgendwas "fertiges"? Oder vielleicht sogar etwas das verschieben mit Pfeilen und DnD gleichzeitig unterstützt. Wo gibt es Beispiele? Jira hat afaik sowas, hab aber keinen Zugang grad zu einem Jira. Mal bei github schaun, ob die nicht auch sowas haben irgendwo...

Kann hier gern mal recherchieren. Hab schon was gesehen, will aber nochmal schauen, was am besten funktioniert...

[Dean]

vor einer Stunde schrieb zeank:

• Sobald man ein neues Item hinzugefügt hat und das Tippen anfängt wird gleichzeitig im Inventar gesucht. Bei Treffern erscheint eine Auswahlliste unterhalb des Cursors und man kann eines auswählen, welches dann in die Spalte kopiert wird
• Oben in der Navbar eine Suchleiste mittels derer man im Inventar suchen kann. Treffer erscheinen unterhalb in einem bubble (wie oben) und man kann wieder auswählen, müsste dann aber sagen zu welcher Kategorie das gehört (umständlich)
• Beides?
• Noch was anderes?
• Ne generelle Inventarseite wo man einfach direkt sein Inventar bearbeiten kann?
• Oder doch alles in der Leiste wie bei lighterpack
• kommt die Leiste weg, würden die Liste der Listen oben ins Menü wandern und dort in einem Dropdown verwaltet werden. Zu umständlich? Muss man da sooft hin?

 

 (Der Editor hakt hier übrigens regelmäßig, enter + pfeiltasten geht manchmal einfach nicht - sehr nervig)

Ich würde eigentlich die Option bevorzugen das Ich eine vorhandene Liste habe und da aussuchen kann. Wird ja hier selbst der größte Messi Sammler von Gear nicht so viel haben dass das suchen unendlich lang dauert. Hier würde sich die Frage stellen ob du Inventar auf Benutzer oder Globaler Ebene siehst. Es gab ja den Vorschlag das es globale Items gibt (z.b. Exos58 auf globaler Ebene mit Gewicht 1.2 kg, so das nicht jeder das Item eintragen muss (und womöglich wiegen)). 

Wenn du nur meinst das jemand wirklich nur aus dem eigenen Inventar auswählt, finde Ich ein Dropdown (also nichts dynamisches) gut. 

[zeank]

vor 42 Minuten schrieb Dean:

Ich würde eigentlich die Option bevorzugen das Ich eine vorhandene Liste habe und da aussuchen kann. Wird ja hier selbst der größte Messi Sammler von Gear nicht so viel haben dass das suchen unendlich lang dauert. Hier würde sich die Frage stellen ob du Inventar auf Benutzer oder Globaler Ebene siehst. Es gab ja den Vorschlag das es globale Items gibt (z.b. Exos58 auf globaler Ebene mit Gewicht 1.2 kg, so das nicht jeder das Item eintragen muss (und womöglich wiegen)). 

Wenn du nur meinst das jemand wirklich nur aus dem eigenen Inventar auswählt, finde Ich ein Dropdown (also nichts dynamisches) gut. 

Ich hatte mal von global vs lokal gesprochen, damit aber was anderes gemeint. Und zwar dass es items geben soll, die es nicht ins Inventar schaffen sondern nur auf einer bestimmten Liste vorhanden sind. Zb für Essen. Ein globales Inventar über alle User hinweg, klingt zwar nicht ganz uninteressant, halte ich aber so direkt nicht für praktikabel. Wir halten hier ja all unsere Leute dazu an ihr persönliches Gear nachzuwiegen, denn was auf der Packung steht und was die Sachen dann tatsächlich wiegen sind definitiv zwei paar Schuhe. Und wir modifizieren unser Gear ja auch, schneiden unnötiges ab, nähen extra Taschen ran etc etc.

Was die Länge der Liste angeht, nun ... bei mir selbst ist das definitiv so, dass es eine so lange Liste ergäbe, dass ich auf jeden Fall eine Suche brauche um mich durchzuwühlen. Manuell raussuchen wäre echt recht anstrengend und fällt hinter das zurück was lighterpack kann. Also, das widerspricht sich ja nicht, man kann ja beides anbieten.

Bearbeitet 9. November 2018 von zeank

[Dean]

Hmm, Ok dann habe Ich das mit den Globalen/Lokalen Listen anders in Erinnerung. 

Wenn du das suchen dynamisch machen willst, willst du dann das Inventar beim Nutzer cachen ? Wäre ja schon sinnvoll, da sonst permanent Anfragen geschickt werden würden. 

Was das "suchen" erleichtern würde im Dropdown, wäre das Kategorisieren. Also statt Alphabetischer Reihenfolge, zeigt dir das Dropdown erst alle Items der "Big 4" Kategorie an, danach Kleidung und danach den Rest oder ähnliches.