UI-Ques�on bank

Define the following:

User is the front-end applica�on view to which user interacts in order to use the
Interface so�ware.
Wire framing is a cri�cal aspect of both the user experience design process and the process of
UI design.
Icons help speed up recogni�on of the UI and the task the user has to perform.
Percep�on is the process of ataining awareness or understanding of sensory informa�on.
Motor skill is a learned series of movements that combine to produce a smooth, efficient
ac�on.
Aten�on is the cogni�ve process of selec�vely concentra�ng on one aspect of the
environment while ignoring other things.
Intui�veness is the user knowing what the controls do.
Applica�on is the process and techniques used to create an effec�ve user interface for a
Design so�ware applica�on.
Interface is to make user experiences as easy as possible while s�ll being successful in
Design achieving user goals.
Contrast is the crea�on of opposing visual elements to convey emphasis or comparison.
Texture are the elements within an object that add depth or a patern to an object.

Essay Ques�ons:

1) Men�on two principles of User Interface Design (UID):

The structure principle: The design should organize the user interface purposefully, in
meaningful and useful ways based on clear, consistent models that are apparent and
recognizable to users, pu�ng related things together and separa�ng unrelated things,
differen�a�ng dissimilar things and making similar things resemble one another.

The simplicity principle: The design should make simple, common tasks easy, communica�ng
clearly and simply in the user's own language, and providing good shortcuts that are
meaningfully related to longer procedures.

The visibility principle: The design should make all needed op�ons and materials for a given
task visible without distrac�ng the user with extraneous or redundant informa�on.

The feedback principle: The design should keep users informed of ac�ons or interpreta�ons,
changes of state or condi�on, and errors or excep�ons that are relevant and of interest to the
user through clear, concise, and unambiguous language familiar to users.
2) What are the basic factors of proper UI?

1. Spacing and Posi�oning.

2. Size of components.
3. Grouping of components.
4. Intui�veness.

3) Men�on some types of user interfaces:

- Command Line Interface (CLI): is a text-based user interface (UI) used to run programs,
manage computer files and interact with the computer.
- Graphical User Interface (GUI): is a type of user interface where users can interact with
visual representa�ons on the digital control panels.
- Menu-driven user interface: is a type of user interface where users interact with a
program or system through a series of menus.
- Touch user interface (TUI): is a computer-poin�ng technology based upon the sense of
touch (hap�cs).
- Voice user interface (VUI): users can interact with the help of the voice.
- Form-based user interface: Uses text-boxes, drop- down menus, text areas, check boxes,
radio boxes and butons to create an electronic form which a user completes in order to
enter data into a system.
- Web User Interface (Web App): allows the user to interact with content or so�ware
running on a remote server through a Web browser.

4) Men�on some examples of user interfaces:

- Applica�on Login
- Applica�on registra�on
- Remote control
- Virtual reality
- ATMs
- Mobile phones
- Website template

5) What is the main Layout of a UI? (slide 25 – lecture 1)

The screen is o�en divided into three boxes:

- Naviga�on area (top).

- Work area (middle).
- Status area (botom).
6) Men�on some types of Object-Oriented user interfaces (OOUI):

1. Reflexive user interfaces: where the users control and redefine the en�re system via the
user interface alone, for instance to change its command verbs.
2. Tangible user interfaces: which place a greater emphasis on touch and physical
environment or its element.
3. Text user interfaces: are user interfaces which output text, but accept other form of input
in addi�on to or in place of typed command strings.
4. Voice user interfaces: which accept input and provide output by genera�ng voice
prompts.
5. Natural-Language interfaces: Used for search engines and on webpages. User types in a
ques�on and waits for a response.
6. Zero-Input interfaces: get inputs from a set of sensors instead of querying the user with
input dialogs.

7) Men�on some so�ware tools that could be used in UID?

- Figma.
- InDesign.
- Sketch.
- AdobeXD.
- Balsamiq.

8) What are the Benefits of Good User Interface?

- Make a clear vision: Clarifying helps you to define precisely how to sa�sfy the needs and
expecta�ons of the audience.
- User confidence: The best UI design creates the prospec�ve confidence in your user and
the brand. If the work or the element won’t work properly or looks poor-quality. They will
interpret this as a direct reflec�on of your company.
- Simplify everything: Involving in your website or web applica�on should be deligh�ul, not
a burden. Simplify the process.
- Crea�ng your mark: Being visionary is very essen�al in design making. Due to incorrect
assump�ons of the user leads to poor online experience.
9) Men�on some Mistakes in UI Design?

