Category Archives: usability

Single Sign On with Iframes (eg Sharepoint)

user-experience

Single Sign On is a great tool for implementing seamless user experiences. In order to mix many third party tools together, the authentication puzzle quickly stacks up. Single Sign On via SAML to the rescue!

Implementing SSO via SAML is well documented on the internet, so I won’t go into it here. However, imagine a scenario where you want to implement SSO which integrates a third party application into your main app via an iframe. Iframes are notorious around the web yet are still used quite pervasively in places such as Sharepoint, and Outlook Web Apps.

The difficulty lies in the fact that Identity Providers do not permit their authentication screens to be embedded in iframe. And rightly so. Auth screens collect credentials and having an auth screen inside an iframe makes it real easy for a hacker to steal a user’s account information.

So, how do you work around this?

Popups. Yes, popups.

While working on this problem, I was extremely resistant to the idea of using popups as they also have a bad rap in the internet community because of how they are abused. However, after reading this article, I gave in to the fact that popups are a “necessary evil”.

Remember that the end goal here is to provide a seamless experience as much as possible. The central idea is that once a SAML flow is initiated in an iframe, a page is rendered that does the following:

1. Renders javascript to open a new window and send the user through the actual SSO/SAML flow.
2. Renders a page in the iframe that instructs the user that the popup may be squashed by the browser and to allow it, or to click a link that manually opens a new window to go through the SSO/SAML flow.
3. The page that is rendered in the iframe also continues to check(via js) whether or not a logged in session has been established. Once the user is logged in, the iframe page can be reloaded showing the logged in user content.

When a browser squashes a popup, it usually gives an indication it did so and provides an option to open it. However, this is not always obvious. This is why we give an explicit link to open SSO flow window.

This approach took about a half day to architect, and about a week of hair pulling trying to get SSO to work without popups. I recommend going the popup approach. In fact, it is probably the only way to get this to work.

Your app is a creek and users are water

A creek ran through my childhood property. Sometimes the movement of my creek would slow due to tiny mud slides and other miniature natural disasters. To allow the water to flow more freely, my friends and I shoveled clear mud, sticks, and rocks clearing the creek.

What I’ve learned about usability of websites/apps is that users are a lot like the water that flows through a creek, and the creek is the app. Through testing, analytics, and design improvements you will watch your users move faster and farther through your app, just like how we moved mud and rocks from the creek.

Here’s a simple non-data-driven way to quickly evaluate your site for blockage: Go through your web app and at each screen ask yourself, where is the obvious button to click or action to complete? If you don’t immediately know, then that page may be causing blockage in the user flow. Check to see if your analytics supports this hypothesis.

The general rule to avoid mud and rocks in your web app is to always have one or two primary actions per section, view, or page.

The primary action of some views is to scroll. In this case it is best to show a cropped content point at the bottom of the screen or browser. Without anything to do other than to see more, the user will innately scroll your website.

If you require three or more options, then suggest a primary path. You can highlight a section with a background color, brighter and bigger button, specific title, or horizontal rule. Essentially, make the primary action stand out through color, size, and positioning.

By following these few simple rules, you should see longer visit duration times and increased conversions. Just like my creek flowed fast and wide when we cleared the rocks, your users will move through your app at a higher velocity.