User Interface Handbook Assignment

User Interface Handbook Assignment Words: 10365

] NATIONAL OPEN UNIVERSITY OF NIGERIA SCHOOL OF SCIENCE AND TECHNOLOGY COURSE CODE:CIT 711 COURSE TITLE:USER INTERFACE DESIGN AND ERGONOMICS 1 2 COURSE GUIDE CIT 711 USER INTERFACE DESIGN AND ERGONOMICS Course Developer Course Editor Course Co-ordinator DR. A. S. SODIYA Afolorunso, A. A. National Open University of Nigeria Lagos. NATIONAL OPEN UNIVERSITY OF NIGERIA 3 National Open University of Nigeria Headquarters 14/16 Ahmadu Bello Way Victoria Island Lagos Abuja Annex 245 Samuel Adesujo Ademulegun Street Central Business District Opposite Arewa Suites Abuja e-mail: centralinfo@nou. du. ng URL: www. nou. edu. ng National Open University of Nigeria 2009 First Printed 2009 ISBN All Rights Reserved Printed by …………….. For National Open University of Nigeria 4 TABLE OF CONTENTS PAGE Introduction…………………………………………………………………… 1 What you will learn in this Course…………………………………….. 1 Course Aims……………………………………………………………………. Course Objectives…………………………………………………………….

Working through this Course……………………………………………. Course Materials……………………………………………………………… Study Units ……………………………………………………………………. Textbooks and References ……………………………………………….. Assignment File……………………………………………………………… Presentation Schedule……………………………………………………… 1 1 2 2 2-3 3 3-4 4

Don’t waste your time!
Order your assignment!

order now

Assessment…………………………………………………………………. …. 4 Tutor Marked Assignments (TMAs) ………………………………… 4 – 5 Examination and Grading………………………………………….. 5 Course Marking Scheme…………………………………………………… 5 Course Overview……………………………………………… 6 How to Get the Best from This Course ……………………………… 6-7 Tutors and Tutorials ………………………………………………………… 8 5

Summary ………………………………………………………………….. . .. 9 Introduction CIT 711 – User Interface Design and Ergonomics is a three [3] credit unit course of twenty one units. It discusses the introduction, design, implementation and evaluation of user interface. The course material was clearly designed to enhance the understanding of students. The aim of this course is to equip you with the basic skills of studying and understanding the concept of user interface design. The techniques involved will be explicitely covered while evaluation procedures will also be discussed.

By the end of the course, you should be able to confidently study, analyse and design a standard User Interface. This Course Guide gives you a brief overview of the course content, course duration, and course materials. What you will learn in this course The main purpose of this course is to provide the necessary tools analyzing and designing user interface systems. It makes available the steps and tools that will enable you to make proper and accurate decision about necessary design technique whenever the need arises. This, we intend to achieve through the following: Course Aims . ii. iii. iv. To introduce the concepts user interface design and egonomics; To describe the various techniques for designing user interface; To describe the practical implementation of user interface; and To discuss the techniques for user interface evaluation. Course Objectives Certain objectives have been set out to ensure that the course achieves its aims. Apart from the course objectives, every unit of this course has set objectives. In the course of the study, you will need to confirm at the end of each unit if you have met the objectives set at the beginning of each unit.

By the end of this course, you should be able to: i. iii. the essentials of good interface design techniques describe in general term, the concept of user interface design; 6 ii. iv. describe design a standard user Interface;. analyse an existing user interface design. ? explain the various types of challenges that could be encountered in designing a good user interface. ? describe the the various process of implementing designs; ? describe how to evaluate a given design Working Through This Course

In order to have a thorough understanding of the course units, you will need to read and understand the contents, practise the steps by designing a standard user interface model. This course is designed to cover approximately sixteen weeks, and it will require your devoted attention. You should do the exercises in the Tutor-Marked Assignments and submit to your tutors. Course Materials These include: 1. Course Guide 2. Study Units 3. Recommended Texts 4. A file for your assignments and for records to monitor your progress. Study Units There are twenty one study units in this course: Module1


Module 4 UNIT 1 TECHNIQUES FOR EVALUATING AND MEASURING INTERFACE USABILITY UNIT 2 EVALUATING USER INTERFACE WITHOUT THE USER UNIT 3 EVALUATING USER INTERFACE WITH THE USER UNIT 4 OTHER EVALUATION METHODOLOGIES 8 UNIT 5 – USABILITY TESTING Make use of the course materials, do the exercises to enhance your learning. Textbooks and References o www. wikipedia. org o Holm, Ivar (2006). Ideas and Beliefs in Architecture and Industrial design: How attitudes, orientations, and underlying assumptions shape the built environment. Oslo School of Architecture and Design. ISBN 8254701741. o Wickens, C.

