1)Screen-based controls are interactive elements displayed on a screen that allow users
to communicate with and control a software system. Their purpose includes:
● Facilitating user interaction by enabling inputs and selections (e.g., buttons,
checkboxes, sliders).
● Enhancing usability by offering intuitive ways to navigate and manipulate the
interface.
● Providing feedback based on user actions (e.g., highlighting selected options).
● Improving accessibility and efficiency for tasks like data entry, navigation, and
command execution.
2)Single-Line Text Box:
A single-line text box is a user interface element that allows the user to input a single
line of text. It is commonly used for short inputs such as names, email addresses, or
search queries.
Multiple-Line Text Box (Textarea):
A multiple-line text box, also known as a textarea, allows the user to input multiple lines
of text. It is suitable for longer inputs such as comments, messages, or descriptions.
3)Advantages:
— Pictures aid comprehension.
— Easy-to-compare choices.
— Usually consume less screen space than textual equivalents.
■ Disadvantages:
— A limited number of choices can be displayed.
— DifÏcult to organize for scanning efÏciency.
— Requires skill and time to design meaningful and attractive graphical representations
4)ToolTips are small pop-up windows that appear when the pointer hovers over a UI element,
typically one that lacks a visible label or requires additional explanation. They provide quick,
contextual information without cluttering the screen.
Enhancement to User Experience:
● They improve clarity by identifying unlabeled controls.
● Reduce on-screen clutter while offering helpful guidance.
● Help users understand functionality without needing external documentation.
5)static Text Fields
■ Description:
— Read-only textual information.
Group boxes
■ Description:
—A rectangular frame that surrounds a control or group of controls.
—An optional caption may be included in the frame’s upper-left corner
Column Headings
■ Description:
— Read-only textual information that serves as a heading above columns of text or
numbers.
— Can be divided into two or more parts.
Tool tips
■ Description:
— A small pop-up window containing descriptive text that appears when a pointer is
moved over a
control or element either:
• Not possessing a label.
• In need of additional descriptive or status information
Balloon Tips
■ Description:
— A small pop-up window that contains information in a word balloon.
— Components can include:
• Title.
• Body text.
• Message Icons.
Progress Indicators
■ Description:
— A rectangular bar that fills as a process is being performed, indicating
the percentage of the process that has been completed
6)A prototype enables a design to be better visualized and provides insights into how
the software will look and work. A prototype is a simulation of an actual system that can
be quickly created. A prototype may be a rough approximation, such as a simple
hand-drawn sketch, or it may be interactive, allowing the user to key or select data
using controls, navigate through menus, retrieve displays of data, and perform basic
system functions. A prototype need not be perfectly realistic, but it must be reasonably
accurate and legible. A prototype may have great breadth, including as many features
as possible to present concepts and overall organization, or it might have more depth,
including more detail on a given feature or task to focus on individual design aspects.
7)Operable Controls
Operable controls are those that permit the entry, selection, changing, or editing of a
particular value, or cause a command to be performed.
Classes include buttons, text entry/read-only, selection, combination entry/selection,
and
other specialized controls.
a) Buttons
Description:
— A square or rectangular-shaped control with a label inside that indicates action
to be accomplished.
— The label may consist of text, graphics, or both.
Purpose:
— To start actions.
— To change properties.
— To display a pop-up menu.
Advantages:
— Always visible, reminding one of the choices available.
— Convenient.
— Can be logically organized in the work area.
— Can provide meaningful descriptions of the actions that will be performed.
— Larger size generally provides faster selection target.
— Can possess 3-D appearance:
• Adds an aesthetically pleasing style to the screen.
• Provides visual feedback through button movement when activated.
— May permit use of keyboard equivalents and accelerators.
— Faster than using a two-step menu bar/pull-down sequence.
Disadvantages:
— Consumes screen space.
— Size limits the number that may be displayed.
— Requires looking away from main working area to activate.
— Requires moving the pointer to select.
Proper usage:
— Use for frequently used actions that are specific to a window.
• To cause something to happen immediately.
• To display another window.
• To display a menu of options.
• To set a mode or property value.
8)a) Radio Buttons
Description:
● A two-part control consisting of small circles, diamonds, or rectangles and choice
descriptions.
● When selected, an option is highlighted, and any existing selection is
unhighlighted.
Purpose:
● To select one item from a small set of mutually exclusive options (usually 2 to 8).
Advantages:
1. Easy-to-access choices.
2. Easy to compare choices.
3. Preferred by users.
Disadvantages:
1. Consumes screen space.
2. Limited number of choices.
Proper Usage:
● For mutually exclusive choices (only one can be selected).
● Best for discrete data with a small, fixed number of choices.
b) Check Boxes
Description:
● A two-part control with a square box and choice description.
● Each box can be independently switched "on" or "off."
Purpose:
● To set one or more options as either on or off.
Advantages:
1. Easy-to-access choices.
2. Easy to compare choices.
3. Preferred by users.
Disadvantages:
1. Consumes screen space.
2. Difficult to align with other controls.
Proper Usage:
● For non-exclusive choices (more than one can be selected).
● Best for data that requires clear binary states (on/off).
c) List Boxes
Description:
● A box-shaped control containing a list of items from which a single or multiple
selections can be made.
● May be scrollable if the list is long.
Purpose:
● To display a collection of items, either mutually exclusive or non-exclusive.
Advantages:
1. Unlimited number of choices.
2. Always visible.
3. Reminds users of available options.
Disadvantages:
1. Consumes screen space.
2. Requires scrolling for large lists.
3. Unpredictable item ordering.
Proper Usage:
● For selecting values or setting attributes where there is a large number of
options.
d) Drop-Down List Boxes
Description:
● A control that shows one item with a button to display a list of choices.
● Selections are made by pointing and clicking.
Purpose:
● To select one item from a large list of mutually exclusive options when screen
space is limited.
Advantages:
1. Unlimited choices.
2. Conserves screen space.
Disadvantages:
1. Requires extra action to display the list.
2. Choices may need scrolling.
Proper Usage:
● When screen space is limited.
● For mutually exclusive options where many choices exist.
e) Palette
Description:
● A control consisting of graphical alternatives like colors, patterns, or images.
● Often presented in a pop-up menu or toolbar.
Purpose:
● To set one of a series of mutually exclusive options presented graphically.
Advantages:
1. Easy-to-compare choices.
2. Pictures aid comprehension.
3. Takes up less screen space than text-based controls.
Disadvantages:
1. Limited number of choices.
2. Difficult to organize efficiently.
a) Radio Buttons
● Example: In a survey form where a user has to choose their preferred mode
of transportation (Car, Bus, Bike), only one option can be selected.
●
● b) Check Boxes
● Example: A settings page allowing users to select multiple notification
preferences (Email, SMS, App notifications) where more than one option
can be chosen.
●
● c) List Boxes
● Example: A dropdown list of country names where users can select a
country for shipping options. Users can select only one country from the
list.
d) Drop-Down List Boxes
● Example: A form where users choose their state or province from a long
list of options, with the state selection appearing as a dropdown to save
screen space.
e) Palette
● Example: A color palette in a graphic design software where the user
selects a color from a set of color swatches for their design.
9)REFER PDF FROM PAGE NO 32 - 37 ( INCLUDE DESCRIPTION,PURPOSE,
DIAGRAM ALSO )
10)REFER PDF FROM PAGE NO 37 - 40 (INCLUDE DESCRIPTION ,
PURPOSE,ADVANTAGE ,DISADVANTAGE,EXAMPLE).
SAMPLE EXAMPLES :
Hand Sketches and Scenarios – A hand-drawn sketch of a fitness tracker app showing
basic screens like workout tracking and user profile.
Sketch Creation Process -A designer sketches a login screen layout on paper,
deciding where to place the username field, password field, and login button before
creating a digital prototype.
Interactive Paper Prototypes – A paper prototype for a hotel booking website, where
drop-down menus and buttons are represented by sticky notes.
Programmed Facades – A semi-functional UI prototype of a task management app
created in Adobe XD, allowing users to click and explore different pages.
Prototype-Oriented Languages – A Python-based UI prototype for a ticket booking
system, showcasing real-time availability and user interactions.
11)Features of the MusicWorld Mobile App Before Usability Test: ( 5 marks )
User Interface (UI) Design:
● Initial assessment of layout, color schemes, and typography to ensure a
visually appealing experience.
● Evaluation of navigation menus, buttons, and icons for ease of use.
● Identification of potential UI inconsistencies across different devices.
Navigation and Information Architecture:
● Testing the effectiveness of the menu hierarchy to ensure seamless user
flow.
● Assessing the organization of playlists, genres, and artist pages for
accessibility.
● Checking whether users can quickly access frequently used features with
minimal clicks.
Playback Controls:
● Reviewing the functionality and placement of controls like play, pause,
skip, and volume.
● Testing streaming quality across different network conditions.
● Identifying delays or glitches in audio responsiveness.
Search Functionality:
● Evaluating search speed and accuracy in finding songs, artists, or albums.
● Checking the use of filters and sorting options for better search results.
● Assessing whether misspelled searches still yield relevant suggestions.
Personalization and Recommendations:
● Reviewing how user preferences affect generated playlists.
● Evaluating content discovery based on past listening habits.
● Checking if recommendations align with user expectations or feel random.
Device Compatibility:
● Verifying performance on different screen sizes and resolutions.
● Ensuring the app runs smoothly on iOS, Android, and other operating
systems.
● Checking third-party integrations, such as Bluetooth compatibility with
audio devices.
Performance and Responsiveness:
● Measuring app loading speed and responsiveness to user actions.
● Identifying any lag or delay in UI interactions.
● Ensuring smooth transitions between screens and menus.
Features of the MusicWorld Mobile App After Usability Test: ( 5 marks)
Improved User Interface:
● Refined design elements for better aesthetics and consistency across
devices.
● Optimized button placements for easier usability.
● Introduction of custom themes and display modes like dark mode.
Enhanced Navigation:
● Streamlined menu structure for quicker access to key features.
● Added swipe gestures and shortcut controls for better user flow.
● Improved breadcrumbs and back navigation to avoid confusion.
Optimized Playback Controls:
● Smarter buffering algorithms to reduce playback interruptions.
● Haptic feedback support for key interactions like play/pause.
● Background play optimization, allowing seamless multitasking.
Enhanced Search Experience:
● Introduction of voice search for hands-free interaction.
● Improved auto-suggestions and predictive text in search results.
● Advanced filtering for searching by mood, tempo, or genre.
Tailored Personalization:
● AI-driven recommendations that better match user listening habits.
● Option to customize playlists with more granular controls.
● Personalized notifications for new releases and trending songs.
Extended Device Compatibility:
● Resolved cross-platform syncing issues, ensuring a seamless experience.
● Improved integration with smart speakers and wearables.
● Compatibility fixes for older operating systems to prevent crashes.
Performance Optimization:
● Reduced app load time to improve responsiveness.
● Improved battery efficiency for longer listening sessions.
● Optimized offline mode for better caching and playback without an internet
connection.