Dr. Fakhri Alam Khan CIS 344-Z: User Interface Design

User Interface Design  Sub Code :  Group :  IA Marks : 60  No. of Lecture Hrs /week: 03  No. of Practical Sessions/week: 03  Exam Hrs. : 02  Total No. of Lecture Hrs. : 60  Exam Marks : 40

Syllabus Brief introduction to Human Computer Interface(Interaction) Introduction to dot Net Development Tools Syntax and Expressions, Control and Repetition Structures, Operators OOP in Visual Basic.NET Review of Polymorphism, Inheritance, and Interfaces Implementing Inheritance and Recognizing Class Hierarchies in.NET Use and Implementation of Graphics in.NET Interfaces Windows Forms and Working with Controls Commonly Used.Net Creating Multi-threaded GUI applications

Book TypeTitle and AuthorEditionPublicationYear Main Text Book (T1) Human-computer interaction, Dix, A., Finlay, J., Abowd, G., & Beale, R. 3 rd edition Prentice Hall Europe. ISBN: Reference Books: Reference Text Book (R1) Human Computer Interaction and Management Information Systems: Applications Galletta, Dennis & Zhang, Ping M. E. Sharpe Inc., ISBN-10: ISBN-13: Text Books

Scheme of Evaluation ComponentDurationWeight age Test 1, Test 2,60 Minutes30 Marks Assignments10 Marks Seminar / mini GUI application10 Marks Lab10 Marks Final Examination 2 Hours40 Marks Total100 Marks Marks required to Pass the Course60 Marks

Upon completion of this course, the student should be able to: Understand good design and gain experience designing systems that are usable by people. Learn techniques for implementing interfaces and build applications using prototyping tools. Gain knowledge and experience with a variety of simple methods for evaluating the quality of an interface. how to debug the interface through low-cost evaluation methods. COURSE OBJECTIVES

Human Computer Interaction – 1 A Brief Introduction

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design.

Human Computer Interaction Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Why HCI?

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Human Information Processing EncodingComparison Response selection Response execution Input Response

Human Information Processing EncodingComparison Response selection Response execution Input Response Attention Memory

Human Information Processing Visual Perception –What we see is not what we recognize. –Constructivist (stored knowledge). –Ecological (no stored knowledge).

Human Information Processing What we see is not what we recognize.

Human Information Processing Constructivist (stored knowledge).

Human Information Processing Constructivist (stored knowledge).

Human Information Processing Ecological (no stored knowledge). Affordance

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Technology Supporting User Interface. Input Devices. Output Devices. High-speed Processing. Networking.

Technology Supporting User Interface. Input Devices. –Keyboard. –Pointing devices. –3D Input. –Recognized Input.

Technology Supporting User Interface. Input Devices. –Keyboards. QWERTY DVORAK Split

Technology Supporting User Interface. Input Devices. –POINTING DEVICES Mouse Trackball Touch-screen

Technology Supporting User Interface. Input Devices. –3D Input. Data Glove 3D-Mouse

Technology Supporting User Interface Input Devices. –Recognized Input. OCR Eye-Gaze Barcode Scan

Technology Supporting User Interface. Output Devices. –CRT. –LCD. –Sound. –Printers –3D display

Technology Supporting User Interface. High-Speed Processing –GUI (Windows). –VR. –3D Graphics. Networking –Sharing resources. –Web & Internet

Technology Supporting User Interface. Matching Devices with Work –Accuracy level. –Task requirements. –Direct mapping.

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Windows System Design Windows was designed to support more than one output on the same physical screen. Windows supports multitasking. Working with windows takes more time! Many lessons learned from the users. Each window system has its flavor of control.

Windows System Design Windows Basic Components –Windows: Title bar. Close Box. Zoom Box. Size Box. Scroll Control. –Menu. –Dialogue Boxes. –Cursor. –Control & Control Panels.

Windows System Design Windows Basic Components –Windows: Title bar. Close Box. Zoom Box. Size Box. Scroll Control.

Windows System Design

Menus –Pop-UP –Pull Down –Submenu

Windows System Design Dialog box

Windows System Design Cursor –Change cursor with context. –Lost Cursor. –The pointing edge. –Cursor-on help text.

Windows System Design Controls –Buttons. –Sliders. –Check box. –Radio buttons.

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Screen Layout and Design Screen is our Real Estate. The space should be utilized with goals in mind. Think of the user (User Centered Design). Think of the task (Task Analysis).

Screen Layout and Design Screen space is limited. –Use windows. –Use more than one screen. –Arrange information.

Screen Layout and Design Set measurable usability goals early. Usability and user needs should drive the design. Define types of users (Expert/Novice). Consider the personal differences. Use the matching dialog style. Testing throughout the design process.

Screen Layout and Design Guide lines –Include only essential information. –Include all essential information. –Start at the upper left corner. –Design : follow formatting standard. –Apply logical grouping of items.

Screen Layout and Design Guide lines –Symmetry & balance of white spaces. –Avoid heavy use of uppercase. –Distinguish caption & fields. –The level of Detail is the same as user knowledge. –Avoid color pollution.

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Dialog Styles

Command –Good for experts. –Exact spelling. –Hard to remember (GREP).

Dialog Styles Menus –Options & Enhancement s are visible. –Grouping: Access Time (Sec) Errors.

Dialog Styles Q & A –Old style. –Used with setup. –Answer selected (menu).

Dialog Styles Forms: –Different categories of data. –Helps the users to place data correctly. –It should help the user about what type of data is expected. –Allows going back. –Allow Validation.

Dialog Styles Direct Manipulation: –Visibility of the objects. –Rapid, reversible, incremental actions. –Simulate real life. –Allow Validation.

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Evaluation of User Interface The Keyword is the user. The User  The Programmer. Never forget the TASK.

Evaluation of User Interface The Keyword is the user. –The user is the final evaluator of your product. –User Profile: Psychological Characteristics. Knowledge and experience. Job and Task Characteristics. Physical Characteristics.

Evaluation of User Interface The User  The Programmer. –The mental Model is different. –Experiences are different. –Background.

Evaluation of User Interface The User  The Programmer.

Evaluation of User Interface Never forget the TASK.

Evaluation of User Interface How to evaluate? –User Observation. –Verbal Protocol (Think aloud). –Software Logging. –Users ’ Opinion (Interview, Questionnaire). –Experiments & Benchmark.

Evaluation of User Interface Predictive Evaluation: –Inspection methods (experts in technology & the intended users). –Usage simulation (experts simulate less experienced users). –Structured reviewing. Heuristic evaluation (only key issues). Discount usability evaluation (Scenarios). Cognitive walkthrough.

Evaluation of User Interface Key Issues: –Validity: Evaluation Purpose & Method. –Reliability: Experiments yield the same results. –Biases: Avoid selective data gathering.

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Error Handling What types of errors: –Perceptual Errors (B8, Z2, I1). –Cognitive Errors (Memory, Link, Inconsistent). –Motor Errors (Hand, Eye).

Error Handling Perceptual Errors (B8, Z2, I1). B8 B8 B8

Error Handling Cognitive Errors (Memory, Link, Inconsistent).

Error Handling Motor Errors (Hand, Eye). –Options very close to each other. –The selection is very sensitive.

Human Computer Interaction Why HCI? Human Information Processing. Technology Supporting User Interface. Window system design. Screen Layout and Design Dialog Styles. Evaluation of User Interface. Error Handling. Documentation.

Documentation User manual vs. Technical guide. User manual guidelines. Online Help.

Documentation User manual vs. Technical guide. –User manual intended for non technical users. (Part of the user interface) –Technical guide is intended for technical people.(How to develop)

Documentation User manual guidelines. –Easy to navigate. Organize chapters according to users goal. TOC should present high level overview. Provide an index. Use consistent cues for different type of information.

Documentation User manual guidelines. –Ease of learning Provide a foundation and build on it. Use examples. Use illustrations. Make consistent use of spatial and visual cues.

Documentation User manual guidelines. –Ease of reading Use the white space wisely. Write using low grade level. Avoid expert jargons.

Documentation Online Help. –Make help visible (but not annoying). –Complete & accurate. –Multiple Access Method. –Make it easy to return to problem context. –Make it fast. –Provide different levels of details.

Introduction to dot Net

The.NET Architecture

Objectives “Microsoft.NET is based on the.NET Framework, which consists of two major components: the Common Language Runtime (CLR) and an extensive set of Framework Class Libraries (FCL). The CLR defines a common programming model and a standard type system for cross-platform, multi-language development.” CLR-based execution Application designs

What is Microsoft.NET? (Cont.) Core components of.NET are: –.NET Infrastructure and Tools –.NET Services An integrated set of building block services for the new Internet, including Passport.NET (for user authentication), and services for file storage, user preference management, calendar management, and many others. –.NET User Experience A broader, more adaptive user experience, where information is delivered in a variety of ways on a variety of different devices. –.NET Device Software Enables a new breed of smart Internet devices that can leverage Web Services

Next Generation Internet Web site BackendApp Mega Service BackendApp Loosely- coupled, services connected by XML-based messages and contracts, written in many languages Service Device XML- msgs Service Service Service

Influences.NET is the result of many influences… Draw a graph representing the influences of.NET?.NET OOP JVM GUI Web component-based design n-tier design

.NET is multi-language.NET supports VB, C# (C-sharp), C++, J# (Java 1.2), Eiffel, etc. code.vbcode.cscode.cpp... Development Tools app.exe FCL

.NET is cross-platform Compiled.NET apps run on any supported platform: APP.exe ? Win64Win32 ( XP,2K,98) WinCE

How is cross-platform achieved? Cross-platform execution realized in two ways: 1.apps are written against Framework Class Library (FCL), not underlying OS 2.compilers generate generic assembly language which must be executed by the Common Language Runtime (CLR)

.NET Framework.NET Framework consists of 3 main parts: –Common Language Runtime –Framework Classes/Libraries –ASP.NET

