4 minutes Designing digital interfaces always begins with a crucial step: assessing the needs of the target audience. This is necessary because different groups prefer various tools, which can influence the structure and even the functionality of the user interface.
A classic desktop interface is primarily used for information gathering, research, more leisurely browsing, or gaming. We perform more complex, longer, and more challenging tasks on it. Most of us open multiple panels for multitasking, facilitated by the larger screen size of a desktop.
Source: unsplash.com
The disadvantage of desktop devices is that they are less portable due to their size, so they cannot provide continuous presence and connection for the user. Therefore, apps and online interfaces that users would like to take with them outside the comfort of their home or office should be designed for synchronization across multiple devices.
The browsing behavior of mobile users differs significantly: they strive to obtain the desired information as quickly as possible with minimal unnecessary detours. The ultimate goal becomes more focused than, for example, on a PC. Many also use their smartphones as work tools, using them while traveling or walking. However, this means that uninterrupted screen attention is not possible. Shared attention requires solutions that highlight only the most essential information with the most convenient access, alongside the logical prioritization of elements and functions. During the design process, simple, straightforward interactions can help the user. Automation greatly contributes to this, both through the use of predictive texts and location determination; additionally, collapsible content, menus, and widgets can be incorporated to minimize scrolling.
forrás: wizzair.com
For mobile interfaces, it is worth considering the device and operating system functions and integrating them with the given interface (e.g., making phone calls, saving numbers as contacts, writing emails, using the camera). The disadvantages of mobile device usage include push notifications that can disrupt browsing and mobile data usage, which can make it challenging to load data-heavy content. Therefore, efforts should be made to reduce or possibly eliminate large files.
Screen Size, Navigation, Layout
As mentioned earlier, one of the noticeable differences between platforms is the screen size and the resulting layout. On desktops, the wider field of view and horizontal layout require more intensive eye movement, so it is not advisable to run textual content from edge to edge. More empty space allows for an airier, easier-to-overview, organized design with room for more functions and content. However, the ample space available is not an invitation to use every single pixel. In navigation, balance must be found to prevent the user from getting lost on an overcrowded page or in “infinite scrolling.” It must be kept in mind that interactions occur with an external device: a mouse or touchpad. This is less natural than interaction with our fingers, so navigation should be made more comfortable.
On mobile, the available space is limited both in display and interactions. Here, we mainly use a portrait format, but by rotating the device, a landscape layout can be provided, for example, for viewing videos or playing games. Since the same content is compressed into a smaller space on a web page, the length of the content can increase. Therefore, the design should aim for more comfortable readability and avoid long scrolling, for instance, with collapsible functions. On mobile devices, the navigation tool is our finger, mainly the thumb. With this finger, we can comfortably reach only a limited part of the screen. Hence, the most important interactions and CTAs should be placed at the bottom of the screen. Due to the size limitations of fingers (the contact area is about 7 mm wide, practically equivalent to 48 pixels), the size of buttons and the distance between elements should not be overly restricted, as this can make interaction difficult or impossible.
forrás:Medium
A tablet forms a transition between the two devices mentioned above. These devices are still comfortably portable while allowing for more content display and a more spacious layout. Thus, tablets enable the integration of both experiences.
Platform-Specific Products
The specific characteristics of different interfaces also show up in the design of some cross-platform products. To perfect space utilization, a different structure is used for products like Spotify or Gmail. This is called multidimensional design. In this structure, the many available functions are organized in a systematic, multidirectional layout for desktop display. On mobile devices, this layout transforms, emphasizing different functions to allow the user to comfortably see the main interaction options and focus only on what is most important to them.
For example, writing a new email in the Gmail system appears as a pop-up button in the lower right corner on desktops and tablets (2-dimensional), but on mobile, it takes up the entire screen for more comfortable typing and reading.
Source:Medium
A striking example can also be found in Spotify: the functions of a single desktop view are distributed across 4 mobile screens (thus enabling both horizontal and vertical navigation on the desktop).
Source:Medium
Sources:
https://bootcamp.uxdesign.cc/mastering-the-four-cs-of-designing-a-product-for-multiple-platforms-97623ea1c52b
https://curiouscore.com/resource/differences-between-designing-for-mobile-and-web/
https://medium.com/thinking-design/designing-for-different-screens-and-devices-7-steps-to-creating-a-great-ux-49f237a8b972
https://blog.snappymob.com/web-vs-mobile-ux-designing-for-different-behaviors-goals-and-limitations
https://uxplanet.org/desktop-vs-mobile-design-the-only-rule-you-must-know-8ac71714450a