MM5.7 Mobile Web - concepts
- Gosia Creosteanu (Unlicensed)
General concepts
Media Manager in a compressed view uses certain space-saving techniques that enable the users to enjoy access to the majority of its functionality while working in limited space, for example on a mobile device.
Stashed functionality via hamburger menu
When the screen is less wide than 1280 px, the top bar changes to account for the limited space.
The following elements are visible on the top bar on smaller screens:
logo
search icon, which changes into full-width search bar upon activation
Search bar in mobile viewhamburger menu with the following features (availability dependent on roles): ‘Home’, ‘Collections’, ‘Tasks’, ‘Upload’, ‘Favorites’, ‘Notifications’, ‘My Profile’, ‘My uploads', ‘Languages’, ‘About’ and ‘Log out’
Horizontal scrolling
As the width of Media Manager screen is limited on mobile devices and connectors, the principle of horizontal scrolling was applied in areas where this would improve the experience for the users.
Horizontal scroll bars are moved by the user in a different way, dependent on whether or not Media Manager is loaded on a touch device:
on non-touch devices, the user scrolls through the available options by clicking the horizontal arrows
on touch devices, the user scrolls through the available options by swiping horizontally
The following functionality uses the concept of horizontal scrolling:
Functionality | Visual representation |
|---|---|
Folders (in both basic and visual form) |
|
Assets viewable in a list form and other lists, such as audit trail and workflow tasks |
|
Asset actions in a focused view (touch devices only) |
|
Tabs in an asset focused view |
|
Hover state
There is now an underlaying assumption that Media Manager can be accessed by the users on devices other than a computer and the method of navigation might be touch rather than a mouse. As a result, when it is detected that the application is loaded on a touch device such as a tablet or a smartphone, the hover state is removed.
This means that on touch devices:
tooltip labels (for example button explanations or workflow-related fields) do not appear
the grey multiselect checkmarks on asset cards are always visible
Differences in button design
In many cases there are two versions of buttons in Media Manager, dependent on the size of the screen. On desktop, the buttons usually have both a symbol and a description. When the screen width is less than 1280 px (or in some cases: 600 px) the space-maximizing button design is used instead.
Additionally, some functionality taking a set space when on desktop is hidden and only activated upon pressing a button on smaller screens. This concerns filters.
The table below only presents the overview of the buttons, where the design differs dependent on the screen size.
Functionality | Button design on screens wider than 1280 px | Button design on screens less wide than 1280/600 px |
|---|---|---|
Filters | None (a panel that can be either permanently visible or hidden) |
|
Home |
| None (click on logo to go back to the homepage) |
Search (global) |
|
|
Search (local) |
|
|
Sorting |
|
|
Download |
|
|
Check in/out |
|
|
Crop |
|
|
Favorite |
|
|
Share |
|
|
Pop-up operations on small screens
In Media Manager’s compact version, the operations concerning features that don’t require leaving the current view can be delivered in one of three ways:
In a pop-up dialog, in the same way as on desktop
Example: asset downloadIn a full screen overlay
Example: filtersIn a slide-up dialog
Example: sorting