Freigeben über

Prinzipien der Benutzeroberfläche

In diesem Thema wird erläutert, wie Sie intuitive Benutzeroberflächen- und Benutzererfahrungsdesignprinzipien in Windows-Anwendungen implementieren.

Einführung

Entwickler berücksichtigen häufig nicht die Perspektive des Endbenutzers. Entwickler arbeiten hart daran, die Anwendung funktionsfähig zu machen. Kunden erwarten einfach nur, dass sie funktioniert und ihre Wahrnehmung der Software konzentriert sich auf diese Anforderung. Dies gilt insbesondere, wenn Sie Einzelhandelssoftware entwickeln oder etwas, das von nicht technisch versierten Personen verwendet wird. Entwickler müssen die Anforderungen des Endbenutzers während des gesamten Softwareentwurfsprozesses kennen.

Eine Softwareanwendung muss so einfach wie möglich zu navigieren und zu verwenden sein. Bei der Menge an Software, die erstellt wird, verfügen geschätzte 4 von 10 Softwareanwendungen über eine wirklich großartige UI, die dem Endbenutzer wirklich gefällt und die er sofort verwendet möchte.

Für Unternehmen wird eine massive Menge an interner Software erstellt. Ganz gleich, ob es intern oder unter der Betreuung eines Beraters entwickelt wird – oft wird ein Minimum an Zeit, Aufwand oder Geld in die Erstellung einer besseren Benutzeroberfläche investiert. Die Rolle des Designers ist im Entwicklungszyklus selten, insbesondere in der Welt der Windows-Anwendungen.

Es gibt einige grundlegende Regeln, die Sie befolgen müssen, um eine ansprechendere und bessere Benutzeroberfläche für Ihre Anwendung zu erhalten. Es erfordert nicht zu viel Zeit oder Geld auf Ihrer Seite und sorgt für eine gute Rendite von Investitionen.

Bevor wir fortfahren, unterscheiden wir zwischen Benutzeroberfläche und Benutzererfahrung, zumindest für den Umfang dieses Artikels. Die Benutzeroberfläche, oder UI (User Interface) bezieht sich auf die visuellen Elemente und Steuerelemente Ihrer Anwendung, während die Benutzererfahrung oder UX (User Experience) sowohl die Benutzeroberfläche als auch das Verhalten der Anwendung im Zusammenhang mit der Benutzeroberfläche sowie das „Gefühl“ umfasst, das der Benutzer von Ihrer App erhält. Es geht nicht nur um das Entwerfen einer ansprechenden Benutzeroberfläche, sondern auch darum, dass sie gut funktioniert.

Hier besprechen wir 20 Punkte des UX-Designs, die Sie einfach in Ihre Anwendungsentwurfsphase integrieren können. Das Ergebnis wird umfangreichere Anwendungen mit besserer intuitiver Funktionalität sein – eine „menschliche UX“. Wie wir alle wissen, muss die Windows Vista-Generation von Anwendungen anders aussehen und sich anders verhalten. Dieses Thema hilft Ihnen bei der Vorbereitung zukünftiger Anwendungen und bietet Ihren aktuellen Benutzern einen Eindruck von der Zukunft.

In den folgenden Abschnitten werden die Grundlagen des richtigen UI-Designs erläutert.

Die Grundprinzipien der richtigen Benutzeroberfläche (UI)

Eine professionell aussehende UX hängt von diesen vier Faktoren ab:

  • Abstand und Positionierung
  • Size
  • Gruppierung
  • Intuitive Oberflächen

Bei Versionen von Microsoft Visual Studio vor Version 8.0 war der Abstand und die Größenanpassung suboptimal. Ein 4x4- oder 8x8-Raster funktioniert nicht immer. Mit der Einbindung von SnapLines wurde der Prozess erheblich vereinfacht. Das Ausrichten einer Beschriftung mit einem Textfeld oder noch schlimmer, das Ausrichten mehrerer Beschriftungen mit den entsprechenden Textfeldern war in früheren Versionen von Visual Studio äußerst schwierig. SnapLines haben diesen Prozess erheblich vereinfacht.

In den folgenden Abschnitten werden vier der wichtigsten Aspekte des professionellen UX-Designs beschrieben.

Abstand und Positionierung

Der Abstand zwischen zwei Steuerelementen ist wichtig. Der folgende Screenshot zeigt ein schlecht gestaltetes Benutzerinformationseingabeformular – die beiden oberen Textfelder sind zu nah, die Liste darunter ist zu weit entfernt, und es gibt zu viel nicht verwendeten Platz im Formular.

Screenshot eines schlecht gestalteten Formulars.

Im folgenden Screenshot sehen Sie ein professioneller aussehendes Dialogfeld mit ordnungsgemäßen Abständen und entsprechend angepassten Steuerelementen. Dies ist das gleiche Formular wie im vorherigen Screenshot, aber es wurde geändert, um den von SnapLines empfohlenen Abstand zu verwenden. Es wird immer empfohlen, eine Beschriftung an der Textbasislinie des Textfelds oder eines anderen Steuerelements daneben auszurichten, anstatt dem tatsächlichen unteren Rand des Steuerelements. Die SnapLines bekommen eine andere Farbe, wenn die Ausrichtung erreicht wird, in der Regel nur ein paar Pixel über dem unteren Rahmen.

Screenshot eines besser gestalteten Formulars.

Obwohl es keine genauen Regeln für den Abstand gibt, bieten die SnapLines äußerst nützliche Richtlinien für den richtigen Abstand. Andere Tools, mit denen Sie den richtigen Abstand behalten können, sind die Layoutsteuerelemente unter der Toolboxgruppe „Container“. Das TableLayoutPanel-Element ist auch sehr hilfreich beim Erstellen von Dialogfeldern im Eingabeformularformat.

Size

Die gleichen Überlegungen gelten für die Größe. Wenn Sie eine Schaltfläche aus der Toolbox auf Ihr Formular ziehen – sie hat die perfekte Höhe und Breite. Die empfohlene maximale Breite (außer schwerwiegende Gründe stehen dem entgegen) besteht darin, die ursprüngliche Breite zu verdoppeln.

Wenn Sie das Fenster Ausführen im Startmenü oder das Dialogfeld Eigenschaften eines beliebigen Windows Explorer-Objekts betrachten, sind die Schaltflächengrößen „genau richtig“. Wenn Sie über eine sehr wichtige Funktion verfügen, die der Endbenutzer auf jeden Fall bemerken muss, gibt es andere Methoden als die Verwendung einer großen Schaltfläche oder gar nicht standardmäßiger Farben (mehr dazu später).

In der folgenden Abbildung sehen Sie drei Schaltflächen. Die erste Schaltfläche ist die am besten empfohlene Größe und ist die standardmäßige Größe, die beim Ziehen (oder Doppelklicken) aus der Toolbox erstellt wird. Manchmal müssen Sie die Schaltfläche vergrößern. Die zweite Schaltfläche zeigt eine große, aber dennoch akzeptable Größe an. Sie würde keine Unordnung bei der Anordnung anderer Steuerelemente schaffen. Die dritte Schaltfläche ist jedoch eine völlig inakzeptable Größe. Sie können sehen, dass sogar die Designbitmaps, die Windows zum Zeichnen von Designsteuerelementen verwendet, leicht verzerrt sind. Außerdem wird es schwierig, andere Steuerelemente intuitiv um sie herum auszurichten.

Bild von drei Schaltflächen, die von links nach rechts vergrößert werden.

Gruppierung

In der Regel enthält eine Anwendung viele Steuerelemente. Nur durch die ordnungsgemäße, intuitive Gruppierung können Sie alle Steuerelemente einfacher verwendbar machen. Funktionsbasierte oder kategorisierte Gruppierung erfolgt am besten durch Tabulatorsteuerelemente. Beispielsweise wären „Konten“, „Berichte“, „Mitarbeiter“ und „Projekte“ perfekte Kandidaten für Registerkarten in einer typischen Geschäftsanwendung. Gleichgeordnete Gruppierung – Steuerelemente, die zum gleichen Endergebnis beitragen – werden am besten als Gruppensteuerelementen eingerichtet. Die Verwendung von Panels mit Rahmen für eine solche Gruppierung wird nicht empfohlen. Gruppensteuerelemente ersparen Ihnen die zusätzliche Last eines Bezeichnungssteuerelements – insbesondere, wenn Ihre Untersteuerelemente selbsterklärend sind.

