Character Creation UX Update #82
Comments
|
Hi guys, below you can find the first version of the reworked character creation. Please note, that it isn't finished yet. It's just a starter and things can be changed. I did stick to the old process in a way, but changed quite a few things and repositioned elements. My main goal was to have all the information on one screen, without forcing the user to scroll. At least not on the main patcher size! Realm selection Note, that when the user hovers over a realm it gets highlighted. The border changes, there's a box shadow under it, the colour of the button changes and the text will change into plain white.
Here you can see another version of it, where there are images behind the text.
Class and Race Attention: I placed the character name on the bottom, but I just placed it on this step and on no other. It just uses too much space, especially as the next steps (attributes and banes/boones) need a lot of space. So we'll force the user to deside his name during this step. I also changed the old back and forth buttons and added a more descriptive text to them, which might be changes. For the user it is easier, if he knows, where a button is going In the middle you can see the preview of the race or/ and the class, as requested by Tyler (if I recall correctly.
Attributes If a user hovers a value, no matter on the left or the right, an info text to that value will be displayed where you can see "Will" and it's description at the moment. If the user doesn't hover over anything, there'll be an explanation how to use the attribute "builder" and how to get more info for certain values (by hovering over them). As I said - This part ist pretty hard. Long names, long values, lot of text and also we want the user to change primary values. I tried out a few things here, and this is what I liked the most. Not sure if it's the best. I wanted to avoid hidden info, like with a scroll bar or tooltips, or... Another way would be, to use the info box ("Will") just for primary values and use tooltips on the other values (primary and derived). That's something we might want to discuss.
Banes and boons |
|
I would imagine you would also have the character name up on the top left of the stats screen as well? I kinda like the concept that you have on the stats page where you see like a history of your choices up on the top left, that can maybe follow all the way through the whole character creation maybe? |
Yeah, that was the idea. On the next page, I wanted to add the primary attributes as well to the top, with shortcuts. Your idea with the name is great. I will add it on the next version! |
|
JB asked me to register and comment on this. Realm Select I'm not a fan of dropping the artwork in favor of walls of text. If anything I would like to lean much more heavily on audio-visual realm thematic elements to help guide players more by look and feel at a glance before committing to reading a long form description. Class and Race I might drop gender below the race portraits and lower the opacity slightly all around on the panels to let the background show through as in the current version. Still looks like we've lost the race specific stat mods and race/class based mandatory banes and boons for players to look at when making these choices. Attributes I would prefer to have a way to type in values in addition to spamming + and - buttons to get to a target value. If we want to replace dynamic mouseover tooltips with a fixed panel maybe its best to push it to one side or the other rather than in the middle? Hopefully we can get some indication of recommended stats for the selected class, and also show what derived stats will change based on primary stat being moused over with a highlight or something. |
|
Hey Ben. Realm Select Right now, there's quite some text on the realm selection, which at the moment doesn't fit the screen. So either those texts have to be shorter or we might need scroll bars again, which from an UX perspective isn't perfect. Those infos will be considered as hidden infos. I mean, if you decide to use scroll bars, I can add those on the design. I just tried to avoid those. Class and Race I can check the opacity on the panels and test what it it looks like. Again - I don't know anything about those banes and boons, and wasn't aware of, that they had to be added to the classes and races. Maybe you guys can provide me with details. Overall it makes the design I created useless, as more infos mean, that we need another layout. Have to check it, after we have collected all infos. Attributes On the other parts - To be honest: I might not have enough insight on what you're talking about. Like with, which stats effect others and so on. So it's quite hard for me to design it. I think I get what you're talking about, but I might need more details on it. P.s.: Sorry for any typos. I am in a hurry right now, as familiy is waiting for me. :) |
|
Hey guys, before I can work any further on the layout and design for the character creation process, I have the feeling, that we need to check first, what infos we want to display and which features you want to have included. Therefor I'll add a listing below, and it would be great, if you guys might add anything, which is needed. First step - Realm selection
Questions:
Second step - Class & Race selection
Questions:
Third step - Attributes
Questions:
Fourth step - Banes & boons
Questions:
|
|
On the stats screen, can we highlight the affects stats when I add say +vitality so I can easily see what changes when I increase or decrease that value (rather than having to watch for numbers changing). |
|
@Heartfyre The most important thing first is to block out the UX changes. fine detailed design, like what images to use, colors, ect will come later. I am not at all concerned with that at this time. Required info on each Category: Realm / Faction
Race
Gender
Class
For Banes and boons there will be several categories of both banes and boons and you will have a set range of "points" total for Banes and Boons you have to be within. Each Bane and Boon will give some points, values are different per item and some Banes & Boons can have multiple stacks, like tier 1 X, tier 2 of X, tier 3 of X and so on. There has to be a balanced point value of Banes vs Boons. On an older version of character creation we had a bar which you had to balance while selecting Banes & Boons to balance this. Info on Banes and Boons will be a name, tier/rank (if there are multiple for that one), and a description + w/e stat adjustments this may give you if any, will exist likely along with the description. |
Character Creation DesignFirst thing to note is that we will be moving character creation from the Patch Client into the Game Client. This gives us much more space to build out this UI plus allows us to use the games 3D renderer to render characters if we desire it. Realm SelectInitial realm select page will first show a quick 'at-a-glance' view of each of the three realms. This should be done heavily through imagery, minimal text. Each Realm will have their name of course displayed, as well as a realm icon, and art to give the player an idea of what each realm's differences are from each other. For example, Arthurians could have a shield and a knight in shining armor to give an idea of this realm is about nobility and defence. Vikings have some swords and some art of a beserker smashing something or whatnot to show they are a realm focused on attack ect... Beyond this quick bit of info, the user should be able to select a realm and view more info about the realm. This will change the layout of the UI a bit to minimize the other realms, and focus on a highlight reel for that specific realm. This is not going to be something super in depth, but just the key points about that realm to help with their decision. Included should be any required realm Banes & Boons as well as any Realm specific ones. It should be easily visible how to go back out to pick another realm to get info about that one instead. Race & Gender Select + Class SelectFor both this and the class select we want to focus more on visually showing what options you have through large full size images of characters rather than the small head icons we have currently. Think more like Warhammer online character creation (http://static.giantbomb.com/uploads/original/1/17172/1626086-warhammer_01.jpg) or with Revelation Online (http://i1374.photobucket.com/albums/ag403/speciallymadeformee/Revelation/1.%20Class%20descriptions_zpsd1ge9kwd.png) where you can see your choices standing there in a cool pose to select, or animating. Information that needs to be given for these screens are the standard info, names, some text description, plus any stat changes based on the selection, as well as any required Banes & Boons for the gender and/or class plus the different Banes or Boons you will have access to based on these selections. Stat AllocationPrimary stats need to be allocated and should be done before Banes & Boons. It needs to be clear what each of these stats do and how they affect the character overall. Banes & Boons SelectThere are going to be a lot of these things, we need to have a clean and simple way to view these things. They will have several categories, Realm based, Race, Class, and then maybe a few others which can help with organization. We have to clearly show the user that they must meet the requirements for Banes & Boons, there will be a minimum & maximum total values allowed for Banes & Boons selected and Banes & Boons need to be balanced based on value of the ones selected. Overall DesignThe overall progress throughout chracter creation shoudl be tracked visibly so that they use can easily go back and change things. Every change made should be clearly visible to the character what the implications of that choice are. This means that we would like to also see a 'character sheet' of sorts being built up on screen as you progress through character creation becomming more and more in depth as you go, start it out simple as you only have some basic info, Realm first, then build it up as you go through. |
|
Hey @Heartfyre! Thanks for working on this :) Here is the old mock up what I had for traits(banes & boons): This was when we showed the stats changing when users picked their traits. The boons have to equal the banes in points for it to be complete. And you have to use the min/max points. It's kind of like the skills tree on LoL or other games with skill trees. Hope this gives you a better idea of what it is. |
|
Consistency and product identity General thoughts Attention: The following concepts are only for UX and element positioning, but not about design in any way! So please ignore element design and coloring at all!Realm selection Sound design: An option might be, that when the user first enters the realm selection, a general music track is being played, which then changes when he picks a realm by clicking on it. Those music tracks will be realm specific and give the user a sense and feeling for the realm he’s going to play. The specific track plays though the character creation progress, based on the chosen realm. 1 – Summary bar: Here the user will see different info based on the progress he made during the character creation. Those might be the realm, the class, race, name, and so on. Please see the main concept for the summary bar for more info. 2 – Realm name: The full name of the realm displayed on the designated card. 3 – Realm card: The realm card (see general thoughts above) is an independent element on the realm selection screen. It might be an option to have it slightly moving on it’s axes, depending on where the user moves his cursor on the screen. Also, it might be useful to have a drop shadow, which might be increased, if the user moves over the card or selects it. 4 – Banner and shield: Each realm card is having its own banner in the background, which might be animated, like it is floating in the wind. The banner represents the realm color and a realm icon, like a realm shield. 5 – Card background: On the background of the cards, we might animate or play a video, with scenes which represents the realm itself. Like a landscape or a town, or… This way we create “living” cards, which might look more attractive than a static background. 6 – Character: On each card, in the foreground, there can be found a character, which represents the realm itself. Those characters might be animated and a cool effect would be, if their animations overlap the card borders, so it looks like, that they’re not bound to the limits of the card. Another interesting thing would be if the character of one card reacts to the character of another card beside him. But that would just be nice to have and nothing which is needed. 7 – Background: Behind the realm cards there’s an overall background, which displays a general scenery at first. We might change that background depending on which realm the user did chose and keep it for the rest of the creation progress if needed. The background might be animated as well. Maybe showing a video as well. 8 - Realm info (picture 2 & 3): If a user clicks on the realm, there might be two ways to display info about the realm. Depending on how much info we want to display, we might display it as an overlay on the realm card itself, which leaves us less room. The other cards might be reduced in size or visibility during that time. Another way would be to display realm info on the available space, while we remove the other cards during that time. This way we’ll have way more space for info, if we need it. 9 – Confirmation: The user has to confirm his realm selection by pressing a button, which will lead him to the next step of the creation process. If we chose to use the bigger overlay for realm info, we might need to add some kind of cancel button as well.
Race and class selection General thought: I added two different versions. On the first all the info and elements have been arranged on the bottom of the screen, while on the other elements have been added on screen. With the first one all the available space in the center of the screen is for the class and/ or race. The second one is an approach where I consider the future in-game UI-design. UI elements: Again, the UI elements are just placeholders. If we use backgrounds on the final design or whatever, we have to consider it later. Right now, it’s just to demonstrate where elements will be placed. 11 – Unselected races/ classes: Each race or class is being displayed on the screen, while the active selection always can be found in the middle of the screen. Every other race or class will be positioned left and right of the active selection, with some space to the selected class. The positioning of the classes and races on the left and right side might be changed later. The displayed characters may be animated or change there (combat) stance from time to time. 12 – Race and class name: If a user hovers another class, the name of the race or class will be displayed below the hovered race or class. Again – The background is just for positioning reference here. The element will be designed differently. 13 – Selected race and class: The selected class or race will be displayed in the middle of the screen. It’ll be slightly bigger as the others and maybe highlighted in another way. As with the others, we might want to animate it. 14 – Gender selection: Two icons, so the user can switch between genders. Might be positioned elsewhere. 15 – Race or class name: The full name of the race or the class. 16 – Race or class description: A short and brief description of the race or class. Maybe we need to resize the element or add a scrollbar, depending on the actual size of the text itself. 17 – Stat changes: Any stats changes, which come with the class or race selection will be displayed here. We later can decide, if we want to display it together with icons or text only. We also need to check, if we need to add a scrollbar here as well. 18 – Banes and boons: Any bane or boon, which comes with the selected race or class, will be displayed here. We might want to split it into two separate parts, to make it more clear, which one is good and which one bad.
Attributes Main goals: With the final design, we might want to make sure, that the overall design with the attributes doesn’t look like a big excel table to the user, which might be overwhelming. We need to make sure, what is important and which things need to be added by the user. Also, white spaces can help with the overall impression. 19 - Primary stats: Those stats are the stats which will be changed by the user. Each stat will have a field, where the user can change the numbers by arrow or by typing them in. Maybe we can add a scroll feature as well, where the user can change the numbers of a certain attribute by hovering it and scroll up or down. 20 – Secondary stats: Secondary stats will be displayed on top of the screen. We might want to separate it from the main stats by color, the font as well as the overall design, like with the background. 21 – Derived: All derived stats will be displayed here. It might help with the overall impression, if we group them again within the window. Like grouping resistances, regenerations, and so on. Grouping will help the user with getting an overview and get which stats are doing what. 22 – Explanation, help, hints and tips: This window will be very important with the overall process. Here the user will get help, find detailed info and check for stats which effect other stats and so on. Please check A, B and C for more info! A and B: If a user hovers over any of the stats displayed on the page, it won’t be displayed be displayed on the explanation window only, but each stat which is being affected by this stat will be highlighted. For example: If the user hovers over the agility stat on the left-hand side, each stat, which will be affected by agility will be highlighted on the screen. We might work with different colors here as well, if a stat might have positive and negative effects. The same goes for secondary stats and derived – if a user hovers it, he’ll see, which primary attribute he has to change, to change the stat he’s hovering. C: Whatever a user hovers on the stat screen, he’ll get additional info on the explanation window on the right-hand side. It might be just an explanation, but also helpful info and here he’ll see, if any primary stat effects the attribute and in which way. As well we can provide info, if a call or race is having an effect on that certain stat.
Summary bar 23 – Character name: The character name the user created for his character. Maybe we’ll add a gender icon here or just display the gender as text. 24 – Realm, class and race: Here we’ll display the realm, class and race, after the user did chose them. We might want to add a dropdown, flyout, whatever to those icons, where the user gets a summary of the selected realm, class or race. On the other hand, it might be too much!? 25 – Character summary: Here we might add additional info of the character the user is creating. Banes and boons |
|
Hey @Heartfyre, thanks for working on this! Realm selection: Race and class selection:
Attributes: |
|
Hey Mr. Koo! Regarding:
I think you got it wrong or I might have explained it bad. It's just that the race and class selection looks pretty much the same, while there'll be two steps. First you select your race and on the next step (screen) you select the class. So you have to confirm the race selection, go on and then you select your class, which might depend on the race (dunno). But it'll be clear to the user, that he'll select the race and on the next sreen the class.
Yeah, shame on me. I simply forgot about it. But I agree with you, it will fit the race or/ and class selection screen.
If we can manage to include the needed info into a tooltip, we might be able to remove that big ugly block. I am not sure yet, if combining stats and b&b on one page would be a good idea, as we might ask too much from the user. We'll have a lot of info on one screen and those would be of different types as well. Don't get me wrong here. I am not an expert in game design. So, I am just thinking here. I mean, I can check it out and see, what'll look like, so we can decide wether we want to go with attributes and B&B on one screen or two seperates. |
|
Hey guys, attached you can find a first UX version of the banes and boons for the character creation process. Keep in mind, that it’s only about the overall layout and the UX, but not about design! Important: It might be possible, that I didn’t add everything needed or things might be wrong. I am not sure if I am aware of everything with the B&B system, and also, I am not sure if I did understand everything correct. Please feel free to correct me!
First things first: I designed the B&B as some kind of builder, where the user picks and builds his own character through the banes and boons. This is loosely based on the work of J. Koo, but I tried out my own approach of it. Right now, the B&B is using one extra “page” in the character creation process. We might think about, combining it with the abilities, but as I said before, I am not a big fan of it. There is so many info, both with the abilities and also the banes and boons. Putting it all on one page would result in a lot of info. Also, we would combine too different things on one page, which might be confusing to the user. Again – This is just my opinion. If you decide at CSE to do it differently, I will do my best to come up with a solution. Design: As I said before, this is not about design. But I sure had some design ideas in mind, when I created the layout. My idea was to have banes or boons on the left and the other one on the right side. Later we might want to have the one darker or with a different color, like with red and blue or fire and ice (just for example), and they’ll merge in the middle. Just an idea. Usage: The user can hover the banes and boons, which will be presented by graphics (icons) and select those which he likes. We can do it by clicking or by drag and drop. Once selected, the bane or boon will be added to the builder in the middle. The user can add boons or banes only, if he meets the requirements, like points or the correct balance between banes and boons. Description
|
|
So overall I like the concept. One major issue which I'd like to know about is how does the player know how these bane and boon selections affect their character. This is a big thing that we want to present throughout creation is what each choice means to their character. Just throwing an idea out, how would you think it may look to compress the center selection section down to maybe 1/3 1/4 of it's size towards the bottom, as there is a lot of white space there and maybe having a character sheet type display above it filling the rest of the center section? |
|
Hmmm, to be honest, I might not have enough background info to answer your question in total. Did you guys already talk about, what you mean by "meaninful" and how it would be presented to the user? Or what does "meaningful" even mean in the context of the character creation process. Don't get me wrong here. I am willing to do what ever you want, but I am a bit lost. Maybe I just don't understand what the overall goal is and what the way towards it looks like. Or am I missing something here? :) |
|
The goal is to clearly display to the user what the results of their choices are. Some Banes / Boons for example may be like +10 strength during night or something to that effect... Maybe it's just that the "Summary" section is small and looks more like it would be more of a tooltip type thing. That summary should be more prominent than the selection area as that doesn't give you any information other than, "hey there are slots here for stuff", which can be compressed down to give the important Summary stuff to let the user know what they are doing more. |
|
Okay, I now I understand what you're talking about. I have to think about it and come up with another solution. I think I already know what I am going to do. I'll try to come up with it tommorow. Won't be able to do it today, as it's already late and I have so much going on right now. But I am on it! |
|
Great, looking forward to it! |
|
Okay gentleman, I did create three new versions of the bane and boon layout. Please keep in mind, that those are just ment as a foundation, from which we can advance together, to find the best approach. It's only about the layout, but not the design in any way. With the first version, I did minimize the top part and gave the summary/ overview more space, to have it more meaningful. The second version is similar to the first above, but I did split banes and boons. With the third version I did remove the icons from the center part and gave the summary even more space. With this version the user will see his selection by the highlighted icons and through the summary only. |
|
Seems fine either way. We just need something that basically works for now. |
Updated design for Character Creation UI
The text was updated successfully, but these errors were encountered: