Jump to content

New UI preview!


Chris

Recommended Posts

Here's a preview of how the new UI will look. This is more to keep everyone in the loop as to what we're up to rather than to solicit much feedback at this stage. The UI has gone through enough concept iterations now that we know pretty much what works; in fact in this iteration we've stayed much closer to the present design than previous designs have.

The main changes are:

1) A consistent topbar across all the screens. This improves on the current design which only has 4 tabs on the Geoscape, and vastly improves on the previous "immersive" concept which would have awkwardly used a sign on the wall for navigation. It means that the navigation buttons and the date / money information is all in a consistent place on every screen, which is key from a usability point of view.

2) We've implemented a tabbed "speech bubble" menu type on most of the screens. This has two advantages - it keeps the UI clean as we don't have to have all the information on screen at once (the player can just click to the desired tab) and also it adds more character to the game. There's now a chief on most of the screens, which involves you in the organisation a bit more.

3) It looks a lot nicer. Our painted background are nicer than our previous ones and you can see more of them than before, and the light background works better than the dark one we currently use. It's just much more coherent than before.

Some of the art is placeholder. The topbar name is the same on each page because there was no need to update it, plus the background art repeats on the right-hand side.

I can't be bothered to go into details on aspect ratios, but if you have a 16:9 monitor you'll have the ideal experience from the game. If you have at 16:10 then the actual playable area will remain the same, but there'll be a band of background on the left and right of the screen that will be hidden.

So, here's the UI:

Laboratory Screen:

http://www.xenonauts.com/devimages/3_Research_1610.jpg

http://www.xenonauts.com/devimages/3_Research_1610_2.jpg

Workshop:

http://www.xenonauts.com/devimages/4_Workshop_1610.jpg

http://www.xenonauts.com/devimages/4_Workshop_1610_2.jpg

Barracks:

http://www.xenonauts.com/devimages/5_Barracks_1610.jpg

http://www.xenonauts.com/devimages/5_Barracks_1610_2.jpg

Stores:

http://www.xenonauts.com/devimages/6_Stores_1610.jpg

http://www.xenonauts.com/devimages/6_Stores_1610_2.jpg

Soldier Equip:

http://www.xenonauts.com/devimages/7_SoldierEquip_1610.jpg

Vehicle Equip:

http://www.xenonauts.com/devimages/8_VehicleEquip_1610.jpg

Aircraft Equip:

http://www.xenonauts.com/devimages/9_AircraftEquip_1610.jpg

http://www.xenonauts.com/devimages/9_AircraftEquip_1610_2.jpg

Base Screen:

http://www.xenonauts.com/devimages/2_Base_1610.jpg (this does not yet have a painted background, it's just a layout!)

There's also the Geoscape and Xenopedia screens, which are not yet complete. The Geoscape is being concepted up at the moment. Here's the current concept for the Geoscape screen:

http://www.xenonauts.com/devimages/Geoscape_normal.jpg

http://www.xenonauts.com/devimages/Geoscape_zoomed.jpg

