Categories
Online Marketing

Best UX practices and mobile first

I find them somewhat connected so best UX practices. Well, it’s a it’s a list of things, a list of principles and practices compiled by miss Heidi under Nick, and you can find the list at the above-mentioned address. So if you haven’t seen this document, this is what I’m going to talk about on the lecture to some extent, I find this applicable also to desktop applications and the development of software in general, so they are actually quite useful things.

The mobile first approach, an approach in which you can use those best UX practices to produce better software and, finally, at the end, I’m going to talk about responsive design, so a combination or an application of these two. So if you want to follow the best UX practices – and you want to do development mobile first, then most likely you are going to need responsive design, let’s start with those timeless rules for creating intuitive web apps.

As I said, this is not only for web apps. This is for computer applications in general. First, we have something called, don’t reinvent patterns. You know, users have their habits, they have been using their computers for quite a while. Usually you shouldn’t contradict with your application, their intended behavior, and if you make a confirmation button in red, then that’s clearly not right, because most people associate red with error and usually in at least in the Western culture, where you read from left to right.

The button that takes you to the next page is actually, on the like right hand, side in the bottom and, if place it somewhere else, this might be a source of a confusion to the user. What you get by applying this or by not reinventing patterns? Well, you get a lower learning curve, which is always good, so your users can start using your software right from the beginning without having to learn any particular things, and you have the principle of least astonishment, so this is also.

In other words, this is the don’t reinvent the patterns things. Grouping related elements is another good practice, so whenever you have stuff that is related to each other, it makes sense for it to be like in the same place or just in a very close place and inviting you can use shared styles for that. So if you can’t place them directly next to each other, you can at least clean them to make them look related in general, your users should be able to guess what a particular part of your software does by just you know looking at stuff around that part, Then we have the principal called less is better.

This is I divided it in two things. One is on the UI level, where you try to limit distractions and focus on what is relevant. The other part of less is better is the functionality, and this is something that I hope you will all apply in your projects. So do one thing well focus on the bare necessities of your software, and if there is time left then just add more, but do not try to you know, put everything in one place and hope that it will magically work.

It won’t start with one thing: make it perfect and then add new stuff. An example. Is Linux shuttles, so this is, like you know, a shell tool. Just does one thing well and if you want to have some extra stuff, then you have to put them together. There is a common input/output next tip is to plan before developing. This means that you should well, as it says here, design interaction before implementing, which means you should spend some time before.

You actually sit and start coding on planning and laying out how your application is going to look like and again. You should focus on essentials, two things on how to achieve that. One is to get a second pair of eyes, which means that you should find somebody who is not a software developer to take a look at your wireframes and you know user stories and tell you what can be improved. I said it many times throughout this lecture software developers, design, crappy, UI and the other tool that is going to help you in in planning.

The stuff is the the user stories. If you are somewhat familiar with agile, then you might heard about user stories. So these are small documents that you write and they always go AUSA and then roll I want to, and then you explain the things that you want to do with your software. This is actually very helpful because once you get your essential user story, so the one that describes what you want your software to do, then you can, you know, build wireframes for that so plan.

What screens the user sees on the way from the very beginning, to the very very end of that action, then you can get a second pair of eyes, so somebody to look at those make some improvements, and once this is done, then you can actually start implementing It providing feedback is very important in any software. That means that you should acknowledge users actions, so if the user has done something, you should make the user aware of the fact that something happens.

This usually requires a very little effort, but it greatly improves user experience. Like the overall user experience of the software you’re developing unobtrusive help having help without actually stuffing it in the users face that usually works. You should assume that your users know how to use your software, except when they don’t, and then you should indicate that there is help that they might want to read, but they don’t necessarily have to.

Of course, they can still stare at the login screen for 10 minutes if they wish so and next step is to help users decide this kind of follows the principle of least astonishment that I was talking about previously about not making anything that the users wouldn’t expect. If there is a few pages process that the users are going through, make sure that they know what is the next button to press or any next thing to do.

Please make sure that whatever patterns of styling and theming, you use, they are consistent across your software. So there is really nothing more annoying that the fact that in one subpart of your software, the process of going through something is done with a wizard that you press next buttons and then in the next one. You have one page that you have checked you scroll up and down now this isn’t going to work.

If you’re developing software, you typically have a target group in mind, so a set of people that you know they are going to use your applications. They have certain qualities, they are, you know you can define it as a group. You should assume some common knowledge. So if you’re developing software for engineers, then you can assume they likely know mathematics and if you have some complex mathematical terms.

Well, you don’t have to explain them because well it’s for engineers, they should know it. This helps in focusing on the functionality and removing destructions. Well, you assume certain things that the people will know. You don’t have to pollute your UI with extra explanations of those things. Helping users realize where they are so what part of the system they are in? How did they get there? There are two bullet points.

One is clearly marking the progress and the other one is allowing navigation back and forth, especially the navigation back and forth is something that is often forgotten in web applications written with Vardon, because everything is just running on one page without any state to preserve from different Steps, for example – and this is where we can use navigator a rule of thumb – is that you have changed the state of your application that you should change the URL of it.

So then, by just entering the URL, you can come back to the place. You were previously, you can bookmark that place. You should make good use of some navigation parameters so inviting you can have a view name as the first part of the URL address, and then some parameters and it’s up to you. What is the syntax of those parameters where did that come from, and this is basically meaning to show transitions between elements? A good example here is a buddy notification.

Actually, it’s not jumping at you from the middle of a screen. It transitions from a corner, or you know there is an animation that shows it so you’re not surprised that you’ve actually seen the notification. It’s it’s always nice to use this sort of applications. You know with animations and fading out and Sony kind of gives this Pleasant feeling about okay. Well, this is nicely thought. Then we have designed for no data.

I’ve marked here that this is a surprisingly good rule, and it really is. I have been developing software for quite a while already, and this is like the first time I’ve actually seen it written somewhere when the users start your software, what data they have none and in most cases it’s just an empty screen, because you haven’t thought about putting There something you always assume that there is data, because, while you’re developing the software well, you clearly have the test data to work with well, the first time users they don’t.

You have only one chance to make the first impression that actually applies not only to software development. You know, but when your users install your software and start it, then they shouldn’t see an empty screen. They should see something, for example in IntelliJ. If you close. All of those, then you don’t see a blank screen. You see some help once you get used to this software. Will you just ignore this text, but if you’re, the first time user? Well, you at least see some pointers, and this is connected also to dis.

Unobtrusive help next part is to be consistent. Your UI, your major structure of the application, should be more or less the same throughout the entire software, regardless of the part you’re at and inviting we can do it with navigator. So navigator requires a viewport, a part where you can display the stuff that changes from one view to another. Well, this is already what you want, so you have some parts of the system that are consistent regardless of the view, and then you have a part that changes from one view to another.

This is purely related to web applications. You should load the content quickly. There are some studies, I really haven’t memorized the numbers, but the users are very impatient if they have to wait longer than some two seconds or something like that. There are some practices that you should load most of the stuff in the first X kilobytes of the response, so by principle you shouldn’t: let users wait if they click a button, and there is an operation that takes a really long time.

Well, you should indicate that it’s really happening so that something some feedback has been given to the user like they know what to expect and if they really have to wait at a particular screen. Then we’ll make sure that there is some information for for that, and it can be also fun. I don’t know how many of you have played Sim City for this. You know it’s a city building game and in in the version number four.

If you create a new city or a new landscape which takes a really long time to load, then the loading messages are actually funny kind of a related topic to that is progressive web applications. So this is a new trend in mobile application development, a rule about testing. Well, this shouldn’t be a rule, but then, on the other hand, it should ideally, your software should be tested by somebody who hasn’t developed it, who hasn’t designed it and who hasn’t like used.

It at all – and it should be a member of target group – many things that that you should take into consideration. The reasoning for that is twofold. As I said, you know how your software works, so you will obviously not make any mistakes that lead to an error or throwing up some nasty exception, and the other one is that the developers are crappy UX designers. Your users might have completely different expectations from how the software should work or look than you and it’s natural.

You should you shouldn’t be angry at them. You should appreciate that they tell you this it’s better. They tell you, while you’re developing the software, then after you’re developed and deployed it because then they’ll just find something else in your place, inviting we can do it with test bench. This is a Pro Tools, so it’s a paid feature of Warren. It’s basically a j-unit code that runs your software, you can click buttons enter text into various places and it will check if it really works.

It’s really good for acceptance and regression tests. That was that was it that summarizes the good practices of UX development. I think, or at least to me when I was when I was reading those I found them very useful – it’s nice that it’s just 14 points. They are not that very hard to remember and not that very hard to follow and the resulting software will have well at least some quality to it. If you try to follow all of those.

No, let’s talk about a mobile-first approach. Let’s come back to our shoutbox application and how was the UI planned from the very beginning? I had a clear idea that I want to have a text at the top and the bottom there on the right and then the content on the bottom filling up. The rest of the screen – it looks quite okay on the monitor like in here and that’s because desktop monitors are horizontal.

Most often they have more pixels from left to right and from top to bottom, did I ever resize the browser window while developing or showing did. I even think about it. That’s that’s actually a good question. I’ve never thought about that. Why are these questions important? That’s because software developers they use computers, other people like people not being software developers, they don’t use much of computers.

For example. When was the last time your mother used a computer to process web assuming she’s, not a software developer, because I know some mothers are software developers. Modern phones are always connected to the Internet like they are always there, and most of the people have internet in their pocket, and this is how most people, not being software developers or mothers of software developers, how they connect to the internet, how they bro stuff.

It’s the phone, it’s not the computer anymore, and many people do not even need a computer, because everything you will ever need is probably available as an application form. The important thing is: what’s the shape of a mobile device screen? Well, it’s also rectangular, but not horizontal anymore. It’s vertical! It’s a bit different. There are two approaches for developing or targeting software for mobile platforms.

The first one that was there at the beginning is called graceful degradation and graceful degradation means that you start with a fully blown up and it’s optimized for desktop. Where there is huge screen. There is lots of processing power, all the bells and whistles they can be. There it’s desktop app and then, as you scale to smaller devices, you start removing things, but still you try to keep the functionality as it is, so your software really has to work.

But now you know the screen is smaller. There is less space to put all the elements around. That’s why it’s called graceful degradation. The opposite of that is progressive enhancement, and this is where you start with a fully blown up, but it’s optimized for mobile. You have a very small screen. You have a slow, CPU and well basically, no extras. The trick is to add features. As the screen gets bigger.

You still keep the functionality as it was, but now you have extra space, so you can add. I don’t know more information, more fine tuned buttons more. What Evers to the application as it was – and this also connects to the first or one of the first rules, that you should focus on functionality. You should keep it simple if you’d start with one thing and do it well and then, if you have some extra screen available, then you can just put extra things there.

Why progressive enhancement is good. As I said, you start focusing on a very small scale. It’s minimal requirements, essentials only and maximum functionality. This is going to be used on a mobile phone. It has to be simple and functioning portability of that solution is also good. I mean it’s not a problem if you have too much of screen space and if you add it extra, why is it bad? Because everything comes at the price right? The biggest drawback is that you have challenges and constraints right from the start.

You can’t put everything on a screen and hope that people will still see it. That means there is more work on the planning stage already, so you should be prepared to have a stripped down version of your idea, because your idea about your application is most likely concerning a desktop browser, not a mobile browser. There are different behavioral patterns, so there is typically on a mobile device.

Users do not mind that they have to tap the screen or scroll it down. Well, then they scroll up and down and not left right now it must work instantly, and you know this is a mobile device. People are connected, it has to work really fast, otherwise they just shove the phone in the pocket and just go so overall. Is it not that bad? No, it’s it’s not it’s slightly more difficult, but you should apply it by default.

