serge-web / serge

Serious Gaming, Evolved - web interface
https://sites.google.com/deepbluec.com/serge/
Apache License 2.0
14 stars 4 forks source link

As Game Designer I wish to control how time is presented #954

Open IanMayo opened 3 years ago

IanMayo commented 3 years ago

Serge includes some time data in the top-right of the Player page.

This data is configured from the Overview tab of the Admin pages for the wargame. Here is the current layout: image

Game Designers would like to have greater control over the display of time, including these configuration parameters:

The above controls will clutter the Overview page. We should probably re-plan the controls on the Overview page to keep them all logical & tidy. The use of fieldset boxes may help organise the data.

The "Game Overview" box has not been used by any Game Designers yet - it would be ok to reduce the space it occupies.

Date formats

IanMayo commented 3 years ago

Hello @ShendMikullovci - please notice I've added game start date-time to the above list of required data controls.

IanMayo commented 3 years ago

Hello @ShendMikullovci , it would be useful to handle #955 in this issue.

ShendMikullovci commented 3 years ago

Added controls and details: Game Overview Optimization

Much more complete display with an abundance of options available. New “Formatting” fieldset added to allow the choice of turn and date/time format. Time Settings elaborated as discussed. I’ve also added a tick option to the “Time Warning” feature in case the game designer decides to remove the option from the game. Due to the familiarity of the Save button being on the lower end of screens, I’ve decided to lower the “Save Overview” button to the lower right side of the display: After running through the options and details, you naturally end on the bottom of the screen where the button is highlighted and draws attention. As per Issue #955, I’ve added the required controls (i.e., Turn number & Turn Presentation) onto the overview page.

Let me know what you guys think!

IanMayo commented 3 years ago

Thanks for the design. Feedback:

  1. Phase Time Remaining is duplicated
  2. We need to be able to switch off the concept of Planning time, if their allowed time is being managed outside Serge. This may be handled through a tick-box next to Allowance.
  3. I think it would be more economical use of screen space for the Formatting blocks to be drop-downs. Then we only see the available options when we're engaged with that attribute
  4. We don't control turn start and end time. We control turn start and turn length (which effectively gives us the same results)
  5. Planning and Adjudication could be represented as either a pair of radio buttons or a drop-down list
  6. I think the time display strategy needs supporting (image below)

image

ShendMikullovci commented 3 years ago

After review of feedback and discussion with Ian, I’ve made the following adjustments: (Bullet points correspond to Ian's feedback points).

  1. “Phase Time Remaining” item has been removed completely due to redundancy (allowance represents the same thing in-game).

  2. Tickbox on “Allowance” to make it optional.

  3. Due to varying needs of the clients, we decided to restructure the design into three drop-down windows containing the following info: a. “Time Settings”: Depending on whether the client needs/wants to display time, they have the option to enable or disable the feature. b. “Turn Settings”: Contains time and phase elements. c. “Formatting”: Settings box for the game designer to select which time format they prefer.

If the “Display Time” feature is enabled, all time-related information is underlined, clickable and modifiable:

Game Overview Optimization With Displayed Time

If the feature is disabled, all time-related information is dimmed and unclickable:

Game Overview Optimization Without Displayed Time (1)

“Turn Number” remains due to the fact that it’s not directly world-time-related information and could still be required even if there’s no need to display time.

  1. “Turn Duration” replaces “Turn End Time” as a more representative terminology.

  2. Radio buttons added to the “Game Phase” feature to reinforce the dissection between phases in the game.

  3. Restructured design frame to support the needs of the client. In the “Formatting” window on the right hand side, the game designer is able to select among the different “Turn Format” and “Date/Time Format” displays to match their needs. For the upcoming wargame, the formats “Pairs” and “YYYY/MM/DD” could be suitable.

  4. I also thought of making each of the upper rectangles minimizable in order to avoid clutter: If the game designer wishes to return to the overview page to consult the “Game Description and Objectives” window, they’re able to minimize the windows above to avoid distraction. Illustration below:

Game Overview Optimization With Minimized Windows

Let me know what you think!

IanMayo commented 3 years ago

Thanks for the update @ShendMikullovci

Couple of items:

  1. We're not allowing the Game Designer to choose to display the Turn end time or Turn start and end times. I think this could be supported by changing Display time radio buttons to a Game time drop-down with the 4 options listed above
  2. IMHO Turn start time and Turn duration belong in the Time Settings block, since they related to the display of time. Note: they will get disabled if Display time is off.
  3. There may be a different logical organisation. We may be able to put the contents of Formatting back near the values they related to. Turn Format could logically go beneath Turn number, and Date/time format could logically go beneath Display time (and be disabled if Display time is Off).
  4. I'm not a fan of the collapsed sections - since the Game Designer will have to manually expand each one to review the settings. I think we have enough screen space to allow them to all be displayed.
ShendMikullovci commented 3 years ago

Noted! I edited the design and this is how it looks: Game Overview Optimization Edited (1)

  1. Changed “Display Time” to “Game Time” with the 4 aforementioned options listed. It does take quite some room in the display, let me know your thoughts.
  2. “Turn Start Time” and “Turn Duration” added to the “Time Settings” window. Dimmed here to illustrate the “Do Not Display Time” feature. Question: Should we disable “Allowance” and “Warning” when “Do Not Display Time” is enabled?
  3. “Turn Format” added under “Turn Number” in “Turn Settings”. “Date/Time Format” clutters the “Time Settings” window too much in my opinion.
  4. Removed the collapsing feature.

Let me know what you think!

IanMayo commented 3 years ago

Thanks @ShendMikullovci :-)

The Date/Time Format control could be a drop-down list instead of a radio-button list, and take up less space. In this way, the Game Designer only sees the available formats when the drop-down is expanded - but they remain able to view the current format all the time.

The Game time control could also switch to drop-down, and consume less space.

No, it's not easy to draw Drop-downs in drawing tool. One way is to show them in a white rectangle that sits above the other controls that would be hidden.

With the above two changes, it seems achievable to have the Date/time format in the block that is currently greyed out below Game Time.

Allowance and Warning. No, these don't need to be disabled when Do not display time is enabled.

Hope this all helps :-)

ShendMikullovci commented 3 years ago

Made the adjustments!

  1. Here’s how the design looks with the drop-downs closed: Game Overview Optimization Drop Down List Closed

  2. Here’s how the “Game Time” drop-down looks like opened: Game Overview Optimization _Game Time_ Drop Down List

Underlined sentences represent clickable and/or modifiable areas. Highlighted in grey is the display mode in design. I have to admit I was hesitant about whether I should add tick boxes/radio buttons for the display modes or not. What are your thoughts?

  1. Here’s how the “Date/Time Format” drop-down looks like opened: Game Overview Optimization _Date_Time Format_ Drop Down List

I kept the tick boxes here for comparison with the “Game Time” drop-down. We can select whatever you think is more useful and aesthetically pleasing. Let me know your thoughts!

IanMayo commented 3 years ago

Sure, I understand the doubt about tick-marks. Since only one item in each drop-down can be selected, I don't think we need them. There will just be one shaded item when the drop-down list is expanded.

One element that isn't quite clear, though it may be a consequence of the drawing app: in the Game Turn drop-down, only the 4 game-turn style items will be in the drop-down menu. In the second graphic the other items would sit on the page - not in the dropdown.

ShendMikullovci commented 3 years ago

Noted. Here’s how the design looks with the exterior elements: Game Overview Optimization Drop Down List Closed Edited

Here’s how it looks once “Game Time” drop-down is open (considering “Turn Start/End Times” is selected): Game Overview Optimization _Game Time_ Drop Down List Edited

With “Do Not Display Time” selected we would have the following look: Game Overview Optimization _Game Time_ Drop Down List Edited with _Do Not Display_ Selected

Let me know what you think!

IanMayo commented 3 years ago

Thanks for that @ShendMikullovci :-)

Yes - it's a nice compact (but logical) layout.

One (hopefully last :-) ) suggestion.

It's about the two drop-down lists in Time settings.

The current strategy displays the label (Game Time) when the list is collapsed. This obscures value Time of start of turn.

It would be better to display Game time as a text-label to the left of the drop-down, and the current value (e.g. Do not display time) as the value of the drop-down when collapsed. This allows the Game Designer to review the settings without having to expand the list.

I see we do have enough horizontal space to allow this without any negative impact.

ShendMikullovci commented 3 years ago

When you say to the left of the drop-down, do you mean outside of the entire "Time Settings" window?

IanMayo commented 3 years ago

Hello :-)

image

In the above shot you can see the label (Book category) is shown to the left of the drop-down, and the current value Computers and Internet is shown in the drop-down.

The combo box is open in that screenshot, but if we imagine it collapsed, we will be able to see both the label/name and the current value.

ShendMikullovci commented 3 years ago

Great idea! I tried to implement it. This is how it looks: Game Overview Optimization Text Labels Drop Down List This is the default display once “Turn Start/End Times” and “DDHHMM” are selected for Game Time and Date/Time Format. The user can therefore instantly see the currently selected options without having to drop the list down.

Game Overview Optimization Text Labels Game Time Drop Down List Open Once the user does drop the list down, the selected option remains highlighted to maintain awareness of the selected option.

Overview Optimization Text Labels Drop Down List Date_Time Format Same concept for the Date/Time Format. I decided to remove the tick boxes from the drop-down list due to clutter and incoherence with the Game Time list.

Game Overview Optimization Text Labels Drop Down List _Do Not Display Time_ Once “Do Not Display Time” is selected, the “Game Time”, “Turn Start Time” and “Turn Duration” configurations are dimmed and unclickable.

I was thinking: In the “Do Not Display Time” scenario, do we disable the “Date/Time Format” option entirely as well?

Let me know your thoughts!

IanMayo commented 3 years ago

Correct. In "Do not display time" mode we should not display date/time format.

One other item. I don't think we need Game time and Game start time. Aah, hold on. Yes we do :-) We need the original start time in case they Game Control wants to restart from the original start time.

In that case, the logical order is for Game start time to come before Game time - since once the game is playing the Game time will be after the Game start time.

One last item on the UI. You have created labels for the drop-down lists. I believe these labels should sit inside your white rounded rectangles. Hmm, maybe we don't need the white rounded rectangles any more - since it's just one set of controls.

ShendMikullovci commented 3 years ago

Good idea. The rectangles have been removed and it looks better. Furthermore, it differentiates the controls from the “Game Description and Objectives” field where text can be interacted with. I also dimmed the date/time format on the “Do Not Display Time” option. Finally, I decided to add “Start Time” as such to avoid confusion, given that we also have “Turn Start Time”. This is how it all looks:

Game Overview Optimization Text Labels Drop Down List No White Rectangle

Game Overview Optimization Text Labels Drop Down List _Do Not Display Time_ No White Rectangle

Game Overview Optimization Text Labels Game Time Drop Down List Open No White Rectangle

Let me know what you guys think!

IanMayo commented 3 years ago

Thanks @ShendMikullovci

Couple of items:

ShendMikullovci commented 3 years ago

What type of format would you prefer for the "Start Time"? "YYYY/MM/DD - 00:00:00"?

IanMayo commented 3 years ago

Hello :-).

I don't think games will run in terms of centuries, or in terms of seconds. So I think we can shorten it to: YY/MM/DD - 00:00.

ShendMikullovci commented 3 years ago

Alright. Here’s how it looks: Game Overview Optimization Text Labels Game Time Drop Down List Open No White Rectangle (1) Game Overview Optimization Text Labels Drop Down List No White Rectangle Game Overview Optimization Text Labels Drop Down List _Do Not Display Time_ No White Rectangle

Let me know what you guys think!

IanMayo commented 3 years ago

Yes, that is great - thanks @ShendMikullovci

ShendMikullovci commented 3 years ago

This is how a potential solution to issue #991 looks in the “Game Overview” window: Game Overview Optimization 3 Tab Addition

Due to the need to differentiate two main types of time, “Time Settings” becomes “In-Game Time”. Elapsed time is not shown and “Turn Start Time” becomes “Current Time”. “Turn Duration” and “Format” enter the tab window for better efficiency and decluttering.

“Allowance” and “Warning” get their own window titled “Real-World Time”. The “Turns Settings” window stays identical except the title, which becomes “Turns”.

Note: I decided to remove the “Game Description and Objectives” window after not having found anything in our notes that points to its significance. We can restore it anytime if needed.

To review the tabs in greater detail, refer to issue #991.

Let me know what you think!