UX/UI For The Modern Web Developer

11 min readJul 19, 2018

Sometimes we’re going to get approached by a family member or a friend to build their website. Certainly we can do it. As web developers we can build anything! But can we do so mindfully with the user’s best interests at heart? Right now, the answer may be no because you may not know what you don’t know in terms of UX/UI design practices but by the end of this post, I can guarantee you’ll be a more wholesome developer whose every line of code will have your user’s best interests at heart.

Definitions!

It’s important that we narrow down what UX and UI are respectively so that we can know how they are different and how they fit together.

UX stands for User Experience. It focuses on making sure the user’s interaction with a product is fluid through statistically proven methods. It’s a very analytical field that micromanages how and why a user reacts to a product. UX feeds UI and one cannot thrive without the other.

UI stands for User Interface. This is where the product comes to fruition after taking the UX Designer’s research into account. UI Designers design the app or website and collaborate with Front-End, iOS, or Android developers to add interactivity and animations through HTML, CSS and Javascript. UI Designers usually don’t know how to code but it’s becoming more common for them to know at least HTML and CSS.

Large companies may have separate roles for UX and UI but it is very common to see the role combined into one.

Here at the Flatiron School, we learn vanilla Javascript and then React and Redux. Right now we get to design our own Front-Ends but once we get employed, our UI will most likely come from a designer.

If you’re working on a personal project with complete freedom to design your UI any way you want, you probably already do a lot of the things UX/UI designers do as a part of their job everyday.

How do we already overlap with UX/UI Design as web developers?

The similarities lie in those first steps on the road to production.

We all have to do a bit of brainstorming before we write a line of code. For the Javascript developers out there, you probably run NPM install and then brainstorm. For me, I eat pastries while brainstorming.

After brainstorming, we take the time to do a task analysis which is where we list all of the ways the user can interact with our site or app. Can they log in? Upload pictures? Purchase an item? In UX/UI Design task analyses go more in depth by exploring the cultural and social characteristics a user may bring to a task, how doing their task may be influenced by their physical environment and how their previous knowledge may influence the way in which they complete their task.

After we figure out how we want the user to interact with our app, we map out where those interactions will take place. This maybe a diagram on a whiteboard for you but this is called a sitemap in UX/UI and as you can see it shows the hierarchy of our app.

Now that we’ve hashed out the overlap between front-end web development and UX/UI design, we can explore the differences and how those differences can make us stronger developers. UX/UI is ginormous so we won’t be able to cover everything but I’ve highlighted a few key differences that I believe will help developers in the long run.

The differences that I’m going to highlight involve the ways in which we plan and test our app and a deeper dive into the user’s mindset.

Planning With the Wireframe

Wireframes are the backbone of any web design. They provide you with a rough sketch of what you want your site to look like. Usually drawn on a whiteboard or with an online tool like Balsamiq, they can save you a lot of time down the road. This stage doesn’t include visualizing any functionality. It’s just a simple layout of your page.

Narrative Design

This is the user experience principle of your site having a beginning, middle and end. This is where you set some time to think about your site’s pacing. Some questions to ask yourself during this process:

What’s the order in which I want to present information to the user?

If my user leaves my site with one or two pieces of information, what would these pieces be?

Hierarchy of information flow courtesy of Jakub Nielsen via Christopher Murphy

Taking a moment to think about your narrative will ensure you don’t deliver too little or too much information at once.

Crystal Clarity

Clarity is key. At this point we’ve thought about our narrative and how we want information to flow on our site. What we don’t want is for our interface to be cluttered with information or interactions to confuse our user. Joshua Porter said it perfectly:

“ To be effective using an interface you’ve designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it.”

Our user shouldn’t click on a down arrow and be taken to the next page. A button should be a button and an ‘x’ icon should behave as you’d expect it to. While it would be fun to create a website that completely messes with a user, they definitely would not have a great experience.

Usability Testing

Usability testing is when we get a user, (that isn’t yourself), to test your app. You may be asking why this isn’t in the overlap section because perhaps you ask for feedback all the time. Usability testing isn’t about seeing if someone who isn’t you can manage to break your app, it’s about gaining perspective of your app from another human. We can use usability tests to test our assumptions about what we built, debug unexpected problems, determine superfluous features and gain insight for future projects. Conducting a usability test takes a bit of planning and coordination between you and the test subjects but it will ensure your design is user friendly.

First, you need to narrow down some goals for your test. Maybe you just implemented a new feature and need some feedback. Maybe you switched up the layout on your homepage and you need to know if key information is still apparent on the page. Decide what you want to test and try not to exceed 90 minutes because any more than that would be a bit hard on the person that’s testing you app.

