Share
Wie einfach ist es für Ihren Spieler, ihre Absicht in die Tat umzusetzen oder zu verstehen, was in Ihrem Spiel passiert? In diesem Lernprogramm erfahren Sie, wie Sie eine bessere Spiel-Benutzeroberfläche erstellen, indem Sie sowohl gute als auch schlechte Beispiele aus vorhandenen Spielen untersuchen. Am Ende erhalten Sie eine Checkliste mit Fragen, die Sie durch das Entwerfen der Spiele führen.
Übrigens: Wenn Sie nach einem Ort suchen, an dem Sie anfangen können, finden Sie auf Envato Elements eine Fülle von gut gestalteten Spiel-Assets.
Game Assets auf Envato Elements Als Gamer und Spieleentwickler wissen wir, dass Immersion alles ist. Wenn Sie untergetaucht sind, verlieren Sie die Zeit und werden in die Präsentation des Spiels involviert. Ein wesentlicher Faktor für das, was das Eintauchen ausmacht oder bricht, ist, wie einfach es für Ihren Spieler ist, eine Idee in eine Spielaktion umzuwandeln - das heißt, wie flüssig die User Experience (UX) Ihres Spiels ist und wie gut die Benutzeroberfläche gestaltet ist (UI) ist. Ein Spiel schmerzt sich selbst, indem es zu wenig Informationen oder zu viele Informationen liefert, zu viele Eingaben erfordert, den Spieler mit wenig hilfreichen Aufforderungen verwechselt oder einem neuen Spieler die Interaktion erschwert. Ein schlechtes UI-Design kann Ihr Spiel sogar völlig brechen.
In diesem Artikel werde ich Ihnen nicht zeigen, wie Sie eine Benutzeroberfläche zusammenstellen. Stattdessen werde ich mich darauf konzentrieren, was eine UI gut oder schlecht gestaltet und wie Sie dieses Denken auf Ihr eigenes Spiel anwenden können. Ich werde das UI- und UX-Design als eine Reihe von Zielen untersuchen, die genauso wichtig und genau wie jeder andere Teil Ihres Spiels sind, anhand von Beispielen aus Spielen, die falsch laufen, und Spielen, die es richtig machen.
Die Begriffe UI und UX werden manchmal (falsch) austauschbar verwendet, sie haben jedoch bestimmte Bedeutungen.
UI oder Benutzeroberfläche, bezieht sich auf die Methoden (Tastatursteuerung, Maussteuerung) und Schnittstellen (Bestandsbildschirm, Kartenbildschirm), über die ein Benutzer mit Ihrem Spiel interagiert. UX oder Benutzererfahrung, bezieht sich darauf, wie intuitiv und unterhaltsam diese Interaktionen sind.
Um es anders zu sehen: Die Benutzeroberfläche eines Autos besteht aus dem Lenkrad, den Pedalen, den Wählscheiben und den Bedienelementen im Armaturenbrett. Die UX des Autos kommt von immateriellen Gütern wie dem Bremspedal, das auf das Gaspedal reagiert. Der Motor beschleunigt sanft, wenn Sie Gas geben gerade die richtige Menge an Widerstand - die Dinge, die das Autofahren angenehm machen.
Vereinfacht gesagt, besteht die Aufgabe einer guten Benutzeroberfläche darin, relevante Informationen klar und schnell zur Verfügung zu stellen und aus dem Weg zu gehen, sobald sie ihre Aufgabe erfüllt hat. Wenn Sie nur eine Information aus diesem Tutorial entnehmen, lassen Sie es sich so darstellen:
Eine gute Benutzeroberfläche sagt Ihnen, was Sie wissen müssen, und geht dann aus dem Weg.
Wir können weitergehen und den Prozess des UI-Designs auf sechs grundlegende Fragen beschränken:
Stellen Sie diese Fragen häufig, wenn Sie Ihr Spiel entwerfen und spielen. Die Welt des UI-Designs ist eine Welt des endlosen Nitpickings, und es ist einer der wenigen Bereiche der Spieleentwicklung, in dem man besessen sein darf.
Ein gutes Beispiel ist Fallout 3's Pipboy - oder, genauer gesagt, die kurze Animation Ihres Charakters, die den Pipboy auf Augenhöhe erhöht, wenn Sie darauf zugreifen:
Die Animation dauert nur eine halbe Sekunde, so dass Sie möglicherweise nicht viel darüber nachdenken. Aber sehen Sie, wie es die Geduld Ihrer Spieler herausfordert, nachdem Sie sich in einem 80-stündigen Spiel unzählige Male durchgesetzt haben. Schliessen Sie niemals aus, dass sich Ihr Spieler "nicht daran gewöhnt", etwas auf nicht optimale Weise zu tun. Sie werden nur Ihren schlechten Gestaltungssinn durchkochen und schlecht machen.
Ich glaube, der beste Weg, das UI-Design zu erlernen, ist das Erstellen von Websites. Es gibt erstaunliche Ressourcen wie die Alertbox von Jakob Nielsen, die Ihnen so viele Informationen gibt, wie Sie wollen, was genau eine Benutzeroberfläche benutzerfreundlich macht, wie Menschen mit Software interagieren und so weiter.
Anmerkung des Herausgebers: Und es gibt immer unsere Schwestersite Webdesigntuts +…
Im Mittelpunkt steht, was eine gute Benutzeroberfläche ausmacht Benutzerfreundlichkeit, ein Attribut, das die Antworten auf die sechs zuvor genannten grundlegenden Fragen enthält. Es gibt noch viel mehr zu Bedienbarkeit und zur Verwendbarkeit Ihrer Benutzeroberfläche, und ich überlasse es Ihnen Alertbox und finden Sie die Teile, die für Ihre Erfahrung relevant sind.
Viele Programmierer haben Angst vor der Erstellung von Benutzeroberflächen, weil sie das für einen kreativen Job halten, der besser jemandem überlassen wird, der ein besseres Verständnis für die Präsentation hat. Und doch ist das Design der Benutzeroberfläche ein weitgehend logischer Prozess, der für Entwickler perfekt zugänglich ist.
In der Tat glaube ich, dass der Programmierer (oder der Creative Director oder wer in Ihrem Team die direkteste Rolle bei der Gestaltung der Spielerfahrung Ihres Spiels spielt) für die Erstellung der Benutzeroberfläche verantwortlich sein sollte, da sie das Spiel im Inneren kennen und heraus, und wer weiß, welche Informationen wichtig sind und was zufällig ist.
Sie sollten sich auf die funktionalen Aspekte der Benutzeroberfläche konzentrieren: Wie groß ist sie, scrollen (oder sollten sie scrollen), welche Informationen angezeigt werden und wo und wie der Player durch sie navigiert. Verspotten Sie es mit zwei oder drei Farben und verlassen Sie sich niemals allein auf Farbänderungen, um Informationen zu vermitteln. Lassen Sie es zumindest durch ColorOracle oder Coblis laufen, um sicherzustellen, dass farbenblinde Menschen nicht fehlen.
Bevor ich mich damit beschäftige, ist es wichtig zu verstehen, dass ich, wenn ich über schlechte Benutzeroberflächen spreche, dieses Urteil auf der Grundlage der Ideen und Verhaltensweisen fühle, die ich als PC-Spieler mitbringe, der Spiele mit Tastatur und Maus spielt.
Die Wahl der Eingabe durch den Benutzer ist äußerst relevant für die Benutzererfahrung, obwohl es nicht die ganze Geschichte ist. Jemand, der an ein Touch-Interface gewöhnt ist, wird beispielsweise ein Tasten-Interface als unangenehm empfinden, aber ein gut gestaltetes Tasten-Interface ist immer noch leicht zu verstehen und vorherzusagen.
Die Benutzeroberfläche von Oblivion ist ein klassisches Beispiel dafür, dass die Benutzeroberfläche einer Plattform mit einer anderen nicht kompatibel ist. Obwohl Oblivion von Konsolen auf den PC portiert wurde, behielt es seine auf Controller fokussierte Benutzeroberfläche bei. Dies ist völlig analog zur Veröffentlichung eines Spiels auf iOS oder Android und dazu, dass der Player einen Cursor auf dem Bildschirm so bewegt, als würde er das Trackpad eines Laptops verwenden, anstatt die absolute Positionierung des Touch zu nutzen.
Was macht Oblivions UI so schlecht? Es ist eine Kombination aus verschwendetem Speicherplatz, falscher Skalierung und ungeeigneten Steuerelementen.
Ich hoffe, Sie sind cool, wenn Sie sechs Artikel gleichzeitig betrachten. Diese Fenster sind nicht einstellbar. Der eigentliche Teil des Menüs, der die relevanten Informationen wie den Inhalt Ihres Inventars enthält, belegt bei einer Auflösung von 1920 x 1080 nur 21,7% der gesamten Bildschirmfläche.
Die Verwendung von nur einem Fünftel eines Bildschirms ist nicht so schlecht: Sie können auf diese Weise viel tun. Das eigentliche Problem ist, dass die Schriftart und die Symbole doppelt so groß sind, wie sie für die Anzeige auf einem PC-Monitor erforderlich sind. Dies begrenzt die Anzahl der Elemente, die angezeigt werden können.
Eine lineare Listenansicht bedeutet auch, dass Sie häufig sehr viel scrollen, und die Oberfläche mit Registerkarten verbirgt alles vor Ihnen. Um Ihre Statuseffekte zu überprüfen, klicken Sie auf die Registerkarte "Magic", gehen Sie zur Unterregisterkarte "Effects" und scrollen Sie durch die Liste. Es ist eine Sache, selten genutzte Informationen wie die Charakterstatistiken hinter Registerkarten zu verbergen, aber völlig andere, um wichtige Informationen zu verbergen, z. B. was Ihre Gesundheit belastet, während Sie herumlaufen.
Vergessenheit fehlt auch Verknüpfungen. Es gibt keine Map-Schaltfläche, um die Map aufzurufen. Sie müssen auf den Kompass klicken, um die Karteikarte aufzurufen. Es gibt keine Quick-Sell-Taste oder Sell-Stack-Verknüpfung. Sie müssen den Mengenschieberegler mit der Maus bearbeiten und durch Klicken oder Drücken der Eingabetaste bestätigen. Es gibt keine Standardschaltfläche zum Verlassen eines Fensters (in den meisten Spielen "Escape"). Das Beenden verschiedener Fenster erfolgt durch Drücken von E, Tab, Escape oder einer anderen Taste.
Die Fortsetzung, Skyrim, würde einige dieser Probleme beheben, aber einige würden bleiben oder sich verschlechtern. Das erste Mal, als ich in Skyrim eine Truhe öffnete, blieb ich stecken: Flucht brachte mich nicht aus dem Fenster; der Inventarschlüssel hat mich nicht rausgeholt; Der Versuch, die Truhe wieder zu benutzen, brachte mich nicht raus. Es gab keine Schaltfläche, auf die Sie klicken konnten, um das Programm zu schließen oder eine Aufforderung mit der Aufforderung zu erhalten. Klicken außerhalb des Fensters hat nicht funktioniert. Ratet mal, welcher Schlüssel ließ mich endlich die Truhe verlassen? Umhüllung / Bereitschaftswaffe natürlich.
Die Menüs von Far Cry 3 sind für einen PC-Benutzer sehr umständlich. Manchmal reagiert es nicht auf Klicks, sodass Sie dreimal klicken müssen. Das Laden von Menüs kann einige Zeit dauern. Es ist nicht wirklich platzsparend - Sie kennen den Deal mittlerweile.
Es wurde gepatcht, also werde ich mich auf den Zustand des HUDs im Spiel konzentrieren, als es veröffentlicht wurde. Beginnen wir mit einem Blick auf das HUD in seinem Vorgänger Far Cry 2.
Das sehen Sie meistens. Dinge wie Gesundheitsindikatoren und Munitionszähler werden bei Bedarf ein- und ausgeblendet, aber im Allgemeinen lässt das HUD Sie allein.
Jetzt schauen wir uns an Far Cry 3HUD.
Far Cry 3HUD tut nicht dich alleine lassen. Es fällt mir schwer, es in Screenshots oder Videos zu zeigen. Es ist nur etwas, das Sie als Spieler erleben, der immer wieder in die Realität zurückgeholt wird. Es entsteht ein klaustrophobisches Gefühl.
Die Minikarte ist groß und undurchsichtig, sodass sie Ihnen im Weg steht. Die objektive Erinnerung oben links ist ebenfalls groß und undurchsichtig und behindert Sie. Obwohl sie nach einigen Sekunden wieder verschwindet, hat sie die Tendenz, immer wieder aufzutauchen, sobald Sie vergessen haben, dass Sie ein Spiel spielen. Wenn Sie geschossen werden, erscheinen die Trefferanzeigen in der Mitte des Bildschirms, wo sie Ihnen wieder in die Quere kommen, anstatt an den Rändern des Bildschirms wie in jedem anderen Spiel zu erscheinen. Wenn Sie genügend Handwerkszutaten gesammelt haben, erscheint auf der rechten Seite ein weiteres großes, undurchsichtiges Popup, um Sie darauf hinzuweisen, dass Sie etwas Neues herstellen können.
Jedes Mal, wenn eines dieser Popup-Fenster erscheint, wird der Player aus dem Spaß, den er hatte, gerissen und erinnert ihn daran, dass er Software verwendet. Das Überangebot an offensichtlichen Informationen vermittelt das Gefühl, dass das Spiel dem Spieler nicht als kompetent ansieht. Mit dem Patch können Sie die schlechtesten dieser HUD-Funktionen ausschalten, aber die Minikarte ist immer noch vorhanden, und die Menüs sind für Maus- und Tastaturinteraktionen immer noch umständlich.
Aber lasst uns nicht die ganze Zeit damit verbringen, über schlechte Benutzeroberflächen zu reden. Große Beispiele für Benutzeroberflächen kommen von Spielen, die die Grenzen und Stärken ihrer Systeme anerkennen.
Die meisten PC-Spieler sind sich einig, dass Morrowind (der Vorgänger von Oblivion) eine der besten PC-Benutzeroberflächen hat - mit Ausnahme eines Problems, über das ich unten sprechen werde.
Gehen wir die grundlegenden Elemente dieses Bildschirms durch.
Was bedeutet diese Benutzeroberfläche für den PC-Player? Fast alles ist so buchstäblich einen Klick entfernt. Wenn Sie sich Ihre Fähigkeiten ansehen möchten, scrollen Sie im Charakterfenster. Wenn Sie etwas ausrüsten möchten, ziehen Sie es auf Ihre Papierpuppe. Die Oberfläche ist schnell und zugänglich, und für fast alle Arten von Gegenständen auf der Welt gibt es ein einzigartiges Inventarsymbol. Wenn Sie Ihren Journeyman Hammer suchen, müssen Sie nur eine halbe Sekunde auf Ihr ordentliches, skalierbares Inventar achten.
Das einzige Detail, das diese Benutzeroberfläche beeinträchtigt, ist die Tatsache, dass Tränke und Schriftrollen Inventarsymbole wiederverwenden. Es gibt einzigartige Symbole für die Qualität des Tranks, aber nicht für seine Wirkung. Ein Master-Water-Breathing-Trank sieht daher aus wie ein Master-Restore-Fatigue-Trank.
Die Texteingabe mit einem Controller ist zum besten Zeitpunkt unbequem und im schlimmsten Fall schmerzhaft. Sie können Ihre Finger nicht direkt auf eine Taste bewegen, Sie müssen sich mit einem Tastendruck dorthin begeben, wodurch unnötige Bewegungen und Aktionen entstehen.
Jenseits von Gut und Böse Um all dies zu umgehen, wurde das implementiert, was allgemein als das beste Konsolen-Texteingabeschema überhaupt gilt: Ein unendliches Band mit Buchstaben und Zahlen, die nacheinander angeordnet sind. Die Multifunktionsleiste scrollt schnell und ohne Verzögerung, liefert ein konstantes akustisches Feedback und reagiert auf Anpassungen. Es ist ein Rätsel, warum andere Spiele ihrem Beispiel nicht gefolgt sind.
Nun, ich war etwas unfair. Bei anderen Texteingabebildschirmen im Tastaturstil können Sie eine Richtung gedrückt halten und nacheinander durch alle Tasten blättern. Diese haben jedoch häufig eine Verzögerung, bevor sie mit voller Geschwindigkeit blättern oder nicht schnell genug blättern. (Denken Sie an die grundlegende Frage: "Muss ich jemals warten, bis die Benutzeroberfläche eine Animation lädt oder wiedergibt?")
Homeworld war 1999 der erste Wendeplatz mit echten dreidimensionalen Bewegungen. Einheiten in drei Achsen bewegen zu können, war eine neue Designherausforderung. Homeworld wurde absolut stilvoll und elegant geliefert. Das Problem: 3D-Bewegung auf einer 2D-Ebene (Ihrem Monitor) darstellen.
Die Lösung: Erstens, beschäftigen Sie sich mit der traditionellen horizontalen Ebene, an die Gamer gewöhnt sind.
Behandeln Sie dann die zusätzliche vertikale Ebene.
Der Bewegungsbildschirm bietet dem Spieler auch einige subtile, aber leistungsstarke Werkzeuge:
Crusader Kings 2 ist eine Art komplexes, vielschichtiges Spiel, bei dem Sie sich dumm fühlen. Die Benutzeroberfläche bietet jedoch das Beste, um Sie durch alle Bereiche zu führen. Erstens gibt es viele Hilfefelder, die auftauchen, bis Sie mit diesem Teil des Spiels vertraut sind, um ihn anzuhalten. Zweitens gibt es diese wunderbare Funktion. Angenommen, ich möchte wissen, was ein Symbol für Münzen darstellt. Ich schwebe einfach darüber und BAM!
Ein wilder Tooltip erschien! Das Spiel sagt mir, wie ich das Münzen-Symbol nennen soll, gibt mir die relevanten Informationen und sogar die Organisation dieser Informationen. Sie können dies mit jedem anderen Element im Spiel tun, und der Tooltip wird schnell angezeigt, sodass ich nicht warten muss.
Sie könnten sich das ansehen und sagen: "Äh, Tooltips gibt es schon immer. Natürlich sollte man herauskommen, wenn ich über etwas schwebe." Denken Sie daran, es ist leicht zu vergessen.
Tooltips lassen sich besonders leicht in den vorderseitigen Menüs Ihres Spiels vergessen. Hier ist der Vsync-Tooltip im Optionsmenü von A Valley Without Wind.
Hier ist der Vsync-Tooltip in Half Life 2: Episode 2s Optionsmenü.
Ja wirklich hilfreich. Die meisten PC-Spieler, die sich mit den erweiterten Grafikoptionen auskennen, wissen, was VSync ist, aber das Platzieren eines Tooltips ist nur höflich - solange es ein hilfreicher Tooltip ist, der nicht "VSync ein- oder ausschalten" ist.
Der Stadtbildschirm von Civ 5 ist ein hervorragendes Beispiel für die schnelle Bereitstellung von Informationen.
Dieser Bildschirm zeigt Ihnen: den wirtschaftlichen und kulturellen Zustand Ihres ganzen Reiches; die Produktion dieser Stadt, einschließlich des Bevölkerungswachstums (und des Grenzwachstums, wenn die Bauliste zusammenbricht); die Einheiten und Gebäude, die dieser Stadt zur Verfügung stehen und wie lange es dauern wird, um sie zu bauen; die Ausdehnung Ihrer Stadt sowie die Ressourcenkacheln innerhalb dieser Stadt und welche Kacheln die Bürger derzeit bearbeiten; Die Gebäude wurden bereits gebaut und ein ausgeblendetes Citizen-Management-Fenster, in dem Sie zu verschiedenen Belegungsprofilen wechseln können, um die Produktion dieser Stadt zu spezialisieren.
Sie können Arbeiter auch zwischen Kacheln direkt auf der Karte der Stadt verschieben, um den gesamten Bildschirmbereich zu nutzen.
Lassen Sie uns die sechs grundlegenden Fragen des UI-Designs als sechs allgemeine Richtlinien umschreiben:
Das Design der Benutzeroberfläche ist eine logische Aufgabe, vor der Sie keine Angst haben sollten. Achten Sie auf die Spiele, die Sie spielen, beachten Sie, wie sie Informationen präsentieren und wie Sie sich dabei fühlen. Beachten Sie, was Sie wiederholt tun und wie sie verbessert werden können. Suchen Sie nach Informationen, die nur als Dekoration dienen, und überlegen Sie, mit was Sie sie ersetzen würden. Achten Sie auf Dinge, die Sie verwirren. Und schließlich haben immer einige Leute Ihr Spiel vor Ihnen. Sagen Sie ihnen, wie sie das Spiel ausführen sollen, schauen Sie still zu und widerstehen Sie dem Drang, sie zu führen. Es ist ziemlich demütigend.
Accentsconagua