Anna University, Chennai
IT2024-USER INTERFACE DESIGN SYLLABUS
UNIT I INTRODUCTION 8
Human–Computer Interface – Characteristics Of Graphics Interface – Direct Manipulation
Graphical System – Web User Interface –Popularity –Characteristic & Principles.
UNIT II HUMAN COMPUTER INTERACTION 10
User Interface Design Process – Obstacles –Usability –Human Characteristics In Design – Human Interaction Speed –Business Functions –Requirement Analysis – Direct – Indirect Methods – Basic Business Functions – Design Standards – System Timings – Human Consideration In Screen Design – Structures Of Menus – Functions Of Menus– Contents Of Menu– Formatting – Phrasing The Menu – Selecting Menu Choice– Navigating Menus– Graphical Menus.
UNIT III WINDOWS 9
Characteristics– Components– Presentation Styles– Types– Managements– Organizations– Operations– Web Systems– Device– Based Controls Characteristics– Screen – Based Controls – Operate Control – Text Boxes– Selection Control– Combination Control– Custom Control– Presentation Control.
UNIT IV MULTIMEDIA 9
Text For Web Pages – Effective Feedback– Guidance & Assistance– Internationalization–
Accessibility– Icons– Image– Multimedia – Coloring.
UNIT V WINDOWS LAYOUT– TEST 9
Prototypes – Kinds of Tests – Retest – Information Search – Visualization – Hypermedia –
WWW– Software Tools.
TEXT BOOKS:
TOTAL: 45 PERIODS
1. Wilbent. O. Galitz ,“The Essential Guide To User Interface Design”, John Wiley& Sons,
2001.
2. Ben Sheiderman, “Design The User Interface”, Pearson Education, 1998.
REFERENCES:
Alan Cooper, “The Essential Of User Interface Design”, Wiley – Dream Tech Ltd., 2002.
TWO MARKS QUESTIONS & ANSWERS
CLASS: III - IT STAFF NAME: Mr. S.SARAVANAN
SEM:VI
UNIT-I PART- A
1. What is meant by Human-computer interaction?
It is the study, planning and design of how people and computer work together so that a person needs are satisfied in the most effective way.
2. What are the benefits of good design?
· To improve screen clarity and readability.
· It reduces decision making time.
3. What is meant by GUI?
GUI is a collection of techniques and mechanism to interact with pointing device of some
kind.
4. Mention any 2 advantages of graphical system?
· Symbols recognized faster than text.
The symbols can be recognized faster and more quickly than text and that graphical attributes quickly classifying the objects.
5. What are visually presented elements in a graphical system?
· Windows
· Menus.
· Icons.
· Screen based controls.
· Mouse point and cursor.
6. Define pick and click interaction?
Pick: To identify an element for a proposed action.
Click: The signal to perform an action.
7. Define Visualization.
It is a cognitive process that allows people to understand information that is difficult to perceive, because it is either too voluminous or too abstract.
8. What is an object and its types?
(l) Data object. (2) Container object. (3) Device object.
9. Define property/attribute specification and explain its sequence.
· Property / attribute specification action establish or modify the attributes or properties of objects.
· Property / attribute specification sequence
(l) The user selects an object (ex) several words of text.
(2) The user then selects an action to apply to that object such as the action Bold.
10. Define concurrent performance of functions.
· Graphic system may do 2 or more things at one time.
· Multiple programs may run simultaneously.
11. What are the goals of web interface design?
· It is to build hierarchy of menus and pages tat well structured.
· It is graphically rich environment.
12. What is meant by web interface design?
It is essentially the design of navigation and the presentation of information. Proper interface design is matter of properly balancing the Structure and relationships of menus, content and other linked documents or graphics.
13. What are the similarities between GUI and web interface design?
· They are interactive.
· Both are used by people.
· Both are software design.
14. Write any 2 differences between GUI and Webpage design.
| GUI design | Webpage design |
| Characteristics of interface such as monitor and modem are well designed | The user device may range from handheld mechanism to high end work station. |
| It navigate through structured menus ,lists ,screens dialogs and wizards. | It navigate through links, book marks and typed URL’s. |
| Printed page | Web pages |
| Layout is precise | Layout is approximation |
| They are presented as complete entities and their entire contents are available for reading or review immediately. | They are rendered slowly depending upon transmission speeds and page content. |
16. Differentiate the term Internet, Intranet and Extranet.
Intranet: Within organization internal network over a shared infrastructure using dedicate connections.
Internet: It is a huge network of computer networks.
Extranet: An extranet is a Special set of intranet that can be accessed by authorized persons from outside an organization or company.
17. Mention any 2 difference between Intranet versus the Internet?
| Intranet | Internet |
| It is used for an organization every day activities. | It is used to find information |
| Need for cross-platform compatibility is minimized | Need for cross-platform compatibility is maximized |
18. What is meant by transparency?
Permit the user to focus on the task or job without concern for the mechanics of the interface.
19. Define user interface? What are the components of user interface.
It is a collection of techniques and mechanisms to interact with something. It has two components Input & Output.
20 .What are the five ways to provide simplicity?
· Use progressive disclosure, hiding things until they are needed.
· Provide defaults.
· Minimize screen alignment points.
· Provide Uniformity & consistency.
UNIT-II PART - A
1. What are the common pitfalls in the design process?
The common pitfalls are.
· No early analysis and understanding of the user's needs and expectations
· Little or no creation of design element Prototypes
· No usability testing.
· Poor communication between members of the development team.
2. Define usability.
It describes the effectiveness of human performance. It can be defined as the capability to be used by humans easily and effectively.
3. What are the common usability problems?
1. Ambiguous menus and icons.
2. Highlighting and selection limitations.
3. Unclear Step sequence.
4. Complex linkage between and within an application.
5. Inadequate feedback and confirmation
4. Identify human characteristics in design?
The important human characteristics in design are perception, memory, visual and peripheral vision, sensory Storage, information processing & skill and individual differences.
5. Differentiate between short-term and long-term memory.
| Short –term | Long-term |
| Contains limited amount of information | Contains unlimited amount of information |
| Receives information from either the senses or long term memory | Receives information from short term through learning process. |
6. What is meant by visual activity?
The Capacity of the eye to resolve details is called visual activity. Visual activity is approximately halved at a distance of 2.5 degrees from the point of eye fixation.
7. What are the direct methods in requirement analysis?
The direct methods consist of
· Individual Face to Face interview.
· Telephone Interview or survey.
· Traditional Focus group.
· Facilitated team work group.
· Requirements Prototyping.
· Usability Laboratory testing.
8. What are the indirect methods in requirement analysis?
The indirect methods include
· Paper survey.
· Electronic survey.
· Electronic focus group
· Marketing and sales.
· Support Line.
· Email Of Bulletin Board.
· System Testing.
9. Define mental model.
It is an internal representation of a person's current conceptualization and understand of something. Mental model are gradually developed in order to understand, explain and do something.
10. What are the guidelines for designing conceptual model?
· Reflect the user's mental model.
· Provide proper and correct feedback.
· Provide action-response compatibility.
· Provide design consistency.
11. What are goals of interface design?
The goals in interface design are
· Reduce visual work.
· Reduce intellectual work.
· Reduce memory work.
· Reduce motor work.
12. What are the elements of screen?
Elements of a screen include control captions, data or information displayed on the screen
& headings and headlines.
13. What are the components of a statically graphic?
14. What are System Training tools?
System training will be based on users needs, system conceptual design, system learning goals and System performance goals. Training may include tools such as video training, manuals, online tutorials, reference manuals, quick reference guides and online help.
15. What is test for a good design?
It simply involves the use of display techniques, consistent location of elements, the proper use of “white space” and groupings and an understanding of visually pleasing composition. The best interface makes everything on the screen easily seen.
16. How to achieve clarity?
Clarity is influenced by a multiple factors, such as consistency in design, visually pleasing composition, a logical and sequential ordering, the presentation of the proper amount of information, groupings and alignment of screen items.
17. What are the qualities in visually pleasing composition?
Visually pleasing composition contain following qualities such as Balance, Symmetry, Regularity, Predictability, Sequentially, economy, unity, proportion, simplicity and groupings.
18. What is known as Tabbing?
When a screen is first presented, the cursor must be positioned in the first field or control in which information can be entered. Tabbing order must then follow the flow of information as it is organized on the screen.
19. What is necessary for ordering?
Ordering is necessary to
· Facilitate search for an item.
· Provide information about the structure and relationship among items.
· Provide compatibility with the user’s mental model of the item structure.
20. Define pull down menu.
![clip_image015[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipV35DUNUKP3PCmIr-t1lLfcobFIFjCsc4PunO_fy6hJBpFkPVC13xe6TRTz_QMyxqJgINwW_aGNivOG_V5V4c43AGoPigRyYVNuMpITTwG7jQI33OU0D9ivVQpwlLhTnnq3XluYxaE5s/s1600-h/clip_image01512.png "clip_image015[1]"){kind=small}
UNIT-III PART -A
1. Define window.
A window is a area of the screen usually rectangular in shape, defined by a border that contains a particular view of some area of the computer. It can be moved and rendered independently on the screen.
2. What is known as split box?
A Window can split into 2 or more pieces or panes by manipulating a split box located above a vertical scroll bar or to the left of a horizontal scroll bar.
3. Define size grip?
A size grip is a Microsoft windows Special hand]e included in a window to permit it be resized. When the grip is dragged the window resizes following the same conventions as the sizing border.
4. What are the presentation styles of windows?
1. Tiled windows
2. Overlapping windows
3. Cascading windows
5. What are the advantages of Tiled windows?
Advantages of Tiled windows:·
The system usual]y allocates and positions windows for the user, eliminating the necessity to make positioning decisions.
· Open windows are always visible, eliminating the possibility of them being lost and forgotten.
· Every window is always completely visible, eliminating the possibility of information being hidden.
6. What is known as cascading window?
A special type of overlapping window has the window automatically arranged in a regular progression. Each window is slightly offset from others.
7. What are the different features, of tiled & over lapping window?
Tiled window used for
· Single task activities
· Data that needs to be seen simultaneously
· Tasks requiring little window manipulation
· Novice or inexperienced users overlapping windows used for:
· Switching between tasks
· Tasks necessitating a greater amount of window manipulation
· Except or experienced users
· Unpredictable display contents
![clip_image021[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJoat83hFwrXt1KuSgSOkPRzOVeAaYB9BPcvJaW7HBoNXVQZ2hWMTky5_ES5aD6PCrm0c3z-UfmGX5UsNDeetpF4XXMYwd1MMjRDXP9WEhkeULywqbUDkvxvaEt4WpkYXgUCULjje3tCE/s1600-h/clip_image02112.png "clip_image021[1]"){kind=small}
1. Primary window: It is the one that appears on a screen when an activity or action is started.
2. Secondary window: They are supplemental windows. It may be dependent or independent of primary window.
9. Differentiate between cascading and unfolding.
· Cascading: A cascade is used when advanced options at a lower level in complex dialog must be presented. Present the additional dialog box in cascaded form.
· Unfolding: To provide advanced options at the same level in a complex dialog. Provide a command button with an expanding dialog symbol.
10. What are the various window management schemes?
1. Single document interface
2. Multiple document interfaces
3. Workbooks
4. Projects
| SDI | MDI |
| Single document interface | Multiple document interface |
| A single primary windows with asset of secondary windows | Managing set of windows |
| Object and window have simple one to one relationship | To represent multiple occurrence of an object. |
12. What is meant by windows project?
A project is a similar to MDI, but does not visually contain child windows. The objects held within the project window can be opened in primary windows that are peers with the project window.
13. How window is organized?
· Organize windows to support user tasks.
· Support the most common tasks in the most efficient manner or fewest steps.
· Use primary windows to perform major interaction.
· Use secondary windows to obtain or display supplemental information Related to the primary windows.
14. What are the advantages of frames in web systems?
· They decrease the user's need to jump back and forth between screens, thereby reducing navigation related cognitive overhead.
They increase the user's opportunity to request, view and compare multiple sources of information.
· They allow content pages to be developed independently of navigation pages.
15. List some example for device based controls.
Device based controls called input devices are the mechanism through which people communicate their desires to the system.
Example: track ball, joystick, graphic tablet, light pen & touch screen
16. Differentiate the usage of keyboard with mouse?
| Keyboard | Mouse |
| Keying process becomes fast and well learned | Mouse is slower and it has tendency to move about the desk. |
| It remains in the same spot. Its location can be memorized. | Its location cannot be memorized |
17. What is meant by graphic tablet?
A graphic tablet is a device with horizontal surface sensitive to pressure, heat, light or the blockage of light. It may lie on the desk or may be incorporated on a keyboard and is operated with fingers & light pen.
18. What is meant by spin box?
A spin box called spin button is a single field followed by 2 small vertically arranged buttons inscribed with up and down arrows. A selection entry is made by using the mouse to point at one of the directional buttons and clicking.
19. What is meant by slider?
A slider is a scale that exhibits the amount or degree of a quantity or quality. A slider incorporates the range of possible values and includes a shaft representing the range, the values with label and visual indication of the relative setting through the location of a sliding arm.
20. Differentiate between tooltip from balloon tips.
| Tool tips | Balloon tips |
| It can be posted at any time only one the last posted will be possible. | It is used for task bar for specified minimum and maximum limits. |
| It has one or two words that identify button action | It has a small pop up window that contain information presented in a word balloon. |
UNIT-IV PART – A
l. What type of words used in effective communication?
· Short familiar words
![clip_image011[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdPN-ExqO4rhe63hky0MxBg4FWJzoQpLCR1ZOEMWgkyKqY878cvuPgcP5RwcjlhQBMqkJNzkGvh7Ow5v4Wbw6RdF7Cac5dTY9xlC91LxikCkDZOHfYwkBtHItAALzI7EXmN95ouU72WI/s1600-h/clip_image01112.png "clip_image011[1]"){kind=small}
· Complete words
· Positive terms
· Simple action words
· Consistent words
2. What are the guidelines followed for sentence and message?
· Sentence and messages must be
· Brief and simple
· Directly and immediately usable
· An affirmative statement.
· In an active voice.
3. Define message? What are the types of messages?
Messages are communication provided on the screen to the screen viewer. A message should possess the proper tone and style and be consistent within it.
Types of message:
· System message
· Status message
· Informational message
· Warning message
· Critical message
· Question message
4. What is meant by instructional message?
Provide instructional information at the depth of detail needed by the user. Locate instruction at Strategic points on screen. Display instructions in a manner that visually differentiates from all other screen elements.
5. What is meant by response time?
Feed back to an user for an action must occur within certain time limits. System should match the speed and flow of human through processes.
6. What is the use of progress indicator?
A progress indicator is a long rectangular box that is initially empty but filled as the operation proceeds. Dynamically fill the bar with a color or shade of grey.
7. What is known as ear cons?
Sounds sometimes called ear cons, are useful for altering the user.
· To minor and obvious mistakes
When something unexpected happens
· When a long process is finished
8. Differentiate between slip and mistake?
| Slip | Mistake |
| Can be reduced through proper application of human factors in design. | Can be reduced by eliminating ambiguity from design. |
9. What are the ways to prevent errors?
Errors can be reduced in a number of ways
· Disable inapplicable choices.
· Design screen using selection controls instead of entry controls.
· Accept common misspelling whenever possible.
· Before an action is performed, permit it to be reviewed.
· Provide a common action mechanism.
l0. What is meant by contextual Help?
It provides information within the context of a task being performed or about a specific object being operated. Common kinds of contextual help command buttons, status bar messages and tool tips.
ll. What is the purpose of hints?
· To provide a few important contextual but specific items of information related to a displayed screen.
· It is more easily accessible and relevant to te current situation.
· The objective is quickly get the user back on track when confusion occurs.
l2. What is meant by internalization?
It is the process of isolating culturally specific elements form a product. The German text of a program developed in Germany for example is isolated from the program itself.
13. What is meant by localization?
Localization is the process of infusing a specific cultural context into previously internalized product.
Ex: Translating German Screen Components and message into English for American
users.
l4. What is meant by Accessibility?
Accessibility means a system must be designed to be usable by an almost unlimited range of people. It can be def1ned as providing easy access to a system for people with disabilities.
l5. What are the various types of disabilities?
Disabilities can be grouped into several categories.
· Visual
· Hearing
· Physical movement
· Speech or language impairments
· Cognitive disorders
· Seizure disorders
16. What is meant by icon?
Icons are used to represent objects and action with users can interact with or they can manipulate. It may be stand alone on a desktop or in a window. It is to reinforce important information a warning icon in a dialog message box.
17. What are the various kinds of icon?
· Symbolic - An abstract image representing something.
· Exemplar - An image illustrating an example or characteristic of something.
· Arbitrary - An image completely arbitrary in appearance whose meaning must be learned.
· Analogy - An image physically or semantically associated with something.
· Resemblance – An image that looks like what it means.
18. What is meant by dithering?
If pixels of different colors are placed next to each other, this tremor combines the 2 colors into a 3rd color. This is referred to dithering.
19. Mention the properties of a color.
· Hue: It is the spectral wavelength composition of a color.
· Chroma or Saturation: It is the purity of a color in a scale from gray to the most vivid version of the color.
· Value or Intensity: It is the relative lightness or darkness of a color in a range from black to white.
20) What is known as protanopia, deuteranopia and tritanopia.
Protanopia, Deuteranopia and Tritanopia are color viewing deficiencies.
· Red viewing deficiency is called protanopia.
· Green viewing deficiency is called deuteranopia.
· Blue viewing deficiency is called tritanopia.
UNIT-V PART - A
1.Differentiate control and section borders.
| Control Border | Section Border |
| Incorporate a thin single line border around the elements of selection control. | Incorporate a thicker single line border around Group of related entry or the selection control elements. |
2. What are the principles of good screen design?
· Present the proper amount of information on each screen.
· Providing an ordering that is logical, sequential and rhythmic to guide a person’s eye
through the display.
· Keep the proportion of the window devoted to information no more than 30 to 40 percent
of the window’s entire area.
Maintaining a top to bottom, left to right flow.
3. What is the purpose of usability testing?
Usability testing serves a two hold purpose.
· Testing is used to evaluate the product. It validates design decisions.
· It establishes a communication bridge between developers and users.
4. What is meant by cognitive walk through?
In a cognitive walk through developers walk through an interface in the context of representative user tasks. Individual task actions are examined and the evaluators try to establish a logical reason way the user would perform each examined action.
5. What is meant by think-aloud evaluation?
The users perform specific tasks while thinking out load. The objective is to get the user to talk continuously.
6. Define focus group.
In a focus group a small group of knowledgeable users and a moderator are brought together to discuss an interface design prototype or proposed design tasks.
7. Define transition diagram.
It has a set of nodes that represents system states and a set of links between the nodes that represents possible transitions. Each link is labeled with the user action that selects that link and possible computer responses.
8. What are importance of usability testing?
It is important for many reasons including the following.
· Developers and users possess different models.
· It is importance to predict usability from appearance.
· Design standards and guidelines are not sufficient.
· Informal feedback is inadequate.
9. What is meant by prototype?
A prototype is a simulation of an actual system tat can be quickly created. It is a vehicle for exploration, communication and evaluation.
10. What are the various searches used in the multimedia document?
· Photo search
· Map search
· Design or Diagram search
· Sound search
· Video search
· Animation search
11. What are the features of user-interface building tools?
· User interface independence
· Rapid prototyping
· Methodology and notation
12. List some software tools used for user interface design.
· User interface model can be created with slide show presentation such as Adobe persuasion, Microsoft-Power point.
· Apple hyper card, Macro Mind director or A Symmetric Tool Book used for creating multimedia applications.
· Visual programming tool paragraph provide direct manipulation
· They are powerful as a specification tool since they sow users, managers, implementers and other interested parties the complete and detailed coverage of the system.
· It shows high level relationships and low level details.
14. What are the ways to categorizing the web?
· Primary way of categorizing the web sites is by the originator’s identity.
· Second way of categorizing the web sites is by goals of the organization.
· Third way of categorizing the web sites is by the number of pages or amount of information is accessible.
· Fourth way of categorizing the web sites is by measure of success.
15. What are the various types of TTT?
· One dimensional linear data
· Two dimensional map data
· Three dimensional data
· Temporal data
· Multi dimensional data
· Tree data
· Network data
16. What is the four phase framework to clarify user interfaces for textual search?
· Formulation
· Action
· Results
· Refinement
17. Define www.
World website design is a matter of balancing the structure and relationship of menu or one pages and individual content pages or other linked graphics and documents.
18. Mention the types of prototypes.
· Hand sketches and scenarios
· Interactive paper prototype
· Programmed façade.
![clip_image002[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvRRCczf3dxEWRPkuJkVAVE62znHTmUi965Qf8hyphenhyphencdRw67kSdHYYI7qEfYffbHBwEn-RD6dQQtA86EJ4wmvNMxromfr7bUQK3-DFi53YMuLY0ViIuBi9BUCSn0THjM8cWcgaokMCQ1As/s1600-h/clip_image00212.gif "clip_image002[1]"){kind=small}
![clip_image018[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL3LxMFPFXe184SLCY9BRMdBi2HjqKyQJvUAXUPGij9wBVgbm4hLZbWXzMF14H7k6LyJCq_yeUx_YrNlCI0EatGl9MkFLgnrqcicmodnUy9iZ8aFvGhlbM2frhzebAaRRHw6FxbOGYhvc/s1600-h/clip_image01812.gif "clip_image018[1]"){kind=small}
![clip_image020[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_OUTb-VLLdoTIliY6eGMrNacGci7LYiN9X0cOvTVhJd04D1YDSYd3lVSAFwnqJrgDgOuorz9NxDEohZqA-vfYYfv4GwSv7nQUhQdM-jokgQz07O497ShRqlDhw8dCj2-H5fO6MhCGNo/s1600-h/clip_image02012.gif "clip_image020[1]"){kind=small}
![clip_image024[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj424r7-DfmpJA55ei9wnT7qsc2y1ckJk6vmR4jbVFaZj5zJqSU0aN3fRMDfKpJQBsLmOF0Xp9BsqB3sejokMYBx5YToYJHrjJmr68DNtzkSVmKXeVuQqMygPnY9qw9zLg91lVb7MrFbH8/s1600-h/clip_image02412.gif "clip_image024[1]"){kind=small}
