Announcement

**PGB** · 05-17-2018, 11:47 AM

[1/2] CASCADING STYLE LIBRARY

"Hometown" Icons:
- Leader Board—Consistently used as 2 separate words. Primary colors are used. Has a Black glow around it for better contrast with background. Launches the Leader Board popup.
- Vault—The current Keyhole icon changed to an actual vault, as the former is also used on certain game objects to denote unavailability (e.g., advanced skills not available at lower hero levels). Has a Black glow. Launches the Purchases Vault popup.
- Settings—The current Gear icon changed to this universally recognizable icon of Hammer and Spanner. Launches the Game Settings popup.
- Mail—Has a Black glow. Blinks when new mail arrives. Launches the Eternium Mail popup.
- Friends—Has a Black glow. Blinks when a friend achieves a badge of honor. Launches the Friends’ Heroes popup.
- Calendar—Has a Black glow. Blinks when new reward becomes available. Launches the Rewards Calendar popup.
- Shop—The current Weighing Scale icon changed to a shopfront, as the former also signifies justice or court. Has a Black glow. Blinks after successfully completing a battle when discounted gear becomes available. Launches the In-Game Shop popup.
"Build" Icons:
- Armory/ Player—Currently, the Viking helmet signifies both the Armory and Player. The former is used for the erstwhile Gear page and the latter on the Friends page beside the friend's play name. Preferably, these 2 can have their own unique icons. Has a Black (/Dark-Blue) glow, which turns White (/Light-Blue) on activating the tab. Displays the Hero’s Armory interface.
- Stash—Has a Black (/Dark-Blue) glow, which turns White (/Light-Blue) on activating the tab. Displays the Shared Stash interface.
- Smithy—(formerly Craft) Has a Black (/Dark-Blue) glow, which turns White (/Light-Blue) on activating the tab. Displays the Gear Smithy interface.
- Talismans—(formerly Jewelry) Has a Black (/Dark Blue) glow, which turns White (/Light Blue) on activating the tab. Displays the Talismans interface.
- Skills—(formerly Jewelry) Has a Black (/Dark-Blue) glow, which turns White (/Light-Blue) on activating the tab. Displays the Combat Skills interface.
- Team—Has a Black (/Dark-Blue) glow, which turns White (/Light-Blue) on activating the tab. Displays the Battle Team interface.
- Dictionary—(new functionality) Has a Black (/Dark-Blue) glow, which turns White (/Light-Blue) on activating the tab. Displays the Dictionary interface.
- Notes—(new functionality) Has a Black (/Dark-Blue) glow, which turns White (/Light-Blue) on activating the tab. Displays the Build Notes interface.
Other Icons:
- Offers—Standardized icon for all IAP offers, aptly designed () as a Whale icon. Replaces the button functionality on the Gems balance indicator. Removes the trouble of featuring separate IAP icons for Events. Features the standard 6 offers in Blue and new (Event/ Deal) offers in Red. Blinks when new offers arrive. Placed near the player's left thumb on Menu and Hometown pages. Not placed on Build and Gameplay pages due to the intrusive blinking. Displays the Support Eternium popup.
- Event—Standardized icon for all Events, aptly designed as a sub-Eternium gameplay. Removes the trouble of featuring separate icons for various Events. Appears only during an Event. Features the number of goals to be achieved in Red. Blinks until all goals are achieved. Placed near the player's right thumb on Menu and Hometown pages. Not placed on Build and Gameplay pages due to the intrusive blinking. Displays the Seasonal Events popup.
Miscellaneous Objects:
- Treasure Chests—Four shapes and colors for the 4 types of chests. Color-coding matches with the contents of the chest.
- Decorations—Two standard types used in varying sizes, one for outer corners and the other for inner corners.
- General Progress Indicator—Rounded rectangular box with Gray fill (like a thermometer). Features the number achieved vs. total number.
- Hero-/ Champion-Level Indicator—Rounded rectangular box with Purple (i.e., bravery/ royalty/ sacrifice) fill. Gold fill purposely avoided as it does not contrast well with Green. Features the Hero/ Champion Level.
- Trial Timer—Rounded-rectangular box with Green fill. Features a countdown that changes into an alert on expiry.
- Label/ Emphasis Border—Plaque shape for prominent labels, interface borders, soft popups borders, and sub-content borders.
- Separator—White-to-transparent line separating title from content and between content sections.
- Alert Icon—Standardized, universally recognizable symbol for Alert popups.
- Hard Button—Permanently fixed button that typically launches popups and actions outside the content area. Features a prominent rounded-rectangular box border and name in ALL CAPS.
  Note: Build Tabs are hard buttons with the same rounded rectangular box border, but with icons.
- Soft Button—Occasionally disappearing button that triggers actions inside the content area. Features a subdued border (preferably rounded rectangle) and name in Title Casing.
- Cancel/ Close Button—Hard button with prominent border and alert color. Name in text or symbol ("⨯", not letter "x").
- Zoom In/ Out—Hard button with prominent border and an iconized name.
Interface Colors:
- Heading Layer—Outermost layer of the Menu popups and Build interfaces outlined by a prominent border. Features the heading for Menu popups.
- Sub-Heading/ Tab Heading Layer—Second outer layer of the Menu popups and Build interfaces. Features the instruction text for the former and heading for the latter.
- Content Layer—Inner layer of both Menu popups and Build interfaces outlined by a subdued border (to avoid excessive box-in-box design). Subtle design essentially a play of light and shadows, with lighting from the top-left corner at a 45°-angle. Features the contents. Has no decorations in the corners.
  Caution: The light-and-shadow border should be clear enough on small screens.
- Sub-Content Layer—Transparent area with a subdued border that appears like a depression in the content layer (due to the light-and-shadow illusion). Separates the general contents from any special content or holds various sections of the content within the content area.

[2/2] ACCESSIBILITY CONSIDERATIONS

Myopia—Requires large-sized fonts and objects. Can be standardized by testing on 4.7"-screens using myopic test players.
Color-Vision Deficiencies—Requires colors selected from opposite sides of the color wheel. Contrast among objects as well as with the background is essential. Very hard to achieve universal balance (see Accessibility Settings for workaround). Can be standardized by testing on protanopic, deuteranopic, and tritanopic test players.
Accessibility Bypass—Given that an accessible design is quite challenging to create and may not be appealing to the majority with no handicaps, the best strategy is to offer accessibility as an “alternative” only for those with limitations. This is achieved through the "Game Settings > Accessibility" functionality.

**PGB** · 05-17-2018, 12:51 PM

[1/10] TEMPLATE FOR GENERAL BACKGROUND

Contextually situated at the origin of the hero's quest—the "Shores of Hope" (in Story 1)—this is the current animated, rotating green-and-blue background of the Menu and Hometown pages, which is standardized across the suggested Menu and Hometown screens as well as the Build interfaces.

The Eternium icon shines at the top-center with the version number. The inner decoration on the top-left as well as the Server Save button on the top-right span all pages, including the gameplay page. The FPS indicator lies unobtrusively just below the Server Save button. Also, as screenshots of the Menu and Build pages are often found on Google search, the creators and marketers' credits are subtly featured globally across these pages. A copyright notice may also be included at the bottom-center in subdued gray color.

PS: The human thumbs are not part of the interface, but just an indication of their positions on mobile devices.

[2/10] TEMPLATE FOR POPUPS ON MENU PAGE

Template for the popups displayed on the Menu page. As a popup is a separate layer over the launching layer (parent), it typically has a dark, semi-transparent background shroud that disables any interactive elements on the parent.

The popup features only 2 prominent (steel-gray) borders; the content area has subdued borders to avoid a maze-like box-in-box design.

A wide heading plaque holds 2 words for better clarity. The instruction text helps new players know the purpose of the popup. A separator distinguishes the instruction text from the popup contents.