Well, you shouldn’t apply it if your application is never going to be used by a mobile user. Well, sorry, this will never happen, and this is because currently about 25 percent of the Internet users are using only a mobile device. Of course you shouldn’t blindly follow it. You should apply it where it makes sense. Not everything has to be mobile-friendly. Then again, not everything has to be a web application, so you can, just you know, stick to desktop applications and the last part of today’s lecture is the responsive design.

These are the like UX practices that were told first and then the mobile-first approach – and this is responsive, so how you can connect these two. It’s a web design technique where you rearrange the contents of the page. According to the display size, it means context-aware elements. So the elements themselves that you see in the HTML code, they kind of know what is the screen dimension, whether they are visible or not? What role do they play, how they are colored? This is quite an advanced approach.

I have to say because it’s another level of complexity, so not only you have to figure out how your mobile screen should look like and how your like desktop screen should look like, but also how do you transition from one to another if you’re using responsive design? It gives awesome results, one UI, regardless of the platform, it’s just the styles that are different and the whole code, the whole logic of building the UI binding it to events.

Everything stays regardless of whether the users use use mobile or a desktop, and it’s also good because it preserves the information here. Are he if there is more space, you just add extra stuff and what is shown on the small screen is the top essentials of whatever. Should be displayed there in valen, we do it with responsive, responsive is an extension to a component, and you can make any component responsive you just for responsive, not make responsive and then a bunch of components most likely.

You are going to use it on a layout and, like 99 % of the case, it’s going to be a CSS layout. That’s because, as you all remember, from the lecture, CSS layout delegates, all the layouting to the browser and to the CSS file, what you should remember, though, is to add a style name for that CSS layout, so that you can refer to it from a CSS file. What you get is that you can use responsive a CSS syntax, so you can specify with range or a height range of your component and adjust the stuff accordingly in here the upper bound doesn’t have to be present, so you can make it from.

I don’t know. 100 pixels up and so on, and the range is that you define they may overlap, and all of those that are matching they are active. There is one terms and conditions’ applies. All resources must be in the same domain, so unfortunately, no referee of anything outside your application, how we can use it in practice. Let’s make our shout box a bit more responsive. I couldn’t actually come up with anything, so I thought that for small screens we’re going to remove the room navigation like completely and we move the text field in the button to the bottom of a screen not to the top of the screen.

I currently haven’t yet figured out how I flip the order of labels so that the most recent ones show on the bottom. That’s why I didn’t mention it here. The top level layout will be responsive, so I’m going to show you some code. Our change is that I just added a few style names and when it it must have been added before. But this is the key part, so I’m making responsive the main layout and I’m going to make sure that it’s called shout box.

So I can refer to it and there is nothing else that has changed so just this and and some styles, but then there are a few things in the CSS file. Since we have started with a desktop up, then we were cutting down parts as we as the display shrinks when the width range is less than 1000 and 100 pixels, then, which is not displaying the rooms and the caption and we’re also not displaying the caption on The top, and then we move the entry bar to the bottom.

That’s it uh-huh there we are, so you can see that there is a caption here. There is a rooms here, and this whole thing is is on the top. Now, let’s resize the window, whoops I’d kind of resized itself, a bit outside of the screen come back here now you see it it’s different. Now this is on the bottom and as we resize this once we reach thousand and 100 pixels, then it will flip back to the previous okay.

Hopefully, oh yeah, there you have it written on the top and us ask the users have smaller space than this flips back and nothing except the style has changed, and it’s still the same UI file that it was there previously and now we have the power of Responsive layouts in our app that’s it. Today we went to the principles of web application development. As I said, these are not only valid for web applications.

They are valid for any software that interacts with with people a mobile-first approach. For me, it requires still some mindset. Change but I think it’s it’s a good practice, at least to consider the mobile users. I mean you can’t fight this, that people will use mobile phones and then the responsive design. There were just two slides about it, but that’s really it I mean there is nothing! No extra magic involved and you just make a layout, responsive and a new code CSS for it.

That’s it that’s how it works.


 

Categories
Online Marketing

Best UX practices and mobile first

I find them somewhat connected so best UX practices. Well, it’s a it’s a list of things, a list of principles and practices compiled by miss Heidi under Nick, and you can find the list at the above-mentioned address. So if you haven’t seen this document, this is what I’m going to talk about on the lecture to some extent, I find this applicable also to desktop applications and the development of software in general, so they are actually quite useful things.

The mobile first approach, an approach in which you can use those best UX practices to produce better software and, finally, at the end, I’m going to talk about responsive design, so a combination or an application of these two. So if you want to follow the best UX practices – and you want to do development mobile first, then most likely you are going to need responsive design, let’s start with those timeless rules for creating intuitive web apps.

As I said, this is not only for web apps. This is for computer applications in general. First, we have something called, don’t reinvent patterns. You know, users have their habits, they have been using their computers for quite a while. Usually you shouldn’t contradict with your application, their intended behavior, and if you make a confirmation button in red, then that’s clearly not right, because most people associate red with error and usually in at least in the Western culture, where you read from left to right.

The button that takes you to the next page is actually, on the like right hand, side in the bottom and, if place it somewhere else, this might be a source of a confusion to the user. What you get by applying this or by not reinventing patterns? Well, you get a lower learning curve, which is always good, so your users can start using your software right from the beginning without having to learn any particular things, and you have the principle of least astonishment, so this is also.

In other words, this is the don’t reinvent the patterns things. Grouping related elements is another good practice, so whenever you have stuff that is related to each other, it makes sense for it to be like in the same place or just in a very close place and inviting you can use shared styles for that. So if you can’t place them directly next to each other, you can at least clean them to make them look related in general, your users should be able to guess what a particular part of your software does by just you know looking at stuff around that part, Then we have the principal called less is better.

This is I divided it in two things. One is on the UI level, where you try to limit distractions and focus on what is relevant. The other part of less is better is the functionality, and this is something that I hope you will all apply in your projects. So do one thing well focus on the bare necessities of your software, and if there is time left then just add more, but do not try to you know, put everything in one place and hope that it will magically work.

It won’t start with one thing: make it perfect and then add new stuff. An example. Is Linux shuttles, so this is, like you know, a shell tool. Just does one thing well and if you want to have some extra stuff, then you have to put them together. There is a common input/output next tip is to plan before developing. This means that you should well, as it says here, design interaction before implementing, which means you should spend some time before.

You actually sit and start coding on planning and laying out how your application is going to look like and again. You should focus on essentials, two things on how to achieve that. One is to get a second pair of eyes, which means that you should find somebody who is not a software developer to take a look at your wireframes and you know user stories and tell you what can be improved. I said it many times throughout this lecture software developers, design, crappy, UI and the other tool that is going to help you in in planning.

The stuff is the the user stories. If you are somewhat familiar with agile, then you might heard about user stories. So these are small documents that you write and they always go AUSA and then roll I want to, and then you explain the things that you want to do with your software. This is actually very helpful because once you get your essential user story, so the one that describes what you want your software to do, then you can, you know, build wireframes for that so plan.

What screens the user sees on the way from the very beginning, to the very very end of that action, then you can get a second pair of eyes, so somebody to look at those make some improvements, and once this is done, then you can actually start implementing It providing feedback is very important in any software. That means that you should acknowledge users actions, so if the user has done something, you should make the user aware of the fact that something happens.

This usually requires a very little effort, but it greatly improves user experience. Like the overall user experience of the software you’re developing unobtrusive help having help without actually stuffing it in the users face that usually works. You should assume that your users know how to use your software, except when they don’t, and then you should indicate that there is help that they might want to read, but they don’t necessarily have to.

Of course, they can still stare at the login screen for 10 minutes if they wish so and next step is to help users decide this kind of follows the principle of least astonishment that I was talking about previously about not making anything that the users wouldn’t expect. If there is a few pages process that the users are going through, make sure that they know what is the next button to press or any next thing to do.

Please make sure that whatever patterns of styling and theming, you use, they are consistent across your software. So there is really nothing more annoying that the fact that in one subpart of your software, the process of going through something is done with a wizard that you press next buttons and then in the next one. You have one page that you have checked you scroll up and down now this isn’t going to work.

If you’re developing software, you typically have a target group in mind, so a set of people that you know they are going to use your applications. They have certain qualities, they are, you know you can define it as a group. You should assume some common knowledge. So if you’re developing software for engineers, then you can assume they likely know mathematics and if you have some complex mathematical terms.

Well, you don’t have to explain them because well it’s for engineers, they should know it. This helps in focusing on the functionality and removing destructions. Well, you assume certain things that the people will know. You don’t have to pollute your UI with extra explanations of those things. Helping users realize where they are so what part of the system they are in? How did they get there? There are two bullet points.

One is clearly marking the progress and the other one is allowing navigation back and forth, especially the navigation back and forth is something that is often forgotten in web applications written with Vardon, because everything is just running on one page without any state to preserve from different Steps, for example – and this is where we can use navigator a rule of thumb – is that you have changed the state of your application that you should change the URL of it.

So then, by just entering the URL, you can come back to the place. You were previously, you can bookmark that place. You should make good use of some navigation parameters so inviting you can have a view name as the first part of the URL address, and then some parameters and it’s up to you. What is the syntax of those parameters where did that come from, and this is basically meaning to show transitions between elements? A good example here is a buddy notification.

Actually, it’s not jumping at you from the middle of a screen. It transitions from a corner, or you know there is an animation that shows it so you’re not surprised that you’ve actually seen the notification. It’s it’s always nice to use this sort of applications. You know with animations and fading out and Sony kind of gives this Pleasant feeling about okay. Well, this is nicely thought. Then we have designed for no data.

I’ve marked here that this is a surprisingly good rule, and it really is. I have been developing software for quite a while already, and this is like the first time I’ve actually seen it written somewhere when the users start your software, what data they have none and in most cases it’s just an empty screen, because you haven’t thought about putting There something you always assume that there is data, because, while you’re developing the software well, you clearly have the test data to work with well, the first time users they don’t.

You have only one chance to make the first impression that actually applies not only to software development. You know, but when your users install your software and start it, then they shouldn’t see an empty screen. They should see something, for example in IntelliJ. If you close. All of those, then you don’t see a blank screen. You see some help once you get used to this software. Will you just ignore this text, but if you’re, the first time user? Well, you at least see some pointers, and this is connected also to dis.

Unobtrusive help next part is to be consistent. Your UI, your major structure of the application, should be more or less the same throughout the entire software, regardless of the part you’re at and inviting we can do it with navigator. So navigator requires a viewport, a part where you can display the stuff that changes from one view to another. Well, this is already what you want, so you have some parts of the system that are consistent regardless of the view, and then you have a part that changes from one view to another.

This is purely related to web applications. You should load the content quickly. There are some studies, I really haven’t memorized the numbers, but the users are very impatient if they have to wait longer than some two seconds or something like that. There are some practices that you should load most of the stuff in the first X kilobytes of the response, so by principle you shouldn’t: let users wait if they click a button, and there is an operation that takes a really long time.

Well, you should indicate that it’s really happening so that something some feedback has been given to the user like they know what to expect and if they really have to wait at a particular screen. Then we’ll make sure that there is some information for for that, and it can be also fun. I don’t know how many of you have played Sim City for this. You know it’s a city building game and in in the version number four.

If you create a new city or a new landscape which takes a really long time to load, then the loading messages are actually funny kind of a related topic to that is progressive web applications. So this is a new trend in mobile application development, a rule about testing. Well, this shouldn’t be a rule, but then, on the other hand, it should ideally, your software should be tested by somebody who hasn’t developed it, who hasn’t designed it and who hasn’t like used.

