Concept Interface Design - Comments and Input Appreciated

Started by
12 comments, last by lonedrow1 11 years, 5 months ago
Hello, everyone. I am currently taking a class on Interface design for video games. Right now, I am supposed to present three specific functions in my game, and how to make each one usable in my game design. I will then post the said information on a game design site (like this one) and wait for feedback to turn in to my teacher. Unfortunately for you poor souls, my functions are quite lengthy. If you can take the time to read this post, and to respond to it, I would be grateful. It is, after all, for a grade. Also, keep in mind that this interface revolves around an Xbox 360 controller.

EDIT: IMPORTANT - I do not claim any rights to the images used to make my designs, however I guess I can claim intellectual rights to the designs themselves (unless if someone has used my exact designs before, that I am not aware of)

As per stage 1 – this is not an MMO idea

As per stage 2 – this is nothing but concept. I understand that something might be VERY hard to actually design and code, but I am in a theory/design class. All I need to know is if this is a good idea/needs improvement/should be done this way/etc. Also, this is a VERY log post. As per stage 2, I organized it as best I could to facilitate reading. You have been warned.

First Function -

The first function, of course, is general movement and interaction. As is standard to any game, movement will be controlled by the Left Analog, and the camera will be controlled by the Right Analog. In addition to this, pressing down on L3 will toggle the holographic interface (explained later), and pressing R3 will activate a special ability that the player has assigned. LT initiates a light attack, and RT initiates a heavy attack. The “A” button will interact with objects, such as picking up items, opening doors, and reloading, and holding it down will cause the player to sprint. The “X” button will be used for blocking, “Y” will be used for jumping, and “B” will be the button that accesses the inventory/map/etc. menu. “Left” on the D-pad will activate Combo Mode, “Up” on the D-pad will activate Tactical Mode, “Right” on the D-pad will activate Strategy Mode, and “down” on the D-pad will cycle through available camera zooms for each mode. One of these modes, Combo Mode, will be explained later.

However, in addition to these standard functions for each D-pad and action key, pressing LB will display a secondary menu (on the bottom left screen for the D-pad, bottom right for the action buttons) for each D-pad and action button. In this menu, the player will be able to assign various skills and abilities. Pressing RB will accomplish the same effect, but instead as a tertiary menu. This gives the player to assign 16 abilities/potions/etc. to these buttons.

Also, I almost forgot to say that you will be able to press LT and RT in sequence, at the same time, etc. to activate combos that the player has unlocked.

This control scheme is for the general movement and interaction for events that may go on in the action screen.
screen.

Movement List*********************************Action List
Walk/run/move********************Access secondary + tertiary skill menus
Jump*****************************************************block
interact*********************************************Light attack
Camera rotation********************************* Heavy attack
Enter inventory menu******************************sprint
Toggle Holo-interface*******************************reload
quick slots **************************************special abilities

Also, buttons to switch interface modes

Concept of Control scheme:
Xbox 360 controller –


Left analog: movement
right analog: camera
L3: toggle holographic interface
R3: activate special abilities
LB: secondary interfaces
RB: tertiary interfaces
LT: light attack
RT: heavy attack
A: interact (pick up items, doors, talk, reload, hold to sprint)
X: block
Y: jump
B: enter inventory/map/etc. menus
D-pad: switch between interfaces, and change camera zooms.
LB and RB will, when held, show the secondary and tertiary menus for the D-pad and action buttons, for which the player can assign skills, items, etc.

Diagram of Control Scheme -
see attatchment for a picture of actions mapped to a 360 controller.
[attachment=12122:control scheme.gif]
EDIT: sweet, I didn't realise that it would actually show the picture. I thought it would only have a download link.

Second Function -

The second function is the three different combat modes. Our three modes feature different styles of gameplay that will (hopefully) be able to be interwoven easily, and encourage the player to mix it up over the course of the battle. Each will display relatively the same information, but in different ways that will facilitate the gameplay each mode offers.

Combo mode will provide gameplay that is very close to the character, and will support skills that are specifically designed to attack enemies. As a rule for this mode, the player will only be able to see information in his or her immediate area. Activating the holographic interface (explained later) for example will only show information on party members very close to the player. The HUD (there wont be much of a HUD though, I plan to keep it as diegetic – or in the game world – as possible) will allow the player to focus on the game play, and will be designed in a way that facilitates it – much like an interface in a First Person Shooter would. Information in this mode will be almost exclusively diegetic, displaying the health and any effects on an enemy creature (wounds, poison cloud, etc) and the same on the character. The holographic interface, which could technically be seen by other characters in the game, can be toggled to display a holographic “screen” that comes out of a module on the character. I have not thought of where to put the module, but the screens will display Mana, Health, and Stamina, as well as a power gauge for special abilities.

