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.

    Ideator Credits: Many of these suggestions are from other players on this Forum; I have just given a visual representation to their ideas. So, I have tried to remember and give credit to those whom I could recall. If I missed anyone, please PM me so that I can assign due credit under that suggestion.
    Note: This is my sole, consolidated post for suggestions. Unfortunately, vBulletin places restrictions on post length and comment count. So, I am compelled to split this post into multiple “Comments” (with links from the main post). Regret the inconvenience to readers; and my apologies to the moderator (Travis).

    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/ behaviors are made/ recommended in these suggestions.

    Textual Changes:
    1. Global level—
      1. ALL CAPS used in titles, table header-footers, and hard buttons for better visibility. Soft buttons feature Title Casing.
      2. One-word page titles changed to 2 words for better clarity.
    2. Page titles—
      1. "Gear" page title changed to "Hero's Armory". The new term better reflects the activities happening on that page.
      2. "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.
      3. "Stash" page title changed to "Shared Stash". The new term better communicates to new players about its function.
      4. "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.
      5. "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".
      6. "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.
      7. “Reward Calendar” page title and term changed to “Rewards Calendar”, as it essentially a calendar of rewards.
    3. Terms—
      1. “Rank” is changed to “Level” for skill upgrades. In ranking, the lowest number is the highest rank, whereas the upgrade numbers imply increasing level (like in Karate, Six Sigma, etc.).
      2. “Chest” on the current Craft page is changed to “Vest” in the new Gear Smithy page.
      3. “Quality” (as in gear/ gemstone quality) changed to “Grade”, as the former term indicates a defective item in case of lower-grade gear/ gemstone, effectively confusing new players. Quality is a technical term and is inexact in the game context.
      4. "Necklace" changed to "Necklet". The new term is appropriate in the game context and matches the current image. "Collar" is even better.
      5. "Gems" and "Gemstones" need to be distinguished (as requested by Qeltar , BAgate , et al). Perhaps, "Crystals" can replace one of them. Perhaps, "Crystals" can replace one of them.
      6. "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.
    4. To avoid textual redundancy and to give better clarity to newbs, the gray description below the popup title of gear and skills follows these specs:
      1. Standard gear is identified by its level, grade (i.e., Common/ Uncommon/ Rare/ Epic/ Legendary), and class (i.e., Weapon/ Armor/ Talisman), not its type. E.g.:
        • Level 1 Common Weapon, not Common Sword.
        • Level 10 Uncommon Armor, not Uncommon Shield/ Cape/ Helm/ Shoulder Pads/ Vest/ Gloves/ Pants/ Boots.
        • Level 20 Rare Talisman, not Rare Necklet/ Ring.
      2. Special gear is identified by its level, grade, and status. E.g.:
        • Level 30 Epic Living Item, not Epic Sword/ Mace/ Pistol/ Cape.
        • Level 40 Legendary Named Item, not Legendary Sword/ Mace/ Pistol/ Shield/ Cape.
        • Level 50 Legendary Set Item, not Legendary Helm/ Shoulder Pads/ Vest/ Gloves/ Pants/ Boots.
      3. Gemstones are identified just by their level. E.g.:
        • Level 1 Gemstone.
        • Level 6 Gemstone.
      4. Wherever applicable, skills are described by their level and class. E.g.:
        • Level 1 Attack Skill, not just Attack Skill.
        • Level 5 Utility Skill, not just Utility Skill.
        • Level 10 Passive Skill, not just Passive Skill.
    5. The word “Set” is used in the popup title of Set gear to distinguish from Named items for newbs. E.g.: Adventurer’s Set Gloves instead of Adventurer’s Gloves, distinguishing it from, say, Elban’s Scepter.
    6. A humble request is hereby made to replace the names of trials with the surnames of developers and top players (such as Level 5 badge winners and the first player to reach the highest trial). This would be a significantly meaningful gesture of honor.
    Visual Changes:
    1. All popups are fitted within 800x600 pixels.
    2. All popups and interfaces are precisely aligned (using guides) for consistency.
    3. Text and buttons are sized for 4.7"-screen mobile device.
    4. For consistency and greater flexibility, tabs are replaced with buttons, except for the Build tabs. Whenever buttons display tab behaviors, their font size changes (as an exception). The active button (tab) has larger fonts, while its inactive counterparts have smaller ones.
    5. Like all other gear, jewelry items also could be prominently visible/ shine on the hero. Given the effort that goes into creating these items, their visibility could be quite satisfying for players.
    6. Set and Named items could have a unique border, differentiating from Standard gear (Credit: starshine531 ).
    Integration/ Programming Changes:
    1. Modifications to existing—
      1. The current “Heroes” page is presented as the “Menu” page for simplicity and clarity. All non-build buttons common to all heroes are placed here.
      2. The current “Menu” page is presented as the new “Hometown” page. All non-build buttons for a specific hero are shifted here.
      3. Clutter reduced on “Abilities” pages via a popup bypass to increase visibility of information therein.
      4. Clutter reduced on “Friends” page by splitting it into 2 functionalities:
      5. Friends’ Heroes page, for only viewing the heroes of friends.
      6. Join Friends page, for inviting, adding, deleting, PvP, and also chatting with friends.
      7. The inconspicuous hotspots/ hit-boxes/ buttons on the currency-balance indicator have been deleted. Instead:
      8. “Buy-Gold-with-Gems” option shifted to the In-Game Shop.
      9. “Purchase-Gems-with-Money” (IAPs) option spun off into a separate, prominent popup, titled “Support Eternium”.
      10. Resequencing of stories with 3 new bosses and 2 additional dungeons.
    2. Entirely new—
      1. “Sort Crafted Talismans by Stat” functionality included on the “Jewelry” page as a pain-reliever during the crafting procedure.
      2. “Friend Chat” functionality introduced for enabling player collaboration (and possible newb-enabler).
      3. “Game Tutorials” external link introduced as a newb-enabler.
      4. “Dictionary” functionality introduced as a newb-enabler.
      5. “Notes” functionality introduced as a newb-enabler.
      6. “Accessibility Settings” functionality introduced as a pain reliever for differently abled players.
      7. “Buy-Gems-with-Gold” concept introduced in the In-Game Shop as a pain-reliever for long-term players.
      8. “Player Badge” concept introduced as a recognition system for long-term players.
      9. “Mount” concept (replacing the companions) introduced as an alternative.


    TABLE OF CONTENTS
    (Click a link or scroll down for detailed suggestions...)
    Last edited by PGB; 05-31-2018, 03:14 PM. Reason: Added ideator credits from their old posts.

    #2
    [1/2] CASCADING STYLE LIBRARYClick image for larger version  Name:	00.1.1_Cascading-Style-Library.png Views:	1 Size:	198.3 KB ID:	101814
    • "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 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 PGB; 05-28-2018, 08:30 AM.

    Comment


      #3
      [1/10] TEMPLATE FOR GENERAL BACKGROUND

      Click image for larger version  Name:	00.2.01_General-Background.png Views:	1 Size:	223.4 KB ID:	101780
      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

      Click image for larger version  Name:	00.2.02_Template_Menu-Popups.png Views:	1 Size:	99.9 KB ID:	102191
      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

      Click image for larger version  Name:	00.2.03_Template_Menu-Sub-Popups.png Views:	1 Size:	104.1 KB ID:	102192
      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

      Click image for larger version  Name:	00.2.04_Template_Menu-Alert-Popups.png Views:	1 Size:	71.5 KB ID:	102193
      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

      Click image for larger version  Name:	00.2.05_Template_Menu-Soft-Popups.png Views:	1 Size:	161.0 KB ID:	102194
      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

      Click image for larger version  Name:	00.2.06_Template_Build-Tabs.png Views:	1 Size:	162.9 KB ID:	102195
      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

      Click image for larger version  Name:	00.2.07_Template_Build-Tab-Popups.png Views:	1 Size:	137.0 KB ID:	102196
      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

      Click image for larger version  Name:	00.2.08_Template_Build-Tab-Alerts.png Views:	1 Size:	138.9 KB ID:	102197
      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

      Click image for larger version  Name:	00.2.09_Template_Build-Tab-Soft-Popups.png Views:	1 Size:	311.1 KB ID:	102198
      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:
      Click image for larger version  Name:	00.2.09a_Format_Build-Tab-Skill-Description.png Views:	1 Size:	102.4 KB ID:	102201
      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

      Click image for larger version  Name:	00.2.10_Template_Build-Accessories.png Views:	1 Size:	177.6 KB ID:	102202
      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 PGB; 05-28-2018, 08:31 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 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

        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 2-worded “Bounty Hunter” to a 1-word “Assassin” (which might translate better)?
        Last edited by PGB; 05-28-2018, 08:31 AM.

        Comment


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

          Click image for larger version  Name:	02.1_Menu_Welcome-Alert.png Views:	1 Size:	219.3 KB ID:	102203
          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.0 KB ID:	102204
          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.
          Last edited by PGB; 05-28-2018, 08:32 AM.

          Comment


            #6
            MENU > UNLOCK HERO

            Click image for larger version  Name:	03_Menu_Unlock-Hero-Popup.png Views:	1 Size:	198.7 KB ID:	102206
            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.
            Last edited by PGB; 05-28-2018, 08:32 AM.

            Comment


              #7
              MENU > DELETE HERO

              Click image for larger version  Name:	04_Menu_Delete-Hero-Popup.png Views:	1 Size:	234.6 KB ID:	102207
              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.
              Last edited by PGB; 05-28-2018, 08:33 AM.

              Comment


                #8
                MENU > LOG OUT

                Click image for larger version  Name:	05_Menu_Log-Out-Popup.png Views:	1 Size:	220.2 KB ID:	102208
                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.
                Last edited by PGB; 05-28-2018, 08:33 AM.

                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:	202.1 KB ID:	102209
                  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:	203.1 KB ID:	102210
                  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

                  Click image for larger version  Name:	06.3_Menu_Daily-Quest-Complete.png Views:	1 Size:	204.6 KB ID:	102211
                  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.
                  Last edited by PGB; 05-28-2018, 08:34 AM.

                  Comment


                    #10
                    [1/2] MENU > SUPPORT ETERNIUM

                    Click image for larger version

