1. User Interface Design (Lecture 10) Dr. R. Mall

2. Introduction ÑIn any software product, yuser interface portion is responsible for all interactions with the user. ÑAlmost every software product has a user interface: ycan you think of any software product that does not have any user interface?

3. Introduction ÑIn the early days of computer, no software product had any user interface: yall computers were batch systems yno interactions with users were supported. ÑWe know that things are very different now: yalmost every software product is highly interactive.

4. Introduction ÑUsers interact with a software product through its user interface: yuser-interface portion of any software is directly relevant to the users. ymany users judge a software from its user interface. ÑUser interface design: ya practical and important problem.

5. Introduction ÑAesthetics apart, a difficult to use interface: yleads to higher levels of user errors yleads to user dissatisfaction. ÑUsers become particularly irritated when a system behaves in unexpected ways, yissued commands do not carry out actions according to intuitive expectations of users.

6. Introduction ÑA significant portion of the total development effort: yspent in developing the user interface. ÑFor many interactive applications: yas much as 50% of the total development effort is spent on the user interface part.

7. Introduction ÑIf the user interface is not developed systematically: yeffort required to develop the interface would increase tremendously : xleading to customer dissatisfaction.

8. Introduction ÑIt is important to carefully study yuser interface design concepts. ÑLet us examine what a good interface is: yUnless we know what a good user interface really is, xwe cannot possibly design one.

9. Characteristics of Good User Interfaces ÑSpeed of learning: yA good user interface should be simple to learn. yMost users are put off by complex syntax and semantics of the command issue procedures.

10. Speed of learning ÑA good user interface should not require yusers to memorize commands. ÑAn important factor affecting the speed of learning is consistency: yOnce, a user learns about a command, yshould be able to use similar commands xeven in different circumstances for carrying out similar actions.

11. Speed of learning ÑUsers can learn about an interface faster, if it is based on: yday-to-day real life examples (aka metaphors) yuse concepts with which users are already familiar.

12. Speed of learning ÑFor example, interface of a text editor: ycan use concepts similar to writing on paper: xsuch as cutting lines and paragraphs and pasting it at other places, xusers can immediately relate to it. ÑAlso, learning is facilitated by: yintuitive command names ysymbolic command issue procedures.

13. Speed of use ÑSpeed of use is determined by: ythe time and effort necessary to initiate and execute different commands. yThe time and user effort necessary to execute different commands should be minimal.

14. Speed of use ÑExamples of bad interfaces: yusers required to type in lengthy commands ycommand issue involves moving the mouse to widely different areas of the screen ycan slow down the operating speed of users.

15. Speed of recall ÑOnce users learn how to use an interface: ytheir speed of recall about using the interface should be maximized. ÑThe speed of recall is improved if the interface is based on: ymetaphors ysymbolic command issue procedures yintuitive command names.

16. Error rate ÑA good user interface should yminimize the scope of committing errors. ÑError rate can be easily measured : ycount the errors committed by different users.

17. Error rate ÑError monitoring can be automated: yinstrument user interface with monitoring code yrecord the frequency and types of errors committed by different users ylater display statistics of various kinds of user errors.

18. How to reduce error possibilities? ÑConsistency of command names, ÑConsistency of command issue procedures, ÑConsistency in behavior of similar commands ÑSimplicity of command issue procedure, etc.

19. Attractiveness ÑA good user interface should be attractive: yAn attractive user interface catches user attention and fancy. yIn this respect, xgraphics-based user interfaces have a definite advantage over text-based interfaces.

20. Consistency ÑConsistency of commands is very desirable. yallow users to generalize the knowledge about one aspect of the interface to another. ÑConsistency helps in: yspeed of learning, yspeed of recall, yalso helps in reduction of error rate.

21. Feedback ÑA good user interface must provide constant feedback to user actions: yFor example, if any user request takes more than few seconds to process, xthe user must be informed that his/her request is still being processed. yIf possible, the user should be periodically informed about the progress made in processing the command.

22. Feedback ÑIn the absence of any response from the computer for a long time: ya novice user might even start recovery/shutdown procedures in panic.

23. Support for multiple skill levels ÑA good user interface: yshould support different levels of sophistication in command issue procedures: yusers with different experience levels prefer different types of interfaces. ÑExperienced users are more concerned about speed of command issue: ywhereas novice users pay prime importance to usability aspects.

