Back to Top

PHNETZ - Internetagentur

Marketing für Ihren Erfolg

Markieren

 

Markieren

Markieren bezeichnet das gezielte Hervorheben bzw. Auswählen von Text, Bild‑ oder UI‑Elementen, um sie anschließend zu bearbeiten, zu kopieren, zu formatieren oder zu analysieren. In digitalen Anwendungen geschieht das meist über Maus‑ oder Tastatureingaben, in speziellen Editoren oder über Programmier‑APIs.

 

Typische Anwendungsbereiche

Bereich
Zweck des Markierens
Textverarbeitung
Text auswählen, um Schriftart, Farbe, Formatierung zu ändern oder zu kopieren.
Code‑Editoren
Auswahl von Code‑Blöcken für Refactoring, Linting, Ausführen oder Kommentieren.
Grafik‑/Design‑Software
Auswahl von Objekten (Vektoren, Ebenen) für Transformation, Gruppierung, Styling.
Web‑Browser
Hervorheben von Text für Kopieren, Lesezeichen setzen, Kontextmenüs nutzen.
Daten‑Analyse‑Tools
Markieren von Zeilen/Spalten in Tabellen für Filter, Aggregation, Export.
E‑Learning / Präsentation
Hervorheben von Schlüsselbegriffen, Anmerkungen hinzufügen.

Technische Umsetzung (ohne Code‑Beispiele)

  1. Ereigniserfassung – Maus‑Down/Up, Drag‑Events oder Tastatur‑Shortcuts (Shift + Pfeiltasten).
  2. Hit‑Testing – Bestimmung, welches Element unter dem Cursor liegt (z. B. über Bounding‑Box‑Prüfung).
  3. Selection‑Model – Datenstruktur, die den Start‑ und Endpunkt der Auswahl speichert (z. B. SelectionStart, SelectionEnd).
  4. Render‑Phase – Visualisierung der Auswahl (z. B. farbige Hintergrund‑Overlay, gestrichelte Linie).
  5. Clipboard‑Integration – Kopieren/Einfügen über das System‑Clipboard, unterstützt von Betriebssystem‑APIs.
  6. Mehrfachauswahl – Durch Halten von Modifier‑Tasten (Ctrl/Command) können nicht‑zusammenhängende Elemente ausgewählt werden.
 

Usability‑Best‑Practices

Empfehlung
Nutzen
Sichtbare Feedback – Sofortige farbliche oder grafische Hervorhebung, damit Nutzer wissen, was markiert ist.
Reduziert Unsicherheit.
Präzise Auswahlgrenzen – Pixel‑genaue oder „snapping“‑Funktionen (z. B. an Wort‑ oder Zeilen‑Grenzen).
Vermeidet ungewollte Teil‑Markierungen.
Kontext‑abhängige Aktionen – Kontextmenü oder Toolbar erscheint nur bei gültiger Auswahl.
Verhindert überladenes UI.
Keyboard‑Support – Vollständige Steuerung per Tastatur für Barrierefreiheit.
Erhöht Zugänglichkeit.
Undo/Redo – Markieren und anschließend ersetzte Aktionen sollten rückgängig machbar sein.
Verbessert Fehlertoleranz.
Mehrfach‑ und disjunkte Auswahl – Möglichkeit, mehrere unabhängige Bereiche zu markieren.
Erweitert Flexibilität (z. B. Code‑Refactoring).

Typische Probleme und Lösungen

Problem
Ursache
Lösung
Ungewollte Auswahl von Leerzeichen
Hit‑Testing erfasst auch leere Bereiche.
„Word‑Snap“‑Funktion aktivieren, Auswahl nur auf Text‑Tokens beschränken.
Verlorene Auswahl beim Scrollen
UI‑Framework verwirrt Positionierung bei dynamischem Layout.
Auswahl‑Model an logische Indizes (Zeilen‑/Spalten‑IDs) koppeln statt an absolute Pixel.
Mehrfachauswahl wird überschrieben
Standard‑Behaviour ersetzt alte Auswahl bei neuer Auswahl.
Modifikator‑Tasten (Ctrl/Shift) abfragen, Auswahl‑Liste erweitern statt ersetzen.
Kopieren von formatiertem Text schlägt fehl
Clipboard‑API unterstützt kein Rich‑Format.
Rich‑Text‑Format (HTML, RTF) explizit in Clipboard speichern.
Auswahl in gesperrten Bereichen
UI‑Element hat user-select: none (Web) oder ist deaktiviert.
Deaktivieren der Sperre temporär, oder UI‑Design überarbeiten.

Barrierefreiheit

  • Screen‑Reader‑Kompatibilität – Auswahl sollte über ARIA‑Attribute (aria-selected) kommuniziert werden.
  • Hoher Kontrast – Markierungsfarbe muss genügend Kontrast zum Hintergrund bieten (WCAG‑2.1 AA).
  • Tastatur‑Navigation – Vollständige Auswahl via Shift + Arrow, Ctrl + A (Select All) usw.
 

Beispiele für Einsatz in bekannten Anwendungen

  • Microsoft Word – Text‑Selection‑Bar, Kontextmenü für Formatierung.
  • Adobe Photoshop – Marquee‑Tools (Rechteck, Ellipse) zum Auswählen von Bildbereichen.
  • VS Code – Mehrzeilige Auswahl, Block‑Selection (Alt + Drag).
  • Google Chrome – Text‑Markierung für Kopieren, Rechtsklick‑Menü.
  • Excel – Auswahl von Zellen, Zeilen, Spalten für Formeln, Diagramme.