there are large parts of the world that don't use first and last names. Having a single Full Name field instead of separate First and Last name fields is more inclusive.The TAB key lets people navigate between the different form fields - good for accessibility, and help your power users sign up quickly.This lets users start typing, without having to use the mouse to click on the right field. The focus is automatically set to the Full Name field, which is the first field they'll have to fill in.There's no separate Username field: the email is unique and descriptive enough to be used as the main unique identifier for each user.The Email address field is pre-populated with what they already typed - no need to make them type it again! It also gives them context, it's something that ties the previous screen with this one.Every field shows the little red * which means "this field is required".There are a lot of micro-interactions here that are worth exploring: Once your prospect clicks on Start Trial on the landing page, this dialog pops up: You've already asked the user for their email on the landing page, now it's time to ask them a little more info. Let's start with the most common authentication method: username and password. The classic: username and password authentication Together they make quite a difference, don't you think? Most importantly, it moves the 2 scary-looking login and sign-up forms to a second step, keeping the landing page nice and clean.Again, this reduces the chance that people will confuse the 2 features. The login link is in the top-right, where people expect it to be, and it's far away from the sign-up form.This makes sure people won't confuse the two. The login and sign-up features are visually very different - one is a link, the other is a form.Here are some of the tricks used on this design: ![]() Is this really the first impression you want to give your potential customers? □ Here's how you might think of doing it first:Ĭlearly, that's a terrible UI: it's a wall of form fields which is both confusing and intimidating. Now, there are different ways to have those forms on the landing page. In fact, we do the same for the login form as well! Also, a dedicated sign-up page will probably lack some of the context that the landing page provides.įor these reasons, we suggest having the sign-up form live inside the landing page. Here you have 2 options: create a dedicated sign-up page, or make the sign-up happen inside the landing page.Ī dedicated page might look cleaner and might be easier to code, but it's also an additional page for users to find, wait for while it loads, and learn how to use when they get to it. There are many resources online that can help you design the perfect landing page for your web app, so I will only focus on the sign-up section. One thing you can notice right away is that we have 2 main flows: one for username and password (with 5 steps), and another for Google authentication (with just 3 steps). Note: You can find the source file of the wireframe above on Wireframes to Go or get it directly from inside Balsamiq Wireframes (just search for Sign-Up Flow).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |