Inclusive User Interface

Design Guidelines

Pratiksha Trust
User Interface Design Guidelines
The User Interface Design Guidelines serve as a comprehensive resource
for developers aiming to create user-centric and visually appealing
applications consistent with MOSIP’s standards. This document
encapsulates essential elements of inclusive UX (User Experience) design,
offering insights into crafting interfaces that prioritize usability, inclusivity,
and aesthetic coherence. These design guidelines are derived from
MOSIP's extensive experience, user research, and industry best practices.
Additionally, they undergo rigorous evaluations and collaboration with
inclusivity experts to ensure their effectiveness. The broader vision is to
provide a comprehensive set of guidelines that can serve as a toolkit for
any developer building a DPI or DPG.

#1: Provide detailed task

information upfront
Empower users by providing all the necessary information needed to
complete a task. Without an understanding of all the steps and
information that a user needs to perform the task, users who like to form
a complete understanding of a task before acting on it may not feel
comfortable even starting the task and seek external assistance.
However, care must be taken to make sure to not overburden the users
with full documentation of the system - you have to ascertain the specific
information that users require for their current context.
Dos:
Offer clear instructions for each task and its subsequent steps

Don’ts:
Not providing enough information for the user to understand what
to expect

#2: Clearly Indicate Multiple

Paths to Achieve a Goal
When there are multiple routes to achieve a goal, inform users upfront
about the different options. Without a clear understanding of what the
options are, how much effort is required / benefits of each option, users
who are risk averse to trying out “strange” / unknown options will not do
so and end up pursuing options that are slower or error prone.
Additionally, if the options as well as efforts required are not clear, users
who are not tinkerers won't be able to find the best option forward.

Do:
Allow users to choose how to go about pursuing the goal, when there are
multiple workflows in place
Don’t:
Conceal alternative paths, leaving users unaware of their options and
limiting freedom

#3: Provide adequate cues for

user progression
It's essential to offer users sufficient cues to facilitate their progression to
the next step. Users who prefer learning through structured processes,
like tutorials or step-by-step guides, can feel lost and overwhelmed
without clear guidance on what to do next. Unclear directions may create
a barrier for users to proceed and they may seek external assistance.

Dos:
Give enough cues so that the user can select an action to get to the
next step

Don’ts:
Leave users guessing about the next step without clear guidance.
Assume users will figure out the next step on their own without
adequate cues
Overload the interface with unnecessary distractions that obscure the
next action
#4: If there are dependencies
between multiple user goals in
the same screen, make it clear
Clearly indicate dependencies between multiple goals on the same
screen and ensure that alternative routes to goals are available in the
design to maintain access to familiar features. Users with lower computer
self-efficacy and high risk aversion may blame themselves and stop using
the technology when faced with unfamiliar features. To support these
users and encourage continued use, provide access to familiar features
and information.

Dos:
Clearly highlight dependencies between user goals on the screen
Offer alternate paths and provide intuitive cues or indicators when
certain actions are dependent on others

Don’ts:
Present deadends where users cannot progress due to lack of
information or options
#5: Maintain internal consistency
Ensure consistency in both design elements and interaction patterns.
Users should not have to wonder whether they are on the right path and
whether different words and actions mean the same thing.

Dos:
Follow consistent design elements and interaction patterns
Use consistent wording

Don’ts:
Use different wording in the headings and buttons if they refer to the
same action / goal
#6: Maintain external consistency
Utilize real-world actions verbatim for clarity and external consistency.
Focus on helping users reach their goals as efficiently as possible rather
than on creating a nonconventional interface that people will need to
figure out.

Dos:
Mirror real-world actions in interface interactions.

Don’ts:
Assume the user will know the right action towards their goal
#7: Explain warnings and
negative outcomes
Users with lower computer self-efficacy may blame themselves and
cease using the technology when confronted with errors. To support
these users and encourage continued use, prioritize the communication
of errors and warnings. Clearly communicate potential negative
outcomes and next steps.

Dos:
Provide explanations for potential risks

Don’ts:
Leave users uninformed
#8: Add clear cues to explain
micro-interactions
Integrate obvious cues to elucidate microinteractions. Microinteractions,
such as scroll bars and swipe animations, are trigger-feedback pairs in
which the trigger can be a user action and the feedback is
communicated through small visual changes in the user interface. When
UI elements are inaccessible or invisible, users who prefer to learn in a
process-oriented manner are forced to resort to trial and error,
attempting every seemingly available option to advance.

Dos:
Clearly indicate microinteraction functions.

Don’ts:
Assume users will understand microinteractions intuitively
#9: Avoid cluttering and provide
necessary information
Enable users who prefer to read relevant information before taking action
to access as much detail as they desire, without necessitating excessive
time or effort. Optional access to additional details provides flexibility for
users to delve deeper into the information as needed.

Dos:
Streamline information presentation.

Don’ts:
Overwhelm users with unnecessary information.
#10: Provide feedback adequately
Display feedback and success screens to inform users that they have
achieved their objective. Following the feedback screen, clearly indicate
the next expected action, providing users with a clear path to progress.

Dos:
Provide clear and immediate feedback
Let users control when and for how long they see the screen
Offer clear instructions for the next steps

Don’ts:
Close the feedback screen before users can read it
Neglect to provide a way to proceed
#11: Explain the “why” behind
requested details and actions
Explain to users why certain details or actions are necessary - this
enhances their understanding, and promotes transparency, specially
when requesting sensitive and private information, such as user location.
Keeping users informed would enable users who are motivated to
investigate and learn to assess the purpose and benefits of required
actions. Additionally, this also supports users who are risk-averse with
technology by allowing them to make informed decisions and choose
whether to move forward.

Dos:
Explain why requested details are necessary

Don’ts:
Overwhelm users with technical jargon or complex explanations