Consider how many forms you may have filled out over the course of your Internet history. There are countless examples of these from forums, message boards, blogs, and so many more. In this article we’ll be taking a look at some great tricks to designing your in-page forms.

It is wise to consider some of the items here from an objective perspective. Although many login and registration form work well with one type of site, there is no final judgment call on what’s the “best” solution. Use your design intuition to apply bits and pieces from forms you aspire towards.

Consider Multiple Inputs

To start things off consider a small contact form from Foundation Six Web Design. Yes this isn’t a login form so it may steer a bit off topic. However, their page design is very impressive and it shows you what a little creativity can achieve.

Each of the input fields offer room for you to type personal contact info – name, e-mail, etc. The styles go far beyond ordinary, offering user input in a type of handwritten calligraphy. This type of formatting will keep your users in a state of wonder and achieve a goal of much higher design standards.

You’ll want to implement styles like these similar to all of your login pages. I certainly wouldn’t recommend sticking with the same style of input text and option/select menus. When jogging your brain for creativity, consider how each element should be layed out: plenty of space between layers, large easily-readable text, and even sidebar links to their direct e-mail line.

jQuery Login Boxes

This has been used on countless websites in the past and will surely be seen within new-age designs. Long gone are the days where standard practices would bring users onto a new page for each step of the login process. Normally this would mean a page to input your data and also a new page for processing login information.

Pixel2Life offers some fantastic insight into a new field of data input. From their homepage you can click the login link and bring up a dynamic jQuery-powered login box. This form contains an Ajax call to an external PHP script which checks the credentials of your login info and, once processed, either grants or denies access.

Going another step further the astute may notice a registration link directly below the login box. This offers a much smoother user experience for those looking to sign up for the website but unable to locate the registration link.

If a user doesn’t have an account but would like to make one, this brings them onto the registration page without any buggy page glitches. The login box would still be a viable option for accessing your own account, however allowing the option gives way for greater returns and higher volumes of new registrants.

Simple One-Page Registration Form

Another shifting paradigm we see is the lacking in such detail for new account registrations. This isn’t necessarily a bad statistic assuming users are growing impatient towards filling out data. The numbers actually suggest websites with shorter registration pages garner heavier lists of new users on a daily basis.

Sikbox offers a lightweight option for visitors to create their own search box for a website. The only requirement is your own custom domain which to provide search results for. The input fields are large, text is very simple to read and there are absolutely no advertisements to distract users from the task of building their search form!

Now this isn’t the best form to build off when creating your own registration form page for a forum or blog archive. These will, by standard definition, at least require some type of e-mail address/username combination along with a password. Some new-age web applications will generate dynamic passwords for users just to make the registration process quicker.

Of course, the trade-off here is lacking control on the user’s end to generate their own password which many people are accustomed to.

Build off Flashy Effects

One of the greatest signup experiences I’ve ever had was creating my first Tumblr account. The home page of their site offers both a login and signup form placed directly beneath each other with new CSS3 highlight/fade effects.

This systematic approach is similar regarding Pixel2Life’s jQuery login area. However, the difference with Tumblr is the network cannot offer any content to those without a blog (aside from browsing others accounts). The real benefit from tumblr is creating your own blog and following others – thus your main objective on the front page is either to create an account or log in.

There are some bugs with this system. Most notably within IE6/IE7 not supporting these new CSS properties. Also used on the home page is a system for adding label elements into form input values – basically overruling the “default” characters used for email/password boxes.

These labels fade away on focus in modern browsers such as Chrome/Firefox. But no such luck with the deprecated browsers which, as you can imagine, is quite annoying trying to re-read your own input!

10+ Examples of Beautiful Login and Registration Form Design

Below is a quick roundup gallery of some fantastic login form designs. These have been picked from around the web and include numerous forms of web applications. If you have suggestions for other sites feel free to share them in the comments section below!

While browsing the net we can find sometimes surprising solutions that are programmatically correct, but are designed in a way that most likely makes many users abandon the site because of the poor user experience.

If our forms are designed well, we will be able to not only please our users but also the backend team who can deal with much less user input errors. Thus, in this article, we’re going to have a look at how we can minimize user input errors and still keep our users happy.

Anticipate User Needs

Websites and applications have different user bases & goals, and even the same location can host many forms that collect different kinds of data, just to name the most frequent ones:

• Login forms
• Registration forms
• User profile forms
• Newsletter signup forms
• Checkout forms
• User surveys
• Contact forms
• Comment forms
• Search forms

All these form types require different things. When designing a checkout form it’s crucial to credibly assure users about security, while in the case of comment forms it’s a good idea to add emojis or other methods that enable users to express their actual mood.

However even similar form types may need to be designed differently, as all sites have their unique user base. Before embarking on the design process, it’s always a good idea to anticipate what our users need, and design accordingly.

Example: Social Logins Targeting User Needs

Codepen‘s login form contains three social logins with Github at the top. This choice would be unreasonable for most sites.

But it’s perfect for Codepen, as their user base consists of developers, many of whom will want to login with their Github accounts, or connect their development accounts with each other at once.

Think Mobile-First

Mobile and desktop users have different needs, but as completing forms is a much bigger challenge on a mobile screen, using hand gestures than on a physical keyboard, a mobile-first approach can take us further when we want to design usable forms.

Moreover, many form UI patterns that work well on mobile will work well on desktop as well.

Example: Tappable Controls

High quality mobile forms cannot be imagined without visible controls on which mobile users can easily tap with their fingers.

The newsletter signup form of the web design conference An Event Apart adapts to the way mobile users access the screen – it contains two easy-to-tap input fields and a fingertip-sized button.

The text input fields are higher as usual so that mobile users can easily tap on them, and the big, orange button with a tick icon further encourages users to submit the form.

The desktop version of the site uses the same form design, as it also looks good and works well on larger screens.

Example: Expendable Input

When designing forms for mobile, it’s always important to consider how we can minimize the space we use. The expendable input UI design pattern has become quite popular lately, and it works especially well on mobile.

Booking.com leverages this pattern in the search form on its mobile site. When the user taps into the search field it expands in order to leave more space for gestures, and a select list with recommendations also appears below it.

When the user taps out of the field, it shrinks, and the extra information disappears.

Example: Morphing Button

Morphing buttons take the expendable input pattern one step even further, as users first see a button, which then morphs into a form when they tap on it.

The screenshot below is from The Startup’s brilliant article on innovative form design, which presents many other creative solutions as well.

Facilitate Input Take-In

Lengthy forms tend to deter users. The best we can do is to only ask for the input we really need. This is not only important from a user experience perspective, but users can also hesitate to give out too much personal information because of privacy concerns.

Sometimes, however, we still have to go along with longer forms. In this case it’s a good idea to slice them up into smaller chunks, and serve the chunks as successive screens.

Many e-Commerce sites (e.g. Amazon) use this solution in order to reduce cart abandonment rates.

If we want to ease completing form fields, the rule of thumb is to reduce both distractions and user actions as much as possible.

Example: Personalized Input Picker

Different content pickers, such as date pickers or color pickers, don’t only make it easier to take in the right input, but they also make the form more attractive, and significantly reduce user errors.

The Todoist list-taking app gives personalized hints inside its date picker when the user hovers over the days.

For instance on the screenshot below, the user can see that for Aug 31 she already has 2 due tasks, and can take this information into account when deciding the right date for tasks. It’s an excellent idea for an app where productivity is the user’s main concern.

Example: Drag-and-Drop Input

Drag-and-drop designs usually work well with file upload fields, especially where users are supposed to upload images.

They probably don’t reduce user actions that much compared to the ordinary Upload A File button, but they make it much easier to choose which file the user wants to upload, therefore reducing the chance of submitting a wrong file.

WordPress.com provides an elegant and intuitive drag-and-drop user input interface in its post editor form. The little thumbnails and the visual representation of the already uploaded files further help users quickly execute the upload.

Example: Overlay to Remove Distractions

If users are distracted while completing our form, they are more prone to errors, and also get annoyed more easily

Content overlays are a great alternative to minimalist form design. They are used by more complex sites that want to display different kinds of information on the same screen.

On the screenshot below, you can see the desktop version of Booking.com. When users hover on the search form the rest of the content gets covered by a greyish overlay to help them keep focused on the form filling process.

Give Feedback to Users

Giving the right feedback at the right time can significantly improve user experience.

In form design, there are two kinds of user feedbacks:

1. Feedback given before form submission – in order to reduce errors andform abandonment rates, such as progress trackers, instant input validation that immediately rewards users for the correct input, or helper tooltips
2. Feedback given after form submission – in order to let users know they committed an error, such as error messages

The kind of user feedback our users need highly depends on the characteristics of our target audience, and the goal of our site.

Example: Progress Tracker

Forms longer than one page, such as surveys and most e-Commerce checkout forms can take leverage of the progress tracker design pattern. Progress trackers give an instant visual feedback to users about their status, and encourage them to move on with the process.

The SnapSurveys survey creator web app shows a little progress tracker right above the submit buttons so that users can naturally catch sight of it.

he progress tracker doesn’t use any labels, but the way it’s designed makes its goal clear – the number of circles indicates the number of steps, the already executed steps becomes blue, and users can easily see how many steps are still ahead of them.

Example: Real-Time Validation

The Body Shop cosmetics retailer uses real-time validation on its User Profile form to eliminate errors and improve the UX of the form completion process.

Inputs are checked while users complete the form, and the right and wrong answers are immediately indicated by easily distinguishable icons a little bit further on the right but still in the visible area.

Example: Expressive Tooltips

Understandable microcopy is also an essential part of successful user feedback in form design. By definition, the microcopy of a website consists of small chunks of text used in different elements – labels, buttons, error messages, tooltips, etc.

