Use Sign-in Reminders to Support Extended Functionalities
Online services such as LinkedIn and Craigslist want to show users all of the functionalities they offer. It helps in getting first-time visitors interested and convincing them to engage and contribute. Still, in order for most of these functionalities to work, a user needs to create an account and log in. This allows the service to become more personalized and secure. Due to its vital job of reminding people of this need to sign in, the design pattern we discuss here will be of great use to you. Implemented well, sign-in reminders will not be annoying – they will instead imbue users with the sense they are being supported in the best possible way.
The Design Problem
Users might enter a website from a number of different situations. In the case of LinkedIn (see the example below), someone may search for a specific person using the Google search engine; another user may follow a link that a specific person has posted in his portfolio, and someone else may click on a link in a weekly email update on her profile activity. Each of these roads leads to the activity of signing in to access the requested information.
Therefore, the experience of signing in to leave comments, make purchases, or check personal profiles must be consistent across all of the different points of entry and at all levels within the website or user interface. Furthermore, when users attempt to engage with your design, they will need a prompt to inform them that they cannot do so unless they are signed in.
Author/Copyright holder: LinkedIn. Copyright terms and license: Fair Use.se
LinkedIn uses the sign-in reminder to unlock the full profiles of people that a user is trying to view. Without signing in, he or she is restricted to viewing a short summary of each person sought.
The Design Solution
At the first point which requires users to sign in when they attempt to engage with a website or application, remind them of this requirement, and provide them with the means to do so. A sign-in reminder or prompt, in combination with the direct means of logging in to the website or application, helps minimize the amount of time and effort the users must invest before they are able to resume their intended activity (e.g., posting a comment within a forum).
Why Choose a Sign-in Reminder Design Pattern?
“Right now I’m having amnesia and déjà vu at the same time. I think I’ve forgotten this before.”
—Steven Wright, American comedian, actor, and writer
When users are looking for people or things online and find them, they can easily forget about the point they may not be signed in on any number of sites or apps. Sign-in reminders inform the users why they cannot carry out certain actions, such as leaving comments in a discussion forum, leaving feedback in e-commerce sites, or attempting to add a six-pack of herbal tea to an e-shopping cart. Without a short message redirecting them to a sign-in page, users will wonder why they cannot submit replies or feedback, although they may eventually catch on that they need to create an account at the e-store. Therefore, a sign-in reminder, in combination with the facility to log in right at that moment, is an important element in creating a cohesive user experience. The users should be able to carry out their activities with as few barriers as possible. A simple sign-in reminder acts as a quick and easy method of removing the obstacle blocking the user from engaging with your design. The magic we need to work here is similar to a goal of ours elsewhere in user experience design – removing anything that makes the users hesitate or question our designs, and giving them a clear and direct doorway into the online ‘worlds’ they want to visit.
Author/Copyright holder: Zalando. Copyright terms and license: Fair Use.
The Zalando online shop provides a sign-in reminder when a user tries to save a product into his or her favorites list. Requiring users to sign-in allows them to view the favorites list after leaving and returning to the website.
Best Practice: How to Implement Sign-In Reminders
- At all the various points of the user interface where the users can input information, include a reminder when they attempt to do so before they have signed in.
- Within the sign-in reminder, provide the facility to sign in there and then.
- Once the users have signed in, ensure that they are returned to their previous point.
- As the sign-in reminder appears when the users have attempted to engage without having signed in, make sure the data they had previously entered is preserved when they return to their previous page.
To help you get started implementing sign-in reminders, you can download and print our “Sign-In Reminders” template.
Potential Problems with Sign-in Reminders
If, for any reason, you have implemented a sign-in reminder that navigates the users away from their current position (e.g., to a dedicated sign-in page or the homepage), they might well become confused, disoriented, frustrated or even annoyed, to say nothing of the time it may cost them to get back on track with what they intended to do. Even a ‘few’ seconds is a long time in this context. A good policy is always to assume the worst-case scenario and that a user’s train of thought will indeed go off the rails. We can liken that to what is known in psychology as the location updating effect. If you’ve ever gone into another room in order to get an item or do something, only to forget what it was—as in, completely draw blanks—that’s the location updating effect (also called “the doorway effect"), a phenomenon where the arrival at new surroundings clouds or blocks the idea that the person had had before going there. Therefore, wherever possible, always try to use a pop-up reminder or an in-page overlay, either of which will allow the users to sign in immediately and resume their activities. If your design requires the sign-in reminder to navigate the users away, then ensure there is a small alert—which can be closed or ignored—warning them that they will be redirected to a new page. This way, users can choose whether to follow the sign-in procedure or carry on from where they left off.
Author/Copyright holder: Spotify. Copyright terms and license: Fair Use.
The artists’ version of Spotify can be connected to a user’s original Spotify account. So as to achieve this, a sign-in reminder appears in a wizard (another useful design pattern). If this reminder were to take the user to a sign-in page without resuming the wizard, the user would not be able to complete his or her task successfully. Most likely, the user would refrain from using the fan insights page altogether.
The Take Away
Sign-in reminders help users get access to functionalities they wouldn’t get to enjoy as anonymous users. They are an important design element that should disrupt the user flow as little as possible. In the same way they may have forgotten they weren’t signed in, their train of thought regarding what they intended to do is equally delicate as far as your handling it goes. In order to guide users in the best way, you must ensure that they can always continue with the task they were aiming to perform after signing in. Implementation is a simple four-step process, allowing you to design a solution that engages the users in more personalized activities and lets them transition seamlessly from one intention to the next. A competent deployment of these reminders will help ground users more firmly in the online realities they want to access, making it more likely they will progress to achieve what they—and your organization—want.
References & Where to Learn More
Hero Image: Author/Copyright holder: Ravi Shah. Copyright terms and license: CC BY 2.0.
Jenifer Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, 2010
Martijn van Welie, Pattern Library, 2008: www.welie.com/patterns
What you should read next
10 Great Sites for UI Design Patterns
You don’t want to spend your whole life redesigning the wheel do you? No, neither do we. If you are looking for a design that solves a problem that has been solved inside a different application before; then the template for your wheel is probably already out there. That’s a design pattern to you and me. We’ve put together a list of some of the...
Bad Design vs. Good Design: 5 Examples We can Learn From
Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world. Jared Spool, the American writer, researcher and usability ex...
User Interface Design Guidelines: 10 Rules of Thumb
Learn to design with your user’s needs and expectations in mind by applying Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines. These heuristics have been reflected in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. Further evidence of how their design teams incorpo...
The 7 Factors that Influence User Experience
User Experience (UX) is critical to the success or failure of a product in the market but what do we mean by UX? All too often UX is confused with usability which describes to some extent how easy a product is to use and it is true that UX as a discipline began with usability – however, UX has grown to accommodate rather more than usability and ...
Don’t Make Me Think – Key Learning Points for UX Design for the Web
Don’t Make Me Think is the title of a book by the HCI and Usability engineer Steve Krug. It teaches UX designers how to deliver great user experiences in a very simple and accessible way. Since its release in the year 2000 it has become one of the defining texts in the industry and an invaluable guide to UX professionals around the world.Don’t M...
Designing for the Mobile Environment – Some Simple Guidelines
If you’re going to design for mobile, then it’s likely you’re going to need to consider the way that the device is used and the specifics of the device itself. There are some general principles that can help designers for mobile get started but don’t forget that these don’t replace the need for user research. They are guidelines not hard and fas...
KISS (Keep it Simple, Stupid) - A Design Principle
It was Albert Einstein who said; “If you can’t explain it, you don’t understand it well enough.” Though it is often mis-reported as being; “If you can’t explain it to a six year old, you don’t understand it well enough.” What Einstein was driving at was a particular application of “keep it simple, stupid”. From scientific concepts to products t...
Needs Before Wants in User Experiences – Maslow and the Hierarchy of Needs
It has been established that users are more likely to choose products that meet their needs than ones that meet their wants. Abraham Maslow developed a deep understanding of human needs and how they could be met. You can use Maslow’s Hierarchy of Needs in a design context to deliver more powerful user experiences that meet user needs rather than...
Design Scenarios - Communicating the Small Steps in the User Experience
Design scenarios are useful tools for communicating ideas about user actions. Mapping design scenarios also has the added benefit that it helps formalize ideas and to take creative approaches to those ideas. Most importantly of all, it will ensure that your designs are firmly rooted on terra firma and taking a “what our users want/need” approach...
Usability: A part of the User Experience
This subject may seem incredibly “big” for a single article, but it’s about the specific nature of usability that we often overlook or confuse. With this appreciation, you’ll be able to design more effectively, and your website’s usership will be able to grow, too. Usability replaced the outmoded label “user friendly” in the early 1990s. “Usabi...
