ANGEL FROST

The Client

Maurice’s Thoughts

The Duration

03/18 – Current

Available On

Smart phones,
Touchscreen Computers,
Tablet Computers

Skills Used

Research, Storyboarding,
UIUX Design, Acceptance Testing,
Graphic Design, JAVA, Music Production, Adobe Edge

What is it?

Angel Frost is a luxury boutique for mobile devices that uses gestures to make purchases. It is my intention to reduce the human need to have buttons and to show how sellers could enhance their user experiences by using intuitive gestures.

The Challenge

Trying to teach our tech culture to adopt a button reduced or button-less technology may be easier written than performed.  However, it is my effort to prove that we can enhance the UX for mobile by reducing our needs on buttons.

Gestures for Mobile Devices

INTRODUCTION

Various apps installed on mobile phones include various gestures, such as tap or swipe that help them function. Such gestures make mobile applications work appropriately. They are complex to implement since they consider the physical action, the location on the screen, and the ability of users to find and use a gesture. Overall, proper implementation of gestures paves way for the development of beautiful and highly usable interfaces with many hidden actions to allow fast user actions and ability to use different size devices. This report reviews some of the successfully implemented gesture techniques found in most apps today.
To provide people with intuitive and consistent experience, mobile apps should follow the accepted Android conventions for gestures on a touchscreen. Rico and Brewster (2010) mention that “since mobile phones are part of people’s public appearance, designers and developers must integrate gestures that users perceive as acceptable for public use.” In other words, the authors note that “gesture-based interfaces should not be created based only on the state of the art of gesture recognition software, but also consider the limitations of user willingness to perform gestures in proposed usage contexts. Therefore, designers should not conflict with existing perceptions of mobile phone adoption in social settings.”

There exists a gesture design guide that demonstrates how developers can adopt common gestures in mobile apps. Mobile devices allow people to use gestures or physical movements to activate an action or control in the design (Poppinga et al., 2014). In most cases, gestures include hand movements, moving, and tilting a device. Currently, there are dozens of actions accomplishing different tasks. Some of the common gestures include tap, double tap, one, two or three-finger swipe, press and hold on notification, press and hold to select, pinch or spread, and so on. They are easy to learn for the end user and they are a valuable means for instant access (Poppinga et al., 2014). Touch gestures can be described as a process involving a combination of mechanics and activities (Rotzetter, 2012). Touch mechanics describe what the fingers can do on the screen. On the other hand, touch activities include the results of different gestures.

Touch Mechanics and Associated Activities

The first gesture discussed in this report is one-finger touch. It involves pressing the screen with one finger and lifting it. In most cases, the action activates the select function. In other words, it works like a button to activate a screen element. Other actions of this gestures involve canceling or escaping out of a current task, such as menus and dialogs.
Double touch gesture involves using one-finger to tap twice on a screen. A user uses a finger to press, lift, press again, and lift. It is similar to the double clicking accomplished using a computer mouse. It requires a user to rapidly touch the screen twice and then lift the finger. The gestures helps zoom in the content displayed on the screen. This gesture is also known as double tap. It enables users to perform the open task when they rapidly touch the screen surface twice using one finger. The action can also be used to zoom in on select items or maps.
Drag, fling, or swipe involves pressing one finger on the screen, moving it, and then lifting it away. This gesture results in different activities based on the context. To distinguish between drag, fling, and swipe, the user performs this gesture at different speeds. For drag, the action is fine, more controlled, fine gesture, and has an on-screen target. On the centrally, the swipe as a gross, faster gesture with no on-screen target. Fling has a gross gesture. Moreover, gesture speed determines if an action can be reversed immediately or not. In this case, a swipe can become a fling if the ending velocity is increased. A drag maintains contact with the element, which makes it easy to reverse the action by dressing an element in an opposite direction (“Gestures,” n.d.). A fling moves with a high speed and mostly removes contact with an element, which makes it impossible to undo an action immediately. The drag, swipe, or fling gesture is used to scroll, tilt, dismiss, and so on.
Long press gesture involves using one finger, pressing it on the screen, waiting, and then lifting away. The action helps select an item such as a list. On the other hand, long press and drag gesture involves pressing a single finger on the screen, waiting, moving, and lifting the finger away from the screen. The action helps select multiple items or pick up and move. Moreover, long press on an application icon in a system tray makes it possible for the user to move an application icon to the desktop on a mobile device. At the same time, a long touch on an application icon on the desktop makes it possible to remove it. A long press can also be used to activate a contextual menu on some mobile apps that support the function.
Double touch and drag gesture involves pressing one finger and lifting it, then pressing again, moving, and lifting it. The action helps zoom in and zoom out.

