Share
Hoe gemakkelijk is het voor je speler om hun intentie in daden om te zetten of om te begrijpen wat er in je spel aan de hand is? In deze tutorial leer je hoe je een betere gebruikersinterface kunt bouwen door zowel goede als slechte voorbeelden uit bestaande games te bekijken en een checklist met vragen te krijgen om je te helpen bij het ontwerpen ervan.
Trouwens, als je ergens op zoek bent om aan de slag te gaan, kun je een overvloed aan goed ontworpen gameactiva vinden op Envato Elements.
Spelfaciliteiten op Envato Elements Als gamers en game-ontwikkelaars weten we dat onderdompeling alles is. Als je ondergedompeld bent, verlies je de tijd uit het oog en raak je betrokken bij wat de game presenteert. Een belangrijke factor in wat onderdompeling maakt of verbreekt, is hoe gemakkelijk het voor je speler is om een idee om te zetten in een in-game actie - dat wil zeggen, hoe vloeiend de gebruikerservaring van je spel (UX) is en hoe goed zijn gebruikersinterface is ontworpen (UI) is. Een spel doet zichzelf pijn door te weinig of te veel informatie te verstrekken, waardoor er te veel ingangen nodig zijn, waardoor de speler wordt verward met onbehulpzame aanwijzingen of het moeilijk wordt voor een nieuwe speler om te communiceren. Slecht UI-ontwerp kan zelfs je spel volledig verbreken.
In dit artikel zal ik je niet leren hoe je een gebruikersinterface kunt samenstellen. In plaats daarvan zal ik me concentreren op wat een UI goed ontworpen of slecht ontworpen maakt, en hoe je dit denken kunt toepassen op je eigen spel. Ik onderzoek UI- en UX-ontwerp als een reeks doelen die net zo belangrijk en precies zijn als elk ander deel van je spel, met voorbeelden uit games die het fout doen en games die het goed doen.
De voorwaarden UI en UX worden soms (verkeerd) door elkaar gebruikt, maar ze hebben een specifieke betekenis.
UI, of Gebruikersomgeving, verwijst naar de methoden (toetsenbordbeheer, muisbesturing) en interfaces (inventarisscherm, kaartscherm) via welke een gebruiker met je spel communiceert. UX, of Gebruikerservaring, verwijst naar hoe intuïtief en plezierig die interacties zijn.
Om het op een andere manier te bekijken: de gebruikersinterface van een auto is het stuurwiel, de pedalen, de knoppen en bedieningselementen op het dashboard; de UX van de auto komt van immateriële zaken zoals het rempedaal dat reageert, de motor loopt soepel op als je op het gas stapt, terwijl de versnellingspook net de juiste hoeveelheid weerstand - die dingen die de auto aangenaam maken om te besturen.
Simpel gezegd, de rol van een goede gebruikersinterface is om relevante informatie duidelijk en snel aan te bieden en uit de weg te gaan als het eenmaal zijn werk heeft gedaan. Als je maar een klein beetje informatie uit deze les neemt, laat dit dan zijn:
Een goede gebruikersinterface vertelt u wat u moet weten en gaat vervolgens uit de weg.
We kunnen verder gaan en het proces van UI-ontwerp terugbrengen tot zes fundamentele vragen:
Stel deze vragen regelmatig terwijl je je spel ontwerpt en speelt. De wereld van UI-ontwerp is een wereld van eindeloos muggenziften, en het is een van de weinige gebieden van game-ontwikkeling waar het oké is om geobsedeerd te zijn.
Een goed voorbeeld is Fallout 3Pipboy - of, meer specifiek, de korte animatie van je personage waarmee de Pipboy op ooghoogte wordt gezet wanneer je hem opent:
De animatie duurt maar een halve seconde, dus je kunt er niet lang over nadenken. Maar kijk hoe het het geduld van je spelers uitdaagt na talloze keren doorlopen te hebben in de loop van een game van 80 uur. Nooit concluderen dat je speler zal "wennen" om iets op een niet-optimale manier te doen. Ze zullen je gebrek aan ontwerpgevoel alleen maar opmerken en slecht spreken.
Ik geloof dat het maken van websites de beste manier is om UI-ontwerp te leren. Verbazingwekkende bronnen zoals Jakob Nielsen's Alertbox bestaan om u zoveel informatie te geven als u wilt over wat een UI eenvoudig gebruiksvriendelijk maakt, hoe mensen omgaan met software enzovoort.
Opmerking van de uitgever: En er is altijd onze zustersite Webdesigntuts + ...
In het centrum van wat een goede gebruikersinterface maakt usability, een attribuut met de antwoorden op de zes eerder genoemde fundamentele vragen. Er valt nog veel meer te zeggen over bruikbaarheid en het bruikbaar maken van je interface, en ik laat het aan jou om over te halen Alertbox en zoek de onderdelen die relevant zijn voor je ervaring.
Veel programmeurs zijn bang voor het maken van gebruikersinterfaces omdat ze vinden dat dit een creatieve taak is die je beter kunt overlaten aan iemand als een artiest die de presentatie beter begrijpt. En toch is UI-ontwerp een grotendeels logisch proces, een dat perfect benaderbaar is voor een ontwikkelaar.
Sterker nog, ik geloof dat de programmeur (of de creatieve regisseur, of degene in jouw team die de meest directe rol speelt in het vormgeven van de speelervaring van je spel) verantwoordelijk moet zijn voor het maken van de gebruikersinterface, want zij zijn degenen die het spel binnenin kennen en uit, en wie weet welke informatie belangrijk is en wat incidenteel is.
Ze moeten zich concentreren op de functionele aspecten van de gebruikersinterface: hoe groot is het, beweegt het (of moet het), welke informatie wordt weergegeven en waar, en hoe de speler er doorheen navigeert. Bespeel het met twee of drie kleuren en vertrouw nooit alleen op kleurveranderingen om informatie over te brengen. Ren het op zijn minst door ColorOracle of Coblis om ervoor te zorgen dat kleurenblinde mensen niet mislopen.
Voordat we hier ingaan, is het belangrijk om te begrijpen dat wanneer ik praat over slechte gebruikersinterfaces, ik dat oordeel maak op basis van de ideeën en het gedrag dat ik het voorstel als een pc-gamer die games speelt met een toetsenbord en muis.
De keuze van de gebruiker voor invoer is uiterst relevant voor de gebruikerservaring, hoewel het niet het hele verhaal is. Iemand die gewend is aan een aanraakinterface zal een knopinterface onhandig vinden, bijvoorbeeld, maar een goed ontworpen knopinterface is nog steeds gemakkelijk te begrijpen en te voorspellen.
De gebruikersinterface van Oblivion is een klassiek voorbeeld van het feit dat de gebruikersinterface van een platform onverenigbaar is met een andere. Hoewel Oblivion is geport van consoles naar pc, heeft het nog steeds zijn gebruikersinterface op basis van de controller behouden. Dit is volledig analoog aan het vrijgeven van een game op iOS of Android en zorgt ervoor dat de speler een cursor op het scherm verplaatst alsof ze het trackpad van een laptop gebruiken in plaats van te profiteren van de absolute touch-positionering.
Dus wat maakt de gebruikersinterface van Oblivion zo slecht? Het is een combinatie van verspilde ruimte, onjuiste schaalverkleining en ongepaste controles.
Ik hoop dat je cool bent door zes items tegelijkertijd te bekijken; deze vensters kunnen niet worden aangepast. Het eigenlijke gedeelte van het menu met de relevante informatie, zoals de inhoud van uw inventaris, gebruikt slechts 21,7% van de totale schermruimte bij een resolutie van 1920x1080.
Het gebruik van slechts een vijfde van een scherm is niet zo erg: je kunt veel in zoveel ruimte doen. Het echte probleem is dat het lettertype en de pictogrammen dubbel zo groot zijn als ze op een pc-monitor moeten worden bekeken, en dit beperkt het aantal items dat kan worden weergegeven aanzienlijk..
Een lineair lijstoverzicht betekent ook dat u veel scrolt en de interface met tabbladen verbergt alles van u. Als u uw statuseffecten controleert, klikt u op het tabblad Magie, gaat u naar het subtabblad Effecten en bladert u vervolgens door de lijst. Het is een ding om zelden gebruikte informatie zoals karakterstatistieken achter tabbladen te verbergen, maar compleet anders om belangrijke informatie te verbergen, zoals wat je gezondheid afvoert terwijl je rondloopt.
Oblivion ontbreekt ook snelkoppelingen. Er is geen kaartknop om de kaart te openen; je moet op het kompas klikken om het tabblad Kaart te openen. Er is geen snelklustoets of een snelkoppeling met een verkoopstack; je moet de hoeveelheidsschuifregelaar met je muis bewerken en dit bevestigen door op Enter te klikken of erop te drukken. Er is geen standaardknop om uit een raam te komen (Escape in de meeste spellen), dus het afsluiten van verschillende vensters gebeurt door op E, Tab, Escape of een andere toets te drukken.
Het vervolg, Skyrim, zou enkele van deze problemen oplossen, maar sommige zouden blijven of erger worden. Ik raakte eigenlijk vast de eerste keer dat ik een kist opende in Skyrim: Escape heeft me niet uit dat raam gehaald; de inventarisatiecode heeft me er niet uitgehaald; opnieuw proberen om de kist te gebruiken, heeft me er niet uitgehaald. Er was geen knop waarmee je kon klikken om af te sluiten of om aan te geven dat je werd verteld wat je moest doen. Door buiten het venster te klikken, werkte het niet. Raad eens welke sleutel me eindelijk de kist laat verlaten? Sheathe / Ready Weapon, natuurlijk.
De menu's van Far Cry 3 zijn echt lastig voor een pc-gebruiker. Soms reageert het niet op klikken, dus je moet drie keer klikken; menu's kunnen enige tijd duren om te laden; het is niet echt ruimtebesparend - je kent de deal nu wel.
Het is gepatcht, dus ik zal me concentreren op de status van de HUD in het spel toen deze voor het eerst werd uitgebracht. Laten we beginnen met een blik op de HUD in zijn voorganger Far Cry 2.
Dit is wat je meestal ziet. Zaken als gezondheidsindicatoren en munitie tellen geleidelijk in en uit naarmate je ze nodig hebt, maar over het algemeen laat de HUD je met rust.
Laten we nu eens kijken Far Cry 3's HUD.
Far Cry 3's HUD niet laat je alleen. Ik kan het moeilijk weergeven in schermafbeeldingen of video's; het is gewoon iets dat je ervaart als een speler die steeds weer in de realiteit wordt gerukt. Het creëert een claustrofobisch gevoel.
De minimap is groot en ondoorzichtig, dus het loopt je in de weg. De objectieve herinnering in de linkerbovenhoek is ook groot en ondoorzichtig en staat je in de weg, en hoewel deze na een paar seconden verdwijnt, heeft hij de neiging om weer op te duiken, net als je op het punt staat te vergeten dat je een spel speelt. Als je wordt neergeschoten, verschijnen de treffers in de buurt van het midden van het scherm waar ze je weer in de weg zitten, in plaats van aan de randen van het scherm te verschijnen, zoals in elk ander spel. Als je genoeg knutselingsingrediënten verzamelt, verschijnt aan de rechterkant een andere grote, ondoorzichtige pop-up om je te laten weten dat je iets nieuws kunt maken.
Telkens wanneer een van deze pop-ups verschijnt, wordt de speler losgekoppeld van het plezier dat ze hebben en worden ze eraan herinnerd dat ze software gebruiken. Het overaanbod van voor de hand liggende informatie geeft het gevoel dat de game de speler niet competent genoeg vindt. Met de patch kun je de ergste HUD-functies uitschakelen, maar de minimap is er nog steeds en de menu's zijn nog steeds onhandig voor interactie tussen muis en toetsenbord.
Maar laten we niet al deze tijd doorgaan met praten over slechte gebruikersinterfaces. Grote voorbeelden van UI's komen van games die de beperkingen en sterke punten van hun systemen erkennen.
De meeste pc-gamers zijn het erover eens dat Morrowind (de voorganger van Oblivion) een van de beste pc-gebruikersinterfaces heeft - behalve één probleem waarover ik het hieronder zal hebben.
Laten we de basiselementen van dit scherm bekijken.
Wat betekent deze gebruikersinterface voor de pc-speler? Bijna alles is letterlijk één klik verwijderd. Als u naar uw vaardigheden wilt kijken, scrolt u door het tekenvenster. Als je iets wilt uitrusten, sleep je het naar je papieren pop. De interface is snel en toegankelijk en bijna elk type item in de wereld heeft een uniek inventarispictogram, dus het vinden van je Journeyman Hammer duurt een halve seconde van kijken naar je nette, schaalbare inventaris.
Het enige detail dat deze gebruikersinterface in de steek laat, is het feit dat drankjes en rollen inventarispictogrammen hergebruiken; er zijn unieke pictogrammen voor de kwaliteit van de toverdrank, maar niet voor het effect ervan, dus een Master Water Breathing-drankje lijkt precies op een Master Restore Fatigue-drankje.
Tekstinvoer met een controller is ongelegen op het beste moment en pijnlijk in het slechtste geval. Je kunt je vingers niet rechtstreeks naar een toets bewegen, je moet daar een knop naar beneden drukken, waardoor veel onnodige bewegingen en acties worden gecreëerd.
Voorbij goed en kwaad dit alles omzeild door het implementeren van wat algemeen wordt aanvaard als het beste console-tekstinvoerschema ooit: een oneindig lint met letters en cijfers erop gerangschikt in volgorde. Het lint schuift snel en zonder vertraging, biedt het constante auditieve feedback en reageert het op aanpassingen. Het is een raadsel waarom andere games het voorbeeld niet hebben gevolgd.
Nou, ik ben een beetje oneerlijk geweest. In andere tekstinvoerschermen in toetsenbordstijl kun je een richting vasthouden en alle toetsen achter elkaar doorlopen, maar ze hebben vaak een vertraging voordat ze op volle snelheid gaan scrollen, of ze scrollen niet snel genoeg. (Onthoud de fundamentele vraag: "Moet ik ooit wachten tot de interface een animatie laadt of afspeelt?")
De thuiswereld brak in 1999 de grond voor het zijn van de eerste RTS met echte driedimensionale beweging. Het kunnen verplaatsen van eenheden langs drie assen was een nieuwe ontwerpuitdaging en Homeworld werd absoluut geleverd met stijl en elegantie. Het probleem: 3D-beweging weergeven op een 2D-vlak (uw monitor).
De oplossing: behandel eerst het traditionele horizontale vlak waar gamers aan gewend zijn.
Behandel dan het extra verticale vlak.
Het bewegingsscherm geeft de speler ook een subtiel maar krachtig gereedschap:
Crusader Kings 2 is het soort complexe, meerlagige game waarbij je je dom voelt. De interface doet echter zijn uiterste best om u hierbij te helpen. Allereerst zijn er veel Help-vensters die tevoorschijn komen totdat je genoeg op je gemak bent met dat gedeelte van het spel om te zeggen dat het moet stoppen. Ten tweede is er deze prachtige functie. Stel dat ik wil weten wat een pictogram van munten vertegenwoordigt; Ik zweef er gewoon over en BAM!
Er verscheen een wilde tooltip! De game vertelt me hoe ik het muntenpictogram moet noemen, geeft me de relevante informatie en vertelt me zelfs hoe die informatie is georganiseerd. Je kunt dit doen met elk ander element in de game en de tooltip verschijnt snel, dus ik hoef niet te wachten.
Je zou hiernaar kunnen kijken en zeggen: "Duh, tooltips zijn er altijd al geweest, natuurlijk zou er een eruit moeten springen als ik over iets zweef." Houd het gewoon in gedachten, want het is gemakkelijk te vergeten.
Een plaats waar het heel gemakkelijk is om tooltips te vergeten, is in de voorste menu's van je spel. Hier is de tooltip Vsync in het menu A Valley Without Wind's Options.
Hier is de tooltip Vsync in Half Life 2: Episode 2het menu Opties.
Werkelijk nuttig. De meeste pc-gamers die naar de geavanceerde grafische opties zoeken, weten wat VSync is, maar het plaatsen van een tooltip is gewoon beleefd - net zo lang als het een handige tooltip is en niet een die leest: "Zet VSync aan of uit."
Het stadsscherm van Civ 5 is een goed voorbeeld van het snel beschikbaar maken van informatie.
Dit enkele scherm vertelt je: de economische en culturele toestand van je hele rijk; de productie van deze stad, inclusief bevolkingsgroei (en grensgroei als de bouwlijst is ingestort); de eenheden en gebouwen beschikbaar voor deze stad en hoe lang het zal duren om ze te bouwen; de wildgroei van je stad, evenals de grondstoftegels erin en welke tegels burgers momenteel aan het werk zijn; de gebouwen die er al in zijn gebouwd, en een samengevouwen Citizen Management-paneel waarin u kunt overschakelen naar verschillende profielen voor werknemersallocatie om de output van deze stad te specialiseren.
U kunt werknemers ook verplaatsen tussen tegels op de kaart van de stad, waardoor al deze schermruimte goed wordt gebruikt.
Laten we de zes fundamentele vragen van UI-ontwerp opnieuw formuleren als zes algemene richtlijnen:
UI-ontwerp is een logische klus waar je niet bang voor hoeft te zijn. Besteed aandacht aan de games die je speelt, let op hoe ze informatie presenteren en hoe je je voelt. Noteer dingen die je herhaaldelijk doet en hoe ze kunnen worden verbeterd. Zoek naar informatie die alleen als decoratie fungeert en overweeg waar u deze mee zou vervangen. Besteed aandacht aan dingen die je in de war brengen. En ten slotte, laat altijd wat mensen spelen - test je spel voor je. Vertel ze hoe ze het spel moeten uitvoeren, kijk dan stil en weersta de drang om hen te begeleiden. Het is vrij vernederend.
Accentsconagua