Gruppensteuerelemente innerhalb von Gruppensteuerelementen werden nicht empfohlen, es sei denn, es gibt maximal 2 oder 3 Steuerelemente innerhalb eines großen Gruppensteuerelements.

Intuitive Oberflächen

Sie sind der wichtigste Aspekt einer großartigen Benutzererfahrung. Eine intuitive Benutzererfahrung verringert die Notwendigkeit von Erklärungen. Der Benutzer weiß nur, was die Steuerelemente tun.

Ein wichtiges Thema im intuitiven Design ist die Farbcodierung. Ein gutes Beispiel ist in Windows XP dargestellt, in dem neue Soft-Square-Schaltflächen für Funktionen wie Navigation in Designanwendungen, das Dialogfeld Abmelden und Computer herunterfahren und andere angezeigt werden.

Die Farbe dieser Steuerelemente wurde basierend auf dem Schweregrad des Ergebnisses der Schaltfläche bestimmt, die gedrückt wird. Die Navigation ist grün, ähnlich wie eine grüne Ampel. Das Herunterfahren, was zu einem potenziellen Arbeitsverlust führen würde, wird rot wie ein Warnzeichen gefärbt. Halbkritische Schaltflächen wie „Abmelden“ oder „Ruhezustand“ sind gelb. Neutrale Schaltflächen, die keine kritischen Auswirkungen auf die Arbeitsprozesse des Benutzers haben, z. B. „Hilfe“, sind ein weiches Blau. Beim Erstellen einer benutzerdefinierten Benutzeroberfläche sollten diese Farbaspekte beachtet werden.

Ein sehr gutes Beispiel für die Erkennung von Inhalten nach Farben ist Microsoft Office OneNote. Die Registerkarten der Anwendung können auf unterschiedliche Farben festgelegt werden, während sie weiterhin im Wesentlichen wie ein ordnungsgemäßer Teil des gesamten Windows XP-Stildesigns aussehen.

Ein weiterer wichtiger Aspekt ist der Text in Ihren Anwendungen. Vor kurzem wurden verschiedene Anstrengungen unternommen, um die für die geschriebenen Anweisungen in der Windows-Software verwendete Sprache zu vereinfachen. Die Verwendung von Text innerhalb der Software wird später erläutert, beachten Sie jedoch die folgenden kleinen, aber wichtigen Details.

MSN Messenger verfügte im Dialogfeld Optionen über ein Kontrollkästchen „Webcam-Funktionen freigeben“. Entwickler und technikaffine Leute wissen, was das bedeutet, aber ein Anfänger könnte vielleicht denken, dass er einen anderen Benutzer am anderen Ende Ihres Chats seine Web-Cam verwenden lässt. In einer aktuellen Version haben sie es geändert zu: „Meine Webcam: Zulassen, dass andere sehen können, dass ich eine Webcam habe“. Dies ist perfekt für die Zielgruppe, die möglicherweise nicht über technische Kenntnisse verfügt und an einfache Sprache gewöhnt ist.

Während eine einfachere Sprache das Verständnis erleichtert, gibt es noch einen weiteren Vorteil. Wissenschaftliche Studien zeigen, dass unser Verstand besser mit einfacherer Sprache funktioniert, wenn man versucht, etwas Neues zu verstehen. Oft verarbeitet unser Gehirn Wörter wie „es“, „für“, „dass“ und andere häufig verwendete Wörter so schnell und mühelos, dass Wörtern, die sich abheben, wie im vorstehenden Beispiel „Webcam“ oder „andere“, mehr „Bandbreite“ zugewiesen werden kann.

Nachrichtenfeldtitel, GroupBox-Beschriftungen und andere solche Textblöcke erleichtern es Ihnen, die Funktion einer Gruppe von Steuerelementen mit nur wenigen Wörtern an den Endbenutzer zu übermitteln.

Intuitiv entsteht auch aus Vertrautheit. Beispielsweise ist die Platzierung der Schaltflächen OK und Abbrechen so einheitlich und gut in unseren Köpfen verankert, dass wenn ein Dialogfeld diese Schaltflächen in einer umgekehrten Reihenfolge (Abbrechen, dann OK statt OK und dann Abbrechen) anordnet, wir versehentlich Abbrechen drücken könnten. Nachdem Sie beispielsweise eine bestimmte Art und Weise für Abläufe, z. B. in Windows-basierten Anwendungen, für mehr als ein Jahr verwendet haben, entwickeln sich Gewohnheiten. Die Nutzung Ihrer Software wird durch die Verwendung von Branchenstandards (seien sie noch so inoffiziell) erleichtert.

In einer der frühen Windows Vista Preview-Builds wurden die Schaltflächen Minimieren, Maximieren und Schließen eines Fensters verändert. In früheren Versionen von Windows (insbesondere bei der Verwendung eines einzelnen Monitors) haben Sie eine Gewohnheit entwickelt, den Cursor in der oberen rechten Ecke des Bildschirms zu bewegen und darauf zu klicken. Dies führte immer zum Schließen des Fensters. Jetzt, in diesem speziellen Build von Windows Vista, gab es ungefähr 8 Pixel mehr Platz zwischen der Schaltfläche Schließen und dem rechten Rand des Fensters. Der zusätzliche Platz gab einen coolen Look aus (und war wahrscheinlich notwendig für die coole Leuchtanimation, mit welcher die Schaltfläche ausgestattet war), aber er war irritierend, weil er es den Benutzern nicht ermöglichte, offene Fenster so einfach zu schließen. Ihre Gewohnheiten zu verändern kann schwierig sein. Glücklicherweise wurde dieses Problem im folgenden Build behoben. Jetzt gibt es immer noch Platz zwischen dem Rahmen des Fensters und der Schaltfläche Schließen, aber durch Klicken auf diesen Bereich wird das Fenster geschlossen.

Ein sehr wichtiger Faktor des intuitiven Designs ist die „geistige Bandbreite“, die Menge an Zeit, die benötigt wird, um etwas zu verstehen, das man verwendet. Je niedriger die „Bandbreitennutzung“ ist, desto besser ist die Benutzererfahrung.

Dies sind kleine Dinge, die zur „Erfahrung“ der Verwendung einer Softwareanwendung beitragen. Die folgenden Beispiele enthalten Tipps zur Verbesserung Ihrer Anwendungen mit echten Tipps und Tricks.

20 Tipps für eine bessere, funktionale Benutzererfahrung

Das Ziel einer besseren Benutzererfahrung besteht darin, eine einfachere, leichtere, funktionale UI zu haben, die auch noch gut aussieht. Diese Tipps helfen Ihnen, Ihre Benutzeroberfläche effektiver zu gestalten.

Verwenden von Standards

Die etablierten Standards jeder Softwareumgebung, ob auf Betriebssystemebene, Markenebene oder Anwendungsebene, sind sehr wichtig. Neben dem Branding fungieren die Standards als sprichwörtliches Schema im Sinne des Benutzers. Wenn der Benutzer lange Zeit mit einer Softwareanwendung arbeitet, erhöht sich automatisch seine Produktivität aufgrund der wachsenden Vertrautheit.

Bevor wir Standards diskutieren, besprechen wir zunächst, was genau diese Standards sind. Standards umfassen alles von der Anordnung von Steuerelementen in den Dialogfeldern auf eine bestimmte Weise, wie die Schaltflächen OK und Abbrechen, der Form der Benutzeroberfläche, wie abgerundete Ecken oben am Fenster, wie in Windows XP-Dialogfeldern, bis zu Formatvorlagen von Symbolen, Formatvorlagen anderer Grafiken, interaktivem Verhalten Ihrer Anwendung usw.

