InSite.UI
Guidelines for implementing intuitive, consistent page layout for ASP.NET web forms throughout the platform
ASP.NET web forms
Page layouts
The Admin area serves as the comprehensive management interface for system administrators and instructors who need full control over the learning environment.
This area prioritizes functionality and efficiency, featuring dense information layouts, advanced configuration options, and administrative tools.
The design emphasizes clear data hierarchies, robust navigation systems, and streamlined workflows that enable power users to quickly access deep system functionality.
Interface elements should support complex tasks like user management, course authoring, analytics review, and system configuration while maintaining clarity even with high information density.
The Portal area provides the core learning experience for authenticated learners engaging with course content and educational activities.
This learner-focused environment emphasizes clean, distraction-free layouts that promote focus and engagement with educational materials.
The design should prioritize content readability, intuitive progress tracking, and seamless navigation between learning modules.
Interface elements should support various learning modalities while maintaining a welcoming, accessible experience that encourages continued engagement and learning progression.
The Lobby area serves as the first impression and entry point for unauthenticated visitors exploring the system.
This public-facing space focuses on clear value proposition communication, easy navigation to key information, and frictionless pathways to registration and login.
The design should balance marketing appeal with professional credibility, featuring prominent calls-to-action, accessible content previews, and trust-building elements.
Interface layouts should be optimized for conversion while providing sufficient information for users to understand the platform's offerings and benefits.
Admin page layout guidelines
On this page we focus on describing a set of guidelines on how to place buttons on different screens in different boxes from the admin site.
Note This is just a Draft. Let us all collaborate on achieving the best possible outcome and create the best standards together for button placement.
Simple Input Screens
Description:
Every normal input screen like Create, Edit, Change/Update (from Outline) or Delete can be done using this approach:
Input fields are implemented in different cards with additional titles and description (if necessary).
Main action buttons for Saving/Updating or Canceling should be placed in the bottom left.
⚠️ If screens are longer and buttons don’t fit, try to make the buttons sticky at the bottom of the screen. Reference: Position sticky button bar (bottom)
Examples:
Outline Pages
Description:
An outline page displays combined information for a specific Toolkit Object.
The practice so far: keep all outline object control buttons on the top left.
The entirety of the information is locked within one card and separated with grouping dividers.
Examples:
Examples:
Cards with Search Results
Description:
Some cards may gather and display data in a Search Results way. These cards usually:
Have a Card Title or Filter on the top left.
Include additional Action Buttons (e.g., Downloading, Adding to results) on the top right.
Item rows may include action links/buttons such as View/Edit/Delete, placed on the right side of the item row.
Cards with Inputs
Description:
Some cards, in addition to regular Save/Update/Delete actions, may have extra actions such as adding data to a Toolkit Object. Example: a card with an Upload button. (Placement for this is still under discussion.)
Examples:
Form Layout
Create
Modify
(Some documentation/description is needed here, of course.)
Nested Tabs
The topic was discussed here: DEV-5903: Upgrade UI\Desktops\Admin\Courses2\Manage.aspx from B3 to B5 Closed
If the form has nested tabs then:
The main/parent card should have shadowed borders
Internal panel(s) should be wrapped into cards with non-shadowed borders
Delete
For delete checkbox we need to use
Last updated
Was this helpful?