It at all – and it should be a member of target group – many things that that you should take into consideration. The reasoning for that is twofold. As I said, you know how your software works, so you will obviously not make any mistakes that lead to an error or throwing up some nasty exception, and the other one is that the developers are crappy UX designers. Your users might have completely different expectations from how the software should work or look than you and it’s natural.

You should you shouldn’t be angry at them. You should appreciate that they tell you this it’s better. They tell you, while you’re developing the software, then after you’re developed and deployed it because then they’ll just find something else in your place, inviting we can do it with test bench. This is a Pro Tools, so it’s a paid feature of Warren. It’s basically a j-unit code that runs your software, you can click buttons enter text into various places and it will check if it really works.

It’s really good for acceptance and regression tests. That was that was it that summarizes the good practices of UX development. I think, or at least to me when I was when I was reading those I found them very useful – it’s nice that it’s just 14 points. They are not that very hard to remember and not that very hard to follow and the resulting software will have well at least some quality to it. If you try to follow all of those.

No, let’s talk about a mobile-first approach. Let’s come back to our shoutbox application and how was the UI planned from the very beginning? I had a clear idea that I want to have a text at the top and the bottom there on the right and then the content on the bottom filling up. The rest of the screen – it looks quite okay on the monitor like in here and that’s because desktop monitors are horizontal.

Most often they have more pixels from left to right and from top to bottom, did I ever resize the browser window while developing or showing did. I even think about it. That’s that’s actually a good question. I’ve never thought about that. Why are these questions important? That’s because software developers they use computers, other people like people not being software developers, they don’t use much of computers.

For example. When was the last time your mother used a computer to process web assuming she’s, not a software developer, because I know some mothers are software developers. Modern phones are always connected to the Internet like they are always there, and most of the people have internet in their pocket, and this is how most people, not being software developers or mothers of software developers, how they connect to the internet, how they bro stuff.

It’s the phone, it’s not the computer anymore, and many people do not even need a computer, because everything you will ever need is probably available as an application form. The important thing is: what’s the shape of a mobile device screen? Well, it’s also rectangular, but not horizontal anymore. It’s vertical! It’s a bit different. There are two approaches for developing or targeting software for mobile platforms.

The first one that was there at the beginning is called graceful degradation and graceful degradation means that you start with a fully blown up and it’s optimized for desktop. Where there is huge screen. There is lots of processing power, all the bells and whistles they can be. There it’s desktop app and then, as you scale to smaller devices, you start removing things, but still you try to keep the functionality as it is, so your software really has to work.

But now you know the screen is smaller. There is less space to put all the elements around. That’s why it’s called graceful degradation. The opposite of that is progressive enhancement, and this is where you start with a fully blown up, but it’s optimized for mobile. You have a very small screen. You have a slow, CPU and well basically, no extras. The trick is to add features. As the screen gets bigger.

You still keep the functionality as it was, but now you have extra space, so you can add. I don’t know more information, more fine tuned buttons more. What Evers to the application as it was – and this also connects to the first or one of the first rules, that you should focus on functionality. You should keep it simple if you’d start with one thing and do it well and then, if you have some extra screen available, then you can just put extra things there.

Why progressive enhancement is good. As I said, you start focusing on a very small scale. It’s minimal requirements, essentials only and maximum functionality. This is going to be used on a mobile phone. It has to be simple and functioning portability of that solution is also good. I mean it’s not a problem if you have too much of screen space and if you add it extra, why is it bad? Because everything comes at the price right? The biggest drawback is that you have challenges and constraints right from the start.

You can’t put everything on a screen and hope that people will still see it. That means there is more work on the planning stage already, so you should be prepared to have a stripped down version of your idea, because your idea about your application is most likely concerning a desktop browser, not a mobile browser. There are different behavioral patterns, so there is typically on a mobile device.

Users do not mind that they have to tap the screen or scroll it down. Well, then they scroll up and down and not left right now it must work instantly, and you know this is a mobile device. People are connected, it has to work really fast, otherwise they just shove the phone in the pocket and just go so overall. Is it not that bad? No, it’s it’s not it’s slightly more difficult, but you should apply it by default.

Well, you shouldn’t apply it if your application is never going to be used by a mobile user. Well, sorry, this will never happen, and this is because currently about 25 percent of the Internet users are using only a mobile device. Of course you shouldn’t blindly follow it. You should apply it where it makes sense. Not everything has to be mobile-friendly. Then again, not everything has to be a web application, so you can, just you know, stick to desktop applications and the last part of today’s lecture is the responsive design.

These are the like UX practices that were told first and then the mobile-first approach – and this is responsive, so how you can connect these two. It’s a web design technique where you rearrange the contents of the page. According to the display size, it means context-aware elements. So the elements themselves that you see in the HTML code, they kind of know what is the screen dimension, whether they are visible or not? What role do they play, how they are colored? This is quite an advanced approach.

I have to say because it’s another level of complexity, so not only you have to figure out how your mobile screen should look like and how your like desktop screen should look like, but also how do you transition from one to another if you’re using responsive design? It gives awesome results, one UI, regardless of the platform, it’s just the styles that are different and the whole code, the whole logic of building the UI binding it to events.

Everything stays regardless of whether the users use use mobile or a desktop, and it’s also good because it preserves the information here. Are he if there is more space, you just add extra stuff and what is shown on the small screen is the top essentials of whatever. Should be displayed there in valen, we do it with responsive, responsive is an extension to a component, and you can make any component responsive you just for responsive, not make responsive and then a bunch of components most likely.

You are going to use it on a layout and, like 99 % of the case, it’s going to be a CSS layout. That’s because, as you all remember, from the lecture, CSS layout delegates, all the layouting to the browser and to the CSS file, what you should remember, though, is to add a style name for that CSS layout, so that you can refer to it from a CSS file. What you get is that you can use responsive a CSS syntax, so you can specify with range or a height range of your component and adjust the stuff accordingly in here the upper bound doesn’t have to be present, so you can make it from.

I don’t know. 100 pixels up and so on, and the range is that you define they may overlap, and all of those that are matching they are active. There is one terms and conditions’ applies. All resources must be in the same domain, so unfortunately, no referee of anything outside your application, how we can use it in practice. Let’s make our shout box a bit more responsive. I couldn’t actually come up with anything, so I thought that for small screens we’re going to remove the room navigation like completely and we move the text field in the button to the bottom of a screen not to the top of the screen.

I currently haven’t yet figured out how I flip the order of labels so that the most recent ones show on the bottom. That’s why I didn’t mention it here. The top level layout will be responsive, so I’m going to show you some code. Our change is that I just added a few style names and when it it must have been added before. But this is the key part, so I’m making responsive the main layout and I’m going to make sure that it’s called shout box.

So I can refer to it and there is nothing else that has changed so just this and and some styles, but then there are a few things in the CSS file. Since we have started with a desktop up, then we were cutting down parts as we as the display shrinks when the width range is less than 1000 and 100 pixels, then, which is not displaying the rooms and the caption and we’re also not displaying the caption on The top, and then we move the entry bar to the bottom.

That’s it uh-huh there we are, so you can see that there is a caption here. There is a rooms here, and this whole thing is is on the top. Now, let’s resize the window, whoops I’d kind of resized itself, a bit outside of the screen come back here now you see it it’s different. Now this is on the bottom and as we resize this once we reach thousand and 100 pixels, then it will flip back to the previous okay.

Hopefully, oh yeah, there you have it written on the top and us ask the users have smaller space than this flips back and nothing except the style has changed, and it’s still the same UI file that it was there previously and now we have the power of Responsive layouts in our app that’s it. Today we went to the principles of web application development. As I said, these are not only valid for web applications.

They are valid for any software that interacts with with people a mobile-first approach. For me, it requires still some mindset. Change but I think it’s it’s a good practice, at least to consider the mobile users. I mean you can’t fight this, that people will use mobile phones and then the responsive design. There were just two slides about it, but that’s really it I mean there is nothing! No extra magic involved and you just make a layout, responsive and a new code CSS for it.

That’s it that’s how it works.


 

Categories
Online Marketing

UX Design: Top 5 tips from our designers

So what you’re going to see in this article is us asking some of our top designers what they use to level up their UX skills and what sort of things they would do if they were teaching someone who is junior? You know like what way could you level up your UX skills, so what sort of resources would you use or what sort of things would you do so hope you find this useful and do let us know in the comments what resources are, what tips you have For becoming better UX designer or what sort of questions you have for a design team here at ageyn, smart all right, let’s go hi, I’m Alma and I’m one of the UX researchers on the Sprint team, and I have two tips for you today to become a Better UX and product designer, so tip number one is to subscribe to an awesome newsletter called product habits by a guy called Heaton Shah.

This guy has designed and released the Q products that you’ve probably heard of like KISSmetrics and one more that I’m forgetting at the moment, but he’s a very smart guy and his newsletter is awesome. He pulls articles from the web about product design and stuff. That is always a really really good read. So that’s my first tip and my second tip is actually not so much related to one specific person, but more of a process that you can follow.

So the way that I actually find inspiration and my design work is that I go and look at apps that I really love and I think, are really well designed and then I look for the developer that make them and then see if they talk about their Design process and their thought process somewhere online, so it could be on Twitter, it could be a podcast, it could be a blog anything and so like for me. It’s following Marco Arment following Marc Edwards and Jared Sinclair, but you no longer post about these stuff, but regardless of the people that I follow, you should just go.

Look at the apps eula look at look for the people who make them and then see. If they talk about their thought process, because it’s really helpful to see how they arrived at the design decisions that they made – and I think that will make you a better designer by doing so so when I meet someone who’s trying to figure out how to just Get better at being a UX designer or a UI designer, and I guess my answer is kind of going to be a bit more boring and tactical than everyone else’s.

What I get them to do is look at the guidelines for some of the biggest platform, so, for example, iOS so for any Apple device like iPhones Apple, has their own human interface guidelines. In fact, there’s a whole webpage dedicated to all the different interactions. All the different animations, all of the different kind of rules for designing products on that platform and the cool thing is there, are really just two platforms right: there’s iOS and there’s Android, and both of these platforms have really excellent documentation.

Both iOS and Android. Google has material design and Google’s material design. Documentation is beautiful. It’s really amazing. It’s really clear, and I think that one really big problem that I see with a lot of designers, is that they’re sort of learning, UX design in an abstract way or they’re learning like UX and UI design from apps that are on the market or from dribble And these apps are already breaking the rules because they’re you know, the people who are designing these things are often so good at understanding the basics that they know how to break the rules, whereas I think it’s super important to know the basics and even some of The best designers, I still sometimes see them using like a you, know, modal pop-up, when it doesn’t make sense having a back button when it doesn’t make sense.

I think it’s important for a designer to know when, when you tap on something, how do you know whether it should come up over the screen, and how do you know when it should slide in from the right – and I think things like that are super important To understand and to understand those things, look at the guidelines for iOS, look at the guidelines, the material design guidelines and, honestly, I think, that’s like it really.

It seems like a really basic tip, but I checked the guidelines every so often when I’m when I’m stuck and I’m wondering Oh like, should this be an overlay or should should this be? Should I have the tab party and I think those sort of things are easily answered when you go and look at the systems and the design systems for in these larger platforms and the documentation is really really great. So that’s my advice.

Hi I’m Dee. I’m a product designer designed to infer Scylla, Teta and designs for an educator at AJ and smart and my top tip for progressing your UX product design. Career is a bit left field and it is volunteering at events, meetups conferences, volunteering to even just do really simple things like helping like run the event move chairs around get coffee all the things that seem like you have more important things to do.

Volunteering for stuff, like that, will just expose you to other really cool and probably more senior people in the industry who are running these kinds of events. You have probably very interesting careers because they’re choosing to run a conference or run an event of random eat up. So that they can share this knowledge and their passion for their industry to the rest of the world into the design community.

So exposing yourself to tons of senior people who really care about what they do and you’re, probably exposing yourself to a ton of information as well. You’re, probably getting a free ticket to the conference being able to meet all the people that come to the meetup and just exposing yourself to to more opportunities in your career and more passion excitement in your work, but there’s one caveat I have for this tip.

Is it will not work if you’re just using it as a little hack, and you don’t actually care and you’re not actually enthusiastic, but if you’re super enthusiastic to get into the industry and super enthusiastic about in your field about UX design or product design or whatever It is if you’re really excited about it. This will work for you. This is this work for me from the very beginning of my career, I’ve been doing this volunteering and also running events, and I love it, and it’s made a huge impact on my career.

I’ve met people who have offered me jobs, then from these kinds of things, so it will work as long as you’re excited about it. My name is Rob. I am a product design director here at AJ, smart and my top tip for becoming a better UX designer is to just be really aware of new products that are coming to market, and you can gain a lot of inspiration and you can also learn a lot From how like new UX problems have been solved, but also, why would I’d like to add to that point? Is that you don’t have to be kind of restricted to what’s been done, always questioned whether something can be made more streamlined, more intuitive or just more easier to use so use those as a benchmark and then feel free to kind of do anything to them? I try and do download an app a day and it’s just good to kind of really broaden your horizons with using your apps and there’s so many.

Obviously this needs so many apps. You can never keep up with them, but it’s just good to kind of keep your hand in that and there was becoming the benchmark for best practices within designing mobile interfaces. Hi. My name is Tim. I am the product design director at agent, smart and I’ve been in the design industry for over 10 years. Now I started off as a: u accent your eye designer for agencies, so one piece of advice that I would give is to find really really good mentors to learn from.

I really liked working with people who have a clear attitude or towards the work that they’re doing for clients and who didn’t just treat it as this kind of like random thing, allergic they’re, just kind of like doing their magic, and nobody really understood what the job Was so they had a very, very good like like a clarity to them, how they conducted themselves in their job, and they could also very clearly tell you why they were doing things in a specific way, and I would recommend everyone was starting out to look for People like that and ask them a lot of questions and working with people who already had like a long track record, definitely helped me because I think, especially in the beginning, you were feeling kind of lost, because it’s very overwhelming you know doing like working in your First job and some company and realizing that you were a little bit out of your death, so yeah.

I think if you just find one or two persons like that and you get to you, get them to share their experience with you and almost like. Take you under their wings and work with them. More often, it can really help, and I mean usually when you have a relationship to people like that they will also be the first one who approach you would ask you to work on something with them, because they know that you’re, a person who is actually really Interested in doing great work with them, and you really have to to show that you – you want to do these things and that’s super empty, but that’s my so.

I really hope you like reading this article and I hope, there’s a few things in there that you can take away. Do let us know in the comments, if you have any other questions or if you’ve any other tips for us and give this article a like. If you enjoyed it now, if you’re interested in learning more and more and more about product design, we do have a weekly podcast. Every Monday morning called the product Breakfast Club podcast also check that out ton of free stuff.

We’ve got some really great guests on the podcast, like Jason freeze like Kim’s, got lots and lots of other guests. So if you’re interested in the product, design or tech world definitely check that podcast out and have a great week bye bye because it makes us feel popular. Oh I’m sorry is us a Jane smart at office.


 

Categories
Online Marketing

Learn UX & UI Design for FREE (Our Favourite Courses – 2019)

That’s right! No money, no problems, because this is all for free, so this article is going to be really great if you’re, just starting out in the UX UI product industry, I’m going to actually take you into my laptop and show you around 10 to 15.

Amazing resources that you can use literally right now, you can start today to learn UX UI product design to get a little bit of inspiration. These are going to be some really nice resources that I’ll just kick you off in the right direction: they’re, all free! You can start them all right now and I’m not talking about you, know, articles and articles, I’m talking about like full-blown courses and really needy needy resources that will help you learn.

I have so many resources to share with you guys today, I’m going to stop talking and start showing, so, let’s dive into the first one. We have a free online course from Udacity. Now Udacity is a is a platform that has tons and tons of online courses, and actually a lot of them are for free to start, and the thing is, you can then move into the paid program if you’re really enjoying it or you find you’re getting a Lot from it, so this one is called product design, it’s actually instructed by people who work in product design at Google.

So you know that it’s you know legit. Basically, the whole idea is it’s about validation and UX through design sprints funny enough um here at age, 8. Smart. We do a lot of those, so it is free. It’ll. Take you about two months um, so it’s a pretty robust course, which is nice and the skill level is intermediate. So I think that this would be nice for someone who is actually, you know knows what UX is knows what product design is but needs to get a little bit more of those hands-on basics.

All you have to do is how you sign up you sign in to get started. It’s super easy, and actually it’s the you know the free courses, of course, leading into the nanodegree program. Your course leads here. Our crisp sadden and amir Chevette great names. Both of you guys and here’s the cool thing, you have these four kind of key lessons, so you’re learning, ideation and validation, you’re, learning, UX and UI here, so you’re, actually learning how things should look.

What’s kind of a standard in the industry, you’re learning about the design sprint, which you know we happen to know a lot about, so you could learn that on our blog as well, but they’ll go into kind of the basics behind that, as well as key metrics. So how to actually identify metrics for websites and apps relating to you know, traffic, customer satisfaction and engagement. So this is a really nice course that you can just get started and see how you like it, and then you can move on further from there.

Okay, let’s jump into the next tab. I have here this one is from envision. I really like this because it’s a it’s called design talks and it’s actually webinars and kind of online talks about product design, UX design, thinking all these kinds of things and they’re all coming from experts right. So you actually have people from you know this guy is from Airbnb Dan Howard, Dane Dane Howard from Airbnb and he’s actually running one of these talks about the future of UX design.

These are the kind of thing that you can really like get really needy needy. I really love that word today. You can get really great advice from these people they’re, actually working within the industry and, what’s really cool, is there’s tons of them that you can read. Look at all of these they’re all open, free and really just like you’re, going to get some really in-depth insights through these, and then you can sign up if you want to read them live as well.

So that would be our second resource from envision. Very, very great okay. Moving along this is one of my favorites that I found. Actually, this is a design better and it’s called the principles of product design. So this is a little bit more of the basics, but it’s super in-depth and I’m really like nice to look at easy to read. You’re actually talking about you know the core best practices that are going to help you build a design better, faster and more collaboratively.

So it’s you can download the whole thing, but then they also have it outlined and all and all these chapters so like I really liked this one. This chapter two is all about. Let me just go to chapter two here: it’s all about story, storytelling! Oh, that’s! Actually happened one time before, or maybe it’s a problem with the site? Okay, so this is chapter number two that is all about like storytelling and how to actually do that, and it’s not just like this very kind of you know ambiguous talk about how storytelling is important.

It’s actually going into super detailed of like how to actually use a narrative framework for your products super great, and then we also have this guy here, who is Kevin, Chang from incredible labs and he kind of walks you through how he uses storytelling in his daily Work so it’s really high, like really high production value, which I kind of appreciate. I like that, when I’m learning I like to be entertained as well, but, what’s really cool, is they talk about creating user journey max-width through storytelling? Also down here? There’s some really nice.

Visuals tons of nice articles, so the whole thing is really nicely laid out for you. It makes a lot of sense. You know what I mean like you can go through this whole sort of chapter and you really feel like just getting some really great insights. So it’s going to be really really helpful for you. There’s tons of nice little articles that pop up there’s even down here when we talk about personas, there’s, like kind of like a little worksheet that you can actually go through to help you.

You know just get that started if you’ve never done it before it might be something that is a little bit new to you, creating an actual user persona for this product that you’re making so really highly recommend this one it’s from InDesign better, which is actually from Envision as well so those envision guys they’re on it in terms of education right good, so the next one that I want to bring up is actually a Coursera.

So Coursera is obviously an online if you might already know about it, but it’s an online platform that has tons of courses on it and a lot of them have sort of a free start. Like a you know, free chunk at the beginning, and then you can upgrade if you, if you want to a lot of times with these online platforms, they’ll give you the the kind of mini course for free. They just won’t, provide you with this certificate.

So if you’re, just at that point where you’re curious about you know how UX works and you want to see if you’re really interested in it or you want to get that nice boost at the start of your career, these are some really great ways to do That so Coursera has introduction to user experience design. That would be a really great one to start with, it’s going to give you the basics. This focus of this course is to introduce the learner to use her experience, design pretty straightforward, just describing what actually UX is they go into some nice details as well? You can see here, there’s also tons of other, very similar courses.

So once you finish the intro, you can then move into talking about information design, maybe user experience, research and prototyping. That’s a really big one for us, especially the design principles. So you can even get into the nitty-gritty of like visual design as well so Coursera. I would highly recommend checking that out as well, not as visually nice to look at have to say, which is a bit of a downer in terms of you know, design courses, but oh well, okay, this is another one, so this one is called a future learn Future learn calm.

They have tons of courses as well. This one is a user experience course. So you’re going to learn about why user experience and UX is important. The research and design basics and the tools and testing techniques used in UX you’re getting a little bit more detail in this one, and what’s nice about this, is they kind of have laid out? You know your studies and how you should actually do it. So the course will last about three weeks and the the idea is that you would do about two hours per week.

So this is great if you have another job, that you’re doing full-time, because really committing two hours per week for a course is doable with a full-time job as long. So this one is really nice. You have these nice articles as well, so they go through what topics you’re going to actually cover by the week so week. One is why is user experience important so you’re learning the foundation and actually looking at what good usability really is week, two you’re going through user experience, basics, so the importance of user research super important user journeys, visual design, structuring your site, wireframes and interactive prototypes.

So in a lot of ways, they’re taught they are going to be focusing on web design. For this, but also super I mean when it comes to user research journeys and visual design, it will be very similar and then week three is tools and testing. So you’re going to talk about user testing, interaction, design and the importance of analyzing data, so actually a pretty robust course for just three weeks and is full free.

So right, how can you not love it? They also have other courses as well that you can check out tons and tons. You can look them all up here. Short courses, they’ve got in-depth programs and they have online degrees. So you can definitely start here and then take it from there. Okay, the next one that I really like. Actually there I have a couple of these kind of similar ones. Coming up, this one is called hack design and it is a design course, but actually really great for people who are maybe a little bit lazier like myself.

So this is actually you sign up with your email address and you get on a weekly basis. You get delivered the course, so it actually kind of eases you in to the the actual content and basically it’s you have all of these instructors as well. So these are people who are actually working in the industry, which is so important. I absolutely hate it when you’re learning from someone who used to work in design you know years ago, and they aren’t actually, they have no idea what’s going on in the current landscape.

So super important and a variety of opinions and an instructor’s which is also important to get out of your you UX design education. So you sign up with your email address. You get curated lessons every week and you’re learning at your own pace. You can, you know, have your other job and your life, which is important, so hack, design, highly recommend checking that one out, okay, the next one, is from envision.

It’s called principles of UX design and this is another one where actually you’ll sign up with your email address, and you will get one email chapter per week on the guiding principles of good UX design. Doesn’t that sound, lovely, so you’ll receive the following chapters? There’s nine chapters here: what is you user experience UX as a practice and the roles that make it up project planning and process? So this is really good.

Actually, if you are good planning on going into a company to work, so you’ll actually get a good idea of what it’s like working on a product team which you know before you actually go into your first job. There’s really not a lot of ways of finding all that out: what’s user research, what are the persona, what are personas and why they’re important information architecture, visual design, presenting and participating in UX reviews and then beyond UX, which who knows what that is right? I have no idea I like that they keep it in big ewis.

It’s really good. Okay, let’s move on to kind of one that you might actually already know about. It’s called lynda.Com, so this is from LinkedIn. You might already know it now. Actually, the Lynda courses are not for free, however, you can get a free, so it’s like you know you can have a free month trial. So why not make the most of it right sign up for a free month, trial and then just like enroll yourself and tons of courses? Maybe just do one or two just would make you actually make sure you actually do it.

But there’s really like look at this practical UX weekly. You have UX design for developers, that’s great sketch for UX design. This is really cool. Actually, so you can actually learn these hands-on tools. Let’s see what an experienced designer or someone who’s just getting into UX or product design sketch is an amazing tool. It has all the features you need to design for digital devices and screens, and it’s easy to use.

No matter your level of experience. Doesn’t she sound excited to teach you? I actually think this is really great, though, because not often do you get these like free courses that are about a tool, and you don’t have to flood through, like all of the YouTube blogs, to try to find someone who’s? Actually explaining it well, so that’s really nice and there’s tons of them. I mean. Let me just go back.

My computer’s failing me today, so become a UX re, become an easier experience, designer UF’s research Photoshop for UX design, figma for like its endless on Lynda. Actually, this is really really great, so if you can just try it for a month, see how you like it and then maybe you can even sign up for for a little while longer just to kind of improve your skills. I have so many nice courses and tools here, so the next one is very, very cool.

This is all about material design and now. Material design is, of course, Google’s design, guidelines and they’ve released this. To give you a really nice overview and deep dive on material design, how it should look, how it should feel you’re going to talk. Colors typography shapes interaction, it’s really a nice nice resource, so it also looks really nice. Thank you, google. So the next one I’m going to show you is Envato now Envato is a market place for a lot of different things.

You can find graphics, you can find themes you can find like basically anything for kind of media and design. So thanks so have a lot of really nice bite-sized courses, so you can actually look up in this category. You can click. I want you X courses. I’ve had already clicked a lot, but here is all of the UX kind of based courses, and, what’s really nice is they’re like 43 minutes long, you know 37 minutes long and they’re about all kinds of things so like this.

So why the secret of good UX design is saving users time everything you need to learn about. Customer journey mapping, um, there’s even one from our friend Dan ski about Adobe XD, Daniel white. It has a really nice YouTube blog check it out. We’ll put the link. Is below if you want to learn anything about like Photoshop, he is just a really nice visual designer so and vados. Definitely one to check out if you want just like little bite-sized pieces of content or little courses.

If you don’t want something, as like, vague and robust as what we looked at before so now, I’m actually going to show you something that is quite cool. This is just on medium. The UX collective is is basically a publication on medium, but this guy – I love this, so he calls it his ultimate Start Guide for beginner UX UI designers in 2019. He’s been collecting all of these things that have helped him in his career over the past 5 years and has put them all here for you, so this resource is going to be really great for someone who’s a true newbie write to the industry.

He talks about how to you know, get in touch with your community, how to like the actual basics, behind design and and some nice tools that he’s used throughout his career. So really it’s a nice easy and it’s just full of links. I love it when people just pump their articles full of links and that’s the reason why I actually showed this because I didn’t want to show just articles, but he shows so many nice nice articles.

He even talks about like design companies that he’s following, and you know their blogs and you can find all those here. So Bravo, sir, let’s see Johnny vino well done, sir. I really enjoyed this and I think that you guys will find it really helpful as well. Ok, the last two are actually just magazines that I think are really really great to stay in touch with design principles and to learn a little bit more about the industry in general.

The business behind design Smashing Magazine is really great, so I mean every day. Basically, there’s new articles about UX about product, about strategy, I mean these are things that even if you’re a dinner in this world, you need to know about the business behind the product and like what the strategy is behind the business in order to really contribute. In a real way, so I think that it’s really important to read, I mean yeah.

These are really great. Some are a little bit more intricate than others like design and lead gen landing page for mobile. That converts that’s a little bit like you know, pretty! That’s pretty detailed. We also have things about like UX privacy even have like sketch versus figma, Adobe, XD and other UI applications. So you can really get a good idea of what people are kind of thinking. What they’re saying what they’re talking about right now in the industry and that’s the same same goes with this mueslix magazine, which is also on medium measly, is really really great.

It publishes all kinds of articles for all kinds of different people, but all around you X, design – and you know, product design, so you’re going to have things from like things about typeface Helvetica. You know you could also have things about more kind of like strategy. Deep-Diving yeah like what I learned from trying to redesign the online craft market experience. This has really detailed stuff, but learning these kinds of things are going to be able to help you to talk about UX, more fluently and be able to actually like pull from different things that you’ve read and learned.

So I think it’s really important to always stay updated, so things from you know just simple design stuff to more like talking about. Let’s see here like a cake, like really nice case studies, Beasley is actually really great about it. Oh look. This is Johnny vino again he’s popping up again but yeah. He has some really nice case studies and everybody loves the case study that gives you a really nice look through the process of design from initial concept to actually delivering to the App Store, for instance.

So that is a whole bunch of free resources that you can use everything from actual, like thought-out, specific courses to little bite-sized pieces of content. If you just have a few minutes – and you want to learn something really fast. All of these things, though, that I’ve shown you are going to help you get a really nice overview of what UX is what design actually means. It’s going to show you some of the tools that are sort of standard in the industry, and then it’s also going to be able to show you.

You know some best practices behind how you know the industry is currently working, and that is a really really great start if you’re interested in learning a little bit more about UX design. Thank you guys so much for reading. I hope you enjoyed this article. If you did like it, I would love if you hit the little like button and if you haven’t subscribed already, you definitely should we have tons and tons of articles on our blog, as well as new articles coming out weekly about UX design, product design, product strategy, The business behind design, it’s really we’re working really hard to make some nice content for you guys they subscribe.

Also, if there are some resources that you’ve found that I didn’t mention, I would love if you mentioned them in the comments. That’ll be really really helpful for all of the viewers as well. So thank you very much for reading. If you want a little bit more from us and you’re, just like I’ve, readed everything on YouTube and a lot more, what you can do is follow us on Instagram. We have daily vlogs.

Is it a vlog, its own Instagram, daily stories? We have daily stories about? What’s going on in our agency, and we also are always sharing valuable stuff there. We have a Facebook group called innovation, hackers, it’s excellent, it’s a bunch of people who are sharing innovation, practices, UX design principles. It’s a really really nice group, that’s very, very active. We also have a podcast if you’re into podcasts and product design, then you should definitely be listening to our podcast.

It’s called the product Breakfast Club, it’s featuring Jake map, the author of sprint and Jonathan Courtney, our CEO, and they are talking all things products I’m so definitely tune into that one. Thanks again so much for reading. You guys we’ll see you in the next article have a great great day, alright guys, what’s up I’m Brittany from AJ and smart, it’s what’s up a little bit. Did you like it yeah, I don’t know.

What’s up is really on brand for me, but I’m going to try it it’s new love. It ok, irritating all right. You and your balance calendar you this yeah. That’s right! No money! No money! No problems! No money, then we’ll problems. What is the thing? It’s like? More money, more money, more money, more problems; well, you’re disturbing now,


 

Categories
Online Marketing

Design Trends (for UX/UI Designers)

My name’s Brittany bowring, and this is digital design trends for 2019. How was that was a pretty good reporter, not bad. I’m going to take you through what I’ve found in all of my research. I was you know just up all night long. You know just studying, reading everything so that you don’t have to isn’t that great. I talked also to all of our head designers here at AJ and smart got their opinions and what they think is going to be important, basically in the coming year, so jumping into 2019.

After reading this article well you’ll have all the information you need right right. So, let’s just get started. Basically I’m going to take you through I’ve got all these tabs open of the things that I found that I think are really important and of course it’s not just this one person who I’ll show you, as mentioned the trend. It’s probably come from various different points, but I’ll show you kind of what I think are the the big ones that just kind of kept popping up so the first one that is also, I think for me most interesting, is the minimalism trend.

So this kind of actually crosses into a lot of different categories, but the basic idea actually I’ll, show you here on my page. I have this kind of vlog, it’s just all about minimalism in design, and they talk about minimalism actually is which I think is important to define when you’re actually telling someone it’s the trend, so the Webster dictionary defines it as a styler technique. That is characterized by extreme sparseness or simplicity, so I think this is really interesting because a lot of times I mean in the past years, what has been like the most common kind of issue in product design or something that we’ve been trying to solve is engagement.

We want to engage people, we want them to spend a long time on our apps. We want them to. You, know their screen time to them to increase and now really making a pretty conscious shift into basically the opposite, so people are talking a lot about. You know making sure that you’re not actually engaging the user when you don’t need to be. You know making sure that when you’re asking them for things or when they’re moving through your product, you’re, not just like throwing unnecessary notifications at them or pop-ups, and all these kind of annoying things, people are even more like anxious and busy and overwhelmed as it is In this modern world, so I think it’s important that we as product designers and in this industry are just kind of being mindful of that.

So another thing from this anethe messier he talks about like time-saving design features like people are really really busy. So you want to actually make sure that the time that they spend using your product or your service is for good reason or you know, you’re actually providing value for them. So you know talking about designing with common use and user navigation patterns context. Specific features.

That’s interesting gentle nudges. He calls them, which I think is kind of interesting. I hate that he says the word pop-up, though, because I think the world would be a better place with less pop-ups, but it’s kind of interesting. You know he’s just sort of talking about how we need to kind of keep the user in mind a little bit more going forward, and what are the common issues that they’re facing in their lives, which are very often like anxiety and overwhelmed? He also down here talked about like getting rid of common annoyances.

This is an interesting article. He talks yeah, I mean people are using an average of 30 apps per month and about 10 a day, which is a lot actually interesting that he talks about 2019 could be the beginning of the end of passwords. So actually, just using like verification codes and not having to think of all these passwords constantly, it’s going to be kind of helpful, so talking about here, page load times, storage, space transitioning from one device to another.

That’s interesting, making sure that you know you’re. It’s a cohesive experience for the user, so I think that I mean I did talk about minimalism before, which was which I kind of got out of that I got out of that sock there, but the point that I think is really important is that you know We I mean apples talking a lot about it. I think Google, as well just about actually like reducing screen time, I’m getting pop-up messages on my phone.

All the time telling me how much screen time, whether it was more or less than more or less than last week, and I think that is important to be conscious of moving forward into into 2019. So first one minimalism, the second one is the Internet of Things. So more specifically in that realm is voice. I mean, I know that. That’s also like a common thing that everybody’s talking about, but you know, there’s a huge rise in smart home devices like things like nest, things like Google assistant, obviously like Siri as well.

This photo is just I can’t look at this photo without thinking that it’s like just a little bit, there’s just something weird about it. I don’t know it’s not a good photo. Let’s just say that so this person cata Cadabra studios – I would I would have put another photo in there. If I were you but super interesting, I mean by 2030, 30 percent of searches will be done without a keyboard or screen. I think that’s something really to be conscious of so how can your product or service actually interact with these voice assistants, and how can you make that a streamlined process and actually delight your user with that? It’s going to be really really interesting, yeah so pop about this time when ecommerce here yeah so combining voice technology and preset commands, so customer sim can simply ask for what they want and get it.

