Newb-Friendly and Accessible GUI and UX Standardization

[PGB]

[1/2] MENU > MORE FEATURES > (RESTORE PURCHASES)


Launched by pressing the Restore Purchases button on the More Features popup, this popup entirely overlaps its parent.

The list of purchases is presented as soft buttons on the left panel of the scrollable content area, while the description of the selected purchase is shown on the right panel. The description panel is scrollable with a hard button on a separate layer.

On launching this popup, the first button on the purchase list is selected by default. The Close button takes the player back to the parent More Features popup.

---

[2/2] MENU > MORE FEATURES > PURCHASES VAULT > RESTORE ALERT


The Restore This Purchase button first presents an alert to clarify and confirm if the player made the “Purchase” from the Support Eternium functionality and not via the “Buy” option from the “In-Game Store”.

A Close button enables exit without taking action for those who misunderstood.

---

[PGB]

MENU > MORE FEATURES > VIEW ACHIEVEMENTS


Launched by pressing the View Achievements button on the More Features popup, this popup entirely overlaps its parent. The image shows the icons as presented on Google Play.

The various states of achievement are shown. A soft button enables the player to collect the rewards. However, similar to Event rewards, it would be preferable to have the rewards auto-collected and sent to the first hero’s Inbox at the Hometown.

The Close button takes the player back to the parent More Features popup.

---

[PGB]

MENU > MORE FEATURES > SUBMIT PROMO CODE


The Submit Promo Code sub-popup clarifies that the code is being submitted, not being merely entered, for a subsequent benefit. The benefit is implied in the mystery-box icon and spelt out in text below it.

It is recommended that each player be sent the promo code (i.e., “IDKFA” or something unique to each account) via Eternium Mail when the first hero reaches an appropriate level. A soft button on that mail could launch this sub-popup in isolation. This way, the developers could better track new player progress/ attrition.

---

[PGB]

MENU > DELETE ACCOUNT


The Delete Account sub-popup alerts the player to the consequences of the action. In order to prevent customer complaints, advance warning on the loss of IAPs is also explicitly given. As the content layer is scrollable (to accommodate localization expansions), more information can be provided here.

A Close button enables exit without taking this extreme action.

---

[PGB]

[1/2] MENU > PLAYER BADGE ALERT


Similar to the Forum posters' ranking system, the concept of "Badge of Honor" is introduced in the game. After the player completes a certain period playing Eternium (as tracked by the server), a congratulatory popup is displayed presenting a recognition badge/ medal, with an option to download as an animated GIF file (the animation could be a simple glisten like on gear items). Players may use this downloaded file as their avatar on the Forum. This badge gets displayed beside the play name on the Menu page as well as near the player's name on the Friends' Heroes page. If feasible, the badge can also be presented universally across all pages on the top-left decoration. On pressing the badge icon, the popup is displayed.

The text on the popup could read like this: Congratulations, Playername! You have played Eternium for over 1000 hours and one of your heroes is in Top 50% on the Leader Board. This badge will be displayed beside your name on the Friends' Heroes page, so your friends can view it. You can download this badge as an animated image file and display it as your avatar.

This suggestion is a modification of the one by , but without the rewards; only recognition is awarded, not items.

---

[2/2] MENU > PLAYER BADGE DISPLAY


This is the full-fledged Menu/ Heroes Gallery page, featuring the Player Badge on the top-left corner fixed on the universal top-left decoration, right beside the player’s play name.

The above image also presents the 3 states of the Daily Quests icon.


The honorary badges are golden in color with contrasting purple stars (signifying heroism/ sacrifice). The player's status as well as their level are also presented. The 5 levels of recognition badges are:

• Level 1—the "Apprentice" badge: For, say 1000 hours and one hero at Top 50%
• Level 2—the "Aspirant" badge: For, say 2000 hours and one hero at Top 60%
• Level 3—the "Pro" badge: For, say 3000 hours and one hero at Top 70%
• Level 4—the "Expert" badge: For, say 4000 hours and one hero at Top 80%
• Level 5—the "Master" badge: For, say 5000 hours and one hero at Top 90%

PS: I calculated these recognition playtimes based on the following assumptions/ principles:

• Playing a personal video game daily is a good way to relax, provided it is not overdone (i.e., playing at the cost of socializing/ family time).
• Eternium server contains player's data from 2014, so 1000 hours could have been accumulated by a casual player at the reasonable rate of 1 hour of gameplay per day.
• Obsessive players may have accumulated quantity, but quality (Leader Board status) is also needed for higher badges.

---

[PGB]

THE "HOMETOWN" SCREEN


On pressing the Enter button on the Menu screen, the player enters this Hometown screen (as requested by lordexecutor13 ). As mentioned earlier, this is the contextual location of the origin of the hero’s quest—the Shores of Hope (Story 1).

Considering that most people are right-handed and so the mouse pointer/ free hand hovers around the right-half of the screen (with the left hand holding the mobile device), the blinking buttons that demand player intervention are arranged on the top-right side of the page. The non-blinking/ non-demanding buttons are placed on the top-left side where the mouse pointer or free hand seldom hovers. Of course, in case of left-handed players, these buttons are swapped (via Accessibility Settings).

The Offers and Event buttons are helpfully placed near the player’s thumbs. The Menu button returns the player to the Menu screen. The Build button launches the Build tabs. The Play button transitions this screen to the Gameplay Modes screen.

[PGB]

(1/4) HOMETOWN > LEADER BOARD


On pressing the Leader Board icon of the Hometown page, this popup is displayed. The contents on the right panel of the content area are almost similar to that of Friends’ Heroes page, except for an additional Trial Stats button. So, much of the presentation and functionalities are similar to that page.

The list of heroes is tabulated with clear headers on the left panel of the content area. This section does not scroll, but can be navigated using buttons at the bottom on a separate layer. This layer also features the status and ranking of the current hero.

A clear instruction on top summarizes the purpose of this popup. A Close button returns the player to the parent Hometown screen.

---

(2/4) HOMETOWN > LEADER BOARD > VITAL STATS


On pressing the [+] button on the right panel, this soft popup is displayed. The scrollable content area tabulates the vital stats of the viewed hero.

---

(3/4) HOMETOWN > LEADER BOARD > GEAR STATS


The gear stats of the hero are presented, as before, in a soft popup. Most importantly, these stats also show the comparison with the player’s current hero. The comparison is with the hero from whose hometown page the leader board is viewed. So, if the leader board is opened from a Warrior hero’s hometown, the gear stats of the leader-board hero will compare only if it is also a Warrior hero. If the hometown hero is a Warrior and if the leader-board hero is a Bounty Hunter, the comparison section will show the message: “Cannot compare with your Warrior hero”.

This comparison is essential for players to benchmark their heroes’ gear against that of the winners.

---

(4/4) HOMETOWN > LEADER BOARD > TRIAL STATS


Launched on pressing the Trial Stats button of the Leader Board popup, this popup tabulates the leader-board hero’s trial stats. The scrollable content area enables a detailed listing.

A “Cast Number” is also included to show the number of skill casts, which gives a glimpse into how the winner played the battle.

Again, the tabulated content shown in the image is just dummy text (the main focus being the presentation, not content).

---

[PGB]

(1/2) HOMETOWN > BUILD NOTES


On pressing the Notes icon of the Hometown page, this popup is displayed. The Notes popup is a new functionality that enables players to note down information on their hero builds. New players could write down descriptions and tips gleaned from the Tutorials and the Forum, whereas veteran players can jot down action points. This popup is presented in 2 modes:

• View mode—non-editable, view-only mode wherein only the Edit button is available, and all other buttons are disabled.
• Edit mode—editable mode, wherein the Edit button is disabled, and all other buttons are available.

The content area is scrollable, but merely touching it to scroll should not open the mobile device’s intrusive virtual keyboard. So, an Edit button is provided near the right thumb to make the content area editable. Some players may prefer to jot down notes in a separate app and merely copy-paste here, so a helpful Paste button is provided.

Some players may want to send their notes to their friends, so a useful Copy button is provided. Finally, after all the edits are done, a Save button stores these annotations on the Eternium server. Providing this button separately, instead of an auto-save, is to ensure that the contents are saved immediately and not at the intervals the server chooses. Upon saving, a short message flies in from the right, pauses a few seconds for reading, then disappears to the left. The content area returns to non-editable, View mode (and the Edit button is activated).

