Success/Failure messages on top or bottom of the screen?

Question

When users upload a new profile picture for example, where should I put the "Picutre successfully updated" message? TikTok does it on top, while Telegram does it on the bottom of the screen. So what's better? Thank you

Answer 1

Easiest way, at the top if the picture is automatically uploaded, at the bottom of the page (preferably after the update/save button) if the user has to click on a button to update their profile. For the latter, you'll want to use an appropriate message (e.g. Profile Updated).

The slightly "harder" way would be placing the message below the updated display picture if you upload automatically.

Answer 2

The action almost always follows the user's clicking a specific button.

The obviously best place to display a message is as close to this button as reasonably possible.

Far too many pages (i.e. at least one) display the result at the top or the bottom of the page, which might not even be within the viewport.

Answer 3

If you choose to display at the bottom the message needs to slide up from the bottom of the screen. If you choose to display at the top the message needs to slide down from the top of the screen. The animation will alert user's eyes immediately.