%title%

When developing mobile design, the main emphasis was on the effectiveness of the finished product to solve their problems using the mobile interface, people should immediately understand how to use it.

A simple my rule: one basic action on the screen. One hundred clear screens are preferable to one cluttered. The use of large and understandable tap targets.

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

And remember – Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

My lovely book: https://developer.apple.com/design/human-interface-guidelines/

Pleasant viewing

Why do I need two buttons back?

One is at the bottom of the Navigation Bar, the second appears in the Top App Bar when you go to the child page.

There are two types of navigation back: reverse chronological navigation (we use it with the back arrow in the Navigation Bar, call it Back) and upward navigation (we use it with the upper arrow, call it Up).

Imagine that we have an A-B-C path, where A is the parent page, and B and C are child pages. Imagine that the user got directly from A to C. If he presses the Back button, he will return to A. But if he presses Up, then he will first go to B – and by the second press he will go to A.

This is difficult to implement and confusing for the user, so now these two back buttons perform the same back action, as in iOS. That is, if you came from A to C, then from C we will return back to A.

I prefer to design the iOS application for the smallest size (320px)

I prefer to design the iOS application for the smallest size – iPhone 5 with a screen size of 320pt x 568pt. I do this in order to avoid incorrect display of content on small screens. Some people prefer to design for iPhone 8.

Alerts, Snackbars, Banners and Dialogs.

Snackbar is designed for low priority messages and requires no action.

Dialogs blocks interaction with the interface and requires an action.

Banners are located between them: it does not block interaction, but requires an action.

Tab bar. Navigation Drawer, Bottom Navigation Bar and Tabs.

About Top level navigation methods ….

If the number of top-level pages is more than five, use the Navigation Drawer. If less – Bottom Navigation Bar.

However, I recommend not combining Tabs and the Bottom Navigation Bar, since the interaction affects the content of the page and the user can get confused.

If you switch from the parent page to the iOS one on iOS, then through Tab Bar switch to another parent page, then when you return to the first parent page, you will still be on the child page. In Android, everything is simpler – when switching through the Bottom Navigation Bar, you always switch between the parent pages. If before that you were at a subsidiary, it will be reset.

In the case of switching to Bottom Navigation, it’s worth maintaining open child pages, as on iOS.

continue …

Tabs can be moved with the swipe left and right. This is because the tab pages are at the same height (elevation). This is important to know because when using tabs in Android, we should not add elements with similar gestures to the design. For example, a carousel of pictures or interaction with cards using swipes.

Segmented control is a control that controls the content of a page. And Tabs is a navigation tool.

Therefore, it is worth consulting with developers before considering them as equivalent components during adaptation. Sometimes it’s more correct to replace Android Tabs with Page Control. It all depends on the context.

And finally the components (UI)

Most interesting…

Snackbar
Snackbar is not native for iOS. Snackbar is used to convey to the user a short message about the result of his action.

Expanding Bottom Sheet

This very beautiful Android component is not found among native for iOS. Expanding Bottom Sheet is a surface that is nailed to the bottom of the page. When pressed, the surface expands to a full page.

Page Controls iOS

Page Control shows which page the user is on. It is not among the native components of Android.

Steppers iOS

Use it to enter small values. Example: The number of copies to print.

Controls

Platform controls differ only visually. It can be noted that in iOS controls are simpler: checkboxes are used for both radiobutton and Checkbox. In Android, they differ in the form of control.