EDIT - if you want to come up with your own alternative concepts (as I'm not tweaking these concepts any more) then you can download the Photoshop files for the UI screens here and have a go: http://www.xenonauts.com/devfiles/finalUI.rar

Link to comment
Share on other sites

Nice and clean look! Good work.

In order to make these look more like a game, not a corporate medical analysis software i would

- make the weapon backgrounds a little transparent

- make all text stat screens a little transparent

- make text have stroke and fill color

- bring out the contrast on the weapons colors a bit.

Like this:

http://img248.imageshack.us/img248/9213/transparent7soldierequi.jpg

Basically the UFO Defense dialog box way:

http://openxcom.org/wp-content/gallery/v0-4/18102011_manufacture.png

Link to comment
Share on other sites

I hope the geoscape map will retain its current build look, i really like the filters and the terrain detail on it as it is. Please dont go all slick and clean on the new one.

Also the barracs art... that guy has his legs spread a bit too wide? And i cant tell if hes an amputee or his left arm is akwardly hidden behind his back. Im cool with the amputee aproach, but his pose needs to be reworked i think.

Most often i play at nights so im not a big fan of white UI. It would be great if you made a grey or some other darker skin as an alternative.

All of these are minor nit pickings but i felt like mentioning them as the majority of replies to these update posts start to seem as mindless praise with a whole lot of adressing you by name. No seriously Chris i've never seen any other community do that to this extent, its becomming obsessive, Chris.

Other than that, great job, Chris!

Link to comment
Share on other sites

People told me the new forums were too white and in-your-face after we migrated from our old dark skinned ones, but those complaints stopped abruptly after the first day or so and I think everyone is happier now. I'm pretty sure you'll get used to the new UI very quickly.

That's my attempt to assuage your concerns, as a dark skin is a lot of work because of the way the engine works (any UI changes are a lot of work) so we won't be doing an alternate skin I'm afraid. Why are light colours a problem at night?

Link to comment
Share on other sites

I'm pretty sure you'll get used to the new UI very quickly.

Why are light colours a problem at night?

Overall screen luminosity should remain within a relatively narrow range. That is not constant, but if let's say the screen puts out an average of 12-20% of white field during the tactical missions, it should stay in a reasonably close range (maybe 8%-30%) in menus.

Otherwise, aside from possible eye strain, it doesn't feel right - reduced visual stimuli from battlefield screen during missions compared to bright menu screens. Also, don't know about everyone, I personally set my screen to a higher brightness/contrast mode for games and a lower one for browsing, text work, etc.

Maybe just correct levels on the present images, replace pure white colors by light gray, or give the menus adjustable alpha (was done in some games)? It looks very clinical/office-like at the moment, with that black-on-white text.

Link to comment
Share on other sites

HWP - how on earth would you end up balancing screen luminosity across the game when some of the maps are covered in bright white snow and others have dark green grass? Obviously it's going to vary depending on the scenario.

Anyway, I'm not going to discuss the background element colour any more as it'd mean changing every other colour that goes on top of it as well (plus it's nowhere near pure white either).

I don't think "the white is too bright" was as a major issue when we unveiled the original immersive UI screens using exactly the same colours, I think most of the reason it's being discussed here is because people are reading the comments on the first page about it and getting hypersensitive to something they might well otherwise not have noticed.

Link to comment
Share on other sites

You did good work and can make it look more impressive by immersing people into the world of XCOM.

Light colored windows with black text:

- might remind players to workplace excel todo's & suffering.

- don't look like a game, but look very much like SAP application or the TPS report from Office Space .

- reduce immersion in game. Look what Master of Orion 3 designers did.

Leaderboard example: make it colourful

http://techblog.dallasnews.com/govision.jpg

Transparency examples:

1.

http://www.blogcdn.com/www.switched.com/media/2011/03/dam.jpg

2.

http://images.collectorz.com/movie/features/play-episodefiles.jpg

Immersion examples:

http://4.bp.blogspot.com/-6ha_hl8IAWE/T2yltGIrM1I/AAAAAAAAA5k/AmGxyaZyHg8/s1600/IMG_0659.PNG

Imagine this with white text windows:

http://media.vcstar.com/media/img/photos/2012/03/30/197046_t607.JPG

Link to comment
Share on other sites

Mercy, I know what transparency looks like. The game is set in 1979 though, so we don't want a super sci-fi UI. Plus, having a more colourful UI won't help you present lots of information in a coherent way.

Now, I'm dismissing most of these suggestions simply because I've spent literally weeks playing about with different iterations of this UI over the past year so I have a pretty good idea of what works and what does not. I'm not willing to waste my time experimenting any further because at this point I'm convinced that the currency concepts are the best option.

However, if you want to demonstrate your own alternative suggestions, feel free to do so. The zip file with all the Photoshop files for the UI is here and you can use that to produce an alternative concept (which has a lot more chance of convincing me than theorycraft):

http://www.xenonauts.com/devfiles/FinalUI.rar

Link to comment
Share on other sites

My only criticism.. the research and the workshop have an awkwards cut/wrap on the right side. It looks like a wallpaper that is too small for the screen and is being repeated again.

Research shows this really well with the computer terminal and the desk it is on (right hand side) just appearing with a hard line and total break in continuity of the flow.

Otherwise like it.. a lot.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...