Systems Design - Walailak University

ITM-631 Information System Development

User interface design

Systems Design

ผูส้อน ดร.สลลิ บญุพราหมณ์

1

... �ញ�� ្ ឈ ោ គ ឈ្ � �គ � ្្� ៅ� ��្ ដ �ឈ ឋ �ញ្ឈ ោញៅ� � � � �‌ ្្ ឈ � � � � ្�ញ� ង�

ឈ ��ឈ � គ ្្ ឋ � � � � � ញ� � � �ឋ �្ � ្ ឋ � � � � ្ ឈ ោ គ ឈ្ � �គ � �្ � �្

ៅ� �ញគ � �� ្�ញ�� ង� ឋ �ៅោ �� ‌ �ដ ញ្ � �� ឋ � � ញ� �្ � � � � ្ ឈ � ‌ �

ខ ញ្ឈ ោ � ញ្� �� ង�ឋ �� ្ ឈ ោ គ ឈ្ � �គ ៅគ � � � �គ ឈ គ ៅ� � � � �គ � ង�

ឈ ញ� ឋ ��ឋ ��្ ឃ�� ្ …

คดัตดัตอนจากพระบรมราโชวาทในพธิพีระราชทานปรญิญาบตัร

ณ จฬุาลงกรณ์มหาวทิยาลยั

25 กรกฎาคม 2506

2

Contents

User interface design

Control and feedback

Output design

Input screen design

Data coding

Data validation

3

Introduction

User interface design is the first task in the systems design phase of the SDLC

Designing the interface is extremely important, because everyone wants a system that is easy to learn and use

4

User interface คอือะไร

The way a person interacts with a computer or electronic device. It comprises the screen

menus and icons, keyboard shortcuts, command language and online help, as well as physical buttons.

5

6

User interfaces should be designed to match the skills, experience and expectations of its anticipated users.

System users often judge a system by its interface rather than its functionality.

A poorly designed interface can cause a user to make catastrophic errors.

Poor user interface design is the reason why so many software systems are never used

e��â� àċǻ ĉà�ć�� ĉàå� ĉ�ċ� � æ�àc� � ǻ ĕæ�å�c�æććee � ććċċ WALAI AutoLib e�aåfĉe ć� �ċ�ĉåĉàåe �đ��ĉåćààċ � .�â ćaâ ć� ă� à

7

User Interface Design

Evolution of the User Interface

Process-control

As information management evolved from centralized data processing to dynamic, enterprise-wide systems, the primary focus also shifted — from the IT department to the users themselves

User-centered system

Requires an understanding of human-computer interaction and user-centered design principles

8

User Interface Design

Human-Computer Interaction

HCI describes the relationship between computers and people who use them to perform their jobs

Graphical user interface (GUI)

Main objective is to create a user-friendly design that is easy to learn and use

10

Human factors in interface design 11

Limited short-term memory People can instantaneously remember about 7 items of information. If

you present more than this, they are more liable to make mistakes.

People make mistakes When people make mistakes and systems go wrong, inappropriate

alarms and messages can increase stress and hence the likelihood of more mistakes.

People are different People have a wide range of physical capabilities. Designers should not

just design for their own capabilities.

People have different interaction preferences Some like pictures, some like text

Types of User Interfaces

Natural-language interfaces

Question-and-answer interfaces

Menus

Form-fill interfaces

Command-language interfaces

Direct manipulation /Graphical User Interfaces (GUIs)

12

1. Natural-Language Interfaces

Permit users to interact with the computer in their everyday or "natural" language

Implementation problems and extraordinary demand on computing resources have so far kept natural-language interfaces to a minimum

13

15

2. Question-and-Answer Interfaces

The computer displays a question to the user on the display

The user enters an answer

The computer acts on that input information in a preprogrammed manner

Users unfamiliar with applications may find question-and-answer interfaces most comfortable

3. Menus

Provides the user with an onscreen list of available selections

Not hardware dependent

Can be put aside until the user wants to use them

Can be nested within one another to lead a user through options in a program

GUI menus

Object menu

16

ตวัอยา่งเมนู

18

19 โมดลูบรหิารจัดการสมาชกิของระบบหอ้งสมดุอตัโนมัต ิWALAI AutoLib โดยสํานักวชิาสารสนเทศศาสตร ์ม.วลัยลักษณ์

4. Form-Fill Interfaces (I/O Forms)

Onscreen forms or Web-based forms displaying fields containing data items or parameters that need to be communicated to the user

Advantage

The filled-in form provides excellent documentation

Disadvantage

Users experienced with the system or application may become impatient

20

ตวัอยา่งแบบฟอรม์

21

5. Command-Language Interfaces

Allows the user to control the application with a series of keystrokes, commands, phrases, or some sequence of these

Affords the user more flexibility and control

Require memorization of syntax rules

May be an obstacle for inexperienced users

25

6. Graphical User Interfaces

Direct manipulation

Provide users constant feedback on task accomplishment

An appropriate model of reality or an acceptable conceptual model of the representation must be invented

26

27

Radio button Check list Drop-down list Text box

28

Tab

Button

Calendar

UI design principles 29

UI design must take account of the needs, experience and capabilities of the system users. Designers should be aware of people’s physical and mental

limitations (e.g. limited short-term memory) and should recognise that people make mistakes. UI design principles underlie interface designs although not

all principles are applicable to all designs

30

Principle Description

User familiarity The interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system.

Consistency The interface should be consistent in that, wherever possible, comparable operations should be activated in the same way.

Minimal surprise Users should never be surprised by the behaviour of a system.

Recoverability The interface should include mechanisms to allow users to recover from errors.

User guidance The interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities.

User diversity The interface should provide appropriate interaction facilities for different types of system user.

Principles of User-Centered Design 31

Understand the Business

Maximize Graphical Effectiveness

Think Like a User

Use Models and Prototypes

Focus on Usability

Invite Feedback

Document Everything

Designing the User Interface

Good user interface design is based on a combination of ergonomics, aesthetics, and interface technology

32


Follow eight basic guidelines

1. Design a transparent interface

2. Create an interface that is easy to learn and use

3. Enhance user productivity

4. Make it easy for users to obtain help or correct errors

5. Minimize input data problems

6. Provide feedback to users

7. Create an attractive layout and design

8. Use familiar terms and images

33


1) Design a Transparent Interface

Facilitate the system design objectives, rather than calling attention to the interface

Create a design that is easy to learn and remember

Design the interface to improve user efficiency and productivity

34

Write commands, actions, and system responses that are consistent and predictable

Minimize data entry problems

Allow users to correct errors easily

Create a logical and attractive layout

35


2) Create an Interface that Is Easy to Learn and Use

Clearly label all controls, buttons, and icons

Select only those images that users can understand easily, and provide on-screen instructions that are logical, concise, and clear

Show all commands in a list of menu items

Make it easy to navigate

36


3) Enhance User Productivity

Organize tasks, commands, and functions in groups that resemble actual business operations

37


Create alphabetical menu lists

Provide shortcuts so experienced users can avoid multiple menu levels

Use default values if the majority of values in a field are the same

Use a duplicate value function that enables users to insert the value from the same field in the previous record

Provide a fast-find feature

38


4) Make It Easy for Users to

Obtain Help or Correct

Errors

Ensure that Help is

always available

Provide user-selected

Help and context-

sensitive Help

39


Provide a direct route for users to return to the point from where help was requested.

Include contact information such as telephone extension or e-mail address

Require user confirmation before data deletion

Provide an UNDO key or a menu choice that allows the user to eradicate the results of the recent command

When a user-entered command contains an error, highlight the erroneous part

40


5) Minimize Input Data Problems

Create input masks

Display event-driven messages and reminders

Establish a list of predefined values that users can click to select

Build in rules that enforce data integrity

41


6) Provide Feedback to Users

Display messages at a logical place on the screen

Alert users to lengthy processing times or delays

Allow messages to remain on the screen long enough for users to read them

Let the user know whether the task or operation was successful or not

Provide a text explanation if you use an icon or image on a control button

42


7) Create an Attractive Layout and Design

Use appropriate colors to highlight different areas of the screen

Use special effects sparingly

Use hyperlinks that allow users to jump to related topics

Group related objects and information

Keep screen displays uncluttered

Display titles, messages, and instructions in an consistent manner

43


Use consistent terminology

Ensure that commands always will have the same effect

Ensure that similar mouse actions will produce the same results throughout the application

When the user enters data that completely fills the field, do not move automatically to the next field

44


8) Use Familiar Terms and Images

Remember that users are accustomed to a pattern of red=stop, yellow=caution, and green=go

Provide a keystroke alternative for each menu command

Use familiar commands if possible

Provide a Windows look and feel in your interface design if users are familiar with Windows-based applications

Avoid complex terms and technical jargon

45


Add Control Features Menu bar Toolbar Command button Dialog box Text box Toggle button

46


Add Control Features

List box – scroll bar

Drop-down list box

Option button, or

radio button

Check box

Calendar control

Switchboard

47

49

ตวัอยา่งความไมค่งที ่

ตวัอยา่งการออกแบบเมนู ทีข่าดความยดืหยุน่

50

Feedback for Users

All systems require feedback to monitor and change behavior

Feedback compares current behavior with predetermined goals and gives back information describing the gap between actual and intended performance

52

ตวัอยา่ง response

ตวัอยา่งการแจง้เพือ่ใหข้อ้มลูเพิม่เตมิ

53

ตวัอยา่งการแจง้ผลการทํางาน 54

Design factors in message wording 55

Factor Description

Context Wherever possible, the messages generated by the system should reflect the current user context. As far as is possible, the system should be aware of what the user is doing and should generate messages that are relevant to their current activity.

Experience As users become familiar with a system they become irritated by long, ‘meaningful’ messages. However, beginners find it difficult to understand short terse statements of a problem. You should provide both types of message and allow the user to control message conciseness.

Skill level Messages should be tailored to the user’s skills as well as their experience. Messages for the different classes of user may be expressed in different ways depending on the terminology that is familiar to the reader.

Style Messages should be positive rather than negative. They should use the active rather than the passive mode of address. They should never be insulting or try to be funny.

Culture Wherever possible, the designer of messages should be familiar with the culture of the country where the system is sold. There are distinct cultural differences between Europe, Asia and America. A suitable message for one culture might be unacceptable in another.

Ian Sommerville. 2007. Software Engineering. 8th Ed. Pearson.

Types of Feedback

Acknowledging acceptance of input

Recognizing that input is in the correct form

Notifying that input is not in the correct form

Explaining a delay in processing

Acknowledging that a request is completed

Notifying that a request was not completed

Offering the user more detailed feedback

56

Including Feedback in Design

Can be a powerful reinforce of users’ learning processes

Serve to improve user performance with the system

Increase their motivation to produce

Improve the fit among the user, task and the technology

57

A Variety of Help Options

Pressing a function key, such as F1

A GUI pull-down menu

Context-sensitive help

Icon tips

Wizards

Online help or help lines

Software forums

58

Systems Design - Walailak University

Documents

Transcript of Systems Design - Walailak University