Re-designing interaction with texts on mobiles (long press menus Ux flow)
Even though we have many ways to communicate and absorb information, it seems that for many, the written ( and read) word is still the most convenient and straightforward one.
I am one of those as well. I prefer to pass through a 50 pages manual or written tutorial rather than sit and watch a 10min video tutorial. Actually, any video longer than 3 min just makes me close the tab and continue to search a written tutorial, article, or downloadable document. Yes, I trust my visual scanning abilities to find the solution to be faster than watching the entire video to get to the point ( vloggers tend to talk too much till they get to the point and they lose me after 2 min attention).
Here’s the problem
Dealing that much with reading on mobile devices, I usually wish to keep pieces of articles, interesting ideas for further research for later. This is the moment when I get into that user experience flaw: the long long-press popup/slide-up options menus.
In iOS there are actually 3 types of long-press menus for interaction with text elements:
- The tiny horizontal menu above the selected text (sometimes with too little navigation arrows).
- Slide up the textual option menu.
- Icon-based options menu with scroll left-right.
3 types of menus to deal with text elements.
Android has the same problem, so no escaping here, Google… Why do we get 3 different interfaces for basically the same action?
Also, in reality, dealing with menus is a frustrating experience! How many times my finger missed those small tiny arrows and the selection I made lost and I had to reselect it all.
And regarding the icons, menus… Searching the specific app in the ‘Sharing’ slider is always a surpriseâ€¦ Not all apps appear in all situations, so it is not possible to set a constant order and the textual menus… Buffff… Come on! we deserve better than that.
God is in the details?
Yes, it is a small thing, BUT for a sensitive-to-details designer, those issues cannot be ignored. If we wish to have a streamline-smooth workflow, we cannot leave those small edges loose that increase the friction. Think space travel.
So, being a proactive guy, I decided to throw out to space a possible solution instead of sitting, complaining, and doing nothing. It might not be perfect, but hey, it is a first stepâ€¦ and here is what I came out with:
Reinventing text interaction
As with any project or problem that comes to our studio table, we first begin our journey with a deep thorough analysis, where we explore the problem and the current situation: we are mapping types, actions, and elements, and understand users’ behavior and users needs. Usually, we come with some good insights to find better solutions. And here is a summary of that analysis:
First step: Analysis
So, what actually are the situation where we need long-press menus to interact with texts? We found out that there are only 5 different types of elements and situation:
- Selected text (while reading)
- Selected text (while writing)
- Phone numbers
- Links (URL)
- Images (I know, it is not real text, but images are all over the place, so they got into here as well).
Next, we listed down all the possible functions a user can do nowadays on each text element and how many clicks it takes to get to each function. We based that part on iOS 11. Each arrow “costs” one click:
Now, it is easy to see: Sending a text you wrote costs 3 clicks (!) not including the text selection work. If it is something you do habitually, it becomes a real pain. What if we could make each function and action only one click away? wouldn’t it make life so much more beautiful (I mean…efficient)?
Be efficient. Be flexible.
When it comes to platform design, there two aspects that must be considered: first, they must be efficient, and second, they must be flexible. Efficiency lets the user do stuff with as little energy as possible. And take energy in the broader meaning of the word: time, brain energy (i.e. thinking), attention, focusing time, decisions, clicks, etc…
Platforms must be flexible and adaptable to different preferences and different types of users. Give us customizations, let us decide our paths. We love short and fast access to things.
Back to the functions list… If we open up all the functions to the same level the diagram would look like a list of actions with no hierarchy. Just like a shopping list. Something like that:
From here we re-grouped all the similar actions together, to compact the list, we will get something like that:
Now it is clear which functions are shared among all the 5 elements. It is now easy to move on and develop a flexible and fast visual experience for that.
Reinvent the long-press
When it comes to adding new features to an existing platform, or in the case of Apple, a family of platforms, it is important, at first, thinking inside of the box. It means to search and extract the solution from within the world where the problem came from, and use the design language from the existing platform.
For that case, we went to check another Apple platform that knows to offer a lot of functionality on a tiny screen: the Apple Watch. The challenge of designing a good Ux and UI on a small screen area is a big challenge: think thick fingers.
Photo: Jim Merithew/Cult of Mac
We found Apple Watch’s main apps menu ticks all the squares: it uses a small screen wisely, it is easy to use, it is flexible, it is visually appealing and it does all that while being a cool and elegant solution. This is what we consider a smart design. So, we took it as a starting point in our small case study.
Make that move
After some work of planning, designing, adjusting, and fitting, we came up with a smart, beautiful, and flexible solution. We made bubbles:
Everything you need, just a click away
As you might see, the whole possible functions appear on one colorful screen. From a user experience point of view, we managed to unite the different menus and popups into a single form.
We called the different cases Pallets. So a user can create his own pallets, or use the pre-defined pallets: writing pallet, reading pallet, link pallet, image pallet, and phone number pallet as a starting point, and continue from there.
In each pallet, the user can turn functions on and off, can adjust, and move them around. Pressing on the small (+) button brings the user to an iOS-widget-like menu where s/he can manage and save its preferences to each pallet.
We want a smarter UI: AI+UI
Ok. till here we were bound to concepts and standards that can be implanted tomorrow morning into our mobiles OS.
We will end up with some vision of the future. We were playing with a new concept lately we call AIUI. We are researching the possibilities of implementing and integrating AI (artificial intelligence) within Ui and Ux. Basically, the idea is to create interfaces that learn us, learn our habits, and the way we use stuff and adjust to facilitate and ease our daily tasks.
We hope to make the whole interaction with screens and machines more intuitive, more personalized and fit better to our needs.
We are working on a whole article on that concept (just another good reason to follow us)
Back to our case study, here’s a simple example of AIUI concept regarding the location and size of the buttons. Imagine a situation that you copy everyday pieces of articles and save them to the notes app. Isn’t it logical that the button will become larger and closer to the bottom left side by itself? Or if you never use a specific function, it will get smaller to save screen space? This is a real liquid/fluid user interface. right?
There is nothing more satisfying than finding solutions and playing with ideas. I always learn something new and inspiring in the process. Even a (somewhat) small (and yet somewhat annoying) issue as the interaction with text problem-filled our mind with so many interesting insights about almost everything 😉 (some of them I will share here soon)
So, now your turn: Do you have any insights about the long-press menus experience? Or about our conceptual solution? Or about life? Comment below. Cheers!
Note: This is the first article in my UX related series.