A font-size modifier at the center of the buttons panel enables zooming in or out of the content area. Once set, this zoom status is saved and does not reset when the Notes popup is reopened. Font size can be set in both Edit and View modes.

The Close button enables exit without taking action. The above image shows the View mode of the Notes popup.

---

(2/2) HOMETOWN > BUILD NOTES


In Edit mode (when the Edit button is disabled but all other buttons are available), if the Close button is pressed without saving the current annotations, a helpful alert pops up warning of the consequences. This alert is not displayed when the Notes popup is merely opened and closed without editing.

The above image shows the Edit mode of the Notes popup in the background.

---

[PGB]

(1/3) HOMETOWN > FRIENDS' HEROES


On pressing the Friends’ Heroes icon of the Hometown page, this popup is displayed. The popup has been altered from the current Friends page by shifting out the “Invite Friends” content section as well as the Add and Refresh buttons on to the Join Friends popup.

As mentioned earlier, the friends’ name-list buttons feature the friend’s play name, not their first hero’s name. Players are signified by a Viking helmet icon. Players who have received honorary badges feature their respective badges beside the name. Synergy level and hero’s vital stats are additionally provided.

The instruction text on top summarizes the popup’s purpose. The Close button enables exit without taking action.

---

(2/3) HOMETOWN > FRIENDS' HEROES > VITAL STATS


On pressing the [+] button on the Friends’ Heroes popup, this soft popup is displayed. The content layer is semi-transparent and is scrollable.

PS: The soft popup content shown in the image is just dummy (lipsum) text.

---

(3/3) HOMETOWN > FRIENDS' HEROES > GEAR STATS


This is the soft popup showing the gear stats of the friend’s hero. Notice its precise alignment with the parent content layer.

Similar to the Leader Board’s gear stats sub-popup, this popup also shows the comparison with the current (and comparable) hero’s corresponding gear.

---

[PGB]

(1/4) HOMETOWN > ETERNIUM MAIL (with attachment)


On pressing the Mail icon of the Hometown page, this popup is displayed. The Eternium Mail popup presents the same functionalities of the current design, except for the soft button featured under an attachment. In case of multiple attachments (as in Event Hero gear transfers), an exception is made and the attachment icons become buttons (as is the case currently).

The content area on the right is scrollable. A Close button returns the player to the parent Hometown page.

---

(2/4) HOMETOWN > ETERNIUM MAIL (with hard button)


This is the presentation for a mail with a call-to-action button. A hard button serves this purpose, as it launches the Gameplay Modes screen.

---

(3/4) HOMETOWN > ETERNIUM MAIL (with promo code)


As mentioned earlier, this is a new concept (but not necessarily a new functionality) of sending the promo code via mail directly to the player and then helpfully launching the Submit Promo Code popup for this purpose.

This mail may be sent when the player’s first hero reaches a pre-determined level. Tracked by the server, this feature helps monitor a new player’s progress or lack thereof.

---

(4/4) HOMETOWN > ETERNIUM MAIL > PROMO CODE


On pressing the Submit Promo Code button on the Account Promo Code mail, this sub-popup is displayed. After entering the promo code and pressing the hard button below, the reward could be mailed to the player for downloading. As this reward needs to be very useful to a new player, instead of a Set item, one of the following could be sent:

• A Large Treasure
• A Greater Currency Booster token
• A Greater Experience Booster token
• 5000 Gold

---

[PGB]

(1/3) HOMETOWN > REWARDS CALENDAR


Launched on pressing the Calendar icon on the Hometown page, this Rewards Calendar popup features most of the functionalities as the extant design, except for the rewards themselves and their arrival periodicity.

As a useful conditioning for both new and veteran players, the rewards are consistently placed by days of the week. The rewards are sequenced by general behaviour of the players.

• As Mondays are busy days for most people across the world, that day features an Uncommon Treasure (Small).
• As the week progresses, players start relaxing and get more involved with the game, so the size of the treasure increases proportionally through Wednesday.
• On Thursdays, a pouch of Gold enables skill upgrading as preparation for battle.
• As the week draws to a close on Fridays, a handful of Gems helps to reforge gear, open slots, buy tokens, etc.
• On Saturdays, the arrival of an Experience Booster signifies what is expected in the weekend—XP grinding.
• The Sunday surprise could either be a Gemstone Pack or a Set Item—quite the motivation for enthusiastic gameplay.

