5 User Interface Design
This chapter is devoted to user interface of the administration. The first part describes visual layout of the administration as well as two specific sections, the page view and the file view. The second part briefly describes a typical layout of the front-end including important user interface elements.
5.1 Administration
5.1.1 Login Screen
Login screen is the first page the user sees when accessing Urchin CMS administration. As displayed in figure 5.1, this page is simple and comprehensive. Login page is divided into three parts: login form, flags, and information panel. Login form is used for logging into the administration that requires filling in user's e-mail and password. Flags enable switching between Czech and English languages for this page. Information panel warns the user if he has disabled cookies, disabled JavaScript, or active caps lock. Cookies are mandatory, logging in with disabled cookies is not possible. JavaScript is required for comfortable use of several user interface elements, such as interactive trees, tabs, and AJAX-based components. All fundamental functions in the administration work without JavaScript.
Figure 5.1: Login screen for the administration
5.1.2 Administration Layout
User interface of the administration is designed to be both highly functional and user-friendly. The interface is primarily designed for accessing from a desktop with a standard web browser. Using a mobile device or tablet for administration is also possible. The administration supports many modern browsers, including older and mobile versions. Recommended resolution for effective use is 1280x800 pixels. Lower resolution makes the user experience much less comfortable. Layout of the administration is basically composed of four main panels: top, left, right, and bottom panel. Figure 5.2 illustrates these main panels using a simple wire-frame.
Figure 5.2: Basic layout and main panels in the administration
Top panel is composed of main menu, presentation selector, logout link. Main menu contains links to all sections in the administration. Each section logically groups features or modules. The first link leads to the page view, the second one to the file view. Other links lead to sections that contain system and content modules. Table 5.1 lists all sections together with a short description or examples of included modules. The presentation selector is used to choose a presentation to work with. In the page view, the user works only with the selected presentation and its tree of pages. The logout link safely ends user's session.
| section | short description or modules |
|---|---|
| structure | page view, component and content management |
| media | directory view, image and file management |
| settings | pages, presentations, templates, elements, personal settings |
| permission | users and user groups both for administration and front-end |
| modules | all content modules, e.g. news or forms |
| lookup | read-only lookup tables, e.g. states |
| tools | contact form, caching and search indexing |
| statistics | access log, search log |
Both left and right panels are configured according to the active section. The left panel usually contains a tree view or an additional menu with list of modules. The right panel contains different views, including page detail or any crud action in a crud-based module. Important sections or modules and their visual arrangement will be described in the following sections. The left half of the footer includes information about current system version and build. The half part shows e-mail of currently logged user. If the development mode is enabled, the debug panel with detailed debugging data is rendered under the footer.
5.1.3 Page View
The page view is the most complex section that is used to manage pages, components and elements at one place. The left panel in the page view always contains a tree of pages in the currently selected presentation. The right panel contains either simple presentation overview or a page's details with a many additional options. Figure 5.3 displays an HTA-like logical diagram with the most important views and actions available in the page view. The most important parts of the page view will be further discussed. Internally, this section combines functions of many modules, including application modules Page, Component, and Element, and content modules that belong to the components on the page.
Figure 5.3: Logical organization of actions in the page view
The most important part of the page view is the interactive tree view with pages. The tree displays hierarchy of all pages in the selected presentation and visually reflects their position in the hierarchy. The tree is extended or collapsed by clicking it and also features a drag-n-drop function to change pages' position. Page titles are coloured black for active pages, red for pages in the client zone, and grey for inactive pages. Each page in the tree includes an on-hover tool-tip that displays several settings or flags. Available flags are summarized in the list following this text. Figure 5.4 illustrates the page view section with tree of pages and detail of the active page. The interactive tree view will be implemented in JavaScript using an open-source library jsTree [25].
Available flags:
- active page, inactive page
- position
- displayed in the menu
- displayed in the sitemap
- redirected page
- with additional parameters
Figure 5.4: Page view with hierarchy of pages and page detail
The right panel of the page view is mainly used for managing page content and settings. The default view is called positions and components and is used to manage components with content on the page. Figure 5.4 shows detail of a sample page in the right panel together with hierarchy of pages on the left side. This example displays page detail menu with additional options, a single component already attached to the page, and a component assignment panel. This menu contains several options, e.g. page settings, page preview, page deletion, or adding a new sub-page.
All occupied positions are listed under the menu together with assigned components. Each position with component includes heading, component menu, and a list of elements. Component heading contains position name, component name, and a module for this component. Component menu offers basic options for managing the component, such as preview, edit, or remove. The list of elements allows adding, editing, and deleting of elements with content. From the technical point of view, this list of elements is a specifically configured element crud instance.
Components are assigned to the page using component assignment panel in the bottom. The user can choose either to create a new component or select an existing component. The component could be assigned to any free position on the page. Each page has a limited number of positions according to its template and graphical layout.
5.1.4 File View
The file view is used for managing files and images in the system and is visually similar to the page view. This view is also composed of two main panels, as displayed in figure 5.5. The left panel represents hierarchy of directories while the right panel shows the selected directory's content. The file management is very basic at the moment. It provides simple directory listing, file upload, and simple image preview. Advanced file management, filtering, and better integration with crud components including WYSIWYG editor is planned for the coming major version.
Figure 5.5: File view with hierarchy of directories and directory detail
The file view utilizes the same interactive tree as the page view, with drag-n-drop feature disabled. This section is used for managing files and images for the website. There are two types of directories in the tree, system and common directories. System directories are used for specific purpose, such as galleries or data import. Directories of this type begin are view-only and their name begins with an underscore. The user can not upload files to a system directory or its sub-folders.
Opposite to the system directories, common directories allow the user to create new sub-directories and upload files. New directories can be added up to defined level of nesting. File upload enables uploading multiple files at once. Both directories and files are not deletable to prevent errors caused by missing files. File management is independent of the database, no metadata for files are stored in the database.
5.2 Crud Layout
The crud library is used for managing most modules in sections other than the page and file views. This library has already been thoroughly presented in section Crud Library, so this section focuses on short description of its user interface. A common or element crud instance includes up to four displaying actions: view, detail, edit and add. The view action displays a list of multiple records, the detail action displays a single record with possible nested instances, the edit and add actions include form for editing record or adding a new record.
Figure 5.6 shows an example of the view action that is part of an element crud instance used for managing news. This concrete instance enables all permission options and contains five records. The upper part of the view action contains add link and several filters for filtering records by defined criteria. The middle part displays basic fields of the records with detail, edit, and add links. Fields are rendered using different components including an AJAX-based component for direct editing of the name field. Most fields are sortable by clicking their headings. The lower part includes multiple delete buttons, number of records, and again the add link. Pagination is not shown due to low number of records.
Figure 5.6: The view action of an element crud instance showing sample data
Figure 5.7 displays an example of the edit action of the same crud instance as described in the previous text. Each edit form contains links to other available actions in this instance at the top and a save button at the bottom. The middle part contains field labels and components. Mandatory fields are marked with an asterisk. Components vary according to the instance configuration, this concrete form uses components for editing simple texts and values, selecting an image, or WYSIWYG editing of main content. Some components contain simple tooltips with detailed description. A form used for the add action is similar to this one, with missing detail and edit buttons. As always, a concrete form's appearance depends on its configuration.
Figure 5.7: The edit action of an element crud instance displaying a sample record
Opposite to common crud instances, a cross or matrix crud instance includes only the view action. This view action both displays existing settings and allows its update. Figure 5.8 displays an example of a cross crud instance. This example shows a selected administrator group and a list of presentations that might be assigned to this group.
Figure 5.8: The view action of a cross crud instance nested inside a common crud instance
5.3 Front-end Layout
This section briefly describes a typical front-end page layout and its basic elements. Visual appearance of a concrete page on the website strongly depends on its graphical design, so only common features will be presented. Majority of company and commercial websites feature traditional layout with a header, menus, content, and a footer. Figure 5.9 displays a simple wireframe with example of such a layout.
Figure 5.9: Basic layout of a front-end page
A typical header contains company logo and a short textual description. Contacts, business hours, or links to social media are often part of the header. Presentation switch is used for multi-lingual websites and a search box with working search is nearly a must on larger websites. The main menu is located under the header and consists of links to most important top-level pages. The main menu is often horizontal, appearance of other menus depends on the graphical design. Content part differs page by page. Footer displays basic information about the company and the website author. This information includes address, contacts, and links to other websites.
[Pages 53-62]