Who do we test?

You may think you can test just anyone that knows how to use a computer or phone but it makes more sense to test someone who is familiar with the type of content on your app. If I built an app that trades cryptocurrency, I would test my app on people who have accounts on other cryptocurrency trading apps.

How will we test them?

A common practice is to use the think-aloud protocol to test the comprehension of your app. Considered the #1 usability tool by Jakob Nielsen, (a UX guru), think-aloud protocol is where you have the user think aloud while using your app while you are taking notes based on what they say while attempting to complete tasks. Using this protocol eliminates the chance of cognitive bias which may involve you leading the user in any way during the test. This is not in the case for a user who asks a lot of clarifying questions in which case you will most likely be leading the user and can scrap those parts of the test.

After solidifying who and how you’re going to test you now need to set up the logistical planning of the actual test. You need to decide which metrics you want to capture from your test. Some common metrics include:

Determine how long a user takes to complete a certain task. How long does it take for a user to login or logout? How long does it take for a user to navigate to their account settings?

Count the number of times the user deviates from what is needed to complete the task. If I asked a user to buy a pair of socks on my app, based on the way I’ve set up my app, I wouldn’t expect them to need to search for socks if I attempted to highlight socks when first viewing the page. This means I need to re-evaluate the way I placed the information on the page.

Give the user specific data in order to complete a task on your app. A task is considered complete when the user is able to determine that they’ve solved the task. UX/UI designers think of task completion in terms of effectiveness which is calculated using the above equation. Naturally, we want to aim for a completion rate of 100% but the average completion rate is actually 78%.

Ask the user to evaluate how difficult the task was for them. This could be with a simple questionnaire using Single Ease Questions or SEQs for short. I would also add an optional feedback section so the user can suggest changes.

A subset of usability testing is accessibility testing and it tests for exactly what you’d think — whether or not your site takes people’s disabilities into account.

Accessibility testing

Accessibility testing is important because we as the next generation of web developers can hold the internet accountable for being accessible for everyone. Videos on your website should have subtitles, fonts should be large enough so that people who can’t see well can see them. If your website has a strobe light effect, include a warning or don’t use it at all. If your site targets a specific gender, maybe don’t. Use gender neutral pronouns instead. It’s easier to make your app accessible from the beginning stages of building your app rather than waiting until it’s in production. If you’re not sure where to start, the World Wide Web Consortium or W3C has a set of accessibility guidelines for making the Web more accessible.

Heuristic Analysis

One of my favorite parts of UX/UI is the heuristic analysis. A heuristic process is one that allows a person to discover something for themselves. One of the most common heuristics is “trial and error”. If you don’t know how to solve a problem, just try what you think will work and if it doesn’t move on to the next hypothesis. Our friend Jakob Nielsen came up with a specific evaluation that measures the usability, efficiency and effectiveness of an interface based on 10 usability heuristics. I’ll focus on 6 of them.

Visibility of System Status

Does my app provide users feedback about the system’s status? This includes providing a loading bar if your page takes a long time to load.

User Control and Freedom

Can your user undo actions, edit their profile and logout? These seem very basic but you’d be surprised what you forget when you are the one building an entire application.

Consistency and Standards

Are the interactions across my app consistent? Are my buttons uniform? Am I using the same terminology across the app? Am I using a cup instead of a screw icon to represent where a user can see their settings? We need to use things that people are familiar with and not try to reinvent web design where we don’t need to.

Error Prevention

Do I confirm with the user before any major interactions like deleting an account, buying $150 worth of beef jerky, updating their email address etc. This could make up for major headaches down the road.

Aesthetic and Minimalist Design

Cluttered apps may not get the message that you are trying to convey across. Ask yourself: Do I need this element right here, right now or can it go elsewhere?

Help Users Recognize, Diagnose and Recover From Errors

Does my app help users through their errors? The error messages displayed should offer a potential solution and if that error doesn’t help them, direct them to a source where they can get help like customer service, IT or your personal email address because no one likes a broken website.

This was a very brief look into the world of UX/UI design and I encourage you to create the possibility of becoming the super developer: one that is a genius developer in whatever stack warms your heart but also one that knows about user experience and interface design.

TL;DR

Sketch out how you want your website to look. No functionality, just lines on a page.
Think about how you want to present information to your user. Maybe it’s in chunks or one thing at a time. It depends on your content or perhaps what your client wants.
NO CLUTTER. We don’t want to overwhelm our users with information.
On the other hand, we don’t want to underwhelm our users with too little information.
Conduct a usability test to ensure your app is user friendly.
Visit W3C’s Accessibility Guidelines to see if your website is accessible.

Here’s some additional reading that helped me learn about UX/UI: