KONGU ENGINEERING COLLEGE, PERUNDURAI 638 060

CONTINUOUS ASSESSMENT TEST 3

(Regulations 2020)

Month and Year : October 2023 Roll Number:

Programme : B.E Date : 18.11.2023
Branch : CSD Time : 2:30pm to 04:00pm
Semester : V
Course Code : 20CDT52 Duration : 1 Hour 30 Minutes
Course Name : User Interface Design Max. Marks : 50

PART - A (10 × 2 = 20 Marks)

ANSWER ALL THE QUESTIONS

1. List out the three approaches of mobile interface design. (2 mark) [CO4] [K1]

1. Adaptive

2. Response

3. Mobile-First

2. Recall the touch target size for the following devices in dp/pt. [CO4] [K1]

a) Android devices - 48 × 48 dp (1 mark)

b) Apple iOS devices - 44 × 44 dp (1 mark)

3. How to Optimize the Most Common Interaction Sequences? (2 mark) [CO4] [K2]

1. What Do Users in a Mobile Context Actually Need?

2. Strip the Site or App Down to Its Essence

3. If You Can, Use the Device’s Hardware

4. Linearize Your Content

5. Optimize the Most Common Interaction Sequences

4. Define Lazy Loading. (2 mark) [CO4] [K1]

• An approach to managing lists of undefined length is often called lazy loading.

[OR]

 you could use no button at all at the bottom of the scrolled screen. After the
user has loaded and can view the first chunk of items, silently start loading the
next chunk. Append them to the visible list when they’re ready, and the user has
scrolled down to the end of the original list.
5. Differentiate Pop-Up Menus and Drop-Down Menus [CO5] [K2]

• Pop-Up Menus (1 mark)

– Also known as context menus, pop-up menus are raised with a right-
mouse click or some similar gesture on panels or items.

– They usually list context-specific, common actions, not all the actions
that are possible on the interface.

– Keep them short.

• Drop-Down Menus (1 mark)

– Users raise these menus by clicking on a drop-down control such as a

combo box.

– However, drop-down controls are intended for selecting choices on a

form, not for performing actions.

– Avoid using them for actions.

6. Design a structured format for the following data. [CO5] [K2]

a) Phone Number – (country code) (area code) (subscriber number) (1 mark)

b) Date - “dd/mm/yyyy” (1 mark)

7. Write short note on top aligned labels with example. (2 mark) [CO5] [K2]

• Top-aligned labels are those that appear above the user input fields, instead
of to the left.

• Using this alignment works best for responsive-design screens because the
components can stack vertically without a change to layout.

• There is less chance the label and input will become misaligned.

2
8. Design a password strength master and error message for login purpose. (2 mark) [CO5] [K2]

• Give the user immediate feedback on the validity and strength of a new
password while it is being typed.
• While the user types their new password or after keyboard focus leaves the text
field, show an estimate of the password strength beside the text field.
• At minimum, display a text and/or graphic label indicating a weak, medium,
or strong password, and special wording to describe a too-short or invalid
password.
• Colors help:
– red for unacceptable,
– green or blue for good, and some other color (often yellow) in between

9. Define Placeholder Text. Give example place holder text for the following action [CO5] [K1]
control.

• Prefill a text field with an example input or instructional text that helps the
user with what to do or type.

• This is also called placeholder text. (1 mark)

• Choose an appropriate prompt string: (1 mark)

a) For a drop-down list, use Select, Choose, or Pick

b) For a text field, use Type or Enter

10. Suggest any two supporting text entry ideas to enter the input in a text field. (2 mark) [CO5] [K2]

1. Input Hints,

2. Input Prompt,

3. Forgiving Format,

4. Autocompletion, and

5. Good Defaults and Smart Prefills

3
 Part – B (3 × 10 = 30 Marks)
ANSWER ANY THREE QUESTIONS

11. Design a mobile app for bus ticket booking app (like abhibus, redbus, etc) with at (10) [CO4] [K3]
least five creative action and controls. (10 mark)

2.Source /
1.Sourse, Destination 3. Selection Travels
Destination City 4.Select Seats
and Date Selection Type
Search

5.Select Boarding 6. Select Dropping 7. Enter Passenger

8.Confirm Payment
Point Point Details

4
12. Design an any web/mobile app by using the following mobile interface design (10) [CO4] [K3]
patterns.
a) Vertical Stack (2 mark)

b) Filmstrip (2 mark)

c) Touch Tools (2 mark)

5
 d) Bottom Navigation (2 mark)

e) Loading or Progress Indicators (2 mark)

13. Illustrate the following actions and commands used in web/mobile app with (10) [CO5] [K3]
examples

a) Tap, Swipe and Pinch (2 mark)

b) Toolbars (2 mark)

6
c) Hover Tools (3 mark)

d) Affordance (3 mark)
1) When a UI object looks like it might let you do something, such as tap it,
click it, or drag it, we say it “affords” performing that action.
2) It is, or has, an affordance.
3) For example,
a. traditional raised-edge buttons afford tapping or clicking;
a. a scroll bar affords dragging;
b. a date picker looks spinnable or rollable and so affords
spinning;
c. a text field affords typing;
d. a blue underlined word affords clicking or tapping.

7
14. Design an event registration google form for your department association and (10) [CO5] [K3]
also highlight the actions and controls used in that form.

Sample Form Design: (10 mark)

Bloom’s Remembering Understanding Applying Analysing Evaluating Creating

Taxonomy Level (K1) (K2) (K3) (K4) (K5) (K6)

Percentage 13.00% 20.00% 67.00% - - -