3d-touch-series

Back to Blog

3D Touch & The Enterprise: User Navigation

Posted on 29 Oct 2015 Written by Michael Wass

This is the second of a three part series about 3D Touch and Enterprise mobility. For the first post, click here.

User Workflows

In 2015 consumers have become accustomed to the language of mobile. There are certain expectations for how apps should be. Inconsistency within the boundaries of this mobile design language are jarring, and this has created two effects.

  1. We can navigate mobile apps through touch faster because it is tactile and a certain amount of muscle memory exists that is shared across applications. Design conventions appear and regress in cycles that have far shorter lifespans than traditional web or desktop development.
  2. The drive for efficiency and simplicity has in many ways limited the functionality of mobile devices. The lack of a traditional file hierarchy on iOS in particular has changed the way people expect file sharing between apps to behave.

This blog explores the way that users can expect to work and navigate in the future, and the effect it will have on their workflows within mobile parameters.

Case Studies: New Ways of Navigating a UI

Expanded options for information: TweetBot

TweetBot is a good example of the ways in which 3D touch enables an expanded menu within a small-screen UI. The task bar at the bottom of an application is a popular way of navigating an options menu quickly. However, in keeping with the design norms of mobile apps, particularly for phones, there is a limitation to how many options a user has within that one screen.

There’s an argument to say that it doesn’t matter a great deal; it’s easy enough for a user to select one of the five options from the taskbar menu, then wait for that screen to load before selecting further options.

However, 3D touch makes it possible to bring those options to the main flow of information. By force-pressing the screen on the menu items that have an ‘expand options’ icon ensures users can navigate directly to their desired option without abstracting from their original task. Twitter is a great example of this, because it is a flow of real-time information, images and data. It can be hard to remember where you were within that flow if you leave the screen.

lloydstsb

 

Rich visual navigation: Instagram and Pinterest

Two of the best apps to showcase the potential of 3D Touch as a means of navigation are Instagram and Pinterest. 3D Touch is deeply integrated across both apps, sharing much of the same principles but giving different options in different places.

To begin, both apps have 3D Touch options straight from the app icon on the homescreen. You can launch into preferred actions, without having to navigate through the rest of the app. This is something that will be very useful for enterprise, enabling apps with a broad scope to be used in a true mobile fashion by allowing the user to get straight to the functionality. With the example below in mind, imagine being able to message co-workers, report incidents, upload photos or mark a location straight from the icon.

instagram

Making decisions about content

Instagram employs the standard ‘peek and pop’ 3D touch options, allowing the user to preview content and bring it to the ‘front’ of the UI before deciding whether to dive deeper. This is a design paradigm that is set to become ubiquitous in iOS. It’s prominent in Safari and other apps which use web views. In an enterprise context, these images could be replaced with reports, profiles, breakdowns and charts. Because Instagram and Pinterest present their content in tiles, with thumbnail icons that expand deeper into the app as rich images 3D touch is a natural way to navigate.


instagram 2

 

A deeper press brings up an actions menu, where users can decide what to do with the content. This will be useful for bookmarking, sharing and reporting information and data within the workplace.

IMG_2050

Advanced Navigation Using 3D Touch

Visual Cues

In the first generation of 3D Touch applications, an overlooked necessity is ways of designing the UI to guide the user into deep touching items. In Tweetbot, we’ve looked at the expanded options logo, however Pinterest has two great ways of guiding users.

pinintrest3

The image on the left shows animating bubbles that encourage deep presses. This removes the confusion over what reacts to a deeper press and what doesn’t. The image on the right shows a red circle that follows the movement of your digit on a 2D plane, as the image animates with depth underneath. This is great UX in practice.

The final example in this blog also from Pinterest, is that they’ve designed a radial options menu that emerges when content is force-pressed. This is a more considered and mature implementation, and what I’d recommend as the long-term goal of using 3D Touch to make your enterprise app more usable and navigable, because:

  • It is styled within the design language of the rest of the application, but is unique in comparison to the implementation within similar apps.
  • It follows the notion of depth within iOS 9. The force of your press and the animation gives the impression of pushing ‘into’ (and selecting) the content, but the menu floats above the content.
  • It’s a faster and more visual way of engaging with the content and performing appropriate actions
  • It’s very, very cool.

IMG_2054

Next time, we’ll look at the technical underpinnings of 3D Touch and analyse the effort required to deeply integrate it throughout your enterprise app. Don’t forget to subscribe to our mailing list below to keep up to date with this blog series