A prominent Close button enables the player to return to the background page/ popup. Notice how the top-right decoration slightly overlaps the Close button (as if holding it down), giving the impression of the button being an integral part of the interface despite being of a starkly different color.

For left-handed players, interface buttons are swapped to the opposite half of the interface.

Note: The extra space at the bottom is due to this template's precise alignment with the Build interfaces.

[3/10] TEMPLATE FOR SUB-POPUPS ON MENU POPUP

Template for a wide sub-popup on a Menu popup is exactly the size of its parent’s content area. The steel border is precisely aligned to the inner steel border of the parent. An outer steel border is not given here as it will cut across the parent popup title in the darkened background.

Prominent outer decorations are placed on all corners, aligning with that of the parent. No inner decorations are present.

The sub-popup title could be more than 2 words for better clarity. Provision for instruction text or other relevant text is presented in one line. A separator distinguishes the popup title from the instruction text.

The popup’s Close button overlaps the parent’s Close button and returns the player to the parent popup.

[4/10] TEMPLATE FOR ALERT POPUPS ON MENU POPUP

Template for an alert popup on a Menu popup is half the size of its parent’s content area. The inner steel border is precisely aligned to the subdued border of one half of the parent's content area. However, this popup is typically presented in the center of the parent popup.

Prominent outer decorations are placed on all corners. Inner decorations are placed on the top left and right corners only so that they do not clash with the button below.

Here too, the top-right decoration slightly overlaps the Close button. The content layer is scrollable to accommodate localization expansions. This standard popup features a hard button at the bottom, placed on a separate layer above the scrollable content area.

Note that the Close button visible in the darkened background on the parent is disabled. Only the one on the foreground popup is available.

This popup template presents a sense of seamless alignment with its parent, as nothing juts out of the borders.

[5/10] TEMPLATE FOR SOFT POPUPS ON MENU POPUP

Precisely the size of the previous alert popup's inner steel border, this template overlaps and aligns to one half of its parent's content area. This popup is presented on the left or right half of the parent's content area, not center.

A simple decorative plaque borders the popup. A dark, opaque background holds the popup heading while a semi-transparent background holds the scrollable content area. Notice the standardized, contrasting colors of the popup text as per the accessibility specs discussed earlier. The separators chunk the content passages/ lists into clean and clear sections.

The title of the popup is given in 2 lines to accommodate long names.

Unlike their hard popup brothers, soft popups do not have a Close button and do not feature a semi-transparent dark shroud on the parent; just tapping outside the popup will close.

Again, this template presents a sense of seamless alignment with its parent, as nothing juts out of the borders.

Caution: The semi-transparency of the soft popup's content area should be such that its content text sufficiently contrasts with the objects on the parent's content area behind it.

[6/10] TEMPLATE FOR "BUILD" TABS

Template for the interfaces featuring on the Build page. Notice that this template is precisely aligned to that of the Menu popups for consistency. The animated green-blue background extends here too, pleasantly contrasting the tab interfaces.

Again, a wide heading plaque holds 2 words. Just-in-time instruction text is presented within the content area. Avoiding the maze-like box-in-box design, the second inner border extends to both the tab heading as well as the corresponding tab button to indicate which tab is being currently displayed.

The 8 tabs are balanced on both sides—the primary tabs (featuring the Inventory) on the right and the accessory tabs on the left. The active tab's button icon is highlighted in a White/ Light-Blue glow. Also, "Menu" is changed to "Exit" which leads to the Hometown page of the hero.

All the minor buttons straddling the top frame are shunted out to the Hometown page. The global Buyback and Sell buttons for the primary tabs are shifted out and fixed to the bottom. The Gems and Gold balance indicators are riveted to the bottom, and they are non-interactive (thus, framed by a plaque).

Following consistent design, rounded rectangles for buttons and tabs indicate interactive elements, plaques aren't.

[7/10] TEMPLATE FOR SUB-POPUPS ON BUILD TAB

Similar in design to that of the wide sub-popup of the Menu popup, the template for a wide sub-popup on a Build tab is exactly the size of its parent’s content area. The steel border is precisely aligned to the inner steel border of the parent. Again, an outer steel border is not given here as it will cut across the parent popup title in the darkened background.

