Menu

LEX File Exchange
EA Support Files
SC4 Wikipedia
Network Addon Mod
Dependencies
Chat

Author Topic: The User Interface - Appearance and Organization  (Read 38053 times)

0 Members and 1 Guest are viewing this topic.

Offline townscape

  • Forums Councilmember
  • *
  • Posts: 87
  • Total likes: 0
  • Reputation: 0
  • CityMania Graphic Designer
The User Interface - Appearance and Organization
« on: November 05, 2009, 03:21:31 PM »
OK, this is what I made:



As soon as I get a new PC with a decent Adobe Flash installed may try and make an animated version of it. I also have some window layouts too but didn't want to overfill the first picture. Probably will rework some of the icons later. I think that simcity and cities xl showed that blue is a great theme in city simulators. Although there is a construction layer mode I've made the panel to contain the construction options too. May be fixed

In the upper right corner are the Main menu, Go to region, Load/save, Albums, Screencapture, Exit.
The left panel from top to bottom:
-Terraforming
-Zoning
-Roads
-Utilities
-Services
-Transport
-Destroy
-Folders and Mods Management

funny how I link the banner to the only place I ever post :)
The Greatest place to get a game name

Offline Atomius

Re: The User Interface - Appearance and Organization
« Reply #1 on: November 05, 2009, 05:04:40 PM »
Looks good. Yeah i would agree blue is a good choice. Nice and neutral.

Offline darraghf

Re: The User Interface - Appearance and Organization
« Reply #2 on: November 05, 2009, 05:22:28 PM »
It looks good overall, but I think the UI is way to cluttered.
Darraghf on SC4D, Rainyday on ST, Darraghflah on Simpeg

Offline tomkeus

Re: The User Interface - Appearance and Organization
« Reply #3 on: November 05, 2009, 06:49:19 PM »
It looks good overall, but I think the UI is way to cluttered.

I've come up with a solution for that. It's kinda like Maya's hotbox only simpler and prettier. Essentially my version of UI won't have any buttons or toolbars. When user presses space key, circular menu around cursor appears allowing user to quickly select what he needs. It will also provide circular context menus on right click. I have working prototype for FLTK. I'll upload it soon enough. I've found that it speeds up work very much since you don't have to drag mouse all over the screen to push buttons you need.
#define TRUE FALSE /*Happy debugging suckers*/

Offline croxis

Re: The User Interface - Appearance and Organization
« Reply #4 on: November 06, 2009, 12:55:23 AM »
Sounds similar to the original Neverwinter Nights interface.

Offline catty

Re: The User Interface - Appearance and Organization
« Reply #5 on: November 06, 2009, 02:38:41 AM »
Really like @townscape layout, its got a familiar but a nice sharp look to it  :thumbsup:, but am also very conflicted as I do like the sound of tomkeus idea as well

...Essentially my version of UI won't have any buttons or toolbars. When user presses space key, circular menu around cursor appears allowing user to quickly select what he needs. It will also provide circular context menus on right click...

 :'(

I meant," said Ipslore bitterly, "what is there in this world that truly makes living worthwhile?" DEATH thought about it. "CATS," he said eventually, "CATS ARE NICE.

Offline townscape

  • Forums Councilmember
  • *
  • Posts: 87
  • Total likes: 0
  • Reputation: 0
  • CityMania Graphic Designer
Re: The User Interface - Appearance and Organization
« Reply #6 on: November 06, 2009, 03:33:18 AM »
IMO putting everything into a single pop up menu will confuse the newcomers. At least all data and queries should be displayed, buttons of emergency actions, and buttons that will trigger that context. If you won't have anything displayed, how will you understand your problems.

Anyway, I will remake the interface taking more into account the hotbox tomkeus developed. In my mind the hotbox was a tool that was used for placing roads, terraforming, and now probably for zoning type selection, although if you think that plopables can also be easily used in hotboxes (may look cluttered), I may take into account too.

Back to the drawing board...
« Last Edit: November 06, 2009, 03:45:59 AM by townscape »

funny how I link the banner to the only place I ever post :)
The Greatest place to get a game name

Offline tomkeus

Re: The User Interface - Appearance and Organization
« Reply #7 on: November 06, 2009, 04:17:27 AM »
IMO putting everything into a single pop up menu will confuse the newcomers. At least all data and queries should be displayed, buttons of emergency actions, and buttons that will trigger that context. If you won't have anything displayed, how will you understand your problems.

There is no single menu. I have main menu, with zones button, transportation button, rewards button , like in SC4, etc... Pressing each button opens submenu, again like in SC4, which is wrapped around the first menu an has detailed options.


BTW, townscape, could you also make version of UI where there is no main menu (toolbar) on the left-hand side (in the case we use circular pop up menus)? Could you try putting the RCI indicator horzontally? Wanna see how it looks and how much space it frees up.

I like the overall design of buttons. As far as I'm concerned, I'd go with it for the final version.
« Last Edit: November 06, 2009, 04:25:44 AM by tomkeus »
#define TRUE FALSE /*Happy debugging suckers*/

Offline townscape

  • Forums Councilmember
  • *
  • Posts: 87
  • Total likes: 0
  • Reputation: 0
  • CityMania Graphic Designer
Re: The User Interface - Appearance and Organization
« Reply #8 on: November 06, 2009, 09:57:02 AM »
Should I leave the Movement Panel for rotating and scrolling through the world? And modes like city mode, building mode and god mode?

funny how I link the banner to the only place I ever post :)
The Greatest place to get a game name

Offline tomkeus

Re: The User Interface - Appearance and Organization
« Reply #9 on: November 06, 2009, 11:00:17 AM »
I'd remove the camera controls. I want the entire UI to be accessed with left hand laying over WASD part of the keyboard, and right hand being on the mouse. So camera movements will be done with mouse and keyboard.

As fort the rest, group it by function. Try to free as much screen as possible. I'd put frequently used controls in lower right hand side of the screen (so when user wants to select them he moves his right hand outwards - it seems more natural to me).

Rarely used controls, like Options, Save, Load, Exit, should be grouped in Esc activated menu (we could have Quick Save and Quick Load keys).

For the lefties, entire assembly can be just inverted.
#define TRUE FALSE /*Happy debugging suckers*/

Offline townscape

  • Forums Councilmember
  • *
  • Posts: 87
  • Total likes: 0
  • Reputation: 0
  • CityMania Graphic Designer
Re: The User Interface - Appearance and Organization
« Reply #10 on: November 06, 2009, 11:52:34 AM »
I wouldn't actually rely that much on a keyboard. Simcity 4 camera controls can be handled by the keyboard but they placed the controls anyway.

Maybe organize the ui like most modern mmo's do? everything movable?
Or hide everything if you don't need it with a minimize button...
« Last Edit: November 06, 2009, 12:02:37 PM by townscape »

funny how I link the banner to the only place I ever post :)
The Greatest place to get a game name

Offline tomkeus

Re: The User Interface - Appearance and Organization
« Reply #11 on: November 06, 2009, 12:45:05 PM »
I wouldn't actually rely that much on a keyboard. Simcity 4 camera controls can be handled by the keyboard but they placed the controls anyway.

Maybe organize the ui like most modern mmo's do? everything movable?

Or hide everything if you don't need it with a minimize button...


Well, player will have to use the keyboard in order to build things. SC4 did put camera controls, but they have scattered keys all over the keyboard and made its use inconvenient so they've relied on the mouse. It is very inefficient if you think of it. Relying on the mouse, you use one hand and 3 fingers. If you use keyboard smartly you can use 5 more fingers. You can put camera controls menu which can be hidden, but I would like players to get used to keyboard just like in playing FPS games. One thing that annoyed me with SC4 was having to click too many times and having to drag mouse constantly to build menu in order to do something. Not to mention addons which make menus extremely long so you have to scroll for 5-10 seconds until you find what you want.

Bottom line is: I want player to have all build commands in the vicinity of the cursor and no more than one or two clicks away.

Offcourse, we can leave both camera controls and build menu for those inclined to use them but I would like to see how would UI look without them.

As for movable UI, I'm against it. It was pretty annoying in CXL. From time to time I would accidentally click on piece of UI and drag it to the center of the screen.
#define TRUE FALSE /*Happy debugging suckers*/

Offline JoeST

  • Forums Guru
  • *
  • Posts: 2648
  • Total likes: 15
  • Reputation: 10
  • fbstj
  • CL: Not your average...
Re: The User Interface - Appearance and Organization
« Reply #12 on: November 06, 2009, 12:47:11 PM »
I'd say a 1 key access menu (like space to bring up the circle menu) would be a bit cluttered/deep, you should consider splitting the menus up to maybe modX+space or modX+right click for each submenu, or maybe seperated keyboard shortcuts to open submenu

I like the idea of the round-the-mouse thing though :)

you have to remember that this is just one of the GUI's...any one can make one, with whatever controls they like, it would probably be quite easily to hack a fork of Toms one into something else.

Joe
Copperminds and Cuddleswarms

Offline tomkeus

Re: The User Interface - Appearance and Organization
« Reply #13 on: November 06, 2009, 01:12:30 PM »
I'd say a 1 key access menu (like space to bring up the circle menu) would be a bit cluttered/deep, you should consider splitting the menus up to maybe modX+space or modX+right click for each submenu, or maybe seperated keyboard shortcuts to open submenu

Space will bring up build menu. Buttons will open one submenu. Off course we could use Shift+'1', Shift+'2'... to directly access submenus but it's a little inconvenient. Right click will bring up context menu without the submenus.


Anyway, you'll be able to try it soon, so we'll see how will it go.


Townscape, can you make 30x30 icons for build menu (zones, roads, public transport, rail, airports/seaports, public services, utilities, parks/rec) and upload them here?
« Last Edit: November 06, 2009, 01:20:02 PM by tomkeus »
#define TRUE FALSE /*Happy debugging suckers*/

Offline croxis

Re: The User Interface - Appearance and Organization
« Reply #14 on: November 06, 2009, 01:24:45 PM »
Another option is to copy how launchers work. SuperKey + spacebar, start typing in the name of the program or plugin you want, it will autocomplete it, then tada. Such an interface would be a lot more comfortable for people with a lot of addons.

Offline Jonathan

  • NAM Team
  • Forums Guru
  • *
  • Posts: 2609
  • Total likes: 5
  • Reputation: 25
  • CL: Einstein, Jr. &scl()
Re: The User Interface - Appearance and Organization
« Reply #15 on: November 06, 2009, 01:27:26 PM »
I'm kind of bored of the menu on the left, it was like that in SimCity and in CXL.
Also that design take up too much screen space. I think having shortcut keys like SC4 would be great, as well as being able to change/add shortcut keys to any item. Also a moveable UI would be useful with a lock button, so we don't accidentally move things we don't want to.

Personally I like mouse control (vs keyboard), with short cut keys you have to remember the comibinations for everything, the only time I find them useful is when using/doing the same thing repeatedly. A mouse however you don't have to remember as you just point to the button on screen and click. (what I really want is that keyboard with little screens in each key which change according to the program your using :), but costs 2000USD :( )

I think though the UI should be fully customizeable, using XML or similar which is relatively easy to change. Everyone likes different colours, and finds different layouts easier to use and for widescreen monitors some people may prefer a sidebar type UI.

Just my thoughts.

Offline townscape

  • Forums Councilmember
  • *
  • Posts: 87
  • Total likes: 0
  • Reputation: 0
  • CityMania Graphic Designer
Re: The User Interface - Appearance and Organization
« Reply #16 on: November 06, 2009, 02:51:10 PM »
Townscape, can you make 30x30 icons for build menu (zones, roads, public transport, rail, airports/seaports, public services, utilities, parks/rec) and upload them here?

Isn't that too small? I would double that size.

And also should I include the ones for pressed and hovered?
« Last Edit: November 06, 2009, 03:00:30 PM by townscape »

funny how I link the banner to the only place I ever post :)
The Greatest place to get a game name

Offline croxis

Re: The User Interface - Appearance and Organization
« Reply #17 on: November 06, 2009, 02:53:13 PM »
IMHO, icons should be in vector format (svg maybe?) so that way they can scale

Offline toberas

Re: The User Interface - Appearance and Organization
« Reply #18 on: November 06, 2009, 07:05:33 PM »
Hi, I've been following this project for a while but never felt the urge to pitch in since I'm not a programmer. Really a great project and good to see that it only takes a few people with great devotion and ideas to make something fresh. Chapeau!

I think I can help on this aspect of the game. I've been a betatester for CitiesXL and if anyone of you here was too you'll know how effed their UI was/is. In my betatest period I made a mockup of how I thought the UI could look. They even took some of my ideas to improve their UI (but imo in a half-assed way). I'll post it here so you can decide if i can be of any help or not.


Note: This was the one for CitiesXl, so it's not so much a demo of what i think the controls for this specific game should be, but how I envisioned the UI for CitiesXL.

So if you guys want to I could help out designing the UI.

[edit]

I personally think a radial menu could work pretty well for the build options and/or 'main menu'. That is more or less a click-and-forget menu which you don't need to see the whole time. For statistics and info I'd keep at the most important (cash(flow) and population) in a fixed position.
« Last Edit: November 06, 2009, 07:35:07 PM by toberas »

Offline tomkeus

Re: The User Interface - Appearance and Organization
« Reply #19 on: November 07, 2009, 03:53:51 AM »
Isn't that too small? I would double that size.

And also should I include the ones for pressed and hovered?

I don't want to test UI appearance, but I need some pics to put onto menu buttons because I cannot fit any informative label on a button of that size. Make them 60x60 and I'll set them to size that feels good to me. Maybe 30x30 is too small. I need to see. Just make one set.
#define TRUE FALSE /*Happy debugging suckers*/