If you’re reading this, you’re most likely a fellow front end developer. We all became developers because we tend to gravitate towards objective, structured & logical problems with real, tangible solutions. We have a reputation of maybe not being the world’s greatest designers, but I believe that to be rather unfair. You could argue that nobody uses the web more than us. Whether it be researching the solution to a complex coding problem, catching up on our hobbies, or just shopping for day-to-day items.
By having every part of our world so immersed in the digital world, we inadvertently become experts in the domain.
I will never forget the first time I worked with a professional UX designer. They made the comment to me that I have an incredible eye for UX design, and probed if I’d had any pro training or certification. I haven’t, but I joked that I was “raised by the internet”. I was a child in the late 90s who was always on GeoCities, creating pages for whatever my obsession of the week was. Then I matured into a teenager where I was editing the CSS of my myspace page to do so many cool things that nobody else’s page could do.
By being terminally online, I picked up on a lot of stuff that is foundational to being a good UX designer, and take it for granted as common sense. I think most front end developers are similar, and it’s time that we embraced that.
After years of contributing to work projects as what I refer to as “UX consultant”, I decided to enroll in an actual UX design course, to get some professional training under my belt to lean on, because I don’t know how far “being a child of the internet” is going to take me.
Here are the key UX concepts I learned:
- Design for Humans
- Dark Patterns
- Content is King
- Don’t Make Me Think
- Optimize for Speed
- Make Content Scannable
- Test Early, Test Often
1. Design for Humans
The first thing you need to understand when designing a new page or experience, is that you are designing for humans. This may seem obvious, but it is important to realize. Understanding there is a human being on the other side of the screen means you understand that:
We make emotional decisions
Our brains are wired to act and make decisions based off of emotions. Fear helped us evolve to the apex predators we are today, and today fear still plays an important role in decision making (fear of Missing out, fear of losing money, fear of breaking). It’s important to understand this, but not to rely on this, or else you might wander into Dark Pattern territory.
We make decisions unconsciously
Our brain has two systems of thinking. System 1 is very fast, and almost automatic. If I asked you what 2+2 is, you will most likely answer “4” immediately. You didn’t think, count or have to visualize anything. You just know that the answer is 4.
The other system, system 2, is slow & deliberate. It takes effort. It makes us tired. If I asked you what 456 divided by 94 is. You would not be able to reply with an answer as immediately as you could before. You would most likely have to get a pen and paper, and see if you remember how to do long division.
We’re lazy
Our brain wants to use system 1. It will do anything it can to avoid using system 2, including just getting the heck away from the problem altogether. I think you can see where this knowledge will come in handy when related to UX.
2. Avoid Dark Patterns
Even if you haven’t heard the term, I can guarantee you’re at least familiar with dark patterns. Dark patterns are UI elements that are specifically crafted to trick users into actions they might not otherwise do. These are easy to avoid so long as you actually think of your user’s experience.
Think of how you would feel when buying a car and you recognize your salesperson trying to pull a fast one on you. You would immediately be put-off and jeopardize the chance of you going through with the sale. The same applies to you and your software or web experience. If user’s catch on that you are trying to trick them, you are going to hurt not only the current conversion goal, but your business as a whole.
Sure, these dark patterns might give you an immediate lift in conversion and could argue that they “work”, but not at a cost. Consumers are generally cynical, smart and spoiled for choice. They can and will go elsewhere, and all it takes is one disgruntled Google review to potentially sway hundreds of future potential customers to goto a competitor.
Not only are dark patterns unethical, but they’re ultimately horrible for business.
3. Content is King
If you’re familiar with SEO, you’ve heard this phrase countless times. But when it comes to UX, content is your biggest seller. After all, what is a beautiful wireframe without a beautiful product or idea to sell?
When you think of UX, you probably think buttons, wireframes, and signup forms. You’re not wrong, but UX goes beyond that. In order to be a good UX designer you need to know how to put yourself in your customer’s shoes. What are reasons they might not convert? You need to identify and address these objections and risks your customers might have to ease their mind that they’re making the right choice.
To do this, focus on benefits before you dive into features. Sure, this model car might be bigger, but what does that do for the customer? Tell them that they can fit more supplies, or accommodate large family trips easier. Sell them on the idea of why your features help them before you start selling the feature itself.
Make any risks that come with your product worth taking. Is your product higher priced than most competitors? There’s not a lot you can do about that, the price is the price. But what you can do is tell the potential customer why your product is more expensive. Sell them on the idea that your product is higher quality, or lasts longer, or offers more peace of mind.
4. Don’t Make Me Think!
Perhaps the most famous quote in the UX universe, but also the most accurate. Anyone using your software or website should never have to think about what they expect when they interact. It should be abundantly clear at all times what any button, widget or scroll will do when users engage. If a customer has to stop for even a second to think “Wait, what is this button going to do?”, then you’ve already lost.
Humans are lazy, and we want to let our brains run on autopilot. Use familiar designs when designing for higher conversion. The last thing UX designers want to do is increase a user’s cognitive load. Less is more when it comes to impactful UX. Let the content speak for itself and make use of good visual design to make it obvious to users where you want their attention to go.
5. Optimize for Speed
For us developers, this should be the most relatable point in this list. Pages that load slow will not convert well, and that is just a fact. You could have the world’s greatest page from a UX perspective, but if it takes 15 seconds to load, then it is not going to matter. It is just a fact that page performance has a direct impact on conversion. For every 2 seconds your page takes to load, conversions drop by 4%.
For quick-hits to increase your load speed, take a look at the following areas:
Speed up imagery
- Use JPEGs or other web optimized filetypes to reduce page size.
- Use a CDN
- Host images on a CDN so that correct sizes are being delivered intelligently. No need to load a 2600px wide image to a customer visiting from an iPhone 8.
Optimize CSS and JS
This a topic for an entirely separate post, but check out this blog about optimizing your CSS and JS for faster load speeds.
Watch out for your use of web fonts
Marketers and designers love pretty fonts, but they take a little bit to load. Make sure that you at least have a ‘default’ web font to load in case the desired font is taking a bit to load. The faster the content paints on the screen, the better the user experience.
6. Make Content Scannable
Most users who land on your page are not going to read every word. And even if they did, you want to make sure everything is easy to read and digest. In order to do this, you need to make sure you create a content hierarchy. You can do this by chunking your content up
- Title (Must have)
- Summary
- Headings
- Sub-Headings
- Section Copy (Nice to know)
Using the list above as reference, the top item, “Title”, needs to be the biggest and easiest to read part of any content-chunk. Users should immediately understand what the section is about and be able to decide if they want to learn more instantly. As users scan down, the visual importance of the copy should reduce. A summary can be larger than your normal copy font-size, but still nowhere near the title. Crafting your content in such a way will make it easy for users to scroll and stop where something might catch their interest, then, as you “catch” users, you can feed them the details without overwhelming their cognitive load.
It’s also important to note that humans read in an “F” shaped pattern. Meaning, the first line we read, we’ll most likely read almost all the way. Then, we might skip a line or two, read half of the middle, then just scan down the left hand side until the next thing grabs our attention. Knowing this will help you when you are creating your content hierarchy.
7. Test Early, Test Often
Last but certainly not least, we are going to talk about testing. Testing is the most important part of the design process. As developers, you may only be familiar with A/B testing, but there is actually testing the can be done before anything is even built or deployed.
Types of Design Testing
The Five Second Test
Create a wireframe, show it to a co-worker, friend or shareholder for only 5 seconds. Ask the user what they thought the main point of the page was. A lot can be learned here. Your goal is to make sure that the main point of the page is easily picked up on by anyone within 5 seconds of seeing the page.
First Click Test
Create a wireframe, and ask user’s where they would click in order to complete a certain task. For example, if you created a wireframe for a Product Display Page, ask a user to click where they might go if they wanted to add it to their wishlist. Obviously, this should help you as the designer understand where users are looking for certain elements and if your design does a good job of being intuitive.
Eye Trackers
Ideally, your main CTAs and conversion goals should be where people’s eyes are naturally looking. You may think that is an impossible thing to keep track of but there are actually a good amount of free tools out there that can help simulate an actual eye-tracking test using AI.
As a front end web developer - UX has always been of interest to me. I love learning more about it, and the psychology of why people behave the way they do online. I hope this article inspires other developers to learn more about UX, because none of it is really too complex and pretty basic when it all boils down. Us developers need to give ourselves more credit when it comes to design because I think a lot of these things come naturally to use, as everyday users of technology.
I hope you enjoyed my first post!
Top comments (0)