15 Essential Mobile App Design Interview Questions *

Native or responsive is usually the first question people ask when they find the terminology unfamiliar. What is the difference from a design perspective?

Mobile apps can be developed natively or as hybrid apps, while mobile-friendly websites can be developed as adaptive or responsive. The basic design process behind all of them is more or less the same. The only thing we need to consider when designing for mobile is that we have a specific set of rules we need to follow. Apple has its own, and so does Google.

When you’re designing for iOS or Android, the underlying process is the same. First, we do research that will outline best practices and show us what we can do on a certain platform and what not. Basically, research helps us we learn restrictions and take advantage of possibilities a given field.

Designers are likely to work on both native app and responsive web designs. Native apps are important because we want the user to have them on their dashboard, and this way we want to help users in their everyday activities. Some native apps can work offline while others can’t.

Responsive web design is important for SEO and Google indexing. So, if we want to have your project well-ranked on Google, you definitely go for a mobile-friendly responsive design.

Cards are fast becoming one of the best design patterns for mobile devices. They collect individual pieces of content aggregated together into one experience.

We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalized experiences built on an aggregation of many individual pieces of content. This is a result of the rise of mobile technology, which resulted in billions of new connected devices, using different resolutions, pixel densities, and form-factors.

The idea behind cards is to show the user only relevant information at the right time. This way user focuses solely on the most important message, while most clutter is removed.

The best time to use cards would be when we need to show a particular bit information, deemed important to the user at a given time. While the card approach could be used all the time, the way Twitter separates tweets one from another, this is not always practical.

There are many services and websites already using the card system to display information. This way they visually separate or highlight information.

An example of a well-implemented card design should look like this.

Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new and effective way of displaying both results and filters on relatively small mobile screens.

Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. The ability to narrow down searches is invaluable for users who need to find something specific within a large content set. This type of search has become common for e-commerce/m-commerce and travel websites, as well as many different types of document and media collections.

A faceted system includes two critical elements:

Simple controls to construct sophisticated searches - providing familiar controls like drop-down menus and checkboxes with natural-language labels. This allows ordinary users to narrow down a large set of results to a smaller set that meets their exact criteria, without any knowledge of Boolean logic or query syntax.

Simultaneous display of the facet controls and the results - Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects filter criteria.

Animation has long been used as an eye-catching element that helps differentiate an app from its competitors.

Now, however, more designers are incorporating animation as a functional element that enhances the user experience, to simulate the appearance of interacting with a real object.

Animation is no longer just for games. It also illuminates navigation: Think of a button that toggles a panel of otherwise hidden content, such as a menu. Closing the panel shrinks the menu, where it disappears back into the button. Other examples include zooming content or providing feedback to confirm a user’s action.

Functional animation makes app experiences more dynamic and provides a more direct visualization of the user’s actions. As smartphones become more advanced, designers are adding HTML5 animation and parallax design to mobile apps to bring a new level of richness and excitement to the mobile user experience.

Tabs are one of the most frequently used components of mobile UIs, and for good reason.

They allow users to quickly move between a small number of equally important panes and bring a real-world element to the web and mobile applications. When implemented correctly, tabs can be an excellent user interface control element that can greatly improve usability.

They are considered to be very intuitive and easy to use. Well-designed tabs clearly indicate the user’s current location using a different visual appearance that sets active tabs apart from the others.

If you need a practical example, look no further than your desktop browser.

As technology advances, designers have to deal with fewer and fewer restrictions, and can employ a variety of new solutions to enhance user experience. The new iOS 3D Touch gesture poses some physical challenges for users. Designers should take advantage of it to enhance user experience by making pages previewable and supporting quick access to frequently used features.

There are two main actions supported for now: Peek and Pop.

Peek and Pop allow apps to let users preview content and perform related actions within the app, before deciding if they want to view the full content. For instance, peeking can be used to provide live, content-rich previews. Ideally, peeking gives enough information about an item to augment the current task or helps you decide whether or not to fully engage the item. For example, preview a link in an email before deciding to open it in Safari or share it with friends. Peeking is often used in tables to view detailed row information before the row is selected.

3D Touch is an emerging technology, and is not supported by pre-2015 Apple devices. However, as older devices are phased out, it will be available on most, if not all, Apple platforms. In addition, Force Touch technology is coming to Android devices as well, and other platforms are bound to follow.

When users depend on scrolling as their prime method of exploring data, it may compel the user to spend more time on your web page, thus increasing engagement. With the popularity of social media, massive amounts of data are being consumed; infinite scrolling offers an efficient way to browse that ocean of information without having to wait for pages to preload.

Users tend to have better experiences with scrolling than clicking/tapping. Gesture controls on mobile devices have made scrolling intuitive and easy to use. As a result, the users enjoy a truly responsive experience, regardless of what type of device they’re using. The biggest challenge is to maintain good performance in an application or website with infinite scrolling. If we see that the app will use too many resources because of size and volume of images or other types of content, then we need to make sure we try out an alternative approach.

