1. Get familiar with its placement and navigation
2. Basic practices and patterns
3. Importance of using a familiar interface and breaking tasks

With the rise of smartphones and tablets, more people start accessing the internet and using their mobile phones or tablets since bringing smaller devices wherever is rather convenient.

As a result, designers require to have a different approach when it comes to building responsive interfaces. Applications like Twitter and Facebook even adapted their website applications to a mobile-first approach.

Mobile design is also influenced by platform-specific conventions and guidelines, such as those provided by Apple for iOS or Google for Android. Designers need to take into account these guidelines to ensure their designs are consistent with platform standards and users can intuitively navigate the app.

Typography — iOS with its San Francisco and Android with its Roboto

iOS uses the San Francisco font family, a sans-serif font that was designed specifically for Apple by typography experts in collaboration with Apple’s engineers. SF Family is known for being a legible font for digital screens with its modern and sleek look.

On the other hand, Android uses the Roboto font family, which was developed by Google for the Android platform. Roboto is a sans-serif font that is optimized for readability on both small and large screens known for its neutral and modern appearance.

Here are some examples of similarities and differences between Android vs iOS navigations and placements.

Control Design

The Search function

App navigation

Tabs, Search, and Action Menu

Notifications

Practices and patterns

Best practices for creating effective mobile user experiences

Touchpoints

Make sure to design control sizes that are easier to tap using the thumb.

Responsive to different layouts

Simple navigations

Providing users an obvious way of navigating the interface from one screen to another

Less is more

Reducing clutter and displaying only the most important information. Decluttering and prioritizing primary tasks.

Readability and Accessibility

Ensure that your typography is readable enough for users to read.

Break tasks into bite-sized chunks

Make things simple. Reducing complexity to complicated UI components.

• Filters
• Table
• Minimizing user input

Use familiar interface

Consistent and similar interfaces and features do not equate to plagiarism. Our brains are wired to store long-term memories.

Using a common design interface allows users to navigate through the mobile app with familiarity reducing the gap between the user and the application.

Designers must also consider the limitations of mobile devices, such as slower processing speeds and limited battery life.

This means creating lightweight designs that don’t place too much strain on the device’s resources and designing interfaces that can be quickly loaded and used without draining the battery.

By creating interfaces that are optimized for mobile use, designers can create a positive user experience that meets the needs of their target audience.

“If UX is a brain of a product, then UI is its soul.” — Anton Mikhaltsov, Design Director at Awsmd.

‍

Source and recommended reads:

• https://dribbble.com/resources/ui-vs-ux-design
• https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide
• https://uxdesign.cc/8-rules-of-mobile-design-1b8d9936c241
• https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/
• https://appinventiv.com/blog/ios-vs-android-app-design-difference/

‍