User Interface Design with Components

Transcription

1 User Interface Design with Components TIP X LIU, School of Computing, Napier University This chapter discuss the principals of user interface design, popular user interaction styles, UCM architecture, and

2 UI Design-A A spiral process User interface design is an incremental, iterative process. Users will provide feedback on the successes and failures of a user interface and there will be requests for changes to the software. The design process continues throughout the lifetime of a software and is visualized as a spiral process.

3 UI Design-A spiral process

4 Command line interfaces Indirect manipulation user interface For example DOS, UNIX. These interfaces are difficult to use because they require users to learn a command language. E.g.: ls l to list out all the files in the current directory.

5 Advantages of GUIs Easy to learn and use. The user has multiple screens for system interaction Fast, full-screen interaction is possible with immediate access to anywhere on the screen.

6 Characteristics of GUI Windows. Multiple windows allow different information displayed simultaneous on the screen. Icons. Icons represent different information. Menus. Commands are selected via menus. Pointing. Pointing devices such as a mouse are used for full screen access. Graphics. Graphical elements are mixed with text.

7 An example of GUI screen

8 User interface design principles User familiarity. The interface should use terms and concepts which are drawn from the experience of the people using the system. Consistency. The interface should be consistent in that, wherever possible, compatible operations should be activated in the same way. Minimal surprise. Users should never be surprised by the behavior of a system.

9 User interface design principles Recoverability. The interface should include mechanisms to allow users to recover from error. Possible methods include: Confirmation of destructive actions The provision of an undo facility 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 users.

10 User Interaction Styles Direct manipulation. The user directly interacts with objects on the screens. E.g. drag a file to trash bin. Menu selection. A user selects a command from a list of possibilities. Form fill-in. in. A user fills in the fields of a form. Command language. The user issues a special command and associated parameters to instruct the system what to do. Natural language. The T user issues a command in natural language.

11 Direct manipulation Fast and intuitive Easy to learn Only suitable where there is a visual metaphor for tasks and objects Maybe hard to implement

12 Menu selection Avoids user error Little typing required Slow for experienced users Can become complex if many menu options

13 Form fill-in in Simple data entry Easy to learn Takes up a lot of screen space

14 Command language Powerful and flexible Hard to learn Poor error management

15 Natural language Accessible to casual users Easily extended Requires more typing

16 The event-action paradigm User interface software is event driven. A user supplies an event to an object and a sequence of actions is executed in response to that event. The software then stops and waits for the next event to be supplied. Example word processor We describe the event-action lists of user interface with Statecharts.

17 UCM architecture

18 Statecharts-basic notations

19 Example a a home heater Initila State State Final State Idle toocold( desired Temp ) attemp transition event Activating Heating ready/turnon() Active nested state action

20 Start state and end state Initial State Final State

21 States with depth: refinement and clustering State diagrams can be nested. A superstate captures the common behaviour of its substates. Superstates are generalisations of their substates,, just as superclasses are generalisations of their subclasses. Substates are drawn inside the superstate box.

22 States refinement

23 States clustering

24 Example-Car transmission Transmission Neutral push R Reverse push N push F push N Forward stop First Second Third

25 Actions Actions attached to transitions are performed in response to the corresponding events occurring. The syntax is Event(guard condition) / action,... E.g.: increase a counter each time a particular event occurs.

26 Actions-example Idle right button pressed / display pop up menu release right button / erase pop up menu Actions for pop-up menu Menu Visible cursor moved / highlight menu item

27 Guard Conditions A condition is something that may or may not be true, is valid over a period of time. Conditions are used to guard transitions. A guarded transition fires when only if its guard condition is true. Syntax: event (guard condition)

28 Conditions-example

29 Concurrency Concurrent substates are partitioned with dotted lines. When the enclosing state is entered, there is one active state for each concurrent substate. A transition from a concurrent substate leaving the enclosing superstate terminates the parallel substates. An unlabeled transition from the enclosing superstate indicates that all the substates must have reached their terminal substates for the transition to occur.

30 Currency Taking Class Incomplete lab1 lab done lab2 lab done Term project Project done Passed Final test pass fail Failed

31 The history mechanism The history mechanism provides a way of entering a group of states based on the systems history in that group. The state entered is the most recently visited state in the group.

32 The history mechanism

33 Standard design rules To control the number of states in a statechart To divide the design up into separate parts To avoid duplicate states To avoid unnecessary states To consider using concurrency and depth

34 Standard design rules To control the number of event arrows in a statechart Clustering. If a set of states and the same event causes a transition from each of them, then the states can be clustered with a superstate and each of the individual events can be replaced by just one arrow attached to the superstate. History. If a set of states has the same event attached to them, then all these event arrows can be replaced with a single event arrow used in conjunction with the history mechanism.

35 Identifying the high-level statecharts The first step is to identify the high-level states in the design, i.e., top-down design order. These states usually correspond to screens (canvases) that a user can navigate between. Hints: Design one screen at a time, but start to understand how two screens interact early in the process. Hints: The high-level states in a statechart correspond to the windows and sub-windows in a user interface.

36 Identifying GUI items After the high-level states been identified, the next step is to consider each of the states in more detail. The best starting point is to write down all the items in or associated with a screen, i.e., buttons, menus, text items, scrolling lists, etc. The next stage is to identify whether the behavior or appearance of an item is constant or whether it varies. Record these in event- action paradigms.

37 Screen rules The point of screen rules is to identify the behavior of items.

38 Screen rules Entry and exit rules. What events cause a screen to be entered or exited or an application to be closed? Identify any modes. A mode is a state that the software can enter and where the effect of a user event changes depending on the mode. A screen may have to operate in a read-only mode or in a read-write mode.

39 Screen rules Identify the screen items that have varying behavior. There are many ways in which a user interface item can change. E.g., enabled to disabled, visible to invisible, position a to position b, color x to color y. Identify the screen items that have constant behavior.

40 Identifying states Then you need to convert screen rules to a statechart.. You should: Consolidate related behaviors Separate unrelated behaviors Synchronize concurrent parts with simultaneous events Be wary of actions on states Name states and transitions meaningfully