systems design - walailak university
TRANSCRIPT
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
9
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
14
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
17
ตวัอยา่งเมนู
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
22
23
24
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
3) Enhance User Productivity
Organize tasks, commands, and functions in groups that resemble actual business operations
37
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
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
Designing the User Interface
Add Control Features Menu bar Toolbar Command button Dialog box Text box Toggle button
46
Designing the User Interface
Add Control Features
List box – scroll bar
Drop-down list box
Option button, or
radio button
Check box
Calendar control
Switchboard
47
48
49
ตวัอยา่งความไมค่งที ่
ตวัอยา่งการออกแบบเมนู ทีข่าดความยดืหยุน่
50
51
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