[Dashboard Home] Remove message prompt overlapping breadcrumbs
Answered/Implemented
Message prompt (yellow box) is covering the breadcrumbs meant for navigation.
-
We will not exactly be "removing message prompt overlapping breadcrumbs", but we will be re-designing how our alerts are handled. For starters, let's look at what we have here.
Summary of problems regarding the existing snackbar alert:
- Full-width, encompassing the entire viewport
- Snackbar positioning, when page is unscrolled, overlaps with our breadcrumbs.
- Close button flushed all the way to the right (end of width), so you have to break away from your flow more than a little just to reach for it.
- Alternatively, wait for the snackbar alert to disappear. It takes approximately 5 seconds, which is a tad too long.
We have a few solutions in mind:
- Non-full-width snackbar alerts, similar to snackbar notifications on Pokemon Go (for lack of a better example, see screenshot 1 below)
- Move snackbar alert further down (below breadcrumbs hotspot row)
- More convenient closing methods, such as clicking outside or a centralised close button
- Reduce the time for the alert to disappear automatically.
Our current problem is the length of certain alerts, such as notifications for errors when processing Excel sheet uploads. For Excel sheet uploads, we may present multiple errors since they are listed per problematic cell/row/column in the Excel sheet.
Thus, we are still exploring ways to render verbose alerts, such as scrollable snackbars or 'SHOW MORE' buttons on snackbars which increase their preview heights (see screenshot 2 below).
Additionally, there may be a conflict with solutions (3) and (4) as we look to accommodate verbose alert messages. If we can identify convenient closing methods, we may not explore reducing the automatic disappearing time of the alert. If we can click outside to close the alert, the long time it takes for the alert to disappear automatically will not be a big sticking point anymore.
We seek your patience as we explore the options for rendering snackbar alerts, particularly the verbose ones.
Screenshot 1: Example of a non-full-width snackbar alert in Pokemon Go.
Screenshot 2: Some Android notifications are more verbose (more buttons or text), so their heights are larger. We can explore using something like a 'SHOW MORE' button on verbose alerts to generate dynamic height snackbars.
-
Hello all,
This is the workflow we have implemented:
- The alert will no longer occupy the entire width of the page, to avoid the important functionalities that tend to be positioned on the left like the breadcrumbs. We have decided to design it so that it more closely resembles a post-it note, and place it on the right where less of the important functionalities are placed.
- To accommodate long error messages (esp. for error messages from our Excel upload functionalities), some alerts will be scrollable.
- Dashboard alerts will automatically close in 3 seconds.
- To prevent the dashboard alerts from closing by itself, you can hover over it (on desktop), or tap on it (in mobile). Doing so will reset the "automatically close" timer again, allowing you to continue reading the contents (esp with long alerts).
- A close button will be available at the top-right corner of the alert, should you still wish to close it yourself.
We have attached a screenshot of our prototype below (please ignore the long placeholder text we have been using for testing). You should be able to see the changes in the next deployment of beta.gametize.com. After we have received the necessary feedback required, we will move this new alert interface (along with any changes from feedback) to the live gametize.com.Thank you for your patience!
Please sign in to leave a comment.
Comments
2 comments