24. Support for multiple skill levels ÑNovice users discouraged by: ycryptic command names ycomplex command issue procedures. ÑElaborate commands: yslow down command issue procedure yput off experienced users.

25. Support for multiple skill levels ÑAs users become familiar with an interface: ylook for faster command issue procedures such as "hot-keys", "macros", etc.

26. Error Recovery (Undo facility) ÑAll categories of users commit errors. yA good interface should allow users to undo mistakes.. ÑUsers are inconvenienced: yif they can not recover from even simple errors.

27. User Guidance and On-line Help ÑUsers might need guidance yor seek help from the system. ÑUser Guidance is provided through two broad category of methods: yOn-line help system yGuidance and error messages produced xin response to user actions.

28. On-line Help System ÑGeneric help messages are not very useful: yon-line help messages should be tailored to the context in which help is invoked.

29. On-line Help ÑA good on-line help should: yprovide messages in context-dependent way. xkeep track of what a user is doing yhelp messages should be tailored to user's experience level. yshould take advantage of graphics capabilities of the screen xnot just be a copy of the user manual.

30. Guidance Messages ÑThe guidance messages should be carefully designed: yprompt the user : xnext actions he/she might take, xcurrent status of the system, xprogress made so far in processing the command

31. Guidance Messages ÑA good guidance system should have: ydifferent levels of sophistication for different categories of users. yusers should have an option to turn off detailed messages.

32. Error Messages ÑError messages should be polite. ÑError messages should not be associated with noise: ymight embarrass the user. ÑThe messages should suggest how a given error can be rectified.

33. Error Messages ÑIf appropriate, ythe user should be given the option of invoking on-line help yto find out more about the error situation.

34. Improper Error Message File not found!

35. Mode-Based versus Modeless Interface ÑA mode is a state or collection of states: yin each state (or mode) different types of commands are available. ÑModeless interface: ysame set of commands are available at all times. ÑMode-based interface: ydifferent sets of commands are available depending on the mode in which the system is, i.e. ybased on the past sequence of the user commands.

36. Mode-Based versus Modeless Interface ÑA mode-based interface can be represented using a state transition diagram: yeach node (state) of the state transition diagram represents a mode. yEvery state (node) of the diagram xannotated with command names meaningful in that state.

37. Graphical User Interface (GUI) versus Text-Based User Interface ÑIn a GUI: yseveral windows with different information can be simultaneously displayed on user’s screen. yThis is perhaps the biggest advantage of GUI yuser can simultaneously interact with several related items at any time ycan even run many unrelated applications

38. Graphical User Interface (GUI) versus Text-Based User Interface ÑIconic information representation and symbolic information manipulation is possible in a GUI. ÑSymbolic information manipulation: ysuch as pulling an icon representing a file into a trash can for deleting yintuitively very appealing xuser can instantly remember it.

39. Graphical User Interface (GUI) versus Text-Based User Interface ÑA GUI can support command selection: yusing an attractive and user-friendly menu selection system. ÑIn a GUI, a pointing device can be used: ya mouse or a light pen to issue commands. yThe use of a pointing device xmakes command issue procedure simpler.

40. Graphical User Interface (GUI) versus Text-Based User Interface ÑOn the flip side, a GUI requires: yspecial terminals with graphics capabilities yrequires special input devices such a mouse. ÑIn contrast, a text-based interface: ycan run even on cheap alphanumeric terminals: yGraphics terminals are usually much more expensive than alphanumeric terminals.

41. Graphical User Interface (GUI) versus Text-Based User Interface ÑIncreasing availability of: yterminals with graphics capability ybit-mapped high-resolution displays ysignificant amount of local processing power. ÑWe will concentrate our attention to GUIs

42. Types of User Interfaces ÑUser interfaces can be classified into three categories: yCommand language-based interface yMenu-based interface yDirect manipulation interface

43. Types of User Interfaces ÑEach category of interface has its advantages and disadvantages: yModern applications sport a combination of all the three types of interfaces.

44. Choice of Interface ÑWhich parts of the interface should be implemented using what type of interface? y No simple guidelines available yto a large extent depends on the experience and discretion of the designer. ya study of characteristics of the different interfaces would give us some idea.

45. Command Language-Based Interface ÑAs the name itself suggests: yincorporates some language to form commands. ÑUsers frame the required commands in the language: ytype them in whenever required.

