User Interface Design. Introduction

Size: px

Start display at page:

Download "User Interface Design. Introduction"

Daniel Harrington
5 years ago
Views:

1 User Interface Design Introduction

2 The User Interface An Introduction and Overview Important part of computer systems. It is the system for most users. It can be heard, seen, touched Goals UI design are simple, make computer with ease, productivity and enjoyable. Importance of the User Interface A wrapped package of display and good interface design is GUI Defining the UI Study of Human computer interaction ( studying, planning, design) Factor of HCI What people want and expect? What physical limitation and ability people possess How their perceptual and information processing system works? What people feel enjoyable and attractive?

3 User Interface Part of computer and its software that people can see, hear, touch, talk to Two essential components: Input and Output Input how a person communicates his needs or desires. (keyboard, mouse, trackball, joystick, light pen, one's finger, one s voice) Output how computer convey the results. ( display screen, voice and sound) Form of smell and touch is unexplored

4 Importance of good design With the available technology and tools, still people make inefficient UI because: We don t care? We don t possess common sense? We don t have the time? We still don t know what really makes good design? A well designed interface is important to our uses: Windows by which users view the capabilities of system It is the visible component for the users Vehicle by which critical task are present Poor design problems: Difficulty in doing jobs and prone to errors Chase people way from the system

5 Benefits of Good Design Reduce the user usage time increase productivity by 20% Reduce the transaction with 25% less time. Reduce the error rate by 25% Reduce the decision making by about 40% Training cost reduce by reducing the training time

6 History of HCI Levels of interaction Motion and gestures Universality spoken language Writing Typed input through keyboard ( command languages, Question and Answer, Menu Selection, Function Key Selection, and Form Fill-In). Voice and handwritting.

7 Introduction to GUI Still 1970 typewriter is the only form of interface. In 1970 Xerox s Palo Alto Research center introduces, and interface using form of gestures. Xerox systems, Altus and Star introduced the mouse and pointing and selecting form of interface. It also introduce the GUI which we use now. Sketchpad is the first HCI introduced in 1963

10 Blossoming of WWW DARPA ARPANET TELNET 1974 Internet TCP/IP HTML ( for distributing information) Mosaic first browser by National center for supercomputing applications (NCSA) Netscape Navigator 1994 Explorer

11 Characteristics of GUI User Interface collection of techniques and mechanism to interact with something. Graphical interface pointing device is primary interaction which equivalent to hand and what user interact is generally objects. Perform operations on objects called as actions ( selecting, pointing and manipulating). Text based is one dimensional while graphical is three dimensional. Information appeared as Windows text, graphical images as icons, menus pop-up and pull-down and pointing devices generally referred as WIMP.

12 Direct Manipulation System By Shneiderman in 1982 Characteristics The System is portrayed as an extension of the real world. Continuous visibility of objects and actions - WYSIWYG Actions are rapid and incremental with visible display of results. Incremental actions are easily reversible. Indirect Manipulation Operations may be difficult to conceptualize in the graphical system. Graphics capability of the system may be limited. Amount of space available for placing manipulation controls in the windows may be limited. It is difficult for people to remember every actions. Metaphors can be misleading since the the essence of metaphor is understanding and experiencing one kind of thing in terms of another. It results in indirect manipulation system.

13 Indirect Manipulation Indirect manipulation substitutes words and text, such as pull-down or pop-up menus, for symbols, and substitutes typing for pointing. Most window systems are a combination of both direct and indirect manipulation. Example A menu may be accessed by pointing at a menu icon and then selecting it (direct manipulation). The menu itself, however, is a textual list of operations (indirect manipulation). When an operation is selected from the list, by pointing or typing, the system executes it as a command.

14 Graphical System Advantages and disadvantages: Advantages Symbols recognized faster than text Fast learning Faster use and problem solving Easier remembering More natural Exploits spatial/visual cues Fosters more concrete thinking Provides context Fewer errors Immediate feedback Predictable system response Easily reversible action More attractive May consume less Space Easily augmented with text displays Low typing requirement

15 Graphical System Advantages and disadvantages: Disadvantages Greater design complexity Learning still necessary Lack of experimentally derived design guidelines Inconsistent in technique and terminology Working domain is the present Window manipulation requirements Production limitations Few tested icons exist Inefficient for touch typists Inefficient for expert users May consume more screen space Hardware limitations

16 Characteristics of the Graphical User Interface Sophisticated Visual Presentation Visual presentation is the visual aspect of the interface. It is what people see on the screen. The graphical system permits displaying lines, including drawings and icons. Permits the displaying of a variety of character fonts, including different sizes and styles. The display of 16 million or more colors is possible Permit animation and the presentation of photographs and motion video. The graphical system provides to its user several useful, simple, meaningful. Visual elements like windows, Menus files or programs are denoted by icons screen based controls, cursor

17 Pick-and-Click Interaction pick defines the motor activity of a user to pick out an element of a graphical screen on which an action is to be taken. click represents the signal to carry out an action. the pick and click technique is carried out with the help of the mouse and its buttons. (mouse pointer for picking and mouse click is clicking). the keyboard is an another technique. Restricted Set of Interface Options WYSIWYG. Visualization Effective visualizations can facilitate mental insights, increase productivity, and foster faster and more accurate use of data.

18 Object Orientation Objects are what people see on the screen. They are manipulated as a single unit. A well-designed system keeps users focused on objects, not on how to carry out actions. Objects can be composed of subobjects. For example, an object may be a document. The document s subobjects may be a paragraph, sentence, word, and letter. IBM s System Application Architecture Common User Access Advanced Interface Design Reference (SAA CUA) (IBM, 1991) breaks objects into three meaningful classes: data, container, and device. Data objects present information. This information, either text or graphics, normally appears in the body of the screen.

19 Container objects are objects to hold other objects. They are used to group two or more related objects for easy access and retrieval. There are three kinds of container objects: the workplace, folders, and workareas. The workplace is the desktop, the storage area for all objects. Folders are general-purpose containers for long-term storage of objects. Workareas are temporary storage folders used for storing multiple objects currently being worked on. Device objects represent physical objects in the real world, such as printers or trash baskets. Microsoft Windows specifies the characteristics of objects depending upon the relationships that exist between them. These relationships are called collections, constraints, composites, and containers. A collection is the simplest relationship the objects sharing a common aspect. A constraint is a stronger object relationship. A composite exists when the relationship between objects becomes so significant that the aggregation itself can be identified as an object. A container is an object in which other objects exist.

20 The Web User Interface A web refers to a pool of information where users can access unlimited amount of data by means of web interfaces. Designing of web interfaces involves design of movement of data and presenting the data in a much understandable way which is easily accessible to the users. Difficulties in designing web interfaces HTML, a commonly used language for designing web interfaces. It is easy for technical users but not for ordinary users. movement in web browser in the pre-gui are required command area to be memorized and movement system and structure were hidden under dark and black screen. Where as GUIs removed the command area by menus associated with task. There are two types of movement in browser forward and backward. The steps involved when dealing with forms like filling, sending and resetting needs interactive methods.

21 The Popularity of the Web Web has completely changed computing. Web permits users throughout the world to interact, access content, publish and heard. The web permits the individual to control display and presentation of web pages.

22 Characteristics of a Web Interface CONCEPT GUI WEB Devices User hardware variations limited User hardware characteristics well defined. Screens appear exactly as specified. User hardware variations enormous. Screen appearance influenced by hardware being used. User Focus Data and applications Information and navigation Typically created and used by known and trusted sources. Properties generally known. Typically placed into system by users Data or known people and organizations. Information Typically organized in a meaningful fashion. A notion of private and shared data exists. Full of unknown content. Source not always trusted. Often not placed onto the Web by users or known people and organizations. Highly variable organization. Privacy often suspect

23 CONCEPT GUI WEB User Tasks User's Conceptual Space Presentation Elements Install, configure, personalize, start, use, and upgrade programs. Open, use, and close data files. Fairly long times spent within an application. Familiarity with applications often achieved. Controlled and constrained by program. Windows, menus, controls, data, tool bars, messages, and so on. Many transient, dynamically appearing and disappearing. Presented as specified by designer. Generally standardized by toolkits and style guides Link to a site, browse or read pages, fill out forms, register for services, participate in transactions, download and save things. Movement between pages and sites very rapid. Familiarity with many sites not established. Infinite and generally unorganized. Two components, browser and page. Within page, any combination of text, images, audio, video, and animation. May not be presented as specified by the designer dependent on browser, monitor, and user specifications. Little standardization

24 CONCEPT GUI WEB Navigation Context Through menus, lists, trees, dialogs, and wizards. Not a strong and visible concept. Generally standardized by toolkits and style guides. Enables maintenance of a better sense of context. Restricted navigation paths. Multiple viewable windows. Through links: bookmarks, and typed URLs. Significant and highly visible concept. Few standards. Poorer maintenance of a sense of context. Single-page entities. Unlimited navigation paths. Interaction Interactions such as clicking menu choices, pressing buttons, selecting list choices, and cut/copy/paste occur within context of active program. Basic interaction is a single click. This can cause extreme changes in context, which may not be noticed. Response Time Nearly instantaneous. Quite variable

25 CONCEPT GUI WEB Visual Style System Capability Integration Reliability Typically prescribed and constrained by toolkit. Visual creativity allowed but difficult. Little significant personalization. Unlimited capability proportional to sophistication of hardware and software. Seamless integration of all applications into the platform environment a major objective. Toolkits and components are key elements in accomplishing this objective Tightly controlled in business systems, proportional to degree of willingness to invest resources and effort a more artistic, individual, and unrestricted presentation style. Complicated by differing browser and display capabilities, and bandwidth limitations. Limited by constraints imposed by the hardware, browser, software, client support. Apparent for some basic functions within most Web sites (navigation, printing, and so on.) Sites tend to achieve individual distinction rather than integration. Susceptible to disruptions caused by user, telephone line and cable providers, Internet service providers,.

26 Printed Pages versus Web Pages CONCEPT Printed pages Web pages Page size large and fixed in size. Page rendering (availability) Page layout Page resolution Printed pages are presented as complete entities, and their entire contents. The format of printed page is precise keeping. The user focused on it. The intent of print characters is fast and useful as we can read the document fast. Web pages are small and variable varies according to the user s browser, monitor. Web pages elements are often rendered slowly. Dozens of seconds may be consumed waiting for a page to completely appear. The format of web page is estimated with less designing principles and features of users technologies. The purpose of screen character is not much useful and is rendered slowly.

27 CONCEPT Printed pages Web pages User focus Page navigation Interactivity Page independence The printed pages provides well furnished complete information Navigating printed materials is as simple as page turning Design allows the users to move their eyes over fixed content The pages are dependent on one another. The web page provide separate information in pieces to the users. Navigating the Web requires innumerable decisions concerning Web page design permits the users to use their hands for scrolling, pointing, etc., independent

28 The Merging of Graphical Business Systems and the Web Characteristics Intranet internet Users Tasks Type of information Amount of information The users of intranets, being organization employees An intranet is used for an organization s everyday activities An intranet will contain detailed information needed for organizational functioning an intranet site will be much larger than an organization s Internet site. Internet sites are used by customers The Internet is mainly used to find information. The Internet will usually present more stable information an internet site will be much larger than an organization s Intranet site.

29 Extranets An extranet is similar to the intranet which is partially accessed by the authorized users. The main server is placed behind a firewall, which helps in providing a controlled access between the intranet and internet. Only the authorized people are allowed to access intranet. Various levels of access are provided to individuals and outside users. Depending upon the username password the access can be made.

30 Principles of User Interface Design Principles for the Xerox STAR The illusion of manipulable objects according to this principle selection and manipulable displayed objects must be created. Visual order and viewer focus (Display and Animations) Revealed structure (intention and effect) Consistency (uniformity and not changing) Appropriate effect or emotional impact (emotional effect for the product and its market) A match with the medium (device on which it displayed)

31 General Principles of User Interface Design Pleasing appearance Clarity Compatibility Comprehensibility Configurability Consistency Control (control is the ability of the system to reply to the actions of the users). Directness Efficiency Familiarity Flexibility Forgiveness Predictability Recovery Responsiveness Simplicity Transparency Trade-offs

32 Aesthetically Pleasing Presentation and design principles Provide meaningful contrast between screen elements Align screen elements and groups Provide three dimension representation Use color and graphics effectively Clarity Visual elements Functions Metaphors Words and Text Compatibility The user The task and job The product

33 Comprehensibility User should know What to look at What to do When to do it Where to do it Why and how to do it Configurability Easy personalization and configuration Enhance sense of control Encourages active role in understanding Consistency Have a similar look Have similar uses Operate similarly Same action yield same result Function of element should not change

34 Control Actions Should results from explicit user results Actions should be performed quickly Actions should be capable of interruptions or termination The user should never be interrupted for errors Directness Available for alternatives should be visible The effect of actions on objects should be visible Efficiency Transition between controls should flow easily and freely Anticipates the user needs and wants whenever possible Navigation path should be as short as possible

35 familiarity Employ familiar concepts and use familiar language Keep the interface natural and mimicking the user pattern Use real world metaphor Flexibility Each users knowledge and skills Each users experience Each users personal preferences Each users habit Forgiveness Tolerate the common and unavoidable errors Prevent error from occurring whenever possible Protect against possible catastrophic error Whenever error occur provide constructive messages.

36 Predictability The user should be able to anticipate the natural progression of each task. All expectations should be fulfilled uniformly and completely. When an error does occur, provide constructive messages. Recovery A system should permit: Commands or actions to be abolished or reversed. Immediate return to a certain point if difficulties arise. Ensure that users never lose their work as a result of: An error on their part. Hardware, software, or communication problems. Responsiveness The system must rapidly respond to the user s requests. Provide immediate acknowledgment for all user actions: Visual Textual Auditory

37 Simplicity Provide as simple an interface as possible. Present common and necessary functions first. Prominently feature important functions. Hide more sophisticated and less frequently used functions. Transparency Permit the user to focus on the task or job, without concern for the mechanics of the interface. Workings and reminders of workings inside the computer should be invisible to the user. Trade-Offs Final design will be based on a series of trade-offs balancing often-conflicting design principles. People s requirements always take precedence over technical requirements.

38 UNIT 2 HUMAN COMPUTER INTERACTION

39 UNIT II User Interface Design Process Organized in the order of development stages which comprises of 14 different steps Obstacles and Pitfalls in the development path Observations No body ever gets it right for the first time. Development is chock full of surprises. Good design requires living in a sea of changes. Designers need good tools. Performance design goals. People may make mistakes while using a good system also. Pitfall occur because of flawed design process, failure to address critical issue, improper focus of attention, development failures. Common pitfalls are: No early analysis and understanding the users needs and expectations. A focus on using design features or components. No usability testing. No common design team vision. Poor communication.

40 Designing for People : Five Commandments 1. Gain a Complete understanding of users and their tasks Users are the customers. Gap exists in technical abilities, goals, and attitude between the users and developer 2. Solicit early and ongoing user involvement Involve users in the development process from early Users involvement based on the job or task knowledge 3. Perform rapid prototyping and testing It identify the problems in early stages Uncover all the potential defects If thorough testing not occur, Testing in the user space will results in negative impact 4. Modify and iterate the design as much as necessary Problem force to revisit the previous stages 5. Integrate the design of all the system components Documentation, help function, training needs are developed concurrently

41 Usability Describe the effectiveness of human performance The capability to be used by humans easily and effectively Easily to a specified level of subject assessment Effectively to a specified level of human performance Usability Assessment begin in the early stages and continuously applied throughout the process

42 Common Usability problems 1. Ambiguous menus and icons. 2. Languages that permit only single-direction movement through a system. 3. Input and direct manipulation limits. 4. Highlighting and selection limitations. 5. Unclear step sequences. 6. More steps to manage the interface than to perform tasks. 7. Complex linkage between and within applications. 8. Inadequate feedback and confirmation. 9. Lack of system anticipation and intelligence. 10. Inadequate error messages, help, tutorials, and documentation.

43 Web usability Characteristics often quite irritating are: Visual clutter lack of white space, meaningless graphics, wasteful decoration Impaired information readability make poor design due to choice of typeface, colors and graphics, bright color and background diminish the text Incomprehension components no clue as to their functions Annoying distractions Elements in motions, marquees, blinking text, looping Confusing Navigation Inefficient Navigation Inefficient Operations too loaded makes download times too long Excessive or inefficient page scrolling causes content to be missed out. Information overload Design inconsistency Outdated information Stale design caused by emulation of printed documents and past systems.

USER INTERFACE DESIGN UNIVERSITY FOCUSSED QUESTIONS

USER INTERFACE DESIGN UNIVERSITY FOCUSSED QUESTIONS Unit I 1. Explain the direct and Indirect manipulation with an example. (8) Concept of Direct Manipulation The term used to describe this style of interaction for graphical systems was first used by Shneiderman