Show Advanced KnowledgeHide Advanced Knowledge

Streamlining Blocks as Panels

1 Initial Problem

Because of the Abandon Levels of Details and Movability of Side Blocks on PD, the use of ViewControls and Page Layout Revision, all page blocks are also to be converted into a uniform design.

2 Conceptual Summary

see above

Block	Settings in 5.4	Suggested in 6.0	Context	Note
My Memberships	[Sort by Type] [Sort by Location] ------ [Unsubscribe Multiple] ------ [Item List Presentation] [Tile Presentation]	View Control Sortation +  View Control Mode	Personal Desktop » Overview	Sortation (Title Ascending | Title Descending | by Location) Mode (Tile | List) (see: Set Personal Desktop to Deck of Card Listing) (Open: To unsubscribe multiple using KS-Entry Deck of Cards Selector for TileView)
Calendar	[Upcoming Events] [Month]	View Control Mode	Personal Desktop » Overview Course Group	Mode ( Month | Upcoming Events)  (Month=default)
Mails		View Control Pagination (if necessary)	Personal Desktop » Overview
News	[Settings]	View Control Mode View Control Pagination (if necessary)	Personal Desktop » Overview Category	Mode (Week | Month | Year)  (Month=default) abandon "Private Newsfeed Settings"
Study Programes	-	-	Personal Workspace » Overview	No functionality changes required.
Recommendation (formerly Selected Items)	[Sort by Type] [Sort by Location] [Sort by Startdate] ------ [Remove Multiple Objects] ------ [Item List Presentation] [Tile Presentation]	View Control Sortation +  View Control Mode	Personal Desktop » Overview	Sortation (Title Ascending | Title Descending | by Location | Startdate Ascending | Startdate Descending)  Mode (Tile | List) (see: Set Personal Desktop to Deck of Card Listing) (Open: To remove multiple objects using KS-Entry Deck of Cards Selector for TileView)

3 User Interface Modifications

3.1 List of Affected Views

• Repository » Recommended Content (formerly Selected Items)
• Personal Desktop » Overview
• Repository-Object Category
• Repository-Object Course
• Repository-Object Group

3.2 User Interface Details

MockUps CENTRAL BLOCKS

MockUps SIDE Panels

Uses a new Side Pane » See PR: Standard Listing Panels within Side Blocks (and Slates)

	Listing Panel Standard » new Side Panel   Example:  News
	Action including Sortation Panel Standard » new Side Panel   ViewControl Pagination (Many pages Dropdown » with Shybutton) Example:  Calendar
	Action ViewControl Sortation Panel Standard » new Side Panel   ViewControl Pagination (Many pages Dropdown » with Shybutton) Example:  Tasks Mail

3.3 New User Interface Concepts

Use 