The transient Collect Now button at the bottom is a soft one.

---

(2/3) HOMETOWN > REWARDS CALENDAR > COLLECTED REWARD


The image shows the Rewards Calendar with a collected reward being selected. For simplicity, the collected, uncollected, and currently available states of the rewards are shown only by their tick, cross or exclamation icons respectively.

The selected button is highlighted with a White/ Light-Blue glow. The description panel on the right is scrollable to accommodate localization expansions.

The button below the description panel has turned into a status indicator.

---

(3/3) HOMETOWN > REWARDS CALENDAR > MISSED REWARD


This is the sample image of the Rewards Calendar with a uncollected/ missed reward being selected.

The collection status indicator text is in the standardized Red font. Status of future rewards could be shown as “Not Yet Available” in Gray font.

---

[PGB]

(1/2) HOMETOWN > IN-GAME SHOP


Launched on pressing the Shop icon on the Hometown page, this In-Game Shop popup presents most of the extant items, except for a few new ones and recommended new pricing for the benefit of new players.

• (Cells A1, B1, C1) Experience Boosters: The icons of the low-, medium- and high-value boosters could be appropriately colored as Green, Blue, and Orange respectively. Purple is avoided as it is closer to Blue in the color spectrum and so may cause challenges to color-vision-deficient players. Also, in addition to just a description, the purpose of each booster could be included as follows:
  • 50% booster: "...Recommended for players starting a new hero and with limited Gems. Long steps for the long march ahead!"
  • 100% booster: "...Suitable for heroes nearing champion's level, a last-mile sprint to the finish line!"
  • 200% booster: "...Ideal for players with limited time, but having sufficient Gems. Enjoy the adrenaline rush!"
• (Cells A2, B2, C2) Currency Boosters: Applying the same rationale as Point 1, accessibility-enabled color coding (Green-Blue-Orange) applies here as well. Newb-friendly pricing attracts more sales.
• (Cells D1, E1, D2, E2) Mercenaries: Prohibitive pricing dissuades newbs from experimenting with these additional characters. I personally tried all 4 and found Endar useful for my purposes—an experiment that cost me 2000 Gems, and that too only for 1 hero. Please consider slashing their prices. Also, Maggie's position in the shelf could be switched with Endar to keep the magical ones together on Row 2.
• (Cells A3, B3, C3, E3) Treasure Chests: Currently, we get an uninspiring Small Treasure and a Large Treasure. From a newb’s POV, it would help to have all 3 chests—Small, Medium, and Large Treasures. The icons of these chests could be appropriately color coded—in Green, Blue, and Orange, and suitably named Uncommon, Rare, and Epic Treasures (to indicate their contents). Also, a Random Set Item chest (in Purple-color icon) could be included.
• (Cells B4, C4, D4) Utility Items: Quantity and pricing of Apples and Potions tweaked. These items do have value, especially during early runs in Events. Here, a Dungeon Key could be included, an option that is already available for an unappetizing 100 Gems.
• (Cells A4, E4) Currency Exchange: The current Gems-for-Gold functionality on the Gold balance indicator is shifted here with the exchange rate remaining almost the same. However, a new Gold-for-Gems functionality is requested with an exchange rate of 1:990.
• (Cells A5, B5, C5, D5, E5) Discounted and Other Gear: For consistency (conditioning), a fixed Cell E5 should always feature the gear offered at a discount, but its adjacent Cell D5 should also present an irresistible (non-discounted) gear offer that cannot be refused. Also, after achieving Champion Level, only Epic and above gear should be offered in the Shop. Here, including only the most demanded stats (i.e., Power, Critical Rating, Critical Damage, Haste, Vitality, Life On Hit, Dodge Rating and Movement Speed) would make the Shop Gear appealing enough to consider buying.

After all, every successful shopkeeper knows that high turnover is better than high margins.

---

(2/2) HOMETOWN > IN-GAME SHOP (with Mount tokens)