Wenn Ihre Anwendung in eine bestimmte Nische fällt, kann es besser sein, einen anderen Satz von Standards zu befolgen. Wenn Ihre Anwendung beispielsweise die Anwendung oder das Add-On von Office OneNote 2003 unterstützt, ist es ratsam, die Stile von Benutzeroberflächen und die Interaktivitätsstandards von Office und insbesondere von OneNote selbst zu befolgen. Dies umfasst die Verwendung der Office-Befehlsleisten anstelle der Standardsymbolleisten und anderer solcher Dinge, sowohl visueller als auch Verhaltensfunktionen. Wenn Ihre Anwendung Teil der Microsoft Visual Studio .NET-Kategorie sein soll, verfügen Sie über einen separaten Satz von Standards. In der Tat veröffentlichen Unternehmen wie Microsoft für solche Add-On- oder Supportanwendungen schriftliche Richtlinien. Beachten Sie außerdem, dass manchmal Grafik- und Designkonzepte geschütztes geistiges Eigentum sind. Überprüfen Sie immer die ordnungsgemäßen Unterlagen, um sicherzustellen, dass Sie über die Berechtigung zum Erstellen solcher Designs verfügen.

Ein drittes Beispiel für Standards wäre die Tablet PC-Umgebung. Diese Standards überschreiten die Grenzen zwischen Betriebssystemrichtlinien und Anwendungsrichtlinien. Die Tablet PC SDK-Dokumentation enthält einige sehr hilfreiche Informationen im Thema "Planen Ihrer Anwendung". Im Gegensatz zu den Office 2003- oder Visual Studio-Richtlinien wirken sich diese Entwurfsempfehlungen direkt darauf aus, wie der Benutzer mit Ihrer Anwendung interagiert und wie sie sich wiederum verhalten soll. Wenn Sie beispielsweise angedockte Fenster in Ihrer Anwendung haben, empfiehlt die Dokumentation, dass Sie sicherstellen, dass diese erkennen können, wann die Bildschirmausrichtung geändert wird, damit die angedockten Fenster sich bei Bedarf in einem Hoch- oder Querformat ordentlich neu organisieren können. Auch wenn Sie Ihre Anwendung nicht spezifisch für Tablets entwerfen, sollten Sie diese Richtlinien durchgehen.

Mit dem Aufstieg von Smart Clients überschreiten Anwendungen nun die Grenzen zwischen unterschiedlicher Hardware – normale PCs, Tablet-PCs, Mobile oder Ultra Mobile-Geräte, Media Center-PCs usw. Jedes Gerät erfordert eine andere (oder zusätzliche) Reihe von Standards, die befolgt werden müssen.

Wenn Anwendungen die Standards auf Betriebssystem- oder Anwendungsebene gemeinsam nutzen, fühlen sich die Benutzer mit der Software wohler, was das Erlernen und Verwenden erleichtert. Dies führt zu einer direkten Steigerung der Produktivität. Benutzer möchten mit neuer Software so schnell wie möglich produktiv werden können.

Aufmerksamkeit auf wichtige Schaltflächen lenken

Manchmal müssen Sie den Benutzer auch dann auf die wichtigsten Schaltflächen aufmerksam machen, wenn sich nur vier oder fünf weitere Schaltflächen um sie herum befinden. Wenn Sie mit der Größe, Farbe oder Schriftart experimentieren, würden Sie Standards durchbrechen, was nicht empfohlen wird. Stattdessen können Sie ein paar einfache Tricks verwenden, um dieses Ziel zu erreichen.

Der erste besteht darin, die anderen nicht kritischen Schaltflächen wie in der folgenden Abbildung dargestellt in LinkLabels umzuwandeln. Auf diese Weise weiß der Benutzer, dass diese Links eine Aufgabe erfüllen, aber seine Aufmerksamkeit geht zuerst auf die Schaltfläche, die hervorsticht, ohne dass Standardentwurfsrichtlinien unterbrochen werden.

Abbildung von drei Schaltflächen, die in Linkbezeichnungen konvertiert wurden.

Der zweite besteht darin, die kritische Schaltfläche an erster Stelle in der Zeile zu platzieren – entweder links für horizontale Layouts, wie in der folgenden Abbildung dargestellt, oder oben für vertikale Layouts. Beachten Sie, dass sich dies je nach Kulturkreis des Zielbenutzers ändern kann. Es kann unter Umständen besser sein, wenn Sie die betreffende Schaltfläche ganz rechts platzieren, wenn Ihre Anwendung in einer Sprache ist, die von rechts nach links geschrieben wird.

Abbildung von drei Schaltflächen, bei denen sich die kritische Schaltfläche ganz links in einem horizontalen Layout befindet.

Das empfohlene Vorgehen zielt darauf ab, standardmäßig den Fokus zu erhalten. Beispielsweise sollte in einem Bestätigungsdialogfeld zum Löschen die Option Nein hervorgehoben werden, da dadurch verhindert wird, dass der Benutzer versehentlich etwas löscht.

Vereinfachen der Erkennung mit Symbolen

Symbole, insbesondere die Symbole für Windows XP und Office 2003, und Symbolleistenbitmaps beschleunigen die Wahrnehmung der Benutzeroberfläche und die Aufgabe, die der Benutzer ausführen muss.

Wenn z. B. das Ausrufezeichen, das meist im Meldungsfeld angezeigt wird, sehen, sind Sie sich sofort der Risikostufe bewusst, die diesem Steuerelement neben diesem Symbol zugeordnet ist. Ebenso kann es herausfordernd sein, die Steuerelemente zu finden, nach denen Sie suchen, wenn Ihre Anwendung viele Steuerelemente enthält, unabhängig davon, wie korrekt sie angeordnet sind.

In Windows XP Service Pack 2 wurde dem Systemsteuerungs-Applet Systemeigenschaften eine aktualisierte Registerkarte mit dem Namen „Automatische Updates“ hinzugefügt. Es gibt vier Optionen: Updates automatisch herunterladen, Updates herunterladen, den Benutzer aber entscheiden lassen, wann sie installiert werden sollen, den Benutzer benachrichtigen, ob Updates verfügbar sind, aber nicht den Download starten und automatische Updates vollständig deaktivieren.

Ein neuer PC-Benutzer weiß möglicherweise nicht, was diese Updates sind, und weiß möglicherweise nicht, welche Option am besten zu wählen wäre. Daher hat Microsoft ein grünes Schildsymbol mit einem großen Häkchen neben der am meisten empfohlenen Option, die eine „sichere“ Option darstellt, eingeführt und ein rotes Schildsymbol mit einem großen "x" neben der Option, die für den Benutzer potenziell schädlich wäre. Dies ist in einer kritischen Situationen sehr hilfreich, insbesondere, wenn der Benutzer keine Zeit hat, zu viel Text zu lesen.

Im gleichen Systemeigenschaften-Applet verfügt jede Registerkarte über mehrere GroupBox-Objekte mit unterschiedlichen Steuerelementen für unterschiedliche Aufgaben. Eine relative Grafik wird neben jeder Gruppe platziert, welche die Aufgabe der Steuerelementgruppe leicht erkennen lässt. Diese Art von grafischem Code ähnelt der Farbcodierung auf physischen Akten oder Parkplätzen. Hier wird das gleiche Prinzip wie in einem Magazinartikel verwendet, zumindest einige visuelle Elemente zu haben, um das Interesse des Lesers zu halten.

Die Auswahl des richtigen Symbols ist ebenfalls wichtig. Microsoft stellt viele Standardgrafiken als Teil von Visual Studio 2005 bereit. Diese wären die beste Wahl. Wenn Sie eigene Symbole erstellen, empfiehlt es sich dringend, die Standards auf Betriebssystem- oder Anwendungsebene für diese Grafiken zu befolgen, wie im vorstehenden Abschnitt Standards verwenden erwähnt.

Die Windows-Interaktionsrichtlinien zur Benutzererfahrung enthalten einen sehr hilfreichen Leitfaden zum Erstellen von Symbolen im Windows-Stil.

Vereinfachen der Erkennung mit Kopfzeilen

Kopfzeilen sind die perfekte Möglichkeit, das gesamte Dialogfeld in einem einzelnen Satz (und optional einer Grafik) zu erläutern. Manchmal können Kopfzeilen ihnen sogar helfen, navigations- und befehlsinterne Befehle zu berücksichtigen. Kopfzeilen funktionieren effektiver als normale Beschreibungsbezeichnungen, da sie das erste sind, was ein Benutzer sieht, wenn das Dialogfeld angezeigt wird.

Die Windows Installationsassistenten sind vielleicht die beliebtesten Kopfzeilen: Ein einfaches Symbol ganz rechts; eine Titelbeschriftung, die das Dialogfeld beschreibt (z. B. Installationsordner auswählen) und eine Unterüberschrift, die den Zweck des Dialogfelds beschreibt (z. B. den Ordner auswählen, in dem die Softwaredateien installiert werden sollen).

Angenommen, wir haben eine typische Geschäftsanwendung mit einem Abschnitt Konten. Im Anschluss an das von Windows Vista geschaffene Designparadigma können wir unternehmenskritische Informationen und zugehörige Befehle in der Kopfzeile (oder Fußzeile, wenn das Szenario sie erfordert) selbst bereitstellen. Unser Benutzer hat die Kontodatei für „Big Company“ geöffnet, und die Kopfzeile würde ungefähr wie im folgenden Screenshot dargestellt aussehen.

Screenshot eines Dialogfelds, das eine detaillierte Fußzeile enthält.

Der folgende Screenshot zeigt ein Beispiel für eine detaillierte Kopfzeile in einem Dialogfeld.

Screenshot eines Dialogfelds, das eine detaillierte Kopfzeile enthält.

Ebenso können Sie vermeiden, dass Sie Aufgabenbereiche im Windows XP-Stil hinzufügen müssen, insbesondere wenn Sie nur wenige Befehle haben, die viel vertikalen Platz verschwenden würden, indem Sie diese Befehle in die Kopfzeile verschieben.

Beim Entwerfen von Kopfzeilen sollten Sie einige Dinge beachten:

  • Stellen Sie sicher, dass sich die Hintergrundfarbe von der Hintergrundfarbe des Dialogfelds unterscheidet. Häufig, wird eine weiße Kopfzeile über einem systeminternen Windows-Steuerelement mit standardmäßiger Flächenfarbe verwendet. Wenn Sie aber wirklich sicherstellen möchten, dass keine speziellen Designs oder benutzerdefinierten Farben Ihre Kopfzeile verwischen, zeichnen Sie einen LinearGradient mit der Farbe Color.FromKnownColor mit den Farben ControlLight und ControlDark.
  • Behalten Sie, wenn möglich, eine Höhe der Kopfzeile unter 150 Pixel bei. In der Regel ist eine Höhe von 100 oder 120 ausreichend. Stellen Sie generell sicher, dass sie weniger als 1/4 der Höhe des gesamten Formulars ist.
  • Wenn Sie eine direkte Bearbeitung für Informationen hinzufügen möchten, die oben in der Kopfzeile angezeigt wird, ersetzen Sie die LinkLabel dynamisch durch ein Textfeld, und tauschen Sie sie erneut aus, sobald die Bearbeitung abgeschlossen ist.
  • Wenn Sie eine Titelbezeichnung mit einer Schriftart mit einer Größe von mehr als 10 Pt. haben, verwenden Sie Arial oder Franklin Gothic Medium. MS Sans Serif sieht zu zerklüftet und unprofessionell aus. Franklin Gothic Medium ist die Empfehlung in der Dokumentation zu Windows XP-Designrichtlinien. Verwenden Sie für Anwendungen, die für Windows Vista vorgesehen sind, die Schriftart Segoe UI, welche die Standardschriftart des Systems ist.

Verwenden von benutzerdefinierten Meldungsfeldern

Die im standardmäßigen Windows-Meldungsfeld verfügbaren Optionen sind sehr eingeschränkt. Wenn Sie Ihren Benutzern eine Frage stellen müssen, die nicht mit einem einfachen Ja/Nein oder OK/Abbrechen beantwortet werden kann, wird es kompliziert.

Windows-Anwendungen werden inzwischen aufgrund der hohen Anzahl von nicht technikaffinen Benutzern einfacher zu verwenden. Manchmal kann es viel einfacher sein, Schaltflächen mit benutzerfreundlicheren Texten und sogar einigen zusätzlichen Steuerelementen bereitzustellen, z. B. LinkLabels, um die Aufgabe einfacher zu erledigen.

Das Microsoft .NET Framework erleichtert die Implementierung benutzerdefinierter Dialogfelder. Durch das Zuweisen einiger Eigenschaften in Ihrem benutzerdefinierten Dialogfeldformular oder mit einer einzelnen Codezeile kann Ihr Formular wie ein Standardmeldungsfeld funktionieren. Legen Sie in einem Schaltflächenklickereignis die DialogResult-Eigenschaft auf DialogResult.Ok oder DialogResult.Cancel fest. Verwenden Sie die ShowDialog([OwnerForm])-Methode aus dem übergeordneten Formular. Diese Methode gibt den DialogResult-Wert zurück.

Sie können alle DialogResult-Mitglieder verwenden. Dieselben Optionen werden von der standardmäßigen MessageBox.Show-Methode verwendet.

Alternativ können Sie einfach die AcceptButton-Eigenschaft des Dialogfelds auf btnOK und die CancelButton-Eigenschaft auf btnCancel festlegen. Dadurch werden die Enter- und die Esc-Taste automatisch den jeweiligen Click-Ereignissen der Schaltflächen btnOK und btnCancel zugeordnet.

Hier sind einige Tipps zum Aufpeppen Ihrer benutzerdefinierten Dialogfelder:

  • Stellen Sie für komplizierte Themen Links zu lokaler oder Onlinehilfe mit einem LinkLabel bereit, das „Weitere Informationen“ unter der entsprechenden Beschriftung angibt.
  • Verwenden Sie anstelle von den Schaltflächen Ja/Nein/Abbrechen Texte, die das Ergebnis des Klickens auf die Schaltfläche deutlich angeben, z. B. „Datei speichern und beenden“, „Beenden ohne Speichern“ und „Nicht beenden“. Bleiben Sie jedoch, wenn möglich, bei den Standardschaltflächen Ja/Nein, /Abbrechen und vergleichbaren. Vertrautheit sorgt für eine hohe Produktivität.
  • Halten Sie den Abstand zwischen 50 Pixeln auf der linken Seite (oder rechts, abhängig von den Zielkultureinstellungen), und fügen Sie ein Symbol hinzu, welches das Szenario für das Dialogfeld repräsentiert. Wenn es sich um ein Informationsdialogfeld handelt, können Sie das Symbol "i" verwenden, das von Standardmeldungsfeldern verwendet wird. Wenn es sich um ein Sicherheitsdialogfeld handelt, können Sie ein Sperrsymbol oder ein Schlüsselsymbol verwenden. Visual Studio 2005 enthält einige hochwertige Grafiken.
  • Stellen Sie immer sicher, dass Sie die richtige Tastaturnavigation für diese Schaltflächen bereitstellen. Benutzer verwenden die Tastenkombinationen für Meldungsfelder (z. B. O für Ok, Y für Ja, C für Abbrechen usw.). Sie würden es sicherlich ärgerlich finden, wenn Ihr benutzerdefiniertes Dialogfeld diese nicht verwenden würde.

Alternative Befehle einschließen

Zwei wichtige Faktoren diktieren die Notwendigkeit alternativer Eingabemethoden: Frustration und Faulheit. Frustration ist eine zu häufig auftretende Sache für Computerbenutzer. Wenn jemand frustriert sind, möchte er, dass seine Aufgabe schnell erledigt wird. Ein zusätzlicher Klick oder eine zusätzliche Wartezeit von ein paar Sekunden erzürnt eine Person unter Stress. Sie können sich sicherlich in diese Situation hineinversetzen. Faulheit drängt Sie oft dazu, eine Aufgabe entweder nur mit der Tastatur oder Maus zu beenden, je nachdem, was Sie gerade verwenden. Aber nicht nur wegen dieser beiden Faktoren, sondern auch der allgemeinen Erleichterung sind alternative Eingabemethoden hilfreich für den Benutzer.

Wenn Sie beispielsweise über ein Listenfeld mit zwei Schaltflächen verfügen – „Hinzufügen“ und „Entferne“"– sollten Sie auf beiden Seiten ein Kontextmenü für dieses Listenfeld mit Menübefehlen analog zu diesen Schaltflächen hinzufügen. Dies gibt dem Benutzer die Möglichkeit, die Methode auszuwählen, die er am besten findet. Wie der Status der Windows Vista-Benutzererfahrungsrichtlinien beschreibt, verwenden Anfänger oft Kontextmenüs und erwarten, dass sie überall erscheinen, wo sie mit der rechten Maustaste klicken.

Ebenso verwenden wir visuelle Steuerelemente für Text- oder numerische Eingaben. Beispielsweise werden Schieberegler verwendet, um ganze Zahlen anzugeben, und Kalendersteuerelemente werden für die Datumseingabe verwendet. Manchmal kann es einfacher sein, Eingaben nur durch Eintippen einzugeben. Es kann für den Benutzer häufig einen Unterschied machen, wenn Sie ein numerisches Hoch-Runter-Steuerelement hinzufügen, das mit einem Schieberegler verknüpft ist, oder ein DateTimePicker anstelle des Kalendersteuerelements verwenden.

Behandeln kritischer Aktionen

Beim Ausführen einer kritischen, nicht wiederherstellbaren Funktion empfiehlt es sich im Allgemeinen, ein Meldungsfeld-Popup zu erstellen, um die Aktion zu bestätigen. Setzen wir noch einen drauf. Im folgenden Screenshot können Sie ein ähnliches benutzerdefiniertes Meldungsfeld sehen, aber mit einem zusätzlichen Vorteil, nämlich einem Zeitgeber, der mithilfe einer Statusleiste visuell angezeigt wird.

Screenshot eines Dialogfelds für kritische Aktionen.

Es gibt einige szenariospezifische Variationen, die Sie verwenden können. Wenn die auszuführende Aktion sehr kritisch ist (von der Überladung eines Kernkraftwerks bis zum endgültigen Löschen von Dateien), sollte die Standardaktion nach Ablauf des Timers abgebrochen werden. Das Dialogfeld sollte nicht entfernt werden, sondern die Beschriftung sollte sich ändern, um anzuzeigen, dass die Aktion abgebrochen wurde. Der Benutzer kann den Befehl oder den Abbruch bestätigen.

Stellen Sie immer sicher, dass Schaltflächen, die kritische Vorgänge ausführen, klar gekennzeichnet sind. Verwenden Sie immer klaren Text, der die Aktion genau beschreibt. Wenn die Aktion das Löschen von Dateien ist, schreiben Sie nicht „Dateien aus Repository entfernen“, sondern schreiben Sie „Dateien aus Repository löschen“. Wenn beim Arbeiten mit Dateilisten ein Menübefehl „Löschen“ die ausgewählten Dateien von der Festplatte selbst löscht (im Gegensatz zum Entfernen aus der Dateiliste), sollten Sie den kritischen Charakter dieses Vorgangs richtig betonen und explizit darauf hinweisen, dass die Aktion die Dateien dauerhaft löscht.

Jemand sagte einmal: "Du bist so gut wie deine schlechteste Arbeit." Dasselbe gilt für Softwareanwendungen. Eine einzige schlechte Erfahrung mit Ihrer App kann einen starken negativen Eindruck bei dem Benutzer hinterlassen. Um sicherzustellen, dass dies nicht geschieht, ist eine Sache, die Sie tun können, sicherzustellen, dass es bei einem Absturz der Anwendung geordnet abläuft. Wenn Sie eine Datenwiederherstellung hinzufügen oder dem Benutzer erlauben, eine Kopie der Daten zu speichern, kann dies ein großes Plus sein. Der Benutzer sollte ordnungsgemäß benachrichtigt werden, wenn die Anwendung abstürzt. Ein JIT-Debugger oder ein Dialogfeld für kritische Fehler ist nicht gut. Die Erläuterung, wie Abstürze behandelt werden sollten, geht über den Umfang dieses Artikels hinaus, aber ich empfehle, dass ein einfaches Dialogfeld, das sich beim Benutzer entschuldigt und ihn über die Situation informiert (und möglicherweise einen Link zu weiteren Informationen zur Wiederherstellung von diesem Absturz enthält), für den Benutzer sehr hilfreich wäre.

Wenn Sie noch einen Schritt weiter gehen möchten, können Sie das tun, was eine meiner bevorzugten Grafikdesignanwendungen macht. Wenn sie abstürzt, wird ein Wiederherstellungsdialogfeld angezeigt, in dem Sie eine separate Kopie der Datei, an der Sie gearbeitet haben, speichern können, und dann ein Feedbackdialogfeld, in dem Sie Informationen zum Absturz eingeben (persönliche Informationen optional, natürlich) und an die Ersteller senden können.

RadioButtons oder ComboBoxes?

Auf den ersten Blick scheint die Methode für die 1:n-Auswahl nicht so schwierig oder gewichtig zu sein. Manchmal kann sie es aber doch sein, insbesondere wenn es sich bei dem Szenario um eine Anwendung handelt, die für zeitkritische Arbeit verwendet wird.

Sehen wir uns ein Beispiel aus dem echten Leben an. Microsoft hat kürzlich eine Vorschauversion einer Grafikanwendung veröffentlicht, Expression Graphics Designer (früherer Codename „Acrylic“). Ich hatte etwa 20 Grafikobjekte, denen ich in dieser Anwendung eine bestimmte Eigenschaft separat zuweisen musste. Es war ein eintöniger Prozess. Dazu musste ich das Objekt auswählen, auf die Schaltfläche klicken, um das Einstellungsfenster aufzurufen, und die Optionen festzulegen. Für eine solche Einstellung musste eine von zwei Optionen aus einem ComboBox-Steuerelement ausgewählt werden, wie Sie im folgenden Screenshot sehen können.

Screenshot des Dialogfelds „Rändertextur” für Ausdrucksgrafik-Designer.

Wenn Sie die ComboBox-Liste öffnen und das zweite Element (aus nur zwei Elementen) auswählen müssen, kann es wirklich lästig sein. Was wir im Allgemeinen nicht realisieren ist die Zeit, die für die Anzeige der Dropdownliste benötigt wird. Es kann viel Zeit verschwenden und frustrierend sein. Dies könnte einfach gelöst werden, indem ein GroupBox-Steuerelement mit zwei RadioButtons angelegt wird, insbesondere, wenn so viel Platz verfügbar ist. Ich habe ähnliche Probleme in Anwendungen wie CorelDRAW, Microsoft Access und anderen gefunden.

Neben der Zeitverschwendung aufgrund der Dropdownanimation verschwendet sie auch unsere „mentale Bandbreite“. Mit zwei „immer sichtbaren“ RadioButtons würde unser Verstand die Position zum Klicken für den Cursor unterbewusst kennen. Mit dem ComboBox-Steuerelement wird es erst verarbeitet, nachdem die Liste geöffnet wurde. Es mag zwar zu unwichtig erscheinen, aber es ist sehr wichtig.

Manchmal ist es besser, RadioButtons zu verwenden, insbesondere wenn Sie über 4 Optionen oder weniger verfügen.

Stören Sie niemals den Benutzer!