Tactical mode is a more comprehensive view of the battlefield, detaching the player from an over the shoulder view to a slightly more overhead-and-out view. In this mode, diegetic elements like wounds and effects will be more exaggerated, but not overly so, so that the player can easily identify the effects enemies at a far distance might have. In this mode, the player will be able to see the holographic screens (if toggled) of any other party member in the view of the camera. In tactical mode, the player will be able to use abilities that might require more thought, such as placing a pool of acid, or throwing a fireball spell. This mode focuses more on “tactical” abilities, rather than clobbering enemies. As for how you can tell where the spell will be cast, there will be an identifier of some sort. I cant think of a diegetic one right now, but for a non-diegetic solution, some sort of emblem on the ground will do.

I will not be covering the Strategy mode. Though I have an idea of what I will do with it, I do not know how to implement it just yet.

Each mode provides a different way to play, but at the same time, you can switch between them at a whim in order to combine many of the elements of them, giving you an almost "I am a general on the battlefield" kind of feeling. Combo mode, as the name suggests, provides gameplay that is very close to the character - namely supporting skills that are specifically designed to attack enemies. Tactical mode supports a more thought provoking way to play, however, this is still centralized to the player. Specifically speaking, Tactical mode will allow the player to perform things like placing an Area of Effect that can buff allies but debuff enemies, or to use a fireball spell that can affect multiple enemies. In Strategy mode, you would probably see gameplay similar to any other RTS, but in a much more deconstructed way (you wont have a city to build every time you start RTS mode, there is no huge empire to construct, etc).

From what I am hoping this will accomplish, I will attain a "three step complexity". The Combo mode will be the least complex of the three modes, and the interface will encourage the player to focus on the action, displaying information to the player that is only directly related to them, and any immediate party members. Tactical mode will be slightly more complex than Combo mode, and will provide the player with more information than Combo mode, allowing the player to decide where exactly to place that Area of Effect buff - encouraging the player to do what is most appropriate to the given situation. Strategy mode will be the most complex of these modes, and will allow the player to do many things, like spawn units and create temporary holdings - within reason of course, summoning a unit will consume mana, or some other resource.

I am hoping that using these three different "modes" will create a game that can provide gameplay as simple as Oblivion, as intermediate as Dragon's Dogma, and as thought provoking as a simple RTS.

Third Function -

And for the third and final function; menus. I took the liberty of organizing these into bullet points, since they are a little extensive.

1. Inventory – As is traditional of just about any RPG, there is a lot of item management that the user will wade through, from loot, to buying and selling. Like with our action screen, this will be a hologram that the characters in the game will technically be able to see.

When the user accesses the inventory, a hologram of what the user is carrying will appear in front of the character, and the camera will zoom in closely, showing the right profile of the characters face to the left of the screen initially. However, we will allow the player to move the camera around, so the player can see their character better. The holographic inventory will be explained by a digital constructor/destructor that breaks down an item and stores it as data inside of a module. Using the data, this gadget can display to the character a summary of the items a character is holding, and sort them, if the player wishes, into tabs. When the player chooses to wear a different item, let’s say a chest-piece, the icon in the inventory will switch with the icon of what is currently equipped, and will show the new item being constructed onto the character.

The inventory itself is basic, and like most RPGs, you will be able to swap (through the left and right bumpers) to other menus – like the map, or quest log for instance. While in the inventory, we will feature sorting functions. These will vary from alphabetic sorting, to type (weapon, armor, and even further into different types of weapons and armor slots) and by-level sorting. Also, the player will be able to see the stats of an item when it is “moused over”, as well as being able to compare the stats of the item and the one equipped by holding down a button

Summary:
LB and RB – switch to different menu
Right analog – camera
Left analog – move through items in the inventory, or to buttons such as the sort button
“A” – selection button
“B” – exit
“X” – hold to compare
“Y” – reset camera
L3, R3, LT, RT – no function as of yet

2. Map – As with any RPG, the world the player is in tend to be large, and have cities. The player will need to be able to navigate the world effectively, without being frustrated.

Like with our inventory, the map will be displayed holographicaly in front of the character, and will assume the default position. In our map, the player will be able to set waypoints, remove waypoints, zoom in and zoom out, as well as being able to see the waypoint for the quest they are currently tracking. However, unlike other games, we plan to have a multi-waypoint system, and will allow the player to track 4 waypoints at a time (or 5, if they are currently tracking a quest). Like many maps, these functions are basic and are pretty limited.