The.NET Framework Base Class Library Common Language Specification Common Language Runtime ADO.NET: Data and XML VBC++C# Visual Studio.NET ASP.NET: Web Services and Web Forms JScript… Windows Forms

(1) FCL Framework Class Library –1000's of predefined classes –common subset across all platforms & languages –networking, database access, XML processing, GUI, Web, etc. Goal? –FCL is a portable operating system

CLR: Execution Model VB Source code Compiler C++C# CompilerCompiler Assembly IL Code Assembly Assembly Operating System Services Common Language Runtime JIT Compiler Native Code Managedcode UnmanagedComponent

Common Language Runtime (CLR) A common runtime for all.NET languages –Common type system –Common metadata –Intermediate Language (IL) to native code compilers –Memory allocation and garbage collection –Code execution and security Over 15 languages supported today –C#, VB, Jscript, Visual C++ from Microsoft –Perl, Python, Smalltalk, Cobol, Haskell, Mercury, Eiffel, Oberon, Oz, Pascal, APL, CAML, Scheme, etc. Rational is working on Java compiler for CLR

Common Language Runtime (CLR) Enables cross-language interoperability –Common Language Specification describes interoperability requirements Language/Hardware/OS Independent –Compact framework for small devices Industrial strength Garbage collector –Designed for multi-processor servers

(2) CLR-based execution Common Language Runtime must be present to execute code: APP.exe other FCL components CLR JIT Compiler obj code OS Process Underlying OS and HW Core FCL

CLR-based execution revisted CLR must be able to locate all assemblies:.EXE other FCL assemblies CLR JIT Compiler obj code OS Process Underlying OS and HW Core FCL assembly.DLL obj code

.NET Infrastructure and Tools –.NET Enterprise Servers SQL 2000 Exchange 2000 ISA 2000 Host Integration Server 2000 Application Center 2000 BizTalk Server 2000 Commerce Server 2000 –Visual Studio.NET –.NET Framework –Windows.NET “Whistler” (Windows XP)

.NET Framework Libraries Single consistent set of object oriented class libraries to enable building distributed web applications (Unified Classes) Built using classes arranged across logical hierarchical namespaces –For example: System.Data.SQL Work with all CLR languages –No more “VBRun” or “MFC” divide

.NET Framework Libraries

Visual Basic.NET

VB.NET: Data Types True is now = 1 Integer Data type has changed –Short (Int16), Integer (Int32), Long (Int64) –VB 6 –VB.NET Dim intAge As Integer Dim intID As Long Dim intAge As Short Dim intID As Integer

VB.NET: Type vs. Structure Defining user defined types (UDT) has a new syntax VB 6 VB.NET Type Customer CustomerNumber as Long CustomerName As String CustomerCompany As String End Type Structure Customer Public CustomerNumber as Integer Public CustomerName As String Public CustomerCompany As String End Structure

VB.NET: Property Functions VB 6 VB.NET Public Property Get CustomerName() As String CustomerName = m_CustName End Property Public Property Let CustomerName(sCustName As String) m_CustName = sCustName End Property Public Property CustomerName() As String Get CustomerName = m_CustName End Get Set m_CustName = Value End Set End Property

VB.NET: Zero Bound Arrays Option Base 1|0 has been removed All arrays are base 0 The following declaration has 5 elements, arrElements(0) thru arrElements(4) Dim arrElements(5) As String

VB.NET: Default Properties Default properties are no longer supported. Important! Early Binding is key in VB6 VB 6 VB.NET Note: Recordset (COM ADO) is not the preferred data storage object in VB.NET, this is just an example. txtAddress = rs(“Addr_1”) lblFName = “First Name” txtAddress.Text = rs(“Addr_1”).value lblFName.Text = “First Name”

VB.NET Forms Designer New Forms Designer –VB.NET, C++, C# Enhanced Menu Editor Control Anchors New Properties Visual Inheritance

VB.NET: New Declaration Syntax Variables can now be declared and initialized on declaration line. VB 6 VB.NET Dim intLoop As Integer intLoop = 10 Dim intLoop As Integer = 10

VB.NET: Structured Exception Handling VB.NET supports elegant error handling VB 6 VB.NET On Error Goto ErrTag... ‘clean up Exit Function ErrTag: ‘error handling ‘clean up End Function Try... Catch ‘error handling Finally ‘clean up End Try

VB.NET: Overloading Functions can now be overloaded (accept arguments of different types) VB.NET Overloads Function ConvertSQL(ByVal strString As String) As String ConvertSQL = "'" & strString & "'" End Function Overloads Function ConvertSQL(ByVal intNum As Integer) As String ConvertSQL = CStr(intNum) End Function

VB.NET: Inheritance Public Class Customer Private m_CustName As String Public Property CustomerName() As String Get CustomerName = m_CustName End Get Set m_CustName = Value End Set End Property End Class Public Class CustCompany Inherits Customer Private m_CustCompany As String Public Property CustomerCompany() As String Get CustomerCompany = m_CustCompany End Get Set m_CustCompany = Value End Set End Property End Class