Außer dem Platzieren einer Waffe an seiner Schläfe, ist es das Destruktivste, was ein Entwickler dem Benutzer antun kann. Wenn Ihre Anwendung unnötig oder anderweitig den Benutzer unterbricht, während er mit einem Meldungsfeld oder einem Taskleistenblitz an einer anderen Anwendung arbeitet, erhalten Sie negative Punkte vom Benutzer.

Taskleistenblitze können natürlich nützlich sein, sollten aber nur aufgerufen werden, wenn der Prozess ihrer Anwendung Eingaben vom Benutzer erfordert, um fortzufahren, oder wenn Sie etwas Wichtiges für die Übermittlung an den Benutzer haben. Wenn der Benutzer die Taskleiste beim automatischen Ausblenden beibehalten hat, kann eine blinkende Taskleistenschaltfläche verhindern, dass der Benutzer auf die Statusleiste oder andere niedrig verankerte Steuerelemente zugreift, da sich die Taskleiste darüber befindet und erst dann wieder ausgeblendet wird, nachdem der Benutzer auf die blinkende Schaltfläche geklickt hat.

Screenshot eines Toast-Fensters.

„Popupfenster“ (siehe Abbildung 10), berühmt durch Chatclients wie MSN Messenger, sind eine großartige Lösung, um den Benutzer über etwas zu informieren, ohne zu nerven oder den Arbeitsablauf zu stören. Es gibt einen tollen Artikel von Bill Wagner zum Erstellen von Popupfenstern. Es ist eine gute Richtlinie (und höflich), die Popups anderer Anwendungen nicht zu stören. Die Blockierung solcher Fenster können lästig und unproduktiv sein. Eine Lösung besteht darin, das vom Betriebssystem bereitgestellte ToastSemaphor-Mutex zu verwenden, um Popupkonflikte zu vermeiden.

Manchmal müssen Sie möglicherweise mehrere Elemente durch das Popup anzeigen. Das Öffnen von 3 oder mehr Popups wäre nicht wirklich ratsam. Stattdessen wäre es besser, sie einzeln zu durchlaufen, indem ein Popup nach dem anderen eingeblendet/ausgeblendet wird. Microsoft Outlook implementiert eine ähnliche Lösung, wenn der Benutzer über eingehende E-Mails benachrichtigt wird.

Status des Fortschritts anzeigen

Häufig gibt es Aufgaben, die erfordern, dass der Benutzer warten muss. Natürlich ist das eine Sache, die der Benutzer einfach hasst. Aber schlimmer ist noch, wenn sie warten, ohne zu wissen, was passiert. Manchmal muss Ihre Anwendung möglicherweise eine Verbindung mit einem Webdienst oder einem Remotecomputer herstellen oder große Datenblöcke verarbeiten. Unabhängig vom Grund sollte der Benutzer darüber informiert werden oder zumindest vage wissen, was unter der Haube geschieht. Es gibt verschiedene Methoden, die das auf der Grundlage der Situation tun.

Wenn Sie eine Verbindung mit einem weit entfernten Objekt wie einem Webdienst oder einem Internetverbindungsserver herstellen, empfiehlt es sich, ein einfaches Statusdialogfeld anzuzeigen (siehe folgende Abbildung) oder eine Statusleiste, die in der Statusleiste gehostet wird. Eine begleitende Bezeichnung sollte den aktuellen Status des Prozesses beschreiben. Wenn Sie z. B. eine Verbindung mit einem Webdienst herstellen, um Daten zu verarbeiten, schreiben Sie einfach „Herstellen einer Verbindung mit Webdienst...“ oder „Bitte warten, verarbeitet gerade... " Wenn dieser Prozess synchron ist, empfiehlt es sich, alle Steuerelemente zu deaktivieren, auf die der Benutzer zugreifen kann, bis der Prozess abgeschlossen wurde, oder nur den Fortschritt als modales Dialogfeld anzeigen.

Screenshot eines Dialogfelds für die Statusleiste.

Es wird dringend empfohlen, die Statusleistenart auf den Marquee-Modus festzulegen, wenn Sie eine Statusanzeige verwenden und die Verarbeitungszeit unbekannt ist oder wenn Sie keinen Maximalwert haben.

Eine andere Methode, die beliebt wird, ist ein festes Popupfenster, das den Fortschritt anzeigt. Microsoft AntiSpyware Downloader/Updater oder die Norton AntiVirus-E-Mail-Scan-Popups sind gute Beispiele dafür. Sie sollten natürlich nur für asynchrone Prozesse verwendet werden. Andernfalls fühlt sich der Benutzer möglicherweise beunruhigt. Solche Fenster eignen sich am besten für die Hintergrundverarbeitung, z. B. das Herunterladen eines Updates oder das Ausführen einer geplanten Aufgabe und sollten niemals auf „Immer oben“ festgelegt werden.

Vereinfachung komplexer Schritte mit Assistenten

Es ist sicher davon auszugehen, dass ein typischer Benutzer, wenn er mit einer Vielzahl von Steuerelementen in einem einzigen Formular konfrontiert wird, verwirrt ist. Manchmal hilft keine Gruppierung, Größenanpassung oder Abstände, wenn Sie zu viele wichtige Steuerelemente haben.

Ein Assistent ist das Beste für solche Szenarien. Sie können Steuerelemente nach Aufgaben oder Kategorien aufteilen und in separaten Schritten platzieren. Dies kann dem Benutzer helfen, fokussiert zu bleiben und nicht von der Aufgabe entmutigt zu werden. Sie können schritt- oder aufgabenspezifische Hilfe mit einer Hilfeschaltfläche bereitstellen. Weitere Informationen finden Sie unter Assistenten.

Assistenten sind auch eine gute Möglichkeit, um die Erstkonfiguration Ihrer Anwendung einzurichten. Viele Anwendungen verwenden einen solchen Assistenten, um eine personalisierte Konfiguration direkt nach Abschluss des Setups oder bei der ersten Verwendung einzurichten. Ein solcher anfänglicher Assistent sollte ggf. auch optional gemacht werden. Wenn der Benutzer ihn zu einem beliebigen Zeitpunkt abbricht, werden die nicht angegebenen Einstellungen zu Standardwerten. Wenn Sie den Assistenten etwas grafisch gestalten können (siehe Abschnitt Hübsche Grafiken verwenden), wird die Konfiguration viel leichter.

Treffen Sie den richtigen Ton

In den Windows-Interaktionsrichtlinien zur Benutzererfahrung wurde ein sehr wichtiges Argument zum „Textton“ gebracht. Dies ist der Eindruck und das Gefühl, das der Text in Ihrer Anwendung verbreitet. Dies kann alles von einer einfachen QuickInfo bis hin zu einem Steuerelement für Anweisungsbezeichnungen sein.

Vorstehend haben wir die Änderung von Text in der Webcam-Option in MSN Messenger besprochen. Das wird als angemessener Textton bezeichnet. Beim Umgang mit nicht technikaffinen Benutzern oder Anfängern hat der Text eine ganz andere Bedeutung.

Wenn Sie „Zielpfad“ über ein Textfeld in einer selbst extrahierenden Anwendung schreiben, kann ein technikaffiner Benutzer leicht wissen, dass man etwas wie "C:\Temp\MyPath" eingeben muss. Ein Anfänger (denken Sie zum Beispiel an Ihre Mutter) kann schnell ratlos werden und müsste auf das Handbuch zurückgreifen, den technischen Support anrufen oder schlimmer noch aufgeben. Eine gute Alternative besteht darin, anzugeben, was der Benutzer tun soll: „Wählen Sie den Ordner aus, in dem Sie diese Dateien speichern möchten.“ Sie können sogar die Schaltfläche „Durchsuchen... „, die sich neben diesem Textfeld befindet, in „Ordner auswählen...“ umbenennen.

Wenn Sie eine klare Beschreibung angeben, was der Benutzer tun soll, verringert auch die Notwendigkeit von Hilfsdateien oder verringern sich zumindest die Menge benötigter Details in Hilfsdateien.

Ein sehr guter Vorschlag aus den Windows-Interaktionsrichtlinien zur Benutzererfahrung gilt für jede Software. Es besagt, dass der Autor den Text wie eine Unterhaltung gestalten sollte. Die Richtlinien definieren dies als, „Wörter vermeiden, die Sie nicht persönlich einer anderen Person sagen würden.“

Einige Tipps zum Schreiben von Text:

  • Vermeiden Sie es, über den Benutzer in der dritten Person zu sprechen. Sagen Sie „Sie“ anstelle von „Der Benutzer“.
  • Verwenden Sie nach Möglichkeit umsichtig „Mein Name:“ oder „Meine E-Mail-Adresse:“ anstelle von „Name:“ oder „E-Mail:“
  • Wenn Sie mehrere Optionen angeben, schreiben Sie den Text aus der Perspektive des Benutzers. Wenn Sie beispielsweise zwei RadioButtons unter einer Bezeichnung haben, z. B. „Berechtigung für [Benutzername] in diesem Netzwerk auswählen“ über zwei RadioButtons, z. B. „Zulassen“ und „Verweigern“, ersetzen Sie den RadioButton-Text durch „Ich möchte [Benutzername] zulassen“ und „Ich möchte [Benutzername] nicht zulassen.“
  • Unterstreichen Sie Text nur, wenn er für Links verwendet wird. Es verwirrt den Benutzer, wenn der unterstrichene Text kein Link ist.
  • Lenken Sie die Aufmerksamkeit auf wichtige Informationen mit einem fett formatierten Etikett, verwenden Sie es jedoch mit Bedacht. Zu viel fett formatierter Text ist verwirrend und reduziert die Gesamtwirkung des Formulars.
  • Stellen Sie beim Schreiben des Texts für ein Kontrollkästchen sicher, dass man leicht erkennen kann, was passiert, wenn es aktiviert ist und wenn es nicht ausgewählt oder deaktiviert ist. Die empfohlene Option besteht darin, den Text direkt als Ergebnis des aktivierten Kontrollkästchens zu schreiben. Schreiben Sie z. B. „Senden Sie mir hilfreiche Informationen von Ihren Partnern“ anstelle von „Keine hilfreichen Informationen von Ihren Partnern senden“. Ich kann mir zwar viele Marketingmitarbeiter vorstellen, die über dieses bestimmte Beispiel diskutieren würden, aber ich bin sicher, dass Sie wissen, was ich meine.
  • Wenn Sie über ein schaltflächenähnliches Steuerelement verfügen (in der Regel ein RadioButton-Steuerelement mit einer Befehlsschaltfläche, das aktiviert/deaktiviert ist), stellen Sie sicher, dass Sie es ordnungsgemäß bezeichnen. Wenn der Prozess aktiviert ist, schreiben Sie „Aktiviert“ anstelle von „Aktivieren“ oder „Deaktivieren“. Wenn Sie „Aktiviert“ schreiben, wird der aktuelle Status angezeigt. Wenn auf die Schaltfläche geklickt wird (aktiviert) und die Schaltfläche "Aktivieren" lautet, kann es verwirrend und problematisch sein. „Aktivieren“ fordert den Benutzer möglicherweise auf, darauf zu klicken, wenn er denkt, dass der Prozess nicht aktiv ist.

Manchmal ist eine ListView besser

Wir bleiben häufig bei DataGrid oder ListBox oder sogar ComboBox für Auswahlaufgaben, aber mit Windows XP und höheren Versionen von Windows können Sie mithilfe eines ListView-Steuerelements vielfältigere Optionen bieten.

Die Einzelheiten zum ListView-Steuerelement:

  • Beschleunigt die Erkennung von Elementen mit Symbolen und Bitmaps.
  • Zeigt zusätzliche Informationen mit Details oder Kachelansichten an.
  • Mit Visual Studio 2005 können Sie sogar über Gruppen für zusätzliche Kategorisierung verfügen. Gruppen umfassen alle Ansichten und sind flexibel. Gruppen können auch verwendet werden, um eine Hierarchieansicht (z. B. eine Strukturansicht) abzuflachen, in der mehr untergeordnete Knoten als übergeordnete Knoten vorhanden sind. Ein gutes Beispiel hierfür ist das Dialogfeld „Netzwerkverbindungen“ in Windows XP, wenn es mit „In Gruppen anzeigen“ angezeigt wird und auf die Detailansicht festgelegt ist.
  • Um ein ListView-Steuerelement anzupassen, zeichnen Sie es manuell, indem Sie die OwnerDraw-Eigenschaft festlegen und die DrawItem- und DrawSubItem-Ereignisse verwenden.
  • Unterstützt die schnelle direkte Bearbeitung von ListView-Elementen.
  • Unterstützt die manuelle Neuanordnung ganz einfach.
  • Ermöglicht Benutzern die Auswahl der Ansicht (große Symbole, kleine Symbole, Liste usw.), mit der sie am besten vertraut sind.

Vereinfachen der Navigation mit Breadcrumb-Steuerelementen und Randleisten

„Unternavigation“ ist der Schlüssel für komplexe Benutzeroberflächen. Manchmal können Sie einer komplizierten Benutzeroberfläche nicht entkommen. Das Beste, was man in einer solchen Situation tun kann, ist die Erfahrung für den Benutzer so einfach wie möglich zu machen. Eine Randleiste, die aus Linkbeschriftungen oder einer Strukturansicht für die hierarchiebasierte Navigation besteht, schlägt eine Navigation auf gleichgeordneter Ebene für die Aufgabe des aktuellen Dialogfelds vor. Es macht es dem Benutzer sehr einfach, zwischen den Schritten des Prozesses zu springen, wenn er weiß, wo er ist.

Wenn Sie zu einer hierarchiebasiertev Navigation mit TreeViews oder einer ähnlich komplexen Navigation wechseln, wäre ein gutes Dienstprogramm für den Benutzer ein Breadcrumb-Steuerelement. Während Visual Studio noch nicht mit einem integrierten Steuerelement ausgeliefert wird, finden Sie unter Erstellen eines Breadcrumb-Steuerelements Informationen zum Erstellen eines Steuerelements selbst. Ein Breadcrumb-Steuerelement erleichtert das Auffinden der aktuellen Position in Bezug auf die Hierarchie.

Breadcrumb-Navigation kann problemlos mit der Kopfzeile zusammengeführt werden, wenn das Formular über eine verfügt. Weitere Informationen finden Sie im vorherigen Abschnitt zu Kopfzeilen.

Verwenden von hübschen Grafiken

Jeder liebt Anwendungen mit coolen Grafiken – die Mehrheit zumindest. Während eine Benutzeroberfläche mit hübschen Grafiken keine logische Wahl für alle Anwendungen ist, hilft es, einen guten Eindruck zu erwecken und es kann ein Vergnügen sein, daran zu arbeiten. Natürlich sollten die Grafiken nicht die Produktivität beeinträchtigen, aber wenn sie richtig verwendet werden, können sie sie erhöhen!

Es müssen nicht viele Grafiken vorhanden sein und es ist nicht notwendigerweise viel Arbeit erforderlich. Ein professionell gestalteter Begrüßungsbildschirm oder eine Kopfzeile (wie die, über die wir zuvor gesprochen haben) reicht schon. Wenn Ihr Budget zulässt, können Sie ansprechende Grafiken für Symbolleisten, Assistenten und vieles mehr verwenden. Sie sorgen dafür, dass Ihre App schön und professionell aussieht. Es ist ein subtiler Effekt, aber ein professioneller Look vermittelt Vertrauen und Stabilität. Wenn Sie ein relativ kleines Unternehmen sind, das Einzelhandelsanwendungen erstellt, ist dies ein wichtiger Aspekt, den Sie berücksichtigen sollten.

Legen Sie immer besonders darauf Wert, professionell gestaltete Grafiken zu verwenden. Lizenzfreie Grafiken sind einfach verfügbar und erschwinglich. Sie können auch einen Designer einstellen. Aber wenn Grafiken nicht Ihre Stärke sind, probieren Sie es nicht selbst aus. Wenn Sie keine professionell gestalteten Grafiken erwerben oder verwenden können, ist es besser, wenn sie überhaupt keine verwenden.

Für kleine Grafiken können Sie immer die Symbole und Bitmaps verwenden, die mit Visual Studio 2005 ausgeliefert werden. (Die Grafiken, die mit früheren Versionen ausgeliefert wurden, werden nicht empfohlen!)

Bereitstellen von größenveränderbaren Formularen nach Möglichkeit

Größenveränderbare Fenster sind ähnlich wie auflösungsunabhängige Fenster. Auflösungsunabhängige Fenster sehen gleich aus, unabhängig davon, ob Sie einen 96DPI- oder 300DPI-Bildschirm verwenden. Unabhängig davon, ob die Benutzeroberfläche Ihrer Anwendung auflösungsunabhängig ist, ist es besser, wenn die Größe geändert werden kann. Natürlich gilt das nicht für alle Szenarien, aber es ist eine gute Faustregel.

Wenn Ihr Fenster mit Listen arbeitet, insbesondere mit ListViews, wird dies noch wichtiger. Durch das Ändern der Größe kann der Benutzer gleichzeitig mehr Daten anzeigen.

Beispielsweise gibt es eine Anwendung, in der ein Benutzer ein Bild aus einer großen Sammlung auswählen muss. Mit dem geöffneten Dialogfeld können Sie eine Miniaturansicht auswählen, aber das Dialogfeld hat eine feste Größe, und die Miniaturansichtenliste zeigt jeweils nur vier Miniaturansichten an. Wenn die Sammlung über hundert Bilder verfügt, kann das Scrollen und Suchen – eine sich wiederholende Aufgabe – ziemlich mühsam und eine Verringerung der Effizienz sein. Wenn die Größe des Dialogfelds geändert werden kann, kann der Benutzer es so groß wie sinnvoll ziehen oder zumindest so groß, wie der Bildschirm es zulässt, damit er die Aufgabe schnell abschließen kann. Wenn Ihre Liste einen horizontalen Bildlauf hat ( z. B. ein detailliertes ListView- oder DataGrid-Objekt), ist dies noch mühsamer! Veränderbare Fenster sind in einer solchen Situation sehr hilfreich.

Bereitstellen weiterer Funktionen mit Randleisten/Aufgabenbereichen

Wie die Kopfzeilen, von denen wir bereits gesprochen haben, sind Randleisten und Aufgabenbereiche eine wunderbare Möglichkeit, zusätzliche Funktionen und Hilfsbefehle bereitzustellen. Beispielsweise sind die Aufgabenbereiche in Office Word 2003 sehr bequem, barrierefrei und nicht aufdringlich. Sie funktionieren auch asynchron, wenn eine Verbindung mit Onlineressourcen hergestellt wird und dem Benutzer die Option für mehrere Aufgaben zur Verfügung stellt.

Das Erstellen eines Aufgabenbereichs oder einer Randleiste ist so einfach wie das Erstellen eines Dockingpanels, mit der Möglichkeit, eine schlanke Grafik oben zu platzieren, um als Titelleiste zu fungieren. Sie können dafür sogar ein farbiges Bezeichnungssteuerelement verwenden. Die Möglichkeiten für Aufgabenbereiche sind vielfältig!

Wenn Sie über zusätzliche Funktionen verfügen und sie ihrem Benutzer nicht aufdringlich bereitstellen möchten, ist am besten der Aufgabenbereich. Sie können auch Aufgabenbereiche „Automatisch Ausblenden“ oder wie die Visual Studio-Toolfenster reduzieren.

Auswahl für Benachrichtigungen anbieten

Zuvor haben wir gesehen, wie sie ein benutzerdefiniertes Meldungsfeld erstellen können. Wenn dem Benutzer häufig ein Meldungsfeld in Ihrer Anwendung angezeigt wird, kann es umsichtig sein, ein Kontrollkästchen hinzuzufügen, das der Benutzer auswählen lässt, dieses Dialogfeld in Zukunft zu deaktivieren. Eine solche Option ist besonders gut für offensichtlichere Nachrichten.

Ein bekanntes Beispiel hierfür ist das Visual Studio-Dialogfeld „Suchen“. Wenn Sie Text suchen oder ersetzen, zeigt Visual Studio ein Meldungsfeld mit den Ergebnissen an. Sie haben aber auch die Möglichkeit, dieses Meldungsfeld zu deaktivieren. Es kann wirklich ärgerlich sein, wenn Sie bei jeder Suche ENTER drücken oder auf OK klicken müssen.

Eine weitere coole Sache, die Visual Studio macht, ist, dass auch dann, wenn das Dialogfeld deaktiviert ist, weiterhin die Ergebnisse dieses Vorgangs in der Statusleiste anzeigt werden.

Stellen Sie QuickInfos bereit!

Manchmal können QuickInfos Ihnen viel Zeit sparen. Schaltflächen, Kontrollkästchen und andere Steuerelemente können mehrdeutig sein, und der Benutzer ist möglicherweise nicht sicher, was zu tun ist. QuickInfos bieten die beste Form kontextbezogener Hilfe in nur einer Zeile. Der Benutzer kann schnell entscheiden, was zu tun ist, ohne in der Hilfsdatei nach etwas zu suchen oder ein anderes Fenster zu öffnen.

Personen überspringen dies häufig in ihren Anwendungen. Legen Sie Wert darauf, sofern möglich, QuickInfos zu allen mehrdeutigen Steuerelementen oder allen Steuerelementen hinzuzufügen. Wiederholen Sie nicht den Text einer begleitenden Beschriftung oder den eigenen Text eines Steuerelements, sondern stellen Sie zusätzliche Informationen zu diesem Steuerelement bereit. Der Text sollte die Funktion des Steuerelements in nur wenigen Worten erläutern.

Vergessen Sie nicht die kleinen Dinge

Die kleinen Dinge können Sie nerven, aber sie zu ignorieren, kann den Eindruck beeinflussen, den Sie hinterlassen. Ich habe einmal eine Anwendung verwendet, die von einer wichtigen Person in der Softwareindustrie gemacht wurde, die den BorderStyle des Formulars auf „Größe anpassen“ festgelegt, aber die Steuerelemente auf der rechten Seite des Formulars nicht verankert hatte. Aus diesem Gründen hatte die Anwendung, die von einem Branchenschwergewicht erstellt wurde, ein unprofessionelles Gefühl.

Diese Arten von „Kleinigkeiten“ stehen im Zentrum des Gesamteindrucks. Die Benutzeroberfläche und Benutzererfahrung Ihrer Anwendung sind die Grundlage, auf der Benutzer Ihre Anwendung bewerten – zumindest zunächst. Wenn sie offensichtliche Fehler in Ihrer Benutzeroberfläche sehen, können sie Ihre Anwendung als weniger leistungsfähig und effektiv wahrnehmen.

Zusammenfassung

Wir haben nur über einen kleinen Teil der menschlichen Benutzererfahrung gesprochen. Während die Benutzererfahrung einfacher, effektiver, spielerischer und benutzerfreundlicher wird, wird die Aufgabe, diese Benutzererfahrung zu erstellen immer komplexer. Aber mit etwas Voraussicht und guter Planung können Sie eine großartige Benutzererfahrung schaffen.

Die beste Möglichkeit, die perfekte Benutzererfahrung zu schaffen, besteht darin, Benutzerfreundlichkeitstests speziell auf der Benutzeroberfläche durchzuführen – ganz gleich, ob mit einer speziellen Testgruppe oder sich selbst. Je mehr Zeit Sie mit dem Testen der Benutzererfahrung verbringen, bevor Sie Ihre Anwendung freigeben, desto besser. Es wird Ihnen viele spätere Probleme ersparen.