D et al. (2004). An Introduction to Human Factors Engineering (2nd Ed), Pearson Education, Inc. , Upper Saddle River, NJ : Prentice Hall. o Dumas, J. S. and Redish, J. C. (1999). A Practical Guide to Usability Testing (revised ed. ), Bristol, U. K. : Intellect Books. o Kuniavsky, M. (2003). Observing the User Experience: A Practitioner’s Guide to User Research, San Francisco, CA: Morgan Kaufmann. o McKeown, Celine (2008). Office ergonomics: practical applications. Boca Raton, FL, Taylor & Francis Group, LLC. o Nielsen, J. and Molich, R. “Heuristic evaluation of user interfaces. Proc. CHI’90 Conference on Human Factors in Computer Systems. New York: ACM, 1990, pp. 249-256. o Nielsen, J. “Finding usability problems through heuristic evaluation. ” Proc. CHI’92 Conference on Human Factors in Computer Systems. New York: ACM, 1992, pp. 373-380. o Molich, R. and Nielsen, J. “Improving a human-computer dialogue: What designers know about traditional interface design. ” Communications of the ACM, 33 (March 1990), pp. 338-342. o Nielsen, J. “Usability Engineering. ” San Diego, CA: Academic Press, 1992. o Wharton, C. , Rieman, J. , Lewis, C. , and Polson, P. The cognitive walkthrough: A practitioner’s guide. ” In J. Nielsen and R. L. Mack (Eds. ), Usability Inspection Methods, New York: John Wiley & Sons (1994). o Nielsen, J. and Molich, R. “Heuristic evaluation of user interfaces. ” Proc. CHI’90 Conference on Human Factors in Computer Systems. New York: ACM, 1990, pp. 249-256. o Nielsen, J. “Finding usability problems through heuristic evaluation. ” Proc. CHI’92 Conference on Human Factors in Computer Systems. New York: ACM, 1992, pp. 373-380. o Molich, R. and Nielsen, J. “Improving a human-computer dialogue: What designers know about traditional interface design. Communications of the ACM, 33 (March 1990), pp. 338-342. o Nielsen, J. “Usability Engineering. ” San Diego, CA: Academic Press, 1992. 9 Assignments File Tutor-Marked Assignment is a supervised assignment. The assignments take a certain percentage of your total score in this course. The Tutor-Marked Assignments will be assessed by your tutor within a specified period. The examination at the end of this course will aim at determining the level of mastery of the subject matter. This course includes sisteen Tutor-Marked Assignments and each must be done and submitted accordingly. Your best cores however, will be recorded for you. Be sure to send these assignments to your tutor before the deadline to avoid loss of marks. Assessment There are two aspects to the assessment of the course. First are the tutor marked assignments; second, is a written examination. In tackling the assignments, you are expected to apply information and knowledge acquired during this course. The assignments must be submitted to your tutor for formal assessment in accordance with the deadlines stated in the Assignment File. The work you submit to your tutor for assessment will count for 30% of your total course mark.

At the end of the course, you will need to sit for a final three-hour examination. This will also count for 70% of your total course mark. Tutor Marked Assignments (TMAS) There are sisteen tutor marked assignments in this course. You need to submit all the assignments. The total marks for the best four (6) assignments will be 30% of your total course mark. Assignment questions for the units in this course are contained in the Assignment File. You should be able to complete your assignments from the information and materials contained in your set textbooks, reading and study units.

However, you may wish to use other references to broaden your viewpoint and provide a deeper understanding of the subject. When you have completed each assignment send it to your tutor. Make sure that each assignment reaches your tutor on or before the deadline given. If, however, 10 you cannot complete your work on time, contact your tutor before the assignment is done to discuss the possibility of an extension. Examination and Grading The final examination for the course will carry 70% percentage of the total marks available for this course.

The examination will cover every aspect of the course, so you are advised to revise all your corrected assignments before the examination. This course endows you with the status of a teacher and that of a learner. This means that you teach yourself and that you learn, as your learning capabilities would allow. It also means that you are in a better position to determine and to ascertain the what, the how, and the when. The course units are similarly designed with the introduction following the table of contents, then a set of objectives and then the dialogue and so on.

The objectives guide you as you go through the units to ascertain your knowledge of the required terms and expressions. Course Marking Scheme This table shows how the actual course marking is broken down. Assessment Assignment 1- 16 Final Examination Total Marks Sixteen assignments, best six count for 30% of course marks 70% of overall course marks 100% of course marks Table 1: Course Marking Scheme Course Overview Unit Title of Work Course Guide Module 1 1 FOUNDATION OF USER INTERFACE Week 1 Assignment 1 Weeks Activity Assessment (End of Unit) 11

DESIGN and DESIGNING GOOD USER INTERFACES 2 3 4 1 2 3 4 GRAPHICAL USER INTERFACE (GUI) HUMAN-COMPUTER INTERACTION ERGONOMICS Module 2 HUMAN CAPABILITIES INTERFACE DESIGN USER-CENTERED DESIGN and INTERACTIVE DESIGN USABILITY and INTERACTION STYLES AND GRAPHIC DESIGN PRINCIPLES Module 3 1 2 3 4 1 2 PROTOTYPING and PROTOTYPING AND Week 9 IMPLEMENTATION METHODS AND TOOLKITS INPUT AND OUTPUT MODELS Week 10 MODEL VIEW-CONTROLLER (MVC) LAYOUTS AND CONSTRAINTS Module 4 TECHNIQUES FOR EVALUATING AND MEASURING INTERFACE USABILITY EVALUATING USER INTERFACE WITHOUT THE USER and EVALUATING USER INTERFACE WITH THE USER Week 13 Week 14 Assignment 13 Assignment 14 Week 11 Week 12 Assignment 9 Assignment 10 Assignment 11 Assignment12 IN USER Week 5 Week 6 Week 7 Week 8 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Week 2 Week 3 Week 4 Assignment 2 Assignment 3 Assignment 4 UNDERSTANDING USERS AND TASK ANALYSIS 3 4 OTHER EVALUATION METHODOLOGIES USABILITY TESTING Revision Examination Week 15 Week 16 Week 17 Week 18 18 weeks Assignment 15 Assignment 16 Total 12 How to get the best from this course In distance learning the study units replace the university lecturer.

This is one of the great advantages of distance learning; you can read and work through specially designed study materials at your own pace, and at a time and place that suit you best. Think of it as reading the lecture instead of listening to a lecturer. In the same way that a lecturer might set you some reading to do, the study units tell you when to read your set books or other material. Just as a lecturer might give you an in-class exercise, your study units provide exercises for you to do at appropriate points. Each of the study units follows a common format. The first item is an introduction to the subject matter of the unit and how a particular unit is integrated with the other units and the course as a whole. Next is a set of learning objectives.

These objectives enable you know what you should be able to do by the time you have completed the unit. You should use these objectives to guide your study. When you have finished the units you must go back and check whether you have achieved the objectives. If you make a habit of doing this you will significantly improve your chances of passing the course. Remember that your tutor’s job is to assist you. When you need help, don’t hesitate to call and ask your tutor to provide it. ? Read this Course Guide thoroughly. ? Organize a study schedule. Refer to the ‘Course Overview’ for more details. Note the time you are expected to spend on each unit and how the assignments relate to the units.

