New UI Concept

[Cynwrig]

Well I have been pretty much just been copying the windows out of the game, rearranging and adding items as I feel necessary. I'll have to go back over them and  "strip" them down if you want things to be more compact. Keep in mind the sizes in the pictures don't necessarily represent what size they would be in game, plus they all won't be that cluttered together.

I started working on the Quests window:

I'll post the .PSD later when I have time, got to clean it up.
BTW the only fonts I have used are Bookman Old Style and Verdana.

[Cherppow]

Greets,

A long one.

@Cherppow: I like the thin stamina bars. I think the softer gradients makes it look so flat but if it helps I guess I wouldn't mind changing it.The text on the status bars is meant to only show up on mouse over like it does now, similarly to the random blue buttons seen in the older screens that I removed to avoid causing confusion. I have tried putting these graphics in game and the borders do come out smudged all over the place and it looks really bad, but I'm not sure how to fix it or if it can be.

Aye, the bars'll look more flat, but I'd sacrifice little on the looks in favour of usability. The mouse over labels are nice, would be good if they could be set to appear on a pre-defined position (over the stat bars), instead of hovering next to the pointer.
 The background stretching is quite bad currently. There is option to prevent windows from scaling between resolutions (resizetoscreen="no"), but many of the current BG images are of different size than the windows they're used in, so they get stretched anyway. In addition if not scaled to resolution, the gui will look tiny on big resolutions (or huge on small res, depending how you set the size). The problem is not simple.

I really do want to redesign the interface and not just re-skin it, so I would intend to rewrite the code although that isn't realistic, I know, but this is just a concept. I think that the interface could use code changes but that would probably "break" the other skins already in the game but I don't think it would be hard to make them work with the new code.

Many changes can be applied with xml, and don't need changes in the cpp code itself. New functions would require support from code though. If the interface is redesigned, old skins will break. But old skins shouldn't hinder development. Stone skin could possibly be transferred with modifications, elves would have to be re-done.

Lowered the gradient effect on the info bars some (not sure how to decrease their height without affecting the visibility of the text)...

Aye, the bars were maybe a little bit too thin. Instead I decided to broaden the health and mana, while keeping staminas quite the same.

I was rather fond of the arc stances Smiley

I dunno it just looks funny to me. Maybe it can have a "click to change style" like the menu bar in the game now.

I'd have to agree with Cynwrig here. I think the design of using multiple buttons to change one thing is somewhat clumsy. However, neither do I like the scrollbar design, currently used in the spell power. I don't think multi-state-button is the perfect solution for this, but I like it better than the two alternatives. Picky me.

I'm thinking about limiting the number of bags you can carry. In my opinion having one "backpack" as the biggest container, then a glyph pouch, and two regular sized sacks would work as a default. I don't want to have an unrealistically overloaded inventory screen with about 10 containers your character would have no idea how to carry Smiley

Thoughts?

Sounds applicable to me, one can only carry so much. Maybe two sacks is too strict though? I mean I can surely carry at least 4 on my shoulders . Depends a bit on the size of course. Hmm, would be cool if backpacks/sacks would appear on the char model. You could spot a "mule" from the distance.

Test with smaller inventory icons:

I like them, and the fact that you could see the whole backpack at once. The only thing that pokes my eye, is the difference between inventory and equip items. Especially since the r/l hand slots are so huge. I'm not sure why it's so in the current inventory. (Is there plans to make bigger than one slot items? And if so, why is torso armour still one slot?) Hmm... but for now, I'd make hand slots standard size.

One thing I want to suggest to fellow artists or conceptors, is to not only make the GUI more visually pleasing but also slicker and smaller. In the Stats and Skills window for example there is no need for the character doll. A lot of the space can be consolidated, so that there is just the bare minimum of unused real estate. Consider what is truly necessary - do we need an online player counter by default? It's neat information, but you will have no real use out of it. Consider how training skills may be made easier through the skill window than a single Buy button. I am a bit distracted with other work, but I would love to see further progress here.

I agree. Smaller and smarter, while still pleasant to view. User interface can make or break a game. If we really want to design new ui, instead of thinking "where should I put this button", we should think "what does the user want to do here, and why". It's not an easy task though, and shouldn't be given to one person/department alone. It's also a double edged sword, the more you change, the less likely the gui will happen. On the other hand if you do a million small changes, you'll end up with a patchwork. eg. do we need to have so many windows? Doesn't loot/quest reward/merchant/trade/containers share the same idea, transfering items between two entities. Could they be handled through one "general transfer" window, and should they be?


Ah well, back to the new UI Concept.

Tried some futher changes to the infowindow.
 - Changed Attack stance and Spell power to multi-state-buttons. (LMB increases, RMB lowers)
 - Added daytime indicator (instead of giving exact time, I like "early morning" or "midnight". Sorry for the wrong font.)
 - Replaced Invite, join and leave/disband with initials only to gain more space for long names. Icons could be even better.
 - Changed inventory window icon to char portrait, clicking opens stat window. I liked the inv icon too though. Not 100% sure about this yet.
 - Changed tooltips to indicate current + "//" + max, instead of percentage. Just personal preference. Also low items appear as red, overcharged as green.

