{"id":320,"date":"2025-04-29T22:28:05","date_gmt":"2025-04-29T22:28:05","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/lost-echo\/?p=320"},"modified":"2025-05-15T02:32:07","modified_gmt":"2025-05-15T02:32:07","slug":"week-13-ui-ux-refine","status":"publish","type":"post","link":"https:\/\/projects.etc.cmu.edu\/lost-echo\/week-13-ui-ux-refine\/","title":{"rendered":"Week 13 UI\/UX Refine"},"content":{"rendered":"\n

Throughout our soft opening and multiple playtest sessions, we received consistent feedback that while the core gameplay and narrative integration were smooth and well-received<\/strong>, there were recurring concerns about the UI layout and the UX experience it created<\/strong>\u2014especially for first-time players.<\/p>\n\n\n\n

Core Problem<\/strong><\/h3>\n\n\n\n

Our game\u2019s UI presented mixed layout orientations and visual hierarchy issues:<\/p>\n\n\n\n

    \n
  • The flute UI<\/strong> (essential for note playing) used a vertical layout<\/strong> on the left side of the screen.<\/li>\n\n\n\n
  • The dialogue box<\/strong> appeared horizontally at the bottom.<\/li>\n\n\n\n
  • The notebook UI<\/strong> opened across the middle in a wide horizontal layout.<\/li>\n<\/ul>\n\n\n\n

    This inconsistency between horizontal and vertical interfaces\u2014combined with the constant need to glance between flute, dialogue, and notebook\u2014led to a disjointed and confusing player experience, especially for new players unfamiliar with top-down exploration games. Some also struggled with navigation and spatial memory within the map.<\/p>\n\n\n\n

    \"\"
    Original Layout<\/figcaption><\/figure>\n\n\n\n

    Final Week Focus: UI\/UX Polish<\/strong><\/h3>\n\n\n\n

    To make the biggest impact in the shortest time, we\u2019ve prioritized streamlining the UI\/UX layout, making it more intuitive, readable, and visually coherent.<\/p>\n\n\n\n

    \n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n
    New Layout – Play Flute and Open Notebook<\/figcaption><\/figure>\n\n\n\n
      \n
    • Playing Flute UI \u2013 Make It a Prominent, Intuitive Feature<\/strong>\n
        \n
      • Changed the flute layout from vertical to horizontal to align with the dialogue and notebook layout.<\/li>\n\n\n\n
      • Repositioned the flute icons to the lower portion of the screen, separating it visually from the notebook and inventory UI.<\/li>\n\n\n\n
      • Replaced the hotkey indicators (“1 2 3 4 5”) with the corresponding elemental note names (Earth, Wood, Fire, etc.) for better clarity and thematic consistency.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Notebook UI \u2013 Reduce Clutter and Improve Readability<\/strong>\n
          \n
        • Reduced the overall size of the notebook interface so it occupies less of the middle screen.<\/li>\n\n\n\n
        • Added a word-highlighting feature: when a player learns a new vocabulary word, the notebook automatically opens to the relevant page and highlights the new term in bold red for easy recognition.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Task Scroll \u2013 Improve Visibility and Aesthetic Clarity<\/strong>\n
            \n
          • Shortened the task scroll length for better readability.<\/li>\n\n\n\n
          • Replaced numeric task indicators with cleaner, stylized font icons to enhance visual clarity.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Mini-Map \u2013 New Feature to Improve Navigation and Orientation<\/strong>\n
              \n
            • Introduced a mini-map feature that displays the player’s current location within the environment.<\/li>\n\n\n\n
            • Designed to assist players unfamiliar with top-down exploration games, ensuring they can navigate the world confidently and never feel lost.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
              \"\"
              Dialogue UI<\/figcaption><\/figure>\n\n\n\n
              \"\"
              Open Task Tracker and Mini-Map<\/figcaption><\/figure>\n\n\n\n

              By improving clarity, layout consistency, and navigational support, we’ve significantly enhanced our final version of the game.<\/p>\n\n\n\n

              <\/p>\n","protected":false},"excerpt":{"rendered":"

              Throughout our soft opening and multiple playtest sessions, we received consistent feedback that while the core gameplay and narrative integration were smooth and well-received, there were recurring concerns about the UI layout and the UX experience it created\u2014especially for first-time players. Core Problem Our game\u2019s UI presented mixed layout orientations and visual hierarchy issues: This […]<\/p>\n","protected":false},"author":3,"featured_media":385,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs"],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/posts\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":7,"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/posts\/320\/revisions"}],"predecessor-version":[{"id":492,"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/posts\/320\/revisions\/492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/media\/385"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/media?parent=320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/categories?post=320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/lost-echo\/wp-json\/wp\/v2\/tags?post=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}