I mean a good great example of this is how Google assistant has actually integrated with uber. Basically, what they’re doing is you can actually say to your Google assistant order me an uber to go to work and Google assistant knows where you work. They know where you live, and they can just order it instantly without you having to put in all that extra information. It’s a really good example of integrated voice interfaces, so that is definitely going to be a big one.

The third one, which is cool for me because I work a lot in this sort of category – is the third kind of trend that a lot of people are talking about. Is content focused experiences, so this is coming from like a prediction. Upcoming UX trends from Academy X, I yeah it’s super interesting they’re, talking about how you need to make sure that the content that you’re actually showing the user and the way that you’re guiding them through it is like a delightful experience and isn’t you know you’re not Giving them too much you’re, not confusing them you’re, not overwhelming them, so it’s like 2019.

One of the biggest trends would be the ability to tell compelling stories around a digital experience. I think that’s really really important to think about they’re talking about like live article and article ads, so that’s more like the marketing around your product, but also super important to keep in mind, I mean we talked about it all the time how UX design and product Designers should know more about the business more about the marketing of their products.

It’s really important to keep that in mind when you’re building them yeah. I think that, in summary, for the content focused experience is the idea is just that. It’s important that people have a nice Pleasant time, interacting with your product or your service. So in you know, it means that, like words, actually matter a lot, the content, whether it’s article or animation or just text, it’s important that you think a lot about that and that shouldn’t be a second step.

It shouldn’t be, you know, even the content writer, the copywriter should actually be involved in sort of more in the development phase. So I think that’s really interesting. Moving forward into 2019. The next one is talking about it’s down here. This one was also from a NASA Nasir and he’s talking about making personalized experiences for the user and how you know, making them a little bit more more streamlined.

So you know whether it’s in the form of emails based on knowledge of previous website interactions or text messages. You know it’s important that your UX is actually personalized to the user. It’s going to be pretty big in 2019. He’s talking here about chat BOTS. I find that interesting because I kind of think chat. Bots are on the outs, but that’s just me personally. So don’t you know, don’t don’t look too much into that, but I think the voice is on this way in and I think chat.

Bots are kind of a thing of the past. I know myself. I hate I just hate, interacting with a chat bot. I really find it super impersonal, which is interesting because Facebook, of course they’re popping up all the time. Do you want to see like if I’m running ads or something on Facebook? It’s always like your I’d performed like this. Do you want to see more information, and I guess it’s interesting that they can? You know quickly do that in the form of a conversation.

It does create a little bit of this personalized feeling, but I think that, just in general, we can use a lot more of that – let’s see here, just yeah paying. Okay, this is cool so based on trends see today. This means paying attention to things like transparency and security. Now we live in Germany, which, like security data protection, is really really big, but I think it’s really cool that it like this is going to kind of transcend into the rest of the world.

I mean it makes sense right like like with what’s going on politically right now, people are really into transparency, they’re really into you, know, honesty and they don’t want their data used. For you know weird creepy secret stuff, so I think it’s important to think about that. You know think about the political space what’s happening and then like actually seeing how that translates or figuring out how that translates into product design, and you know the things that you’re building yeah, so that’s kind of a really cool one.

I think that’s that’s quite interesting to think about. He also goes into talking about in more detail about that. So definitely will have all the links for these articles down below. So you can read them all yourself in depth. If you so choose now, the next one that is kind of interesting is just more of a like. An industry focused trend, and we’ve talked a little bit about this in the past articles and like two articles ago, I think we talked about this John did just about how the way that we define UX as an industry and the way that the actual positions are Called and what your actual job title and role will be, is going to change a lot.

So what’s interesting right now, it’s not really an article, actually it’s more of a report, but it’s a state of the UX and 2019. I think it looks really nice. I really like the way it looks so we’ve seen quite a lot this year at your curating and sharing 2239 links with these are the amount of people. I guess who have read them. 260,000 designers they’ve isolated these trends. Basically, coming from that, so that’s kind of interesting.

This is a really cool one. I would I would suggest reading it, but one thing that I thought was really cool. Was this like everyone is a lead, so you’re all excited I’m in design levo and then you look around you’re like oh everybody is a design lead right now, which is you know a little sad but interesting to know in the year. You know coming up, so this, I think, is like pretty much sums it up quite well, this this little animation here, like you’re two months into your career and you’re, a lead designer right or senior UX, and that’s actually kind of interesting, because John, our CEO straight Out of university was the like senior UX designer at like a really big German company, and I think it’s kind of funny it’s very telling for where the industry was at back then.

So we are seeing a bit of a shift. But what’s interesting is based on based on like a scan at the market. There’s like everybody’s looking for senior UX designers. It seems like that is sort of the base level for what you need on a product team, and I think that that is going to maybe shift a little bit. You know going forward because we’ve got a lot of entry-level UX designers coming in and they won’t have the knowledge or experience to be seniors.

So I think that’s really something kind of interesting, so they kind of sum up. Doesn’t you start looking at seniority through new lenses, so be proud of your lead title? You know that’s cool, but if you consider seniority from the perspective how much impact you’re able to make, then you have a better sense of where you are along in your career. Trajectory that’s really interesting. So then they kind of go on to talk about actually strategy and making sure that you can be bigger part of the business other than just you know.

Creating you know the visual design or the even they. You know the experience design. So that’s kind of a cool article that I would definitely recommend reading it’s really insightful cool. Let’s move on to ba ba ba ba ba the last thing. Actually that was like five trends that we just talked about the last thing, which I think is kind of interesting and we were having some pretty heated debates here at AJ and smart about this is a flat design versus material design.

So there are some designers who are predicting that material design is going to kind of take over flat design. I would be really curious to know what you guys think about that. It’s yeah, it’s basically kind of a debate right now in our office, so yeah I’d like to know what you guys think and then we can kind of tell you what we think. Oh I’ll show you mine. If you show me yours, was that too much.

Maybe it was too much sometimes. I am too much okay, good, so yeah I’ll put this link down here as well, so you can kind of actually learn what the difference is between the two things yeah. Maybe we can just go through really quickly flat design, so yeah entirely opposite of side design, absence of details so flat design, absence of eight details, simplified and faint colors, so think of super simple streamlined material design.

So this is so they call it like semi flat. That’s funny or flat design. 2.0. It’s a little bit more paper. Ask yes, you can see here. So it’s like things, look like almost like a piece of paper, but still in a flat way, so it doesn’t have that real look either and people are thinking that that’s actually going to be taking over a little bit more than flat design coming in 2019. So we’ll see we’ll see, you’ll be interesting good, and the last thing that I want to talk about before I let you guys go is one of our design leads here.

At AJ and smart Tim Hoffer wrote an article in 2009 19, what in 2016 that, I think is just super relevant. He just was talking about like design trend reports and how it’s kind of useless and read a bunch of reports and look into these kinds of things, because you can never really tell like he says here determining the trends of next year is like reading a reading. Tea leaves it’s pretending to speculate about what might matter soon, but it’s always based on what the authors already know about them now, which I think is just very insightful.

Thank you Tim. It’s very true. I mean there could be a new technology that just jumps up in the next few months and that will just change everything so we’ll see. But I think that that is really yeah just kind of interesting to remember. Like I’ve just told you a bunch of things that I found across the internet, it might mean nothing, it might mean something, but I like to be informed, so I think it’s important.

You know to just be informed about these things, so that was my first ever trend report coming from AJ and smart Brittney reporting from aging and smart on the trends for 2019. If you like, this kind of article, definitely give it a like, if you would like to subscribe, that would be even better. I have to say no, not even better. It would be just as good, so thanks so much for listening. I hope that you enjoy this.

I hope you learned something I’d love to know what you think is trending what you think in 2019 is going to be really cool, and it’s going to you know, take the design world by storm so pop those down in the comments, and we can have to Start a little discussion, yeah thanks, so much for listening have a great day bye guys. My name is Brittany. Bering, and this is my digital trends report. You know my name.

This is Brittany, bowring reporting. I think I actually at one point in my life as a child did want to be a reporter. This is Brittany bowring, and this is the design report.


 

Categories
Online Marketing

Andrea Zoellner: Copywriting for Better UX

My name is Andrea and today I’ll be presenting copywriting tips for better UX, and I just wanted to thank the organizers of work camp Toronto for inviting me to present here I’m from Montreal so not too far, but I do organize the word camp in Montreal.

So I know just how much work goes into these events and so kudos to them and also thanks to our sponsors. I work for spectrum, so I’m a sponsor and the speaker here, which is kind of fun. But let’s move on to why you’re here, which is to hear about copywriting um, so my name is Andrea and I studied journalism at Concordia in Montreal. But I worked in tech for about four years and I’m also the chief content creator at SiteGround and that’s my twitter handle.

If you want to tweet out things, follow me I’ll, be also tweeting out these slides right after the talk, so you can get them. So in the four years that I worked in content creation and in tech, of course, I’ve learned a lot of things about internet behavior and about how people engage with content and what makes for good web content and all of these tips and tricks about how to Improve that so that people are really getting the most from the time that they spend on your website and the content that they read.

But I would say that what gives me the most credibility in giving this talk on excessive bug and UX and copywriting is just how much time I spend online every day. I think I’m one of those people that always has my phone. I always have a device in my hand, I’m always looking at multiple screens and I’m just spending so much time on the internet, whether it’s consuming content shopping, engaging with people on social media and just that exposure to it.

I’ve seen a lot of good things and a lot of bad things about how people build their websites and about how people write, content and develop and design their interfaces. So I wanted to share with you today some of the good some of the bad. Some of the ugly, but mostly how you can learn to improve the that your website performs by changing the little pieces of text that are all throughout your website.

But before we get to the the meat of the content and what we’re really going to be talking about, I wanted to highlight an experience that I’ve had recently that sort of explains why we need to be making these decisions and why these decisions are going to Be made for us and why we need to be really careful about the decisions we made when designing UX interfaces for our users, so everyone has taken an elevator before correct.

I mean it’s a pretty straightforward experience. You’re staying in suite 601 you get on your elevator. You press 6 and then you quickly close the closed door button, so no one else gets on the elevator after you all right. You want to be on them, but what about that button that takes you down to the ground floor? What is that button like? What’s the label on it, and so in the past couple weeks I’ve been in like Boston, Seattle, Montreal Toronto, New York and I sort of like wanted to take a look at all the different types of buttons that you can see for the ground floor.

So, like 0 1 1 with a star s for street level, which is like weird to me, a G and RC, which is an abbreviation in French for for the ground floor. So I would say that you know in a lot of cases, you expect to have some standardization in a lot of cases you you know that is really good to have. You know a really set determine rule for the way we design things, but in real life. That’s not always the case, you know we have these discrepancies, we have this diversity of design decisions and it’s the same and web development, and I would say that it’s also the same and when we use our microcopy.

So microcopy is all these little bits of text that are throughout your website that seem really simple and almost stupid and are often built into templates. So you don’t even think about them, but you can edit these, and these are things that you can use to work to your advantage, so that your websites, cohesive and so really and it does what you want it to do so, I’m I’ve developed this talk and Divided into three different points, and so my three points here to help you improve those little bits of text that are throughout your website are to think big to perfect the small to design with empathy and to keep it simple.

So the first one they picture thinking a couple of years ago. I gave a talk in word, camp, Kansas City, and it was all about content audits and improving the content on your website. It was more geared towards larger organizations and agencies, because that’s sort of what the crowd was there, but what the main takeaway was that content doesn’t exist in a silo. It cuts across every part of your organization or part of your business.

And so it’s not something that you can just design and develop on its own. It really has to work with everything else that you’re doing, whether it’s your who, who your audience is how you’re targeting them, what your product does contents really going to get into all of that, and it has to support that. So that’s why content writers have a pretty interesting role in a company because they’re working with the developers or they’re working with the stakeholders they’re the ones who are going to be telling the story of what your company, your organization, or even just your personal brand? What it is that you do and they need to work with everyone, and so that’s why developing a big picture so that every kind everyone can be on the same page is an important part of a content strategy for your site, and it also impacts your microcopy.

So, like I would say you just zoom out, you know, even if you’re talking about what kind of label you’re going to put in your checkout cart, it all starts with who your company is. Who are you what and – and you know I know in this room – we’re talking a lot of people that just have one website, some people, work for organizations or hospitals, schools that work in agencies, but so taking us as more of like a general understanding of brand.

But you need to determine things like what are your company’s mission? What do you want people to feel about your brand? If you could picture your brand as a person? How would the act and sound, and so that’s something that is really interesting to think about, because the way that you interact with the website can seem really robotic, but it doesn’t have to be. You can develop a tone of voice where it feels like you’re, interacting with a human, and it puts forward like the human aspect of what your company is, and that builds trust.

Because when someone feels like they’re interacting with a real individual, then you can get them to really listen to you. And so I always encourage people who are working on a project that the about their brand to think about what they’re trying to convey and to come up with a North Star of who that person is or who that brand is and that helps. You then determine a tone of voice, and it helps you also to make these decisions so that it fits into your tone of voice and your branding guidelines, because what I like to say is: there’s no accidental copy or, I hope, there’s no accidental copy.

I know that we’re all super busy, so the idea of going in and editing every single thing that’s on our website might seem impossible. A lot of us wear multiple hats, so you may be the copywriter and the designer you may be the owner, and you may be doing all of this yourself. But if you have the time to go in, it’s really nice to make sure that every single thing is intentional on your website, so not to have any accidental coffee, but to have really things that you’ve chosen and so part of that is asking yourself questions who’s.

My audience: what’s the purpose of this piece of content or coffee and doesn’t make sense in a hole as a full throughout my website, does everything work together to meet my to fit into my branding guidelines, and so these are things that you also want to consider Throughout any design project like what do you want people to feel when they interact with you, do they want to feel knowledge? Do you want them to feel knowledgeable, empowered reassured and throughout that? Are you staying true to your branding guidelines that you’ve established as as a team and as a quick example of how you can change really small things, and that really set the tone for your website? I wanted to give you some examples.

So here off screen is a magazine, that’s kind of like a really hip trendy tech magazine. I’ve worked with them before and they’re really awesome, and so for their blog section, they’ve chosen the label blog, it makes sense they’re a magazine, but you’re not going to be reading the articles from their magazine, they’re you’re, going to be reading articles that they’ve published in Between issues to keep their readers interested and engaged, so that’s something that they’ve chosen blog very straightforward.

Then this is a consulting agency that does document management and document creation. So it’s an outsourced document creation agency that that can that’s really like business-oriented, so they’re really focused on providing their services that our article writing and they’ve chosen. The word articles, instead of blog, because it kind of hints it like a more professional environment, like we think of articling in law and journalism and academia, so they’ve chosen articles as a word and then MIT.

So MIT is a school which is also you know. You’d think you’d be very kind of conservative and professional, but they’re trying to show the human side of their of their schools, so they don’t really have blog posts. They have more news about the campus about research. That’s happening, and so it’s not really blog. That’s not really articles, it’s more news updates, so these are three ways that you could pretty much label the the same thing, but sets an expectation of what you’re going to find when you click on that on that label.

So you expect to find news about them, or you expect to find articles that this company has written, or you expect a blog that you can engage with and get content. So these are high level things like small decisions. That really are. Are you know you get from a high level decision on what you want your website to say, and so after you’ve determined all of that, then it’s implementing the rules so being consistent is really what’s going to help your website succeed and help your readers have a Better, a better flow or a better user experience through throughout your website.

So you know, even if you have a simple website, knowing that, if you’re talking about your blog that throughout your website, everything says, follow the blog or if they receive a confirmation email. It says. Thank you for subscribing to our blog that you’re not calling it. You know something different in every little place, and so you know that gets even more complicated if you have membership sites or if you have ecommerce sites or if you are doing like event, management and things like that.

So you know when you’re talking about people that are engaging with your website, are they your user? Are they your member, your subscriber your visitor, your reader? They may be all of those, but you kind of want to narrow in on one label that you’re going to give them. If people are engaging with your website by signing up, you know, are they subscribing? Are they purchasing tickets? Are they joining something or RSVP’ing? You want to make those decisions from day one so that when you build your website, you’re continuing to use the same label and you’re being consistent, I know I’ve seen I online.

You see a lot of like basket. Bag, cart, shopping, cart, there’s a lot of different ways that you can label that, and so it’s making these decisions from the get-go and being able to implement them throughout your design process is really going to allow your website visitors to understand where you’re going and feel Like they’re supported in the actions that they do on your website, if you’ve worked in UX at all, you know the idea of a flow, so a flow is basically like if you’re engaging with the screen.

What did you see before? What are you going to see after? Where are you going on this journey? Where do the options? Where is it going to branch out, and so one of the experiences that one of the things that helps when you’re designing, even just as a copy Content writer, is to put yourself in the shoes of your website visitor and going through these flows yourself? And so this is a really interesting exercise, but it’s also a little bit tedious.

So my my recommendation for flows is to just do like Excel spreadsheets and to track what you’re doing on your website. So if you start on one screen, you let’s say your experience starts with Facebook, so maybe you’re very active on Facebook, but you want to get people to come to your website. What is it that people are going to be engaging with on Facebook? What are they going to click on to get to your website? That’s already one action.

It’s one part of the flow once they get to your website. What are they going to do on their website? Do you want them to read your blog posts? Do you want them to subscribe after? What is that experience like? Is it successful? Are you getting them to subscribe and to to do the actions that you want? Where are they getting lost? You know, maybe you want them to subscribe, but the subscribe button is on a different page and it’s not popping up when they’re reading your blog posts.

All of these flows are things that you really want to walk through yourself, so that you can put yourself in the shoes of your website visitors and see where there might be gaps, wait, see where there may be missed opportunities. Maybe you know you’re reading through a piece of content, and this is the perfect time to highlight that you have an event coming up, and so these are things that you want to.

You really can only see if you go through your website again and again and start tracking these flows, and that’s where you can also see where your words can make a difference. So if you’re going through these flows – and you see missed opportunities, it could just mean editing that text, so it’s a little more powerful or that it actually like conveys something that that is like points to an action.

It could mean that you’re confusing your users, because you’ve started to use different language in different spots, and those are things that you can start to highlight at this point in the process. You also have options like a lot of the time. It’s a choose-your-own-adventure kind of experience when people are going through your website and so to see where they may branch off it’s fun to also get people that aren’t familiar with your product or aren’t familiar with your site at all to come in and to start using It and to be like okay: where would you naturally go after this or what’s your inclination or how are you feeling right now and so to have people go through these flows and to express out loud what what they’re experiencing it can be really helpful, and so You may have a really simple website and but have tons of flows and not even know it, for example the Facebook that example I gave, if you have a blog and you want people to sign up or you want them to continue.

Reading more articles on your site, if you have forms and prompts if you have products and if you’re having feature tours, then you definitely know what flows are because you’re getting people to go through your product right there and navigational links and search filters. All of these things are flows that people will use going as they go through your website, and so you want your microcopy to encourage you want it to reassure you, want it to to make people more knowledgeable and certain about what they’re doing and essentially that’s that’s Really the goal is you want to design with empathy, because you want your website visitors to feel good when they’re on your site, you want don’t want them to be confused, you don’t want them to feel like they’re, an idiot.

You want them to feel like they’re. There they’re in the right place and that they know what’s next and that they’re going to be able to come out of there accomplishing what they were hoping for, and so there’s the book that I really like called nicely said. It’s geared primarily towards copywriters. It’s called it’s written by Nicole Fenton and Kate. Keefe relate and I’ll tweet it out after this talk, but there is a chapter about improving flows and they give her a list of questions that you can use when you’re mapping it out.

So what the reader trying to do, what could the reader be feeling? How did the reader get here and what’s happening next and what choices can they make? So this points back to the choose-your-own-adventure, you know, maybe you have too many choices on your site. So if you want to push people into a flow but you’re telling them sign up for my event, subscribe to my blog post, follow me on Facebook.

You know go to our store. Those are a lot of different messages, and you know you may want to focus on a couple of them or you may want to have a hierarchy, because it may end up being a little bit too much in one particular flow and that’s part of putting yourself In their shoes, you know what is happening in this frame. Is it like overloaded or confusing? Does it relate to the frames before and after is it complete? Maybe there’s something missing here and does everything sound like it came from the same place? And so that’s like a final like the last one is definitely a copywriting tip because it points back to the tone of voice the sound like the same person as the previous screen or all of a sudden.

Is it super cold? Did we lose that familiarity, or maybe it’s the opposite? Maybe you know you have a flow, that’s like very corporate and then all of a sudden there’s this joke and you’re like it feels out of place. These are not bad decisions in and of themselves, but they just don’t work together and then you know a lot of it is is feelings. A lot of people underestimate how many decisions are fueled by feelings.

So when you have people on your website and you have them feeling fearful, then you know it’s going to work against you, but you can help and some of the decisions that you can make can really help to undo those feelings of fear. And so a lot of the common ones that you want to think about for people to come on your website is you know if they’re signing up fear of irreversible change, so picking a username, for example, you know when I’m picking a username, I’m part of me.

It’s like okay, how visible is this username? If I pick something stupid, am I stuck with it forever like when I first signed up to Twitter like 10 years ago, I picked a really stupid handle and I was like okay. I can’t change this. I’m going to like this is there’s some element of fear that that keeps you from doing it and so being able to support people and let them know when the changes is reversible or when there’s a little bit of flexibility.

Well, then, to complete the action more quickly and with more confidence, there’s also a fear of data loss. So if any of you, for example, use two-factor authentication, there’s a screen where they say here, your secret codes save these. If you navigate away from this page, they’ll be gone forever, and so, if that’s communicated, then you know it sort of helps, fix that fear of data loss or fear of of doing something and not saving it or if you, like click back, you haven’t saved the Form that you filled out, and so all of these things, I think, can prevent your users from moving safely through your flows and having a good time.

There’s also fear about personal data security. I mean that’s something that we’ve all been really familiar with since, like the European GDP, our and everything it’s like people or care about how the personal information is going to be stored and kept and collected shared used. All of that is information that they probably want. If they’re filling out a very detailed form, so you want to make sure that you give information about that like not just for the legal purposes, but also to help your your visitors feel more secure in what they’re doing and trust you more and, of course, the Fear of getting spammed I’ve filled out a lot of forms recently.

That sort of tell you why they need your email address, what they intend to do with it and at what frequency you can expect a newsletter for example. So you know if it says outright we’re going to email. You weekly, you know it’s kind of sets the tone and gives a little bit more information about what you’re signing up for which is nice. So, through all of these flows, you can use copy to help users get started, encourage them courage them to start.

You know using your website in the way that you intended it. Let users know what to do next so like for the example that there’s lots of things that you could do, whether it’s subscribe or follow you on Facebook and all these things. You can encourage users sort of to do a couple of actions and use words that are more encouraging. In that sense, you can explain new features. I mean a lot of the time we are working on our websites and we’re making them better, and so your users might come back and find something completely different.

But if you use copy to explain it, then it’s a lot more reassuring and if you have slight changes in a familiar context, they’re much more well received. You can also reduce cognitive effort, which is basically like people don’t want to make decisions. I think there’s a lot of decision fatigue, so if you can just buy your coffee, help people to feel confident about the decision that you’re making for them, then they’ll be better off so just by making it easier for them to make decisions like removing any of That friction of having to read and understand things and helps them to have a better experience on your site.

You can also suggest users to take a certain action, so maybe you do have multiple options, but if you can program your website to sort of guess where they’re going, you can then prompt them with some some more targeted action or an action oriented language, and you Can also help users in a moment of failure, and so I’ll talk about that in a little bit. But this is like air screens, for example. So if they do something wrong on your website, you don’t want to reprimand them.

You want to help them, and so just like basic guidelines. If you’re looking at doing some some changes today on your website, what are some things you can look at check for typos, that’s an obvious one. They slip in all the time, so you want to make sure that you’re rereading your stuff, checking it or having someone else, take a look at it so that you have a second pair of eyes, edit for consistency now that you’ve developed this great, like brand tone Of voice, you can go through your screens and evaluate it and think.

Okay does this fit with what we’ve determined as a company as an organization? Does this fit with what we want to be seeing and how we want to be saying it review the order? You know maybe there’s some screens that just don’t make sense in that sequence or someone’s pointed out that it’s feels out of place and you want to narrow the focus. You don’t want to bombard people with too much stuff and timing as well.

You know – maybe it’s just it’s part of the order, but maybe it’s just like there’s a message that comes at the wrong time or a bit too soon, so it ends up creating more fear and confusion than then if it had just been moved a little bit Further, when the user was more knowledgeable, things like that that you can think of sometimes it also just means really small changes like adding headers to your content, adding more buttons or adding like separating text.

Sometimes it can be a really simple solution to to something to a problem like that, and you also want to determine what level of information you want to give, and so that’s like. No one has the perfect answer for this, but basically the sweetspot sets clear expectations while staying out of someone’s way. So you want to give them enough information that they don’t feel like you’re patronizing, but also you don’t want to overwhelm them, and so that’s something that usually goes with testing.

There’s. No there’s no perfect answer and I’ll briefly touch upon accessibility. It’s not my forte! I’m not a developer and I’m not an accessibility specialist, but I know that there are some small things that you can do when you’re editing your micro copy in your website that can help help it be more accessible. Some of that is like using label elements and your buttons and in your content, using precise language, so not not relying on the interface itself to communicate, but actually having the label say something specific, because if you’re thinking about someone who is using a screen reader, for Example, that’s the only bit of information they’re going to be getting so you want to make sure it’s as precise as possible and all microcopy should appear as live text, no images with text, please that doesn’t that doesn’t translate unless you have really good alt tags that Doesn’t translate into a screen reader they’re not going to see the text, that’s in an image so and make sure the tooltip text is accessible.

So if you have pop-ups on your site that give more information on how to navigate you want to make sure those are accessible to so they’re, not they’re, not hidden, and also one tip that I like to do is just to read your content out loud without Looking at the site, because then it gives you an idea of like someone who’s using a screen reader without these visual cues. This is what they’re going to be experiencing.

Is this clear? Is this enough so now that I’ve said a lot of information now, I’m going to contradict myself and say: keep it simple: it’s not that hard right so easy, but it’s true that keeping it simple is a good place to start and to build from, and it Just allows you also to pare down and to get back to the basics and to help you also. It also like will help people who are new to the internet and new to these complex things.

Keeping it simple will help them feel more comfortable, and so, as you know, simply as it is a lot of, it is just rewriting your text so that it’s clear it’s active, it’s precise, like I mentioned before, avoid using jargon and idioms. I think that as a copywriter, I get really excited about puns and play on words, and I want things to be fun and I want things to be funny, but at the end of the day I you know I’m not thinking when I do that.

I’m thinking about myself, I’m not thinking about my my user, I’m not thinking about people that are on my website, who don’t speak English, that well or who don’t understand the industry that well, and so I’m using this jargon that like doesn’t really speak to them at All and so you know, I’ve changed the way that I approach things drastically, because I want to make sure that I’m understood, and that is my main goal.

If you’re not understood. What’s the point, and so I replace ambiguous language, and I focus on one idea – one task at a time: I don’t try and jam it all in. So where do you start when you’re trying to fix these things on your website? You start with your homepage. You start with your menu labels. You start with your checkout. I would say that the best place to start is the number one action that you want people on to do on your site.

So for you I mean the homepage is a big one. You want people to stay on your site, that’s the first one, you don’t want them to leave and then the next thing is. Maybe you have an effect. That’s for one specific event. So then your goal is to sell tickets. So then, you might want to just focus on that as an action, but for these examples, I’ll focus on three things that most sites have and most sites can fix fairly easily.

The first one is forms, so everyone who has a blog probably has a contact form. That’s a very simple one, but as your website becomes more complex, your forms may get more complex and you may have more of them on your site and they may be very diverse, but here’s the basic example of a way that you could change. Small things on your form and that would impact your tone of voice and your success rate so for this example like this one.

This is the standard one that comes built into jetpack and again like when you’re building websites, a lot of the stuff you’re going to be using is plugins templates forms things that come with, like basically pre-written text and it works. So it’s not like our first reflex to go in and change everything, because if it’s working it’s great, but it could be working better. So for this you know a forum, for example, I would add a little bit of intro text at the beginning.

What is this forum about? What are people going to be doing? What what is it related to and some encouraging information like sign up to get my newsletter, because XY said you can also change the way that the label is functions. So, instead of saying name, you could say your name or if you want to be a super friendly, it could be like. What’s your name question mark, you could add placeholder text.

So if there is something that’s a little bit confusing, for example, again, your name seems like a really simple field, but it could be really complicated if you’re talking about like when you booked a plane ticket. It’s very important that you write your name properly because it has to reflect your passport, so these are things that people might get confused and they’re like. Do I put my middle name? Do I not, and so, by building out that label and having first name middle name last name or adding little instructions that say, as it appears on your passport.

These are things that can help your users feel more confident, filling out the form and also avoid mistakes and all the things that can happen if they fill it out wrong and so add. Placeholder text is also an easy way to give people an idea of what that field should contain a formatting to you know if it’s phone numbers and stuff you know if you have a CRM or something where you’re managing a lot of contacts, and you have people’s Phone numbers and all sorts of different formats and stuff you know just fixing your form – might help you save some time as well.

An explanation of why do you need my website? What are you going to do with that, and some helper texts like what what to expect with that field? These are some small ways that you can make your your form like a little bit more friendly, app so again, like always use a label use. Placeholder text highlight required fields, so this is one you know if, if I want to fill out a form super quickly, I want to know what are the fields that I absolutely need to fill out.

So I can move on with my life and which ones are not necessary flag errors. So if someone fills it out wrong, don’t just say error like highlight which question has an error and why make clear buttons and customize the follow-up message. So if I fill out a form – and I get a confirmation email, I kind of expect the confirmation email to reflect what I just did. So if I signed up to someone’s mailing list – and I get an email that says like something completely different – that’s going to be a really bad experience.

I want to make sure that I customize all the triggers that happen after I complete the form to match, with the form content itself. The next one is the checkout, and so there’s a lot of documentation on how to build the perfect ecommerce website. I am NOT a specialist in that by any means, but I know that when you are working on a checkout you’re, basically working against, like fear of loss, people are going to be giving you money.

So you want to be working to help them feel more confident about their purchase and not feel like they’re losing money. You want to me feel like they’re getting value so part of that is alleviating users concerns. You want to be reassuring them like as they’re working through the checkout process. You want to make sure that they know, like almost done almost there you’re going to get your item, it’s going to be so great and if they’re stalled on any of the questions you want to give them all the information right up front.

So they don’t navigate away, for example, return policies. That’s my first question: if I’m not sure about a purchase and like I’ll go through with the purchase. If I know that, there’s a really good return policy so having a link and having that information right up front will avoid people just navigating away and then forgetting about it and never coming back. So these are some things that you can do, so you also want to motivate action.

So as people are moving through the process, you want to encourage them and point them towards completing an action, and you want to turn an empty state into a trigger. So so many sites are building these because I think they’re starting to be built into the platforms themselves. So I know they’re a lot of extensions and WooCommerce that do this. Shopify does a great job of doing it as well. If you have an empty cart or you were about to add something to a cart, the system will know, and it all send you a message that says like your carts empty.

So sad or you have something in your cart, but you haven’t checked out, and so turning these empty states like they call them into an opportunity to push someone to complete the purchase, is something that you can do with writing as well, and that’s it for that’s All I’m going to say about e-commerce websites, error messages, because there are so many error messages possible on a site and I don’t think I’ve ever edited my own error messages until like this year.

I just kind of assumed that if something was broken, the error message that the developer wrote it’s probably going to be sufficient. It’ll work, people will figure it out, but actually error messages are. Some are some of the most frustrating parts of a website when you’re a user you’re like. Where did I go wrong? I just want to sign up for the stupid email list. You know there’s like these things that can cause real frustrations and that leave people with a really negative experience of your site and, unfortunately, negative experiences outweigh positive ones when people think back about about an experience with the brand.

So you want to make sure that you’re helping people along even if they mess up on your site or maybe sometimes it’s your own fault. So you want to make sure that you’re doing it right. So you want to make sure that they match the tone. If your site’s been fairly conservative up until then, you don’t want your error message to be like too funny. It just doesn’t fit and you also want it, but you want to strike a balance and defuse a moment of frustration, so you don’t want to make them more frustrated by blaming them.

You know by sort of sounding patronizing, so you know, for example, this. This is a decent one Network problem. This is what happens when too many people read cat articles at the same time, try again in a little bit sigh okay. So this one is it’s super friendly. It’s not perfect for every website. It’s not going to be a good fit, but it’s just a way to be. Like listen, there’s a problem, no fault of your own.

It’s on us try getting a little bit and then it just kind of has empathy. It’s like sigh. Okay, that’s you know what else you going to do, and so you can work with the different you can work with your developers, for example, go through your site, determine where all these error messages could pop up and focus on the ones where it’s like a crucial Action again stupid example, but if you have an event website and your main action is getting people to buy a ticket for your event, you want to focus on all the places where that can break down throughout the flow, all the places where there can be errors.

You want to make sure that the error message instructs people on how to fix their mistake, what it is that you’re expecting and how they can and like the payoff and what they’ll get when they complete it, so that if basically, I’ve rushed through so much content. But I’m going to leave you with a couple of resources, the book that I mentioned, that I really appreciate it’s mostly geared towards copywriters and content writers, but there’s so much good information on how to make your website as successful as possible.

With with the written word, UX planet great website for all sorts of UX tips, I’m not a UX designer, I’m a journalist and a copywriter. So I rely heavily on experts to inform the decisions that I make and accessible microcopy, because I I really just had one slide on that, but I encourage everyone to check out more accessibility, tips and tricks for your websites so and again I’ll be tweeting these out.

In a second, so thank you so much I’m happy to take any questions. American-Canadian winner, european, it’s absolutely one of the hardest things I go got that everyone. Can you probably don’t people’s attention spans are extremely short, so you’re, absolutely right! That’s a nice thing with Guttenberg too is we have a little bit more control over our content now, and so you know, even if you’re not a developer, you can be building in headers and sections and paragraphs and making it easier for people to retain salient points.

In in one big context, you know one big block of text and you can create your own buttons. So that’s also a nice opportunity to do just that to work with the ever diminishing attention spans of readers and users they put in their credit card information Wow. So again, yeah not not knowing what people are going to do any other questions all right I’ll be around all afternoon. If you want to chat with me, so thanks so much for attending