ICT 321 – AUTHORWARES

MODULE 4: UI/UX and Navigation Design using eXeLearning

Weeks Covered: Week 7–8
Course Outcome Addressed:
CO2 – Integrate multimedia assets into a unified authoring environment

MODULE OVERVIEW
This module introduces students to User Interface (UI) and User Experience (UX) principles as
applied in educational authoring systems. Using eXeLearning, students will design a menu-based,
non-linear lesson that demonstrates effective navigation, usability, and learner-centered
structure.
To ensure mastery, the module includes two laboratory activities:
1. A guided laboratory conducted with the teacher
2. An independent laboratory where students design their own authorware lesson

MODULE LEARNING OBJECTIVES

At the end of this module, students should be able to:
1. Explain UI and UX concepts in eLearning
2. Apply UI design principles in eXeLearning
3. Create menu-based and non-linear navigation
4. Use internal links for learner movement
5. Design and evaluate usability in an authorware lesson

PART 1: LECTURE DISCUSSION (TEACHER-LED)

1.1 User Interface (UI) in eLearning

Discussion Focus
User Interface (UI) refers to how content is visually organized and presented to learners. In
eLearning authorware, UI includes:
• layout and spacing
• text placement and headings
• menus and navigation labels
A good UI:
• reduces confusion
• highlights important information
• guides learners naturally

1.2 User Experience (UX) in eLearning

Discussion Focus
User Experience (UX) describes how learners feel while interacting with a lesson. UX considers:
• ease of navigation
• clarity of instructions
• ability to recover from errors
Good UX allows learners to focus on learning, not on figuring out the interface.

1.3 UI vs UX
UI UX
Visual appearance Learner experience
Layout and menus Ease and confidence
What learners see What learners feel
PART 2: TOOL ORIENTATION – eXeLEARNING

2.1 What is eXeLearning?

eXeLearning is a free, open-source authoring tool used to create interactive and non-linear
learning materials. It allows educators to:
• design menu-based lessons
• create internal navigation links
• work offline
• export lessons as HTML

2.2 Important Workflow Notes

• eXeLearning automatically creates a project when opened
• Pages represent lesson sections
• Internal links control navigation

PART 3: LABORATORY ACTIVITIES

LABORATORY ACTIVITY 1: GUIDED UI & NAVIGATION DESIGN

Type: Teacher-Guided Laboratory
Duration: First half of Week 7
Purpose
To introduce students to UI layout and navigation design through step-by-step guided practice
with the teacher.

Lab 1 Learning Outcomes

At the end of this laboratory, students will be able to:
• Navigate the eXeLearning interface
• Create a Home/Menu page
• Add basic lesson pages
• Create internal navigation links with guidance

LAB 1 – STEP-BY-STEP (Teacher Demonstration + Student Follow-Along)

Step 1: Project Setup (Guided)
1. Download and open eXeLearning (desktop app)
2. Fill in Content Metadata:
o Title: UI/UX and Navigation Design using eXeLearning
o Author: Student Name
o Description: An interactive, menu-based lesson designed using eXeLearning
focusing on user interface, navigation, and usability principles.
3. Click Save metadata and properties
Teacher demonstrates first, students follow.

Step 2: Create the Home / Menu Page (UI Design)

1. In the left panel, click new page and rename to: Home/Menu
2. Enable / toggle required iDevices: (Click iDevice Manager on your bottom left of the screen)
o Text
o Download Source File
o Form
o Discover
o External website
3. Close iDevice Manager
(Note: The enabled iDevice will appear in the left iDevices panel. See at the bottom.)
4. Add text to the page
 Now do this:
1. Make sure Home/Menu page is selected.
2. Click text/Discover. It’s up to you, whichever you enabled)
(A content block will now appear in the main editing area.)
3. Type this sample layout:
Welcome to this interactive lesson.
Please “select” a topic below to continue:
Topic 1 – User Interface Design
Topic 2 – Navigation Design
Topic 3 – Usability Testing
(Note: That is now your menu UI. Always remember that Home/Menu page -
the first text block must orient the learner.)
4. Click Save
5. Above that, you can see this:
Edit that one and input what the lesson is sets expectations improves UX
immediately. You may say:
Welcome to this interactive lesson. In this module, you will explore the basics of
User Interface (UI), Navigation Design, and Usability Testing in eLearning
Click this one and authorware. Please select a topic below to continue.
choose a suitable
icon.