This is an alternative suggestion for the contents of the In-Game Shop. Here, all the shop items discussed in the previous image are continued, except for the mercenaries. This variant of the Shop features booster tokens for the hero’s mount (discussed later).

These booster tokens for mounts come in 2 sizes with 2 flavors:

• Life Boosters—for +100% and +200%
• Power Booster—for +100% and +200%

Depending on their hero build and battle map, players can buy an appropriate token for a quick DPS or Endurance boost. A suitable sales description giving a prescription to the browsing customer yields better sales.

Notice the scrollable content area on the item description panel. The Buy button is placed on a separate layer above the scroll.

---

[PGB]

(1/2) BUILD > HERO'S ARMORY


On pressing the Build button on the Hometown screen, the player enters the first tab of the Build section, aptly named the Hero’s Armory. In the context of the game, the Build tabs are the places in the hometown where the hero returns/ retreats from battle to store and change battle gear and combat skills, forge better gear, craft magical talismans, and form the raiding party.

Considering that most people are right-handed and so the mouse pointer/ free hand hovers around the right-half of the screen (with the left hand holding the mobile device), primary tabs featuring the Inventory are arranged on the right side of the page. The accessory tabs are placed on the left side where the mouse pointer or free hand seldom hovers. Of course, in case of left-handed players, these buttons are swapped (via Accessibility Settings).

The Exit button returns the player to the Hometown screen. The Play button transitions this screen to the Gameplay Modes screen.

The Armory is one of the most vital sections of Eternium where players spend much time strategizing. So, it is important that this page be clean and uncluttered. After equipping the looted/ forged gear, players take time to admire their hero donned in all that regalia labored so hard for. On the hero panel, much artistic effort has gone into designing the hero and programming effort to make it spin. However, the 12 gear items and the 3 indicators (dimensions?) of Damage, Toughness and Recovery have together effectively buried the hero.

Let's first unbury the hero from the 12 gear-item slots. With minor adjustments in size and location, the gear slots could be moved out of the way of the hero. The gear slots are so arranged that all body armor/ Set gear line up on the hero’s left side, whereas the weapons/ Named items and talismans line up on its right side. This is useful during gear forging.

Continuing our extrication of the hero, minor adjustments in shape and location of the Damage-Toughness-Recovery indicators could move them out of the way of the hero. Here, note that a rounded rectangle for shape of the indicator buttons can hold more digits compared to a round button as well as maximize space utilization.

The hero’s level is mentioned in a non-interactive plaque as it is just a label. The hero’s progress indicator is filled with Purple instead of Blue for both regular hero and champion.

The Inventory is expanded to accommodate 6 rows, instead of the current 5. This is because:

• The current Legend button is shifted out into the Dictionary tab.
• The Buyback and Sell buttons are shifted to the bottom of the frame.

Only the Increase Inventory Slots (current Expand) button remains until the sixth row is unlocked. Below this button, a helpful tip is presented for the benefit of new players. Note that this tip is different for the other primary tabs of Stash, Smithy, and Talismans. The tip disappears on first expansion of the Inventory.

Notice the highlighting of the tab icon and its opened border.

Let’s view some of the important interactive features of this tab.

---

(2/2) BUILD > HERO'S ARMORY > VITAL STATS


On pressing the [+] button on the hero showcase panel, this popup is displayed.

The 18 stats are tabulated in the scrollable content area. The checkbox-like bullets before each stat name and the multi-coloring on rows in the current presentation are removed here to avoid confusion for newbs.

---

[PGB]

(1/3) BUILD > HERO'S ARMORY > GEAR STATS (comparison popup without Reforge button)


A sample presentation of the gear description displayed in a fixed location on the left panel. The popup features a comparison of the Inventory gear with the equipped gear.

As the popup is presented away from the inventory, it does not overlap other gear there. So, players can easily compare various gear in the inventory without having to tap/ click outside to close one popup to open another.

Notice the positioning of the soft buttons at the bottom. The gap between the buttons will be occupied by the Reforge button as and when applicable.

---

(2/3) BUILD > HERO'S ARMORY > GEAR STATS (popup with Reforge button)


A sample presentation of the gear description with all 3 soft buttons as displayed on the left panel. The Reforge button has appeared in the middle of the Equip and Unsocket buttons.

Besides the standardized, contrasting colors of the popup text, the Named item’s ability is emphasized in highlighted text.

Notice how the Increase Inventory Slots button keeps shifting down, all the way to the bottom decoration, until it eventually disappears.

---

(3/3) BUILD > HERO'S ARMORY > GEAR STATS (popup on right side)


A sample presentation of the gear description for a Set item as displayed on the right panel.

Besides the standardized, contrasting colors of the popup text, the title line of the Set item’s ability is emphasized in highlighted text. The activated proc is displayed in Green text. Unavailable procs are displayed in Gray text.

Notice the asterisk (*) on a gear stat, indicating it is a reforged stat. Let’s see how this happens in Reforging discussed later.

---

[PGB]

(1/4) BUILD > HERO'S ARMORY > REFORGING


Reforging gear is one of the valuable functionalities for building the hero, and so it is important for the exploring new player to experience an intuitive interface and a generally beneficial RNG behavior here.

This Gear Stat Reforge popup is displayed on pressing the Reforge button on a gear description popup. This image shows the contents of the popup when opened for the first time for a gear item. As the sample is for a Legendary gear, its 4 bonus stats with their values are listed as buttons on the left panel. The reforging procedure is described briefly in a scrolling paragraph.

On the right panel, a scrollable list of potential, reforgeable stats are displayed by default to interest the player in this gamble. As suggested by Vouis , et al, the same 12 stats (4 Offensive, 4 Defensive, and 4 Utility) provided in Champion Points popup could be provided on the reforgeable-stats list too.

At this stage, the reforgeable-stats list is not interactive (so the Gray text on the labels). However, these stats are quasi-buttons, and so the plaque border is used as an exception. By convention, even a simple radio/ option (multiple-choice-single-select) button presentation would suffice here.

For now, only the gear-stat buttons on the left can be pressed. A Close button allows exiting at any step of the procedure.

---

(2/4) BUILD > HERO'S ARMORY > REFORGING (step 1)


On pressing a gear-stat button on the left panel, Step 1 of reforging begins. The list of reforgeable stats on the right panel is refreshed according to the selected stat, as follows:

• The selected stat appears as the first item on the list, with slightly improved value range.
• Following the selected stat, the default list of 10 stats (mentioned earlier) is presented with value ranges.
• The list continues to remain non-interactive, so the label text is still Gray.

Like a good sales person, this step further tempts the player to continue with the gamble.

A Reforge button appears on the right panel, stating the reforging cost. Even now, the player can exit without spending the reforging cost.

---

(3/4) BUILD > HERO'S ARMORY > REFORGING (step 2)


On pressing the Reforge button on the right panel, reforging moves on to Step 2. Here, except for the gear stat selected in step 1, all other stat buttons on the left panel are locked out. The reforging cost is deducted from the player’s Gold/ Gems balance.

On the right panel, the list of reforgeable stats (after some gambling-slot scrolling animation) presents the final choices of 3 (i.e., 2 new and 1 improved) stats. Notice the font size and color change of the label text, as these 3 reforged stats become selectable. Here, the first stat is selected by default (highlighted in Blue text) and the gear-stat button automatically changes to this new stat. Now, the player can either confirm this auto-selection or pick 1 of the other 2 available reforged stats (in Green text). The other reforged, but unavailable, stats are presented in Red text.

The hard button morphs to presents the instruction to confirm the final stat selection. At this point, if the player closes the popup, the auto-selected stat stays on the gear.

---

(4/4) BUILD > HERO'S ARMORY > REFORGING (step 3)


On pressing the Confirm Selection button on the right panel, reforging moves on to the final Step 3. This step is basically a cycling back to Step 1, with the following exceptions:

• Except the reforged stat, all other stat buttons on the left panel remain locked. Notice the asterisk (*) on the reforged stat (as requested by Chosen ).
• The Reforge button morphs again to Reforge Again button featuring the new reforge cost.

Like a good sales person, this step could further tempt the player to continue with the gamble.

For reforging again, the gear stat button need not be pressed again, as it remains selected permanently. Only the Reforge Again button needs to be pressed to restart the procedure.

If the player is satisfied with the outcome, the Close button offers a happy exit.

---