Whatever method you chose to use, you should decide on it and write in your own dates for working on each unit. ? Once you have created your own study schedule, do everything you can to stick to it. The major reason that students fail is that they lag behind in their course work. ? Turn to Unit 1 and read the introduction and the objectives for the unit. ? Assemble the study materials. Information about what you need for a unit is given in the ‘Overview’ at the beginning of each unit. You will almost always 13 need both the study unit you are working on and one of your set of books on your desk at the same time. ? Work through the unit. The content of the unit itself has been arranged to provide a sequence for you to follow.

As you work through the unit you will be instructed to read sections from your set books or other articles. Use the unit to guide your reading. ? Review the objectives for each study unit to confirm that you have achieved them. If you feel unsure about any of the objectives, review the study material or consult your tutor. ? When you are confident that you have achieved a unit’s objectives, you can then start on the next unit. Proceed unit by unit through the course and try to pace your study so that you keep yourself on schedule. ? When you have submitted an assignment to your tutor for marking, do not wait for its return before starting on the next unit. Keep to your schedule.

When the assignment is returned, pay particular attention to your tutor’s comments on the tutor-marked assignment form. Consult your tutor as soon as possible if you have any questions or problems. ? After completing the last unit, review the course and prepare yourself for the final examination. Check that you have achieved the unit objectives (listed at the beginning of each unit) and the course objectives (listed in this Course Guide). Tutors and Tutorials There are 15 hours of tutorials provided in support of this course. You will be notified of the dates, times and location of these tutorials, together with the name and phone number of your tutor, as soon as you are allocated a tutorial group.

Your tutor will mark and comment on your assignments, keep a close watch on your progress and on any difficulties you might encounter and provide assistance to you during the course. You must mail or submit your tutor-marked assignments to your tutor well before the due date (at least two working days are required). They will be marked by your tutor and returned to you as soon as possible. Do not hesitate to contact your tutor by telephone, or e-mail if you need help. The following might be circumstances in which you would find help necessary. Contact your tutor if: 14 ? you do not understand any part of the study units or the assigned readings, ? you have a question or problem with an assignment, with your tutor’s comments on an assignment or with the grading of an assignment.

You should try your best to attend the tutorials. This is the only chance to have face to face contact with your tutor and to ask questions which are answered instantly. You can raise any problem encountered in the course of your study. To gain the maximum benefit from course tutorials, prepare a question list before attending them. You will learn a lot from participating in discussions actively. Summary User Interface Design and Ergonomics deals with analysis, design, implementation and evaluation of user interface design. The aim of this course is to equip you with the basic skills of studying and understanding the concept behind user interface design.

By the end of the course, you will be able to confidently study, analyse and design a standard User Interface. The content of the course material was planned and written to ensure that you acquire the proper knowledge and skills for the appropriate situations. Real-life situations have been created to enable you identify with and create some of your own. The essence is to get you to acquire the necessary knowledge and competence, and by equipping you with the necessary tools, we hope to have achieved that. I wish you success with the course and hope that you will find it both interesting and useful. 15 CIT 711: USER INTERFACE DESIGN AND ERGONOMICS (3 UNITS) TABLE OF CONTENT PAGES


MODEL 4 – USER INTERFACE EVALUATION UNIT 1 – TECHNIQUES FOR EVALUATING AND MEASURING INTERFACE USABILITY UNIT 2 – EVALUATING USER INTERFACE WITHOUT THE USER UNIT 3 – EVALUATING USER INTERFACE WITH THE USER UNIT 4 – OTHER EVALUATION METHODOLOGIES UNIT 5 – USABILITY TESTING PROCEDURE MODULE 1 17 UNIT 1 FUNDAMENTALS OF USER INTERFACE DESIGN Table of Contents 1. 0 2. 0 3. 0 Introduction Objectives Main Content 3. 1 User Interface 3. 2 Significance of User Interface 3. 3 Types of User Interfaces 3. 4 History of User Interfaces 3. 5 User Interface Modes and Modalities 3. 6 Introduction to Usability Conclusion Summary Tutor Marked Assignment Further Reading and Other Resources INTRODUCTION 4. 0 5. 0 6. 0 7. 0 1. 0 Having read through the course guide, you will have a general understanding of what this unit is about and how it fits into the course as a whole.

