Elentra JS Documentation
2.0
2.0
  • Introduction
  • Why Elentra JS 2.0?
    • Dedicated Repository
    • TypeScript
    • Class-Based Components
    • Vue Standard Routing
    • Organizational Theming
    • Yarn Package Manager
  • Developers
    • Getting Started
    • Setup Guide
      • Install Requirements
      • Clone the Repository
      • Environment Variables
      • Install Dependencies
      • Serve Dev Mode
  • Design System
    • Overview
    • Component Library
      • Directory Structure
      • Components
    • Style Library
      • Directory Structure
      • How it Works
        • Variables
        • Mixins
        • Utility Classes
        • Elements
        • Legacy Styles
        • Shim
    • Taxonomy
      • UI Taxonomy
      • UX Taxonomy
      • Variable & Utility Class Naming Convention
Powered by GitBook
On this page
  • Overview
  • 4. Patterns
  • 5. Layouts
  • 6. Modules
  • 7. Experiences
  1. Design System
  2. Taxonomy

UX Taxonomy

PreviousUI TaxonomyNextVariable & Utility Class Naming Convention

Last updated 5 years ago

Overview

The layers that comprise the User Experience Taxonomy all pertain to the intangible, "big picture" portion of the taxonomy. This includes things like design patterns and ways that components may be combined, as well as the rationales that determine how, why, and when the building blocks from the should be utilized to create more positive experiences for users.

4. Patterns

A Pattern consists of two or more Components, combined together to achieve a certain UX goal.

Example: A common Pattern is the simultaneous use of date picker and time picker Components side by side, for the express purpose of selecting a single, specific point in time.

5. Layouts

Layouts are structured groupings of Elements, Components, and Patterns, that may take up either a part or the whole of a screen.

Example: An example of a Layout would be a Settings dashboard on a user's profile. The Settings page Layout might contain some informative text (an Element), as well as a form (a Pattern consisting of multiple Component inputs).

6. Modules

Modules are complete, visually coherent and interactive designs, that may include more than one Layout. Modules are often intended to fulfill a specific user experience requirement and encompass all related functionality for that specific need. They are often comprised of a diverse mix of things from the other lower layers of the taxonomy.

Example: A great example of a Module is Elentra's Lottery functionality. Everything pertaining to the Lottery feature is contained together as a Module, and the Admin and Learner side views are all constructed using the EJS Styles, Elements, Components, Patterns, and Layouts.

7. Experiences

Experiences are one tier higher in the hierarchy than Modules, and are typically a collection or suite of Modules and Layouts that work together in service of a common, big-picture UX goal.

A strong example of an Experience in Elentra JS would be, of course, the Clinical Experience section of Elentra ME, which includes several Modules including Lotteries, the Rotation Scheduler, and others.

User Interface Taxonomy
Elentra JS UX Taxonomy