1. Implemen�ng a user-centered design: User's desires, expecta�ons, and the problems

should all be considered when designing. Avoid doing, so it may have a nega�ve effect on
your company and lead to its demise.
2. Excessive use of dynamic effects: Using a lot of anima�on effects is not always a sign of a
good design. As a result, limi�ng the use of decora�ve anima�ons will help to improve the
user experience.
3. Preparing so much in advance: Par�cularly in the early stages of design, we just need to
have the appropriate image of the design in our heads and get to work. However, this
strategy is not always successful. At �mes, exploring other sources can show some
unexpected results.
4. Not tes�ng the website design enough: Designing a website can be a fun and crea�ve
process, but it is cri�cal that product designers thoroughly test their graphical user
interfaces to avoid any pi�alls in interac�on design. Crea�vity can get in the way of the
user experience if designers do not test prototypes and go for shortcuts.
5. Confusing naviga�on: Confusing naviga�on can be a website killer. Consumers don’t want
to spend most of their �me trying to figure out what page matches their needs and they
will leave your website quickly if they decide it’s too confusing.

10) What is the value of the human processor model?

The value of the human processor model is that it allows a system designer to predict the
performance with respect to �me it takes a person to complete a task without performing
experiments.

11) How to Draw Aten�on to Important Butons?

1. First, convert the other non-cri�cal butons into Link Labels, this way, the user knows that
these links will perform a task, but their aten�on will go first to the buton that stands
out.
2. Second is to put the cri�cal buton first in line.
3. The recommended op�on is to set to receive focus by default.

12) How can color be a powerful tool in UI?

1. Color can be very helpful in gaining the aten�on of users.

2. Pay aten�on to how to combine colors and human percep�on.
3. The color limita�ons such as color blindness, near/far sighted and focusing speed should
be considered.
4. Red objects appear closer than blue objects.
13) Men�on some Tips for a Beter UI design (En�rety of LC3):
1. Use Standards:
The standards include everything from the layout of controls in a par�cular manner on the
dialog boxes, the UI shape, styles of icons, styles of any other graphics, interac�ve behavior
of the applica�on.
2. Draw aten�on to important butons.
3. Use icons to simplify recogni�on of the UI.
4. Use headers to simplify recogni�on of the UI:
Headers are the perfect way to explain the en�re dialog in a single sentence and they work
more effec�vely than normal descrip�on labels because they are the first thing that a user
sees when the dialog pops up.
A few things you should keep in mind when designing headers:
a. Make sure the background color is different.
b. If possible, keep your header's height under 150 pixels.
c. If you have a �tle label with a font over 10 pt in size, use Arial, or Franklin Gothic
Medium.
5. Use custom message boxes.
6. Use radio butons and combo boxes.
a. The ComboBox list takes more �me to render on screen rather than Radiobutons.
b. The ComboBox list did not take a lot of space like Radiobutons.
c. Some�mes it is beter to use Radiobutons, especially if you have 4 choices or less.
7. Simplify naviga�on using breadcrumb controls and sidebars.
8. Use prety graphics.
9. Don’t use pure black as a background:
Using pure black as a background can o�en create a jarring effect that feels unnatural.
Instead, it’s recommended to use a near-black color like #0F0F0F for crea�ng a more
natural and aesthe�cally pleasing background.
10. Use even spacing:
One effec�ve technique is to use mul�ples of 8 for the spacing between elements.
This is because most developers use eight-point grids to structure their designs, reducing
the likelihood of errors and streamlining the development process.
11. Use Ideal font size for content:
Font size strikes a balance between legibility and readability. The ideal font size for
paragraphs is 16px.
12. Use suitable padding for butons:
Double the value of the ver�cal padding for the horizontal padding.
13. Apply visual contrast in content to create a hierarchy of informa�on.
14. Know when to use upper case leters:
Consider using uppercase leters for tags, statuses, and other similar elements to create a
clean and precise look that stands out from other elements.
15. Know how to use gradients:
it’s generally a beter idea to use linear gradient backgrounds, which can help to create a
sense of depth and contrast in the design rather than using radial gradients.
16. Do Not Forget the Litle Things:
litle things can annoy you, but ignoring them can impact the impression you make, if the
users see obvious bugs in your UI, they may perceive your applica�on to be less powerful
and effec�ve.
14) Men�on some tools used to Improve Visual percep�on in design:

