Unit-5

The Cast

In UI design, "The Cast" refers to the collection of UI elements that make up a user interface. While
windows, menus, dialogs, and buttons are important parts of a graphical interface, they should not be
the sole focus of design. Instead, designers should understand why these elements exist and how they
contribute to the overall design before incorporating them into a system. It highlights the importance of
considering the purpose and effects of each component to create a well-designed and user-friendly
interface.

Menu Design Issues

A menu is a graphical control element that presents a list of options or commands to users. It is a
common UI component used to provide navigation and access to various features, functions, and
settings within an application or website.
Menus are typically displayed as a list of text-based or icon-based items that can be selected by the user.
When a menu item is selected, it can lead to different actions, such as opening a submenu, executing a
command, navigating to a different section or screen, or displaying additional options or settings.

Hierarchy of menus
Designing menus with a clear and logical hierarchy is essential for ease of use. Users should be able to
understand the relationships between menu items and easily locate the options they need. Hierarchy of
menus involves arranging menu items in a logical and hierarchical manner to facilitate navigation and
ease of use for the users.
A hierarchical menu structure typically consists of multiple levels or tiers, with higher-level menus
serving as top-level categories and lower-level menus providing more specific options within those
categories. This hierarchy helps users understand the relationships between different menu items and
navigate through the options more efficiently.
Drop down menus

Drop-down menus are a common menu type that presents a list of options when users interact with a
menu item. Designers need to ensure that drop-down menus are intuitive, easy to navigate, and don't
present usability issues such as accidental triggering or hiding important content.

Drop-down menus are commonly used in user interfaces to conserve space and present a compact set
of choices. They are often indicated by a downward-pointing arrow or triangle next to the menu item.
When users click or hover over the menu item, the drop-down menu appears, displaying a list of options
that can be selected.

GM COLLEGE | JHALNATH CHAPAGAIN

Pop up menus

Pop-up menus, also known as right-click menus, are a type of menu that appears when user interacts
with a specific element or performs a particular action, typically by right-clicking on the element. These
menus should be well-timed, visually consistent, and offer relevant options to enhance user workflow.

Pop-up menus are designed to provide quick access to contextually appropriate actions or settings,
allowing users to perform specific actions on the selected element without navigating to a separate
menu or interface.

Standard menus (common menus which exist everywhere)

Standard menus, such as file menu or edit menu, should follow established conventions and be
consistent with the platform or industry standards. This familiarity helps users understand and navigate
the menu system more efficiently.

Ex:

 The File Menu

 The Edit Menu
 The Windows Menu
 The Help Menu

Optional menus:

Optional menus provide additional features or advanced options that may not be commonly used. Care
should be taken to avoid overwhelming users with too many options or making essential features
hidden within optional menus.

a. The View Menu

The view menu should contain all options that influence the way the user looks at the program's data.
Additionally, any optional visual items like rulers should be controlled here.

b. The Insert Menu

The insert menu is extension on edit menu. If program needs insertion for less items this can be included
to Edit Menu, else separate Insert Menu is created.

c. The Format Menu

This is weakest of the optional menus which deals almost exclusively with properties of visual items and
controlled by direct manipulation not by functions. The page setup which is normally kept in the File
menu can be kept here.

d. The Tools Menu

GM COLLEGE | JHALNATH CHAPAGAIN

The Tools Menu contains powerful functions and options that enhance the program's capabilities. It
typically includes features like spell-checkers, find and replace tools, and goal finders. The spell-checker
helps users identify and correct spelling errors within the program's data. The find and replace function
enables users to search for specific text or data and replace it with another value or expression.
Additionally, the Tools Menu may provide advanced settings that allow power users to customize the
program's behavior or performance. For example, in a database program, the Tools Menu might offer an
SQL editor, enabling power users to directly edit SQL statements for more control over database
operations.

System menu:

The system menu is a small menu that appears in the upper left-hand corner of independent windows in
a computer program. In older versions of Windows, it was represented by a little box with a horizontal
bar, but in modern versions like it's replaced by the program's icon. This menu doesn't have many
functions or options of its own. It is automatically added by operating system, so the program designer
doesn't have much control over it.

