+ All Categories
Home > Documents > UID UNIT 1

UID UNIT 1

Date post: 21-Jul-2016
Category:
Upload: jgjeslin
View: 61 times
Download: 3 times
Share this document with a friend
Description:
UID UNIT 1
39
USER INTERFACE DESIGN
Transcript
Page 1: UID UNIT 1

USER INTERFACE DESIGN

Page 2: UID UNIT 1

The interface is the part of the computer systemwith which the user interacts in order to use the

system and achieve his or her goal.

Page 3: UID UNIT 1

KEY DEFINITION :The user interface defines how the system will interact with external entities.

- The system interfaces define how systems exchange information with other systems

USER INTERFACE : It is the part of a computer and its s/w that people can see, hear, feel and talk to.

-The goals of UID are simple, to make working with a computer easy, productive and enjoyable.

Page 4: UID UNIT 1

IMPORTANCE OF USER INTERFACE :1. Proper interface design will provide a mix of well designed input and output

mechanisms that’s satisfy user needs capabilities and limitations in the most effective way possible.

2. The best interface is one that permits the user to focus on the information and tasks at hand not the mechanism used to present the information and perform the task.

3. Attention to user interface has increased considerably.4. People no longer accepts products with complicated procedures and

incomprehensible screens that mes up their lives and put their work on risks.5. A variety of new display and interaction techniques wrapped into a package

called GUI.6. All GUI PLATFORMS PROVIDES STYLE GUIDES TO ASSIST PRODUCT DESIGN.7. World wide web is everyday life of possible..8. More than 50% OF PROGRAM CODE IS NOW DEVOTED FOR UI.

Page 5: UID UNIT 1

The user interface has two components input and output.

-input is how a person communicates his or her needs or desires to the computer. Some common input component are keyboard, mouse,trackball, one’s finger (for touch sensitiive screens) and one’s voice.

- Output is how the computer conveys the result of its computations and requirements to the user. Some common output mechanism is display screen.

Page 6: UID UNIT 1

Understanding the User Interface:• Physical aspects of the user interface– Devices touched by user, manuals, documentation,

and forms• Perceptual aspects of the user interface– Everything else user sees, hears, or touches such

as screen objects, menus, and buttons• Conceptual aspects of the user interface– What user knows about system and logical

function of system

Page 7: UID UNIT 1

IMPORTANCE OF GOOD DESIGN :• It is the window to view the capabilities of the system• Critical tasks are presented.

BENEFITS OF GOOD DESIGN :• Usability• Productivity• Training cost time reduced• Customer satisfaction• Economic benefits

Page 8: UID UNIT 1

• HUMAN COMPUTER INTERFACE : - Focus on interaction between user and computer

called human-computer interaction (HCI).- It is the study, planning and design of how people and

computer work together.• -A human and a computer communicates.• A human usually has 5 senses:– Sight,– Hearing,– Touch,– Taste,– Smell,

• A computer hasn’t any senses as such, it is machinery, with electrons running around in and out of component devices.

Page 9: UID UNIT 1

COMP MATCH• A good interface match would include as many

senses as possible.• Computer input and output is basically seeing

what we enter and what is displayed.• Sound can be added to some programs, either

by giving instructions by voice, or listening to a commentary / music.

• Touch can be in the form of using the mouse, a joystick, or a drawing tablet.

Page 10: UID UNIT 1

• HCI DESIGNER MUST CONSIDER A VARIETY OF FOLLOWING FACTORS

1. What people want and expect.2. What physical limitations and people posses.3. How their perceptual and information processing system

works.4. What people find enjoyable and attractive.

History of Human computer interface:- The lowest and most common level in HCI is movements and

gestures.- Movements and gestures are language independent , that is

they permit the people who do not speak the same language to communicate with one another.

Page 11: UID UNIT 1

- The next higher level , in terms of universality and complexity is spoken language.

- Most people can speak one language, some two or more.- A spoken language is very efficient mode of communication if both

the parties to the communication understand it.- At the third and highest level of most complexity is written

language.while most people speak, not all can write.- In modern times we have typewritter, another step upward in

communication complexity, significantly fewer people type than write.

- Now – adays the human computer dialog reflected the computer’s preferences, consisting of one style or combination of styles using keyboard, commonly referred to as command language, question and answer, menu selection and function key selection.

- VOICE AND HANDWRITTING : Exists with varying degree of success, but still lack the universality and richness of typed input.

Page 12: UID UNIT 1

GUI(GRAPHICAL USER INTERFACE ): - In graphical interface, the primary interaction mechanism is a pointing device of some kind, an electronic equivalent to human hand.CHARACTERISTICS OF GRAPHICAL USER INTERFACE :-The user interaction is performed using a collection of elements refered as objects. They can be seen . heard., touched, or otherwise perceived.-Objects are always visible to user and are used to perform tasks. The operation performed on objects are called as action.- The operation include accessing and modifying objects by pointing selecting and manipulating.

Page 13: UID UNIT 1

Popularity of graphics : The field of graphic is popularised because of following reasons.i.Text –based screen- one dimensional.

Graphic screen :1.Screen mechanisms and commands are executed through menu bars and pull downs.2.It provides 3D look, floating windows.3.Information could appear and disappear as needed and in some cases it can be replaced by graphical images called icons.4.It reduces the memory load.5.It permits faster information transmission between computers.

Page 14: UID UNIT 1

6. Characterized as desktop with scatted notes, paper and files, trays .7. Also reffered as WIMP interface: Windows,icons, menus and pointers.A graphical system possess set of defining concepts. They are.1.Sophisticated visual presentation.2.Pick and Click interaction.3.Restricted set of Interface options.4. Visualization.5. object orientation.6.Use of Recognition memory.7. Concurrent Performance of functions.

Page 15: UID UNIT 1

1. Sophisticated visual presentation : - Visual presentation is the visual aspects of the interface. It is what people seen on the

screen,- The sophistication of a graphical system permits the following.1. Displaying lines, including drawing and icon.2. Displaying variety of character fonts, including different sizes and styles.3. Display 16 million or more color on the screen.4. Displays animation, presentation and photographs, and motion video.

PICK AND CLICK INTERACTION : - In some application an action is to be performed must first be identified and then the

action is performed. This interaction is known as pick and click interaction.- The primary mechanism for performing this pick and click mechanism is most often

the mouse and its button.- The user moves a mouse pointer to relevant element(pick) and the action is signaled

(click).- The eye, hand and mind seem to work smoothly and effeciently together.- The secondary mechanism for performing these selection actions is keyboard.

Page 16: UID UNIT 1

RESTRICTED SET OF INTERFACE OPTIONS :- The array of alternatives available to the user is what is to be presented on the

screen.- The concept used here is WYSIWYG(what you see is what you get).VISUALIZATION : - It is the cognitive process that allows people to understand information that is difficult

to perceive.- Visualization conveys most relevant information.- Maintain top to bottom and left to right flow through the screen for visualization. Object orientation :- A graphical syste m consists of objects and actions.Object : - objects are what people see on the screen.- A well designed system keeps users focussed on objects, not on how to carry out

actions.- A objects can be composed of subobjects. For eg : objects may be a document and

subobjects may be paragraph, sentence, word and letter.

Page 17: UID UNIT 1

Interface design classifies objects into three classes .1. Data object.2. Container object.3. Device objects.

1. Data object. - Data objects present information. This information is either text or graphics, normally

appears in the body of the screen.2. Container object : - An objects that hold other objects are known as container objects. They are used

to group two or more related objects for easy access and retrieval.There are three kinds of containers.1. Workplace – desktop, the storage area for all objects.2. Folders – general – purpose containers for long term storage of objects.3. Work area – temporary storage folders used for storing multiple objects currently

being worked on.3.Device objects :- Device objects represent physical objects in the vreal world such as printer or trash

baskets.

Page 18: UID UNIT 1

• Characteristics of objects are specified based on the relationship called as collection, constraints, composites, container and persistance.

1. Collection : - it is a simplest relationship – objects sharing a common concept.- A collection might be the result of a query or a multiple selection of objects.- Operation can be applied to a collection of objects.

2.Constraint : - it is a stronger object relationship. - changing an object in a set affects some other object in the set. - eg : A document organized into pages.

3. Container : - it ia an object in which other objects exist. Eg : text in a document. - A container often influenced the behavior of its content.4. Composite : - The Agggregation itself can be identified as an object. - eg : Range of cells organized into spread sheets.

Page 19: UID UNIT 1