That's about it. Here's the changes in image. First without tooltips, then with tooltips visible.

Thanks for reading, any comments welcome.

[ThomPhoenix]

What about the Stop Attack button of the stance buttons?
It would be clumsy to get to Stop Attack via Normal and Bloody for example.

[Rongar Elani]

Cynwrig, I really like your quest window, especially the part where you could make notes about the quests. The background looks paperlike and the font fits perfectly, IMHO. I wished the all of the windows were a bit more fitting with the setting, though, just like the notes part of the quest window does
Oh, and the health bar is a bit too long, if you ask me. In this case, the shorter, the better Maybe it would even be possible to make the bars a bit more squiggly, not just going straight. Maybe a bit like a spiral in the beginning and then going straight, like this: @_____
Just a thought

[Narure]

You can make notes already and the idea is that its simple and doesn thave curves and wiggles

[Rongar Elani]

I know, I can make notes already I just meant i like the paperlike background and the font. But okay, if the idea is to keep it simple, I won't suggest any wiggles anymore

[Cynwrig]

@Cherppow: I like the multi-state buttons for the stances and spellpower. I agree it wastes a lot of space having all the icons laid out. The stop attack button could possibly be located in the target window, that way it would only appear when attacking something and would be easier to click mid-fight because you would already have your eyes there anyways.

I also like that you brought back the time icon, though I meant for it also to show the current weather. I'm not sure if people use the game time as a reference, but I doubt it so replacing it with general "early morning" seems fine.

Well we could always take advantage of tabbed windows to reduce their number. For example clicking the portrait icon could go to a "character" container window that can be tabbed between inventory and stats. Each tab could still have its own shortcut key as if it were its own window.



     


Just because the design is meant to be simplistic and elegant, doesn't mean it can't have some more "artistic" elements. It's just a matter of 
keeping it clean. That is why I decided to try adding the old-paper-like feel to the quest notes and will also to the spell book. I have redone the Title Bar of the window. I think these few touches help keep the design from being too simple and boring.

I was thinking that clicking the window icon could minimize the window into just the Title Bar as to quickly get it out of the way when you don't want to close it.

[Xanacru]

I haven't examined the posted .PSD files yet but I would also prefer a more compact inventory screen. While I don't mind the character "paper doll" being displayed, I would prefer for it to be smaller and displayed by itself, with the only background being the UI window. Right now, some sort of special room dedicated for "paper dolls" is also visible behind the character.

The right/left hand slots that take up two slots each are also unnecessary because the actual in-game equipment icons only take up a single slot. Also, unless the "elves" UI equipment slots are only used temporarily, simply desaturating them causes quite different intensity in each graphic. That is why such things had to be tweaked in my "Black UI" skin.

Here's a quick-n-dirty edit of an equipment/inventory window from a different game, showing how I'd like this UI's inventory to be adapted:



The "black area" below equipment is for general inventory items (should also have empty slots graphic). And the small window on the left is for a character "paper doll". The small tabs on the very left are for different equipment categories - from combat equipment to crafting equipment.

The money/tria icons in the current UI also take up an unnecessarily large space. Simply position them horizontally along the very bottom of the window's frame. Make the icons themselves a lot smaller. It would look like in a typical RTS (strategy) game with small icons at the top or bottom for gold, wood, stone, oil etc.

[Cynwrig]

I updated the info and party window. I also redid the window styles a little as seen by the quest window:

I'm not sure if I like the squared corners better but I think they will show up better in-game.

[Xanacru]

I personally like the rounded corners much better but if squared ones help with in-game appearance, they're fine too.

Keep up the good work, Cynwrig, it's looking awesome so far.

[socia]

it's great work, I'd love to already have it.
Is there way how to make this working in ps? btw have you looked on pssetup ui too? it would be nice to change that too.

[capetorial]

that LOOKS easy to do..might be able to..not sure tho..but the basic scheme of colors, etc. would be easily done

*edit*

hey, i made a ui too (not nearly as good) but i got a tip you may not know of:  sign up with a guild or something and every time you make a new pane or something, have some fresh eyes look at it, like what i found myself doing is starting off with everything oversaturated then everything turning black so id have 2 schemes int he same ui (not in a good way).  this i found is prevented by having someone with your tastes looking at it with fresh eyes that hasnt been staring at it the whole time.

[ Please avoid making one post right after the other in the same thread. Just "Modify" your first post to add more information. Thanks! --Karyuu ]

[Induane]

Well, the forums provide a nice fresh set of eyes too so getting some readers interested in a thread works wonders.  There are lots of people posting suggestions, just as a WIP thread should be.

Its a great concept and very well done.

@Zan agreed!  Well said.

* Induane raises his super duper slappy hand just in case!

[Zan]

Alright now I feel like wanting to slap random people if no efforts are done to get this in-game.    This work is way better than any of our current UI themes, you guys really should  get working on the actual application of this with this team.

[Mithodin]

this ui is really amazing... i can't wait to see it ingame, really great work