Pagination is a user interface pattern that divides content into separate pages.

Pagination is good when the user is searching for something specific within listed content, not just scanning and consuming the flow of information. Furthermore, the user gets a sense of control. Infinite scrolling is like an endless game, while pagination allows us to visually sort different items. This means that if the user was searching for something on a website then he will quite easily find the necessary information on a paginated interface. Pagination is good for e-commerce sites and apps. When users shop online, they want to be able to come back to the place they left off and continue their shopping.

So basically, both approaches have their pros and cons. Which one should we choose?

There are only a few instances where infinite scrolling is effective. It’s best suited for sites and apps that boast lots of user-generated content (Twitter, Facebook) or visual content (Pinterest, Instagram).

Pagination, on the other hand, is a safer option, and a good choice for sites and apps that intend to satisfy goal-oriented activities of the users.

Big players like Google and Apple are already using this approach to provide better UX while using their mobile platforms. Apple has Siri, while Google has Google Now. In order to enhance UX at some point, we can use voice for certain actions.

Cars can teach us a couple of basic things about designing with audio input for better user experiences. The first is that user experience design should not be limited to the usual graphic user interface (GUI).

For example, automotive apps could use voice to enhance user experience while the user is focusing on driving. Various car manufacturers have been integrating voice controls in their automotive infotainment systems for years.

Let’s imagine you are building an app that will alert the driver when the vehicle is approaching a speed camera or a built-up area. All it will take for the driver to take notice and adjust their speed is a simple audio alarm. The car has no means to visually inform drivers that they are about to hit the curb, which is why audio warnings are used for lane departure solutions as well, and similar audio warning systems have been employed in aviation for decades.

Sound tends to be very useful when we go beyond the GUI, especially when it’s necessary to alarm users and prompt them to act as soon as possible. This could be one of the examples how audio can enhance the user experience well beyond the screen.

Besides UX improvements, we think that the sound can help you be recognized and even affect your brand awareness. A great example of this is Windows and it’s bootup sound, which is kind of retro by now, but everyone knows and remembers it. The same can be said of different notification sounds used by messaging services such as Skype, WhatsApp, or Viber.

Based on user-research, annoying notifications are the primary reason why people uninstall mobile apps (71% of respondents in one recent survey).

But still, push notification are a feature which keeps an app alive. In other words, notifications are powerful tools for businesses to communicate directly with users and deliver the right message at the right time and place in order to promote engagement. So it’s really important to consider how these elements are designed.

It’s important that the messages are clear and understandable. No matter what the content of the notification is, make sure it speaks the same language as your users, literally and figuratively. Users, regardless of frequency, appreciate content that is directly related to their personal interests.

Timing is the second most important thing when we consider making push notification. Also, solution could be sending a notification out at a reasonable time that would be most effective to your users, unless it’s critical to inform them of something happening right now. In general, mobile usage peaks between 6pm — 10pm.

Pokemon Go changed the rules of the game and created a new trend in mobile design and gaming. The combination of Augmented Reality (AR) and flexibility provided by smartphone platforms helped create a whole new user experience. These emerging technologies will bring monumental changes to digital product design.

The gaps between smart devices (smartphones, tablets, laptops, wearables) are being blurred with each consecutive product generation. Rapidly evolving hardware is bringing AR closer to mainstream users, even though the concept has been around for a while. There are many reasons why the interface will evolve. Designers are no longer limited by technology, their biggest limitation today is their own creativity. It is also important that many of these emerging technologies are reasonably priced, or seamlessly integrated in new devices at no extra cost to the user.

The design process in the future will change. For example, in order to make an interface for VR we need specialist skills, and we need to create UIs in 3D. In addition to designing 3D assets, designers will also have to master certain skills, for example learn some Unity basics, or employ 3D design software.

User onboarding is the process of increasing the likelihood that new users will successfully adopt your product.

When launching a product, you need to spend a lot of time and resources to attract a sufficient number of users. There are a variety of means to attract users to your app, including advertising, referral programs, public relations, and content marketing. But when people finally download the app, they sometimes feel abandoned or let down. Therefore, you must do a good job at showing users why they need your app and how they should use it.

Onboarding can sometimes be an integral part of the app, where we show the user how to behave within the app. This dive in effect is especially useful if we incorporated some new features that might be unfamiliar to our users. Tooltips can also be used to show them how things work.

The same approach can be used when we have complex systems. With tooltips we can explain why some things are there or why others are not. It’s something like a guided tour of your app, where hints are only triggered when the user reaches an appropriate point in their experience. Thus, hints may appear in different orders for different users and actions.

It’s important because onboarding helps us show off the application to the user, or simply ask them for credentials that may be required for continued use of the application.

Onboarding is not restricted to new users who need a better understanding of your product. It can also be used to test alternate approaches and design solutions. There’s no one-size-fits-all solution, but a combination of gut instinct and testing with customers can quickly help us to get closer to the optimal first-time user experience. Done right, onboarding can help convert prospects into repeat customers.

Due to the fact that mobile design is constrained by the small size of mobile devices and their displays, it’s of vital importance that we present the information properly, and adequately prioritize content. It is very important to make sure this is done at this stage, before we proceed to mockup design, because that’s a matter of UX rather than UI design.

It’s also important to decide which information we provide first and which one will remain hidden. In order avoid hiding content, we can use different patterns like tabs, filters, and so on, while still providing the user with the most important information at the time. It’s a bad practice to use hamburger menu even though sometimes we are forced to use it due to the massive amount of data that needs to be displayed. Based on research, we can conclude that the hamburger icon easily gets “lost” in the design, because many users tend to start scrolling immediately. It’s in our nature to scroll and that why it’s important to make sure everything important is presented to the user at a glance.

According to a study by Nielsen/Norman Group, a global leader in user experience research, training, and consulting, hidden navigation patterns (like hamburger menus) decrease content discoverability by 21% and increase the amount of time it takes to actually use navigation by 2 seconds on average.

Our goal should be to provide as much relevant content on the front page as possible, without hiding it behind another layer of navigation. It’s more likely that users will scroll rather than click on the navigation button.

Unfortunately, this is not the best solution for navigation due to the fact that the idea behind guidelines is to have only one function that handles that action. Otherwise, the user can be confused. You need to avoid inconsistency in your UI. Elements that have similar functions should also have a similar appearance. People often assume that there must be a reason behind design inconsistencies they notice, and they’re apt to spend time trying to figure it out.

An example of tabs

Input fields are a very important aspect of mobile design. We tend to take them for granted, especially when designing small websites or mobile apps.

When we need to design a corporate website where we have more than one contact form, then we should reconsider and reimagine these small elements. The whole point of doing this makes them invisible to the end-user, allowing users to focus on more important things. We don’t want our users to leave at a crucial point in their journey, when they need to input information or maybe even make a purchase. This usually happens on e-commerce websites when the user is required to fill in too many fields in order to complete the transaction. The trend is to streamline the process, and big players are getting involved with mobile wallet solutions as well.

For mobile design, it is important to provide clear, always visible labels for each input field. Clear labels make users feel more confident that they understand information in the right way, promting them to take action.

Data comes in many formats. Of course, we think that you should always try to design input fields in a way that resembles how users typically enter information. For instance, the phone number field can be auto-formatted. This eliminates any formatting ambiguity the customer may have had.

When the user is supposed to enter numbers, we need to ensure that the appropriate numeric keyboard is activated for this field, and make sure that this is implemented consistently throughout the app rather than only for certain tasks but not others.

Live validation and similar features can help us to write down the form faster and without any mistakes which may affect the end-result and the user’s decision whether or not to proceed with their actions (i.e. make a purchase on an e-commerce platform).

Iconography is a visual language used to represent functionality or content. Icons are used when we don’t have enough space to display textual content. Therefore, icons are meant to be simple visual elements that are recognized and understood immediately.

In practice, we will encounter both version of these icons. They can appear outlined or filled, but the whole icon set needs to be consistent and employ the same stroke. However, this is something that is more related to visual design. When it comes to UX, one thing is sure. If we use the outlined icons for the normal state, then we should probably use the filled icon for the active state of the button. It’s important to indicate which section is currently active by highlighting the icon in a specific way. Although we could change the color of the outline, this approach is not ideal when we are dealing with a light background, so it’s better to use the filled/outline approach. This makes recognition of active tabs and controls more straightforward. Icons at the end are here to serve as navigation to other section of the app.

Anyway, icons are cool to use and can be very useful in some cases. However, it’s important to make sure that they have to convey meaning to the user. Also, sometimes it is better not to use icons, because it can be extremely difficult to create icons that illustrate certain contexts.

For example, what does the following icon mean?

It’s a common mistake to assume that your users are either familiar with abstract pictograms or they’re willing to spend extra time exploring and learning them.

That’s why is good to use icons together with text labels for complex and abstract features. In such cases, icons are still useful as they can enhance the discoverability of menu items and they can also add a nice touch and personality to your app.

As we already know, typography is one of the most important things in new media. That’s why it’s important to make sure we use the right typography at the right time, making everything visible without having to zoom in or out.

It’s important to improve legibility by increasing line height or letter spacing. Good, generous whitespace can make some of the messiest interfaces look inviting and simple.

We should use color and contrast to help users see and interpret the content. Choose primary, secondary, and accent colors for your app. Afterwards, it’s important to ensure sufficient color contrast between elements so users with impaired vision can read the elements and use the app.

Contrast between the background and content needs to be strong so text is legible. W3C recommends that small text should have a contrast ratio of at least 4.5:1 against the background.