5945479
- 1. THE GRAPHICAL USER INTERFACE AND WEB INTERFACE
- 2. INTRODUCTION A user interface is a collection of techniques and mechanisms to interact with something. In a graphical interface, the primary interaction mechanism is a pointing device of some kind. This device is the electronic equivalent to the human hand. What the user interacts with is a collection of elements referred to as objects. Properties of objects They can be seen, heard, touched, or otherwise perceived. Objects are always visible to the user and are used to perform tasks. They are interacted with as entities independent of all other objects. People perform operations, called actions, on objects. The operations include accessing and modifying objects by pointing, selecting, and manipulating.
- 3. The design and the user interface are changed fundamentally with the invasion of graphics. The older text-based screen possessed a one-dimensional, text-oriented, form-like quality were replaced by a three-dimensional appearance graphical screen. Information floated in windows, small rectangular boxes seemed to rise above the background plane. Features of graphical system are Windows could also float above other windows. Controls appeared to rise above the screen and move when activated. Lines appeared to be etched into the screen. Information could appear, and disappear, as needed, and in some cases text could be replaced by graphical images called icons. These icons could represent objects or actions. THE POPULARITY OF GRAPHICS
- 4. Menus “pop up” on the screen. In the screen body, selection fields such as radio buttons, check boxes, list boxes, drop-down menus and palettes coexisted with the reliable old text entry field. Pointing devices like mouse, joystick were used to choose objects and screen actions. These features have increased the graphics popularity the graphical interface is also known as WIMP interface: windows, icons, menus, and pointers. the graphical screens cause persons information processing capabilities very much effective in comparison with various methods. graphic minimizes the content recording and reframing on screen. it decreases the load on memory. graphical screens allow quicker content movement between computers and users due to visual content.
- 5. THE CONCEPT OF DIRECT MANIPULATION Direct manipulation refers to the style of communication for graphical systems characteristics: The system is portrayed as an extension of the real world. Continuous visibility of objects and actions. Actions are rapid and incremental with visible display of results. Incremental actions are easily reversible.
- 6. Problems with direct manipulation The operation may be difficult to conceptualize in the graphical system. The graphics capability of the system may be limited. The amount of space available for placing manipulation controls in the window border may be limited. It may be difficult for people to learn and remember all the necessary operations and actions.
- 7. 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.
- 8. GRAPHICAL SYSTEMS: ADVANTAGES Symbols recognized faster than text Faster learning. Faster use and problem solving. Easier remembering. More natural. Exploits visual/spatial cues. Fosters more concrete thinking. Provides context. Fewer errors. oIncreased feeling of control. oImmediate feedback. oPredictable system responses. oEasily reversible actions. oLess anxiety concerning use. oMore attractive. oMay consume less space. oReplaces national languages. oEasily augmented with text displays. oLow typing requirements. oSmooth transition from command language system.
- 9. Greater design complexity. Learning still necessary. Lack of experimentally-derived design guidelines. Inconsistencies in technique and terminology. Working domain is the present. Not always familiar. Human comprehension limitations. Window manipulation requirements. GRAPHICAL SYSTEMS: DISADVANTAGES oProduction limitations. oFew tested icons exist. oInefficient for touch typists. oInefficient for expert users. oNot always the preferred style of interaction. oNot always fastest style of interaction. oIncreased chances of clutter and confusion. oMay consume more screen space. oHardware limitations.
- 10. 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
- 11. 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 clock 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. o Restricted Set of Interface Options WYSIWYG.
- 12. Visualization Effective visualizations can facilitate mental insights, increase productivity, and foster faster and more accurate use of data. o 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.
- 13. 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. 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.
- 14. 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. These relationships help define an object’s type. Another important object characteristic is persistence. Persistence is the maintenance of a state once it is established. An object’s state (for example, window size, cursor location, scroll position, and so on) should always be automatically preserved when the user changes it.
- 15. Use of Recognition Memory Concurrent Performance of Functions
- 16. 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.
- 17. 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.
- 18. 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 Data Information Typically created and used by known and trusted sources. Properties generally known. Typically placed into system by users or known people and organizations. 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 CHARACTERISTICS OF A WEB INTERFACE
- 19. CONCEPT GUI WEB User Tasks 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. 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. User's Conceptual Space Controlled and constrained by program. Infinite and generally unorganized. Presentation Elements • 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 • 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
- 20. CONCEPT GUI WEB Navigation • Through menus, lists, trees, dialogs, and wizards. Not a strong and visible concept. • Generally standardized by toolkits and style guides. • Through links: bookmarks, and typed URLs. Significant and highly visible concept. • Few standards. Context • Enables maintenance of a better sense of context. Restricted navigation paths. • Multiple viewable windows. • 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
- 21. CONCEPT GUI WEB Visual Style • Typically prescribed and constrained by toolkit. • Visual creativity allowed but difficult. • Little significant personalization. • a more artistic, individual, and unrestricted presentation style. • Complicated by differing browser and display capabilities, and bandwidth limitations. System Capability • Unlimited capability proportional to sophistication of hardware and software. • Limited by constraints imposed by the hardware, browser, software, client support. Integration • Seamless integration of all applications into the platform environment a major objective. • Toolkits and components are key elements in accomplishing this objective • Apparent for some basic functions within most Web sites (navigation, printing, and so on.) • Sites tend to achieve individual distinction rather than integration. Reliability • Tightly controlled in business systems, proportional to degree of willingness to invest resources and effort • Susceptible to disruptions caused by user, telephone line and cable providers, Internet service providers,.
- 22. PRINTED PAGES VERSUS WEB PAGES CONCEPT Printed pages Web pages Page size • large and fixed in size. • Web pages are small and variable • varies according to the user’s browser, monitor. Page rendering (availability) • Printed pages are presented as entities, and their entire contents. • Web pages elements are often slowly. • Dozens of seconds may be consumed waiting for a page to completely appear. Page layout • The format of printed page is precise keeping. The user focused on it. • The format of web page is estimated less designing principles and features users technologies. Page resolution • The intent of print characters is fast useful as we can read the document • The purpose of screen character is not useful and is rendered slowly.
- 23. CONCEPT Printed pages Web pages User focus • The printed pages provides well furnished complete information • The web page provide separate information in pieces to the users. Page navigation • Navigating printed materials is as simple as page turning • Navigating the Web requires innumerable decisions concerning Interactivity • Design allows the users to move their eyes over fixed content • Web page design permits the users to use their hands for scrolling, pointing, etc., Page independence • The pages are dependent on one another. • independent
- 24. THE MERGING OF GRAPHICAL BUSINESS SYSTEMS AND THE WEB Characteristics Intranet internet Users • The users of intranets, being organization employees • Internet sites are used by customers Tasks • An intranet is used for an organization’s everyday activities • The Internet is mainly used to find information. Type of information • An intranet will contain detailed information needed for functioning • The Internet will usually present more stable information Amount of information • an intranet site will be much larger an organization’s Internet site. • an internet site will be much larger than organization’s Intranet site.
- 25. 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.
- 26. 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 Revealed structure Consistency Appropriate effect or emotional impact A match with the medium
- 27. GENERAL PRINCIPLES OF USER INTERFACE DESIGN Pleasing appearance Understanding Compatibility Clearness Control (control is the ability of the system to reply to the actions of the users). Configurability (settings). Exactness( the system should possess the quality of determining simple and exact procedure for fulfilling its task). Uniformity. Versatility Efficiency Awareness of concept Recovery Transparent Quick reaction Easiness