Ideas for a UI facelift

Contribute art for mainline Wesnoth.

Moderators: Forum Moderators, Developers

Forum rules
Before posting critique in this forum, you must read the following thread:
Post Reply
Max
Posts: 1449
Joined: April 13th, 2008, 12:41 am

Re: Ideas for a UI facelift

Post by Max » April 18th, 2013, 5:16 am

the textures look really nice. it's hard for me to imagine how they would look in the game (a mockup would involve changing the files in data/core/images/themes i guess).

another thing in the UI that could be improved is the progress bar. reducing it to half the height would make it look much nicer...

User avatar
LordBob
Portrait Director
Posts: 1228
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: Ideas for a UI facelift

Post by LordBob » April 18th, 2013, 7:13 am

Blarumyrran wrote:If you're intending to seriously rehaul the entire game UI, then here's some planning i had for the ingame screen: http://forums.wesnoth.org/viewtopic.php?f=9&t=35589 (less modular than the current panels, & very heavily icon-based as opposed to the current (translatable, otherwise unpredictable & unorganizable) keyword-based). I ran out of steam there mostly because I figured such a change should come together with a change to the entire UI in wesnoth, and that task seemed to big to be fun.
I like a lot some of the ideas in there, especially the icon-based unit description and the way even decorative elements carry information.

However, I can also name possible complications:
* First and foremost, my complete lack of a coding skill. Without the help of a willing dev, I simply cannot make it. At all.
* With my limited understanding of how the current UI works, I can't tell if it's even possible to overlay fixed UI panels on top of the map. A recent discussion with fabi on a similar subject hints that it may cause screen-refreshing glitches ; I would appreciate if someone with sufficient insight on current and future UI capacities could fill us in.
* Your proposed layout results in dense panels that are crammed-ful with information. I would try to make use of the extra space gained from forsaking text-based info to clear up those panels.
* Similarly, I would steer away from tiny icons: if we're forcing the player to parse visual elements, then at least we should make sure they'll be easy to read.


But yeah, I would really like to include some of those changes in the upcoming UI facelift
Want to see more of my art ? Visit my portfolio !

User avatar
LordBob
Portrait Director
Posts: 1228
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: Ideas for a UI facelift

Post by LordBob » April 18th, 2013, 9:48 pm

Me again. I've done some more graphic research, this time for borders. Most of it is loosely based on West's earlier work, the point here being to chose the ones that ought to become the leading style for the entire UI.

Also, note the use of yesterday's "ebony" style on panels : based on comments received both here and via IRC, I'll be using this one as background for the standard theme.
Attachments
UI-editor-templates-borders-samples.jpg
Want to see more of my art ? Visit my portfolio !

User avatar
8680
Moderator Emeritus
Posts: 742
Joined: March 20th, 2011, 11:45 pm
Location: The past

Re: Ideas for a UI facelift

Post by 8680 » April 18th, 2013, 10:42 pm

Of the three border types at the top, I prefer the second, and dislike the third — I took some time to notice the variation, and when I did I found it jarringly abrupt.

I dislike the flat square gray line borders of B and E — they seem to me to clash uglily with the other borders, which look to me like they are trying to look like metal, whereas these look like matt plastic.

I dislike C’s border — it seems to me too heavy, clunky, obtrusive.

I like A and D, but I do not know whether I prefer the unassuming A or the ornate D.

fabi
Developer
Posts: 1223
Joined: March 21st, 2004, 2:42 pm
Location: Germany

Re: Ideas for a UI facelift

Post by fabi » April 19th, 2013, 2:53 am

Blarumyrran wrote:If you're intending to seriously rehaul the entire game UI, then here's some planning i had for the ingame screen: http://forums.wesnoth.org/viewtopic.php?f=9&t=35589
The gap between an upper part and a lower part of the sidebar is a good idea.
Sadly, the game map is bound to a rectangle shape.

I could be wrong with my prediction that a complete recode of the map drawing routine is necessary to implement something around it.

You can have widgets above the game map.
But those have to be drawn in volatile mode, meaning they need to be refreshed every frame.
If not, the animated map parts will draw over them.

Most likely this would reduce the frame rate noticeably.

This is not a definitive call off, I never tried anything comparable.

User avatar
SFault
Posts: 482
Joined: November 10th, 2009, 2:21 pm
Location: Esbo, Finland

Re: Ideas for a UI facelift

Post by SFault » April 19th, 2013, 4:44 am

LordBob wrote:Me again. I've done some more graphic research, this time for borders.
I'm not sure if it just for demonstration, but the borders are strikingly bright. Now they jump out. IMHO they should stay in the background and let the icons stand out. Also, since the editor is pretty much WYSIWYG the actual editing area should be the most foregrounded (and big enough).
segmentation fault
EBfW, GtR, Art, Old art

User avatar
LordBob
Portrait Director
Posts: 1228
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: Ideas for a UI facelift

Post by LordBob » April 19th, 2013, 6:45 am

fabi wrote:The gap between an upper part and a lower part of the sidebar is a good idea.
Sadly, the game map is bound to a rectangle shape.

