1. UI&V 1 Doc. Storage & Ret. Systems (IS 531) Represented by: Minahi Attaweel 425121609Supervisor: Mourad YKHLEF, Ph.D Chapter 10 User Interfaces & Visualization Chapter 10 User Interfaces & Visualization

2. UI&V 2 Well designed, effective computer systems generate positive feelings of success, competence, mastery, and clarity in the user community. When an interactive system is well designed, the interface almost disappears, enabling users to concentrate on their work, exploration, or pleasure. Human-Computer Interaction

3. UI&V 3 Design Principle Offer informative feedback( relationship between query specification & retrieved docs) Reduce working memory load (iterative) Provide alternative interfaces for novice & expert users (simplicity vs power)  Good UI design provides intuitive bridges between simple & advanced interfaces Permit easy reversal of actions Support an internal locus of control (control of how & when feedback) Each principle should be instantiated differently depending on the particular interface application

4. UI&V 4 The Rule of Visualization Tools of computer interface design are familiar to most users: windows, menus, icons, dialog boxes,…etc Graphics provide a more accessible interface than command-line-based displays Visualization provide visual depictions of very large information spaces. Humans are highly attuned to images & visual information

5. UI&V 5 A visual representation can communicate some kind of info. Much more rapidly & effectively than any other method The growing prevalence of fast graphics processors & high resolution color monitors is increasing interest in info. Visualization. (scientific visualization) Icons, color highlighting, brushing & linking, panning & zooming, focus-plus-context, & use of animation

6. UI&V 6 Brushing & linking refers to the connecting of two or more views of the same data, such that a change to the representation in one view affects in other views as well Panning & zooming refers to the actions of a movie camera that can scan sideways across a scene (panning) or move in for a close-up or back away to get a wider view (zooming). Text clustering There are a large number of graphical methods for depicting trees & hierarchies (use of animation) It is useful to combine these techniques into an interface layout

7. UI&V 7 Evaluating Interactive Systems Age & cultural differences can contribute to acceptance or rejection of interface techniques ( interface can be useful for some users & foreign for others) SW design should allow for flexibility in interaction style & new features shouldn’t be expected to be equally helpful for all users An important aspect of HC interaction is the methodology for evaluation of UI techniques Precision & recall measures have been used for comparing the ranking results of non-interactive systems, but less appropriate for assessing interactive systems In many interactive setting, user require only a few relevant docs & don’t care about high recall to evaluate systems Metrics: -time required to learn the system -time required to achieve goals on benchmark tasks -time required to achieve goals on benchmark tasks -error rates -error rates -retention of the use of the interface over time -retention of the use of the interface over time

8. UI&V 8 The Information Access Process A simplified diagram of the standard model of the information access processes

9. UI&V 9 Users scan information, retrieve & view docs depend on their query specification The UI should support methods for monitoring the status of the current strategy in relation to the users current task and high level goals There are a number of theories and frameworks that contrast browsing, querying, navigating & scanning along several dimensions

10. UI&V 10 NonSearch Parts of the Information Access Process Reading, annotating & analysis [Russell et al] discusses information work as a process in which information retrieval plays only a small part divide the entire information access process into two main components: search/retrieval & analysis/synthesis of results

11. UI&V 11 Starting Points Search interfaces must Search interfaces must provide users with good ways to get started Studies show that users tend to start out with very short queries, inspect results, and then modify those queries in an incremental feedback cycle Find the best source to search (starting points) - - Lists - - Overviews - - Examples - - Automated source selection

12. UI&V 12 Lists of Collections The LEXISNEXIS source selection screen when users want to search outside their domains of expertise, a list of familiar sources is not sufficient

13. UI&V 13 Overviews An overview can show the topic domains represented within the collections to help users select or eliminate sources from consideration An overview can help users get started, directing them into general neighborhoods, after which they can navigate using more detailed descriptions

14. UI&V 14

15. UI&V 15

16. UI&V 16

17. UI&V 17

18. UI&V 18

19. UI&V 19 Query Specification

20. UI&V 20

21. UI&V 21

22. UI&V 22

23. UI&V 23

24. UI&V 24

25. UI&V 25

26. UI&V 26

27. UI&V 27 Out Search

28. UI&V 28 Match the Method to the Task The Domain: Understanding and analysis during development and maintenance of large-scale software systems. The Argument: No single software visualization tool can address all tasks simultaneously. The Proposal: A framework for identifying the most appropriate visualization mechanism for the given task.

29. UI&V 29 A Reference Model adapted from Card et al. “Readings in Information Visualization: Using Vision to Think”

