Simple rules for implementing gesture control in iOS that you must follow in order not to infuriate anyone



    Dear iPhones, is it with you that you downloaded the application, and then ... everything is wrong and wrong and in its place? When your user-experiment tells you that the application is not working correctly: you press, for example, the button that always meant “Share” in iOS, and instead some sort of “left” menu falls out for you ... There is an unpleasant frustration, and you rather just demolish the application from your smartphone.

    This usually happens when:

    • the developer and tester are not iPhone users, they have nowhere to gain an understanding of the iOS ecosystem;
    • the customer and / or developer wants to stand out, to be original, believing that the user lacks freshness of impressions, and ... goes too far.

    This always reflects badly on the result, because the user paradoxically simultaneously expects the wow effect from the application, but is also conservative to the bone marrow. How not to annoy and meet the expectations of a user of Apple devices, but at the same time impress him? We tried to figure it out. If you are a beginner developer for iOS, we think it will be useful for you to read the article, and if you are experienced and many things seem obvious to you, let's just compare our observations with you.

    The most important thing in the application


    Mobile applications are evaluated by users according to several main criteria:

    1. Content is something that the user can learn, read, listen to or watch thanks to your application.
    2. Features are what the user can do using the application.
    3. Design is how the application looks, what determines whether the user considers the application beautiful, original, convenient.
    4. Interaction is how the application responds to user actions, what control methods it allows.

    The first two points have a purely utilitarian meaning, and here we will not discover America - the application should be just useful, and that’s it. Much has been written about the design of mobile applications and usability design.

    But what next, how to wrap utilitarian functionality beautifully, modernly, and, most importantly, get into the heart of these same mobile, digital users and integrate into the ecosystem of the iOS platform?

    Live up to expectations


    Smartphone users begin to master the device with standard applications: phone, contact list, notes - all of them instill the habit of acting in the application in a certain way, for example, pull the line to the left to delete the line. When a user makes a familiar gesture and gets an unexpected result, he is uncomfortable. That is why we strongly recommend keeping traditions.

    So, let's look at examples of familiar gestures that need to be supported in your iOS application.

    If the application has forms

    By clicking on the form field, the application displays the control for entering data (keyboard, date selection control, etc.) - this control is called input view. Whatever input view the application displays, the field should still be able to insert text. The standard gesture for this is a long tap. It opens a menu with the ability to select text, copy or paste text from the buffer.

    Tip: In a field where it is not possible to enter text from the keyboard, you can only make the option “Copy” the entire value and “Paste”. For fields with the ability to enter text, you must add the ability to select part of the text before copying, cutting or pasting.



    By modern standards, it is also necessary to support hiding the input view by scroll.



    If the application has lists (tables)

    The most important thing you need to implement is the ability to scroll through the list without freezing and braking: users love responsive applications.

    By clicking on the status bar, the list (and generally any scroll view) should go to the top of the list. This feature is often lost when there are several scrolling areas on the screen. If the list can contain more than 20 elements, be sure to check this option before publishing the application.

    When swiping from left to right or right to left according to the standard, the “delete” button (swipe to delete) appears on the list item, any application should behave the same way. It is worth noting that this is a removal from the list, and it does not always imply the removal of the object as a whole. For example, if you display a list of elements with a specific attribute, then removing an element from the list may mean removing the attribute from this element.



    In this example, the contact will be removed from the “Favorite Contacts” list, however, it will remain in the general list.

    A few years ago, the first mobile application appeared in which the refresh button was replaced with a pull-to-refresh gesture (pull to update). The user sweeps the screen from top to bottom, and the message release to refresh appears (release to update). After that, a download indicator is displayed at the top of the list, which is hidden as soon as the update is completed.



    Tip: If the application displays information that can be used in other applications, you must open the menu of possible actions for a long press. For example, you need to give the opportunity to call the phone number or add it to your contact list, open the site in a browser, the address on the map, etc.



    Cancel Editing

    If the application implements editing any information, for example, creating a shopping list, notes, etc., you must add the ability to cancel the action by shaking the mobile device (Shake to cancel).



    If the application displays graphical information that the user will be comfortable looking at at different scales, then you need to realize the ability to scale using the pinch gesture. An example is the application with maps, galleries, built-in browsers, games, etc.



    Impress user


    And now your application can already be called convenient and modern in terms of using gestures. This will satisfy many users, for example, in business applications. However, if you want to do something special, attractive and better than your competitors, you need to think about additional features that you can offer your users. Many of the things listed below were invented for specific applications, but because of their convenience they have become popular and are now used in many applications, and most users consider them standard.

    Let's consider additional features on the examples of popular applications.

    Gallery

    If the application has a gallery, you must implement the following features:

    • by clicking on a picture it opens in a separate screen (in gallery mode);
    • by clicking on the screen in the gallery mode, the control controls are displayed / hidden: navigation panel, Share buttons, etc.

    These functions are standard and can be found in the standard Photos application. Additionally, modern applications realize the ability to exit the gallery mode by scrolling or clicking.



    Similarly, in modern applications, they close the news viewing screens.



    Menu

    If the application has a menu containing more than 5 items, it can be moved to a separate screen, which is accessed by the “swipe” gesture. The first such menu appeared in the Path application, and is called the Path-style menu, however, users are more familiar with the Vkontakte, Facebook, Gmail applications, now it is used in so many applications.



    Marked Delete

    Based on the standard delete function, swiping to swipe left-to-right or right-to-left (swipe to delete) implementations appeared for deleting from the list with the addition of labels, and the amount of shift can affect what label will be added to the element:



    Navigation Bar Optimization

    To increase the usable area, many applications hide the navigation bar when scrolling upward. This behavior is also characteristic of browsers, which reduce the display area of ​​the page address. When scrolling down, the navigation bar expands.



    To support the function of scrolling to the top of the page by clicking on the status bar, some applications expand the area that responds to user actions by adding a button.



    An example application with a hidden navigation bar and a button to return to the top of the list.

    Magnifying glass

    If the application has a display of small details, in addition to scaling, or instead of it, you can make a magnifying glass, similar to the one used to select text in the browser. Such an interface element should appear with a long press (long tap).



    Gesture Applications

    Sometimes application creators go even further and make gesture control a key feature of the application. For example, xReminder runs on pull-to — creating notes, changing colors, everything is done on the basis of a single gesture. For business applications, such a solution is rarely suitable, but for marketing purposes it can fully justify itself.



    Rotation

    This is a rather rare, but also quite specific gesture. If the interface has an element with positioning in a circle, then you can perform it by analogy with the clock hands. For example, this is how the timer is set in the Minu Timer application.



    To find information about the implementation details of modern popular application features, you can turn to specialized resources, for example, idevrecipes.com or search for an implementation on github, for example, github.com/acoomans/iOS-MagnifyingGlass

    In the comments, we encourage you to share your observations - what cool tricks have you seen Where do you think they should be added?

    Applications used for examples


    Standard:

    1. Safari
    2. Notes
    3. Contacts

    Popular:

    1. Vk
    2. Mint
    3. Mailbox
    4. Google maps
    5. Feedly
    6. String bag
    7. Appleinsider
    8. xReminder
    9. Minu timer
    10. Trackchecker

    Also popular now: