I'm designing my first single page application which is for users to manage their USB dongle for a desktop application and also to create teams and request tech support.

This is the wireframe of the application which will be half SPA and half page based:

general product screen

Support page with alertenter image description here

Support page after alert is dismissedenter image description here

Question: What is the best solution for positioning an alert in this case? considering headaches with responsive screens? in my example, I created the widget on top of the tech support widget with a permanent gap. But a better solution is to push the content down automatically when this alert box is summoned and after it's dismissed the widget returns to its original position. The context of this widget is to alert the user that his dongle license is expired which restricts him from requesting certain types of tech support.

Question2: should an alert box be inside the canvas as a widget that shows up and goes away or a modal box as an example of Asana? That would be a third approach for this situation which solves the spacing issue, but I don't know in terms of usability what is the best implementation of alert boxes.

enter image description here

Question3: How should I position my alert box considering different ways SPA layouts in terms of background spacing (encapsulation of widgets/screens) between widgets considering both design and front-end aspects? I've seen some with gaps such as Asana and others without such as Slack?

enter image description here

enter image description here

enter image description here

1 Answer 1


Question 1:
You've answered it yourself. Push content down automatically.

Question 2:
Alert box inside the canvas, when it is not a major/drastic event. Usually show as result of an action taken previously.

Use modal to prevent / notify user when they are about to take an action which could have serious implications.

Question 3:
This is more of a visual design decision. Let your app design (space / no spaces) decide the final look of your alerts.

Use a background encapsulation like Asana to show your alerts if your other widgets follow the same design.

Use a contrasting background to your alert if your design is more like Slack. Check out the New unread messages toast design in Slack.

  • @DanielVianna Do accept as Answer if it addressed your query well. Thank you. Feb 14, 2018 at 2:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.