Menu item variation: Menu item variation refers to the different options and features that can be
present in a menu. It encompasses the various ways in which menu items can be designed, organized,
and behaves within a user interface. Menu item variation can include:

Disabling Menu Items:

In a standard Windows interface, it is common practice to disable or gray out menu items that are not
relevant to the currently selected data or context. This helps users understand what actions they can
and cannot perform. By disabling irrelevant menu items, users are guided towards available options and
avoid confusion.

Cascading Menus:

Cascading menus are a variation of menus where a secondary menu pops up alongside a top-level menu.
This technique allows for nested options and hierarchies. While regular popup menus provide a simple
grouping of options, cascading menus introduce the concept of submenus, enabling more complex
menu structures. However, nesting and hierarchies can make menus more challenging to navigate.

Flip-Flop Menu:

The flip-flop menu is used when the menu choice offered is binary, meaning it has two states. Instead of
having separate menu items for each state, a single menu item is used to display one option at a time.
For example, instead of having "Display tools" and "Hide tools" as separate menu items, a flip-flop menu
would show either one based on the current state. This approach saves space and provides a more
concise menu representation.

GM COLLEGE | JHALNATH CHAPAGAIN

Graphics on Menus:

Including visual symbols or icons next to text items in menus helps users differentiate between options
without relying solely on reading. These graphics enhance understanding and speed up menu
comprehension. They also create visual consistency with related elements, such as toolbar icons,
providing a helpful connection between different interface components.

Bang Menu Item:

A bang menu item behaves like an immediate action on a popup menu. Rather than displaying a
submenu for further selection, selecting a bang menu item immediately executes a specific function.
This immediate execution can be disorienting (to cause somebody to feel lost or confused, especially
with regard to direction or position) for users, as it is unexpected and differs from standard menu
behavior. However, bang menu items are sometimes used for functions that are frequently accessed
and do not require further user input.

Accelerators:

Accelerators provide an optional way to invoke menu functions using keyboard shortcuts. They typically
involve function keys or combinations of keys with prefixes like 'CTRL', 'ALT', or 'SHIFT'. Accelerators are
displayed on the right side of the menu items, indicating the keyboard shortcuts associated with each
function. While accelerators are a standard feature in Windows, their implementation can vary
depending on the designer's choices.

Mnemonics:

Mnemonics are keyboard shortcuts assigned to menu commands, running in parallel with direct
manipulation using menus and dialogs. They are represented by underlined letters in menu item labels.
Pressing the ALT key along with the underlined letter activates the corresponding menu command.
Mnemonics provide a keyboard alternative to accessing menu options quickly and efficiently,
complementing the direct interaction provided by menus.

GM COLLEGE | JHALNATH CHAPAGAIN

Dialog box
A dialog box is a small window that appears on a computer screen, separate from the main program
window, to interact with the user. It serves as a means of communication between the user and the
program, allowing the user to perform actions, provide input, receive information, or make choices.
Dialog boxes typically contain controls such as buttons, checkboxes, text fields, and dropdown menus to
facilitate user interaction. They often have a title bar, a main instruction or explanation, and buttons for
confirming or canceling actions. Dialog boxes can be used to display messages, prompt for input,
configure settings, or provide feedback on the progress of a task.

Suspension of interaction
Suspension of interaction refers to a state where the normal user interaction with a program or system
is temporarily halted or disabled. During this time, the user is unable to provide input or interact with
the program until the suspension is lifted.
There can be various reasons for suspending interaction. One common scenario is when a dialog box or
popup window appears, requiring the user's attention or input. While the dialog box is active, the main
program or system is typically inaccessible or disabled to ensure that the user focuses on the dialog box
and completes the required task.

Modal and modeless dialog boxes

Modal Dialog Boxes:

Modal dialog boxes are designed to capture the user's immediate attention and require them to address
the dialog before continuing with the main program or system. When a modal dialog box appears, it
suspends interaction with the rest of the interface, essentially putting the main program on hold until
the dialog box is closed. This means that the user cannot interact with any other part of the program or
system until they have dealt with the dialog box.

Modal dialog boxes typically contain a clear title or heading, along with an instruction or message that
informs the user about the purpose or urgency of the dialog. They often include buttons such as "OK,"
"Cancel," or "Apply" to allow the user to confirm or dismiss the dialog box. Modal dialog boxes are
commonly used to display critical alerts, error messages, or when important user input is needed to
proceed with a task.

