A Primer on UI/UX Mobile App Development

On February 24, 2021, NTU Alumni Club hosted the webinar “UI/UX for Mobile App Development”. This 110-minute online session featured Webpuppies CEO Abhii Dabas as a guest speaker, who gave a primer about the significance of UI/UX mobile app development as marketers, business owners, and entrepreneurs prepare to scale their business through digital transformation.

Abhii kicked off his presentation by explaining the differences between UI and UX which jointly operate for digital products to function.

Defining UI and UX

UI or user interface is the point at which human users interact with a device, website, or application. Its goal is to make the user’s experience easy and effortless. UX or User experience, on the other hand, is defined as the process of manipulating user behavior. This guides the users as they use applications through usability, accessibility, and desirability when they interact with a product.

The key differences between UI and UX can be found in their distinct functions and properties. UI is more on the visual elements, design, and aesthetics of the interface. It includes layout, visual design, branding, and interactive design. Meanwhile, the UX or user experience involves storytelling, engagement, objectives, and usability as these focus on how users interact with the product, application, or website.

Abhii noted that both UI and UX are equally needed for websites and applications to run smoothly. Over the years, the user interface has evolved in terms of its design and format. The reason for this is that as the number of users grows, their requirements also change.

Users should be placed at the center of everything. They determine the direction of how the UI and UX will be designed. This entails taking into account the reactions and engagements of your users or target market with your digital products as these will inform how to strategize the UI/UX design process.

UI/UX Design Process

The design process starts with research, then determining the user persona and mapping out the user journey involved with the digital product. Afterwar comes the wireframing and testing of the UI/UX with the users.

In the research phase, it is important to define the problem and the solution it seeks to accomplish. This will be followed by understanding the user through various methodologies like user journey maps, surveys, interviews, etc. Once data is collected from these, a user persona can be constructed which is the fictional representation of the user/customer.

After the user persona is set up, the next step to build-up is the user journey map. This includes profiling the personas and defining their goals and listing the touchpoints and actions that they will take as a user. It is important to have customized journeys for each type of user to anticipate the diversity of the users’ needs and desired actions.

Abhii reiterated this process as a user-centered design that relies on the following phases: research, design, and test. This procedure allows the UI/UX to reach their optimal potential by critically assessing the process towards them.

When testing a user-centered design, it’s important to note the following:

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Documentation

Web vs. Mobile--Appearance and Experience

UI/UX between websites and mobile applications still differ greatly.

Creating a good UX for websites includes a five-star strategy that has the following procedure: evoking the emotions of the users, highlighting the strengths of the product through statistics, providing evidence of the product’s greatness. Lastly is offering something useful to the customer by sharing helpful content with the users. This will lead the users to convert by sharing their own reviews and feedback on the products. Through this procedure, the website will be able to have a community of users who are able to come back for more to interact and transact.

For mobile applications, there are essential points to consider to have a successful UX. The first point is to make sure the design is responsive and easy to follow. There should be an element of exploration to navigate around the interface. It should have recognizable icons, legible fonts, and high-resolution images. To build up a good UX, it is important to do one step at a time and to create distinction early. Note that less is more goes a long way. The design should also be ready for an interruption, for example, an incoming call or any external circumstance that may halt the user while interacting with the product. Another essential thing is to reduce the cognitive load so that the user will avoid information overload. Lastly, the design should be tap-friendly for the users to type less. This will allow them to tap or swipe more with predetermined buttons to choose from.

Popular Prototyping Tools:

Planning to get started on your UI/UX development journey? You can start with the following tools:

• Balsamiq

• Axure RP

• Sketch

• Adobe Experience Design

• InVision

• Figma

Key takeaways: UI/UX development is a very systematic process. At the center of its planning is the user — understanding who your users are will help you set the direction of how the design and process will be conducted. Both your UI/UX should create an intuitive, easy, and seamless interaction with your user and your product. To achieve this, invest in proper research, assess your processes and optimize them as needed to get the best results.