Eternium
Eternium

Announcement

Collapse
No announcement yet.

Newb-Friendly and Accessible GUI and UX Standardization

Collapse
This topic is closed.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Newb-Friendly and Accessible GUI and UX Standardization

    Hello Eternium Developers,

    Kind Attn.: Red (Developer) , Liana-Daniela (QA Specialist)

    First, my heartiest congratulations and thanks for creating this exceptional game and offering it virtually free of charge. Eternium is truly a labour of love, a work of art and a feat of engineering. When I started on this mobile game as a visually impaired new player last year, I encountered some challenges that could put off less-perseverant gamers. Ergo, I hereby humbly submit for your benign consideration a few suggestions to:
    • Reduce attrition of new players due to small-screen (sub-4.7”) challenges.
    • Enhance the user experience of visually impaired (myopic and color-deficient) players.
    • Improve GUI experience via consistent visual design and intuitive interactivity.

    Duly cognizant that your graphics team would have done extensive research and designed the best possible GUI and content assets, I venture these suggestions only to further polish a dazzling gem. Please do feel free to ignore these suggestions if they are naïve, premature, infeasible, tried-and-failed, expensive or simply misunderstood by me. I would still have the pleasure of having returned your favour in a small way.

    Note: As this is my consolidated suggestions post, it has become too lengthy and unwieldy (like in the Devil vs. Tailor parable), frequently freezing up while saving/ publishing. So, I have broken it up and presented the sections as Comments. Regret any inconvenience.

    PS: Explanatory graphics created using Microsoft PowerPoint and Paint (and limited by deuteranopia); kindly bear with their quality, or lack thereof…

    GUIDING PRINCIPLES AND ASSUMPTIONS

    Following are the design principles and assumptions based on which these suggestions are made:
    1. Standardization enhances predictability and intuitive interaction.
    2. Localization requires ~30% more space in text boxes. In case of overflow, scrolling is preferred over shrinking the translated text to fit the box.
    3. Accessible design is an inclusion strategy to increase and retain player base.
    4. An Exit option without taking action is preferred in interfaces.
    5. Majority (51%+) of players are male, with Blue as the predominant color of choice.
    6. Majority of players are right-handed and few are ambidextrous.
    7. Majority of players are relatively new and require JIT instructions to continue.
    8. Players who spend money are aged 25+ and many may have defective vision.
    9. Though it's a role-playing game, Eternium should not ask the player to "kill" anything/ anyone (a la Bluewhale) or declare "You're Dead!". The hero dies in battle, not the player; the hero receives life, not the player. This is an anthropomorphic slip (and it may have legal consequences in certain jurisdictions), so should be avoided. The distinction between "You" and "Your hero" in the interface text needs to be explicit.
    Should any assumption need change, please PM me. The suggestions will be rectified accordingly.

    SUMMARY OF CHANGES

    Following changes to the current game terminology/ features/ presentation/ behaviours are made/ recommended in these suggestions:

    Textual changes
    1. One-word page titles changed to 2 words for better clarity.
    2. "Gear" page title changed to "Hero's Armory". The new term better reflects the activities happening on that page.
    3. "Craft" page title changed to "Gear Smithy". The new term does not confuse with Jewelry crafting. To further distinguish the 2 procedures, the term "Forging" is used for gear and "Crafting" for jewelry.
    4. "Stash" page title changed to "Shared Stash". The new term better communicates to new players about its function.
    5. "Store" page title changed to "In-Game Shop". The new term prevents confusion for new players about "Storage" and "Stash". "Hero's Shop" could be even better.
    6. "Abilities" page title and term changed to "Skills". The new term translates better. "Ability" is a generic term in many languages, whereas "Skill" is a specific term. Consequently, "Ability Rating" becomes "Skill Rating".
    7. "Jewelry" page title and items changed to "Talismans". The new term appropriately reflects the purpose of the item. Newbs who find "jewelry" superfluous for battle may relate to this new term better.
    8. The term "Necklace" changed to "Necklet". The new term is appropriate in the game context and matches the current image. "Collar" is even better.
    9. The terms "Buy" and "Purchase" need to be distinguished. The former term should be used for "hero 'buying' items" whereas the latter should be used for "player 'purchasing' IAPs". This clarifies "Buyback" and "Restore Purchases" too. Upon "buying" using Gold or Gems, the hero "receives" items, whereas upon "purchasing" using real money, the player "gets" IAPs. Here, a potential anthropomorphic confusion is prevented.
    10. The terms "Gems" and "Gemstones" need to be distinguished. Perhaps, "Crystals" can replace one of them.
    11. ALL CAPS used in titles and hard buttons for better visibility. Soft buttons feature Title Casing.
    Visual changes
    1. All interfaces and popups are precisely aligned (using guides) for consistency.
    2. Text and buttons are sized for 4.7"-screen mobile device.
    Integration/ Programming changes
    1. The current "Heroes" page is presented as the "Menu" page for simplicity and clarity.
    2. The current "Menu" page is presented as the new "Hometown" page to hold non-build buttons.
    3. Clutter reduced on "Friends" page via a popup bypass to increase legibility of information therein.
    4. Clutter reduced on "Abilities" pages via a popup bypass to increase visibility of information therein.
    5. A new concept of “Player Badge” is introduced as a recognition system for long-term players.
    6. A new concept of "Mount" to replace the companions is introduced as an alternative.
    7. An external "Game Tutorials" link is introduced as a newb-enabler.
    8. A new functionality of "Dictionary" is introduced as a newb-enabler.
    9. A new functionality of "Notes" is introduced as a newb-enabler.

    TABLE OF CONTENTS
    • 00: Standardization and Cascading Style
      • 00.1: Objects Library and Accessibility Specs
        • 00.1.1: Cascading Style Library
        • 00.1.2: Accessibility Considerations
      • 00.2: Templates
        • 00.2.1: General Background
        • 00.2.2: Popups on Menu Page
        • 00.2.3: Sub-Popups on Menu Popup
        • 00.2.4: Soft Popups on Menu Popup
        • 00.2.5: "Build" Tabs
        • 00.2.6: Alert Popups on Build Tab
        • 00.2.7: Soft Popups on Build Tab
        • 00.2.8: Build Accessories
    • 01: The "New Hero" Interface
      • 01.1: New Hero Description Popup
    • 02: The "Menu" Page
      • 02.1: Welcome and Alert Popup
      • 02.3: Heroes Gallery
    • 03: Menu > Unlock Hero
    • 04: Menu > Delete Hero
    • 05: Menu > Log Out
    • 06: Menu > Daily Quests
      • 03.1: Begin Daily Quest
      • 03.2: Continue Daily Quest
      • 03.3: Complete Daily Quest
    • 07: Menu > Support Eternium
      • 07.1: Canceled Payment Alert Popup
    • 08: Menu > Support Eternium > Event Packs Popup
      • 08.1: Event Value Pack Item Description
    • 09: Menu > Seasonal Event
    • 10: Menu > Game Settings
      • 10.1: Language Settings
      • 10.2: Accessibility Settings
    • 11: Menu > Invite Friends
      • 11.1: Vital Stats Popup
      • 11.2: Gear Stats Popup
      • 11.3: Add Friend Popup
      • 11.4: Invite Friends Popup
        • 11.4.1: Clipboard-Copy Message
    • 12: Menu > More Features
      • 12.1: Invite Friends Popup (standalone)
    • 13: More > Restore Purchases
      • 13.1: Restore Purchase Alert
    • 14: More > Submit Promo Code
    • 15: More > Delete Account
    • 16: Menu > Player Badge Alert
      • 16.1: Player Badge Display
    • 17: The "Hometown" Page
    • 18: Hometown > Leader Board
      • 18.1: Leader Board Vital Stats
      • 18.2: Leader Board Gear Stats
      • 18.3: Leader Board Trial Stats
    • 19: Hometown > Build Notes
    • 20: Hometown > Eternium Mail
      • 20.1: Mail with Soft Button
      • 20.2: Mail with Hard Button
    • 21: Hometown > Achievements
    • 22: Hometown > Rewards Calendar
      • 22.1: Collected Reward
      • 22.2: Missed Reward
    • 23: Hometown > In-Game Shop
      • 23.1: Shop with Mercenaries
      • 23.2: Shop with Mount Tokens
    • 24: The "Build" Interfaces
      • 24.1: Hero's Vital Stats Popup
    • 25: Hero's Gear Stats
      • 25.1: Soft Popup (without buttons) Showing Gear Comparison
      • 25.2: Soft Popup (with buttons) on Left Panel
      • 25.3: Soft Popup (with buttons) on Right Panel
    • 26: Gear Reforging
      • 26.1: Presenting Instruction
      • 26.2: Selecting Stat to Reforge
      • 26.3: RNG Action
      • 26.4: Selecting Final Stat
    • 27: Sell Alert
    • 28: Buyback
    • 29: Inventory Expansion Alert
    • 30: Champion Level
      • 30.1: Champion-Points Popup
    • 31: Build > Shared Stash
      • 31.1: Stash Expansion Alert
    • 32: Build > Gear Smithy
      • 32.1: Gear Picker
      • 32.2: Gear Forging
    • 33: Build > Talismans > Crafting
      • 33.1: Crafting Stat Picker
      • 33.2: Crafted Item Sorter
    • 34: Build > Talismans > Fusing
      • 34.1: Presenting Fusing Instruction
      • 34.2: Fusion Result Preview
    • 35: Build > Combat Skills
      • 35.1: Skill Description Soft Popup
      • 35.2: Skill Upgrade Popup
      • 35.3: Finish/Abort Popup
      • 35.4: Synergy Level Popup
    • 36: Build > Battle Team
      • 36.1: Mount for Warrior
      • 36.2: Mount for Bounty Hunter
      • 36.3: Mount for Mage
    • 37: Build > Dictionary
    • 38: Build > Notes
    • 39: The "Gameplay" Modes
      • 39.1: Story Mode
      • 39.2: Trials Mode
      • 39.3: Story Sequencing
    • 40: Story > Training Grounds
      • 40.1: Endurance Training
      • 40.2: DPS Training
        • 40.2.1: DPS Stats Popup
    • 41: Story > Arena
      • 41.1: Arena Story
      • 41.2: Arena Story Finish
    • 42: General Story and Trial Battlefields
      • 42.1: Story screen
      • 42.2: Trial screen
      • 42.3: Battlefield Map Popup
    • 43: Battle Victory and Defeat Presentations
      • 43.1: Battle Victory Button
      • 43.2: Battle Defeat Popup
        • 43.2.1: Post-Defeat Shop Popup
        • 43.2.2: Battle Exit Alert Popup

    Many Thanks for your time...
    Last edited by Prakash Bebington; Yesterday, 04:01 AM.

  • #2
    [1/2] CASCADING STYLE LIBRARYClick image for larger version  Name:	00.1.1_Cascading-Style-Library.png Views:	1 Size:	199.5 KB ID:	100722
    • "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.
      • Achievements—Has a Black glow. Blinks when new achievements are completed. Launches the Achievements 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.
      • Talisman—(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 (see §07).
      • Events—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 a symbol 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 CONSIDERATIONSClick image for larger version  Name:	00.1.2_Accessibility-Considerations.png Views:	1 Size:	299.8 KB ID:	101092
    • 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.
    Last edited by Prakash Bebington; 05-21-2018, 10:36 AM.

    Comment


    • #3
      [1/8] TEMPLATE FOR GENERAL BACKGROUND

      Click image for larger version  Name:	00.2.1_General-Background.png Views:	1 Size:	223.4 KB ID:	101310
      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 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/8] TEMPLATE FOR POPUPS ON MENU PAGE

      Click image for larger version  Name:	00.2.2_Template_Menu-Popups.png Views:	1 Size:	99.9 KB ID:	101311
      Template for the popups featuring on the Menu page. A wide heading plaque holds 2 words. The instruction text helps newbs know the purpose of the popup. The prominent Close button enables the player to return to the background page/ popup.

      Only 2 prominent (steel) borders are featured; the content area has subdued borders to avoid a maze-like box-in-box design. The animated green-blue background extends here too, pleasantly contrasting the popup display.

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

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

      Click image for larger version  Name:	00.2.3_Template_Menu-Sub-Popups.png Views:	1 Size:	50.0 KB ID:	101312
      Template for the sub-popup on a Menu popup is half the size of its parent. 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 with a dark, semi-transparent background to obscure and disable the parent's Close button.

      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.

      Like the Server Save button, the Close button overlaps the top-right decoration and enables exit without taking action. 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. The standardized alert icon draws attention to this important popup.

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

      [4/8] TEMPLATE FOR SOFT POPUPS ON MENU POPUP

      Click image for larger version

Name:	00.2.4_Template_Menu-Soft-Popup.png
Views:	1
Size:	77.5 KB
ID:	101537
      Precisely the size of the previous sub-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.

      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.

      [5/8] TEMPLATE FOR "BUILD" TABS

      Click image for larger version  Name:	00.2.5_Template_Build-Tabs.png Views:	1 Size:	162.9 KB ID:	101314
      Template for the interfaces featuring on the Build page. Notice that this template is precisely aligned to that for 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 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 (and so, framed by a plaque).

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

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

      Click image for larger version  Name:	00.2.6_Template_Build-Tab-Alerts.png Views:	1 Size:	35.0 KB ID:	101315
      Similar to the template for the sub-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.

      [7/8] TEMPLATE FOR SOFT POPUPS ON BUILD TABS

      Click image for larger version  Name:	00.2.7_Template_Build-Tab-Soft-Popups.png Views:	1 Size:	169.5 KB ID:	101316
      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.

      [8/8] TEMPLATE FOR BUILD ACCESSORIES

      Click image for larger version  Name:	00.2.8_Template_Build-Accessories.png Views:	1 Size:	177.6 KB ID:	101317
      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.
      Last edited by Prakash Bebington; Yesterday, 04:21 AM.

      Comment


      • #4
        [1/2] NEW HERO CREATION

        Click image for larger version  Name:	01.0_New-Hero-Interface.png Views:	1 Size:	236.8 KB ID:	101320
        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 they have to live by 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

        Click image for larger version  Name:	01.1_New-Hero-Description.png Views:	1 Size:	256.0 KB ID:	101321
        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:
        Click image for larger version  Name:	01.1a_New-Hero-Descriptions.png Views:	1 Size:	143.8 KB ID:	101322

        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 two-worded “Bounty Hunter” to a one-word “Assassin” (which might translate better)?
        Last edited by Prakash Bebington; 05-21-2018, 10:24 AM.

        Comment


        • #5
          [1/2] MENU > WELCOME AND ALERT

          Click image for larger version

Name:	02.1_Menu_Welcome-Alert.png
Views:	1
Size:	217.7 KB
ID:	101323
          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

          Click image for larger version

Name:	02.2_Menu_Heroes-Gallery.png
Views:	1
Size:	253.2 KB
ID:	101324
          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–16, let's take a look at the various popups launched by the buttons on this page.
          Last edited by Prakash Bebington; 05-21-2018, 10:31 AM.

          Comment


          • #6
            MENU > UNLOCK HERO

            Click image for larger version

Name:	03_Menu_Unlock-Hero-Popup.png
Views:	1
Size:	198.1 KB
ID:	101345
            On pressing the keyhole icon on a locked hero slot, this popup is displayed. The standardized menu sub-popup template is used for this. The standardized alert icon is used for this alert popup.

            Comment


            • #7
              MENU > DELETE HERO

              Click image for larger version

Name:	04_Menu_Delete-Hero-Popup.png
Views:	1
Size:	263.4 KB
ID:	101347
              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.

              Comment


              • #8
                MENU > LOG OUT

                Click image for larger version

Name:	05_Menu_Log-Out-Popup.png
Views:	1
Size:	219.8 KB
ID:	101349
                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.

                Comment


                • #9
                  [1/3] MENU > DAILY QUEST > BEGIN QUEST

                  Click image for larger version  Name:	06.1_Menu_Daily-Quest-Begin.png Views:	1 Size:	201.3 KB ID:	101351
                  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

                  Click image for larger version  Name:	06.2_Menu_Daily-Quest-Continue.png Views:	1 Size:	202.3 KB ID:	101352
                  The Daily Quest popup showing a started, but unfinished, 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

                  Click image for larger version  Name:	06.3_Menu_Daily-Quest-Complete.png Views:	1 Size:	203.8 KB ID:	101353
                  The Daily Quest popup showing a finished 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.
                  Last edited by Prakash Bebington; 05-21-2018, 03:51 PM.

                  Comment


                  • #10
                    [1/2] MENU > SUPPORT ETERNIUM

                    Click image for larger version