This unit describes the general fundamentals of user interface design. 2. 0 OBJECTIVES By the end this unit, you should be able to: ? Explain the term user interface design ? Highlight the significance of user interface ? Explain the history behind user interfaces ? Describe the modalities and modes of user interface 3. 0 3. 1 MAIN CONTENT USER INTERFACE The user interface (also known as Human Machine Interface (HMI) or Man-Machine Interface (MMI) is the aggregate of means by which people—the users—interact with the system—a particular machine, device, computer program or other complex tool. User Interface is the point at which a user or a user department or organization interacts with a computer system.

The part of an interactive computer program that sends messages to and receives instructions from a terminal user. 18 User Interface is the point at which a user or a user department or organization interacts with a computer system. The part of an interactive computer program that sends messages to and receives instructions from a terminal user. In computer science and human-computer interaction, the user interface (of a computer program) refers to the graphical, textual and auditory information the program presents to the user, and the control sequences (such as keystrokes with the computer keyboard, movements of the computer mouse, and selections with the touchscreen) the user employs to control the program.

User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to apply a theme or style to the interface without compromising its usability. The design process must balance technical functionality and visual elements (e. g. mental model) to create a system that is not only operational but also usable and adaptable to changing user needs. Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interaction yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design 3. 2 SIGNIFICANCE OF USER INTERFACE To work with a system, users have to be able to control the system and assess the state of the system.

For example, when driving an automobile, the driver uses the steering wheel to control the direction of the vehicle, and the accelerator pedal, brake pedal and gearstick to control the speed of the vehicle. The driver perceives the position of the vehicle by looking through the windscreen and exact speed of the vehicle by reading the speedometer. The user interface of the automobile is on the whole composed of the instruments the driver can use to accomplish the tasks of driving and maintaining the automobile. The term user interface is often used in the context of computer systems and electronic devices. The user interface of a mechanical system, a vehicle or an industrial installation is sometimes referred to as the Human-Machine Interface (HMI).

HMI is a modification of the original term MMI (man-machine interface). In practice, the abbreviation MMI is still frequently used although some may claim that MMI stands for something different now. Another abbreviation is HCI, but is more commonly used for human-computer interaction than human-computer interface. Other terms used are Operator Interface Console (OIC) and Operator Interface Terminal (OIT). 19 3. 3 TYPES OF USER INTERFACES Currently (as of 2009) the following types of user interface are the most common: i. Graphical user interfaces (GUI) accept input via devices such as computer keyboard and mouse and provide articulated graphical output on the computer monitor.

There are at least two different principles widely used in GUI design: Object-oriented user interfaces (OOUIs) and application oriented interfaces. ii. Web-based user interfaces or web user interfaces (WUI) accept input and provide output by generating web pages which are transmitted via the Internet and viewed by the user using a web browser program. Newer implementations utilize Java, AJAX, Adobe Flex, Microsoft . NET, or similar technologies to provide real-time control in a separate program, eliminating the need to refresh a traditional HTML based web browser. Administrative web interfaces for web-servers, servers and networked computers are often called Control panels. User interfaces that are common in various fields outside desktop computing: iii.

Command line interfaces, where the user provides the input by typing a command string with the computer keyboard and the system provides output by printing text on the computer monitor. Used for system administration tasks etc. iv. Tactile interfaces supplement or replace other forms of output with haptic feedback methods. This is also used in computerized simulators etc. v. Touch user interface are graphical user interfaces using a touchscreen display as a combined input and output device. Used in many types of point of sale, industrial processes and machines, self-service machines etc. Other types of user interfaces: vi. Attentive user interfaces manage the user attention deciding when to interrupt the user, the kind of warnings, and the level of detail of the messages presented to the user. vii.

Batch interfaces are non-interactive user interfaces, where the user specifies all the details of the batch job in advance to batch processing, and receives the output when all the processing is done. The computer does not prompt for further input after the processing has started. viii. Conversational Interface Agents attempt to personify the computer interface in the form of an animated person, robot, or other character (such as Microsoft’s Clippy the paperclip), and present interactions in a conversational form. ix. Crossing-based interfaces are graphical user interfaces in which the primary task consists in crossing boundaries instead of pointing. 20 x. Gesture interface are graphical user interfaces which accept input in a form of hand gestures, or mouse gestures sketched with a computer mouse or a stylus. xi.

Intelligent user interfaces are human-machine interfaces that aim to improve the efficiency, effectiveness, and naturalness of human-machine interaction by representing, reasoning, and acting on models of the user, domain, task, discourse, and media (e. g. , graphics, natural language, gesture). xii. Motion tracking interfaces monitor the user’s body motions and translate them into commands, currently being developed by Apple. xiii. Multi-screen interfaces, employ multiple displays to provide a more flexible interaction. This is often employed in computer game interaction in both the commercial arcades and more recently the handheld markets. xiv.

Non-command user interfaces, which observe the user to infer his/her needs and intentions, without requiring that he/she formulate explicit commands. xv. Object-oriented user interface (OOUI) :- The following are examples of OOUI:? Reflexive user interfaces where the users control and redefine the entire system via the user interface alone, for instance to change its command verbs. Typically this is only possible with very rich graphic user interfaces. ? Tangible user interfaces, which place a greater emphasis on touch and physical environment or its element. ? Text user interfaces are user interfaces which output text, but accept other form of input in addition to or in place of typed command strings. Voice user interfaces, which accept input and provide output by generating voice prompts. The user input is made by pressing keys or buttons, or responding verbally to the interface. ? Natural-Language interfaces – Used for search engines and on webpages. User types in a question and waits for a response. ? Zero-Input interfaces get inputs from a set of sensors instead of querying the user with input dialogs. ? Zooming user interfaces are graphical user interfaces in which information objects are represented at different levels of scale and detail, and where the user can change the scale of the viewed area in order to show more detail 3. 4 HISTORY OF USER INTERFACES

The history of user interfaces can be divided into the following phases according to the dominant type of user interface: Batch interface, 1945-1968 Command-line user interface, 1969 to present Graphical user interface, 1981 to present 21 3. 5 USER INTERFACE MODALITIES AND MODES A modality is a path of communication employed by the user interface to carry input and output. Examples of modalities: Input — allowing the users to manipulate a system. For example the computer keyboard allows the user to enter typed text, digitizing tablet allows the user to create free-form drawing Output — allowing the system to indicate the effects of the users’ manipulation.

For example the computer monitor allows the system to display text and graphics (vision modality), loudspeaker allows the system to produce sound (auditory modality) The user interface may employ several redundant input modalities and output modalities, allowing the user to choose which ones to use for interaction. A mode is a distinct method of operation within a computer program, in which the same input can produce different perceived results depending of the state of the computer program. Heavy use of modes often reduces the usability of a user interface, as the user must expend effort to remember current mode states, and switch between mode states as necessary. 4. 0 CONCLUSION In this unit, you have been introduced to the fundamental concepts user interface. You have also learnt the history and significance of user interface design. 5. 0 SUMMARY You must have learnt the following in this unit:?

The introduction of user interface which is the aggregate of means by which users interact with a particular machine, device, computer program or any other complex tool. ? The study of the various types of user interface design which includes graphical user interfaces, web-based user interfaces, command line interfaces e. t. c ? The history of user interfaces which can be divided into batch interface, command-line user interface and graphical user interface. ? The modality of a user interface which is a path of communication employed by the user interface to carry input and output. 22 6. 0 a. b. 7. 0 TUTOR MARKED ASSIGNMENT Explain the Microsoft’s Clippy the paperclip. Write a short note on the Command-line user interface.

FURTHER READING AND OTHER RESOURCES www. en. wikipedia. org MODULE 1 UNIT 2 DESIGNING GOOD USER INTERFACES 23 Table of Contents 1. 0 2. 0 3. 0 Introduction Objectives Main Content 3. 1 ESSENTIALS OF INTERFACE DESIGN 3. 2 DESIGNING A GOOD INTERFACE 3. 3 TIPS FOR DESIGNING GOOD USER INTERFACE 3. 4 UNDERSTANDING USERS Conclusion Summary Tutor Marked Assignment Further Reading and Other Resources INTRODUCTION 4. 0 5. 0 6. 0 7. 0 1. 0 Having read through the course guide, you will have a general understanding of what this unit is about and how it fits into the course as a whole. This unit describes the essentials of designing good interface designs. 2. OBJECTIVES By the end this unit, you should be able to: ? Explain the essentials of good interface design ? Identify the necessary tips needed for designing a good interface ? Have good understanding of various users 3. 0 3. 1 MAIN CONTENT ESSENTIALS OF INTERFACE DESIGN There are three pillars to an application’s success: ? Features ? Function ? Face Features refers to what the application will do for the user. Features are the requirements for the software. Function refers to how well the software operates. Bug-free software will function perfectly. Face refers to how the application presents itself to the user – the application’s “user interface. Features, function and face can be restated as questions: Does the software meet the user’s requirements? (Features) Does the software operate as intended? (Function) 24 Is the software easy to use? (Face) The goal of user interface design is to put a happy face on the application. Stated in more concrete terms, a successful user interface will require Zero Training and will be friendly not foreboding. Zero Training The goal of Zero Training could be considered as a sub-goal of friendly not foreboding. However, training costs are a major impediment to the usage of software making Zero Training an important goal by itself. There are two types of training involved in software design: software training and job training.

Software training assumes the user knows how to do the job at hand and only needs to learn how to use the software to do the job. Job training teaches the user how to do the job – which can include more than how to use the application to do the job. The goal of Zero Training relates to zero software training. Job training can be integrated with software training, but results in a much more ambitious project. Friendly not Foreboding Almost everything you do to implement the goal of Zero Training will further the goal of being friendly not foreboding. However, some techniques for reducing training may slow up experienced users. For example, you could pop-up new user messages whenever the user lands in a particular field.

Seeing the same message will get old after awhile; the experienced user should be able to dispense with the messages. Being friendly is an attitude and encompasses more than what is necessary for the Zero Training goal. Applications do have an attitude. For example, consider the following sets of application messages: “Database does not exist” “I could not find database “CorpInfo”. If you are sure this name is correct, CorpInfo could be unavailable due to maintenance or LAN problems. You should contact the help desk to see when CorpInfo will again be available. ” “SQL access error 123” “I could not save information to the database. You can try to save again to see if the error clears.

If you call the help desk concerning this problem, tell them you have a “SQL access error 123”. “out of hunk”1 “I have run out of memory (RAM). This typically happens do to a bug in the program which causes it to lose memory over time. Save your game if possible. To free the memory you will need to reset the computer (turn it off and then on). ” The attitude of the first message is “you did something that caused me a problem” while the attitude of the second message is “I have a problem. Could you give me a hand? ” 25 3. 1. 1 DESIGNING A GOOD USER INTERFACE Designing a good user interface is an iterative process. First, you design and implement a user interface using appropriate techniques.

Then you evaluate the design. The results of the evaluation feed the next design and implementation. You stop the process when you have met your design goals or you run out of time and/or money. Note that if you have different user communities (or the same user with different jobs), you may need different user interfaces, customizable user interfaces or both. For example, Microsoft Word provides four user interfaces: normal, outline, page layout and master. In addition, Microsoft Word provides a host of customization features for the keyboard, menu and toolbars. While design is important, the real key to creating a good user interface is in your evaluation techniques.

Obviously, you should use your own user interface. If you can’t use it, how can anyone else? Next, get feed back from your alpha testers, then from you beta testers. The best evaluations are done by watching over the shoulder of the user. The key here is watching. If you are telling the user what to do, you will never find out if your interface is easy to use. Let the user figure it out by himself. If the user has to ask you what to do or pauses to figure out what to do next, you may need to work on your interface. If the user grimaces, find out why. Learn from the experience. Some of my most innovative designs were shot down when the users could not figure them out.

You will need both new and experienced users for testing your interface. The new users will help you determine if you meet the Zero Training goal. The experienced users will let you know if your methods for meeting the Zero Training goal interfere with getting work done once the user has learned the software. 3. 1. 2 TIPS FOR DESIGNINIG GOOD USER INTERFACE 1. Consistency. The most important thing that you can possibly do is make sure that your user interface works consistently. If you can double-click on items in one list and have something happen then you should be able to double-click on items in any other list and have the same sort of thing happen.

Put your buttons in consistent places on all of your windows, use the same wording in labels and messages, and use a consistent colour scheme throughout. Consistency in your user interface allows your users to build an accurate mental model of the way that it works, and accurate mental models lead to lower training and support costs. 2. Set standards and stick to them. The only way that you’ll be able to ensure consistency within your application is to set design standards and then stick to them. The best approach is to adopt an industry standard and then fill any missing guidelines that are specific to your needs. Industry standards, such as the ones set by IBM (1993) and Microsoft (1995), will often define 95%-99% of what you need.

By adopting industry 26 standards you not only take advantage of the work of others you also increase the chance that your application will look and feel like other applications that your users purchase or have built. User interface design standards should be set during the Define Infrastructure Stage. 3. Explain the rules. Your users need to know how to work with the application that you built for them. When an application works consistently it means you only have to explain the rules once. This is a lot easier than explaining in detail exactly how to use each and every feature in an application step by step. 4. Support both novices and experts.

Although a library-catalog metaphor might be appropriate for casual users of a library system, library patrons, it probably is not all that effective for expert users, librarians. Librarians are highly trained people who are able to use complex search systems to find information in a library, therefore you should consider building a set of search screens to support their unique needs. 5. Navigation between screens is important. If it is difficult to get from one screen to another then your users will quickly become frustrated and give up. When the flow between screens matches the flow of the work that the user is trying to accomplish, then your application will make sense to your users. Because different users work in different ways, your system will need to be flexible enough to support their various approaches.

Interface-flow diagrams can be used during the Model Stage to model the flow between screens. 6. Navigation within a screen is important. In Western societies people read left to right and top to bottom. Because people are used to this should you design screens that are also organized left to right and top to bottom. You want to organize navigation between widgets on your screen in a manner that users will find familiar to them. 7. Word your messages and labels appropriately. The text that you display on your screens is a primary source of information for your users. If your text is worded poorly then your interface will be perceived poorly by your users.

Using full words and sentences, as opposed to abbreviations and codes makes your text easier to understand. Your messages should be worded positively, imply that the user is in control, and provide insight into how to use the application properly. For example, which message do you find more appealing “You have input the wrong information” or “An account number should be 8 digits in length. “? Furthermore, your messages should be worded consistently and displayed in a consistent place on the screen. Although the messages “The person’s first name must be input. ” and “An account number should be input. ” are separately worded well, together they are inconsistent.

In light of the first message, a better wording of the second message would be “The account number must be input” to make the two messages consistent. 8. Understand your widgets. You should use the right widget for the right task, helping to increase the consistency in your application and probably making it easier to build the application in the first place. The only way that you can learn how to use 27 widgets properly is to read and understand the user-interface standards and guidelines that your organization has adopted. 9. Look at other applications with a grain of salt. Unless you know that another application follows the user-interface standards and guidelines of your organization, you must not assume that the application is doing things right.

Although it is always a good idea to look at the work of others to get ideas, until you know how to distinguish between good user-interface design and bad user-interface design you have to be careful. Too many developers make the mistake of imitating the user interface of another application that was poorly designed. 10. Use colour appropriately. Colour should be used sparingly in your applications, and if you do use it you must also use a secondary indicator. The problem is that some of your users may be color blind – if you are using color to highlight something on a screen then you need to do something else to make it stand out if you want these people to notice it, such as display a symbol beside it. You also want to use colors in your application consistently so that you have a common look and feel throughout your application.

Also, colour generally does not port well between platform – what looks good on one system often looks poor on another system. We have all been to presentations where the presenter said “it looks good on my machine at home. ” 11. Follow the contrast rule. If you are going to use colour in your application you need to ensure that your screens are still readable. The best way to do this is to follow the contrast rule: Use dark text on light backgrounds and light text on dark backgrounds. It is very easy to read blue text on a white background but very difficult to read blue text on a red background. The problem is that there is not enough contrast between blue and red to make it easy to read, whereas there is a lot of contrast between blue and white. 12.

Use fonts appropriately – Old English fonts might look good on the covers of William Shakespeare’s plays, but they are really hard to read on a screen. Use fonts that are easy to read, such as serif fonts, Times Roman. Furthermore, use your fonts consistently and sparingly. A screen using two or three fonts effectively looks a lot better than a screen that uses five or six. Never forget that you are using a different font every time you change the size, style (bold, italics, underlining, … ), typeface, or colour. 13. Gray things out, do not remove them. You often find that at certain times it is not applicable to give your users access to all the functionality of an application.

You need to select an object before you can delete it, so to reinforce your mental model the application should do something with the Delete button and/or menu item. Should the button be removed or grayed out? Gray it out, never remove it. By graying things out when they shouldn’t be used people can start building an accurate mental model as to how your application works. If you simply remove a widget or menu item instead of graying it out then it is much more difficult for your users to build an accurate mental model because they only know what is currently available to them, and not what is not available. The old adage that out of sight is out of mind is directly applicable here. 28 14.

Use non destructive default buttons. It is quite common to define a default button on every screen, the button that gets invoked if the user presses the Return/Enter key. The problem is that sometimes people will accidentally hit the Enter/Return key when they do not mean to, consequently invoking the default button. Your default button shouldn’t be something that is potentially destructive, such as delete or save (perhaps your user really did not want to save the object at that moment). 15. Alignment of fields . When a screen has more than one editing field you want to organize the fields in a way that is both visually appealing and efficient.

As shown in Figure 1 I have always found that the best way to do so is to left-justify edit fields, or in other words make the left-hand side of each edit field line up in a straight line, one over the other. The corresponding labels should be right justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen. 16. Justify data appropriately. For columns of data it is common practice to right justify integers, decimal align floating point numbers, and left justify strings. 17. Do not create busy screens. Crowded screens are difficult to understand and hence are difficult to use. Experimental results show that the overall density of the screen should not exceed 40%, whereas local density within groupings shouldn’t exceed 62%. 18. Group things on the screen effectively.

Items that are logically connected should be grouped together on the screen to communicate that they are connected, whereas items that have nothing to do with each other should be separated. You can use whitespace between collections of items to group them and/or you can put boxes around them to accomplish the same thing. 19. Open windows in the center of the action. When your user double-clicks on an object to display its edit/detail screen then his or her attention is on that spot. Therefore it makes sense to open the window in that spot, not somewhere else. 20. Pop-up menus should not be the only source of functionality. Your users cannot learn how to use your application if you hide major functionality from them.

One of the most frustrating practices of developers is to misuse pop-up, also called contextsensitive, menus. Typically there is a way to use the mouse on your computer to display a hidden pop-up menu that provides access to functionality that is specific to the area of the screen that you are currently working in. 29 Figure 1:- Showing that alignment of fields is critical 3. 2 UNDERSTANDING USERS You must understand the user to be able to put a happy face on your application. You should understand the user’s job, how the software fits in with that job and how the user goes about getting the job done. You need to approach the design of software from the user’s viewpoint not from an abstract requirements document.

Specifically, you should understand what the user will be doing with the application. If you can think like a user, you can create a much better user interface. Here are some basic principles to remember about users: a. Your software is like a hammer – the user doesn’t really care how well crafted it is, the user just wants nails put in the wall. Users just want to do their job (or play their game). They don’t care about you or your software. Your software is just an expedient tool to take the user where the user wants to go. b. Given a selection of hammers to buy at the hardware store, the user will select the one which will be most fun to use.

Of course, this varies by user – some will want the plastic handle, some the wood, some the green, etc. When evaluating your software, users are often swayed by looks, not function. Thus, steps taken to make the product look good (nice icons, pictures, good colour scheme, fields aligned, etc. ) will often favourably enhance evaluations of your software. c. It had better drive nails. The user will not really know if your software is adequate to the job until the user has used the software to do actual work. From an interface perspective, the software should not look like it can do more than it can. 30 d. Some users will try to use a hammer to drive a screw.

If your software is good, some user somewhere will try to use the software for some purpose for which you never intended it to be used. Obviously, you can not design a user interface to deal with uses you can not foresee. There is no single rigid model of the right way to use the software, so build in flexibility. e. Users will not read an instruction manual for a hammer. They won’t read one for your software either, unless they really have too. Users find reading instruction manuals almost as pleasurable as dental work. f. A user reading the instruction manual for a hammer is in serious trouble. When you create your help system (and printed manual), remember that the user will only resort to those materials if the user is in trouble.

The user will want a problem solved as fast and as easily as possible. g. Hammers don’t complain. You should try to eliminate error messages and any error messages your program needs should have the right attitude. 4. 0 CONCLUSION In this unit, you have been introduced to the essentials of good interface design. You have also learnt the necessary tips needed for designing a good interface and the need for understanding various users. 5. 0 SUMMARY What you have learnt in this unit are:? Introduction to essentials of interface design with emphasis on the features, functions and the face of the software. ? Designing a good user interface which has been described as an iterative process.

You design, implement, evaluate and redesign until all removable errors have been taken care of. ? The tips necessary for designing a good designing user interface which includes consistency, setting standards and sticking to them, supporting of both novices and experts, e. t. c. ? Understanding the user’s job, how the software fits in with that job and how the user goes about getting the job done. Exercises 1. Describe the essentials of interface design. 2. Write a short note on any three tips necessary for designing a good user interface. 31 6. 0 a. b. 7. 0 TUTOR MARKED ASSIGNMENT How do you ensure that the interface support both novices and expert?

Write a short note on the design of a user interface for a user with hearing disability. FURTHER READING AND OTHER RESOURCES www. wikipedia. org http://www. linfo. org/gui. html 32 MODULE 1 UNIT 3 GRAPHICAL USER INTERFACE Table of Contents 1. 0 2. 0 3. 0 Introduction Objectives Main Content 3. 1 Introduction to Graphical User Interface 3. 2 History of Graphical User Interface 3. 3 Elements of Graphical User Interface 3. 4 Three Dimensional Graphical User Interface Conclusion Summary Tutor Marked Assignment Further Reading and Other Resources INTRODUCTION 4. 0 5. 0 6. 0 7. 0 1. 0 This unit describes the general concept of Graphical user interface (GUI) and also the history and elements of graphical user interface.

The concept of three dimensional (3D) graphical user interfaces is also introduced. 2. 0 OBJECTIVES By the end this unit, you should be able to: ? Describe a graphical user interface ? Explain the history behind graphical user interface ? Highlight the elements of a graphical user interface ? Describe the three-dimensional user interfaces 3. 0 3. 1 MAIN CONTENT INTRODUCTION TO GRAPHICAL USER INTERFACE Graphical user interfaces, also known as GUIs, offer a consistent visual language to represent information stored in computers. This makes it easier for people with little computer skills to work with and use computer software. This article explains the most common elements of the visual language interfaces. 33

A graphical user interface is a type of user interface which allows people to interact with electronic devices such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands. A GUI offers graphical icons, and visual indicators, as opposed to text-based interfaces, typed command labels or text navigation to fully represent the information and actions available to a user. The actions are usually performed through direct manipulation of the graphical elements. The term GUI is historically restricted to the scope of two-dimensional display screens with display resolutions capable of describing generic information, in the tradition of the computer science research at Palo Alto Research Center (PARC).

The term GUI earlier might have been applicable to other high-resolution types of interfaces that are nongeneric, such as videogames, or not restricted to flat screens, like volumetric displays. 3. 2 HISTORY OF GRAPHICAL USER INTERFACE Precursor to GUI The precursor to GUIs was invented by researchers at the Stanford Research Institute, led by Douglas Engelbart. They developed the use of text-based hyperlinks manipulated with a mouse for the On-Line System. The concept of hyperlinks was further refined and extended to graphics by researchers at Xerox PARC, who went beyond text-based hyperlinks and used a GUI as the primary interface for the Xerox Alto computer. Most modern general-purpose GUIs are derived from this system.

As a result, some people call this class of interface a PARC User Interface (PUI) (note that PUI is also an acronym for perceptual user interface). Ivan Sutherland developed a pointer-based system called the Sketchpad in 1963. It used a light-pen to guide the creation and manipulation of objects in engineering drawings. PARC User Interface The PARC User Interface consisted of graphical elements such as windows, menus, radio buttons, check boxes and icons. The PARC User Interface employs a pointing device in addition to a keyboard. These aspects can be emphasized by using the alternative acronym WIMP, which stands for Windows, Icons, Menus and Pointing device.

Evolution Following PARC the first GUI-centric computer operating model was the Xerox 8010 Star Information System in 1981[4] followed by the Apple Lisa (which presented concept of menu bar as well as window controls), in 1982 and the Atari ST and Commodore Amiga in 1985. The GUIs familiar to most people today are Microsoft Windows, Finder Interface (Mac OS X), and the X Window System interfaces. Apple, IBM and Microsoft used many of Xerox’s ideas to develop products, and IBMs Common User Access specifications formed the basis of the user interface found in Microsoft Windows, IBM OS/2 34 Presentation Manager, and the Unix Motif toolkit and window manager. These ideas evolved to create the interface found in current versions of Microsoft Windows, as well as in Mac OS X and various desktop environments for Unix-like operating systems, such as Linux. Thus most current GUIs have largely common idioms.

Post-WIMP interfaces Smaller mobile devices such as PDAs and smart phones typically use the WIMP elements with different unifying metaphors, due to constraints in space and available input devices. Applications for which WIMP is not well suited may use newer interaction techniques, collectively named as post-WIMP user interfaces. [5] Some touch-screen-based operating systems such as Apple’s iPhone OS currently use post-WIMP styles of interaction. The i Phone’s use of more than one finger in contact with the screen allows actions such as pinching and rotating, which are not supported by a single pointer and mouse. A class of GUIs sometimes referred to as post-WIMP include 3D compositing window manager such as Compiz, Desktop Window Manager, and LG3D.

Some post-WIMP interfaces may be better suited for applications which model immersive 3D environments, such as Google Earth. 3. 3 ELEMENTS OF GRAPHICAL USER INTERFACES A GUI uses a combination of technologies and devices to provide a platform the user can interact with, for the tasks of gathering and producing information. A series of elements conforming a visual language have evolved to represent information stored in computers. This makes it easier for people with little computer skills to work with and use computer software. The most common combination of such elements in GUIs is the WIMP paradigm, especially in personal computers. User interfaces use visual conventions to represent the generic information shown.

Some conventions are used to build the structure of the static elements on which the user can interact, and define the appearance of the interface. The key elements of GUI are divided into two categories viz Structural and Interactive elements. 3. 3. 1 Structural elements User interfaces use visual conventions to represent the generic information shown. Some conventions are used to build the structure of the static elements on which the user can interact, and define the appearance of the interface. a. Window A window is an area on the screen that displays information, with its contents being displayed independently from the rest of the screen. An example of a window is what appears on the screen when the “My Documents” icon is clicked in the Windows 35 Operating System.

It is easy for a user to manipulate a window: it can be opened and closed by clicking on an icon or application, and it can be moved to any area by dragging it (that is, by clicking in a certain area of the window – usually the title bar along the tops – and keeping the pointing device’s button pressed, then moving the pointing device). A window can be placed in front or behind another window, its size can be adjusted, and scrollbars can be used to navigate the sections within it. Multiple windows can also be open at one time, in which case each window can display a different application or file – this is very useful when working in a multitasking environment. The system memory is the only limitation to the amount of windows that can be open at once. There are also many types of specialized windows.

A Container Window a window that is opened while invoking the icon of a mass storage device, or directory or folder and which is presenting an ordered list of other icons that could be again some other directories, or data files or maybe even executable programs. All modern container windows could present their content on screen either acting as browser windows or text windows. Their behaviour can automatically change according to the choices of the single users and their preferred approach to the graphical user interface. A browser window allows the user to move forward and backwards through a sequence of documents or web pages. Web browsers are an example of these types of windows. Text terminal windows are designed for embedding interaction with text user interfaces within the overall graphical interface.

MS-DOS and UNIX consoles are examples of these types of windows. A child window opens automatically or as a result of a user activity in a parent window. Pop-up windows on the Internet can be child windows. A message window, or dialog box, is a type of child window. These are usually small and basic windows that are opened by a program to display information to the user and/or get information from the user. They usually have a button that must be pushed before the program can be resumed. b. Menus Menus allow the user to execute commands by selecting from a list of choices. Options are selected with a mouse or other pointing device within a GUI. A keyboard may also be used.

Menus are convenient because they show what commands are available within the software. This limits the amount of documentation the user reads to understand the software. A menu bar is displayed horizontally across the top of the screen and/or along the tops of some or all windows. A pull-down menu is commonly associated with this menu type. When a user clicks on a menu option the pull-down menu will appear. 36 A menu has a visible title within the menu bar. Its contents are only revealed when the user selects it with a pointer. The user is then able to select the items within the pulldown menu. When the user clicks elsewhere the content of the menu will disappear.

A context menu is invisible until the user performs a specific mouse action, like pressing the right mouse button. When the software-specific mouse action occurs the menu will appear under the cursor. Menu extras are individual items within or at the side of a menu. c. Icons An icon is a small picture that represents objects such as a file, program, web page, or command. They are a quick way to execute commands, open documents, and run programs. Icons are also very useful when searching for an object in a browser list, because in many operating systems all documents using the same extension will have the same icon. d. Controls (or Widgets) Interface element that a computer user interacts with, and is also known as a control or Widget.

Window A paper-like rectangle that represents a “window” into a document, form, or design area. Pointer (or mouse cursor) The spot where the mouse “cursor” is currently referencing. Text box A box in which to enter text or numbers. Button An equivalent to a push-button as found on mechanical or electronic instruments. Hyperlink Text with some kind of indicator (usually underlining and/or color) that indicates that clicking it will take one to another screen or page. Drop-down list 37 A list of items from which to select. The list normally only displays items when a special button or indicator is clicked. Check box A box which indicates an “on” or “off” state via a check-mark or an “? “.

Radio button A button, similar to a check-box, except that only one item in a group can be selected. Its name comes from the mechanical push-button group on a car radio receiver. Selecting a new item from the group’s buttons also deselects the previously selected button. Data grid A spreadsheet-like grid that allows numbers or text to be entered in rows and columns. d. Tabs A tab is typically a rectangular small box which usually contains a text label or graphical icon associated with a view pane. When activated the view pane, or window, displays widgets associated with that tab; groups of tabs allow the user to switch quickly between different widgets.

This is used in the web browsers Firefox, Internet Explorer, Konqueror, Opera, and Safari. With these browsers, you can have multiple web pages open at once in one window, and quickly navigate between them by clicking on the tabs associated with the pages. Tabs are usually placed in groups at the top of a window, but may also be grouped on the side or bottom of a window. 3. 3. 2 Interaction elements Some common idioms for interaction have evolved in the visual language used in GUIs. Interaction elements are interface objects that represent the state of an ongoing operation or transformation, either as visual remainders of the user intent (such as the pointer), or as affordances showing places where the user may interact. a. Cursor

A cursor is an indicator used to show the position on a computer monitor or other display device that will respond to input from a text input or pointing device. b. Pointer One of the most common components of a GUI on the personal computer is a pointer: a graphical image on a screen that indicates the location of a pointing device, and can be used to select and move objects or commands on the screen. A pointer commonly appears as an angled arrow, but it can vary within different programs or operating systems. 38 Example of this can be found within text-processing applications, which uses an I-beam pointer that is shaped like a capital I, or in web browsers which often indicate that the pointer is over a hyperlink by turning the pointer in the shape of a gloved hand with outstretched index finger.

The use of a pointer is employed when the input method, or pointing device, is a device that can move fluidly across a screen and select or highlight objects on the screen. Pointer trails can be used to enhance its visibility during movement. In GUIs where the input meth

How to cite this assignment

Choose cite format:
User Interface Handbook Assignment. (2021, Nov 03). Retrieved April 23, 2024, from