The pinch open gesture involves using two fingers to press, move outwards, and lift away. The action results in zoom in function. Pinch open expands collapsed content. The pinch closed involves using two fingers, pressing the screen, and moving inwards, then lifting away. The gesture activates the zoom out function. Pinch closed collapses expanded content. Both pinch open and pinch closed are universal ways of adjusting the size of display or object within the app. For instance, the gesture can be used to resize a photograph in a web page.
Two finger touch involves using two fingers to press on a screen then lifting them away. The action results in the zoom out function.
Two finger swipe, fling, or drag involves pressing two fingers on the screen, moving and then lifting them. The action pans, tilts, or selects multiple items. The height and width of the selection can be adjusted by changing a finger’s position. The final section area depends on the dimensions of the selection box immediately when one or both fingers are lifted.
Two fingers long press involves pressing two fingers, waiting, then lifting. This gesture is uncommon. In most cases, it does not result in any function.
Apart from the touch gestures, mobile apps allow other actions, such as shaking a device to wake the display. In other cases, the shake gesture is used to undo something typed by the user. In addition, many mobile devices feature hard buttons at the bottom of the gadget. They include a home button at the center and back and menu buttons on both sides of the home button. However, in most cases, hard buttons do not show until a user presses them first. This makes it difficult to know where which side to press for either menu or back buttons, requiring users to memorize the hard buttons arrangement.
The best procedure for developing intuitive gestures is through progressive disclosure. In this process, a user is introduced to gestures and other interaction controls as they proceed with the interface flow. In this case, users are first shown what is most relevant option or control for interaction. In most cases, developers can give such hints through ‘get started’ tutorials and visual cues. The latter approach is more effective since most users will skip tutorials and start interacting with an interface immediately. In other words, progressive disclosure developers should focus more on using visual cues that provide instant feedback in response to touch. An example is as shown in the image below.

mob 1

Applying Gestures Today

On-screen navigation buttons offer unique advantages over physical ones. They enhance user experience when the app elements and the buttons only require the same amount of force to press. Moreover, they can be switched out or themed. Unfortunately, they occupy precious space on the screen. Fortunately, swipe gestures can be added to the screen’s edge to give access to existing home, back, and recent app or menu functions, making it possible for designers to eliminate on-screen buttons. This technique is made possible using other apps, such as the Swipe Navigation developed by Suphi Kaner (Thomas, 2015). others, such as Adobe, has created a wireframing app, Experience Design CC (Adobe XD) that allows designers to prototype on anything from wireframes to multiscreen experiences.
Popular apps, such as Tinder, has taken the above gesture capabilities and twisted the normal process by adding swipes. The app allows users to swipe through selfies of other users living nearby. If a user quickly swipes a selfie to the left, they reject the people (Betters, 2017). On the contrary, a quick swipe to the right results in liking them, which makes it possible to match and send a message.
Users are loving the idea of different in-app gestures, such as swipe, pinch, and spread. They have contributed positively towards enhancing user experience. The gestures have changed the way consumers interact with mobile devices. They are now both familiar and entertaining. In the current competitive market where businesses are widely adopting e-commerce, the success of a mobile app is determined by how the provider implements the gestures into the app user experience.
Evidently, gestures are intuitive and natural. Ideally, they create an impression that resembles interacting with real objects. They eliminate the use of buttons and allows more space to be available for displaying valuable content on the app. This feature is essential for e-commerce apps that are content-focused. Moreover, when users familiarize with the gestures, it becomes enchanting and a great part of overall user experience. Ultimately, gestures make user interaction with the app more content intuitive as compared to using buttons.

Work in progress and Mock ups

As it can be seen from the above analysis, creating an awesome mobile application is not enough for successful applications. It is vital for developers to ensure that the app is intuitive and comprehensive though implementing touchscreen gestures to make it easy to use. Mobile apps use gestures to provide greater control over navigation. Due to their limitation on space required to place clickable buttons for various functions, mobile apps use different gestures to allow users to hide or activate various actions. Therefore, implementing such intuitive gestures to allow users to guess an action to take to activate a particular command is a crucial task for a mobile developer.

Shopping needs to be fun and engaging. Here Maurice designs for users to like and to comment their experiences with a product.
Shopping needs to be fun and engaging. Here Maurice designs for users to like and to comment their experiences with a product.
Ever walked to the register and noticed there were a wide variety of candy screaming for you to buy them? Suggestive purchases makes Users aware of other products that are good compliments to the ones in the shopping cart
Ever walked to the register and noticed there were a wide variety of candy screaming for you to buy them? Suggestive purchases makes Users aware of other products that are good compliments to the ones in the shopping cart
Users want simplicity. Maurice asked, Can users snap a shot of their cards and auto-populate the "Payment Details" fields? Of course they can.
Users want simplicity. Maurice asked, Can users snap a shot of their cards and auto-populate the “Payment Details” fields? Of course they can.

References

Betters, E. (2017). What is Tinder and how does it work? Pocket-Lint. Retrieved from
https://www.pocket-lint.com/apps/news/tinder/139566-what-is-tinder-and-how-does-it-work
Gestures. (n.d.). Material Design. Retrieved from
https://material.io/guidelines/patterns/gestures.html#
Poppinga, B., et al. (2014). Understanding shortcut gestures on mobile touch devices. Mobile HCI, ACM.
Rico, J., & Brewster, S. (2010). Usable gestures for mobile interfaces: Evaluating social
acceptability. CHI 2010: Association for Computing Machinery (ACM). Retrieved from
http://www.juliericowilliamson.com/papers/pap0238-rico.pdf
Rotzetter, D. (2012). Gesture interaction techniques on cell phones: Overview and taxonomy. Retrieved from
https://diuf.unifr.ch/main/diva/sites/diuf.unifr.ch.main.diva/files/mmSeminar_Rotzetter_Dani_0.pdf
Sanders, K. (2017). To use o not to use: Touch gesture controls for mobile interfaces. Smashing Magazine. Retrieved from
https://www.smashingmagazine.com/2017/02/touch-gesture-controls-mobile-interfaces/
Thomas, D. (2015). Entirely replace your Android’s on-screen navigation buttons with gestures. GadgetHacks. Retrieved from
https://nexus5.gadgethacks.com/how-to/entirely-replace-your-androids-screen-navigation-buttons-with-gestures-0159595/