Name:	07.0_Support-Eternium_Main.png
Views:	1
Size:	242.4 KB
ID:	101359
                    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.

                    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 > CANCELLED PAYMENT ALERT

                    Click image for larger version

Name:	07.1_Support-Eternium_Payment-Cancel-Alert.png
Views:	1
Size:	207.9 KB
ID:	101360
                    This is the alert popup in case of cancelled 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).

                    Comment


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

                      Click image for larger version

Name:	08.0_Support-Eternium_Event-Packs.png
Views:	1
Size:	251.5 KB
ID:	101365
                      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

                      Click image for larger version

Name:	08.1_Event-Packs_Item-Description.png
Views:	1
Size:	272.6 KB
ID:	101364
                      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.

                      Comment


                      • #12
                        MENU > SEASONAL EVENT

                        Click image for larger version

Name:	09_Menu_Seasonal-Event.png
Views:	1
Size:	238.4 KB
ID:	101367
                        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.

                        Comment


                        • #13
                          [1/2] MENU > GAME SETTINGS > LANGUAGE

                          Click image for larger version

Name:	10.1_More_Game-Settings_Language.png
Views:	1
Size:	242.1 KB
ID:	101370
                          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

                          Click image for larger version

Name:	10.2_More_Game-Settings_Accessibility.png
Views:	1
Size:	190.7 KB
ID:	101371
                          This is the Friends’ Heroes page, which has been modified from the current one by shifting out the “Invite Friends” content section on to a popup layer. This popup is displayed on pressing the Invite Friends button on the Menu page, with the Invite button blinking. Instead of directly presenting the Invite Friends popup, its parent popup is presented in order to introduce this feature to the new player.

                          Unlike the extant design, the friends’ name-list buttons 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.

                          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 symbol-buttons for Add and Refresh are converted to text-buttons for clarity.

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

                          Comment


                          • #14
                            [1/6] MENU > (INVITE FRIENDS)

                            Click image for larger version  Name:	11.0_Friends-Heroes_Main.png Views:	1 Size:	242.8 KB ID:	101377
                            This is the Friends’ Heroes page, which has been modified from the current one by shifting out the “Invite Friends” content section on to a popup layer. This popup is displayed on pressing the Invite Friends button on the Menu page, with the Invite button blinking. Instead of directly presenting the Invite Friends popup, its parent popup is presented in order to introduce this feature to the new player.

                            Unlike the extant design, the friends’ name-list buttons 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.

                            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 symbol-buttons for Add and Refresh are converted to text-buttons for clarity.

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

                            [2/6] MENU > FRIENDS' HEROES > VITAL STATS

                            Click image for larger version  Name:	11.1_Friends-Heroes_Vital-Stats.png Views:	1 Size:	262.4 KB ID:	101378
                            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/6] MENU > FRIENDS' HEROES > GEAR STATS

                            Click image for larger version