• View Control Mode
• View Control Sortation
• Central Panels (formerly CentralBlocks) » uses KS Panel » Standard (Need an Example with ViewControls (#4))
• Sidepanels (formerly SideBlocks) » uses UI Presentation of Standard Listing Panels in Side Panels and Slates #1414

Blocks should get a zebra look for better readability. (Like Weeks in Calender)

Proposal for display: The headlines of the page blocks should always be right-aligned. (This does not match with the MockUps.)

4 Technical Information

None.

5 Contact

• Author of the Request: Samoila, Oliver [oliver.samoila]
• Maintainer: Killing, Alexander [alex]
• Implementation of the feature is done by: Killing, Alexander [alex]

6 Funding

If you are interest in funding this feature, please add your name and institution to this list.

• Technische Hochschule OWL

7 Discussion

Seiler, Yvonne [yvseiler], 20.12.2018: Many thanks for all the helpful mockups. In general I think the idea of converting the side blocks to a panel and adding actions, view modes and sorting to the panels makes sense.

I have a few visual comments:

• To break the "law of proximity", I would create a gradation between "panel toolbar" and the panel content. For example, in the Presentation Table - Redesign Visual Presentation we made an adjustment to the table header, where View Mode and Sortation are also included. The advantage of this is that the buttons are not only visually associated with the first entry, but are positioned above the entire content of the panel. 
• In addition, I would tend towards more subtle buttons. Currently the focus is strongly on the buttons and not on the panel content. With visually more restrained buttons the focus could be put back on the content and not on the buttons themselves.
• The same procedure could also be used for the side blocks. The exact visual representation could still be discussed. Below I added a few first suggestions.
• With the change of the side blocks to panels these contents resemble also more strongly the object "Item Group". This has a small action menu on the right. Maybe this would also be a useful solution for the collection of actions in a panel (at least side blocks would work the same as item groups).
• In the view mode "tile / list" I would like to start the race, if glyphs would make sense here (see suggestion in accordion)?

With the order of the functions I would choose as uniform a pattern as possible. In the Presentation Table, the View Mode is currently in the middle and the Sortation on the right. From my point of view, it would make sense to handle this in a similar way.

Killing, Alexander [alex], 3 Jan 2019: Thanks for these suggestions. I would like to share some of my preferences

• The current UI Framework description of the Panels states that "Standard Panels are used in the Center Content section to group content". I think we should respect this and not use Standard Panels for side blocks, but instead migrate the current side blocks to a new Panel subtype Side Panel. Side Panels will have a different look (more subtle, since they are not the main content) and could also have other rules.
• The current description of Panels states that "Additionally an optional Dropdown that offers actions on the entity being represented by the panel is shown at the top of the Panel". I would also respect this rule and not make actions like "Manage Portfolios" buttons. These things belong in an action dropdown imo.
• I would focus this feature wiki page on the blocks that "should be kept or introduced" as stated on the Overview Personal Desktop Revision page:
  • Remove the notes/comments screenshots, since these are other views which should be discussed separately.
  • Discuss only the future blocks of the overview screen on this page: Courses, StudyProgrammes, Calendar, Mail, News, Tasks
• The current block "Selected Items, My Memberships" should be migrated to Standard Listing Panels imo.
• The interactive elements in the Side Panels should be much more subtle.
  • Actions should be represented in the action Dropdown (arrow glyph only). This is the current state of the Panels in the UI Framework.
  • The Sortation View Control could be added to the panels and be represented beside the action Dropdown glyph in a minimal version (using only the Sortation glyph).
  • An open issue are the Mode View Controls in Side Panels: Yvonne made an improved suggestion here, but in my opinion even this is "to heavy" and not subtle enough for the side panels. I would suggest to move these options to the action Dropdown for Side Panels (using a Horizontal Divider) and not to use the Mode View Control here.

Killing, Alexander [alex] 9 Jan 2019: If we have the Side Panels accepted, we should also define which components we are going to use inside of the Side Panels. I made a PR for using Standard Listing Panels within Side Blocks (and Slates).

Amstutz, Timon [amstutz] 15.01.2019: We (@tfamula , @klees , @alex40724 and @Amstutz ) discussed the base idea of side panels and their similarities with slates today in a skype meeting (full record of the meeting: https://edupad.ch/p/ym7klsMeXz). We agreed on the following next steps:

• We need distinction between side panels and slates (as precise as possible) in the rivals section.
• We agree that the name "side panel" gives too much indication on the placement, we need a better naming.
• We agree that the side panels will only introduce a listing panel and a legacy panel for the moment to generate more data for a possible unification of slate and "side panel" or for a clearer distinction between the two

thx a lot to all participants for you effort and time in macking the UI-Components more complete and for helping refining the taxonomy.

Killing, Alexander [alex], 30 Jan 2019

• Instead of Side Panel we suggest "Secondary Panel" or "Accompanying Panel".
• Rival Slate: Secondary Panels should be used to contain content or components that have a strong relationship to the current screen context. Slates are used to display components that should be available independent from the current screen. Slates depend on a component that toggles their visibility, Secondary Panels don't.

JourFixe, ILIAS [jourfixe], 11 MAR 2019 : We highly appreciate this suggestion and schedule the restructuration as described in chap. 2 for ILIAS 6.0. Details about the visual implementation will be discussed with the new UI elements that still need to be finalised and commited.

8 Implementation

8.8 Adapt Webfeed to Secondary Panel

Test Cases

Test cases completed at 16. OCT 2019 by Zenzen, Enrico [ezenzen]

• C2029: Edit External Web Feed 

Approval

Approved at 2019-11-26 by Samoila, Oliver [oliver.samoila]. (Web Feed to Secondary Panel)