Chapter 8:

User Interface Design

Learning outcomes
Explain user interface

Explain the concept of human – computer interaction, user friendly interface design

Summarize the seven habits if successful interface designers

Summarize the ten guidelines for user interface design

Design effective source documents and forms

Explain printed output report design guidelines and principles

Describe three types of printed output reports

Discuss output and input technology issues

Describe output and input security and control issues

Explain emerging user interface trends, including modular design, responsive web design and prototypes
User Interface
User Interface (UI)describes how users interact with a computer system and consists of all the hardware, software, screens,
menus, functions, output and features that affect two way communication between user and computer.
UI is the key to usability – user satisfaction, support for functions and system effectiveness.
GUI (graphical user interface) – mouse and screen icons.
User now designs the output – user cantered systems, combination of input, output, data queries to perform their jobs.

Human- computer Interaction

HCI describes the relationship between computers and the people who use them to perform their work.
Includes all the communication and instructions necessary to enter input to the system and to obtain output in the form of screen
displays or printed reports.
Main objective is to create a user-friendly design that is easy to learn and use.

Why do you think ITS or Brightspace is not user friendly?

Seven habits of successful Interface Designers
1. Understand the business – system must support users and achieve organisational goal.
2. Maximize Graphical effectiveness – people learn better visually
3. Think like a user – look at experience, knowledge and skill level (novice or expert). Must be easy to learn, use terms and
metaphors that are familiar to user, users expect useful, understandable feedback. Remember these people have life
experience.
4. Use models and prototypes – storyboarding (sketch), get information/feedback, questionnaires/interviews /etc.
5. Focus on usability – interface should have all tasks, commands, communication between user and IS. Screen should offer
choices /main menu (not to much or little options), show common choice but with additions somewhere else.
6. Invite Feedback – Monitor usage and solicit user suggestions.
7. Document everything – document designs using free hand or CASE tools so that programmers can have it and it is there for
reference.
Guidelines for User Interface Design
These are guidelines/starting points/people’s experience, there is not set standard. Just make sure to focus on user!!!
1. Create an Interface that is easy to learn and use
1. Focus on system design objective
2. Create a design that is easy to understand and remember
3. Maintain consistency on all pages
4. Provide commands, actions, responses that are consistent and predictable
5. Allow users to correct errors easily
6. Clearly label controls, buttons and icons
7. Use familiar images
8. Show all commands in a list menu but dim commands that are not available
9. Easy to navigate or return to any menu

2. Enhance User productivity

1. If users are empowered = increased productivity / interface to complex = decreased productivity
2. Group functions together to create a useable menu
3. Arrange menus either by alphabet or most used
4. Provide shortcuts
5. Use default values (stop people from having to type out everything all the time)
6. Allow duplicate value function (copy the same data from page to page)
7. Provide fast find feature
8. Consider natural language feature – allows user to type commands or requests in normal text phrases
Guidelines for User Interface Design
3. Provide flexibility
1. Use default value, user can either accept the value by pressing enter or type what value they want.
4. Provide users with help and feedback
1. Most important as it has the highest impact
2. Help must always be available (offer information about menu, procedures, shortcuts and errors)
3. Context- sensitive help offers assistance for tasks in progress.
4. Allow users to return to a point where help was requested. Keep help simple and concise.
5. Include contact information (telephone/emails/anything) of help desk
6. Confirm user confirmation before deletion and provide a recovery method. Build in safeguards to protect crucial data.
7. Provide and “undo” button
8. When there is an error, highlight the error part and allow user to make correction without having to retype everything
9. Use hypertext links to navigate
10. Display messages in logical place on screen and be consistent
11. Alert users to long processing times and delays – provide progress report.
12. Allow messages to stay on screen long enough for users to read them
13. Let the user know whether the task or operation was successful or not
14. Allow test explanation if an icon or image is used on a control button.
15. Use messages that are specific, understandable and professional.
Guidelines for User Interface Design
5. Create and Attractive layout and design
1. Consider colours (but avoid gaudy and bright colours), layout, ease of use.
2. Use mock up and menu tress that can be tested on users for their input.
3. Doing less is better.
4. Can use special effects sparingly
5. Use hyperlinks to navigate
6. Group related objects and information
7. Screen density is important, keep screen displays uncluttered, have more white space
8. Display titles, messages and instructions in a consistent manner and in the same location
9. Use consistent terminology
10.Ensure the commands always do the same thing on all pages
11. Ensure that similar mouse actions will produce the same results throughout
12.When the user enters data that fills the field, make the user press enter to move to the next field.
13.Stick to patterns when appropriate to reinforce on-screen instructions.
14.Provide a keystroke alternative for each menu command, with easy-to-remember letters
15.Use familiar commands if possible
16.Provide a Window look and feel in the interface design
17.Avoid complex terms and technical jargon.
Guidelines for User Interface Design
6. Enhance the Interface
1. There can be many features (menu, toolbar, dialog box, drop down, toggle, list, command buttons, etc). Screen design requires a sense of
aesthetics and technical skills.

