SSD4-Unit1.ppt

1、User-Centered Design and Testing,Overview - about our course,teaches programming interactive user interfaces teaches methods to improve the usability of those interfaces Emphasize the view that Interface usability is essential to successful software design Interface usability in fact can have a crit

2、ical impact on an applications overall quality and effectiveness not merely a matter of packaging or aesthetics,overview,an accurate, fast, and powerful application can be rendered useless by a poorly-designed user interface poorly-designed user interface : the people who might otherwise benefit fro

3、m the application find the interface frustrating Hard to use impossible to use,Course Organization,The course is organized into four units. Unit 1.Overview of User-Centered Design and Testing Unit 2.Interfaces: Creating with Visual Basic, Evaluating with Usability Heuristics Unit 3.Think-Aloud Usabi

4、lity Testing Unit 4.Programming Beyond Controls,Organization- exercises ISBN: 0-619-21718-9.,Course Text (Last version),Diane Zak, Programming with Microsoft Visual Basic 6.0, Enhanced Edition, published by Course Technology, 2001; ISBN: 0-619-06204-5.,Course Text,J. Nielsen, Usability Engineering,

5、published by Academic Press (AP Professional), 1993; ISBN: 0-12-518406-9. (not necessary),Hardware and Software Requirements,Microsoft Windows 95, 98, Me, NT, 2000, or XP VGA or better color monitor Standard keyboard and mouse Windows compatible sound card and speakers and/or headphones CD-ROM drive

6、 Web browser Microsoft Internet Explorer 4.01 or later Netscape Communicator 4.7note* there is one issue with Internet Explorer 6 SP1, Netscape 7.0, and Mozilla 1.1.,Hardware and Software Requirements,Microsoft Visual Basic 6.0 Microsoft Developer Network ( MSDN ) Microsoft Word or comparable word p

7、rocessor Microsoft Visual .Net Express version Can download freely from Microsoft website.,Outcomes,The purpose of SSD4 is for students to Learn to design usable, human-friendly user interfaces (UIs). Learn to evaluate interface usability empirically with two usability tools. Learn to create interfa

8、ces and interface prototypes using a rapid-prototyping programming language.,Students completing SSD4 will be able to,I. Produce II. Use III. Knowledgeably Discuss IV. Hold Positions as User Interface Developers,I. Produce,Designs and implementations Visual Basic UIs and prototypes that meet general

9、ly accepted usability standards. Judgments about how well interface aspects meet the usability criteria expressed in ten heuristics. interface usability based on the findings of a think-aloud usability study. Summarize usability study findings Write Usability aspect reports (UARs),II. Use,Think-alou

10、d testing methodology and ten usability heuristics as tools for evaluating real-world user interfaces. Critical incident analysis to analyze the observations of a think-aloud usability study. A basic set of Visual Basic controls to create applications and prototypes. UAR recommendations to implement

11、 changes in interface applications.,III. Knowledgeably Discuss,Discuss what? The human capabilities and limitations that are relevant to interface design in terms of the Information Processing Model of human cognition. The basic features of the iterative design process and the basic concepts of inte

12、ractive programming.,IV. Hold Positions as User Interface Developers,Those who certify in this course will be able to design and implement human-friendly graphical user interface applications in Visual Basic, critically evaluate the usability of user interfaces, including those that are not computer

13、-based, use heuristic evaluation and think-aloud usability testing, report their findings in a systematic fashion writing usability aspect reports.,IV. Hold Positions as User Interface Developers,In a small company, students who certify will be able to fill the roles of interface designer, implement

14、er, and evaluator. In a larger company where design teams are staffed by specialists from several disciplines, students who certify will be able to understand and work well with these varied specialists.,Unit 1.Overview of User-Centered Design and Testing,contents introduce the basic principles of u

15、ser interface design. cover 2 facets of UI design: the construction of interactive programs the design of their behavior. grounded on the principles of human psychology Apply in the techniques of heuristic evaluation and think-aloud user testing.,1.1 Foundation for User-Centered Design and Testing 1

16、.2 A Tool for Creating User Interfaces: Visual Basic 1.3 Tools for Evaluating Usability: Heuristics and Think-Aloud Testing,Unit 1.Overview of User-Centered Design and Testing,1.1Foundation for User-Centered Design and Testing,Contents 1.1.1Iterative Design 1.1.2Basic Concepts of Interactive Program

17、ming 1.1.3Basic Psychology Needed for Interface Design Assessments Exercise 1 Multiple-Choice Quiz 1,1.1.1 Iterative Design,Why Iterative Design? Visual Basic Heuristic Evaluation Think-Aloud Studies,Why Iterative Design?,The goal of this course is for you to learn to design and build usable softwar

18、e programs that people can use easily, efficiently correctly As if you use everyday objects like VCRs and microwave ovens Many systems built by talented people are perfectly functional but nearly unusable. ?why,Why Iterative Design?,system designers cannot fully anticipate the usability of their des

