Visual reference for user impersonation feature

Question

Right now, when a user logs in, on top of the page it shows it's nick name and an exit icon to sign out.

I'm about to implement an "impersonate user" feature and I was wondering how to make it clear that the nick name that it's shown is not the actual user's name, but instead the user that's being impersonated. And the exit icon won't do an actual log out but just return the user to the previuos account.

What would be a clean and simple visual reference on what's going on with the impersonation action.

Answer 1

I agree with Ranjan's answer that you want to see the website as close to reality as possible. Thus keeping the user profile and logout link in tact and add a topbar as indication that you're in an impersonating mode.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You can give the impersonating user a clear explanation on how to get back, as you can see in the mockup. This will help a lot if users with these powers are less digital minded, as they might not understand that they could get back via the logout button.

This also helps if the user-related links have more complex behavior as it would become tricky to mix that with the impersonating behavior.

_{Note that this might be more tricky if the website depends a lot on window or scroll heights. In that case you can let the notification lay over the window (position fixed).}

Answer 2

For administrator or testing mode, the testers usually want to be able to see the website as closely as possible to the user's point of view.

One way to do this is to just highlight the top nave bar a different color (like red or green) so that the tester knows the browser is in impersonation mode, but all everything else is the same so they are seeing what the user is seeing.

Answer 3

Type of impersonation

Interesting question! how exactly this might look will depend on the aim of impersonation and the relationship between the impersonator and impersonated.

Few questions might be helpful in devising the right approach: For example, is the impersonation feature required for social networking product or for an enterprise solution? Is it designed to solve issues that the "impersonated" might have or guide him/her in solving these issues?

---

A variety of approches

From what i understood from your question the "impersonator" has full access to the "impersonated" account in which case you could attempt to use iconography to represent the relationship between them as in the examples below. this could be coupled with a dropdown to logout of the user account.

---

BTW the above could be further enhanced using colour to further distinguish between active accounts.

Answer 4

I would do this through the combination of a pretty obvious UI state change and a change in wording. For example, if your header is normally white when you're logged in as you, change it to bright orange to indicate a difference in status. Similarly, you could also just stick a bar over the top of the UI like this.

As for the wording, maybe something like "Currently viewing as", and "Return to {{previous user name}}" instead of "Log out".

Answer 5

Having implemented this feature a few times, I have found the cleanest solution to be "exec" instead of "sudo". Steps:

1. Power user logs in.
2. Power user accesses "login as" feature.
3. Power user types Target user username.
4. Power user clicks submit button.
5. Page boots, sees Target user in session, execute Auth::login(target).
6. App now behaves as though Target logged in.
7. Target impersonator does whatever.
8. Target impersonator logs out as normal.
9. Power user must now login again through normal channels.

In this approach, no UI change is needed. For audit purposes though, the session can retain the power user and use his ID in audit logs.