Overall structure of Source Academy UX

[martin-henz]

Current structure

Cadet | DEVICE </> PLAYGROUND

Under "DEVICE":
Missions | Side Quests | Paths | Contests Announcements | Materials | Profile

Proposal

Source Academy | News | Material | Playground <USER_ICON> Thomas Tan

Under "Source Academy":
Missions | Side Quests | Paths | Contests

Notes:

• "Materials" renamed to "Material" (that's grammatically better, see https://english.stackexchange.com/questions/247497/material-vs-materials-which-is-correct)
• "Cadet" renamed to "Source Academy"
• "Announcements" renamed to "News"
• The <USER_ICON> could come from the IVLE student picture.
• Clicking <USER_ICON> or "Thomas Tan" will take the users to their Profile
• Before the first login, there would be "Login" instead of "<USER_ICON> Thomas Tan"
• I'm assuming that we treat News, Material and Playground as public information; anyone can see this without login.
• Before the first login, the clicking of "Source Academy" is disabled, and no Missions etc are displayed.

[martin-henz]

The toplevel could also consist of pictograms:
Source Academy | News | Material | Playground <USER_ICON> Thomas Tan
-> (for example)

• 
• 
• 
• 
• <USER_ICON> Thomas Tan

[remo5000]

Sounds good!

[remo5000]

I think a combination of an icon and the word works well. I have added the admin and game buttons as well (as they have been scaffolded). Is this something like what you had in mind? @martin-henz

[martin-henz]

Generally ok. Three comments:

• Maybe if there is not enough space, such as when viewed on a mobile device, the words can go away?
• What is that "Game" button for? Could we do away with the "Game" button by combining it with the "Source Academy" button?
• Can we avoid ALL CAPS for the menu items? In most fonts, words get less readable when rendered in ALL CAPS. Some reading about this:
  https://danieltitus.com/blog/advertising/237-why-all-caps-is-usually-a-bad-idea

[remo5000]

@martin-henz

• We shall address the space issue when resolving Make Navbars responsive #76.
• The Game button is for the "story". I can move it into Source Academy.
• The article makes a lot of sense, I'll remove the all caps. Thank you for the feedback! 😄

One question: Given that the back end models refer to "Announcements", could we keep that name instead of "News"? This would allow the button to match the filenames, making it clearer in terms of software design. The visuals, front end and backend would then be consistent.

[martin-henz]

Regarding the "game": In theatre, we call it "breaking the fourth wall", when we remind the audience that they are sitting in a theatre. That's generally avoided. In the same way, if we say the Source Academy is a game, we want to immerse the audience in it. So ideally, the game should be the default, and we shouldn't remind the audience that it's a "game" by having a menu item "Game". So how about taking the users (who are authenticated) by default to the game. Then they can escape the game using the buttons. But the "home" button, called "Source Academy" at the top left takes them to the game. Once they are in the game, they can "escape" in two ways: They can choose a top-level item and escape their identity for a while, by going to "Material" or the "Playground" or they can choose an "in-game" item by going directly to a "Mission", "Side Quest" etc.

[martin-henz]

(maybe we can discuss during the meeting on Saturday)

[remo5000]

@martin-henz I have made the changes you requested, it looks like this now! Kept the upper case on the title to make it prominent.

You make a good point on the "fourth wall"! I feel intuitive UX should have a clear "path" to get to a certain display/state. Perhaps we could rename the button to make it immersive, in the sense that it isn't an offshoot from the idea of a "Source Academy" e.g "Spaceship". That being said, looking forward to discussing this further during the meeting 👍As for now, is the above layout alright?

[martin-henz]

What if the "Source Academy" button takes you to the current game state and shows the buttons "Missions", "Side Quests", "Contests"? What if that's the default view after authentication? This way, the game would be the default, but opting out would be very easy: just click on any of the buttons.

[remo5000]

@martin-henz Ah I see your idea a bit more clearly now. We've implemented it in #85 (commit is above), thank you for the feedback once again!