UX Enhancements Through a Developer’s Lens
This article delves into how we achieved significant UX enhancements through a developer’s keen observations and meticulous work.
In the ever-evolving landscape of the software industry, groundbreaking product introductions are a rarity. The spotlight often shifts to innovations in pricing, usability, and unique features as new contenders enter the arena, challenging established players.
Recognizing the challenges inherent in gaining attention within a field dominated by established giants, Tempo Messenger is committed to a core value — empowering users to save time through a personalized reception experience. While our central mission revolves around this unique offering, we also understand the importance of delivering a user experience that rivals major established apps. Operating as a startup without a dedicated UX designer, our focal point became the enhancement of the messaging view — a critical yet intricate aspect, particularly within the iOS environment. As a developer intimately familiar with various messaging apps, I embarked on a mission to identify UX/UI elements ripe for improvement. I am eager to share these insights with you in this blog.
1. Streamlining Messaging View for Faster Access
In this improvement, we address a common inconvenience experienced during transitions from the contact list to the messaging view, reducing the noticeable time it takes for the message view to become fully visible.
- Left Side of Video (WhatsApp): WhatsApp, shown on the left, follows the traditional method of executing view transitions — closing the current view before presenting the next one. This sequential approach results in an idle period, introducing a noticeable delay. The perceptible delay can make the user experience feel sluggish, requiring users to wait until the new view appears.
- Right Side of Video (Tempo): Tempo Messenger, displayed on the right, introduces a significant enhancement by executing a concurrent transition from the contact list to the messaging view. Tapping a contact initiates the process of hiding the current view and revealing the messaging view simultaneously. This concurrent transition eliminates the delay, providing users with a seamless and instant transition experience.
By adopting a concurrent transition approach, Tempo Messenger optimizes the user experience, eliminating the perceived sluggishness associated with traditional, sequential transitions. This enhancement demonstrates a commitment to responsiveness and efficiency, ensuring a smoother transition for users navigating between the contact list and messaging view.
2. Enhancing Keyboard Interaction in Messaging View
In this improvement, we address the challenge of keyboard handling during message editing and navigation gestures.
While users are engaged in text input with the keyboard, they may initiate a drag gesture to navigate back — a common interaction to return to the previous screen. However, the default behavior in some messaging apps, like Telegram, involves hiding the keyboard, creating a potential interruption in the user’s editing flow.
- Left Side of Video (Telegram): Telegram, as seen on the left, adopts a strategy of hiding the keyboard during the drag gesture. This approach reflects the inherent complexity in maintaining the keyboard state. While some may perceive keyboard handling as a straightforward task, it proves to be intricate in real-world scenarios.
- Right Side of Video (Tempo): Tempo Messenger, on the other hand, tackles this challenge differently. The video on the right demonstrates how Tempo maintains the keyboard’s position during the drag gesture. This deliberate decision allows users to seamlessly continue editing without the need to tap the input text view again to reveal the keyboard.
This improvement addresses a crucial aspect of user interaction — providing a smooth and uninterrupted experience for those who may not complete the drag gesture to pop the view fully and wish to resume or complete their message editing. The deliberate choice contributes to a more user-centric and efficient messaging experience.
3. Optimizing Keyboard Interaction in the Background
In this improvement, we tackle a subtle yet impactful issue related to keyboard and app background interaction, a nuance often overlooked by many apps, including well-established ones.
When a user presses the home button to background the app while the keyboard is active, the default behavior in most iOS apps, including prominent ones like WhatsApp, results in a peculiar visual glitch. In the task switcher, the snapshot of the app displays the keyboard as invisible, while the text input view and messages remain visible, creating an odd and potentially jarring appearance.
- Left Side of Video (WhatsApp): The left side of the video demonstrates the common occurrence seen in most apps, where the keyboard snapshot is invisible, but the text input view and messages are visible in the task switcher.
- Right Side of Video (Tempo): On the right side, Tempo Messenger addresses this subtlety by introducing a covering view when the app goes into the background with an active keyboard. This deliberate adjustment removes the awkward visual inconsistency seen in many other apps.
This improvement may not cause direct inconvenience to users, as it aligns with the default behavior of iOS. However, we recognized that users might perceive this inconsistency as a sign of sluggishness. A proactive approach in covering the keyboard area during background transitions enhances the overall visual integrity and user experience, setting it apart from the conventional norm observed in many iOS apps.
4. Maintaining Keyboard Focus Post Context Menu Interaction
In this improvement, we address an issue related to keyboard behavior when a user interacts with a context menu while composing a message. The accompanying video illustrates the difference between the default behavior, as observed in WhatsApp, and the enhanced approach in Tempo Messenger.
- Left Side of Video (WhatsApp): On the left, observe the behavior in WhatsApp, where the keyboard is active, and the input text view has focus. Long-pressing a message to open the context menu, and tapping outside the menu, results in focus change, causing the keyboard to be hidden. Consequently, users need to tap the input text view again to resume typing.
- Right Side of Video (Tempo): Contrast this with Tempo Messenger on the right. While the keyboard is active, and the input text view has focus, long-pressing a message to open the context menu, and tapping outside the menu, keeps the keyboard active, and the input text view focused. As a result, users can seamlessly continue typing without the need to re-tap the input text view.
This enhancement streamlines the user experience by eliminating the unnecessary step of reactivating the keyboard after interacting with the context menu, allowing uninterrupted message composition and a smoother overall messaging flow.
5. Clear and Comprehensive Context Menu for Long Text Messages
In this improvement, we address a common challenge related to context menus and long text messages within message bubbles. The accompanying video vividly showcases the contrast between conventional behavior, as seen in the Telegram app, and the enhanced approach implemented in Tempo Messenger.
While long-pressing a message bubble in messaging apps triggers a context menu, the issue arises when the message contains extensive text that doesn’t fit within the screen’s height.
- Left Side of Video (Telegram): On the left side, the video demonstrates the behavior in Telegram, where a long text message triggers the context menu, but the message for the menu does not scale or fit within the screen, resulting in a partial display.
- Right Side of Video (Tempo): On the right side, Tempo Messenger addresses this limitation by introducing a scaling mechanism. When long-pressing a message with a lengthy text, the context menu appears with the message appropriately scaled to fit within the screen. This deliberate adjustment ensures that users can view the entire message without any truncation.
While the improvement may not cause direct inconvenience to users, it provides a clear and comprehensive context menu experience, making the purpose of the context menu clear and improving the overall usability of the messaging interface.
6. Dynamic Font Size Handling in Real-time
In this improvement, we focus on the dynamic font size handling in messaging apps, highlighting the contrasting approaches taken by conventional apps and the optimized method employed in Tempo Messenger.
- Left Side of Video (Telegram): On the left, observe Telegram’s behavior when changing the text size to 135% while the messaging view is active. Despite the adjustment, there is no immediate impact on the text within the app.
- Right Side of Video (Tempo): Conversely, Tempo Messenger, as shown on the right, excels in dynamic font size handling. Changing the text size to 135% immediately applies the adjusted font size to all relevant views with text, including message bubbles and the input text view.
This enhancement ensures that users who employ dynamic font size settings will observe instant and consistent changes across the messaging interface.
7. Dynamic Height Adaptation for List View Text Input
Tempo, a productivity-focused messaging app prioritizing efficiency over mere social connections, takes a step further in its identity with Version 2. Among the new features introduced is the ability to seamlessly transform messages into tasks, enhancing the app’s utility beyond traditional messaging functionalities.
We identified several enhancements for our existing task app, one of which addresses a nuanced user experience in subtask input handling.
- Left Side of Video (Microsoft ToDo): Microsoft ToDo, showcased on the left, employs a single-line input approach for entering subtasks. Regardless of the text length, subtasks are input in a single line, similar to writing in a UITextField.
- Right Side of Video (Tempo): Tempo Messenger, featured on the right, introduces a dynamic subtask input handling mechanism. When entering subtasks, the number of lines automatically adjusts based on the current text length, dynamically resizing the view’s height. This adaptive approach provides a more user-friendly experience, allowing users to input subtasks with varying lengths seamlessly.
The improvement highlights the importance of thoughtful design choices in various application scenarios, showcasing a commitment to user-centric design.
Conclusion
In closing, I encourage readers to contemplate the journey through these UX enhancements. While each insight may appear modest, the cumulative effect has the potential to make a substantial difference. It is my sincere hope that this exploration serves as a source of inspiration, offering valuable takeaways for UX designers, developers, or any contributors striving to enhance their own products.
Thank you for reading. If you’re intrigued by the enhancements derived from findings through observations and eager to experience them firsthand, try Tempo Messenger, and discover how thoughtful design choices can redefine your user experience.
The videos were taken with the latest apps as of January 8th, 2024: Tempo 2.0.0, WhatsApp 23.25.85, Telegram 10.5.2, Microsoft To Do 2.112.
