The Art of the Deal - Our Vendor UI
Posted by Berserkerkitten
Hi Pathfinders,
Ahh yes, to be an adventurer! Exploring the Stolen Lands, battling hordes of of bandits, trolls and other baddies, fighting for the cause and never forgetting what's most important in life: fat loot! But since you have a finite amount of sword-swinging arms and you can only wear so much armor - what are you going to do with the tons upon tons of extra gear you collect on your travels? The hint is in the title of this update!
Today we're telling you all about how we're designing the interface you'll be using to interact with the merchants of
Pathfinder: Kingmaker.
No cRPG is complete without a merchant. Whether you need to replenish your rations, stack up on potions or purchase a rare magical blade, this classic character is always there for you. Of course, the merchant is also more than willing to help you unburden your bags of all the unwanted loot, and will reward you handsomely for your trouble.
It should be noted that when we speak of “merchants”, what we mean is not a special kind of NPC, not an honorary title and not even a separate occupation – many characters can be considered merchants simply by virtue of having goods to sell. Thus, when we talk about merchants we mean exactly them, the characters of our game, and they are much more than just a list of items to buy and sell. Whether it’s a hermit mage trying to fund his arcane research by selling scrolls and wands or an actual professional merchant from the capital, you will interact with both of them through the vendor interface.
Many ways to implement a trade interface have been developed to this day, and we are no innovators in this area. Drawing on the principles of convenience and immersion, we have decided not to go down the path of invention and to steer clear of exotic solutions. We wanted to make sure that once you saw the vendor interface, you would quickly understand how it works based on your experience with other games. Apart from that we tried to preserve the immersiveness of the Pathfinder universe, which meant we had to stick to certain technical frameworks and develop a vision of the future artistic layout.
First sketch of the interface
However, this doesn't mean that creating a trade window is a simple task. As with all of our interfaces, we are doing a lot of analytical work here. In order to better understand how the interface should look and work, we looked at all the possible use cases and carefully examined the existing solutions. This approach has enabled us to pick out the most convenient features, as well as to determine the ones that cause grief and find a way to fix them. Building off the hallmarks of the Pathfinder system and the players' needs, we have gone through multiple phases of information design, identified necessary features and defined functional interface groups. As a result, we've decided that a barter trading system was the way to go.
While barter may be a bit more complicated than other, more streamlined trade systems, we believe that swapping the loot you’ve found in the wilderness for a masterwork weapon newly delivered from the civilized world will fit better with the atmosphere of the Stolen Lands. And just as you bring them new items from your travels, merchants will also sometimes surprise you with new wares. Their list of available items grows throughout the game, often because of you selling them these items, at times because of regular shipments, and other times based on your decisions and actions, including the recent developments in your kingdom. Most of their stocks might be pretty mundane – rations, standard scrolls and potions, and maybe a +1 Longsword or a Ring of Protection here and there. However, a merchant may sometimes get their hands on a rare or unique magical item that is bound to catch the eye of even the most seasoned adventurer.
Common motifs of interface interaction
The functional structure
As we approached the static wireframe phase, we already knew what sort of functionality we wanted to implement in the game. We have decided to split the interface into three equal, logically and visually distinct areas: the vendor area, the exchange area, and the player area. Note that all the text in the following layouts is provided as a visual aid and is not representative of the actual textual contents of the game.
Static wireframes with shared stash
Static wireframes with companion's equipment
We have decided to keep the player inventory positioned on the right so that the player could draw on their experience of interacting with the character window. This is also where we've put the characters' personal slots and where we are planning to give the player an option to don the purchased items without leaving the interface.
Since the game will feature significant amounts of loot, special attention is devoted to developing a system for filtering and sorting items. Sorting mechanisms are meant to help the player with trade operations, for all merchants have an assortment of goods they can sell as well as certain limitations on what they are willing to buy. A mage is highly unlikely to buy 24 sets of bandit leather armor off your hands, and a merchant from Brevoy is just as unlikely to sell you a Wand of Animate Dead. While most merchants are selective of the goods they trade in, some are willing to sell or buy just about anything. After all, if a Baron wishes to sell his Wand of Animate Dead to a store in the capital, who is the shopkeeper to argue with him? The afore-mentioned wizard will still be selling scrolls, wands and wondrous items later on in the game - if he survives the dangers of hermit life, that is. The barkeep at the local tavern will mostly trade in rations, perhaps selling potions and other bits of adventuring kit from time to time. However, the merchant in your capital city will display both the best wares the artisans of your realm can offer and the rare specialties of your international trading partners.
Item grouping
As the diagram shows, we've combined some types of objects into groups. This is done to reduce the number of interface elements and to ensure ease of access.
The previous interface iteration has already been through user experience (or UX) testing. Thanks to our colleagues at the UX lab, we got the results that helped us reach a few important conclusions and solve a few issues.
For example, in the vendor area we had to choose between a shelving and a tiled item layout.
Vendor area layout
Both options had their advantages and disadvantages. A shelving layout allows to display more detailed information, but if the vendor has a lot of items to sell, this might end up in a long scroll. A tiled layout fixes this problem, however, it makes it impossible to quickly read the name of the item. To solve this issue, we held a poll and decided to go with the shelving layout: most respondents indicated that the item's name is more convenient than the icon and is better at communicating the item's properties. And, after all, real merchants store their goods on shelves and in display cases, not in slots =) It should be noted that this decision also prompted us to add a filter that separates items on the basis of whether they were sold by the player.
The above example is not the only case where UX testing has helped us to significantly improve the interface. In its first implementation, the interface would move an item into the exchange zone on a double click. We thought the player would find this intuitive, because that is exactly how donning items in the character window works. However, what we realized is that if a player decided to sell 100 items, it would take them 200 clicks to do so. And that would be terribly tiresome! Therefore, moving the items now only takes one click. By the way, right now we're working on a feature that would allow selling a large amount of items at once, or bulk selling. The main difficulty here is to determine which items are to be considered as viable objects for the bulk sale, because this can be very situational.
At the time of writing, the artists haven't had a chance to get their hands on the trade interface yet, and only 80% of its intended functionality has been implemented, but we still decided to show you what it looks like in the game at the moment.
Interface Screenshots
To conclude, we'd like to tell you about an idea that we are still working on. Perhaps, many of you have noticed that a completely empty table is taking up a lot of useful space in these screenshots. While working on the interface, we came up with an idea: make it so that transferring items into the exchange slots would cause the player character and the vendor to put the models of these items on the trading table. And, depending on who has to pay extra to uphold their end of the deal, a handful of golden coins should appear on the left or on the right side of the table. We expect this solution to make the trade a more embodied experience and to help preserve gameflow even when opening the full-screen interface. The afore-mentioned principle of immersion is more than mere words to us. Of course, in its current state this is just an idea, and whether it's getting into the game depends on our ability to solve such underlying issues as, for example, the high number of assets that will have to be drawn to implement this feature. Nevertheless, we'll keep looking for ways to overcome these obstacles.
We never settle and we always strive to create an interface that is a pleasure to interact with. The trade interface is no exception and there is still a lot of work, research and debate ahead of us. Make sure to leave a comment and suggest your ideas, we are happy to receive any and all feedback and we will definitely take heed of your advice as we work on the game.
One more thing
As many of you may have already noticed,
the forum on the studio website is finally up. All pathfinders are welcome to join! For us, the forum is an opportunity to talk to you directly and to find out what you're thinking about the development issues... as well as about all other issues, really
It is on this forum that we are planning to collect your ideas and hold polls on various game aspects.
So be sure to come and pay us a visit!
Hail to the Kings,
Owlcats.
