Overview
Homepage Personalization allows users to personalize their products homepage content to meet their needs.
Users can:
- Create new sections and widgets
- Edit sections and widgets
- Show or hide sections and widgets
- Add sections and widgets created by other users and from catalogs or libraries of sections and widgets.
- Delete sections and widgets
Overview – OnScreen
Customize popover menu & Edit state
Overview – Dialog
User Settings Menu & Homepage Personalization Dialog
When to use
Recommended
- Customise the look and feel of users Homepage
- Create new sections and widgets for users Homepage
- Edit sections and widgets content
- Show or hide sections and widgets
- Add sections and widgets created by other users and from catalogs or libraries of sections and widgets.
- Delete unwanted sections and widgets from a users Homepage.
Not Recommended
- Don't use for Product settings as these are a separate and distinct from Homepage Personalisation
Anatomy
Onscreen Option
Dialog Option
Behaviour
Onscreen Customization – Overview
Users can edit their Homepage content directly onscreen. They can use the edit button in top right of their Homepage to do so.
Show/Hide or Create Sections
Users can use the various menus in edit mode to Show/Hide sections or create new sections. Using the 'Add +' menu at the top will add sections before the current section. Using the ‘Add +’ menu at the bottom will add sections after that section.
Show & Hide Sections – Time 00:00
Users can show or hide sections on their
homepage using the popover menu. Any
currently available section can be shown or
hidden using the popover menu in the top right
corner of their homepage.
Edit Mode & Menus – Time 11:11
Users can edit their Homepage content
directly onscreen. They can use the edit
button in top right of their Homepage to do so.
There are various menus that support the creation of new sections, widgets, show & hide sections or widgets, delete, refresh and manage sections & widgets.
Create New Section – Time 28:15
Users can create new sections and add widgets from different catalogs to the new section to create a custom section that meets their needs.
Drag & Drop and Move Sections – Time 53:21
Users can move sections on their homepage and drag and drop widgets within sections to adjust the layout of the section to meet their needs.
Onscreen – Edit Mode & Menus
Add and Arrange Sections – Time: 00:00
Users can show or hide available sections and arrange them on their homepage to suit their needs. Sections can be arranged via the list in the menu or onscreen by dragging and dropping the top of the section to the desired position.
Show / Hide Widgets – Time: 23:21
Users can show or hide widgets in numerous ways. Two options are shown in this video. Option 1 from Actions – Show/Hide Widgets submenu. Option 2 from the '+' (Add) menu – Show/Hide Widgets submenu.
Create New Widget(s) – Time: 51:21
Users can create new widgets to add to sections on their homepage or to a catalog for use later or by other colleagues on their team. There are some sample widget designs shown at the end of the video to show the scope of what can be done.
Actions Menu
The Actions menu can perform different actions on a section, such as:
- Refresh
- Show Hide Widgets
- Create New Widget
- Manage Widgets
- Manage Section Settings
- Edit Title
- Duplicate
- Hide Section
- Delete Section
Refresh – Time: 00:00
Refresh the selected section to update the contents in that section. For instance if a user wants to refresh the data in some chart widgets in that section
Show & Hide Widgets – Time: 16:03
Widgets can be shown or hidden from the
Actions menu. A Sub Menu is shown with the list
of widgets in that are available for that section.
The user can show or hide any widget in the list
by checking the checkbox.
Create Widget – Time: 32:06
Users can create a new widget to be added to
Sections and Catalogs. Adding to a Section adds
that widget only for the currently selected Section.
Including the new widget in a catalog makes that
widget available to your team, colleagues,
company etc.
Manage Widgets – Time: 1:18:03
A user can manage the widgets that appear in the
various sections on their Homepage through
‘Manage Widgets’ in the Actions menu.
Selecting ‘Manage Widgets’ opens a dialog to
manage the widgets in the specific section that is
being edited.
Manage Sections – Time: 1:42:00
Our users can section settings via the Actions
menu. Selecting this option will open a dialog
from which our user can manage their sections.
Edit Title – Time: 00:00
Our users can edit the title from the Actions
menu. Selecting this option will open a dialog
from which our user can edit the title.
Duplicate Sections – Time: 18:07
Our users can duplicate a section from the Actions
menu. Selecting this option will open a dialog
from which our user can duplicate the section.
Show or Hide Sections – Time: 40:02
Our users can show or hide a section from the Actions
menu. Selecting the hide option will dim the section
in edit mode and the menu item will change to
‘Show Section’.
Delete Sections – Time: 59:13
Our users can delete a section from the ‘Actions’
menu. Selecting this option will delete the section
permanently and the user cannot undo this action.
A dialog will be shown confirming the deletion.
More Menu
- Refresh
- Edit Title
- Resize Widget
- Duplicate
- Hide Widget
- Delete Widget
Refresh – Time: 00:00
The refresh menu is the topmost menu item
in the ‘More’ menu. Open the ‘More’ menu
and click on ‘Refresh’ to refresh that particular
widget in that section.
Edit Title – Time: 15:21
The ‘Edit Title’ item is the second menu item
in the ‘More’ menu. Open the ‘More’ menu
and click on ‘Edit Title’ then edit the title of
the widget in the dialog onscreen.
Resize Widget – Time: 32:00
The ‘Resize Widget’ item is the third menu item
in the ‘More’ menu. Open the ‘More’ menu and
click on ‘Resize Widget’ then choose the size
you want your widget to be.
The ‘Resize Widget’ sub menu shows a list of the
different sizes that be chosen. The sizes are
ratios and not set sizes. Width is the first number
and height is the second number.
Duplicate Widget – Time: 00:00
Copy Explaining the video goes here…
Show or Hide Widget – Time: 00:00
Copy Explaining the video goes here…
Delete Widget – Time: 00:00
Copy Explaining the video goes here…
Accessibility – Onscreen Popover
Focus Initial & Subsequent States
OnScreen Customize Popover Menu – Focus Initial State & Subsequent States
Screen Reader
OnScreen Customize Popover Menu – Screen Reader and Landmarks
Swipe Order
OnScreen Customize Popover – Swipe Order
Keyboard Interactions
OnScreen Customize Popover – Keyboard Interactions
Tooltips & Descriptions
OnScreen Customize Popover – Tooltips & Descriptions
Keyboard Handling & Tab Order
OnScreen Customize Popover – Keyboard Handling & Tab Order
Accessibility – Onscreen Edit State
Focus Initial State
OnScreen – Edit state – Focus Initial State
Screen Reader and Landmarks
OnScreen – Edit state – Screen Reader Landmarks
Swipe Order
OnScreen – Edit state – Swipe Order
Keyboard Interactions
OnScreen – Edit state – Keyboard Interactions
Tooltips & Descriptions
OnScreen – Edit state – Tooltips & Descriptions
Keyboard Handling
OnScreen – Edit state – Keyboard Handling
Accessibility – Onscreen Menus
Focus Initial State
OnScreen – Edit state Menus – Focus
Screen Reader & Landmarks
OnScreen – Edit state Menus – Screen Reader & Landmarks
Swipe Order
OnScreen – Edit state Menus – Swipe Order
Keyboard Handling
OnScreen – Edit state Menus – Keyboard Handling
Tooltips & Descriptions
OnScreen – Edit state Menus – Tooltips & Descriptions
Keyboard Interactions
OnScreen – Edit state Menus – Keyboard Interactions
Accessibility – Onscreen SubMenus
Focus
OnScreen – Edit state – SubMenus Focus
Screen Reader & Landmarks
OnScreen – Edit state – SubMenus – Screen Reader & Landmarks
Swipe Order
OnScreen – Edit state – SubMenus – Swipe Order
Keyboard Interactions
OnScreen – Edit state – SubMenus – Keyboard Interactions
Tooltips & Descriptions
OnScreen – Edit state – SubMenus – Tooltips & Descriptions
Keyboard Handling
OnScreen – Edit state – SubMenus – Keyboard Handling
Responsiveness
Responsive Behaviour – FAB Floating Action Button
Text supporting video…
Responsive Behaviour – Edit Sections
Text supporting video…
Responsive Behavior – Dialog Sections
Text supporting video…
Responsive Behavior – Dialog Widgets
Text supporting video…
Resources
Figma Design Files and Prototypes
Figma Design File – Homepage Personalization
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.