When the save dialog box is open, the main program is suspended, and we cannot interact with it until
we have completed the saving process. This ensures that we focus on providing the necessary
information for saving the document properly. Once we have successfully saved the file or closed the
save dialog box without saving, we regain control of the program and can continue working on our
document or perform other actions.

GM COLLEGE | JHALNATH CHAPAGAIN

Modeless Dialog Boxes:
Unlike modal dialog boxes, modeless dialog boxes allow the user to interact with both the dialog box
and the main program or system simultaneously. This means that the user can freely switch between
the dialog box and the program without closing the dialog box or interrupting their workflow.

Modeless dialog boxes are often used as supplementary tools or enhancements to the main program.
They provide additional information, options, or functionality that can be accessed while the main
program remains active. For example, a modeless dialog box could serve as a help menu, displaying
contextual information or instructions related to the current task. It could also show real-time progress
or offer customizable settings that the user can adjust without having to leave the main program.

As we interact with the playlist manager dialog box, the music continues playing in the main program.
We can switch back and forth between the dialog box and the main program's interface, skipping to the
next song or adjusting the volume while still having access to the playlist manager. This way, you can
manage your playlist on the fly, add new songs, and make changes without disrupting your music
listening experience.

Problems with Modeless Dialog Boxes:

While modeless dialog boxes offer flexibility and uninterrupted interaction with the main program, they
can also present certain challenges or problems. Here are a few potential issues that can arise with
modeless dialog boxes:

Confusion: Modeless dialog boxes can be confusing because they look similar to modal dialog boxes but
behave differently. Users may expect modeless dialog boxes to act like modal ones, leading to
confusion.

Visual Clutter: Having multiple modeless dialog boxes open simultaneously can make the screen look
messy and disorganized, making it harder to find information.

Too Many Choices: Modeless dialog boxes with numerous options can overwhelm users and make
decision-making difficult.

Loss of Focus: Constantly switching between the dialog box and the main program can make it hard to
stay focused on the task at hand, leading to mistakes or decreased productivity.

Inconsistent Information: Modeless dialog boxes may not always show the most up-to-date information
from the main program, causing confusion and potential errors.

GM COLLEGE | JHALNATH CHAPAGAIN

Solutions for Modeless Dialog Boxes:

Visual Differentiation: Make modeless dialog boxes visually distinct from modal ones using colors,
patterns, or images. Change the appearance of buttons and other elements to help users differentiate
them easily.

Consistent Terminating Actions: Use a consistent and simple terminating action like "CLOSE" or "GO
AWAY" for all modeless dialog boxes. Place the termination button in a consistent location, such as the
lower right corner.

Use Toolbars: Consider using toolbars instead of modeless dialog boxes. Toolbars provide easy access to
frequently used options and are visually different, reducing confusion.

By implementing these solutions, modeless dialog boxes can be made clearer and easier to understand,
helping users navigate the interface more effectively.

Different types of dialog box

Property Dialog Box: A property dialog box allows the user to view and modify the settings or
characteristics of a selected object, such as an application or document. It provides options to customize
various properties related to the object.

Function Dialog Box: A function dialog box is typically triggered from a menu and is often modal,
meaning it requires user interaction before other actions can be taken. It controls a specific function or
action, such as printing, inserting, or spell checking. The user can configure the details of the function's
behavior within the dialog box.

Bulletin Dialog Box: A bulletin dialog box is commonly used to display messages to the user, such as
error messages or confirmation messages. It follows conventions and typically includes a short text
message, program name in the caption bar, graphical indicators, and buttons for user response.

Process Dialog Box: A process dialog box is similar to a bulletin dialog box and is initiated by the
program itself, not the user. It informs the user that the program is busy with an internal function and
may temporarily be unresponsive. It serves as a notification to the user to avoid impatience and wait for
the program to complete its task

GM COLLEGE | JHALNATH CHAPAGAIN

Dialog box conventions
It refers to a set of standard practices and guidelines followed in the design and implementation of
dialog boxes in graphical user interfaces. These conventions ensure consistency, usability, and intuitive
interaction for users across different applications.

Caption Bars: Dialog boxes have a title bar at the top called the caption bar, which displays a description
of the dialog box's purpose. It allows users to move the dialog box and typically includes a close button.

Attributes: Dialog boxes include various elements such as labels, text boxes, checkboxes, and drop-
down lists. These attributes allow users to input data, make selections, and modify settings within the
dialog box.

Terminating Dialog Boxes: Modal dialog boxes have terminating commands like "OK," "Cancel," and
"Close." The "OK" button accepts changes and closes the dialog, the "Cancel" button discards changes
and closes the dialog, and the "Close" button in the caption bar also closes the dialog.

Expanding Dialog Boxes: Expanding dialogs provide additional controls or functionalities within the
same dialog box. They have a "More" or "Expand" button that reveals advanced options. The state of
the expanded or shrunken dialog should be remembered for the user's convenience.

Cascading Dialog Boxes: Cascading dialogs involve a hierarchical nesting of dialog boxes. One dialog box
triggers the appearance of another, such as a "Print" dialog leading to a "Print Setup" dialog. Care should
be taken to avoid excessive nesting and ensure the user's goals align with the dialog structure.

These conventions help create user-friendly dialog boxes by providing clear titles, intuitive attributes,
appropriate termination options, expandable functionalities, and logical cascading structures.

GM COLLEGE | JHALNATH CHAPAGAIN

Toolbars

A toolbar is a graphical user interface element that contains a set of buttons, icons, or other interactive
controls. It is typically located at the top or sides of a software application's window, providing easy
access to frequently used functions or features.

Toolbars often have a specific purpose, depending on the application they are part of. For example, in a
word processing program, a toolbar might include buttons for tasks like bold, italic, underline, and
alignment. In a graphics editing program, a toolbar may offer tools for drawing shapes, selecting colors,
or applying special effects.
Advantages over menu
Toolbars offer several advantages over menus in terms of user interaction and productivity. Here are
some advantages of toolbars over menus:

Direct Access: Toolbars provide immediate access to frequently used functions or tools without
navigating through menus.

Visual Representation: Icons or buttons on toolbars offer visual cues that are easier to recognize and
remember compared to text-based menu items.

Efficient Workflow: Toolbars streamline the workflow by eliminating the need to navigate through
multiple menu layers.

Space Optimization: Toolbars occupy less screen space, allowing more room for displaying content or
essential elements.

Customization: Toolbars are often customizable, enabling users to personalize their layout according to
their preferences and workflow.

Visual Feedback: Toolbars provide visual feedback by highlighting the active state of buttons or icons,
reinforcing user actions and interactions.

Momentary button and latching button

Momentary Button:
A momentary button, also known as a push-button or momentary switch, is a type of button that only
remains activated as long as it is physically pressed or held down. When the button is released, it returns
to its original position, and the action associated with it is typically only triggered during the brief period
of pressing. Momentary buttons are commonly used in various electronic devices and applications, such
as keyboards, game controllers, and doorbells.

GM COLLEGE | JHALNATH CHAPAGAIN

Latching Button:
A latching button, also referred to as a toggle switch or latching switch, is a type of button that stays in
its activated state until it is pressed again to toggle it off. Unlike a momentary button, a latching button
has two stable positions, typically indicated by an "on" and "off" position. When the button is pressed, it
clicks into one position and remains there until it is pressed again to toggle it to the other position.
Customizing toolbars
Customizing toolbars refers to the ability for users to modify or personalize the appearance and content
of a toolbar according to their preferences and workflow. This customization feature allows users to
add, remove, rearrange, or modify buttons, icons, or other interactive controls on the toolbar.

With toolbar customization, users can tailor the toolbar to their specific needs and priorities, making it
easier and more efficient to access frequently used functions or tools. They can choose to display only
the buttons they frequently use, remove those they rarely use, or add new buttons for specialized
functions they require.

The process of customizing toolbars usually involves accessing a toolbar customization menu or
interface provided by the software application. This interface allows users to drag and drop buttons,
rearrange their order, enable or disable specific functions, and adjust the toolbar's appearance, such as
its size or orientation.

GM COLLEGE | JHALNATH CHAPAGAIN