Overall Clash Interface Design
At Mark's suggestion, this is an attempt to kickstart some debate on the Clash Interface.
After a quick cull of past threads, the state of play seems to be...
---
A) The main interface
1) Layout:
The main screen to be broadly similar to Civ2 - ie. a BIG main map screen bordered by data panels & optional bells and whistles.
2) Elements onscreen:
Small map: right-clickable for menu: overview of known map (ala prev versions of civ); Pop overlay; Resource overlay; Mil overlay.
Main data panel: Overview of what's going on in the game:
-overall income and expenditures (and allow you to up tax rate...)
-internal political status (Upper Class happy, peasants on the verge of revolt...)
-army size (mobilised / demobilised / mercenary)
-economic status (growth rate shown in icons)
-technological status
-diplomatic state (w/ most important neighbours and is relation getting better or worse)
-type of culture and any directions its moving
Secondary panel: showing contextual data, ie. highlight or click on a TF etc. to see info on the units that make it up along with some pretty pictures.
3) Presentation of data:
Numbers are obviously the main area of contention. The favourite solution at present is to have some overview stat bars as default onscreen, they can be clicked to bring up more detailed information. Some suggestions made:
- Your civilizations happiness could be a bar that goes from black on one end (rebellion) through red, yellow, green, gold (celebration), then if the user wanted to know the exact percentage or the exact number in each category, just click on the bar and pop up a subwindow giving the exact
values.
- 'Bars' themselves can be made more visually appealing and informative than either straight bar-graphs or digits. Happy faces for happiness; use of unit badges etc.
- it seems that everyone is in favour of dropping actual numbers as long as the potential complexity of data is retained.
- This also allows for realistic partially-blinkered leadership, ie. it does away with the situation of a player knowing, to the second decimal place, exactly the percentage of food/whatever produced and therefore
micro-managing for hours to max the values.
4) Customisation:
Most people seem to like the idea of displays looking appropriate for the Civ using TIF overlays.
What about, ala Netscape/IE web browsers, drag-and-drop/rippable elements - the user chooses what data he wants onscreen at one time alongside the main map/data panel?
B) Interface levels
1) The high-level interface:
Should provide the player with a snapshot of what's going on, and how it compares to that of the main rivals (selected by player).
2) Civ-wide detailed interface:
Here you can pick civ-wide levels of eg. state of economy & top-three to-do picks
of your advisor. There will also be icons leading to micro-management screens.
It would also have a province map leading to...
3) Provincial detailed interface:
Would show most of the stuff in 2, but at the provincial level.
C) General points
Interaction: Mostly mouse based for the beginners, but teaches the player how to use the interface better; uses the mouse and keyboard equally at advanced levels.
Use of right-click context menus similar to SMAC.
---
Comments/criticism welcome.
Have I missed anything obvious? Is there anything dreadfully wrong about the way the Interface seems to be heading? Any suggestions for a radically different approach?
As we all know, a bad interface can kill a game, so if you feel strongly about something now would be a pretty good time to voice your concerns
[This message has been edited by Darren_McGuicken (edited December 13, 1999).]
yeah I was thinking a small bar across the top would be a good place for customizable icons. It would also be nice if there was a little area with buttons that would control the screen. Like a page up, page left sort of thing so you could easily scroll the map. Half a screen and two screens would probably be good settings, and in between them could be a button to center on the selected unit.
Darren:
Thanks for the summary. I will try to put up something more thoughtful when I'm not at work...
All:
I will have demo 4 out soon. It raises several interface issues all by itself! I think everyone playing around with what I have so far, resizing and moving around windows, etc., we can get an idea of how much screen space should be devoted to the main map etc. In parallel with that, a few demos, as Paul says, would be valuable in getting everyone going in their thought processes.
I think the fundamental things to keep in mind are:
1) Any interface spec we formulate needs to be fairly flexible. We just can't forsee every way the design will evolve from here. Part of the reason IMO that a lot of commercial games have lousy interfaces is that the specs are locked in before the game design has fully taken shape.
2) We need to provide the player with ways to get quick overviews of everything important. And also to be able to Affect those parameters in easy ways. You will see in the demo a crude way for the player to get an overview of the size of military threats in the whole local area (about half of Europe).
3) Allow the player to interact with things as turns are run continuously under the player's general instructions. This is necessary IMO to support the One-Evening game concept. It also supports an RTS-type game for those who are into that.
Yea there needs to be something on the characters/dynasty's, which notable ones are there and a screen for managing ur rulering dynasty if app. Also a a screen to visit ur advisors and such.
Darren: Nice summary of the interface. I think that you've hit the main points, and we may just need to debate the details. A prototype is probably in order to help guide the discussion (something that I'm finding out in my real-world job. People often can't really decide what they want unless you show them a picture - myself included!)I think that Glak's ideas re: buttons/icons should also be included (this falls in the details category).
Now for my question(s):
Are you interested in doing the artwork? I can possibly work up a demo over the holidays if not. Which leads us to the next question (mostly for the programming gurus out there)... How is the interface implemented in Clash? Do we give Mark (or the other programmers) some GIF's/TIF's for the buttons, borders, and bells/whistles and have them put them together? Or is there another method that is more preferable?
All, re: customisable buttons/data onscreen...
Yeah, if our philosophy is to give the user what they want (no matter how ill-advised
ie. Keep the main screen as simple as possible by default but have a lot of alternative data panels for each of the main game models (eg. dynasty/character info, maybe?) selectable via a menu which the user could tick on/off?
It means someone with a 1600x1200 screen, for instance, could have the best of all worlds with a large main playing area plus access to all the detailed info they deem most important.
Someone playing at 800x600 would have to make the decision whther to keep a large playing map or spice it up... all vital stats, whatever we decide they may be, should be in a compulsory panel.
Yes/No/Heard it all before?
Paul: me? artwork? Shurely shome mishtake?
I was thinking of:
----------------------------
| | |
| | 2 |
| | |
| ------
| | |
| 1 | 3 |
| | |
| ------
| | |
| | 4 |
| | |
----------------------------
| 5 |
----------------------------
Hey, actualy that's not bad, given my incompetence as an artist
1) Main Map - compulsory
2) Small Map - compulsory?
3) Main Data - compulsory
4) Contextual Data - compulsory
5) Tagged onto the bottom of 1 or 4 could be one or more of eg. diplomacy info; detailed economy view etc, in civ-wide or province-wide forms.
[This message has been edited by Darren_McGuicken (edited December 14, 1999).]
I just threw together a sample interface from screenshots that I had lying around. I didn't break up the map and main information section but the dividiging line is obvious. The components are:
bottom middle: text area, receive status reports, send and receive messages from other rules (both human and AI), enter cheat codes (useful for debugging and scenario design). Also useful for entering commands through text if you are one of those command line people.
bottom right: minimap, essential
top left: customizable toolbar like in IE. Some of these buttons let you do things like make TFs quickly or change visual settings while others bring up the important subscreens.
top: that little thing could be used for scrolling around the screen. Click the middle dot to center on the selected unit.
black area: most of this will be the map, the area on the right side (above the minimap) will be for the troop information, etc..
Well I didn't have time to finish it and I have to get to studying for stupid art history final tomorrow morning, grrr... memorize names and dates
oh the link to the page itself:
http://tcahalan.tripod.com/index.html
I made it with their trashy one minute thing but signing up took like five minutes. The page that it generated seems to have really bad html or something. I didn't bother deleting all their dumb text either.
? Not sure exactly what you mean. I think more stuff should be on the bottom than the top, otherwise it looks top heavy. As for right vs left it doesn't really matter but since the standard is to have things on the right I don't think there is really any reason to deviate.
It doesn't matter too much for the top vs bottom, but i guess its just my eyesight since whenever there's too much on the right vs left it doesn't look quite right.
The direction I'm kind of leaning in for the overall characteristics of the interface, is that no single approach will suit everyone's needs. What I think is the right way to do it, is to provide a series of flexible interface pieces, and give players the capability to rearrange them in any way that is best for the player. So our default main screen might look like Darren's or Glak's, but the player could change it in any way that fits their needs. Adding or removing components, and re-sizing and moving around whatever is there should be fully supported.
Clash should be so information-rich that I think players might want to have Several main interfaces depending upon whether their civ is small or large, whether they are currently focused on diplomacy, or conquest, etc.. So I think the player should be able to assemble any interface they want out of the interface components (Toolbar, main map, mini-maps, etc.). We could reserve alt-number key combinations to quickly shift "ViewStyles" among those the player has set up.
The concept of ViewStyles seems very powerful and natural to me. The programming aspects aren't all that difficult, especially if you know ahead of time all Clash interfaces will need to support it.
What do you think?
I agree whole heartedly, Mark. I know that I'm quite particular about how I arrange my workspaces at work, whether it be for remote sensing/image processing, GIS, or even just my Microslop Office setup. If this is the way that we'll design the interface (I hope it is), then the questions that arise mainly pertain to which tools should be available to the user. Organization is key to help those designing the interface. Some sub-interfaces that keep popping up in the discussion include:
1. Main map
2. Mini me - 'er - Mini map
3. Tool bar
4. Model dialogues
Specifics may be in order for #3 and #4 (we could even customize these sub-interfaces). Can anyone think of sub-interfaces in addition to those listed above? If you're listing individual tools (map zoom, etc) it might be easiest to indicate that they are part of the tool suite (or separate from it if that's the case).
Actually the interfact to be would be better if it was flipped digainoally from upper left so the bar's at the top and the smaller windows are on the left. It's just more visually pleasing to me that's all.
GUI Component Design
[this is a follow-up to some stuff debated recently on the Diplomacy thread]
If each separate model interface is to follow the Customisable Display philosophy, it needs to be made up of small self-contained UI elements for each lower-level control. I think that's where the current weight of opinion seems to be
Is there any standard yet for making a GUI 'chunk', other than each component to be resizable/de-selectable? What other elements should they have in common? From toolbars/menu systems to layout & eye-candy?
If there is a consensus, would it be worthwhile knocking up some generic code for interface designers to import into their own code? A ClashComponent class? Or has this already been done?
[This message has been edited by Darren_McGuicken (edited December 28, 1999).]
Darren:
I think if you are game, that would be a very valuable thing to code up. I'm embarrassed to say, that I can't think of much beyond what you suggested already in terms of functionality. But I'm sure we'll think of more stuff
There's one thing that bothers me with the many-widgets approach. If each widget it has its own menu, then a lot of screen real estate is going to be wasted. I'm wondering if we could get away with having the only menu be on the toolbar (I'm assuming here that most of the view styles will probably have a toolbar associated with them, possibly a bad assumption). If we could somehow lose the menus on all but the toolbar, the interface would be both more attractive, and give us more area on which to put icons and other interesting things in terms of information for the player. If you assume we Do have a toolbar, at least one that can be called into existence with a hotkey, I think a decent solution is possible. In essence, each widget would register itself with the toolbar, as requiring certain menu items on the toolbar. Poof, all those ugly menus disappear. We could even put some work into making the menus on the toolbar look attractive, since they'd be the only ones we needed to worry about. The only wrinkle I can think of is when you have more than a single type ofGUI widget present. Then it's not clear when you change the, say, map square size, which map you mean. In those cases, it would have to assume or ask, which want it was for. But I don't think that's a big problem.
What does everyone think?
Thanks for addressing this important item. Let me know what you need from me to move forward.
Re: toolbar/menu approach - I was thinking along exactly the same lines. It sounds clean and practical, as well as better-looking.
The only problem is that I've never tried to code such a system... still, I'm willing to learn!
I was going to put together a test diplomacy UI sometime soon, so I'll have plenty of opportunity for practice...
Of course, if anyone wants to offer coding pointers - I'm not a proud man
Hi Darren:
A few quick pointers to get you started:
Warning: I just cobble things together as I go along, so perhaps what I've done are Not the best things to use as templates
You will want to inherit from Window instead of Frame for the GUI Widgets
Registering the widgets you probably already have a handle on. I use a primitive mechanism for GameFrames to register with the GUI instance. But that is kludgey. You may want to look at Component and see how it registers listeners for a more nuanced version.
Adding menus in 1.1 you can see in MapSquaresFrame or ToolBar. I don't know if its changed in 1.2
Mouse and Key listeners are also in MSF, although I'm using a 1.1 method right now.
What IDE are you using? If its Visual Cafe, you can just start a new project and add some interactions to see how it does them. I don't know about J++. If you can't autogenerate code, let me know and I can slap something together for you in about 10 minutes!
Good Luck,
Mark
PS One other thought. F_Smith and Ferdi both know their Java, and would probably be willing to help by giving suggestions on the best way to go about it. You might want to put together a summary and email them. Just search on their names to find a post, which will have their email refs.
Also the comp.lang.java.* lists are a good way to get answers sometimes.
[This message has been edited by Mark_Everson (edited December 29, 1999).]
Progress Report
I've uploaded a sample Model Interface design to Darren's Interface Mockup. [edited by Mark Everson 10/21/00 to repair deadlink]
I'd appreciate any comments or feedback.
I'm aiming for a supremely customisable (for both coders & players) display made up of small components representing stuff like (taking the diplo package as an example): the Diplomacy Governor, lists of Treaties, small maps showing neighbours/Civs etc.
Each component will be resizable, deselectable, maximizable and iconifiable. I'll eventually add in auto-resizers and other fancy bits.
There are many ways to implement such a UI, this one sees to me the most adaptable. If anyone feels strongly against this, now would be a perfect time to speak!
If we do decide that this is the way to go, I can't really progress & start to develop these classes without some form of group go-ahead and consensus on what component types are necessary.
Any and all suggestions welcome
[This message has been edited by Darren_McGuicken (edited January 05, 2000).]
[This message has been edited by Mark_Everson (edited October 21, 2000).]
Darren:
It looks reasonable to me! Of course I think we need to make it look a lot sexier, but that's in the future. For now we go with functional. By the way, have you look into how tough it is to design our own look and feel? Somebody's going to ask that eventually, and I figured I might as well start right now!
It will be really good to get rid of some of that old Java junk that I've just let stay in the project for a long time!
What do others think about the basic concept, and the general implementation?
(keep in mind it will look much better in the final product)
Sexy is easily done, Mark!
This phase, as you know, was simply a test of the structure. I'm hoping to put together a proper implementation of the source before the weekend (it'll only support ListComponents, SliderBarComponents and ButtonComponents) and I intend to put together the first DiplomacyUI to make use of it.
I'll be sure to make it as flash and good-looking as its creator (
Stay tuned...
Re: Look And Feel - I've only tried modifying generic stuff so far. I'll have a lookee at what else can be done & report back.
Keep it simple.
K.I.S.S....Keep it simple, SEXY!
Need help?
Minor Update: my website has been updated slightly to show some more informative (I hope!) screen shots.
I'm afraid I haven't had time to spice it up graphically yet, I've spent most of my time thinking about Constructors & default component design.
All it takes to setup a basic ClashListComponent is:
new ClashListComponent(treatyData, "Treaty List");
Where treatyData is some form of array. So far so good, but a question for you all:
What default functionality should it have? It looks like I'm best leaving Component-specific action handling to the model coders themselves.
What about menu options? Specifically the main menu - what should the user be able to do above & beyond using the components? Set the default fonts, colours & icons, OK, but is that all?
Loki: Absolutely I can use help!
Take a look at the screen shots mentioned above and you'll probably be able to get a feel for what elements the interface currently consists of (desktop, internal frames, textfields, scollable panes etc.), everything from desktop background to fonts to window icons can be changed - are there any other screen elements which would be needed to truly 'tart it up'?
There's no rush, mull this over, I'll be pretty busy and unable to implement anything new over the next week...
Again though, any new suggestions or comments(please!) on any aspect of Interface design are always welcome!
Darren:
From your brief screenshots, I can see the power of the general idea. I think this is going to work out really well!
I think getting Loki involved is a great idea. You might want to email him just in case he doesn't check back on this thread. He could possibly work out some "look" ideas while you are busy with other things. How about it Loki?
One quickpoint on the screenshots. You should probably describe briefly what each thing is, so that someone who isn't really familiar with your approach knows what the heck is going on! So for instance for the top when you could label it has "dedicated diplomacy screen" and the one next below it could be labeled "diplomacy part of a larger control panel showing several overviews of different areas "or something like that...
In terms of what functionality exactly the general interface components should have, I think an evolutionary approach is best. I'd say just implement the things that you think we Obviously need, and whatever you really think you need while implementing the diplomacy stuff. Then, when people get a good look at it in demo 5, I'm sure there will be Tons of suggestions. We can then balance the suggestions often against each other.
Great Work!
Mark
I had a look at the screenshots. I love the Mac style interface
However, what worries me is that its not hard set into the game itself. Its all lose and floating around.
Wouldn't it be nicer to have a real cool looking interface made for the game?
Anyway, I'm going to draw one up for you to see, and I'll also add some bits to the screenshots to give my opinions on how it might look better.
First Example
In this first one there wasn't much to really do, its all pretty good, one problem I had with it was the hierachy.
Its important to know where I am and where I'm supposed to be looking in sequence.
The first thing I should know is "Where am I now?" Thats why I made the top bit yellow. Its the first thing the eye will catch. So straight away you know where you are. I just had another look at it, its not a great example, but you get the idea. I also made the button yellow. The button will turn yellow when pushed. If you can make rollovers and on mouse commands, then do it.
I'm going to do the other one now, this will take me a while.
I like that last interface, Loki. Although many people have stated that we should have a fully customizable interface, I also think that it should have it's own unique look. Kind of torn on that one...would a good compromise be several choices for a GUI (3-4)? Until your last GUI, I was leaning towards fully customizable windows, but they ARE much more cluttered and disorganized that your example. I especially like the tabs at the bottom of the screen for each area of interest! This topic will surely require some more discussion to come up with a compromise
Loki:
As you have probably read before in this thread, I think we need both a polished standard interface, and then the capability for the player to go beyond it. At least for aesthetically challenged individuals like myself, it's wonderful if it looks great, but if that detracts one bit from functionality, I'd rather have the functionality! So your job, if you choose to accept it, is to come up with some sort of framework or background within which the player can put a bunch of widgets, and still have it look good. Your shot at it indeed looks good to me
Darren, Paul, and others, what do you think?
Interface
Ok, I'm not saying this is what I want it to look like, but I am giving an example of a interface that doesn't need a whole lot of annoying windows all over the place.
I also like to color code everything.
Anything that has to do with the Governor for example, will be that yellow color, anything that has anything to do with treaties will be green. You may not know it, but your brain follows this pattern.
remember, its just an example, I don't know what you guys want on an interface, I can only use what I think you're using. If I knew every window that will be in the game, I could re-orginise the interface to fit that.
All I'm saying, is the game needs its own unique interface especialy built for the game.
[This message has been edited by L o k i (edited January 10, 2000).]
Well I think if we supplied each image into a directory somewhere, as a bmp file, then it could easily be changed by anyone.
If we make the very very background, even the background behind the interface all pink, then anything that is pink, the map will cover. So if I remove a part of the interface (like the logo) the map will be seen through that area. But if I cover more of that pink, then the map won't show through the area I covered. I can't really think of a better way to explain this.
This way it becomes very customizable. Except the mini-map, and things like that won't be able to be moved...got any ideas?
"So your job, if you choose to accept it, is to come up with some sort of framework or background within which the player can put a bunch of widgets, and still have it look good." - I don't understand.
Loki:
Well I see what you're saying about making the background available for user modification. That will be really good for people designing scenarios. However your average user is not going to want to need to screw around with the background to put together a custom interface.
Can you try again on your description in your second paragraph. I'm sorry, but I just didn't get it.
The thing about "your job, if you choose to accept it" was in generating a system to produce an attractive background for a user-customizable interface. So it should be able to provide an acceptable background for something with a fairly sparse screen, as in Darren's first example, as well as a crowded screen that is basically filled with controls and maps. All the things Darren is designing will be able to be resized, moved around, and added or deleted at user preference. So when the player designs the kind of screen They want to use for diplomacy interface, we need something more attractive than a solid color to go in the background (or perhaps we don't). Anyway, I wanted to have your suggestions for how to fill up the arbitrary-sized pieces of the interface that will be left over.
I see, why not just use an image relating to the window's subject? Thats what they've done in Civ2.
However, what do you mean by "controls and maps"?
The thing I don't understand is how much customisability you are looking for.
With the "windows-type-interface" all you can customize is the window itself, you can't really change the shape of it. That's what throws me off the windows interface mostly. The other reason is that its too loose and messy.
Now, about the bit I couldn't explain well. I'll take it through step by step.
Imagine the whole background of the entire window of the entire game is the same color pink they used in Civ2.
Then imagine putting the interface I made over top of that as a second layer.
Now, the main-screen goes anywhere that its pink. But it will always be under the 2nd layer (which is the interface).
So if I ever remove part of the interface, the main-screen will then become visable in that area, whereas before it wasn't. And if I decide to draw a box over the pink area on the 2nd layer, the map won't be visable in that area.
This way you can basicaly change the interface in any way you like. I could turn the whole main-screens frame into a circle, or a triangle. I could have a picture of my girlfriend in the top left corner.
Posting Permissions
Reply With Quote
Bookmarks