Persistance : - Maintenance of a state once it is established. eg : window size , cursor location, scroll positions, etc.

Properties or Attributes of Objects : 1. Objects also have properties or attributes.2. Properties are unique characteristics of objects.3. Properties describes an object and can be changed by users.

Action : - People take actions on objects . They manipulate the objects by using commands or

modify the properties of the objects by using an property or attribute specification.- A series of actions may be performed on a selected objects. It also encourages

system learning through exploration.Action can be classified as follows.1. Commands2. Property/ Attribute Specication.

Page 20: UID UNIT 1

Commands : - Commands are action that manipulate objects .- It may be performed by direct manipulation by a command button.- they atre executed when selected.Eg: opening a document , closing a document.Property/ Attribute specification : - property/ Attribute specification actions establish or modify the attributes or

properties of objects.- When selected, they remain in effect until deselected.- Eg : particular font styles, color.Application versus object or data orientation : - Ealier text based systems are called application, whereas graphical systems are

purely object based. Because first an object is developed and then act upon them.- An application oriented approach takes action : object approach . For exampleAction – An application is opened (eg word processing) object – A file or other object is selected (eg . A menu)- An object oriented approach takes object : action approach. Foe egObject - An object is chosen ( a menu) action – An application is selected ( word processing ).

Page 21: UID UNIT 1

• VIEWS : - Views are used to represent the object information Four kinds of views :-1. Composed view - composed view present information and the object within an

object. 2. Content view – it list the component of objects.3. Setting view – It permits seeing and changing object properties.4. Help view - It provides all the help function .

Use recognition Memory : - Continuous Visisbility of objects and actions encourages use of a person’s more

powerful recognition memory.- Out of sight, out of mind” Problem is eliminated.

Concurrent performance of function : - Graphic system may do two or more things at one time .- Multiple programs may run simultaneously.

Page 22: UID UNIT 1

Direct manipulation:Direct manipulation describes he style of interaction for graphical systems.The direct manipulation has the following characteristics.1. The system is portrayed as an extension of real world.2. Continuous visibility of objects and actions.3. Actions are rapid and incremental with visible displays of results.4. Incremental actions are easily reversible.

1. The system is portrayed as an extension of real world.- The system replicates objects and actions in the working environment on the

screen.(Familiar).- A person has power to access and modify these objects.- The physical organization of the system, is unfamiliar to the user and hence

hidden from view.

Page 23: UID UNIT 1

• Continuous Visibility of objects:1. Objects are continuously visible(desktop)2. Remainders of action to be performed as obvious.3. Labelled buttons replaced complex commands and syntax.4. Cursor action and motion is physically obvious and natural.This concept is reffered as : 1. virtual reality(nelson 1980) 2. WYSIWYG(Hatfield 1981).Actions are rapid and incremental with visible display of results.:1. Tactile feedback is not possible yet, but immediate visual feedback of the

outcome of ctions are provided.2. Auditory feedback may also be provided.3. Evolution of tasks is continuous and effortless.Earlier Direct manipulation systems.1. Concept of direct manipulation actually preceded the first graphical

system.Eg : Earliest full screen text editors.

Page 24: UID UNIT 1

• Screen texts resembled paper on desk(real world extension).• Text reviewed in their entirely(continuous visibility).• Editing or reconstructing easily done.(rapid incremental action).• Actions should be reversed when necessary.

INDIRECT MANIPULATION:Direct manipulation of all screen objects and action may not feasible because of

the following. 1. Operation may be difficult to conceptualize in the graphical system.2. Limited graphics capability of the system.3. Space limitation for placing manipulation controls within window border.4. I it may be difficult for people tp learn and remember all the necessary

operations and actions.- For such cases indirect manipulation is provided.- Indirect manipulation substitutes words and text, such as pull-down or pop-

up menus, for symbols and substitutes typing for pointing.- Most window system use a combination of both. Eg : Menus icon, etc.

Page 25: UID UNIT 1

• ADVANTAGE AND DISADVANTAGHE OF GRAPHICAL SYSTEM.Advantage :1.Symbol recognized faster than text.2. Faster learning.3.Faster use and problem solving.4. Easier remembering.5.Provides Context6. Fewer errors7. Easily reversible actions.8.Consumes Less space.9. More naturals.10.More attractive.11. Low typing requirements.12. Immediate feedback.

Page 26: UID UNIT 1

• Diadvantage :1. Inefficient for touch typist.2. Inefficient for expert users.3. Not always familiar.4.Working domain is the present.5. Human comprehension limitations.6. Not always preferred style of interaction.7. Greater design complexity.8. Learning skill necessary.9. Product limitations.10. Fewer tested symbols exist11. Not always faster style of interaction.12. Hardware limitations.

Page 27: UID UNIT 1

CHARACTERISTICS OF WEB USER INTERFACE :Web user interface : It is a essential for navigation design and presentation of information..Its about content not the data. The goal is to build a hierachy of menus and

pages that feel natural, well structured, easy to use and truthful.- The web is the navigation environment, where people move between

pages of information, not an application environment.Web interface design is difficult for the following reasons.1. Its design language, HTML was never intened for screen design for general

population but for technical users.2. Browser navigation continued to back and forward and address bar.3. Information architecture and task flow are not easy to standartize.4. Availability of various types of multimedia and usage of it without clearly

defined purpose.

Page 28: UID UNIT 1

• Popularity of web: 1. It allow millions of people across the world can communicate, access

information, publish and be heared.2. It allows people to control the display and rendering of web pages.3. It provides security for the data transmitted using cookies concept.Characteristics of a web interface.A web interface design possess a number of characteristics , some familiar to GUI

interface.(Graphical user interface.)GUI VERSUS WEB PAGE DESIGN.:The characteristics specifies the similarities and dissimilarities existing between

the GUI and WEB design.1. Devices: - In GUI design, the characteristics of interface devices such as monitor and

modems are well defined.- In web page design no assumption about the user interface devices.2. User focus : - In GUI system are about well defined application date. - Web is about information and navigation.

Page 29: UID UNIT 1

• Data/information.-GUI data is created and used by known and trusted sources, people in the

user’s organization or reputed and rekliable companies and organization.- Web is full of unknown content typically placed there by others unknown to

the user.User Tasks: - GUI system user install, configure, personalize, start, use, and upgrade

programs.They open use and close data files.- Web user do things like linking sitesa, browsing or reading pages, filling out

forms, registering for services, participating in transaction, downloading and saving things.

Presentation element :- In GUI are windows, menus, control, toolbars, message and data. Many

element are transient, dynamically appearing and dis appearing based on current context of the interaction.

- In webbrowser and webpage. Within a page itself. However any combination of text, images, audio and video and animation may exist.

Page 30: UID UNIT 1

• Navigation : - In GUI user navigate through structed menus, lists, trees, dialog and

wizards.Navigation are standardized by toolkits and style guides.. GUI design to provide a strong sense of navigation.

- Web users control theirown navigation through througn links, books and typed Url’s.

Interaction :- GUI interaction consists of activities such as clicking menu choices,

presenting buttons,selecting choices from lists, keying data and cutting, copyingor pasting within the context established by an open window and as active program.

- The basic web interaction is the single click. The click can cause extreme change in context such as moving to another site or changing the displayed information within a site.

Response time :- Response time in GUI systems are stable ans insatantaneous.- in web, it is quite variable, depending on the trnsmission speeds, page

content, and so on.

Page 31: UID UNIT 1

• Task Efficiency : - GUI systems are targeted to a specific audience performing specific task. - In web , the task efficiency is limited by browser and network capabilities.

USER ASSISTANCE : - In GUI system , user assistance is an integral part. It can be accessed through

standard mechanisms. Documentation available in both online and offline.- In web system no similar help systems. A little bit information built into thec page.

Customer service support is provided.Consistency : - In GUI system design , major objectives exists within and across application. Aided

by platform toolkits and design guidelines.- In webpage design , sites tends to estabilish their own identity.Integration :- A primary goal of most GUI application is the seanless integration of all application

into the platform environment.- Toolkits and component are key elements in accomplishing this objective.- In Web design, apparent for some task functions within most websites.

Page 32: UID UNIT 1

PRINTED PAGES VERSUSWEB PAGES :1. Page size: - Printed pages are larger than web pages.- Printed pages are fixed in size, web pages are variable.- Printed pages have integrated and complete look, web pages are presented

in pieces whose dimension differs depending on the user’s technology(browser, monitor and so on.)

- The visual impact of printed pages is maintained in hard copy form. Web pages exists as snapshots of pages areas and some parts are never seen and require scrolling- visual impact degraded.