* It should now look like this:

Step 3: Create Topic Pages (Structure)

Goal of this step is to turn your menu text into real destinations and prepare pages that the menu will
link to.
1. Add the topic pages (look at the left panel – structure area.)
2. Do this:
o Click the + (add page) button
o A new page will appear under Home/Menu
o Rename it to: Topic 1 – User Interface Design
3. Click Save
4. Repeat the same steps to create 2 more pages
o Topic 2 – Navigation Design
o Topic 3 – Usability Testing
5. Checkpoint: You should now see 4 pages on the left:
o Home / Menu
o Topic 1 – User Interface Design
o Topic 2 – Navigation Design
o Topic 3 – Usability Testing
If yes → you’re on track.
6. It should now look at this:
Step 4: Add Content to each Topic Page
Now we add simple content (not long yet).
1. Click Topic 1 – User Interface Design
2. Add or click Text (or discover) iDevice
3. Encode this:
User Interface (UI) design focuses on how learning content is visually presented to learners.
Good UI design ensures clarity, consistency, readability, and ease of interaction.
4. Click Save
5. Don’t forget to edit the title and choose suitable icon.

6. It should now look like this:

Now, let’s proceed to the TOPIC 2 CONTENT.

1. Click Topic 2 – Navigation Design
2. Click Text in iDevice
3. Encode this:
Navigation design helps learners move through a lesson easily.
Clear menus, internal links, and back buttons prevent learners from getting lost.
4. Click Save
5. Don’t forget to edit the title and choose suitable icon.

7. It should now look like this:

Now, let’s proceed to the TOPIC 3 CONTENT.

1. Click Topic 3 – Usability Testing
2. Click Text in iDevice
3. Encode this:
Usability testing evaluates how easy a lesson is to use. Feedback from users helps identify
navigation problems and improve the learning experience.
 4. Click Save
5. Don’t forget to edit the title and choose suitable icon.

6. It should now look like this:

Step 5: Create Navigation Links (Most Important Part)

In this part, you are going to link MENU to TOPIC PAGE
1. Go back to Home/Menu
2. Click Edit on the text block with the topics.

3. Highlight: Topic 1 – User Interface Design

4. Click Insert link (the chain icon)
(Note: As of now, let’s choose the internal link.)
5. Click Anchors, nodes or. elp
6. Click Topic 1 – User Interface Design
7. Click okay or save
(Note: Repeat the process for topic 2 and 3)
8. Click Save
9. It should now look like this:

You can tell that it

linked successfully
because the words
change its color
instantly and there is
an underline below
the word when you
want to click them.

Step 6: Add “Back to Menu” on each topic page.

On each topic page:
1. Scroll to the bottom
2. Add a Text iDevice
3. Type:  Back to Menu
4. Highlight it
 5. Insert / Edit Link
6. Click Anchors, nodes, or. elp
7. Choose Home/Menu
8. Click Save
(Note: This ensures that the learners never
get stuck and it is learner friendly.)
9. It should now look like this:

Step 7: Save your project (Local Folder)

1. Click Save (top-right)
2. Suggested Filename: ICT312_Week7-8_UIUX_Navigation.exe
Save your project (Export as Website)
1. Click File (top menu)
2. Choose Export as
3. Click a website
4. Choose a folder. (e.g., downloads)
5. After that, you may to the downloads and right click the Zip file.
6. Click Extract All
7. There would be a pop up saying “Select a Destination and Extract Files” and you will
click Browse.
8. Choose you selected folder, it could be downloads or PC. It depends on you.
9. Click Extract All
10. A new normal folder will appear. Click Index, then you can now browse in website
(Locally.)

TO OPEN YOUR MODULE ONLINE