Name:	07.0_Support-Eternium_Main.png
Views:	520
Size:	240.8 KB
ID:	102450
                    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

                    Click image for larger version

Name:	07.1_Support-Eternium_Payment-Cancel-Alert.png
Views:	551
Size:	205.2 KB
ID:	102451
                    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).
                    Last edited by PGB; 05-28-2018, 05:45 PM. Reason: Added ideator credit from old posts.

                    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:	255.3 KB ID:	102215
                      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:	276.3 KB ID:	102216
                      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.
                      Last edited by PGB; 05-28-2018, 08:34 AM.

                      Comment


                        #12
                        MENU > SEASONAL EVENT

                        Click image for larger version  Name:	09_Menu_Seasonal-Event.png Views:	1 Size:	237.3 KB ID:	102217
                        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.
                        Last edited by PGB; 05-28-2018, 08:35 AM.

                        Comment


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

                          Click image for larger version  Name:	10.1_More_Game-Settings_Language.png Views:	1 Size:	240.5 KB ID:	102219
                          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:	189.1 KB ID:	102220
                          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.
                          Last edited by PGB; 05-28-2018, 08:35 AM.

                          Comment


                            #14
                            [1/7] MENU > JOIN FRIENDS

                            Click image for larger version  Name:	11.0_Join-Friends_Main.png Views:	1 Size:	151.4 KB ID:	102232
                            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

                            Click image for larger version  Name:	11.1.0_Join-Friends_Invite-Friends.png Views:	1 Size:	168.6 KB ID:	102233
                            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

                            Click image for larger version  Name:	11.1.1_Join-Friends_Invite-Friends_Copy2Clipboard.png Views:	1 Size:	175.8 KB ID:	102234
                            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

                            Click image for larger version  Name:	11.2_Join-Friends_Add-Friend.png Views:	1 Size:	148.0 KB ID:	102235
                            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)

                            Click image for larger version  Name:	11.3_Join-Friends_(with-friends).png Views:	1 Size:	175.0 KB ID:	102236
                            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

                            Click image for larger version  Name:	11.4_Join-Friends_Friend-Chat.png Views:	1 Size:	145.5 KB ID:	102237
                            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

                            Click image for larger version  Name:	11.5_Join-Friends_Delete-Friend.png Views:	1 Size:	184.8 KB ID:	102238
                            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 )
                            Last edited by PGB; 05-28-2018, 05:49 PM. Reason: Added ideator credits from their old posts.

                            Comment


                              #15
                              MENU > MORE FEATURES

                              Click image for larger version  Name:	12_Menu_More-Features.png Views:	1 Size:	154.0 KB ID:	102239
                              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.
                              Last edited by PGB; 05-28-2018, 05:51 PM. Reason: Added ideator credits from their old posts.

                              Comment

                              Working...
                              X