10 Essential UI/UX/FE Interview Questions *

Progressive advancement (also known as “mobile first”) is an approach to designing responsive software that prioritizes smaller devices—which are more restrictive in nature—resulting in more straightforward designs. Then, as we design up the chain to larger devices, we can begin to take advantage of more space and interaction options such as tooltips on hover.

The thought behind this approach is that we can nail down our key features first in the most accessible way possible, moving onto the “nice to haves” that come with larger screens second.

On the other hand, graceful degradation is an approach that ensures key features of a website continue to work on smaller and older devices it wasn’t originally designed for.

SOLID is an acronym for five object-oriented programming (OOP) principles. Primarily developed by Robert C. Martin and Barbara Liskov, the principals are intended to make code more maintainable, reusable, flexible, and easy to understand. These well-known principals are as follows:

1. Single Responsibility Principle: A class should have no more than one responsibility.
2. Open-closed Principle: A software entity should be open for extension, but closed to modification.
3. Liskov Substitution Principle: Objects shall be replaceable with instances of subtypes without breaking the application.
4. Interface Segregation Principle: Many client-specific interfaces are better than one general-purpose interface.
5. Dependency Inversion Principle: Depend on abstractions, not concretions.

Not every shop uses OOP—some will use functional programming (FP) instead, or some other paradigm. But for OOP-oriented projects, the above principles are considered by many to be good practice. So regardless of whether the candidate can answer this question, you should take the time to check the candidate’s (OOP-specific) work to see if it embodies these principles.

If the scrolling on a website is stuttery because the browser is painting too frequently, we can try the following:

1. Wrap and debounce JavaScript animations and input handlers in requestAnimationFrame(). This tells the browser that we wish to perform an animation and requests that the browser calls a function to update an animation before the next repaint. Another added benefit is that animations in inactive browser tabs will pause, freeing up needed resources.
2. Use less expensive CSS styles. Styles such as box-shadow and border-radius are costly to calculate. By reducing their use, we can improve our site’s scrolling performance.
3. Reduce the complexity of our CSS selectors. Over half the time used to calculate our computed styles is devoted to selector matching. By simplifying our CSS selector specificity, we can gain a performance boost.
4. Reduce or improve element layout changes. When a browser needs to change the width or height of an element, it needs to calculate if any other entities are affected. This has the potential to create a cascading effect that can be expensive.

There is less of a difference and more of an overlap between the two. Like UX design, IxD is heavily user-oriented.

But IxD specifically focuses on how a digital product communicates with a user during the (many) different possible types of interactions there may be.

Whenever the user interacts with the product, we can use movement, color, sound, imagery, and tactile feedback to convey context and elicit emotion. This can improve the experience a user has with our product.

Because this school of thought is focused so heavily on human perception, successful IxD should always result in a product that feels intuitive and natural.

Sometimes referred to as split testing, an A/B test is where you serve multiple variations of software to your users and track how successful one design or feature is over another. Through the process of elimination, a company can select (or continue to A/B test sub-variants of) the highest-performing design.

This lowers the risk of rolling out a new interface or feature, while ensuring the highest possible rate of user adoption.

A FOUC happens when the HTML for a site has loaded, but the styles have not, resulting in a style-less mess for a short duration of time.

Some developers might try to hide the page until the site has fully loaded. But such techniques usually rely on JavaScript, which means that if the user has JavaScript disabled, they will never see the page.

The most accessible method then is to simply include the styles of your site directly in the section of the document as opposed to linking to them. The tradeoff is the overall HTML load time will increase.

Alternatively, if you wanted to get creative, you could use a snippet of inline styles in the that would hide the page, with overriding inline styles at the bottom of the page. This would remove the need for JavaScript, while eliminating the FOUC and keeping the above-the-fold loading time to a minimum.

It’s easy to list a bunch of different products and services that UX designers might use; it’s much harder to explain why they chose to adopt such a tool. What we want to hear from the candidate is an understanding of the tools available and clear reasoning for choosing them. Or to put it another way, knowing is not understanding.

Even if you don’t have the most significant understanding of the UX tooling landscape, the candidate’s answer can give us insight about their current skill level.

Here are examples of things we want to hear:

1. We used X at my previous place of work and because of its implementation we were successfully able to hit our quarterly key performance indicator (KPI) goals.
2. I’ve tried both X and Y, and I found X was more robust in visualizing data and also allowed for easier collaboration between team members.
3. I found out about X during an online UX design course I purchased.

Here are examples of things we do not want to hear and could be clues that the candidate hasn’t taken the time to explore what’s available:

1. I like X because it’s what I’m used to.
2. I use X because it’s what the majority of other UX designers use.

Ever since our online experiences have been moving to smaller devices, our font libraries have been slowly changing. Traditional highly legible sans-serif fonts like Helvetica and Arial are less readable at smaller sizes, and so the need arose for new fonts specifically designed for smaller screens. Google developed “Roboto;” Apple, “San Francisco;” and Microsoft, “Segoe UI” for this reason.

By using these system-supplied fonts in our websites and applications:

1. We save the user from having to download an external font from a CDN, resulting in slightly faster loading times and no flashing from font changes.
2. Because the font in use will be the operating system’s default font, our application or website will appear more like a native app.
3. If our designs require it, we can render tiny text without losing legibility.

Before HTML5, the img tag only allowed us to specify a single source image.

The problem that arose came with the introduction of smaller devices and the adoption of responsive web design. As a general rule, we want to reduce load times and serve content to the user only when it’s needed: Having a desktop-sized header image loading on small handheld devices is unnecessary and costly.

The srcset and sizes attributes solve this problem by allowing us to set an array of images that will load dynamically based the media queries we set within the sizes attribute.

The common approach of block-element modification (BEM) aims at abstracting styles into reusable class names for component level styling. Unlike BEM, utility-first CSS is an approach to building interfaces where CSS classes generally contain a single style, are named based on that style, and little abstraction takes place.

Some advantages include:

1. Due to less abstraction, stylesheets are easier to read and maintain.
2. Because classes are unassuming, we are not locked into predefined styles, allowing us to build more unique interfaces without adding additional class declarations.
3. Unassuming class names can also help to streamline the process of onboarding new employees and/or improve the workflow between current devs and non-technical employees.
4. In the event that you need to create an abstraction, thanks to the low-level nature of the classes, there’s less of a chance that making a style change will break other parts of the site.