BUILDING DATABASE SYSTEMS (X478)

Transcription

1 Technology & Information Management Instructor: Michael Kremer, Ph.D. Class 4 Professional Program: Data Administration and Management BUILDING DATABASE SYSTEMS (X478)

2 AGENDA 4. Designing User Interfaces: Forms 4.1 Introduction to Interface Design 4.2 User Interface Architectures 4.3 Integrated Development Environments (IDE) 4.4 Designing Form Interfaces

3 Designing User Interfaces: Forms 4.

4 1.1 SYSTEM ANALYSIS AND DESIGN 1

5 4.1 INTRODUCTION TO INTERFACE DESIGN 87 Effective Interfaces Effective user interfaces minimize the time users require to learn and implement the system. It also minimizes the need for external documentation. What constitutes an effective user interface? Helps users accomplish their tasks. Does not impose its requirements on users. Never forces users to play by its rules. Plays by the users rules. No need to learn uninteresting stuff, just use it. Does not behave in unexpected ways.

6 4.1 INTRODUCTION TO INTERFACE DESIGN Interface Models 3 ways users think about systems: Mental Model: User s mental model describes what the user thinks is happening (Does not match reality). Example: Body burns food to provide energy same as a combustion engine. Implementation Model: What actually happens behind the scenes. Users do not care, but we (developers) do. Manifest Model: Actual user interface that sits between the user s mental model and the developer s implementation model. Ideally: Hide implementation and match mental model 88

7 4.1 INTRODUCTION TO INTERFACE DESIGN 89 User Levels Ideally, you want to build a system that is user-friendly, easy to use and easy to learn. Easy for whom? Beginner, Intermediate or Expert User. Beginner: Everyone is a beginner at some point. Almost everyone moves out of this phase. Therefore, your system should not be designed for absolute beginners! It gets in the way of the intermediate users.

8 4.1 INTRODUCTION TO INTERFACE DESIGN 90 Intermediate: The majority of users fall into this category. You must support this kind of users. They know what the system does, but not all the details. Well-designed menu and help file is important. Expert: They know almost everything. They want to accomplish tasks fast. Provide enough shortcuts. Let them turn off help systems or dialog boxes. Ability to customize the working environment.

9 4.1 INTRODUCTION TO INTERFACE DESIGN Usability of Interfaces Usability can be expressed as user-centered. Example: Lock all controls but the first one. Once data is entered in the first one, then the second control is unlocked, etc. This is not user-centered. Users may have reasons to enter data in the second control first! Allow freedom to your users, they should know what they are doing. This freedom requires a safety net, multiple undo levels, for example to recover changed data. Confirmation messages only when really necessary. 91

10 4.1 INTRODUCTION TO INTERFACE DESIGN 92 Consistency and Simplicity People are not good at remembering, therefore we are using computers. A good user interface does not require the user to remember. Comply with interface guidelines as much as possible, and if not, at least be consistent with your own guidelines. Companies develop their own list of acronyms, use them only if they are commonly accepted and known. KISS principle! Keep it simple s.

11 4.1 INTRODUCTION TO INTERFACE DESIGN 93 Consistency: Navigation through records. Adding/Editing records. Displaying complex entities. You as a developer develop consistency over time as you learn and gain more and more experience. Develop your own standards and document them. Discuss these standards with your customer. Some Examples: Placing command buttons. Error messages. Read-only controls.

12 4.2 USER INTERFACE ARCHITECTURES 94 Workflow Process Interface Design Interface design must be based on workflow processes. Example: Look at ERD diagram, build Customer form, then Order form with read-only reference to Customer form. In general, not bad. But what is the workflow here? The users start with a sales order. If this is a new customer, they should be able to enter a new customer from the Order form. Therefore, take a close look at the workflow processes and design your app around it!

13 4.2 USER INTERFACE ARCHITECTURES 95 For the order example, the users should be allowed to simply enter the customer name and then complete the order. If the entire customer information is not available, they can finish the customer record at a later time. Or, if the customer is actually present or on the phone, you can get the information right there. Listen to the users how they do their day to day work. Then wrap your application design around it.

14 4.2 USER INTERFACE ARCHITECTURES 96 Document Architecture User interface architectures come in two flavors: Single-Document Interface (SDI) (one window) Multi-Document Interface (MDI) (multiple windows) Again, make your choice based on workflow process Single-Document Interfaces Presents the user with one single window. It can display additional dialog boxes. Workbook Interface (similar to MS Excel) Tabbed interface in one main window. Use for simple systems, each tab can represent same data in a different view or different data

15 4.2 USER INTERFACE ARCHITECTURES 97 Example: Sales data Monthly Summary data on one tab Pie chart on second tab Bar chart displaying Year-to-date sales Tabs can also be used for workflow. Each tab represents a particular tasks in the entire process.

16 4.2 USER INTERFACE ARCHITECTURES 98 Outlook Style Interface Divides main window into sections. One or more sections can be used for navigation. Good for many workflow processes. Allow users to move sections. Also allow users to hide sections.

17 4.2 USER INTERFACE ARCHITECTURES 99 Multiple-Document Interfaces Multiple child windows can be opened in a main window. Classic MDI Architecture Best example is MS Word. Many documents can be opened in one application window. Good for comparing data or working on different processes simultaneously. Can be scary for new or inexperienced users. Good idea to open a main window when the application is opened.

18 4.2 USER INTERFACE ARCHITECTURES 100 Classic MDI Architecture (continued): Major problem with MDI is inconsistency in containment model. What if you have many windows open, and you choose to save or undo data. Which window is affected by that operation? In OS Windows, it applies to the currently active window only. Does not need to be in your app. Design clear main operations, for example Save All. Switchboard Interfaces Central form that contains main navigation elements. MS Access supports this kind of architecture. Ensure to design switchboard around workflow processes.

19 4.2 USER INTERFACE ARCHITECTURES 101 Project Interfaces: A main window allows independent child windows. Each window possesses an icon in the task bar so that users can manage them independently. But they are also controlled by the main window. Removes some of the inconsistency mentioned earlier. When main window is minimized, so are all child windows.

20 4.2 USER INTERFACE ARCHITECTURES 102 Wizard-type interfaces Series of pages displayed in a dialog box. Used to support infrequent tasks, therefore more structure is needed to complete task successfully. Wizards can be useful to support workflow tasks. Also good when conditional steps are to be performed. Be careful when designing complex workflow processes, especially when order does not matter! Wizards are normally good tool for completing tasks in a specific sequence.

21 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDE) An IDE consists of: Source Code Editor Compiler and/or Interpreter Build automation tools Debugger Tightly-knit components to maximize programmer s productivity. Since IDE are pretty complex tools, high learning curve. Example IDE s: Eclipse Microsoft Visual Studio Active State Komodo NetBeans WinDev

22 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDE) Introduction to Visual Studio Express for Desktop Based on Visual Studio.

23 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDE) Left side shows toolbox to build forms and controls Top right window is Solution Explorer. The lower right window is Properties window. Bottom window contains various output information. Object-Oriented Concepts C# is object-oriented programming language. You can use C# to build your own objects. form_name frm = new form_name(); frm.show();

24 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDE) The variable frm is a reference pointer to the form in memory. The variable frm points to an object that was instantiated from the class form_name. Abstraction Concept Microwave Oven example: I want to prepare a meal, but don t be bothered by internal details. Classification Concept What is a microwave? An oven that.. What is an over? A kitchen appliance.. What is

25 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDE) In object-oriented world, you classify things and write software specific to each level. At a lower level you inherit the higher level and add only level-specific functionality. Interfaces Concept Interface is the only way to operate/use the object. Microwave: Keypad on the front. A class exposes features through defined interface. Access Control Control access to classes to ensure safe and predictable operation.

26 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDE) C# Object-Oriented Programming When you create a new form, you are actually creating an instance of the.net Form class Class acts like a template (architectural blueprint) Class defines properties, methods and events Properties define characteristics of an object, you can assign values to these properties Methods determine the operations that can be performed by an object. Some methods need arguments, those arguments can be different. Events are signals sent by an object to the application telling it that something has happened that can be responded to.

27 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDE)

28 4.4 DESIGNING FORM INTERFACES 110 First priority on how to design a form is based on workflow processes. Second priority is then based on entities involved. How does the form map to ERD? (Entities, Relationships) Representing Entities in Form Design Representing a single entity is the easiest form design (simple entity). If simple entity participates in a relationship, it is either on the many side or the other participant is not included.

29 4.4 DESIGNING FORM INTERFACES Book_Status 111 PK,I1 StatusID PK,I1 Book ISBN Title Edition Authors Publisher DatePublished NoCopies Status Book_Copy PK,I1 ISBN_Copy FK1 ISBN FK2 StatusID PK,FK2,I1 PK,FK1,I1 PK,I1 Book_Transaction PatronID ISBN_Copy Checked_Out Checked_In Due_date Past_Due_Fees Date_Paid

30 4.4 DESIGNING FORM INTERFACES 112

31 4.4 DESIGNING FORM INTERFACES 113

32 4.4 DESIGNING FORM INTERFACES 114 Ideally, no more than controls in a form section. Use a tab control to present different logical groups. If too many attributes, maybe design subsidiary forms to be opened from the main form. Display main customer information on subsidiary forms to provide context. Possibly make subsidiary forms modal. Alternatively, you could use subforms on the main form.

33 4.4 DESIGNING FORM INTERFACES 115 Representing Relationships 1-to-1 Relationship: In most cases can be handled as single entity. Create query to combine data from both entities. If primary entity has many 1-to-1 relationships, nature of relationships determines the layout. If all relationships can coexist, one big single entity. If they are mutually exclusive, use subforms to hide or show the secondary entity whenever applicable. Use same techniques as for single entities if you have too many attributes, such as tab controls.

34 4.4 DESIGNING FORM INTERFACES to-M Relationship Display one side on the main form and many side on a subform or subsidiary form. Either show all records on the many side (that belong to the one side) or one at a time. Depends on how much information you need to show. For few fields only choose to display all records (datasheet or spreadsheet type). Use vertical scroll bar if needed. For many fields, either show one record at a time or display a few fields but all records and enable buttons to launch subsidiary form to display remaining fields.

35 4.4 DESIGNING FORM INTERFACES to-M Relationship Occasionally, a form displaying parent data will have multiple 1-to-M relationships. Again, use tab controls to display the various child records.

36 4.4 DESIGNING FORM INTERFACES 118 M-to-M Relationship M-to-M can be treated as 1-to-M for form design. PK,I1 FK1 FK2 Book_Copy ISBN_Copy ISBN StatusID PK,FK2,I1 PK,FK1,I1 PK,I1 Book_Transaction PatronID ISBN_Copy Checked_Out Checked_In Due_date Past_Due_Fees Date_Paid PK,I1 I2 Patron PatronID Patron_Name Address1 Address2 City StateCode ZipCode Phone Status

37 4.4 DESIGNING FORM INTERFACES 119 Reasonable to display all patrons who checked out a given book (book_copy is one-side) or all books for a given patron (patron is one side). Most intersection tables contain only primary keys from each side of the many-to-many relationship. If additional attributes are present, display them on the many side.

38 4.4 DESIGNING FORM INTERFACES 120

39 4.4 DESIGNING FORM INTERFACES Representing Hierarchies 1-to-M is technically a hierarchy, but here we mean multiple hierarchies. One solution is to break it down: Show Book information separately, design a book_copy form showing book_copy records and transaction details along with patrons. But you can also create a form that shows a patron, all transaction for that patron, then the book_copy records and the book record. Depends on workflow processes and client s requirement how you design the form. PK,I1 Book ISBN Title Edition Authors Publisher DatePublished NoCopies PK,I1 FK1 FK2 Book_Copy ISBN_Copy ISBN StatusID Book_Transaction PK,FK2,I1 PatronID PK,FK1,I1 ISBN_Copy PK,I1 Checked_Out Checked_In Due_date Past_Due_Fees Date_Paid 121 PK,I1 I2 Patron PatronID Patron_Name Address1 Address2 City StateCode ZipCode Phone Status

40 4.4 DESIGNING FORM INTERFACES 122 Tree View controls are great controls to display hierarchies. The amount of information that can be presented on each level is limited (concatenate attributes). However, you could use the tree view control as a means of navigation. Once you found what you were looking for, open a form for more details. Newer controls are hierarchical grid controls. Best example is MS Access table data view or Windows Explorer. Using plus sign to view detail records.