46. Design of command language interface ÑSimple command language interface: ydetermine all the commands needed to be supported yassign unique names to the different commands.

47. Design of command language interface ÑA more sophisticated command language interface: yallow users to compose primitive commands to form more complex commands.  Consider cat x.dat|grep 123 yLike a programming language.

48. Command Language-Based Interface ÑThe facility to compose commands: ydramatically reduces the number of command names users would have to remember. yCommands can be made concise xrequiring minimal typing by the user. yallow faster interaction with the computer ysimplify input of complex commands.

49. Advantages of Command Language Interfaces ÑEasy to develop: ycompiler writing techniques are well developed. ÑCan be implemented even on cheap alphanumeric terminals. ÑMuch more efficient: ycompared to other types of interfaces.

50. Disadvantages of Command Language Interfaces ÑDifficult to learn: yRequire the user to memorize primitive commands. ÑRequire the user to type in commands. ÑUsers make errors while: yformulating commands in the command language ytyping them in.

51. Disadvantages of Command Language Interfaces ÑAll interactions are through key- board: ycannot take advantage of effective interaction devices such as a mouse. yFor casual and inexperienced users, xcommand language interfaces are not suitable.

52. Issues in Designing a Command Language Interface ÑDesign of a command language interface: yinvolves several issues. ÑThe designer has to decide ywhat mnemonics are to be used for the commands. ymnemonics should be meaningful xyet be concise to minimize the amount of typing required.

53. Issues in Designing a Command Language Interface ÑThe designer has to decide: ywhether users will be allowed to redefine command names to suit their own preferences. xLetting a user define his own mnemonics for various commands is a useful feature, xbut increases complexity of user interface development.

54. Issues in Designing a Command Language Interface ÑDesigner has to decide: y whether it should be possible to compose primitive commands to create more complex commands. ysyntax and semantics of command composition options has to be clearly and unambiguously decided.

55. Issues in Designing a Command Language Interface ÑThe ability to combine commands is a powerful facility for experienced users: ybut quite unnecessary for inexperienced users.

56. Menu-Based Interface ÑAdvantages of a menu-based interface over a command language interface: yusers are not required to remember exact command names. ytyping effort is minimal: xmenu selections using a pointing device. xThis factor becomes very important for the occasional users who can not type fast.

57. Menu-Based Interface ÑFor experienced users: ymenu-based interfaces is slower than command language interfaces yexperienced users can type fast yalso get speed advantage by composing simple commands into complex commands.

58. Menu-Based Interface ÑComposition of commands in a menu-based interface is not possible. yactions involving logical connectives (and, or, all, etc.) xawkward to specify in a menu-based system.

59. Menu-Based Interface ÑIf the number of choices is large, yit is difficult to design a menu-based interface. yEven moderate sized software need s hundreds or thousands of menu choices. ÑA major problem with the menu-based interface: ystructuring large number of menu choices into manageable forms.

60. Structuring Menu Interface ÑAny one of the following options is adopted to structure menu items. yWalking menu yScrolling menu yHierarchical menu

61. Scrolling Menu yUsed when the menu options are highly related. xFor example text height selection in a word processing software. yScrolling of menu items xlets the user to view and select the menu items that can not be accommodated on one screen.

62. Walking Menu ÑWalking menu is commonly used to structure large menu lists: ywhen a menu item is selected, yit causes further menu items to be displayed adjacent to it in a submenu.

63. Walking Menu ÑA walking menu can successfully structure commands only if: ythere are tens rather than hundreds of choices yeach adjacently displayed menu does take up some screen space xthe total screen area is after all limited.

64. Hierarchical menu ÑMenu items are organized in a hierarchy or tree structure. ySelecting a menu item causes the current menu display to be replaced by an appropriate submenu. yOne can consider the menu and its various submenu to form a hierarchical tree-like structure.

65. Hierarchical menu ÑWalking menu are a form of hierarchical menu: ypracticable when the tree is shallow. ÑHierarchical menu can be used to manage large number of choices, ybut, users face navigational problems xlose track of where they are in the menu tree.

66. Direct Manipulation Interface ÑPresent information to the user yas visual models or objects. ÑActions are performed on the visual representations of the objects, e.g. ypull an icon representing a file into an icon representing a trash box, for deleting the file. ÑDirect manipulation interfaces are sometimes called as iconic interfaces.

67. Direct Manipulation (Iconic) Interface ÑImportant advantages of iconic interfaces: yicons can be recognized by users very easily, yicons are language-independent. ÑHowever, experienced users consider direct manipulation interfaces too slow.

68. Direct Manipulation (Iconic) Interface ÑIt is difficult to form complex commands using a direct manipulation interface. ÑFor example, if one has to drag a file icon into a trash box icon for deleting a file: yto delete all files in a directory one has to perform this operation again and again yvery easily done in a command language- interface by issuing a command delete *.*

69. Windowing Systems ÑMost modern GUIs are developed using some windowing system. ÑA windowing system can generate displays through a set of windows. ÑSince a window is a basic entity in such a graphical user interface: ywe need to first discuss what exactly a window is.

70. Window ÑA window is a rectangular area on the screen. ÑA window is a is a virtual screen: yit provides an interface to the user for carrying out independent activities, yone window can be used for editing a program and another for drawing pictures, etc. ÑA window can be divided into two parts: yclient part, ynon-client part.

71. Window ÑThe client area makes up the whole of the window, yexcept for the borders and scroll bars. ÑThe client area is available to the programmer. ÑNon-client area: yunder the control of window manager.

72. Window management system (WMS) ÑA graphical interface might consist of a large number of windows, ynecessary to have some systematic way to manage the windows. yWindow Management System (WMS)

73. Window management system (WMS) ÑGUIs are developed using a window management system (WMS): yA window management system is primarily a resource manager. ykeeps track of screen area resource yallocates it to the different windows which are using the screen.

74. Window management system (WMS) ÑFrom a broader perspective, a WMS can be considered as a user interface management system (UIMS) --- ynot only does resource management, yalso provides the basic behavior to windows yprovides several utility routines to the application programmer for user interface development.

75. Window management system (WMS) ÑA WMS simplifies the task of a GUI designer to a great extent: yprovides the basic behavior to the various windows such as move, resize, iconify, etc. yprovides routines to manipulate windows such as: xcreating, destroying, changing attributes of the windows, and drawing text, lines, etc.

76. Window management system (WMS) ÑA WMS consists of two part: y a window manager ya window system. Window System Window ManagerApplication Program WMS

77. Window Manager and Window System ÑUser interacts with window manager to do various window-related operations such as: ywindow repositioning, ywindow resizing, yiconification, etc. ÑWindow manager also controls the screen’s real estate policy.

78. Window manager ÑThe window manager is built on the top of the window system: ymakes use of the basic services provided by the window system. ÑThe window manager determines how the windows look and behave. yseveral kinds of window managers can be based on the same window system.

79. Window manager ÑWindow manager can be considered as a special program: ymakes use of the services (function calls) of the window system. ÑApplication programs yinvoke the window system for user interface-related functions.

80. Window System ÑProvides a large number of routines for the programmer ÑIt is very cumbersome to use these large set of routines: ymost WMS provide a higher-level abstraction called widgets.

81. Window Management System ÑA widget is the short form for a window object. ÑWidgets are the building blocks in interface design. ÑWe know that an object is essentially a collection of: yrelated data with several operations defined on these data.

82. Widgets ÑThe data of an window object are: ythe geometric attributes (such as size, location etc.) yother attributes such as its background and foreground color, etc. ÑThe operations defined on these data include, resize, move, draw, etc.

83. Advantages of Widgets ÑOne of the most important reasons to use widgets as building blocks: yprovide consistency. ÑConsistent user interfaces yimprove the user's productivity and ylead to higher performance with fewer errors.

84. Advantages of Widgets ÑWidgets make users familiar with standard ways of using an interface --- yusers can easily extend their knowledge of interface of one application to another ythe learning time for users is reduced to a great extent. ÑNext lecture we will identify standard widgets used to design GUIs.

85. Summary ÑUser interface is an important component of any software product. ÑWe first discussed some important concepts associated with user interface design. ÑWe discussed some desirable properties of a good user interface.

86. Summary ÑThere are 3 main types of interfaces: ycommand language interface ymenu-based interface yiconic interface ÑEach type of interface has its own advantages and disadvantages: ymost modern interfaces use a combination of all the three types.

87. Summary ÑWe finally discussed concepts associated with a window management system (WMS): yconsists of a window manager and a window system. ywe discussed the use of widgets as the basic building blocks in GUI design.