Wireframes
To view the image clearly, we recommend our reader to view the link below. This link will bring you to draw io page:
How Design Requirements from User Persona/HTA Are Incorporated into the Wireframes:
1. Login/Register
-Wireframe and HTA step include Log In & Register screen for accessing the application. Users can either log in or create a new account, ensuring a smooth onboarding experience.
2.Language Learning Session
-In the wireframes, users can select their learning level (Beginner, Intermediate, Professional) and progress through different challenges (Grammar, Vocabulary, Pronunciation). Same goes to HTA ,it is a second step of selecting language challenges.
3.Engage in Vocabulary Building Activities
-Interactive exercises are offered via the Vocabularies, Grammar, and Pronunciation Screens.
-The Vocabulary Screen lets users take tests, fix mistakes, and monitor their progress.
- Grammar Screen: In accordance with HTA's reinforcement procedure, proper and incorrect responses are shown.
-Pronunciation Screen: This screen allows users to record and compare their pronunciation, matching the HTA steps for review and practice.
-The Vocabulary Screen lets users take tests, fix mistakes, and monitor their progress.
- Grammar Screen: In accordance with HTA's reinforcement procedure, proper and incorrect responses are shown.
-Pronunciation Screen: This screen allows users to record and compare their pronunciation, matching the HTA steps for review and practice.
4.Tracking Quiz Scores and Progress
-The wireframes incorporate elements for tracking progress, allowing users to view scores along with comments like "Excellent" or "Incorrect." This includes tools for user feedback to assist students in tracking their development.
5.Reflect and Set Goals
-The HTA phase of reflecting and creating objectives for improvement is matched by the Progress Screen, which allows users to examine previous performance.
Interaction Metaphors Used and Justification:
1. Classroom Metaphor: The layout mimics a classroom, which is an organized learning environment. In order to simulate a teacher-student feedback system, users "choose levels," finish challenges, and obtain grades (Excellent/Incorrect).
Justification: Because it mimics a familiar setting, this metaphor is very accessible to users who are learning a language.
2. The use of gaming Metaphor: The wireframes incorporate gamification components within the scorecards, stages, and progress indicators. User motivation is increased by the visual rewards and instant feedback (such as Excellent/Incorrect).
Justification: By making learning dynamic and interesting, gamified interfaces increase user retention and enhance learning results.
3. Journey Metaphor: The user's development is framed as a journey toward mastery in the walkthrough screens ("Your Journey to Fluency Starts Today"). Users are encouraged by this paradigm to see learning as a manageable, methodical process.
Justification: The journey metaphor fosters a sense of advancement and is in line with users' long-term objectives.
Justification: Because it mimics a familiar setting, this metaphor is very accessible to users who are learning a language.
2. The use of gaming Metaphor: The wireframes incorporate gamification components within the scorecards, stages, and progress indicators. User motivation is increased by the visual rewards and instant feedback (such as Excellent/Incorrect).
Justification: By making learning dynamic and interesting, gamified interfaces increase user retention and enhance learning results.
3. Journey Metaphor: The user's development is framed as a journey toward mastery in the walkthrough screens ("Your Journey to Fluency Starts Today"). Users are encouraged by this paradigm to see learning as a manageable, methodical process.
Justification: The journey metaphor fosters a sense of advancement and is in line with users' long-term objectives.
0 Comments