30. UI&V 30 A Reference Model adapted from Card et al. “Readings in Information Visualization: Using Vision to Think” source code, execution data, design documents etc. abstract syntax trees, class/object relationships etc. (software specific) 2D/3D graphs, tree hierarchy, UML interactive drill-down, navigation

31. UI&V 31 A Taxonomy of Software Visualization Systems Dimensions of Software Visualization –Tasks – why is the visualization needed? –Audience – who will use the visualization? –Target – what is the data source to represent? –Representation – how to represent it? –Medium – where to represent the visualization

32. UI&V 32 User-Interface and Information- Visualization Design User-interface components –Metaphors: Essential concepts in words, images, sounds, touch –Mental Models: Organization of data, functions, tasks, roles, or people at work or play, static or mobile –Navigation: Movement through mental models via windows, dialogue boxes, buttons, links, etc. –Interaction: Input/output techniques, feedback –Appearance: Visual, verbal, acoustic, tactile Information visualization: –Tables and forms –Charts –Maps –Diagrams

33. UI&V 33 Which Website for Saudi Arabia is Better? How/what to represent the target culture? Should designs impose foreign values?

34. UI&V 34 Human factors in interface design Limited short-term memory –People can instantaneously remember about 7 items of information. If you present more than this, they are more liable to make mistakes. People make mistakes –When people make mistakes and systems go wrong, inappropriate alarms and messages can increase stress and hence the likelihood of more mistakes. People are different –People have a wide range of physical capabilities. Designers should not just design for their own capabilities. People have different interaction preferences –Some like pictures, some like text.

35. UI&V 35 User interface design principles

36. UI&V 36 Design issues in UIs Two problems must be addressed in interactive systems design –How should information from the user be provided to the computer system? –How should information from the computer system be presented to the user? User interaction and information presentation may be integrated through a coherent framework such as a user interface metaphor.

37. UI&V 37 Interaction styles Direct manipulation Menu selection Form fill-in Command language Natural language

38. UI&V 38 Interaction styles

39. UI&V 39 Multiple user interfaces

40. UI&V 40 Web-based interfaces Many web-based systems have interfaces based on web forms. Form field can be menus, free text input, radio buttons, etc. In the LIBSYS example, users make a choice of where to search from a menu and type the search phrase into a free text field.

41. UI&V 41 LIBSYS search form

42. UI&V 42 Information presentation Information presentation is concerned with presenting system information to system users. The information may be presented directly (e.g. text in a word processor) or may be transformed in some way for presentation (e.g. in some graphical form). The Model-View-Controller approach is a way of supporting multiple presentations of data.

43. UI&V 43 Information presentation

44. UI&V 44 Model-view-controller

45. UI&V 45 Information presentation Static information –Initialised at the beginning of a session. It does not change during the session. –May be either numeric or textual. Dynamic information –Changes during a session and the changes must be communicated to the system user. –May be either numeric or textual.

46. UI&V 46 Colour displays Colour adds an extra dimension to an interface and can help the user understand complex information structures. Colour can be used to highlight exceptional events. Common mistakes in the use of colour in interface design include: –The use of colour to communicate meaning; –The over-use of colour in the display.

47. UI&V 47 Colour use guidelines Limit the number of colours used and be conservative in their use. Use colour change to show a change in system status. Use colour coding to support the task that users are trying to perform. Use colour coding in a thoughtful and consistent way. Be careful about colour pairings.

48. UI&V 48 Good and bad message design

49. UI&V 49 The UI design process UI design is an iterative process involving close liaisons between users and designers. The 3 core activities in this process are: –User analysis. Understand what the users will do with the system; –System prototyping. Develop a series of prototypes for experiment; –Interface evaluation. Experiment with these prototypes with users.

50. UI&V 50 The design process

51. UI&V 51 User analysis If you don’t understand what the users want to do with a system, you have no realistic prospect of designing an effective interface. User analyses have to be described in terms that users and other designers can understand. Scenarios where you describe typical episodes of use, are one way of describing these analyses.

52. UI&V 52 Analysis techniques Task analysis –Models the steps involved in completing a task. Interviewing and questionnaires –Asks the users about the work they do. Ethnography –Observes the user at work.

53. UI&V 53 User interface evaluation Some evaluation of a user interface design should be carried out to assess its suitability. Full scale evaluation is very expensive and impractical for most systems. Ideally, an interface should be evaluated against a usability specification. However, it is rare for such specifications to be produced.

54. UI&V 54 Usability attributes

55. UI&V 55 Simple evaluation techniques Questionnaires for user feedback. Video recording of system use and subsequent tape evaluation. Instrumentation of code to collect information about facility use and user errors. The provision of code in the software to collect on-line user feedback.

56. UI&V 56 Thank U All!!!