# 3.1 UI Overview and Terminology

<span style="color: rgb(68, 68, 68);">Welcome to the **Learning Design Studio (LDS)**! Starting with this chapter, you will begin exploring the LDS interface and features to create your own learning design.  
  
</span>

#### <span style="color: rgb(68, 68, 68);">**Main User Interface Overview**</span>

[![image.png](https://ideals-doc.cite.hku.hk/uploads/images/gallery/2025-11/scaled-1680-/EZBimage.png)](https://ideals-doc.cite.hku.hk/uploads/images/gallery/2025-11/scaled-1680-/EZBimage.png)

<span style="color: rgb(68, 68, 68);">Figure 3.1: Main User Interface</span>

<span style="color: rgb(68, 68, 68);">The main navigation items are summarized in the table below. You can find more detailed instructions for each feature in the specific tutorial chapters.</span>

[![image.png](https://ideals-doc.cite.hku.hk/uploads/images/gallery/2025-12/scaled-1680-/C6himage.png)](https://ideals-doc.cite.hku.hk/uploads/images/gallery/2025-12/C6himage.png)

<span style="color: rgb(68, 68, 68);">Figure 3.2: Navigation</span>

<table border="1" id="bkmrk-1.-remember---recall" style="border-collapse: collapse; width: 100%; height: 326.157px; border-width: 1px;"><colgroup><col style="width: 17.165%;"></col><col style="width: 71.7292%;"></col><col style="width: 11.082%;"></col></colgroup><tbody><tr style="height: 46.5938px;"><th style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(255, 255, 255);">**Item**</span>

</th><th style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(255, 255, 255);">**Description**</span>

</th><th style="border-width: 1px; vertical-align: middle; height: 46.5938px;"><span style="color: rgb(255, 255, 255);">**Tutorial**</span>

</th></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">1. Languages</span></td><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">The LDS currently supports English, Traditional Chinese, and Simplified Chinese.</span>

</td><td style="border-width: 1px; vertical-align: middle; height: 46.5938px;"><span style="color: rgb(68, 68, 68);">N/A</span>

</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">2. User Guide</span></td><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">A simple navigation to the LDS.</span>

</td><td style="border-width: 1px; vertical-align: middle; height: 46.5938px;"><span style="color: rgb(68, 68, 68);">N/A</span>

</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">3. My Library</span></td><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">You can access and manage your learning designs in one place. Create new designs, edit existing ones, and easily view designs shared with you by others.</span>

</td><td style="border-width: 1px; vertical-align: middle; height: 46.5938px;"><span style="color: rgb(68, 68, 68);">Ch 4-9</span>

</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">4. Groups</span></td><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">You can create groups for your school or organization, invite members to join, and collaboratively share and co-create learning designs.</span>

</td><td style="border-width: 1px; vertical-align: middle; height: 46.5938px;"><span style="color: rgb(68, 68, 68);">Ch 10</span>

</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">5. Notifications</span></td><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;">You will receive a notification when there are important updates or invitations from the group.

</td><td style="border-width: 1px; vertical-align: middle; height: 46.5938px;"><span style="color: rgb(68, 68, 68);">N/A</span>

</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">6. Profile</span></td><td style="height: 46.5938px; border-width: 1px; vertical-align: middle;"><span style="color: rgb(68, 68, 68);">You can update your email address and display name in the LDS.</span>

</td><td style="border-width: 1px; vertical-align: middle; height: 46.5938px;"><span style="color: rgb(68, 68, 68);">N/A</span>

</td></tr></tbody></table>

#### <span style="color: rgb(68, 68, 68);"> **Learning Design Interface Overview**</span>

When you enter the Learning Design section, the user interface is divided into three panels:

- **Left panel:** Navigation menu
- **Middle panel:** Main interface
- **Right panel:** Learning Design Facilitator (LDF) and Information Window

[![Untitled design (2).gif](https://ideals-doc.cite.hku.hk/uploads/images/gallery/2025-11/BBfuntitled-design-2.gif)](https://ideals-doc.cite.hku.hk/uploads/images/gallery/2025-11/BBfuntitled-design-2.gif)Figure 3.3 Panel-Based Interface

You can drag the edge of a panel to resize it, or click the ![image.png](https://ideals-doc.cite.hku.hk/uploads/images/gallery/2025-11/scaled-1680-/cbkimage.png) button to collapse or expand the panel.