1. Visual Clues: Conveying and direc�ng users with obvious signals can be as straigh�orward
as a litle symbol that assists them in fabrica�ng and linking the signal with ordinary things.
2. Direc�on Arrow: It helps the users toward the subsequent stage they need to perform.
3. Spacing between words: The importance of the text spacing is significant for any site or
item. Users lack the opportunity and willpower to look into many jumbled items.
4. Highlight the line: Atempt to stress the pieces of the sentence that give the users
addi�onal background informa�on, so the user doesn't need to peruse the whole passage
to comprehend.
5. Boundary Outline: U�lizing contrast, the plan needs to isolate the frontal area from the
founda�on and perceive objects from a mind-blowing scope of spa�al direc�ons and
precise signals.

15) Men�on four usages for Mo�on graphics:

1. Create fun and exci�ng designs.

2. Add intrigue and excitement.
3. Give your designs a unique look.
4. Create a great design for your website.

16) Why it is important to focus before build a prototype?

1. Cost of building the prototype: The cost involved in building the prototype should be
minimized. The challenge with prototyping is recognizing the minimal investment needed
to effec�vely answer ques�ons about the design.
2. Limited life�me: The basic mindset is that the code or bitmaps generated in a prototype
will be le� behind.
3. Risk of overwhelming the team: Always have a sense for how far to go and how much of
the prototype should be taken seriously.

17) Discuss Techniques for draw the user Aten�on:

1. Size: implemen�ng changes to the size of elements in your designs is an easy way to
provide emphasis for users by drawing their aten�on to larger objects.
2. Contrast: is a great way to draw emphasis to elements in a design that are different or
important.
3. Texture: can make an object stand out from other objects within a design and should be
used sparingly to draw the user’s gaze.
4. Emphasis in the real world: Google’s mission statement uses color contrast to grab the
user’s aten�on and emphasize the main points of the company's mission at a glance.
18) How to op�mize the layout on a web design UI?

1. Keep the screen size in mind: When designing for users on a web design UI.
2. Use whitespace wisely: whitespace is important for readability of the website content.
3. Use a grid system: If you are designing a website for use on mobile phones, then you might
want to consider using a grid system.
4. Use a design template: Yes, there are as many design templates to choose from as there
are people who use them.

19) What are the planning and design technique used to create a web design?

1. It is necessary to determine the target audience.

2. It is necessary to create a story framework dra�: it is necessary to set the main guidelines
of what the web page will contain
3. The page structure has to be well structured: it should be easy to navigate the page with
useful links.
4. A page layout template is connected to the general page layout: It includes all design
informa�on such as the table layout, background wallpaper, and the �tle’s color.
5. The naviga�on scheme allows users to find quickly and easily what they're searching for.

20) What are the types of CSS?

1. Inline CSS:
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style atribute of an HTML element.
2. Internal CSS:
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> sec�on of an HTML page, within a <style>
element.
3. External CSS:
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> sec�on of each HTML page

21) Describe the jQuery Library?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document
traversal and manipula�on, event handling, anima�on, and Ajax much simpler with an easy-
to-use API that works across a mul�tude of browsers. And it has two types of element
selectors:

1. By element ID. For example: $(‘#elementID’)

2. By class name. For example: $(‘.ClassName’)
22) What are the Advantages of Bootstrap?

- Easy to use: Anybody with basic knowledge of HTML and CSS can start using Bootstrap.
- Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
- Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework.
- Browser compa�bility: Bootstrap is compa�ble with all modern browsers (Chrome,
Firefox, Internet Explorer, Edge, Safari, and Opera).

23) JavaScript HTML Document Object Model (DOM) usage:

1. JavaScript can change all the HTML elements in the page.

2. JavaScript can change all the HTML atributes in the page.
3. JavaScript can change all the CSS styles in the page.
4. JavaScript can remove exis�ng HTML elements and atributes.
5. JavaScript can add new HTML elements and atributes.
6. JavaScript can react to all exis�ng HTML events in the page.
7. JavaScript can create new HTML events in the page.