...
Functionality | Details |
|---|---|
Cropping tool | The cropping tool is available on screens wider than 600 px. If the screen is narrower, the cropping page is still displayed, but the following message is displayed:  |
Asset comparison | The asset comparison tool is available on screens wider than 600 px. If the screen is narrower, the option to compare assets will not appear on the multiselect menu. |
Portal administration options | Settings as well as editing the page’s layout for brand portals are unavailable for screens narrower than 1280 px. These can only be performed on desktop. |
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
hamburger menu with the following features (availability dependent on roles): ‘Home’, ‘Collections’, ‘Tasks’, ‘Upload’, ‘Notifications’, ‘My Profile’, ‘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
...
...
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 download
...
In a full screen overlay
Example: filters
...
In a slide-up dialog
Example: sorting
...
User experience in connectors and on touch devices
Uploading assets
In the mobile view, the ‘Upload’ button is located under the hamburger menu and is the only available method of uploading new assets, while on desktop it is also possible to use a drag & drop method.
All the upload-related options are available on mobile device and the only difference is in design. The upload progress information is available as a single-line dialog that can be expanded for more information rather than as a button on the top bar.
...
Filter panel
In the mobile view, filters behave differently than on full desktop version. Rather than having a dedicated space on the left side of the screen, filters are activated by a button and open by fully overlaying the screen.
...
The same rules are applied not only to the main filter menu in the home screen, but to all types of filters within the application, for example Audit Trail filters.
Detail view
The asset detail/focused view is only designed to be mobile-friendly. On desktop, the tabs are on the left side of the screen and the asset preview together with the available actions are located on the right side of the screen.
...
On small screens (width below 1280 px), for example in Digizuite connectors, the two elements of the view are stacked vertically, with the asset thumbnail and action buttons located at the top, and the tabs located below.
...
On devices with touch capability the concept of horizontal scrolling is additionally implemented, where the user can scroll through the action buttons and the tabs. When the user taps on the ‘More’ menu, further actions available for the asset open in a slide-up panel at the bottom of the screen.
...
Metadata editor
Metadata editor works on smaller screens in exactly the same way as on desktop, with no functionality limitations. The only difference is that the metadata fields are arranged in a single line.
...
Working with multiple assets/Multiselect
As it was mentioned beforehand, Media Manager on touch devices does not have the hover state, which means that the grey checkmarks on asset cards are always visible. Using the checkmarks is the only method on multiselecting assets on touch devices.
...
The asset selection preview loads the selected assets dependent on the available space, usually one per line on most smartphones in vertical orientation. It is also possible to preview the selected assets as a list. The number of columns is not limited, and the different information can be viewed by scrolling horizontally.
...
Navigation
When navigating deeper into Media Manager, for example when using folder navigation or collections and sub collections, the breadcrumb path is displayed in a single line under the top bar.
For better visibility, only the full name of the current location is displayed. By clicking/tapping the ‘Back’ arrow, the user will be moved one level back. In order to access the full breadcrumb path, the user needs to select the ‘More’ symbol between the arrow and the location name. The path will be displayed as a slide-up list from the bottom of the screen and the user can now navigate to any of the displayed locations.
...
Administration tools
The majority of administration tools such as settings and brand portal configuration are only available when Media Manager is loaded on a screen wider than 1280 px. On smaller screen the only administrative tool still available to users is profile administration.
In order to access profile administration in mobile view, please select ‘My profile’ option from the hamburger menu. This will open profile administration view adjusted to a small screen.
...