1. You have to go to your Github account
2. Search: [Link]
3. Sign up if you have no account yet
4. Click create account
5. Click new repository (upper left)
6. Name it: ICT321-UIUX
7. Description: UI/UX and navigation design project created using eXelearning for ICT321
(Authorwares)
(Note: Step 6 and 7 depends on the subject you are working on.)
8. Visibility: Make sure it is Public
9. Readme / .gitigmore / license → Leave it as it is
10. Click Create Repository
11. Upload your exported files
(Note: To upload your eXelearning files, look closely at the middle section of your screen and you’ll see
this line: “Get started by creating a new file / uploading an existing file.”
12. The word you must click is uploading an existing file.
13. Upload the files (All extracted files, NOT THE ZIP ones)
(Note: Do not upload the ZIP File, and do not put files inside another folder.)
WARNING. If the GitHub only accept [Link] and [Link], or only 2 or less than 5 is being
uploaded, all you gonna have to do is to CANCEL. Click X on the right side of the file, then follow the
steps below.
1. Back to your extracted eXelearning file, you must see all of these:
[Link]
Content/
Libs/
Theme/
iDevices/
html/
custom
If you see [Link], ignore it ----- DO NOT upload it
2. Upload the following using DRAG and DROP (The right way)
(Note: Do the split screen for you to drag and drop because GitHub DOES support folders, but only via
Drag and drop.)
3. Once everything is added click Commit changes
4. You will see in your screen 404 This is not the webpage you are looking for
5. Click the Menu

6. Click the bottom of your menu: (e.g., madelinejasminez-creator/ict321/-uiux

7. Find the repository toolbar (upper left)

8. Click Settings (beside insights)

9. After clicking settings:
o Look at the left sidebar
o Scroll down
o Click pages
10. Set the branch (It says DOWN, so change it to MAIN)
11. Click Save
12. Wait for publish message. After 30 seconds – 2 mins, the page will refresh on its own and
see a message like: Your site is published at [Link]
[Link]/ict321-uiux/
 13. It should be seen like this:

14. If you don’t see the link yet, wait for 1 min or refresh the page or scroll up and down of the
same page screen.
15. Now, if the link can now be seen, try to open it in the INCOGNITO TAB and see if
everything works.

Lab 1 Output (Formative)

✔ Home/Menu page
✔ At least 3 topic pages
✔ Working internal navigation
(This lab is guided and formative; errors are allowed and corrected.)
Just follow everything above….

LABORATORY ACTIVITY 2: INDEPENDENT AUTHORWARE

CREATION
Type: Student-Centered Laboratory
Duration: Week 8
Purpose
To allow students to independently design a menu-based authorware lesson applying UI/UX
principles learned from Lab 1.

Lab 2 Learning Outcomes

At the end of this laboratory, students will be able to:
• Independently design UI layout
• Create structured navigation
• Apply usability principles without teacher guidance

LAB 2 – STUDENT TASK (INDEPENDENT)

Task Description
Students will create a new eXeLearning project with the following requirements:

Project Requirements
1. Topic of Choice (example):
o Digital Citizenship
o Online Safety
o Study Skills
o Any ICT-related topic
2. Required Structure
o Home / Menu page
o At least 3 topic pages
3. UI Requirements
o Clear instructions on Home/Menu
o Consistent layout across pages
o Readable text and spacing
4. Navigation Requirements
 o Menu → Topic links
o “Back to Menu” on all topic pages
o No dead-end pages
5. Usability Requirement
o Ask one peer to test the lesson
o Revise based on feedback

Lab 2 Submission
Students must submit:
✔ eXeLearning project file (.elp and website offline)
✔ Menu-based lesson with navigation
✔ Website accessible online using GitHub

ASSESSMENT (Aligned to CO2)

Component Weight
UI Design & Clarity 15
Navigation Structure 15
Usability & Flow 10
Completeness & Functionality 10
Total 50 points
(Rubric can be provided separately.)

REFERENCES
• eXeLearning
[Link]
• Nielsen Norman Group – Usability Basics
[Link]

MODULE CLOSING
Through guided and independent laboratory work, students gain practical experience in designing
learner-centered authorware. By the end of Weeks 7–8, students demonstrate readiness to proceed
to logic, variables, and assessment design in the next modules.