19、igns Remember : you are not the user. This limitation stems from several sources: Users are diverse, while you are a single person. Users are (usually) not technical experts, while you are. Users do not know what you were thinking when you designed the system, while you do. So, we must,adopt an iter

20、ative approach to system design,Iterative design with feedback Rather than using a Feed-forward, or open-loop, design approach,iterative approach,we must include steps to refine the design that incorporate factors other than our personal opinion and acumen. often involves a step to analyze a prelimi

21、nary design according to some rules of thumb, and a test that gathers and incorporates user feedback on what has been built This approach raises two major questions: 1? 2?,To solve the problem ,Its hard enough to build something once; how can we afford to build things more than once? - adopt a rapid

22、 prototyping approach How do we accumulate experience and get feedback from users in a way that yields useful guidance to further work? - requires - a body of knowledge of human psychology and - techniques for eliciting(induce), recording, and analyzing user feedback.,3 important tools of iterative

23、, user-centered design,Visual Basic user interface programming heuristic evaluations based on accumulated design experience think-aloud usability testing,Visual Basic,one of the most popular programming languages supports rapid prototyping of user interfaces making it possible to test many aspects o

24、f a systems usability before its implementation is complete Once you have learned to use Visual Basic, you will also be able to apply this approach to other languages and systems,Heuristic Evaluation,heuristic means a general principle or rule of thumb that usually leads to a good answer. In this co

25、urse, you will learn a 10 heuristics that will help you to make good user-interface design decisions to learn how to apply them in your work,Think-Aloud Studies,a powerful method empirically evaluating the usability of a system user is presented with a system or prototype( system or prototype is OK)

26、 user is asked to perform a task while thinking aloud the steps and decisions involved collection and analysis of think-aloud data,Used these three tools together,Using these three tools together will help you to design usable and successful systems.,1.1.2 Basic Concepts of Interactive Programming,D

27、irect Manipulation Affordance and Feedback Essential Task and the Event/Redraw Cycle Controls, Model Objects, and Interpreting Events Encapsulation and Accessor Patterns,Direct Manipulation,a style of interaction Modern Graphical User Interfaces(GUI) make use of it be designed to give the user the i

28、llusion that they are directly manipulating the objects of interest to them The images portrayed to the user indicate the nature and state of those objects, E.g. , Turn the speaker on/off, trash box，full or empty File management of operation system the program is structured so that interactions are

29、performed (primarily) in terms of those representative images,Direct Manipulation(con.),highly successful, why? provide the illusion of directness users feel that they are directly acting on objects, not working through the intermediary of a computer The property of directness not one that an interf

30、ace either does or does not have direct depending on how much of this feeling of directness they induce in a user,Direct Manipulation(con.),the feeling of directness will vary from individual to individual, from interface to interface, and even between parts of an interface Interfaces that exhibit m

31、ore directness tend to be easier to learn and use.E.g., dragging a file icon into a trash can, vs. Menu selectiing Note: directness can go too far（joystick in games） operations might be much more efficiently handled in an indirect or automated fashion.,Affordance and Feedback 預(yù)示與反饋,How to provide an

32、d reinforce the feeling of directness ? interface designers often concentrate on providing 2 particularly key characteristics in an interface. 兩個(gè)關(guān)鍵的特征 Affordances are opportunities to act that are readily apparent to the user. 非常明顯的提供給用戶操作的時(shí)機(jī)，或改善可操作性的措施，E.g., the handle of a hammer Knurling the seri

33、es of small ridges often found on knobs that make their surfaces rough Feedback is the response by the system to the actions of the user.,Affordance,most objects in a graphical user interface appear only as pictures on a screen the physical affordances that they can offer are limited. (some game sof

34、tware can offer other way) by properly manipulating the visual appearances of objects we can still make the (通過操控對象的視覺外觀，將某些信息明確的 傳達(dá)給用戶), purpose, state, and opportunities for action associated with objects apparent to the user. This provides what might be thought of as a virtual affordance.,virtual

35、 affordance,we cannot knurl objects on the screen, we can provide simulated knurling as illustrated in Figure It can be effective simply because it reminds us of our past experience with many real world objects. As a general rule (a usability heuristic) a good user interface design will provide some

36、 visual indication of /affordance for the actions that the user can carry out with it. 盡量給用戶提供 如，利用交通信號燈表示某些操作提示（禁止、警告）,Feedback,has a conceptually similar purpose Feedback is the response by the system to the actions of the user. clearly indicates the nature consequences of their actions much easie

37、r for users to evaluate whether those actions are having the desired effect 操作是否起了作用？ Such as : 可以用下面這些常用手法 updated visual representations be provided in other modalities such as audio 對非法操作會發(fā)出“當(dāng)”的一聲,Feedback,In the physical world in the form of vision, touch, and sound. In the virtual world such st

38、rong and immediate feedback is often lacking Solution: providing strong and immediate feedback for all user actions How to ?,Essential Task and the Event/Redraw Cycle,providing the appearance of directness is a goal of much modern user interface design not reach directly into the computer and manipu

