Select Page

How to Use Affirmations in Your Website

Adam Corrao
Adam Corrao
19th March 2019

Video Transcript:

Hey Guys, Adam here with ‘UI Design for Designers!’ Today I’ll be talking to you about sending affirmations to your visitors, about correctly or incorrectly completing a task on your website. We’ll be doing this on the “Motivational Speaker” template within the Wix template store.

So what do I mean by sending affirmation to your visitors?

A good example of this is using the form here on the template. So we’ll start by entering my name, which I’ll use my secret alias Bill Nye – don’t tell anybody that. We’re gonna skip my email for now and you’ll see a little red outline appear which is going to be a hint as to what this video is about. We’ll enter a fake phone number – which is not my real number if you need that you go on my website – and we’ll type in a quick message.

Alright, so we’ve entered the information and we forgot the email. Now we’ll click submit, you see this error message pop up telling me to ‘please fill out this field.’ That right there is what I mean by an affirmation. You’re basically anticipating your visitor’s mistakes and telling them that A) they’ve done something wrong and B) how to fix it.

So I’ve seen this message, I see it’s outlined in red, and I know I need to do something. So I’ll go back here to this field and I will enter my email address – which is not my real email address -bill@gmail.com, and I’ll be using this email throughout this video, so I do apologize to whoever actually owns that email, and we’ll click submit. Now we’ll see this positive message come up saying “Thank you for submitting” and that’s the success telling us that we’re good to go and we’re good to move on. Now, the reason why this is really important is because when your visitors are on the website you want to make their experience as easy and as seamless as possible.

So when you tell them, “Hey, you’ve done something right, congrats” or “Hey, “you’ve done something wrong, this is how you fix it”, you’re helping them throughout the website visit and kind of telling them where to go and pointing them in the right direction or just saying thank you and now you’re good to move on.

So when someone’s filling out a contact form, the last thing you want is for them to successfully fill it out, but have them click submit and have there be no success message. So now they’re waiting there, they’re wondering “Okay, is this loading? Is it done? Is it successful?” So by sending a success message you tell them, “Hey, you’re good to go, you’re all set and you’re good to move on.”

Okay, so that was the contact form. Another example of this is this email newsletter sign up here in the footer of the template. So again, we’re going to mess up on accident. So I’m going to put in just “Bill.” We’ll go ahead and click subscribe now and you’ll see again, outlined in red and it’ll say “Please fill in a valid email address.”

So how do we fix this? We’ll just do bill@gmail.com – again, sending my apologies to whoever actually owns this email address – and we will click subscribe now. Great, so now we see the success message pop up.

You’ll see “thanks for subscribing” and “we’ll send news to your inbox.” So, now I know I’m good to go, I don’t have to wait here, I’m good to scroll throughout the site, and move on. Now, usually most apps that have messages like this – error and success messages – and most contact forms, they already have pre-set messages and the setting is already filled out for you, but you at least want to check them to make sure that A) they fit your brand identity and B) that they actually work and they’re displaying correctly when you want them to display.

Now, for this example, I will show you how to set your settings in the Wix ShoutOut form which was this email newsletter sign up in the footer right here. So I’ll go to my web editor, I will click on the ShotOut widget, click settings, click settings again, and just a heads up most of the time these error and success messages are found in the settings section within your widget or within your app or contact form or whatever element you’re using on the site.

So in this case we’ll scroll to the bottom, go and click the thank you message and you’ll see the title text “thanks for subscribing” and the subtitle text “we’ll send news to your inbox.” With that in mind we’ll go back to the website itself and check out the success message. You’ll see the title “thanks for subscribing” and the subtitle “we’ll send news to your inbox.”

So that’s what this is, that’s what these affirmations are. They are really important, believe or not, for a user interface. Sometimes when you’re designing a website, you get caught up in the design and in the processes of it and you forget sometimes the little things like these error and success messages and these affirmations.

So, be sure every time you’re building a site to go in there when you’re making modifications to check it out, make sure that your messages are sticking to your brand identity, make sure that they’re working and they are showing up, so you can guide your visitors throughout the website build, and in the process tell them, “Hey, you’re good to go” or “Hey you need to go back and fix something.”

So, I hope I was able to help you out. Those are affirmations for your website visitors. If you did like the video and if you do wanna see more, be sure to subscribe and I will see you guys in the next video!

Video Transcript:

Hey Guys, Adam here with ‘UI Design for Designers!’ Today I’ll be talking to you about sending affirmations to your visitors, about correctly or incorrectly completing a task on your website. We’ll be doing this on the “Motivational Speaker” template within the Wix template store.

So what do I mean by sending affirmation to your visitors?

A good example of this is using the form here on the template. So we’ll start by entering my name, which I’ll use my secret alias Bill Nye – don’t tell anybody that. We’re gonna skip my email for now and you’ll see a little red outline appear which is going to be a hint as to what this video is about. We’ll enter a fake phone number – which is not my real number if you need that you go on my website – and we’ll type in a quick message.

Alright, so we’ve entered the information and we forgot the email. Now we’ll click submit, you see this error message pop up telling me to ‘please fill out this field.’ That right there is what I mean by an affirmation. You’re basically anticipating your visitor’s mistakes and telling them that A) they’ve done something wrong and B) how to fix it.

So I’ve seen this message, I see it’s outlined in red, and I know I need to do something. So I’ll go back here to this field and I will enter my email address – which is not my real email address -bill@gmail.com, and I’ll be using this email throughout this video, so I do apologize to whoever actually owns that email, and we’ll click submit. Now we’ll see this positive message come up saying “Thank you for submitting” and that’s the success telling us that we’re good to go and we’re good to move on. Now, the reason why this is really important is because when your visitors are on the website you want to make their experience as easy and as seamless as possible.

So when you tell them, “Hey, you’ve done something right, congrats” or “Hey, “you’ve done something wrong, this is how you fix it”, you’re helping them throughout the website visit and kind of telling them where to go and pointing them in the right direction or just saying thank you and now you’re good to move on.

So when someone’s filling out a contact form, the last thing you want is for them to successfully fill it out, but have them click submit and have there be no success message. So now they’re waiting there, they’re wondering “Okay, is this loading? Is it done? Is it successful?” So by sending a success message you tell them, “Hey, you’re good to go, you’re all set and you’re good to move on.”

Okay, so that was the contact form. Another example of this is this email newsletter sign up here in the footer of the template. So again, we’re going to mess up on accident. So I’m going to put in just “Bill.” We’ll go ahead and click subscribe now and you’ll see again, outlined in red and it’ll say “Please fill in a valid email address.”

So how do we fix this? We’ll just do bill@gmail.com – again, sending my apologies to whoever actually owns this email address – and we will click subscribe now. Great, so now we see the success message pop up.

You’ll see “thanks for subscribing” and “we’ll send news to your inbox.” So, now I know I’m good to go, I don’t have to wait here, I’m good to scroll throughout the site, and move on. Now, usually most apps that have messages like this – error and success messages – and most contact forms, they already have pre-set messages and the setting is already filled out for you, but you at least want to check them to make sure that A) they fit your brand identity and B) that they actually work and they’re displaying correctly when you want them to display.

Now, for this example, I will show you how to set your settings in the Wix ShoutOut form which was this email newsletter sign up in the footer right here. So I’ll go to my web editor, I will click on the ShotOut widget, click settings, click settings again, and just a heads up most of the time these error and success messages are found in the settings section within your widget or within your app or contact form or whatever element you’re using on the site.

So in this case we’ll scroll to the bottom, go and click the thank you message and you’ll see the title text “thanks for subscribing” and the subtitle text “we’ll send news to your inbox.” With that in mind we’ll go back to the website itself and check out the success message. You’ll see the title “thanks for subscribing” and the subtitle “we’ll send news to your inbox.”

So that’s what this is, that’s what these affirmations are. They are really important, believe or not, for a user interface. Sometimes when you’re designing a website, you get caught up in the design and in the processes of it and you forget sometimes the little things like these error and success messages and these affirmations.

So, be sure every time you’re building a site to go in there when you’re making modifications to check it out, make sure that your messages are sticking to your brand identity, make sure that they’re working and they are showing up, so you can guide your visitors throughout the website build, and in the process tell them, “Hey, you’re good to go” or “Hey you need to go back and fix something.”

So, I hope I was able to help you out. Those are affirmations for your website visitors. If you did like the video and if you do wanna see more, be sure to subscribe and I will see you guys in the next video!

Shares
Share This