Design implication : top of a web page is most important and signals to users must always be provided that parts of a page lie below the surface.

2. Page rendering : - printed pages are presented as complete entities- their entire content

available for reading or review.- Web page rendered slowly, depending upon transmission line speeds and

page content.- if page download is slow, user may switch to a different site.- printed pages are superior to web pages.

Page 33: UID UNIT 1

3 . Page layout : - printed page layout is precise, web pages layout is an approximation-

affected by deficiencies in design tool kits and characteristics of users browser and hardware perticularly screen sizes.

-Design implication : undersytand the restrictions, and design for the most common user tools.

4. Page resolution : - print character resolution exceeds screen character resolution. - screen reading is slower than reading from document.Design implication : provide an easy way to print long web documents.5. User focus : - printed pages present entire information with clear size aqnd nature of

material.- Some printed pages may be read sequentially (a novel) and other partially

and some what sequentially(newspapers) and some other are skimmed in a systematic way.

- web pages are snapshots with few cues as to structure and sequence , length and depth.

Page 34: UID UNIT 1

Page navigation :- Printed page navigation is simple – page turning, a motor skill learned early

in life.- Substantial interaction between page israre, thr process being sequential.- Web navigation requires innumerable decision like. 1. What is at the end of of this link. 2. Where is it. 3. Will it address my need or solve problem.Design implication : provide overview of information organization schemes

and clear descriptions of where links lead.Interactivity : - printed page design involves letting the eyes traverse static information,

selectively looking at information and using spatial combinations to enhance page elements.

- Web design involves letting the hands move the information (scrolling, pointing expanding, clicking ) in conjunction with eyes.

Page 35: UID UNIT 1

• Page independence : - inn web page any page in a site can almost be accessed from anywhere

else, pages must be made freestanding.- Printed pages, being sequential, organized and providing a clear sense of

place, are not considered independent.

Page 36: UID UNIT 1

• Principles of user interface design: - An interface is an extension of a person. This means the system and the

software must reflect a person’s capabilities and respond to his or her specific needs.

- It should be useful, accomplishing some business objectives faster and more efficiently than the previously used method.

GENERAL PRINCIPLES :- The design goals in creating the user interface is described below. They are

the fundamentals to the design and implementation of all effective interfaces., including GUI AND WEB INTERFACE.

1. Aesthetically pleasing :- Visually pleasing composition, is attractive to the eye.- It provides meaningful contrast between screen elements.- Visual appeal is provided by creating groupings, alingning screen elements,

providing threedimensional representation and using color and graphics effectively.

- good design combines power, functionality, and simplicity with pleasing apperance.

Page 37: UID UNIT 1

• Clarity : - The interface must be clear in visual apperance , concept and wordings.- Visual elements should be understandable, relating to the users real world

concepts and functions.Compatibility: - Design must be appropriate and compatible with the needs of the client or

user. Effective design starts with understanding the user’s needs and adopting the

user’s point of view.Comprehensibility: - A system should be understandable, flowing in a comprehensible and

meaningful order.- A strong clues to the operation of objects should be presented.Consistency : - consistency is important because it can reduce requirements for human

learning. - A system should look, act and operate the same throughout.- Similar components have similar look, similar users and operate similarly.

Page 38: UID UNIT 1

• Control : - control is feeling in charge, feeling that the system is responding to your

actions- User must control the interaction.Directness : - tasks should be permormed directly. - Tasks are performed by directly selecting an object, then selecting an action

to be performed, and then seeing the action being performed.Efficiency :- Minimize eye and hand movements and other controls actions.- navigation paths should be as possible as short.Familiarity : - Apply familiar concepts and languages that is familiar to the user.Forgiveness : - tolerate and forgive common and unavoidable humans errors.- Prevent errors from occuring whenever possible.- Whenever a error occurs, provide a constructive message and undo actions.

Page 39: UID UNIT 1

Recovery : - A system should permit commands or actions to be reversed by using an

undo command.- The goal is stability. Recovery should be obvious, automatic, and easy and

natural to perform.Responsiveness : - A user request must be responded quickly. - provide immediate acknowledge for all user actions such as visual, textual

and auditory.Transparency :- Never force the user to think all the technical details of the system.- permit the user to focus on the task or job.


Recommended