Prominent outer decorations are placed on all corners, aligning with that of the parent. No inner decorations are present.

The sub-popup title could be more than 2 words for better clarity. Provision for instruction text or other relevant text is presented in one line. A separator distinguishes the popup title from the instruction text.

The popup’s Close button overlaps the parent’s Close button and returns the player to the parent popup.

[8/10] TEMPLATE FOR ALERT POPUPS ON BUILD TAB

Similar to the template for the alert popup on a Menu popup, this popup is also half the size of its parent in width. However, this template is slightly smaller in height to align the bottom borders to the inner borders of its parent.

This popup is also typically presented in the center of the parent popup with a dark, semi-transparent background to obscure and disable the parent's Close button, if any. The content layer is scrollable to accommodate localization expansions. The hard button at the bottom sits on a separate layer above the scrollable content area.

Again, the standardized alert icon draws attention to this important popup. The template's Close button enables exit without taking action.

Here too, this popup template presents a sense of seamless alignment with its parent, as nothing juts out of the borders.

[9/10] TEMPLATE FOR SOFT POPUPS ON BUILD TABS

Similar to the template for the soft popup on a Menu popup, these soft popups are also half the size of their parent in width. However, this template is slightly smaller in height to align the bottom borders to the inner borders of its parent. This popup is presented on the left or right half of the parent's content area, not center.

The 2 variants show one version without the bottom buttons and another with soft buttons. Generally, soft buttons are placed on soft popups. These buttons sit on a separate layer above the scrollable content area.

Here too, a simple decorative plaque borders the popup. A dark, opaque background holds the popup heading and the bottom buttons, while a semi-transparent background holds the scrollable content area. There is no Close button; just tapping outside the popup will close.

Again, this popup template presents a sense of seamless alignment with its parent, as nothing juts out of the borders.

PS: The build-tab template behind the soft popup is just for reference, to indicate the positioning of the soft popup.

Note:

Though not applied in these suggestions, it is recommended that the skill description popup present information as follows:

Like gear, the skill icon itself features the skill level.
In the contents, para 1 presents the overall description of the fully upgraded skill.
Next, a separator is inserted.
Para 2 presents the base function of the skill at level 1. This text is in White font.
A list below para 2 presents the bonus functions of the skill as it upgrades. A “+” sign is inserted before each list item to indicate each additional function. This text is in Green font. Cooldown time is mentioned as the last item on this list with a “–” sign before it and text in Red font. This presentation is consistent with the descriptions given in gear popups.
A separator is placed after this list.
In para 3, the message “Your hero has unlocked this skill.” is presented in Blue font or “Your hero has not unlocked this skill.” is presented in Gray font.
In para 4, the final instruction “Cast this skill by drawing its sign.” or “Cannot be cast by Warrior Hero” (in case of viewing via Leader Board) is presented in Gray font always.

Such a presentation significantly improves understanding of the skill and its levels, not to mention consistency with the presentation of gear descriptions.

[10/10] TEMPLATE FOR BUILD ACCESSORIES

Template for the Build accessories. Applying the Gestalt Principle of Similarity, the 4 tabs on the left are categorized and grouped as accessories because, unlike the primary build tabs, these do not feature the Inventory.

This template is the same as for the primary Build tabs, except the missing Buyback and Sell buttons at the bottom (due to the absent Inventory). Notice the opened and highlighted button icon indicating the active tab.

**PGB** · 05-17-2018, 01:48 PM

[1/2] NEW HERO CREATION

This is the New Hero creation popup, which is presented in 2 variants:

Popup variant displayed at first opening of the game does not have a dark background or Close button.
Popup variant displayed during subsequent new hero recruitment has a dark background with a Close button.

The image shows the second variant. The Menu popup template is used, but the content area separator is shifted to the left such that the left panel is exactly one-third of the total content area.

As the player makes a strategic choice that s/he has to live with throughout the game (or pay dearly with time, effort, and 50 gems), an alerting instruction is provided above. The male gender is placed on top of the sequence. The Log In button is kept on the left while the Name field is placed on the right for ease of typing.

Note: The Close button is not provided on the first variant because the player cannot exit without creating the first hero.

[2/2] NEW HERO > DESCRIPTION

To help the player make an informed decision on the hero class, a soft popup presents a brief SWOT analysis of the selected hero class, indicating a general gameplay strategy.

Notice the precise overlapping of the soft popup on the left panel.

The following descriptions, if accurate, are suggested:

Upon comparing the 3 popups, a new player must clearly recognize the balancing of each hero class. No single hero class should appear better than the others in general to a newb. Only the hero’s build purpose (i.e., offensive, defensive, Tank, DPS, hybrid) should help decide the selection. Following are some suggested balancing considerations:

In general, the Warrior class should be for survivability, Bounty Hunter for stealth, and Mage for DPS. Ergo, newbs are recommended the Warrior as their first hero so that they do not lose interest after repeated failure to progress in the initial stages of gameplay.
The Set gear for Warriors should add Toughness stats, whereas that of the Bounty Hunter and Mage should add Damage stats.
Two of every 3 Skills for Warrior should be defensive (one-third offensive, of course), Bounty Hunter gets 2/3 stealth, and Mage gets 2/3 offense.
In general, stat auto-boost per level for Warrior should increase Toughness, Bounty Hunter gets Haste and Movement Speed, and mage gets Damage.

PS: Can we please rename the 2-worded “Bounty Hunter” to a 1-word “Assassin” (which might translate better)?

**PGB** · 05-17-2018, 02:20 PM

[1/2] MENU > WELCOME AND ALERT

After a new hero is created, the screen transitions to this Menu page. Using the Menu page sub-popup template, an alert is presented that welcomes the new player (by their play name), presents an overview of Eternium, and recommends the Tutorials before beginning gameplay. A hard button at the bottom launches the Tutorials site in a browser outside the game interface.

Considering the large amount of information to be presented, the tutorials are best presented as a wiki (curated by Dream Primer and contributed by the player community). Once the English version of the tutorials is stabilized, localized versions of this wiki can also be parallelly developed by the player community (e.g., Bart the warrior , Dyoma, et al).

[2/2] MENU / HEROES GALLERY

This is the Menu page as well as the Heroes Gallery. Saving the effort of entering the Heroes page several times (specially for Daily Quests), this page presents all the primary information to the new player like a game dashboard.

Presented in the generic background, this page features the Daily Quests status too. Important announcements, such as New Offers and Events are available. The current/ active hero is highlighted with inner decorations within its frame, while the newly selected hero is highlighted with a White/ Light-Blue glow.

Instead of Select, the button name is Enter, as the player enters the hero's Hometown. Instead of the current [+] button for a vacant hero slot, a [!] button is presented, as the former confuses with a similar button on the Armory (ex-Gear) page. Also, notice the recognition badge beside the player's name on the top-left corner.

In the following §03–17, let's take a look at the various popups launched by the buttons on this page.

**PGB** · 05-21-2018, 03:39 PM

MENU > UNLOCK HERO

On pressing the keyhole icon on a locked hero slot, this Unlock Hero Slot popup is displayed. The standardized menu sub-popup template is used for this. The standardized alert icon is used for this alert popup.

**PGB** · 05-21-2018, 03:41 PM

MENU > DELETE HERO

The Delete Hero popup features both the cost and the consequences of the action. Remedial measures are also suggested. The hard button at the bottom of this standard popup confirms the hard decision.

**PGB** · 05-21-2018, 03:42 PM

MENU > LOG OUT

Similar to the Delete Hero popup, this Log Out popup also proffers consequences and next steps. The hard button at the bottom seeks the decisive action.

**PGB** · 05-21-2018, 03:48 PM

[1/3] MENU > DAILY QUEST > BEGIN QUEST

This is the Daily Quest popup, showing an unstarted quest. The transient button below is a soft button. Upon clicking this button for a specific hero, its Gameplay Modes screen is launched, entirely bypassing the Build page. The Close button enables the player to exit without taking action.

[2/3] MENU > DAILY QUEST > CONTINUE QUEST

The Daily Quest popup showing a started, but incomplete quest. The soft button reflects the quest's status. Upon clicking this button, the Gameplay Modes screen is displayed.

[3/3] MENU > DAILY QUEST > COLLECT REWARDS

The Daily Quest popup showing a completed quest. The soft button reflects the quest's completion status. Upon clicking this button, the rewards are received, and the quest icon disappears for the day.

**PGB** · 05-21-2018, 03:57 PM

[1/2] MENU > SUPPORT ETERNIUM

This is the Deals and Offers popup, triggered by its icon placed at a more prominent location (than the Gems balance indicator). The popup displays with the first offer (i.e., 100 G/day) selected by default. The description section is scrollable to allow for localization expansions. However, the hard button at the bottom of it is placed on a separate layer, and so does not disappear on scroll. The Event Value Packs button appears only during Events, and blinks. This button highlights the number of offers in Red. When no Event offers are available, the other regular 6 buttons resize to fill the vacant space.

As rightly alerted by Nhat , the description on the 100G/day offer needs to delete the wording “each day you play”. In the arriving mail, it can be clearly stated “You must log in daily to receive your 100 Gems.”

Note: Due to the importance of this button, as the sole exception to the "White-font, Title-Casing" rule, this transient soft button has highlighted text in ALL CAPS.

[2/2] MENU > SUPPORT ETERNIUM > CANCELED PAYMENT ALERT

This is the alert popup in case of canceled payments or failed transactions. The helpful solution is offered as a hard button at the bottom. The Close button provides the option to escape for experimenters.

PS: I believe this subsequently need not launch the Purchases Vault popup (unsure, as all my purchases were successful).

**PGB** · 05-21-2018, 04:05 PM

[1/2] MENU > SUPPORT ETERNIUM > EVENT VALUE PACKS

The Event Value Packs popup is a sub-popup within the Support Eternium popup, so it darkens the parent and projects itself, albeit with a Close button. The prominent countdown indicates the time left.

[2/2] MENU > SUPPORT ETERNIUM > EVENT VALUE PACKS > ITEM DESCRIPTION

The item-description soft popup within the Event Value Packs popup is displayed at one-third the width of the content area, and adjacent to the described item. This means items on both the left and right columns will display descriptions on the middle column, while those in the middle will display descriptions on the left.

Notice the precise alignment of the soft popup with the content area.

**PGB** · 05-21-2018, 04:08 PM

MENU > SEASONAL EVENT

Triggered by the prominently placed mini-Eternium icon, the Seasonal Event popup features the countdown timer and the Close button. The event rules are presented in Gray (as White may look excessive). The scrolling on this long page could be presented in 2 ways:

The Rewards section alone scrolls from right to left, keeping the rules always on top, but displaying only 3 rewards at a time. (OR)
The entire content area scrolls from bottom to top, hiding the rules as the player scrolls down, but displaying 6 rewards at a time.

Descriptive soft popups for the reward items follow the same design as that of Event Value Packs.

**PGB** · 05-21-2018, 04:15 PM

[1/2] MENU > GAME SETTINGS > LANGUAGE

On pressing either the "English" button on the Menu page or the Game Settings button on the More page, this popup is displayed. The Language button is activated by default, with English selected. The left panel is exactly one-third the width of the content area. The Close button returns the player to the parent page.

By grouping the functionalities into separate buttons, this presentation of the Game Settings essentially minimizes the long scroll experienced in the current design.

[2/2] MENU > GAME SETTINGS > ACCESSIBILITY

Similar to the Language settings enabling non-English-speaking players to enjoy Eternium, this new concept of Accessibility Settings is essentially an alternative option for differently abled players (who can still pay). In addition to the "normal" version, special presentations of the game interfaces enable players with left-handedness or vision limitations to customize and enhance their user experience. The scrolling content area could later accommodate tactile compensators too.

Programming could be custom-made or simply triggering the device's own accessibility settings. Of course, just like localization, accessibility would also require soft-coding, library-based objects display, and strict CSS.

Tip: Besides increasing the revenue potential, enabling better accessibility is typically an industry-award-winner.

**PGB** · 05-21-2018, 04:35 PM

[1/7] MENU > JOIN FRIENDS

On pressing either the Friends button on the Menu page or the Join Friends button on the More popup, this popup is displayed. This functionality offers several of the existing functionalities, plus a couple more. This is the collaboration feature of Eternium.

The instruction text below the popup title summarizes the popup’s purpose.

Buttons for inviting friends to the game, adding friends to the account, chatting with added friends, and even Player vs Player options are presented at the bottom of the scrollable content area in a separate layer.

At the start of the game, there is only one icon in the content area. A helpful tip/ instruction within the content area guides the new player to start using these buttons. After adding 2 friends, this tip disappears.

The Close button enables exit without taking action.

[2/7] MENU > JOIN FRIENDS > INVITE FRIENDS

On pressing the Invite button of the Join Friends popup, this sub-popup is displayed. This is essentially the third content section in the current design that has been hived out into a separate layer in order to reduce the clutter on the parent popup.

The buttons at the bottom are soft ones. A Close button enables exit without taking action, and returns the player to the parent popup.

[3/7] MENU > JOIN FRIENDS > INVITE FRIENDS > COPY-TO-CLIPBOARD

Instead of a full-blown popup for this simple message in the current design, a transient message is presented that flies from the right to the left, pausing in the middle for a few seconds for reading.

[4/7] MENU > JOIN FRIENDS > ADD FRIEND

On pressing the Add button of the Join Friends popup, this sub-popup is displayed. As this is not an alert popup, the standard alert icon is replaced with a context-specific handshake icon.

[5/7] MENU > JOIN FRIENDS (WITH FRIENDS)

This is how the Join Friends popup may look like when a few friends are added. Notice that, unlike the extant design, the friends’ icons feature the friend’s play name, not their first hero’s name. This is to distinguish the player from the hero. Also, if the friend renames the first hero, the button name should not get affected (Suggestion credit: leminlime ).

Player names are adorned by the standard (Viking helmet) icons, while some honored players are decorated with badges (discussed later).

All player icons are non-interactive. The content area is scrollable to accommodate an infinite number of friends.

[6/7] MENU > JOIN FRIENDS > FRIEND CHAT

On pressing the Chat button of the Join Friends popup, this sub-popup is displayed. This is a powerful collaborative tool for players to share hero-build and gameplay tips. After selecting a friend’s name from the list, the current player can start chatting directly with them.

If possible, the chat log could be stored on the server. Assuming privacy is not a concern here, developers could analyze these logs to glean valuable insights into the challenges faced by players during hero build and gameplay.

(Suggestion credit: Uncubus , Nate D. )

[7/7] MENU > JOIN FRIENDS > DELETE FRIEND

On pressing the Delete button of the Join Friends popup, this sub-popup is displayed. Besides obvious reasons, this feature helps to clean up the friends list when some player’s account goes defunct.

(Suggestion credit: Loque )

**PGB** · 05-21-2018, 04:44 PM

MENU > MORE FEATURES

This More Features popup is displayed on pressing the More button on the Menu page. Both halves of the content area are scrollable to accommodate inclusion of additional buttons in future.

The current News button does not feature any content. So, in its place, a new concept of Game Tutorials as a newb enabler is included (as requested by Dance , TerryDarc , et al). Like the Discussion Forum, it launches a separate browser window outside the game interface.

The Join Friends functionality appears here as well, as it is an important marketing tool.

Sequencing of the buttons is as per their relevance to the player. The Close button returns the player to the Menu page.

Announcement

Newb-Friendly and Accessible GUI and UX Standardization

Newb-Friendly and Accessible GUI and UX Standardization

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment