Cross-platform Design considerations

Cs Dr. Seema Al Raisi

Considerations When Designing Cross-platform Experiences

When creating a digital content new product or feature, it's important to

consider the different platforms on which users will interact with the
design. These platforms assist as the medium through which users
engage with your product.
Some common platforms(devices) are:
▪ Desktop computers,
▪ Laptop computers,
▪ Mobile phones,
▪ Tablets,
▪ Wearables like smart watches,
▪ TVs, and Smart displays.
Cross-platform meaning work across multiple types of platforms or operating environments.
Considerations When Designing Cross-platform Experiences

Screen Size
Functionality

Interaction Access to the Internet

Content Layout Reduce Load Time

Considerations
1.Screen size

The first consideration when designing for different platforms is adjusting design
elements and features to fit different screen sizes. For example, you have a lot of
screen space when you design for desktop and laptop computers.

But when you design for smaller screens, like mobile phones, you have to decide
which parts of the design you'll or give more attention to when designing for
smaller screens.

Content should be responsive (adjust )to any screen size for a consistent user
experience regardless of the device they're using.
 2. Interaction

In addition to the size of the screen, you also need to consider the way users
interact with each platform and how those interactions might affect your design
decisions.

It’s also critical to consider accessibility when developing your designs at each
point.

Different groups of people will interact with your product in different ways, like using
a screen reader, closed captioning, or a switch device.
3. Content layout

▪ layouts refer to the way that information is organized on the screen.

▪ When designing for desktop or laptop computers, you have the advantage of
working with a familiar, standardized size: landscape (horizontal) mode. The screen
is wide, content can be placed out in columns, and there’s much more flexibility to
design.
▪ In mobile phone content is usually are organized in
portrait (vertical) mode, which is ideal for scrolling.

▪ In addition, mobile phones often allow users the option

to use landscape (horizontal) mode by rotating their
device. Implementing this in your designs requires more
work from you as a designer but provides users with a
wider range of options.
4. Functionality

• There are a lot of reasons why users might choose one platform over another, but
functionality and the kind of tasks they want to complete is a huge driver. Your
designs for each platform will likely vary based on how and when you expect users to
need the product.

• A mobile-first design philosophy is related to the practice of progressive

enhancement, which is designing for the smallest and most basic version of a product
before creating larger, more complex versions.

• By starting with a small screen size, designers have to choose the most important
elements to place in order on the screen. This approach contrasts with graceful
degradation, which is designing for a larger screen with a lot of features and
interactions first, then scaling back the designs to fit a smaller screen.
5. Access to the internet

▪ More people are using smartphones as their main way of accessing the

internet.

▪ According to the World Advertising Research Center, by 2025, it's estimated

that 72% of internet users will rely only on smartphones. This trend is

especially important for the Next Billion Users, who are new to the internet

and mostly use mobile devices.

5. Access to the internet

▪ Due that Designers need to apply mobile-first philosophy to arrange mobile-friendly

designs to reach this growing audience effectively and create user friendly

experiences

▪ As you start your UX design career, you need to be able to think about the devices

that users are most likely to experience the product on, and design with that device in

mind.
6. Reduce load time

▪ Mobile-first designs help users quickly access content because fewer elements
and features have to load.
▪ This is important because mobile phones don’t have as much computer power
as desktop computers do. If you design for a larger screen size first, it can be
difficult later to include all of the design elements of a complex screen into a
smaller one without impacting load time. This is just another reason why a
mobile first design philosophy can be useful.
 Four (4) Cs of Designing for Multiple Platforms
To provide a great user experience across devices, The designer
keep in mind the four (4) Cs:

Consistency

Cs Continuity
Context
Complementary
Consistency meaning keeping the
Continuity in design is when Context thinking about when Complementary: Refers to the
same look and feel across
user can start doing something and how users prefer to ability of a software
platforms for a unified experience.
on one device and finish it later interact with certain features application, website, or system
Consistency improve the user
on another without losing any on different platforms. to function effectively across
experience and build user trust,
progress in between. different operating systems,
because users can expect the
design to feel familiar across Example browsers, or device types
Example A user has an email app on
platforms and products. In google A user should be able both their laptop & Example
to start writing an email on smartwatch. They’re probably On the Gmail app, you get
Example
their laptop, save it as a draft, not going to compose an entire quick notifications and easy
No matter which Google
and finish that email later on email on their small attachments. On the laptop,
product or platform user use,
their mobile phone. smartwatch screen, but they you have more features like
he will find the colors red,
blue, yellow, and green might still want to get keyboard shortcuts. But you
integrated throughout the notifications about new emails can easily switch between both
design. or read important messages. when writing emails.
 Four (4) Cs of Designing for Multiple Platforms
C Description Example
Using the same logo and color
Consistency meaning keeping the same look and feel across
Consistency platforms for a unified experience.
scheme in a mobile app, website,
and desktop software.

Continuity in design is when user can start doing something on Allowing users to start a task on
Continuity one device and finish it later on another without losing any their smartphone and finish it on
progress in between. another device.

Context in simple terms means considering the current situation

Simplifying navigation for mobile
or needs of the user to provide relevant information or
Context experiences. Or thinking about when and how users prefer to
apps to accommodate smaller
screens and touch inputs.
interact with certain features on different platforms.

Complementary design means making sure your website or app

Ensuring a website is easy to
works smoothly on all devices and adds special features for each
C omplementary. one. This ensures everyone has a great experience, whether navigate on both mobile phones and
desktop computers.
they're using a phone, tablet, or computer
 More examples

C Example
Microsoft Office, consistency in the placement of tabs refers to keeping the
Consistency location of menu tabs the same, making it easier for users to find and use
commands consistently across applications like Word and Excel.
WhatsApp's multi-device feature offers a great example of continuity, allowing
Continuity you to switch between your phone and laptop for a smooth and uninterrupted
WhatsApp experience.
A weather app displaying the forecast based on the user's location is using context
Context to provide relevant information.

In Microsoft Word's mobile app, users enjoy simplified editing and quick
formatting. On the desktop version, advanced features like macros and
Complementary collaboration tools are available. Both platforms offer seamless transitions for
creating and editing documents
 Accessibility, Inclusive Design, and Equity-focused Design

When we talk about accessibility, we are talking about

how to make a product accessible by people with
different abilities.

But when we talk about inclusive design, we're looking to difference, to their
different experiences and their needs, because of their different capabilities.
And gathering these insights, and applying it in a way that it will benefit
everyone, whether they have a disability or not.
 Designing and building digital products should begin with inclusive design.
Inclusive design is a set of principles that help define responses to issues of
diversity and enable products to be developed to address the needs of a broad
range of users with different levels of ability.

To design for inclusion, we need to recognize exclusion and understand when it

happens and why. Exclusion can happen by not recognizing our own biases within
our designs. Exclusion happens when we do not think about all the possible ways
the product will be used and by whom.
 There's another important factor to being inclusive:
equity-focused design.

Equity-focused design means thinking through all the aspects of a designed product
and making sure the product is both accessible and fair to all races, genders,
abilities, age, and socioeconomic status. Also, the designs need to specifically
consider underrepresented and excluded groups.
01 Designing Forms

02 Avoid Bias on Gender

03 Using Inclusive Images

04 Consider Low-end Devices

Equity-focused Design Representation

05 Consider Literacy