How UX skills help me as a professional Front End web developer
As a senior web front end developer (FED), I love to code and implement complex UI systems, I enjoy playing with JavaScript, and also I have a deep passion for User Experience (UX) design.
Understanding UX principles is often not required from a front end developer. Occasionally you may notice it on the job description under the “advantages’’ section. However, for most positions, it’s not mandatory. On the other hand, UX designers are required to have some coding and technical skills. They are expected to know enough to communicate with developers and understand technical limitations. In my opinion, it isn’t enough that only one side tries to bridge the gaps.
I strongly believe that knowing basic UX design can give FEDs important skills that will improve any project they are working on. As a result, it will directly influence the target audience and will help users retention.
After I took a full-time course in UX, participated in UX conferences, and read about the subject for many hours, I bring here some examples of how those skills benefit me in my day to day job and turn me into a better front end developer.
Screen design principles
The screen layout is the most important thing you need to understand in order to make better planning of your app.
Side menu that slides from the left or right is a good design in complex systems when there is not enough space for all horizontal tabs at the top menu. It is easier to scan with the eyes from top to bottom instead of left to right, and also easier to scan hierarchy levels in vertical.
Grid is a structure that helps to place elements in the screen. It lowers the cognitive overload and helps users to complete goals in the app. Instead of giving a fixed size to the elements, grid allows to set a position, width and height according to its columns and rows. Usually a grid system is defined by 12 columns (or 16 in some cases) because it makes it easy to divide them for responsive design. The gap between columns is called gutter and it allows the distribution of the elements in a uniform manner. CSS Grid with 12 columns is recommendable when you plan a complex screen. The gutter is set with the grid-gap property.
Tables are always a risk, there are mistakes to avoid that you should be familiar with.
- Avoid horizontal scroll! it requires a click and drag on the scrollbar and research shows that users are too lazy to do that (unlike a vertical scroll that allows to use the mouse wheel). Instead of horizontal scroll it’s more common to convey the information with a popup, a side menu or an expandable row. If you must have a horizontal scroll, implement
onScrollevent that allows the user to use the mouse wheel. - Add the properties
position:sticky; top: 0;to fix the header when scrolling in long tables. - Use ellipsis sentences and allow the user to resize the columns.
The Golden Ratio is a key principle in UX design. It is customary to follow it when partitioning the screen or placing elements because it brings harmony. For example, when you get a screen that is partitioned according to a ratio of 1/3 and 2/3 you shouldn’t use fixed pixels, but rather CSS Flexbox with properties flex:1 and flex:2.
Optimistic UI
Optimistic UI is a super famous technique, also known as Client-side prediction. The key principle is that most of the time when users perform some action that needs to be persistent in a remote server it will succeed. So you shouldn’t wait for a response to show the result. If the call will fail, show that something went wrong.
In this way your product will feel really fast which will make users happy and increase retention. According to the Rail model, you should show response within 100 ms, so users will feel like the interactions are instantaneous.
The most famous example is the like button in Facebook, it will show your like even when there is no connection to the server. On Instagram your photos are uploaded much more early than it looks. The second you choose a photo they start to upload without waiting for the publish click.
The implementation is easy, usually these are the steps:
In an Optimistic UI, move the render new UI before the request is called:
The fold line
The fold line is the line at which the scroll is starting. Above the fold is a term used to describe anything that is visible immediately without any scrolling. When scrolling the user consumes less content because the page is in motion. Also, studies have shown that 80% of the time users are above the fold and 20% of the time below it, regardless of how long the page is.
That is why you, as a FED, should pay attention that important elements, like CTA (Call To Actions) buttons, will stay above the fold.
To encourage scrolling, the fold line should cut elements, like an image (But not the important ones!). This is something to be aware of especially when you are planning responsive layouts.
localStorage and sessionStorage
As a front end developer you should be familiar with localStorage and sessionStorage, the most common technique to store data in the browser in key/value pairs. But, how can they help improve UX? you can store the custom data and the user steps to prevent the user from starting all over again. Utilize it efficiently, and your users will come back!
Consider a dashboard layout that the user customized according to his preferences, you can save the dashboard in the localStorage for the next visit, and the dashboard will appear immediately! (it’s related to the Optimistic UI topic in the previous section) it’s important to mention that this is not a substitute to remote DB.
Fast navigation is a basic UX principle which states that the user should get to anywhere from anywhere by up to 3 clicks. There are many models to achieve this, one example is Breadcrumbs. Breadcrumbs is a navigation model that can be implemented easily with sessionStorage by saving each page the user visited. You can also save data from the user’s journey, for example search terms the user had used to navigate to some result.
Interaction is not graphic design
UX designer is still considered as a new profession. Most UX designers came from graphic and print design. Some companies still haven’t progressed to understand that UI designer and UX designer have different responsibilities and often one person is doing both.
Digital design is much different from graphic design and it’s not enough to get wireframes that look good, but miss the interaction with the user. The pages today are more than just written content, they are very dynamic.
Indications are one of the most basic UX principles — to give feedback. The user needs to know that something happened or is going to happen. You need to guide the user to perform some action. If you get wireframes without dynamic states like pointer states (hover, active and disabled) you should request for it.
Besides pointer states, you can give much more feedback like the loading state in asynchronous action, the progress bar in uploading situations, drop areas, input focus, etc.
On a final note
You don’t need to spend all your time to learn UX, there is endless information and ever-changing trends to learn. It’s enough to read about the basic concepts (like the ones I brought here) to get some intuition about why your wireframes look the way they are. It will be beneficial for you to bring this knowledge when you talk, ask or suggest with your designer.
Just remember the number one rule in UX design — the user is the most important, and you are not the user.