39、late computational objects use the intermediary of the input devices provided by the computer express their actions with those devices,Essential Task,an interactive program must do several things. Provide visual images that represent the objects of interest to the user (and indicate how they may be

40、acted upon, that is, provide good affordances) Accept inputs from the available input devices Interpret those inputs in the context of the objects on the screen (and other parts of the system) Modify internal structures modeling the objects of interest (and invoke application routines) Update the vi

41、sual display to reflect the consequence of the users actions (provide good feedback),overall flow of control of an interactive program,Outputs window(ing) system window manager Inputs input event records what happened, when it happened the context ofimportant input devices (where the mouse was point

42、ing and the status of various modifier keys, SHIFT and CTRL.是否用到組合鍵） any data associated with the input,input event records,Event queue 管理事件的先來后到 event records are normally placed in a queue to ensure they are not lost Event handle requesting the next event from the input queue Interpreting Processi

43、ng Producing any new outputs returning for the next event,Controls, Model Objects, and Interpreting Events,Firstly, think about 2 questions: how to actually interpret/respond to incoming events ? how to structure the output creation process ?,Controls, Model Objects, and Interpreting Events,Controls

44、 toolkit provides a much higher-level abstraction of the event/redraw cycle and automates a number of important steps a reusable library of objects that can appear on the screen and be the target of user input Name : widgets窗口小部件, interactors交互因子 , or interactive component 交互組件.: buttons, sliders, t

45、ext areas, icons, check boxes, and menus In Visual Basic and several other systems, these objects go by the name of controls,major benefits of using a toolkit,provides a rich set of such controls allows new types of controls to be created when necessary provide a presentation of the objects of inter

46、est to users E.g., programmer does not necessarily need to recreate a button control, and that all button controls the user sees will work in the same way,not generally support the detailed semantics of those objects,Two ways of changing a single modeled value model object provide a translation betw

47、een one conceptual object and the several controls. maintains the information associated with the object of interest and response to events E.g., In a Clock app. such as the actual integer value for the minutes,if change, who draw the screen?,The answer is : the toolkits ! The toolkit will then arra

48、nge for the actual appearance of those controls on the screen to be updated as appropriate. Notify the toolkit to change, How to do: The model object notifies the toolkit of change by simply changing the properties of the controls,relationship between parts of an interactive system,model objects hav

49、e a central organizing role accept changes to their modeled information either from controls from application code validate those changes updating the properties of any controls related to that information.,model objects have a central organizing role,Occasionally it is convenient for controls to in

50、voke directly application routines, bypassing the model in the case of menus and buttons that represent commands in the application the application should normally avoid manipulating controls directly, without going through the model,Encapsulation and Accessor Patterns,information they manage change

51、s model objects need to be informed they need to respond to those changes with action of their own updating various control properties Encapsulation: they completely control access to their internal data not allowing it to be changed without their knowledge,way to ensure encapsulation,information hi

52、ding declaring the field or variable to be private it cannot be accessed directly allow access to the information only through special accessor methods,Java code example,public class myModelClass private myDataType myDataValue; public myDataType getMyDataValue() return myDataValue; public void setMy

53、DataValue(myDataType val) myDataValue = val; ,basic implementations of accessor methods,The accessor methods in a user-interface model object would contain additional code accessor pattern.: the general pattern of using a private field for data providing get and set methods to read and write the fie

54、lds value Attention: Visual Basic was not originally designed as an object-oriented language. When implementing the accessor pattern normally involves using individual variables and access procedures not nested inside a class definition Unlike its predecessors, VB .Net is a full featured object-orie

55、nted language.,Visual basic code example,Private myDataValue As myDataType Public Function getMyDataValue() As myDataType getMyDataValue = myDataValue End Function Public Sub setMyDataValue(val As myDataType) myDataValue = val End Sub Note: in Visual Basic Private variables are still accessible insi

56、de the same module, so the information hiding here is not a perfect solution,What do the model objects need,model objects need to perform update actions whenever their values change whenever their set methods are called, they need to update the properties of all controls that reflect those values E.

57、g., A Label show lists number A List lists all the items When item adding or removing,The general pattern implementation code,Public Sub setMyDataValue(val as myDataType) Dim newPropVal as someType If Then If val myDataValue Then myDataValue = val End If newPropVal = If .someProperty newPropVal Then

58、 .someProperty = newPropVal End If . Else End If End Sub,why these lines are in the code?,If val myDataValue Then and If .someproperty newPropVal Then. Answers: for correctness as well as for performance a simple defensive programming strategy avoid having to consider any special cases The code whic

59、h informs other parts of the application of the new value, may actually be rather time-consuming avoided when there are no more true updates to the values of the variables the solution is efficient, easy to implement, and easy to analyze for correctness,a specific example of applying the model accessor pattern,Public Sub setMinuteValue(min As Integer) Dim minStr As String Force into valid range If min 59 Then min = 59 Update internal value If min minuteValue Then minuteValue = min Nothing in the application to inform in this case End If Prepare a two digit string (zero fi