2. Open screen introduces system, very important

3. Use command button to initiate action (ex: click on find or print)

4. If software package is used, check to see if it allows custom menu and toolbars.

5. Add shortcut features

6. If variable input is needed, provide a dialog box that explains what is required.

7. Toggle button makes it easy to show on or off status

8. List box displays available choices

9. Scroll bar allows users to move through the choices

10. Option button or radio button to control user choices

11. Check box to select one or more choices from group

12. Calendar control to allow user to select a date

Guidelines for User Interface Design
7. Focus on data entry screens
1. Form filling is a data entry method, where a blank form that duplicates or resembles the course document is completed on the screen.
2. Restrict user access to screen locations where data is entered.
3. Provide a way to leave a data screen at any time without entering- cancel button
4. Provide description caption for every field, show where to enter and the max size.
5. Provide means to move around the form in order
6. Allow user to add, change, delete and view records
7. Design the screen to match the source document
8. Display a sample format if a user must enter values in a field in a format (DD/MM/YYYY)
9. Use input mask (template or pattern that restricts data entry and prevent errors)
10. Require an ending keystroke like tab/enter for every field
11. Don’t ask users to enter leading zeros for numeric fields (082……)
12. Don’t ask users for trailing zeros that includes decimals (98.00 = 98)
13. Display default values, so user just presses enter to accept value
14. Use a default value if field value will be constant for some records
15. Display list of acceptable values per field
16. Ask users to confirm the accuracy of input before entering by displaying a message
Guidelines for User Interface Design
8. Use validation rules – improve input quality by testing the data and rejecting any entry that fails to meet specified conditions .
1. Sequence check – predetermined sequence.

2. Existence check – mandatory field required before saving

3. Data type check – data item must fit the required data type. Numeric must fit numeric

4. Range check – data item falls between specified minimum and maximum values

5. Reasonable check – identified values that are questionable but not necessarily wrong

6. Validity check – data item that musty have a certain value

7. Combination check – performed on two or more fields to ensure that they are consistent or reasonable when considered together.

8. Batch control- totals used to verify batch input.

9. Manage Data Effectively

9. Companies should enter and verify data immediately and each data item should have a specific type: numeric, alphanumeric, alphabetic.

10. Collect data as close as possible to source. Easiest and most accurate (least expensive) strategy is automated data capture.

11. Can use audit trails to keep track of who changed what.
Guidelines for User Interface Design
10. Reduce input volume
1. Input necessary data only.
2. Don’t input data that user can retrieve from system files or calculated from other data.
3. Don’t input constant data.
4. Use codes.
Source Document and Form Design
Garbage in, garbage out (GIGO) – what you put in you get out.
Main objective: ensure quality, accuracy and timeliness of data.
Source document collects input data, triggers or authorizes an input action and provides a record of the original transaction.
Good form layout makes input efficient
Source document zones:

• Heading zone – company logo/name, title and # of the form

• Control zone – codes, ID info, numbers, dates for storing
• Instruction zone – instructions on how to complete the form
• Main part /body – captions and areas for entering variable data
• Total – totals
• Authorization zone – required signatures

Information must flow left to right, top to bottom

Printed output
Before you design, ask the question(s):
Why in printed format? Who wants it? Why is it needed? How will it be used? What info is on it? Is it designed for a specific device? How and when will it be delivered? Is
security considered?
1. Report Design
◦ Turnaround documents – fill in paper report and return it
◦ Reports must be easy to read and organized
◦ There are report wizards
◦ Multiple copies of the same report is character based report, like exam timetables
◦ Mock up / prototype allows users to review and give feedback
2. Report Design Principles
◦ Report Header and footers
◦ Repeating fields – to include or not?
◦ Consistent Design
3. Types of report
◦ Detailed Report
◦ Exception report –only that meets a certain condition
◦ Summary report
◦ Turnaround document – it is an external document but with a tear off portion that is returned for input later on.
◦ Control break report – this includes both a summary and detailed section, we also see it as a graph and each transaction beneath the graph.
◦ Drill down report – allows the user to activate a “hot spot hyperlink” on the report, which tells the system to display a lower- level report, providing more
detailed information.
Technology issues
Output
 Internet-based information delivery – online catalogues ,view statements, everything you can think of online
 Email – communication, forms, transactions, etc
 Blogs – posting reviews, promoting products (facebook, you tube, tik tok)
 Instant messaging – team communication
 Wireless device – mobile devices
 Digital audio, images and video – classes – presentations, etc
 Automated fax system – fax to email
 Podcasts – iTunes
 Computer Output to digital media – scanned documents and saved on pc
◦ Specialized forms of output – portable web connected device that can run multiple apps, handle output, communication (phone)
◦ Retail POS that handle card transactions, update inventory and print receipts
◦ ATM
◦ Specialised printer for labels, ID cards, driver licence, etc
◦ Plotters that produce high quality blueprints, maps and diagrams
◦ Electronic detection of data embedded in credit cards bank cards, ID cards
 Technology issues
Input

Batch input – performed on a specific time schedule (daily, weekly, monthly)

OR
Online input – has immediate validation and availability of data
Trade off – manual entry is slower, more expensive

Security and control issues

Output security and control
Output must be accurate, complete, current and secure.
Reports have titles, page numbers, report number/code, printing date, time period covered, must reach the right person (authorised), it must
have confidential on it, etc.
Input security and control
Starting from source document, everything must be secure.
Audit trails can help in keeping record of who, what, when and how.
Data restore/recovery functions should be in place (based on organisation policies)
Encryption and decryption is also used.
Emerging trends
Modular design/ modules – modules are designed to perform a single function. These are like objects.
Responsive Web design – renders web content properly, independently of the device. Focus on essential user interface issues. Addresses
various non-functional attributes (usability, performance, maintainability)
Prototyping – early rapidly constructed working version of the IS. (Agile uses it)
System prototyping – produces full functional system
Design prototyping – used to verify user requirements and then discarded
Benefits of prototyping:
1. User and developers void misunderstanding
2. Developers create accurate specifications for finished system
3. Managers evaluate working model more effectively than paper based.
4. SA use to develop testing and training procedures
5. Reduces risk and potential financial exposure when system fails to support business needs.
Disadvantages:
1. Rapid pace of development can cause quality problems, which is not discovered until the end
2. Other system requirements like reliability and maintainability cannot be tested using prototyping
3. In complex systems, prototype becomes unwieldy and difficult to manage
4. Further customisation and maintenance cost if user accepts the prototype but it doesn’t meet the needs.
Conclusion
User interface is explained

The concept of human – computer interaction, user friendly interface design is explained

The seven habits if successful interface designers is listed

The ten guidelines for user interface design is in detailed listed

The source documents and forms is identified

Printed output report design guidelines and principles are identified

The three types of printed output reports are listed

The output and input technology issues are listed

The output and input security and control issues are listed

Emerging user interface trends, including modular design, responsive web design and prototypes are explained