The User Interface - Appearance and Organization

[croxis]

Not hard at all actually. One way to do it is create a tree like system, the root being the top of the menu, and then various branches. A standard tree would be created and then each item would say where in the tree to add, and make new branches as needed. This can be organized linearly (as before) or radially.

[townscape]

Hi everyone!

I have something new to show you:
An interface mockup, upgraded


This is the clear screen

Blue for standby, orange for selected

Upper segment (from left to right):
City name - mayor name - population - quicksave - snapshot mode - album - menu button

Lower panel (from left to right):
- Info zone (at hover appears an info type chooser, similar to budget, advisor, etc. in Simcity 4, click for more details)
- Demand graph
- Landscape or Visual mode (naming in progress, is used for camera controls, weather, and other possible functions as first person vehicle view)
- Construction Layer Mode (switch to the tool)
- BUILD (press to show the build menu)

Build menu (From top clockwise):
- Environment (parks, terraforming, trees, water)
- Commercial
- Residential
- Industrial
- Public Services
- Utilities
- Transport (includes freight and intercity such as water and air)
- Roads

Opinion, criticism, suggestions welcome

[croxis]

I like it alot. Nice and minimal, yet the potential for the information to be right under the finger tips.

The only thing that I would add (that I want) is a small terminal feed for news/playeralerts/chat and a text entry for players to insert chat or commands.

[WC_EEND]

I like it alot. Nice and minimal, yet the potential for the information to be right under the finger tips.

The only thing that I would add (that I want) is a small terminal feed for news/playeralerts/chat and a text entry for players to insert chat or commands.

I'll second that I really like it, way better and less of a dated look compared to the SC4 UI

[riiga]

It looks fantastic I must say! 

[tomkeus]

townscape:

It looks great, but we need to clear the thing about the radial menu. The radial menu I've planned is less obtrusive then that you've shown. It is adaptable circular array of buttons, it is not solid object like the one on the picture, but I guess it's my bad since I didn't explain myself at all.

Here's the picture:



This way, menu can be adapted to the number of items, and submenus can be opened, just by wrapping the menu around the parent menu. Also, there is a numerical entry field in the middle, in order for user to have quick, context adapted way to adjust certain values (or text ones if needed)

To improve visual appearance, circular arc strip can be added between buttons, but mostly, the space is empty and it does not block the stuff bellow.

[Nique]

i think tomkeus his menu structure in combination of townscapes solution is the gold we're looking for!  .

What about:

* clicking on one of those items (subitems) to open (optionaly multiple) 'pinable' panels with all (zone/road) types/options for construction, so you can setup your needed panels first in your screen (let's call it build-screens, that you can save, import and export too!), and start building. When you think you're done, you can click them away and reactivate them by the radial menu (or VERY IMPORTANT, a short-key). Maybe we can add an option to 'pin' shortcut icons to the radial menu or the upper/bottom left corner to 'fast activate' a build-screen of choise.

This way, we can support unlimited (custom/plugin) items within the panel.

[tomkeus]

Since client app is going to be plugin based, it shouldn't be too hard to add new UI elements through plugins. Default UI is plugin by itself (actually, almost everything will be a plugin, game will only have a small core).

[DanniBee]

Great job guys! Great job.

[catty]

... Opinion, criticism, suggestions welcome

Really love townscape's idea and it looks great   

my only suggestion is the ability to make it translucent and have a version for left-handed folks

[tomkeus]

Hey, townscape

Can you make the same set o icons, as displayed on circular menu you've shown here, only adapt them to the layout I've shown couple of posts above. Also, could you make a set of icons for transportation submenu? They don't need to be rectangular, and I would prefer to have rounded corners, but if you come up with something else I would like to see it. Save them as PNG files (in order to have transparency).

[townscape]

Here is what i have: four choices

Option 1: One with a solid number of  primary menus and a limited but big enough number of submenu buttons. Alternative of option 3

Option 2: Looks like your illustration only more pretty   More possible primary menus, but in my opinion a little too cluttered. With the addition of more primary menus (max of 12) the Build Menu will start to look quite confusing.

Option 3: Is this the layout adaptation you suggested? I pulled the "Landscape" button to show how the Build Menu is structured.

Option 4:Or is this? (Quick one)



Side note: What numerical values could be needed directly in the menu? I could think of it being a coordinate field in which you enter submenu order coordinates ( 1.Landscapes -> 4.Monuments -> 12.Park tile 12) but nothing other than that.

[toberas]

I think option 3 is the only good one if you want the user interface actually being usable. Those floating icons will be getting annoying when you miss-click for the umpteenth time. You could always make the center transparent if it doesn't work visually (too clunky) but that needs to be seen. I think clunkyness in this version is not so much because of it's size but the lack of further detailing which I'm sure will be improved when a choice is made.

[Jonathan]

What I'd like is option 3 except slightly smaller (takes up too much space on screen) but also instead of clicking on each ring you click on the first icon and keep the mouse button down and just hover over the menus you want to open until you get to the lot/network/whatever you what and let go of the mouse.

EDIT: also maybe some kind of dock where you can put your most commonly used items, which will be different for each user.

and you might think of making sure the UI is touch screen friendly as that seems to be becoming the future of interacting with computers.

but the only problem with circular menus is that what if the user has like 100s of parks or something then how do you plan to fit that into the UI.

[toberas]

Adding a dock to a menu which you think already takes up too much space makes no sense. Also, if you use a specific combination alot than this type of menu lends itself perfectly to use you're muscle memory. And I thought it is proposed to be able to use number codes which is another shortcut.

[tomkeus]

My biggest problem with the option 3 is that number of items in the menu cannot be changed. I want to have menu that can grow to accommodate new items. I already did some test last year with such menu structure with FLTK and I never had any problems to pick stuff from the menu. Maybe I should upload a small app for you to check out how that menu feels.

[Jonathan]

Sorry I didn't mean to the actual menu, but like on the edge of the screen (kind of like a Mac Dock in that sense). but yep just ideas.

[croxis]

100 parks is going to put any interface under a lot of stress

(Side tangent. What if parks were another zone type? There could be family/neighborhood park zone, wildlife/habitat/nature reserve zone, maybe a couple others. maybe not, something to ponder.)

The last thing we want is the problems SC4 interface had. My intention is to have a UI where the content creators can create new menues, submenues, subsubmenues, and so on as needed. This is something I want the user to be able to override as well.

I do think a dock could work well, especially if users can create custom settings like intersection types and so forth. Taking a look at MMO GUI might not be a bad idea in this case (minimap, doc, chat/command/news window).

Some links of interest:
http://en.wikipedia.org/wiki/Pie_menus
http://www.donhopkins.com/drupal/node/128 Python pie menu by Don Hopkins, who wrote much of the Sims1 and its UI.

[MOREOPTIONS]

How about a menu that can show a beter object than we see when trying to add to the city you are working on.  Perhaps one that you can split your screen.  if you have two screen's  than one will show your object and the other your city.  This would have to be scripted to make SimCity 4 D to operated in a framed window or only to one of your screen's  without taking over your complete system.  Yes/ theres the options of adding the -w and res into your exe shortcut. but that still pauses the play of your city when your using other applications.  I know it's possible...  so if you creat a rolodex menue for all types of addons and plapables.  than you would have a good thing.  and make it so you can breack it away from the main play screene and be outside on a diferant box or screen.  well.  Dont know.  something to look into I think.  Thank you everyone for all the good ideas and things here at SC4D AND THE LEX.  God Bless

[tomkeus]

The last thing we want is the problems SC4 interface had. My intention is to have a UI where the content creators can create new menues, submenues, subsubmenues, and so on as needed. This is something I want the user to be able to override as well.

This is exactly what I'm talking about. But I guess we'll have to make some small demo to see how is that going to work with the crowd.