Please enable JavaScript.
Coggle requires JavaScript to display documents.
Interface elements and functions of campus INATEC - Coggle Diagram
Interface elements and functions of campus INATEC
A graphical user interface (GUI) is a type of user interface that enables people to interact with electronic devices using visual elements like icons and audio cues, rather than relying on text commands, typed labels, or text-based navigation.
Input Controls
Purpose: Allow users (students, teachers, admins) to enter data or make selections.
Examples & Functions:
Text fields / Text areas – for typing assignments, messages, or search queries.
Dropdown lists – choosing courses, academic terms, or categories.
Radio buttons – selecting one option (e.g., grading criteria).
Checkboxes – selecting multiple options (e.g., course modules).
Buttons – submitting forms, logging in, uploading files.
Navigational Components
Purpose: Help users move through the platform efficiently.
Examples & Functions:
Menus / Navigation bars – main course sections, profile, messages, grades.
Tabs – switch between views (overview, assignments, discussions).
Breadcrumbs – show where the user is within the platform’s structure.
Pagination controls – move between pages of content.
Search bars – locate courses, users, or content quickly.
Sidebars / Dashboards – provide quick access to key tools or modules.
Informational Components
Purpose: Display data and feedback clearly to users.
Examples & Functions:
Notifications / Alerts – upcoming deadlines, announcements, grades posted.
Tooltips – small pop-up explanations for icons or actions.
Progress bars – show course completion or upload progress.
Status messages – confirm actions (e.g., “Assignment submitted successfully”).
Modals / Pop-ups – display additional info or confirm actions without leaving the page.
Dashboards – summarize grades, attendance, tasks, and announcements.
Containers
Purpose: Organize and group related content for clarity and structure.
Examples & Functions:
Cards / Panels – hold content such as course modules or announcements.
Sections / Dividers – separate different content areas (assignments, grades, forums).
Grids / Tables – display structured data like schedules or marks.
Accordions / Collapsible panels – expand or hide detailed content.
Frames / Modules – encapsulate individual course tools (forums, quizzes, resources).