Formulare
- Eingabefelder sollten über Tab bedienbar sein.
- Passende Tastatur zur Verfügung stellen (Mobil: Telefonnummer = Tastatur mit Zahlen)
- Schaltflächen mit Handlungsaufforderung sollten beschreibend sein.
- Automatisches Ausfüllen des Browsers
Autocomplete > Adresse > Google Maps - Unterscheidung zw. erforderlichen und optionalen Eingabefeldern, anstatt Pflichtfeldern.
In der Regel ist die Mehrheit der Eingabefelder eines Formulars obligatorisch. Daher sollten nur die Eingabefelder mit „Optional“ markiert werden, die tatsächlich optional sind. Da generell die Devise gilt, nur nach notwendigen Informationen zu Fragen, sollte die Anzahl der optionalen Eingabefelder gegen Null gehen bzw. auf ein oder zwei beschränkt sein. - Jedes Feld muss ein Label haben
Placeholder kann verwendet werden um weitere Erklärung oder ein Beispiel zu geben
Kann man bei verschiedenen Feldern wo es kein Sinn macht die störenden Passwortmanager unterbinden?
Themen
- Aktive Themen und Archiv in einzelne Tabs
- Unsere Themen Beschreibungen werden dem User zum Ändern oder neu Schreiben angezeigt. Auch bekommt man so mehr Orientierung. Aktuell ist da nur ein Leeres Feld.
- Thema und Beschreibung voneinander abheben:
- Der Mülleimer bedeutet Archivieren
- Der Pfeil Zurück bedeutet, wieder in die Liste mit aufnehmen
- Ich würde die Sprachen zum bearbeiten nebeneinander übersichtlicher finden. (Wo wählt man aus welche Sprachen man hat?) Automatisch die sprachen die genutzt werden oder kann ich auswählen für welche sprachen ich übersetzungen machen möchte
- Vision: Jede Abteilung kann eigene Themen haben
- Vison: Es gibt eine Default Beschreibung zum Anpassen (Wenn Thema Gehalt bei mehreren Abteilungen angezeigt wird, kann ich sie hier zentral über alle Abteilungen hinweg anpassen.
Datum & Uhrzeit
Lorum Ipsum
Datum
Vision
- Nur Perioden Auswahl anstatt einzelner Tage und Schnellauswahl möglich.
- Perioden werden bei hover so farblich hinterlegt, wie aktuell ein einzelner Tag.
- Perioden können sein:
– Volle Wochen Montag bis Sonntag, – Volle Monate oder Quatalsweise. – Bei Quatalsweise können anstatt der Tage Kalenderwochen angezeigt werden, damit es übersichtlicher ist
X für schließen, und schließen durch woanders hin klicken.
Zeitraum
Zeitraum
TT:MM:JJJJ – TT:MM:JJJJ
Zeitraum
TT:MM:JJJJ – TT:MM:JJJJ
Zeitraum
Startdatum
TT:MM:JJJJ
Startdatum
TT:MM:JJJJ
April 2025
Mo
Di
Mi
Do
Fr
Sa
So
31
1
2
3
4
5
6
7
8
9
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
27
28
29
30
-
-
-
-
-
-
Textfelder
Lorum Ipsum
Text Field
Ein Textfeld kann für kurze und allgemeine Texteingaben verwendet werden. Bei einem Textfeld das nicht Validiert werden muss, gibt es nur die zwei Zustände Normal und Active (X zum löschen weg?)
Normal
Email-Adresse:
max@mustermail.com
Optional
Email-Adresse:
Optional
max@mustermail.com
Auf weißem HG
Email-Adresse:
Optional
max@mustermail.com
Please enter valid email address
Text Area
Mehrzeiliges, oder wachsendes Eingabefeld, das längere Texte zulässt. Die Texte können auch Formatiert werden.
Scollbalken, wachsendes Textfeld, für was ist die Einrück-Funktion?
Active
Inhalt:
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
- Listenelement #1
- Listenelement #2
- Listenelement #3
Active
Inhalt:
Lorem ipsum sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Inhalt:
Search
Selectfelder
Ein Dropdown verbirgt die Auswahlmöglichkeiten und erfordert zwei Klicks zur Auswahl der gewünschten Option. Verwende nur dann ein Dropdown-Element, wenn die Auswahl mehr als fünf Optionen bietet oder wenn zu wenig Platz zur Verfügung steht und integriere eine Suchoption, wenn die Auswahl 20 Einträge deutlich übersteigt. Ansonsten stelle die Optionen als Radio- oder Checkboxen zur Verfügung, damit nur ein einzelnes Tippen oder Klicken erforderlich ist.
Auswahlmenü
Diese Variante kann je nach platz für bis zu einschließlich 5 Auswahlmöglichkeiten genutzt werden
Normal
Gender
Frau
Mann
Divers
Hover
Gender
Frau
Mann
Divers
Active
Gender
Frau
Mann
Divers
Checkboxen
Die Checkbox ist eine ankreuzbare (aktivierbare) Option. Sie kann entweder einzeln vorkommen, oder auch als Gruppe von Checkboxen. Bei einer Gruppe kann der Anwender keine, eine oder mehrere Checkboxen ankreuzen.
Radioboxen
Radiobuttons sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radiobuttons ausgewählt sein.
Dropdown-Listenelement
> [Klick] > Dropdown Menü slidet auf.. Zeigt alle 16 Themen in Alphabetischer Reihenfolge zur Auswahl an.
Ab 10 Auswahlpunkten wird als erster Riter oben noch ein zusätzliches Suchfeld angezeigt.
Durch Texteingabe in das Suchfeld oder in das Ursprüngliche Feld sortieren sich die Suchergebnisse.
Ich kann entweder das Wort zu ende schreiben und enter drücken oder oder mir eins aus der Sortierten oder unsortierten Liste aussuchen.
Klicke ich auf ein Thema schließt sich das Dropdowns und das Thema erscheint in der Spalte oben neben dem Pfeil.
Multiselect, eingabe bestätigen? Einzelne anklicken die
Funktion
Normalzustand
[Hover Feld]
Rahmen wird (grün glücklich 1)
[Hover Button]
Zoomt groß
[Klick Button]
Dropdownmenü slidet auf, Pfeil ändert die richtung
Mehr als 7 Listenpunkte
Label
1. Listenpunkt
2. Listenpunkt
4. Listenpunkt
5. Listenpunkt
6. Listenpunkt
7. Listenpunkt
[Hover Feld]
Rahmen wird grün
[Hover Button]
Zoomt groß
[Klick Button]
Dropdownmenü slidet auf, Pfeil ändert die richtung
2
Label
Suche...
1. Listenpunkt
2. Listenpunkt
3. Listenpunkt
Arbeits...
Arbeitsmittel
Arbeitsumgebung
Arbeitszeiten
Pfeil Ändert die richtung
Ab 10 Auswahlpunkten wird als erster Riter oben noch ein zusätzliches Suchfeld angezeigt.
Durch Texteingabe in das Suchfeld oder in das Ursprüngliche Feld sortieren sich die Suchergebnisse.
Ich kann entweder das Wort zu ende schreiben und enter drücken oder oder mir eins aus der Sortierten oder unsortierten Liste aussuchen.
Klicke ich auf ein Thema schließt sich das Dropdowns und das Thema erscheint in der Spalte oben neben dem Pfeil.
Inhaltsvarianten
Text
Icon mit Text
Smiley mit Text
Dropdown als Button
> [Klick] > Dropdown Menü slidet auf.. Zeigt alle 16 Themen in Alphabetischer Reihenfolge zur Auswahl an.
Ab 10 Auswahlpunkten wird als erster Riter oben noch ein zusätzliches Suchfeld angezeigt.
Durch Texteingabe in das Suchfeld oder in das Ursprüngliche Feld sortieren sich die Suchergebnisse.
Ich kann entweder das Wort zu ende schreiben und enter drücken oder oder mir eins aus der Sortierten oder unsortierten Liste aussuchen.
Klicke ich auf ein Thema schließt sich das Dropdowns und das Thema erscheint in der Spalte oben neben dem Pfeil.
Hier brauch man kein Label
Multi Select
> [Klick] > Dropdown Menü slidet auf.. Zeigt alle 16 Themen in Alphabetischer Reihenfolge zur Auswahl an.
Ab 10 Auswahlpunkten wird als erster Riter oben noch ein zusätzliches Suchfeld angezeigt.
Durch Texteingabe in das Suchfeld oder in das Ursprüngliche Feld sortieren sich die Suchergebnisse.
Ich kann entweder das Wort zu ende schreiben und enter drücken oder oder mir eins aus der Sortierten oder unsortierten Liste aussuchen.
Klicke ich auf ein Thema schließt sich das Dropdowns und das Thema erscheint in der Spalte oben neben dem Pfeil.
Multiselect, eingabe bestätigen? Einzelne anklicken die springen oben in die Spalte, speichern Button um feld nochmal einzuklappen / eingabe zu speichern
Für Multiselect
Icon mit Text