Name:	11.2_Friends-Heroes_Gear-Stats.png
Views:	1
Size:	260.8 KB
ID:	101538
                            This is the soft popup showing the gear stats of the friend’s hero. Notice its precise alignment with the parent content layer.

                            The popup shows the comparison with the player’s corresponding gear. With some programming wizardry, this comparison is presented by matching the displayed friend’s hero class with the player’s comparable hero class. This means that if the displayed friend’s hero is Warrior, its gear comparison should be with the player’s Warrior hero only, avoiding the “Cannot be used by Hunter/ Mage” snub. Only then does this functionality become meaningful to the player.

                            [4/6] MENU > FRIENDS' HEROES > ADD FRIEND

                            Click image for larger version  Name:	11.3_Friends-Heroes_Add-Friend.png Views:	1 Size:	193.6 KB ID:	101380
                            The Add Friend sub-popup displays with its darkened background to obscure and disable its parent’s hotspots. As this is not an alert popup, the standard alert icon is replaced with a context-specific handshake icon.

                            [5/6] MENU > FRIENDS' HEROES > INVITE FRIENDS

                            Click image for larger version  Name:	11.4.0_Friends-Heroes_Invite-Friends.png Views:	1 Size:	214.9 KB ID:	101381
                            The Invite Friends sub-popup is essentially the third content section in the current design that has been squeezed out into a separate popup. It serves 2 purposes:
                            • Reduces the clutter on the parent popup.
                            • Enables this popup to be displayed in isolation.

                            This sub-popup is presented without its parent in the background when launched from the “Game Settings > Invite Friends” command.

                            The buttons at the bottom are soft ones.

                            [6/6] MENU > FRIENDS' HEROES > INVITE FRIENDS > COPY-TO-CLIPBOARD MESSAGE

                            Click image for larger version  Name:	11.4.1_Friends-Heroes_Invite-Friend_Copy2Clipboard.png Views:	1 Size:	219.1 KB ID:	101382
                            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.
                            Last edited by Prakash Bebington; Yesterday, 04:23 AM.

                            Comment


                            • #15
                              [1/2] MENU > MORE FEATURES

                              Click image for larger version

Name:	12.0_Menu_More-Features.png
Views:	1
Size:	155.8 KB
ID:	101386
                              This More Features popup is displayed on pressing the More button on the Menu page. The Close button returns the player to the Menu page. 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. Like the Discussion Forum, it launches a separate browser window outside the game interface.

                              The Invite Friends functionality features here as well, as it is an important marketing tool. The View Achievements button presents the player's achievements in 2 variants:
                              • If signed in on Google Play, presents the achievements from there.
                              • If not signed in on Google Play, presents the achievements via a game popup (discussed in Hometown).

                              Sequencing of the buttons is as per their relevance to the player.

                              [2/2] MENU > MORE FEATURES > INVITE FRIENDS

                              Click image for larger version

Name:	12.1_Menu_More-Features_Invite-Friends.png
Views:	1
Size:	175.4 KB
ID:	101387
                              As discussed earlier, this is the Invite Friends sub-popup presented in isolation when launched via the More Features popup. Assuming that the new player may have explored the Invite Friends button on the Menu page directly, this popup is presented without its parent in the background, but with a step-parent ().

                              Comment

                              Working...
                              X