In its login form, the Barclay’s banking group replies to the questions users potentially may ask with the help of well-designed tooltips that include easy-to-understand microcopy.

The tooltips are hidden behind little ? icons not to distract users who know how to complete the login form, but to be always present for users who are unsure.

Some of the tooltips even contain a little visual of an annotated debit card so that users can easily find the data they have to enter into the login form.

In terms of web development, the most remarkable manifestation of this shift is the emergence of a new field—user experience (UX) design.

User experience design grew out of web design, and while still too many people thinks it’s just a new shiny name for the same old thing, UX design does indeed need a different mindset, a broader methodology, and a handful of new tools.

As there’s a high demand for talented UX designers, in this article we’ll have a look at what UX design is, and what you need to know if you want to become one.

What’s UX?

There are three concepts that are frequently used interchangeably: user interface, usability, and user experience—however they’re not the same thing.

Probably the most important thing to know is that UX is not UI; on this websiteyou can download a “UX is not UI” poster in different sizes, just to keep a reminder for yourself. Let’s quickly see a mini-glossary of these three terms.

User Interface (UI)

A set of visual elements that allow users to interact with a website or an application, such as buttons, icons, navigation elements, tooltips, user profiles, etc.

Usability

A qualitative measure of a UI that estimates its effectiveness. According to the Nielsen Norman Group it’s defined by 5 components: learnability, efficiency, memorability, user errors, and user satisfaction.

User Experience

The sum of the postive and negative emotions and attitudes a product invokes in a user. The goal of UX design is to create as good experience in users as it’s possible by making simultaneous use of multiple fields, such as visual design (UI design), business analysis, marketing, content strategy, user testing, engineering, and others.

If you are interested in how practicing UX professionals define user experience, the User Testing Blog has a great post in which they asked 15 professionals what UX design really means.

On the screenshot below you can see one of these definitions, but the others are also worth having a look at.

So how UX design is different from web design?

Do you remember the time when most website were static? And then dynamic websites, offering a two-way communication, began to appear? The same thing has happened in the field of design.

Web design is more of a one-way communication channel, the artwork of the designer, if you will. UX design puts human-computer interaction into the focus, and makes designers regularly analyze and reevaluate their designsbased on the measured success of this two-way communication.

Apart from creating visually appealing designs, UX designers are also supposed to take user needs and business goals into consideration. They need to be aware of the constantly changing context in which their design exists.

Job responsibilities & deliverables

The job responsibilites of a UX designer are not set in stone, and highly depend on the needs of the particular company.

Smaller organizations may look for someone who concurrently performs the tasks of an UI and an UX designer (usually advertised as a UI/UX designer), while bigger companies may further segment the field into the roles of UI designer, UX designer, interaction designer, customer experience (CX) designer, and others.

Generally, a UX designer is responsible for the operation of the UX process. According to UX Mastery, this process consists of the following 5 key phases:

1. Strategy Phase – deliverables: documents detailing the priorities, long-term goals, and resources of the organization, and the measurements of success
2. Research (Discovery) Phase – deliverables: user interviews, user surveys, competitor researches, etc.
3. Analysis Phase – deliverables: personas, scenarios, storyboards, user flow, etc.
4. Design Phase – deliverables: moodboards, wireframes, mockups, prototypes, etc.
5. Production Phase – deliverables: high-fidelity design, content and digital assets.

The phases can overlap, and as it’s the user who is at the core of UX design, each phase needs to be validated by relevant user feedback, such as usabilitiy testing, A/B testing, and others.

Note that many organizations use the Agile workflow in UX design as well, so more often than not the UX process is implemented in an iterative way (with frequent beta releases).

In 2015, The Nielsen-Norman Group conducted an interesting research among UX designers about the deliverables they regularly ship, and they found a great variety. You can see the 11 most frequently produced UX deliverables on the chart below.

Skills & qualifications

Although UX designers come from varying backgrounds, such as graphical design, product design, business, marketing, or psychology, there exist specific UX-related degrees as well.

Some job ads require bachelor (rarely master) degrees, especially for senior positions, but if you have the right skillset and some practice (and a good portfolio) as a designer, you secure a UX designer job without a degree as well.

In addition, you can choose from many UX-related online courses where you can also acquire the knowledge you need.

To be an UX designer, you need to be able to use different tools that are used in the UX process, most importantly design and prototyping applications, such as Sketch, Balsamiq, Axure, Omnigraffle, Invision, or Adobe Illustrator. You don’t need to know all of them, but it’s crucial to be proficient in a few.

Having a strong understanding of web technologies and principles, such as design principles, mobile and desktop usability, native app experiences, web accessibility, and others, is also an indispensable skill.

Whether UX designers should need to know to code or not is a debated topic, however most job ads do require a basic knowledge of front-end development, i.e. HTML, CSS, and JavaScript.

Finally, user experience design is a field where soft skills, such as problem-solving, communication and collaboration skills, are also a real asset.