I could be wrong with my prediction that a complete recode of the map drawing routine is necessary to implement something around it.

You can have widgets above the game map.
But those have to be drawn in volatile mode, meaning they need to be refreshed every frame.
If not, the animated map parts will draw over them.
Now that would be a nice feature for a future interface. Being able to isolate "holes" in the map that are not refreshed and thus allow for fancy-shaped GUI panels... 8)
Want to see more of my art ? Visit my portfolio !

User avatar
homunculus
Posts: 537
Joined: July 21st, 2010, 9:47 pm

Re: Ideas for a UI facelift

Post by homunculus » April 19th, 2013, 7:14 am

@SFault:
I also like less contrasting GUI-s.
That means I think even the "a" borders are too bright, it could be like the darker color of the second border on top, perhaps even darker.
Which would make the material look like copper or bronze.
(the same way, the golden hex could be thinner and less bright than it currently is in game, and in the map editor the terrain selected for left mouse could have a less extreme colored box around it)

When people use the map editor or play the game they see the HUD so many times that they start to notice very small color differences in the HUD, so in my opinion those very small color differences would be better.
Like you perhaps remember when in GUI design people used thick raised bevel borders for toolbar buttons everywhere, but now they often use almost unnoticeable color differences for the button area, or an almost unnoticeable border, or even nothing at all for non-highlights.

@fabi:
If there needs to be an empty area, could it be filled with some info that is of secondary importance?
A scrollable list of units with unused movement was my first thought, but I am not saying there cannot be any better ideas.
Or a scrollable list of tombstones for the casualties.
campaign ruthless in your nearest 1.11 add-on server
some wesnoth-related drawings

User avatar
LordBob
Portrait Director
Posts: 1228
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: Ideas for a UI facelift

Post by LordBob » April 23rd, 2013, 10:03 pm

No new screens yet (most of the work is currently taking place behind the scene as we're revamping icons, buttons, and stuff). Instead, I'm posting here the textures of the backgrounds since someone might have a use for them in future projets (theming and such). The attachment isn't exactly the same as what I used, but they're part of a set that I built using a similar approach. You can use them as backgrounds, cut them into pieces or create artwork based on them: anything's possible, they're free for the taking
Attachments
textures.zip
(7.08 MiB) Downloaded 236 times
thumbs.jpg
Want to see more of my art ? Visit my portfolio !

User avatar
LordBob
Portrait Director
Posts: 1228
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: Ideas for a UI facelift

Post by LordBob » April 28th, 2013, 10:41 pm

Studies for various panels and dialogs. They take a lot after West's initial research because I really like the style of thin borders he was developping, but of course I have adapted them to the colour scheme of the new UI.

Overall I would like to establish a visual hierarchy between the UI's dialogs by playing on the materials, textures, transparency, thickness and style of their borders... I don't have proper names for them, but here are the categories on which I am working
- Samples A1-2: dialogs that completely steal the focus, such as the campaign selection dialog, multiplayer lobby, load/save dialog, ... Key features: opaque backgrounds, heavy frame, ineer borders isolate different functional areas.
- Samples B1-2: dialogs that propose an interaction related to the game currently in progress, or that are purely informative but still require a button click. Transparency may be involed whenever the user should be able to follow the game's progress underneath
- Samples C1-2: menus, scrolldown or contextual
- Sample D1: tooltips

Note that none of these concepts is finalized yet; as usual, I encourage you to say what you like and don't like in any of them. Further plans so far involve brighter borders because many of these dialogs do not stand out enough right now; beyond that, everything's open to discussion.
Attachments
UI-dialogs-mockups-02.jpg
UI-dialogs-mockups-01.jpg
Want to see more of my art ? Visit my portfolio !

User avatar
LordBob
Portrait Director
Posts: 1228
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: Ideas for a UI facelift

Post by LordBob » April 29th, 2013, 9:50 pm

Further research on menus and dialogs. E1-3 all work together and are pretty much final. E4 however isn't finished; compared to the earlier A1-A2 attempts I optimized it for easier tiling, but it isn't as elegant. So maybe our ideal default dialog ought to be a mix of all three.
Attachments
UI-dialogs-mockups-03.jpg
Want to see more of my art ? Visit my portfolio !

User avatar
LordBob
Portrait Director
Posts: 1228
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: Ideas for a UI facelift

Post by LordBob » June 19th, 2013, 4:10 pm

Hello crew. A lot things have been happening behind the scene (read: "on the #wesnoth-dev channel") to define the future game UI. Together with fabi, vultraz, and many others, we have discussed concepts for a while now, and we are glad to have reached a point where we feel confident enough to propose these mock-ups, on which I spent the better part of the last few days.

We are aware that this new UI design may require new artwork for UMC creators who have introduced custom Time of Day schedules, abilities, or terrains. In order to meet their concerns, we also plan to implement a lighter theme that will ensure the continuity of the current text-oriented theme.
Attachments
UI-game-mockups-07.jpg
UI-game-mockups-08.jpg
Want to see more of my art ? Visit my portfolio !

User avatar
Telchin
Posts: 330
Joined: December 20th, 2010, 10:01 am
Location: Czech Republic

Re: Ideas for a UI facelift

Post by Telchin » June 19th, 2013, 7:57 pm

I've just posted in the "Wesnoth turns ten today" thread how this game keeps improving and here I see a taste of future improvements. Cool! :D I'm bit worried about the issue with those ability icons creating a rift between "mainline" and "UMC" abilities (as I understand it I'll have to make icons for my custom abilities myself, right?), but I trust the developer team that they know what they're doing. Keep up the good work! :D

fabi
Developer
Posts: 1223
Joined: March 21st, 2004, 2:42 pm
Location: Germany

Re: Ideas for a UI facelift

Post by fabi » June 19th, 2013, 8:02 pm

Telchin wrote:... I'm bit worried about the issue with those ability icons creating a rift between "mainline" and "UMC" abilities (as I understand it I'll have to make icons for my custom abilities myself, right?)...
We will have some extra icons for user made custom abilities/traits/weapon specials/unit statuses...
Those can be used by UMC designers if they lack of proper artwork.

Still, if an addon makes heavy use of custom features, the designer can enforce the usage of the classic, mostly text based theme.

User avatar
Iris
Site Administrator
Posts: 6588
Joined: November 14th, 2006, 5:54 pm
Location: Chile
Contact:

Re: Ideas for a UI facelift

Post by Iris » June 19th, 2013, 11:21 pm

I won’t comment on the art aspects of the new layout because I don’t feel I could provide any useful comments besides “Good job!”, but it seems like the emphasis on the End Turn button is a little too much on the flashy side with the unique decoration around it. That might be just me, though.

I like how the income and gold display are unified in the proposal to save space. There is currently an additional display in the production game theme for unit upkeep, but I don’t know how widely used it is or whether anyone understands what it’s supposed to mean.

I see the clock display is gone in the proposal. I assume it’ll be made so it only appears in games with turn timers? (This is an EasyCoding idea at the moment.)

I have to say that I find the rest of the proposed layout to be more than a bit cluttered with the large amount of permanently visible icons and buttons on the sidebar. I don’t need to be able to toggle the hex grid in-game and I doubt many other people do, so I don’t see the point in exposing that option when there is already a way to toggle in Preferences → Display or using keyboard shortcuts. I will never use the zoom slider either since the function is both slow and not very pleasant-looking due to the scaling algorithm in use and terrains being always designed for the default 1:1 scale.

Displaying the current playing side’s team color above End Turn seems redundant with the flag provided in the top bar’s turn counter. Displaying all other side’s team colors in the same place seems to be proposed under the assumption that the maximum amount of sides a scenario can have is 9—it’s not—and that there won’t be multiple sides in the scenario with identical team colors, which is an assumption I actually break from time to time in one of my campaigns. How would hidden sides (either for story reasons or in order to create the illusion of a single side with different AI behaviors without coding a more complicated AI) be handled by this feature?

Displaying the unit’s alignment status in a manner that is always relative to the current ToD doesn’t strike me as the most intuitive thing to do for players who may need to think ahead (turn-wise) about how they’ll use newly acquired non-standard units. Also, why is the alignment displayed both in the lower area and the ToD/terrain display area? It wastes a full line that could be used for more information in the former (especially for units that have four or more attacks). It also seems like the terrain defense would belong in the ToD/terrain display area instead.

The attacks list display uses shrunk weapon icons in your mock-up, which reminds me that it’d be a great idea to make the icon frame separate from the individual attack icons (bug #20387 [Gna.org], not mine though) since otherwise it might not look very good automatically downscaled by the game.

There have been some complaints in the past about how much Wesnoth relies on colors to display unit allegiances on the game map and how this isn’t optimal for people afflicted by different forms of color blindness. I’m not sure the proposed color-coding takes this into account since that isn’t mentioned in your post.

Making the unit’s current level into the XP icon needs to take into account that some add-ons (including one of my own) might have very rare units which go up to level 10 or even more.

It also seems you removed the unit’s race display. Yes, it’s arguably redundant in mainline, but I’m not all that sure about UMC since I don’t play any other people’s add-ons.

I assume the second bar below the menu bar will only be visible in replay mode.

Finally, I have to agree with the concern about artwork for user-made content. Not all add-ons replace mainline units and abilities or weapon specials in their entirety, so it seems more than a bit odd to be forced to switch to a “text-mode theme” in order to allow custom content to coexist with mainline during scenarios. I know the community is generally good about making new unit art, but designing unique semantic icons requires different additional skills than drawing some person on wizard robes for displaying on the map. There is also the matter of similar abilities with different strength, such as heals+4 vs. heals+8, or cures vs. heals+4+unpoison, or weapon specials with variable attributes such as plague(attacking unit) vs. plague(walking corpse) vs. plague(custom unit).
Author of the unofficial UtBS sequels Invasion from the Unknown and After the Storm.

Post Reply