Summary:
LB and RB – switch to different menu
Right analog – camera
Left analog – move cursor across map
“A” – set waypoint
“B” – exit
“X” – remove waypoint
“Y” – reset camera
LT – zoom out
RT – zoom in
L3, R3 – no function as of yet

3. Quest log – arguably the most important part of any RPG, the quest log allows the player to keep track of what they have done, what they want to do, and what they are currently doing.

Our quest log – like other elements of our game – will be diegetic. When accessed, the camera will assume the default position over the character’s shoulder. Our quest log – like many others before it – will allow players to see what quests they have, what quests they have already done, and what quest they are currently tracking (which will also place a waypoint on the map). However, what I play to be unique about this quest log, is that the log will “receive tasks” from quest NPCs as the NPC is spouting their dilemma. I hope some of you have already played Borderlands 2. I hope you remember the quest where claptrap tries to send you on ridiculous errands to find his secret stash. Remember that, as he speaks, new tasks show up on our top right corner. This is what our quest log will do. As major elements of the quest are outlined, our quest log will seemingly update in “real time”. We plan to implement this holographically, and all dialogue the player participates in will be delivered in a fashion similar to what we see in Dragon Age and Mass Effect.

Summary:
LB and RB – switch to different menu
Right analog – camera
Left analog – scroll
“A” – track/un-track quest
“B” – exit
“Y” – reset camera
LT – scroll up by 5
RT – scroll down by 5
L3, R3, X – no functions as of yet

4. Talent trees – I have played MMORPGs like World of Warcraft, RIFT, and many others for a very long time, and I have become accustomed to talent trees. A handful of RPGs that have implemented talent trees in their design, some of which were Kingdoms of Amalur and the Borderlands series, as well as Dragon Age and Mass Effect. A game like Oblivion features skill progression, however you do not use your characters “skill development” to its fullest – for example – no matter how skilled you are with your sword skill, you can still only perform very basic move sets.

Like our other elements in our game, we will have our talent tree menu appear holographically, and will assume the default camera position when accessed. I am not sure what anyone reading this might think, but to me, the presence of a talent tree shows your character’s progression in its skill. Instead of simply making your character more powerful, they allow your character to do different things – which shows an acquisition, and use of, knowledge. Not only does it do this, but it also allows the player to more accurately develop their character the way they want to.

In our game, there are roughly 20 different talent trees, each to their own respective class. When a player chooses a race, that race’s three default trees are available for use to the player. It is up to the player to go out into the world and find teachers for each other class – much like how it was in Dragon Age: Origins. We also plan to possibly have certain party members able to teach you their class. 20 different talent trees seems somewhat daunting, but we will allow the player to switch between trees by utilizing the left and right triggers. We will also have the talent trees pre-sorted into the three main “fighting styles” of our game – heavy melee, agile melee/ranged, and magic, which are governed by the fighters, hunters, and mage guilds, respectively (they have different names, but I cannot remember them right now). Also, our game features no “level cap”. The player can continue to level their character, until ALL talents are spent into their fullest – allowing the player to customize gameplay between all 20 talent trees to an amazing extent. This also seems daunting, but the separation between casual players – and those who want to maximize everything – is the difference between sticking to the 3 initial trees, or broadening the spectrum to include everything.

Summary:
LB and RB – switch to different menu
Right analog – camera
Left analog – move cursor through ability tree
“A” – spend point
“B” – exit
“X” - remove point
“Y” – reset camera
LT and RT – switch between trees inside the current fighting style
L3 and R3 – switch between “fighting styles”

Please excuse how long this post is, and I hope you will read it. I am having a great time designing interface concepts, and I believe that I am doing a relatively decent job for a first-timer. If any of you reading this post will take the time to comment, suggest improvements, or offer support for any of these ideas, please don’t hesitate to post them. I am looking forward to reading your replies.

Advertisement
I believe this is when you should jump on Photoshop and make some Mock-Up Screenshots.
I will try to make some as fast as possible then.
Hello,


I believe this is when you should jump on Photoshop and make some Mock-Up Screenshots.


Before / instead of starting up this gigantomanium: Grab a piece of paper and a pencil and make a few mockups.
I wouldn't believe it myself, but I've been studying interaction design for some time now and there simply is no better tool to get your ideas out for the first time than pencil and paper (and maybe a ruler).
"But I can't draw." - Even better! It means you won't loose yourself in unnecessary details.
If you still feel the need to "improve" your work digitally, either scan it in and adjust values / contrast in Photoshop / Gimp or, if you wanna do anything more, use a tool that actually fits the task. It's called Photoshop, it's meant for Photomanipulation, and for almost any other task, it is not a good solution. If you wanna stay with Adobe-products, Fireworks, Illustrator or even InDesign are better suited to create mockups with. If you look outside Adobe there are many tools specifically designed for this task, several of them even online and offering a free trial (don't have a favorite here, so not going to post an example).
And, to not give the wrong impression that any of them would be the best way to do a mockup in this early stage: they're not, paper is. It's what the pros use, it's what education recommends and it's what experience tells us.

Hope you found this little pro-paper-rant helpful and maybe even enjoyed it a little (at least I enjoyed writing it),

bw,
Tobl
Think my post was helpful? Want to thank me? Nothing easier than that: I sure am are a sucker for reputation, so just give it a little keycode 38 if you like. ^^
Just like to give anyone following this a heads up, i am finally able to get started on these mock-ups. I have had a lot of other work to do, and unfortunately I still do. Fortunately, I at least am somewhat familiar with photoshop, so instead of looking terrible, the mock ups will at least look doctored.
Unfortunately I don't have time to read all of what you wrote. And to be honest, most of what I did read is hard to follow. What was a lot easier though was the bit where you had the controller diagram. A quick look at that and it seems like the design makes sense. The way to completely visualize it would be with a screenshot (or mockup) relevant to the control scheme.

I'm not clear on the purpose of the lesson you're working on and what kind of feedback are you supposed to try and get?

If it's just to design the user interface, then I'm not sure how to help. It's all going to depend a lot on the level of action, the features that are most commonly required, and my ability to learn the controls. I'm not sure if there's much to comment on then. I guess the one image of the controller you have looks like a pretty typical button configuration. If I found it uncomfortable, I'd hope I'd find an ability to redefine which buttons do what somewhere in the game settings.

However I can't help but think maybe there's an element of effectively communicating the design that might be at play here. Maybe take a look at some instruction booklets and how they communicate the actions that are available and how and when to perform them. If part of the lesson is to post your design and get feedback from people, clear communication would seem to be a key element of the lesson. Consider that when you do actually release a game, the primary way to communicate about your UI to the audience is your instruction book. And odds are you won't have any opportunity for a back and forth with each player that doesn't understand what you're trying to say.
@ kseh

I am pretty sure the reason why it is a bit hard to understand the design is because I had not made any mock-ups, and I am working on them. I have finished the first, which is pretty rough, but (i think) it seems to put all of the key information of the Combo Mode into place decently.

As for what the assignment is, we are supposed to post our idea on a website like this one, and recieve feedback from posters on what we can do with our design (Take away elements, make this element more/less prominent, add elements, design issues, etc.) We have already found out that my idea was pretty confusing, especially due to the lack of mock ups, which I am currently fixing.

Well, here it is:

[attachment=12185:Interface.jpg]

EDIT: REMEMBER, this screen shot is for Combo Mode

EDIT 2: Here is the control scheme for the action screen

Left analog: movement
right analog: camera
L3: toggle holographic interface
R3: activate special abilities
LB: secondary interfaces
RB: tertiary interfaces
LT: light attack
RT: heavy attack
A: interact (pick up items, doors, talk, reload, hold to sprint)
X: block
Y: jump
B: enter inventory/map/etc. menus
D-pad: switch between interfaces, and change camera zooms.
LB and RB will, when held, show the secondary and tertiary menus for the D-pad and action buttons, for which the player can assign skills, items, etc.

When you look at this screenshot, it looks a bit cluttered, but I wanted to include the Field of Vision for status effects and other party members' holo interfaces (which appear or dissappear when toggled on/off).

First things first, as with many action oriented games, the combo mode will feature red arrow indicators to show where the damage is coming from. Second, there will be a red glow that appears around the edges of the screen that indicates low health, and intensifies as health gets lower. It should be noted that though this is not diegetic (in the game world), it is a matte interface, meaning that it is Implied that the character can tell where they are getting hit, and to simulate loss of blood. It might break immersion, but it is necessary for the player to know where the damage is comming from, and to have a clear indicator of health.

Second, the D-pad and Action button menus on the bottom left and bottom right of the screens. the 1 in the middle of each will indicate that this is the standard menu, meaning that the regular programmed buttons will be available (B for inventory, down on the D-pad to toggle camera zoom, etc.). When the player presses LB, the number for each will switch to 2 for the secondary interface, and display the slotted skills to those buttons. The same will happen with the tertiary menu, but with a 3.

Third, proximity will play a large part in the amount of information displayed to the player. Monsters inside 15 feet will have more prominent visuals for effects, while monsters outside of 15 feet will have less prominent effects. This works to both handle the workload for the system, and to keep the player's attention on what is close to him/her.

Fourth, the holographic interface on the player will come from a module on their waist somewhere, and will display down and to the right of the player (somewhere below the crosshairs, like in the screenshot). Like I have said previously, the holographic menu will only appear when toggled. However, the player will still be able to see status on their character, such as lots of blood for low health, and a poison cloud for poison.

I think that covers everything for the action screen. I am sorry for not having mock ups in the first place, and that is entirely my fault. I have just had a lot of work to do, being in college and all. I appreciate the posts all of you have given so far, and I am pretty sure that creating mock-ups of the interface is our next assignment, so I am getting some work done early :3

EDIT: I forgot to mention that this game is not exclusively a shooter, like is implied by the picture. The game will feature swords, magic, etc. for the player to use (again, concept, its not like I am actually in the process of developing this game). The crosshair is there both to facilitate aiming, and to use as a fixed point of reference to prevent motion sickness (which is an ingenious secondary reason for the crosshair, which I have recently discovered).
Here is the second installment of interface design, this time for tactical mode.

[attachment=12187:Interface Tactical.jpg]

REMEMBER, this is for tactical mode

EDIT: Here is the control scheme for the action screen

Left analog: movement
right analog: camera
L3: toggle holographic interface
R3: activate special abilities
LB: secondary interfaces
RB: tertiary interfaces
LT: light attack
RT: heavy attack
A: interact (pick up items, doors, talk, reload, hold to sprint)
X: block
Y: jump
B: enter inventory/map/etc. menus
D-pad: switch between interfaces, and change camera zooms.
LB and RB will, when held, show the secondary and tertiary menus for the D-pad and action buttons, for which the player can assign skills, items, etc.

As you can see, the HUD remains the same, however in tactical mode the skills in the secondary and tertiary menus will be those for more "tactical abilities" (IE; these menus are assigned seperately from the combo mode abilities - features placement spells, AoE abilities, group debuffs/buffs, etc.). We are displaying relatively the same information for the enemies, but in a different way that I believe facilitates this kind of gameplay.

In tactical mode, I hope to add a feature to group monsters together, as in the screenshot. Grouped monsters will have a holographic sqare above them that will display number of monsters, average health (through color - bright red = more HP, dark red = less HP, etc) of the inner square, and any status effects through color on the outer square (IE; green for poison);. Also, monsters within 15 feet of the player will be highlighted in red.

When the player is casting an ability, the area to be affected will appear as a holographic reticule. A simple concept, but a very effective one. Depending on the ability, the reticule will be bigger or smaller.

If the holographic menu is toggled, the player will be able to see the holo-interfaces of all party members within view. In addition, the player becomes horizontally centered on the screen, and the crosshair is removed. It should be noted that the player can still use LT and RT to initiate attacks. Also, the control scheme between Combo and Tactical mode remains the same - the information is just displayed differently, and different options are available for skills.

The camera for this mode should provide a slightly more overhead or elevated view, but I had difficulty finding a character model for this.

Like always, any comments, suggestions, etc. are appreciated.
And here we are, the third installment - the inventory

[attachment=12188:Inventory.jpg]

REMEMBER, this is the inventory

EDIT - I am inserting control schemes into each interface's post, so you wont have to dig through the first post for them. I am going to edit previous posts for this.

LB and RB – switch to different menu
Right analog – camera
Left analog – move through items in the inventory, or to buttons such as the sort button
“A” – selection button
“B” – exit
“X” – hold to compare
“Y” – reset camera
L3, R3, LT, RT – no function as of yet

While the player is in the inventory, the game will not pause, and the player will be able to rotate their camera. The inventory will be able to appear holographically.

The player will be able to press the bumpers in order to navigate to different menus. Also, the player will be able to press the sorting button in order to sort the items in the inventory in accordance to what options are available (alphabetically, by level, etc.).

Also, there will be a scroll bar to the left of the inventory screen, so the player can keep track of where they are in their inventory.
The fourth installment - the map

[attachment=12189:Map.jpg]

REMEMBER, this is the map - heres its controls

EDIT: controls didnt paste properly

LB and RB – switch to different menu
Right analog – camera
Left analog – move cursor across map
“A” – set waypoint
“B” – exit
“X” – remove waypoint
“Y” – reset camera
LT – zoom out
RT – zoom in
L3, R3 – no function as of yet

/Edit

The map itself is a pretty simple interface, with only simple functions allowing the player to zoom in, zoom out, scroll the map, and place waypoints (as well as switching menus)

Like with the inventory, similar functions exist for moving the camera, etc.

This topic is closed to new replies.

Advertisement