Mobile Overview
Mobile at Workday
Users are accessing Workday on their portable devices now more than ever - with over 30 million mobile users (and counting)! In 2022, the monthly growth of active mobile users has consistently outpaced web. As more users are utilizing mobile devices, they have come to expect the same quality experience that they receive on the web. To keep up with changing needs of Workday users, Workday has committed to improving UX across web and mobile experiences.
In the past, Workday products were designed for desktop users and without mobile considerations in mind. These desktop based designs often did not take smaller screen sizes, different interaction types or device specific capabilities into account. This resulted in a heavier lift for mobile teams tasked with translating desktop centric designs into mobile experiences – forcing them to choose between creating optimal mobile experiences or maintaining a familiar experience between platforms.
Building Mobile Experiences with Canvas
Canvas enables product teams to design and build a more connected, familiar and optimized experience across web and mobile.
Canvas Web components are built to be responsive, allowing them to morph and adjust to different screen sizes. Certain web components are also built with touch based behavior that allow their functionality to change in response to touch interactions. For example, the Canvas Web Tab component will switch from displaying an overflow menu to supporting left to right scrolling in order to replicate the native mobile experience. This helps enhance non-native mobile experiences like Mobile Web and WebView that are built using web based technology.
An Android and iOS version of Canvas is also available to help teams build native mobile experiences. Both libraries are built alongside web to ensure consistency between web and mobile UI elements while preserving the core platform needs for those UI elements. This means that a Canvas Web Primary Button will have the same look and feel as a Primary Button in Canvas Android and Canvas iOS, but certain aspects, like the tap target size, may differ to optimize it for each platform.
Building with Canvas allows teams to create cohesive experiences by synchronizing their design styles cross platforms. Focusing on the mobile experience can result in:
- Increased product adoption with more users, specifically those without access to a desktop, gaining access to the product
- Increased engagement as users are able to access the product more quickly and frequently
- Enhanced user experience through the use of device specific capabilities, making it quicker and easier for users to perform certain tasks or actions
- Improved cohesion across the product ecosystem
The Device Landscape
Mobile devices are constantly changing and evolving with new phones being released every year. Manufacturers like Apple and Samsung release several versions of a device each year with varying screen sizes and capabilities. They’re also accompanied by the release of new desktops, tablets and wearable devices that stretch the boundaries of what is considered “mobile.”
Mobile devices can include smartphones, tablets, and wearables. However, Workday’s current focus is on mobile smartphones. There are key distinctions between each device type that should be taken into consideration when crafting user experiences.
Screen Size
Screen real estate is the key constraint when designing experiences across the device landscape. Large desktop screens give designers more flexibility and space to design elaborate and detailed experiences with. However, smaller screens on tablets and smartphones require designers to minimize clutter, use larger tap targets and prioritize key features on the screen. The smaller the screen is, the more creative designers have to be to best utilize it. This makes it harder to translate designs created specifically for desktop experiences into smaller tablet or mobile screen sizes.
Smaller screens require designers to prioritize content and gradually disclose more details in a way that is discoverable.
Input Device
The input device is the item used to manipulate an interface. Certain input types are more common for certain devices. For example, the mouse or trackpad is more commonly used for desktops while a finger is more commonly used on touchscreen devices like tablets, smartphones, and wearable devices.
Each input device has certain benefits and constraints that should be considered in the design process.
| Input Device | Benefits | Constraints |
|---|---|---|
| Mouse | Mouses are more precise than touch based gestures and can provide non-decorative visual cues, like tooltips when hovering on certain UI elements. Product designers can create shortcuts by differentiating left vs. right side clicks and the frequency of the click in a small interval of time. | There are only a few click based combinations that can be made on a mouse by varying the speed and frequency of left and right clicks. Most click shortcuts, like zooming in and out, need to be hidden within a menu. |
| Finger | Fingers enable designers to use common gestures to perform key actions that do not need to be hidden within a menu. Standard gestures, such as tapping, swiping, or pinching are used to perform actions in a consistent way throughout the interface. Over time, certain gestures have become so familiar to users that they’ve come to expect it to be built-in with certain products as outlined in Jakob’s Law. | Fingers come in various sizes and the larger they are, the less accurate they may be when performing an action on devices with a small screen. As a result, small touchscreen devices require larger tap targets compared to desktop experiences. |
| Trackpad. | Like a Mouse, Trackpads also have cursors that allow users to make precise actions. The large surface area of the trackpad also allows for the use of certain gestures to perform quick shortcuts like zooming into or out of a page. | Trackpads do not have the full gesture capabilities that a standalone finger on a touchscreen has access to. Gestures that are force based like pressing cannot be detected by a trackpad. |
| Keyboards. | Keyboards allow users to input text into an interface. Physical keyboards allow users to quickly edit or input large amounts of data. Digital keyboards can take context into consideration. For example, an input requesting a dollar amount or a phone number would show you only valid input options (numbers). | Digital keyboards on tablets and smartphones are shrunken down and modified to fit the size of their screens. This makes it harder for digital keyboard users to edit or input large amounts of data. |
Desktop vs. Mobile
Desktops may be the primary device for most stationary desk or office workers, but there has been a rise in the amount of mobile dependent workers. Mobile dependent workers are those that may have inconsistent access to a desktop device, have situational needs that require them to be constantly available, or need to multitask on their desktop and smartphone simultaneously. These mobile dependent workers are typically front line workers and managers.
When taking the user’s motivation for going mobile and the various device attributes into consideration, there are distinct needs between desktop and mobile users:
- Discoverability: desktop users may sometimes benefit from more detailed menus or toolbars, but mobile users cannot afford to have fixed or complex menus due to their screen size limitation
- Data Density: desktop users with heavy data tasks may prioritize high data density that help them accomplish their tasks in fewer screens, but mobile users require content that are organized into multiple columns or smaller incremental pieces
- Prioritization: all content and features must be prioritized accordingly for mobile users to minimize clutter on a small screen size and draw the user’s attention to the primary task at hand
The Mobile-First Approach
Mobile first is the practice of thinking about, designing and building the mobile experience first and then adapting it for larger screens, instead of the other way around. This approach allows teams to think critically about what matters the most across various form factors. Minimizing clutter and simplifying key tasks or processes tends to provide a more intuitive and streamlined user experience overall.
A Mobile first approach does not mean squishing down web experiences into smaller screen sizes. It involves understanding that the motivation and context of mobile users are different from desktop - how they interact (touch) what they are able to do (geotracking, voice recording). This creates a better experience that focuses on the core essentials, simplifying the UI and increasing the scalability of the design across different devices and screen sizes.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #canvas or #canvas-kitchannels on Slack.
FAQ Section