Page 1 :
CHAPTER 1, , Foundations of HMI, The Human: Human interaction with computers, History of User Interface Designing, I/O channels,, Hardware, Software and Operating environments, The Psychopathology of everyday Things, Psychology, of everyday actions, Reasoning and problem solving.The computer: Devices, Memory, processing and, networks. Interaction: Models, frameworks, Ergonomics, styles, elements, interactivity, Paradigms., , 1.1The Human : Human Interaction with Computers, Q. Explain HMI with example., , 1.1.1Human Machine Interface,  A Human Machine Interface is amalgamation of hardware and software components which enable all users to, provide inputs which gets converted into signals by these machines. Further, these machine generated signals, are processed to achieve desirable outputs to user.,  This is a technology describes how human can interacts with various digital system designed by developer.,  Example,, o, , Gesture Recognition, , o, , Biometric Recognition, , o, , Voice Recognition, , o, , Augmented Reality, , 1.Human,  The user interface in any control system or machine and controller (or User).,  It provides a graphics-based visualization of monitoring system.,  Human is moving towards a world of automation using advanced machines with more features and, programming.,  Automatic washing machine can be good example of HMI for washing clothes, such washing machines, supports lot of new features, like maintaining temperature, soak, dry, etc. It also supports some model, functions to set the wash time, amount of soap required Delay start and so on.

Page 2 :
Fig. 1.1.1: Human, ,  We are in a competitive, itive world, and adding new functionalities is the only approach for a business to stay, successful.,  A machine interface is technique in which the machine is presented to the human.,  Every Human has a different level of intelligence and experience.,  Human Machine Interaction is area of research explains how to present the functionality of a system to the, user in easy way.,  Study on human psychology is required to produce a good interface. It is required to consider Human, behaviours, needs, likes,, es, dislikes, experience, etc., 2.Machine,  A machine can be defined as anything that can reduce human effort.,  Machines will reduce labour and human involvement in activity.,  Machines can show output using some display device e.g. thermometer will use seven segment display or, LCD for better output. It will help to show readings and present it to user. Display function will use for, getting feedback from the machine when his action is registered., , Fig. 1.1.2 : Machines, ,  The advanced machines, achines are having computing power for best output and functionality. Also it will give a, system which is easier to use.,  The new generation machines are Intelligent Machines, with artificial intelligence and having advanced, input methods. We are making machines to adapt human behaviour by continuous learning.

Page 3 :
 The machine can be more efficient by supporting augmented reality applications; this concept is the, Like in RAONE, opposite of virtual reality. Augmented reality makes virtual world into a user’s reality. Li, , movie where one of the game characters come into our real world., , Fig. 1.1.3 : Human Machine Interaction - Model, , 3.Interaction,  The user can instruct machine using its interface or device controller.,  The machine will display result using some display device., 4.Example,  The operation of blood sugar glucometer can be explained with HMI example,,  The user will give blood sample to instrument for checking.,  As Glucometer gets sample in contact it will starts processing and user interface will show value of blood, sugar which, h is very simple for end user to record as given interface is very simple to understand., , Fig. 1.1.4 : Example of HMI, , 1.2History of User Interface Designing, 1.Introduction

Page 4 :
 The Human machine interface also has a generation of developmental history.,  As we already know machine can be defined as anything that can reduce manual human effort., 2.Generation 1 : Machines are designed to minimize Physical Labour work,  The machine like hand-axe, axe which converts lateral force into a transverse split. The handle of axe is used as, interface to this tool and made up of long wooden piece which are made of smooth surface for better, grip or hold.,  These machines are majorly designed for, fo reducing human efforts., , Fig. 1.2.1 : hand Axe, , 3.Generation 2 : Machines with output (Display),  The thermometer can measure temperature, temperature and shows reading of its interface made up of mercury in, glass tube.,  Such machine can show user some kind of readings about temperature, heat, wind etc.,  The presentation of data to the user can be called as its interface of that machine.,  The measurements of shape and size, Colour, scale, etc., made very simple with help of the machine., , Fig. 1.2.2 : Thermometer, , 4.Generation 3 : Machines with Output and Feedback,  The feedback will acknowledges user from machine on his action.,  The home appliances like fan, lights, television, washing machine, air-conditioner, air conditioner etc., come in this, category.

Page 5 :
 For example, if user presses on button to turn on fan will be started, user can feel air flow. Means user can, immediately see the effect of his action., , Fig. 1.2.3 : AC user interface, , 5.Generation 4 : Machines with Computing Ability,  The innovation of computers has great impact of interfaces as earlier days there were textual output and, then graphical output with lot of computing power., , Fig. 1.2.4 : Windows 10 User interface, ,  Early day’s people using various commands to process data now just a click can do the rest., Welcome to FreeDOS, CuteMouse v1.9.1 alpha, ha 1 [FreeDOS], Installed at PS/2 port, C:\>ver, FreeCOM version 0.82 pl 3 XMS_Swap [Dec 10 2003 06:49:21], C:\>dir, Volume in drive C is FREEDOS_C95, Volume Serial Number is 0E4F-19EB, 19EB, Directory of C:\, FDOS<DIR>08-26-046:23p, AUTOEXECBAT43508-26-04, , 6:24p

Page 6 :
BOOTSECTBIN51208-26-04, , 6:23p, , COMMANDCOM93,96308-26-04, , 6:24p, , CONFIGSYS80108-26-046:24p, FDOSBOOTBIN51208-26-04, , 6:24p, , KERNELSYS45,81508-17-04, , 9:19p, , 6 file(s)142,038 bytes, 1 dir(s)1,064,517,632 bytes free, C:\>, Fig. 1.2.5 : CUI based DOS interface, , 6.Generation 5 : Intelligent Machines,  The technological advancements will make many task simple using new technologies.,  The artificial intelligence methods proving that old input methods are insufficient.,  The Air conditioner now days automatically senses the temperature to switch on and off the compressor, or cooling., , Fig. 1.2.6 : Intelligent AC interface, , 7.Future : Augmented Reality,  This concept is the totally different from virtual reality.,  The computer gaming will give idea about artificial city, a farm or a house and car.,  In augmented reality, the virtual world is brought into a user’s reality., fi movies where a human is able to enter into a video game or one of the game characters come,  The sci-fi, , into our real world.,  Such machine will be future of current interfaces., interface

Page 7 :
Fig. 1.2.7 : Augmented Reality, , 1.3Input Output Channels, Q. Explain HMI with example., , This is a technology describes how human can interacts with various digital system designed by developer., , 1.3.1Vision,  The Human vision is most complicated process but it’s a primary information gathering system for any person.,  The human vision workss in two steps first is to receive the visual information from world and after that, processing the visual data.,  The human eye works like any light equipment (Camera) and need light for any image formation.,  The human eye has two types of photo recep, receptors,,  Cones (Colour sensitivity) and Rods (brightness sensitivity),  Visual perception depending on distance and depth of object, as the angle increases the object size will looks, like greater., , Fig. 1.3.1

Page 8 :
1.3.2Hearing,  The hearing capability is also very important as like visual imaging, we should not underestimate power of, information received through our ears.,  Auditory system can collect lot of useful information from surroundings which can be used for processing data., , 1.3.3Touch,  Touch capability is also very important even for visually impaired person, this system can gather information as, secondary source of information.,  Touching can collect gather environmental information from surroundings which can be used for interpreting, data., , 1.3.4Movements,  The last and important thing of human body is action of motor cells which recognises movements in, environment.,  Movement time is depending on many parameters like age, fitness etc,  Speed and accuracy is of primary importance for designing interactive system., , 1.4Hardware, Software and Operating Environments, 1. Hardware,  Hardware is essential part of any computing device.,  Hardware is very important to implement any kind of special machine interface.,  Hardware is used to work with software and interface.,  Hardware is generally selected as per user’s requirements and can top it up with any software application.

Page 9 :
Fig. 1.4.1 : Hardware, ,  Many hardware options are available to user, so it’s possible to select from range of available hardware, options., 2.Software,  Software will help developer to design user interface for machines., er interface for underlying hardware platform.,  There are many software’s available for developing us, user, ,  Developer will take a call for use of computer languages, like C, C++, Java and so on.,  There are many tools used to create an audio/visual experience for the user, such as Visual Basic, HTML5,, PHP, etc.

Page 10 :
Fig. 1.4.2 : Software, , 3.Operating Environment,  The operating environment is supporting framework for hardware, hardware software devices.,  The design created by developer should be user-level, user level acceptable and user suggestion should be considered, while development.,  The operational environment should avoid all compatibility problems to hardware software., , Fig. 1.4.3 : Operating Environment, ,  Rules or Guidelines for user interface design,,  Friends, family members, colleagues are not representatives of target users.,  User requirements should be understood by a team and not by an individual.,  It must minimize user complications.,  The hardware and software should be managed properly., 4.User Interface,  User Interface can be computer, mobile screen or any other display device.

Page 11 :
Fig. 1.4.4 : User Interface, ,  User interface can be in the form of hard copies, computer screen operation environments, remote, controls, or just the appearance of machine itself.,  A good UI is easy to understand functionality of the system to user.,  All user requirements should be done in advance before actually designing the interface., 5.HMI System to record Biometric Attendance system,  All offices are having biometric attendance, attendance system the hardware software requirements for same is as, given below,,  Hardware, o Sensor, o Computer, o LAN Connection,  Software, o Biometric Driver, o File system,  Operation Environment, o Sensor Device, o Server system, , 1.5The, The Psychopathology of Everyday Things, Q. Write a short note on Psychopathology of everyday things., ,  The word psychopathology can be explained as given below :, o, , Psycho means mind status., , o, , Pathos means disease., , o, , Logy means study., ,  So, by above explanations, Psychopathology means branch of study deals with mental illness.,  Psychopathology in HMI indicates pattern of design in our everyday things and procedures.

Page 12 :
 E.g. Door opening is pull or Push is generally indicated by design of door handle., , Fig. 1.5.1 : door indicators, , 1.5.1 Complexity of Modern Devices, Q. Describe Complexity of modern devices with example., , Every company will launch product with something different than similar category of product., Sometimes, the designer just wants to make a difference in existing products to give new appearance., , Technology is progressing at a great speed so designs should be, b that competent., The design should equip with more features, and easy to understand., A designer must ensure that all features are presented in a simple and comprehensible way to all end user., , Many people face problem in using simple day, day-to day devices like TV, Ac etc., Features provided by any advanced device may be useless. If all user are not able to understand all its operations., , All software and technologies keep upgrading., , 1.5.2Human - Centered Design, Q.Describe Human - centered design with example., , Human-centered, centered designing will consider all aspects of targeted user as per there interests, behaviors, skill set,, experience, challenges, etc., and makes the products that is simple for users to operate., The human characteristics are studied for product design, design and user satisfaction is main goal of such system design., Every user will have some different experience with real world system and their intelligence will use this, , experience to learn new features., The creativity of the designer is to find this knowledge, knowledge of the user and use it to design best possible interface., Example, when you look at a locker, you know that it can be opened and you can place things inside it to level of, safety., The image of locker can be used to inform user that it can be opened., , 1.5.3 Norman’s Fundamental Aspects about Conceptual Model, A.Conceptual Model, Conceptual model is the mental image; a human has built about any digital system., The locker in above example will contain something valuable is a mental image.

Page 13 :
A good designer should be able to use such mental models of the user and also will be able to create mental, models for the user., For example, Microsoft Word has become the mental model of a text editor., Conceptual models define a good design as interaction between the designer and the user., The design must be able to explain the entire product to the user by just appearance., B.Aspects to design conceptual Model, 1.Feedback, Every action gives some feedback to user., A feedback is very important for user., If you turn on fan and if it does not starts, it may give feedback that it is not working. And user assumes the, system is faulty., So, User action has to be acknowledged., 2.Constrains,  This aspect will prevent the user from making mistakes.,  It will not allow user to perform some action if it is going to be wrong operation., For example,, You want your user enter a date in specified format only. If any problem, it will not accept that date., It eliminates all possibilities of syntax mismatches., 3.Affordances, The digital system will convey the rules by leaving some visual clues., To make sure that the appropriate actions are only designed for some users then it will not be visible to other, users., Just by looking at interface, its functionality must be clear to the user., Example, by looking at the handles of door, we should know how the door will open., 4.Power of observation, The observation of others can solve many of our problems. It is like learning from mistakes done by others., If someone makes some mistake of good thing with system we can memories it for own improvement of our, own., As designers, one should consider all such aspects of the user., , 1.5.4 Norman’s Fundamental Principles of Interaction, Design Principles, 1.Visibility – Can is see it ?

Page 14 :
2.Feedback – What is it doing now ?, 3.constraints – How do I use it ?, 4.Mapping – Where am I and where can I go ?, 5.Affordance – Why can’t I do that ?, 6.Consistency – I think I have seen this before ?, 1.Visibility, The more visible functions of user interface are the more likely users will be able to use effectively., Whereas, functions which are not clearly visible will have very less chances of user utilization., 2.Feedback, Feedback is mainly for acknowledging the user action., This will send back as reply to action performed by user and allowing the person to continue with the activity., The feedback can be of any type like audio, signal or verbal or combination of them., 3.Constraints, This concept will give you new ways of restricting the kind of user interaction., It will not allow user to perform some illegal operation., It will not allow user to perform some action if it is going to be wrong operation., 4.Mapping, An affordance always exists with action capabilities of a particular actor., It forms relationship between controls and their effects in the world., AI artifacts of system need some kind of mapping between controls and effects., A good mapping between control and effect is the up and down arrows used on a computer keyboard., 5.Consistency, The product interface must have similar elements and designing all over system for achieving similar tasks., A consistent interface is one which follows all rules., Example,, A consistent operation is using the same input action is to highlight graphical object at the interface like click, of mouse., 6.Affordance, Affordance is attributing of object that allows people to know how to use it., A mouse button invites pushing by the way it is physically constrained in its plastic box., afford means "to give a clue", When the affordances of a physical object are easy then it will be easy to interact with it.

Page 15 :
Norman’s 7 Principles, , 1.Use both knowledge in the world and knowledge in brain., 2.Simplify the structure of activity., 3.Make things visible: bridge the gulfs of Execution and Evaluation., 4. Get the right mappings., 5.Exploit the power of constraints, both natural and artificial., 6.Design for error., 7.When all else fails, standardize., , 1.6 Psychology of Everyday Actions - Reasoning and Problem Solving, Q. Write a short note on Psychology of everyday actions - How people do things?, , The common behavior of human for poor interface design is to assume responsible to himself., Generally, for any new product user will follow the trial and error method for understanding the use of system., If trial and error method fail, then user will ask someone more experienced user to help., The user manual can be the other way of operating system without any help from anyone., If still problem persists, we may call the customer care., The new user always tries to understand the system or product, because human’s tendency is to believe it is, difficult to understand new product., Humans have a tendency to compare between multiple products in market performing same task or activity., Product designer must take help of nature of humans to develop new high-end systems with complex designs., The user must be able to understand product without any external help., If we can use product without any external help then only, we can say that the product is good., , 1.6.1Seven Stages of Action, 1. Introduction, As per Norman human actions will have two basic aspects,, Execution, Evaluation, The task is performed by Human is refereed as action (execution)., Once action is performed that must be analyze for improvement (evaluation)., 2. Stages of Action, Stage 1 : Setting goal of action, Execution, a.Stage 2 : Set up Plan of Action

Page 16 :
b.Stage 3 : Specifying an action to be performed, c.Stage 4 : Performing the action, Evaluation, a.Stage 5 : Identify the state of external world, b.Stage 6 : Interpreting the state of external world, c.Stage 7 : Evaluation of Action output by comparison with other actions, 3.Examples, You are bored by daily routine, so you go for outing., Now, Look at action of human brain,, Stag 1 : Setting goal of action : To break daily routine and boredom life., A.Execution :, a.Stage 2 : Set up Plan of Action : To plan a picnic at countryside away from city., b.Stage 3 : Specifying an action to be performed,  To check available date, locations etc.,  Friends or family availability., c.Stage 4 : Performing the action : Book Tickets and hotel bookings and travel to destination., B.Evaluation :, a.Stage 5 : Identify the state of external world.,  Look attractions and enjoy the atmosphere to fullest., b.Stage 6 : Interpreting the state of external world.,  After enjoying picnic spot compare with other possible attraction available for enjoying picnic., c.Stage 7 : Evaluation of Action output by comparison with other actions.,  Check that is it good plan to go for picnic or some better option was available., 4.Overview, The procedures of above seven stages look very easy but needs to be done systematically., Human always feels a gap between what they wanted to do, and what they have done., Above concept is termed as Gulfs of Execution and Evaluation., In above example, you wanted to change routine and that is done by planning a picnic., The Most of the time human may not be able to complete their targeted goals., All such features of human behavior can be used while interface designing., If we actually know end users behavior for specific action to be performed, we can decide the flow for, process.

Page 17 :
A.Gulf of Execution, The actual distance between available option and the user’s goal of action is the gulf of execution., We need to detect system provides actions corresponds, corresponds to the intentions of the person., B.Gulf of Evaluation,  The amount of effort has to put to understand the options available on the system and determine., 5.Effectiveness of Model, These seven stages of action are very effective in deciding, decid the user’s perspective., There are chances of failure if users miss out some end user expectations while performing some actions. Like, hotel or transport facility was not as expected by end user., Some points of failures,, (a)Fail at due to it tries to represent, present some different action., (b)User interface may not be that user friendly., (c)User actions may not be clear., (d)User may end up receive some non-satisfactory, non, outcomes., , 1.6.2Three Levels of Processing, 1.Introduction,  The processing can be done in three steps, design is nothing but the effort to develop best user interface, to communicate with machines.,  End user can share experiences by designing models and convert them into prototype for development.,  Three levels att which we process information available, the seven stages of our actions can be understood, in simple way.,  Every stage will perform action on a particular level.,  Norman has given overview of such mapping., , Fig. 1.6.1 : Processing Levels, , 2.Level 1 : Visceral Level,  This is initial level of processing available information.

Page 18 :
 In this step of processing human reacts to audio visual actions and other aspects of a product.,  The external look and touch feel of the product will dominate the user at this visceral level.,  A human need to decide things are good, bad, safe or dangerous.,  Human brain is trained to like or dislike things based on their own thinking level., E.g., o Boys like blue, o Girls like pink, o Kids like Red or dark colors, o Indians like spicy food, etc.,  Visceral design often refers to creating best user interface and graphical appearance.,  The developer can have creative skills of a visual and graphical designs, it creates lot of impact to users.,  Once this level is approved, we proceed towards actual work.,  If this level is not designed properly, other levels will need more effort for product acceptance.,  The user of a product is one of the most critical to decide about product., 3.Level 2 : Behavioral Level,  The emotional brain is important while making decision.,  The more detailed level of product description than visceral.,  It is very difficult to work with complex systems, than working on simple environments.,  Semantics and usability practices are addressed in this level.,  It decides the behavior and feedback given by the product.,  For example, a dialog box with an error message inform user about next step of action.,  ON and OFF mark on an electrical switch can simply explain its operation., 4.Level 3 : Reflective Level,  The final level of processing is analysis and reflection of all experiences is done in reflective level.,  All experience and its meaning is stored in human brain.,  This level mainly deal with analyzing past user experiences and future requirements to plan for goal.,  Then based user preferences, we choose a methods to execute plan., 5.Three Level overview,  Human emotions can affect decisions. These levels can be affected by human being.,  At the visceral level we perform the method.,  Physical aspects of performing the task can be considered.,  Human senses of vision, hearing, smell, touch and taste are used to perceive human actions.

Page 19 :
1.7 The Computer, 1.7.1Devices,  A typical Von Neumann machine consists of five functionally independent units :, (i)Input unit(ii)Output unit, (iii)Arithmetic and logic units(iv)Control unit, (v)Memory unit,  The basic function performed by a computer is the execution of a program.,  A program is a set of machine instructions. An instruction is a form of control code, which supplies the, information about an operation and the data on which the operation is to be performed.,  Fig. 1.7.1 shows the basic structure of a conventional Von Neumann machine., , Fig. 1.7.1 : Structure of a computer, , Input Unit, put units, which read the data. The most common input device,  Computers accept coded information through in, input, , is the keyboard.,  Whenever a key is pressed, the corresponding letter or digit is translated into its corresponding code and sent to, the processor. There are many other kinds of input devices like :, 1.Mouse, 2. Joysticks, 3. Floppy drive, 4.CD-drive, 5. Modem, Output Unit

Page 20 :
Output unit sends processed result to outside world. The familiar example of such device is a printer. There, are many other kinds of output devices like :, 1.Video terminal, 2. Floppy drive, 3.CD-drive, 4. Modem, Arithmetic and Logic Unit (ALU), Arithmetic or logic operations like multiplication, addition, division are performed by ALU. Operands are, brought into the ALU, where the necessary operation is performed., Control Unit,  Operations of ALU, memory and input and output units are coordinated and controlled by the control unit.,  Control unit sends control signals to other units. Data transfer between processor and memory are controlled by, the control unit through timing signals., Memory Unit,  Main memory is needed in a computer to store instructions and the data at the time of program execution. It, was pointed out by Von Neumann that the same memory can be used for storing data and instruction.,  The memory unit stores all information in a group of memory cells as binary digits.,  Each memory location has a unique address and can be addressed independently.,  The contents of the desired memory locations are provided to the central processing unit by referring to the, address of the memory location.,  The amount of information, which can be transferred between CPU and memory, depends on the size of the, BUS connecting the two., Key Features of a Von Neumann Machine,  The Von Neumann machine uses stored program concept. The program and data are stored in the same, memory unit. The computers prior to this idea used to store programs and data in separate memories., Entering and modifying these programs were very difficult as they were entered manually.,  Each location of the memory can be addressed independently.,  Execution of instruction in Von Neumann machine is carried out in a sequential fashion (unless explicitly altered, by the program itself) from one instruction to the next., , 1.7.2Processing \ Basic Structure of the CPU,  The design of CPU in modern form was proposed by John Von Neumann and his colleagues for the IAS, computer.,  The IAS computer had a minimal number of registers along with the essential circuits.

Page 21 :
 This computer had a small set of instruction and an instruction was allowed to contain only one operand, address., Fig. 1.7.2 gives the structure of IAS computer. The structure shown in Fig. 1.7.2 consists of the following, registers., (i), , Accumulator (AC), , Itt interacts with ALU and stores the input or output result., (i), , Data Register (DR), , It acts as buffer storage between the main memory and the CPU., (i), , Program Counter (PC), , It contains the address of the next instruction to be executed., (i), , Instruction Register (IR), , Holds the current instruction., , Fig. 1.7.2 : Basic structure of the CPU, , (i), , Memory Address Register (MAR), , It provides address of memory location from where data is to be retrieved or to which data is to be stored., , 1.7.3Memory, remember the, Although computer has limited memory as compared to human memory but it has potential to remem, multiple things altogether. Based on capability of human memory cognition model is applied by practices to, , improve performance of human memory.

Page 22 :
Fig. 1.7.3 : A model of structure of the memory, , 1.7.3(A) Sensory Memory, This act as buffers for stimuli received, received through the senses. A sensory memory exists for each sensory channel, (i)Isonic memory for visual stimuli, (ii)Echoic memory for aural stimuli, (iii)Haptic memory for touch., Example, (i)Iconic memory, Moving a finger in front of the eye. Can you see it in, in more than one place at once? This indicates a persistence of the, image after the stimulus has been removed., (ii)Echoic Memory,  This is evidenced by our ability to ascertain the direction from which a sound originates.,  Have you ever had someone ask you a question when you are reading ? You ask them to repeat the, question, only to realize that you know what was asked after all., , 1.7.3(B) Short-term Memory, This act as a ‘Scratch-Pad’, Pad’ for temporary recall of information. It is used, used to store information which is only, required fleetingly., Example :,  Calculate the multiplication 35  6 in your head. The chances are that you will have done this calculation in, stages, perhaps 5  6 and then 3  6 and added results or you may have used the fact that 6 = 2  3 and, calculate 2  35 = 70 followed by 3  70 = 210. To perform calculations such as this we need to store the, intermediate stages for sue later.,  Short term memory also has a limited capacity., capacity. There are two basic methods for measuring capacity. The first, involves determines the length of a sequence which can be remembered in order. The second allows items to, be freely recalled in any order.

Page 23 :
Fig. 1.7.4 : Model of short-term memory, , 1.7.3(C) Long-Term Memory,  If short-term, term memory is our working memory or ‘Scratch-Pad’,, ‘Scratch Pad’, long term memory is our main resource. Here we, store factual information experiential knowledge, procedural rules of behaviour-in, behaviour in fact, everything that we, ‘know’.,  Long term memory is intended for the long-term, long term storage of information. Informations placed there from, working memory through rehearsal.,  There are two types, (i)Episodic Memory, This memory represents our memory of events and experiences in a serial form., (ii)Semantic memory, This is a structured record of facts, concepts and skills that we have acquired., , 1.7.4Network \ Interconnection Structures,  To form a working computer, individual components must be connected in an organized way. There are many, ways of doing it.,  The collection of paths connecting components is called the interconnection structure.,  The design of this structure depends on the exchanges, exchanges that must be made between modules. When a word of, data is transferred between modules, all its bits are transferred in parallel.,  These bits are transferred simultaneously over different wires.,  A group of wires that connects several devices is called a Bus. In addition to the wires that carry data, the, computer must have some lines for addressing and control purposes., , 1.7.4(A) Single-Bus Structure

Page 24 :
Fig. 1.7.5 : A single bus structure, ,  The simplest way to interconnect functional units of a computer is to use a single system run. System run, consists of :, (i)Data run, (ii)Address run, (iii)Control run,  This run is time shared. Because the run can be used for only one transfer at a time, only two units can, communicate at any given instant., (i)Data bus,  The data lines provide a path for moving data between system modules. These lines, collectively are called, the, ‘Data run’., directional, so that the data can be sent or received by the processor.,  The data lines are bi-directional,, , (ii)Address bus,  Every device connected to run has an address. A memory unit is given a block of addresses, depending on, number of words in it. For example, if the CPU wishes to read a word of data from memory, it puts the, address of the desired word on the address lines.,  The address, ss lines are always unidirectional i.e. the address is transmitted by the processor to different, modules., (iii)Control bus,  The control lines are used to control the various units like memory and I/O, Processor uses control signals, to control various modules., odules.,  Control signals transmit both command and timing information. Control signals specify operation to be, performed. Typical control signals include :, , The operation of the bus

Page 25 :
 If one module, ule wishes to send data to another, it must do the followings :, (1)Obtain control of run., (2)Transfer data via the run.,  Similarly, if one module wishes to request data from another module, it must do the followings :, (1)Obtain control of run., (2)Makes a request to the other module over the appropriate control lines and address lines., (3)It must then wait for the requested module to send data., , 1.7.4(B) Multiple-Bus Hierarchies,  If a greater number of devices are connected to the run, performance will suffer due to following reasons :,  In general, the more devices attached to the run, the greater will be the propagation delay.,  The run may become a bottleneck as the aggregate, aggregate data transfer demand approaches the capacity of the run., This problem can be countered to some extent by increasing the data rate that the run can carry and by using, wider runes.,  Most computer systems enjoy the use of multiple buses. These buses are arranged in a hierarchy., , Fig. 1.7.6 : A multiple bus structure, ,  The principle use of the system run is high-speed, high speed data transfer between the CPU and memory.,  Most I/O devices are slower than memory and they are put on the local run.,  These devices are connected to the system run via interface circuit called I/O, I/O controller. A single I/O controller, can interface many I/O devices to the system run., , 1.7.4(C) Other Interconnection Structures,  A system’s interconnection structure can be defined by a graph whose nodes denote components such as, computers, memories, I/O controller etc.,  Edges between these components are known as communication path or buses.,  A path designed to link only two devices is said to be dedicated.

Page 26 :
, , A path used to transfer information between different sets of devices at different times is said to be shared, , or multiplexed., , Fig. 1.7.7 : System of four units connected by six, six dedicated buses, ,  A conceptually simple interconnection method is shown in the Fig. 1.7.7. There is a dedicated run between all, pairs of components that need to communicate., ,  All n devices can send or receive data simultaneously. There will not be any delay due to busy connection., link., Systems with dedicated lines are more reliable as a link failure effects only two units connected to that lin, ,  These units may still be able to communicate via other units. For example, if the run linking U1 and U4 in Fig., 1.7.7 fails, U1 and U4 can possibly communicate via U2 or U3. The main drawback of dedicated buses is their, high cost.,  Between the extremes of a set of dedicated buses and a single shared run lie various interconnection structures, that involve some sharing of links. Some of these structures are shown in the Fig. 1.7.8., , (a) Crossbar connection of two groups of units, , (b) Linear network(c) Mesh network

Page 27 :
(d) Ring network(e) Star network, , (f) Hyper cube network(g) A complete network, net, Fig. 1.7.8, , 1.8 Interaction, 1.8.1The Interaction Model Framework, The interaction framework is an approach to provide more descriptive interaction with the help of four, , components such as : the system, the user, the input and the output., The system language, nguage is preferably known with its core language, i.e. relevant computational attributes of domain, of system state. A user’s language is referred as task language, i.e. psychological attributes with user task, , relevance., An interface is formed by the comb, combination of Input and Output components., , Fig. 1.8.1 : A Generalized Framework of Interaction

Page 28 :
Fig. 1.8.2 : Translation between Components, Compone, , With the help of addressing both performance and articulation a dialog design and interface design can be, , accomplished at the input. Similarly, presentation and observation of the output., Interaction frameworks help to judge an overall usability of a framework., framework. An analysis made for any framework is, mostly with the help of frequently used functionality. For an example a text editor analysis task will suggest a few, text editor with good reviews, but some user may agree and some may not. As each text editor, edito has its some own, specialty and as per users’ requirement varies a set of users found it more useful than other and users view will be, , changing as per change in requirements., tion and Screen design represent, A social and organizational context has its own effect on interaction. Presenta, Presentation, Output. The ACM SIGCHI Curriculum Development Group presents a framework for HCI as mentioned below :, , Fig. 1.8.3 : ACM SIGCHI Curriculum Development Group presents a framework, , 1.8.2Ergonomics, It means designed for efficiency and comfort in the working environment., ces have focused almost exclusively on user’s perceptual, cognitive and motor skills, rather than, It studies of interfaces, , on affectively social or attitudinal factors, although work in the later fields., The challenge for interface designers is to design systems whose interaction with users will induce the latter to, form mental models similar to the system’s conceptual model., 1.Learning, 2.Developing knowledge, 3.Unavoidable errors, 4.Needs analysis

Page 29 :
5.Prototyping, , 1.8.3Interaction Styles, Interaction can be seen as a dialog between the computer and the user. The choice of interface style can have, a profound effect on the nature of this dialog. There are number of common interface style includes,, , 1.8.3(A) Command Line Interface, This was the first interactive dialog style to be commonly used and in spite of the availability of menu driven, interfaces, it is still widely used., It provides a means of expressing instructions to the computer directly, using function keys, single characters,, abbreviations or whole word commands., , 1.8.3(B) Menus, In a menu - driven interface, the set of options available to the user is displayed on the screen and selected, using the mouse or numeric or alphabetic keys. Since the options are visible they are less demanding of the, user relying on recognition rather than recall., , 1.8.3(C) Natural Language, Perhaps the most attractive means of communicating with computers, at least at first glance, is by natural, language., Users, unable to remember a command or lost in a hierarchy of menus, may long for the computer that is able to, understand instructions expressed in everyday words., Natural language understanding, both of speech and written i/p., , 1.8.3(D) Question / Answer and Query Dialog, Question and answer dialog is simple mechanism for providing i/p to an application in a specific domain. The user, is asked a series of questions and so is led through the interaction step by step., Example : Web questionnaires, Query language used to construct queries to retrieve information from a database. They use natural - language, style phrases, but in fact require specific syntax, as well as knowledge of the database structure., , 1.8.3(E) Form - Fills and Spreadsheets, Form - filling interfaces are used primarily for data entry but can also be useful in data retrieval applications., The user is presented with display resembling a paper form, with slots to fill in., Spreadsheets are sophisticated variation of form filling. The spreadsheet comprises a grid of cells, each of Which, can contain a value or a formula. The formula can involve the values of other cells., , 1.8.3(F) The WIMP Interface, WIMP stands for windows, icons, menus and pointers. (Some times windows, icon, mice and pull down menus)., This is the default interface style for the majority of interactive computer systems in use today, especially in the PC, and desktop work station area.

Page 30 :
Example, o, , Microsoft Windows for IBM PC, , o, , Mac OS, , o, , Xwindows for UNIX., , 1.8.3(G) Point and Click Interface, You may point at a word in some text and when you click you see a definition of the word., This interface style is obviously closely related to the WIMP style. It clearly overlaps in the use of buttons, but may, also include other WIMP elements., , 1.8.3(H) Three - dimensional Interface, There is increasing use of 3D effects in user interfaces. The most obvious example is virtual reality, but VR is only, part of a range of 3D techniques available to the interface designer., The simplest technique is where ordinary WIMP elements, buttons, scroll bars etc. are given 3D appearance using, shading, giving the appearance being sculpted out of stone., , 1.8.4 Elements, (i)Input Devices, (ii)Output Devices, (iii)Interaction devices, , 1.8.5Interactivity, It is basically about the behaviour realization of WIMP interface. All WIMP has similar elements in its structure like, windows, icon, menus, pointers, dialog box, palette, toolbar, button etc., it is about behaviours of such elements, between environments as well as within a single environment., Interactivity is about the changes in behaviour of same elements in different operating systems., For example Menu are dropdown and unless anything is selected or cancelled menu item list remains pulled down, in Microsoft Windows while user needs to follow only a depressed mouse key for drop down items of menu in Mac, OS., Similarly for buttons, toolbar, modal dialog boxes and other elements can also be found with changes in behaviour, within single environment or between environments., Interactivity founds critical at the time of dealing with the errors, mistakes and slips. If users can identify errors, it, will be helpful to correct it., , 1.8.6Paradigms of Interactions

Page 31 :
Fig. 1.8.4 : Paradigms of Interactions, , Successful systems are marked as systems with more usability, such systems are considered as a paradigms for the, , upcoming development in the field of interaction., Paradigms are in direct proportional relation with technological, technological advances and application along with creativity to, enhance the interaction., Techniques and design are the major area of improvement in the design. Few of paradigms of interaction are, , mentioned below:, I.Time Sharing, It is multiprogramming and mult, multii tasking with the help of a user or group of users. A table with the records of, IBM, Apple, Microsoft, Amiga etc. on year wise and technology basis are mentioned below :

Page 32 :
II.Video Display Units, ,  Display screen shows a series of pictures to make an movie likewise effect in the past (specially for cartoon, entertainment shows) and journey now goes beyond 3D image and movie screening, even some small, screen sharing 4D and likewise., likewi, Video Display units journey on technology basis started from a Cathod Ray Tube (CRT) screen, Thin Film, Transistor (TFT) screen, Liquid Crystal Display(LCD)screen, Light Emitting Diode (LED) screen., Earlier days video display units has problems like imbalanced light luminance, brightness and reflection, eye, irritations etc. which are almost covered in recent technology with a good quality of display. Few video, display unit works on touch sensation in the inte, interaction., III.Programming Toolkits

Page 33 :
Douglas Engelbert looks technology as human problem solving capability. He thinks computers can be used to, teach humans., Engelbert’s team gives many human problem solving approach based tools developed at Augmentation, Research Center like word processing and the mouse., Engelbart’s dedicated research team at the Stanford Research Institute in the 1960s worked towards, achieving the manifesto set forth in an article published in 1963 :, By ‘augmenting man’s intellect’ we mean increasing the capability of a man to approach a complex, problem situation, gain comprehension to suit his particular needs, and to derive solutions to problems., We refer to a way of life in an integrated domain where hunches, cut-and-try, intangibles, and the, human ‘feel for the situation’ usefully coexist with powerful concepts, streamlined terminology and, notation, sophisticated methods, and high-powered electronic aids., IV.Personal Computing, , Seymour Papert and his colleagues (few from MIT) designed a computer controlled mechanical turtle, used to, design geometry shapes like circle and square, it was designed for Childs., Further Alan Kay took inspiration from Engelber and Papert both and he realized the power of computational, machine. In early 1970s gives a dedicated system for a single users i.e. personal computers. In mid 1970s a, successfully handled personal computer was named as Dynabook by him., V.Window System and WIMP Interface, , Window is common platform for interaction with many application. Multiple windows can be operated by a, single user. Windows, Icon, Menu, Pointers helps to improves interaction among the system and user., In 1981, The Xerox Corporation introduced the 8010 star information system and it was the first system used, as commercial interaction device based on WIMP interface., VI.The Metaphor, ,  Papert used metaphor while LOGO language was in development process which is used to teach children., Metaphor are useful to knowledge transfer(KT) i.e. to teach new technology concepts or transferring, technical details to someone who qualifies the perquisite for the same.,  The metaphor helps to improve and increases the familiarity between he user and system i.e. computer, application., VII.Direct Manipulation, ,  Features of direct manipulation are listed below :, (i)Direct manipulation gives visibility to interested objects, (ii)It provides rapid feedback to all actions on the basis of incremental approach while engaged with the interface, (iii)Reversibility of all actions, so that users are encouraged to explore without severe penalties, (iv)Correct actions as per syntactic manner, it helps to improve legal operation activities

Page 34 :
(v)An action is replaced for complex command languages.,  Model World Metaphor gives in detailed description for directness with psychological justification, it is, proposed by Ed Hutchins, Jim Hollan and Donald Norman. According to the collection of papers of, Norman and Draper for user cantered design they write :, o, , In a system built on the model-world metaphor, the interface is itself a world where the user can, , act, and which changes state in response to user actions., o, , The world of interest is explicitly represented and there is no intermediary between user and, , world. Appropriate use of the model-world metaphor can create the sensation in the user of acting, upon the objects of the task domain themselves. We call this aspect of directness direct engagement.,  Few other paradigms of interaction are mentioned below :, o Language Versus Action, o Hypertext, o Multi-Modality, o Computer Supported Cooperative Work, o The World Wide Web, o Agent-Based Interface, o Ubiquitous Computing,  Sensor-Based and Context-Aware Interaction., Review Questions, Q. 1Explain HMI with example., Q. 2Give example of HMI hardware with example., Q. 3Describe the software and hardware requirements of HMI with example., Q. 4Describe HMI runtime environment with examples., Q. 5Write a short note on :, a. Psychopathology of everyday things, b. Psychology of everyday actions - How people do things, Q. 6Explain seven stages of action with each phase in details., Q. 7Explain three levels of processing with each phase in details., Q. 8 Describe Human - centered design with example.

Page 35 :
CHAPTER 2, , Design and Software Process, Mistakes performed while designing a computer system, importance of human characteristics human, consideration, Human interaction speeds, Interactive Design basics, process, scenarios, navigation, Iteration and prototyping. HMI in software, process: software life cycle, usability engineering, Prototyping in practice, design rationale.Design rules:, principles, standards, guidelines, rules. Recognize the goals, Mistakes performed while designing a computer system, Goal directed design process, Evaluation Techniques: Universal Design, , 2.1Importance of Human Characteristics in Design, 1.Perception, a.Perception is awareness and understanding of the surrounding elements and objects through the physical, sensation of our various senses., b.We tend to match objects or sensations perceived with the past knowledge or experience., c.The goal in design is to utilize perceptual capabilities so GUI can be arranged in the most meaningful way., d. Characteristics, i.Proximity : Our visual system can see objects if they are near each other., ii.Similarity : Our visual system can recognise objects sharing common properties., iii.Matching patterns : similarity by same size and shape., iv.Closure : If something is not quiet close to itself like circle and triangle, v.Unity : Object which forms closed shape can be seen as single group., vi.Balance : it is required for stabilising viewing environment., vii.Context : two same objects are look exactly same or very different based on surrounding conditions and viewing, angles., viii.Signals versus noise : Our sensing affected by external environment., 2.Memory and Mental Models,  Memory is not the stable of human characteristics, as the people may have long term memory and shortterm memory. Short term memory tends to forget everything after some interval of time.,  A mental model is a simple representation of a person's understanding of some issue or scenario.

Page 36 :
 The difference between implementation, implementation (system) model, a mental (conceptual) model and a designer’s, model is depends on users understanding of various system functions and operations., , Fig. 2.1.1: Implementation of Mental Model, ,  Generally, implementation models are complicated and represent designers view towards certain product,  Product Consumer will simplify the inner details of a product. Then designers are mainly to bridge the gap, between above two models.,  Models are divided as mechanical-age, mechanical, and information-age models., age model and looks for “analog” way of accomplishing tasks,  Many designers are still using mechanical, mechanical-age, apps, easier and more efficient functioning. It became important to use online calendars and note-taking, note, , which can keep track of my schedule.,  Designing with such a mechanical-age, mechanical age mindset may be used because of their level of comforts with use to, methods.,  To achieve, chieve better results information-age, information age can be used to state of art in order to achieve innovation in, product development., 3.Movement control,  Once data is received and understood, we must take appropriate action based on input received.,  In some cases,, the response is some movement or action.,  In computer systems, movements include such activities as pressing key on keyboard or moving the screen, pointer., 4.Learning,  A design can minimize human learning time and it will accelerate human performance., performanc,  People will use system to learn huge amounts of information., 5.Skill, Screen design must allow developer to improve skilful performance., 6.Sensory Storage (SM), processing of information,  Sensory storage is the buffer memory storage in systemin which the automatic processin, , collected from our senses takes place.

Page 37 :
 Sensory memory is an unconscious process, large, attentive to the environment, quick to detect changes, and constantly being replaced by newly gathered stimuli received from various input sources., , Fig. 2.1.2 : Sensory Memory, ,  It acts like radar system and constantly scan the environment for things that are, are important to pass on to, higher memory for further processing.,  Repeated and excessive stimulation on system may cause fatigue to the sensory storage mechanism, making it less attentive and unable to distinguish what is important (called habituation)., , Fig. 2.1.3, ,  SM is considered to be outside of cognitive control and is as an alternative to an automatic response., Typesof Sensory Memory, , Fig. 2.1.4

Page 38 :
Iconic memory,  It is a visual sensory memory which involves a very brief idea about image.,  This type of sensory memory lasts for abouthalf second, Echoic memory,  Auditory sensory memory which involves a very brief memory of sound (e.g. echo).,  This type of sensory memory can last for up tothree to four seconds., Haptic memory,  It is tactile memory which involves the very brief memory of a touch.,  This type of sensory memory lasts for aroundtwo seconds, 7.Information Processing, a.Once data is received it needs to be analysed with help of information processing system. There are two levels of, information processing higher level and lower level., b.Highest level is identified by consciousness and working memory which is slow, limited and sequential which is, used for reading and understanding., o, , Lower level is identified without conscious effort and processes familiar information rapidly and, , the limit of its capacity is unknown., o, , Visual distinctiveness of a screen is strong contributor. If a screen is jammed with information, , and cluttered it loses its uniqueness and causes more time consuming reading process., Mental Models,  A mental model is simply an internal representation of a person’s current understanding of something.,  A person already familiar with one computer system will bring to another system a mental model containing, specific visual and usage expectations.,  If the new system complies with already established models it will be much easier to learn and use., , 2.2Human consideration, There are several human considerations for design human computer interface,, User's Knowledge and Experience,  The knowledge possessed by a person, and the experiences undergone, shape the design of the interface in, many ways.,  The following kinds of knowledge and experiences should be identified., o, , Computer Literacy : Highly technical or experienced, moderate computer experience, or none, , o, , System Experience : High, moderate, or low knowledge of a particular system and its methods of, , interaction, o, , Application Experience : High, moderate, or low knowledge of similar systems

Page 39 :
2.3Human interaction speeds,  The speed at which people can perform using various communication methods has been studied by a number of, researchers.,  Reading: The average adult, reading English prose in the United States, has a reading speed in the order of 250300 words per minute. Proof reading text on paper has been found to occur at about 200 words per minute,, on a computer monitor, about 180 words per minute.,  One technique that has dramatically increased reading speeds is called Rapid Serial Visual Presentation, or RSVP., In this technique single words are presented one at a time in the center of a screen.,  New words continually replace old words at a rate set by the reader. For a sample of people whose paper, document reading speed was 342 words per minute. (With a speed range of 143 to 540 words per minute.), Single words were presented on a screen in sets at a speed sequentially varying ranging from 600 to 1,600, words per minute. After each set a comprehension test was administered., READING,  Prose text - 250-300 words per minute.,  Proof reading text on paper - 200 words per minute.,  Proof reading text on a monitor - 180 words per minute., LISTENING,  Speaking to a computer : 150 - 160 words per minute.,  After recognition corrections : 105 words per minute., KEYING, 1. Typewriter,  Fast typist : 150 words per minute and higher,  Average typist : 60-70 words per minute, 2.Computer,  Transcription : 33 words per minute,  Composition : 19 words per minute, 3.Two finger typists,  Memorized text : 37 words per minute,  Copying text : 27 words per minute, 4.Hand printing,  Memorized text : 31 words per minute.,  Copying text : 22 words per minute.

Page 40 :
2.4Interaction Design Basics, 2.4.1Introduction,  Interactive design deals with interaction between multiple users mind sets and knowledge sets to achieve, common goal. Heterogeneous mind set and technical skill sets come together to solve common problem, based on HCI and produces standardized solution using HCI patterns.,  Outcome of interactive design may be solution to complicated problem in a easy way after detailed design, phase.,  Interactive design mainly emphasizes module-wise, stage-wise, and phase-wise iterations of designing, structures.,  Also, it focuses on interpretation and analysis of problem in a correct way because correct input only results in, correct output.,  Technical, technological, analytical, and logical collaboration is required for the successful designing of HCI, system.,  Design thinking act as base for interactive design.,  Software architecture is defined on the principle of interactive design that involves inter relation between sub, systems, modules, components, hardware elements, software elements, stakeholders etc., , 2.4.2Process,  Interactive design primarily focus on phase-wise sequential processes. These processes are determined on the, basis of input, operations, and expected outcome. Structuring of design processes is applicable to present, system architecture and workflow of Human Machine Interface (HMI) system. And, system architecture acts, as inter relationship between multiple components and modules to achieve common goal of system.,  Two elements i.e. human and machine plays significant role in design process. In this context, interaction, between human and machine requires knowledge about similarities and differences among them along with, interface which allows actual communication among them.,  Specifically, HMI emphasizes interaction technologies and design thinking. Only designing of HMI system is not, sufficient instead interaction between human and machine is essential. It also deals with selection of, appropriate algorithmic approach, programming style, programming language and understanding of problem, statement by programmer as well. Further, technical support in the form of documentation, manuals related, to system is also required. Various ways of using available tools and design pattern to solve the problem in, different ways is the basic requirement of interactive design.,  Because correct input gives correct output from HMI system after appropriate processing at each phase. Design, process helps to produce framework required for representing detailed design and implementation of HMI, system. Also, it is dependent on exact perception of problem and understading of user. Because, design can’t, be perfect initially and most of the interactive designs may include few redesigning cycles of system, architecture and its evaluation after some iterations.

Page 41 :
 HMI system, ystem is designed and developmented using correct way of finding solution. The major attention on, designing plays important role in successful completion of implementation and evaluation phase of overall, system. Lcunas in basic design may carry forward in further phases which may lead to severe flaws in end, product. So basic designing is the crucial part of HMI from software development point of view.,  The process of designing is depected in Fig. 2.4.1 Process of designing consists of six pipelined and logical phases, namely; selection of problem statement, analysis and refinement of problem statement, basic designing of, problem, detiled designing of problem, construction of system architecture as prototype of system, and, workflow along with algorithmic aapproach used in system.,  These phases are iteratively done till getting best suitable nd optimized solution of given problem. Best suitable, solution is employed for interaction between human and machine e.g. Character Recognition System, Hand, Gesture Recognition, ecognition System, Fingerprint Recognition, etc. General approach in the form of basic design of, HMI sytsem is shown in Fig. 2.4.2, , Fig. 2.4.1 : Process of Designing HMI Sy, System, , Fig. 2.4.2 : Basic Designing of HMI System, , 2.4.3Scenarios,  The basic designing and detailed is from the logical and technical point of view is used to generate the, sequential flow of HMI system similar to stories is called scenrios of HMI system. Scenarios deals with, structuring of designing nd redesigning, constructing and reconstructing to cope up with expected outcome in, a simpler and flexible way.,  These are based on design thinking of user. E.g. scenario related to audio and video processing as shown in Fig., 2.4.3 by brain using visual perception that helps to remember movies as it is. Also scenario for Hand Gesture, Recognition System, stem is discussed subsequentely.

Page 42 :
Fig. 2.4.3 : Scenario based on Audio Video Processing by Human Brain, 2.4.3(A)Scenario for Hand Gesture Recognition, erful means of communication among humans and sign language is the most natural and,  Hand gestures are powerful, , expres-sive, sive way of communication for dump and deaf people. In this work, real-time, real time hand gesture system is, proposed. Ex-perimental, perimental setup of the system uses fixed position low-cost, lo cost web camera with 10 mega pixel, resolution mounted on the top of monitor of computer which captures snapshot using Red Green Blue [RGB], color space from fixed distance.,  This work is divided into four stages such as image preprocessing, region extraction,, extraction, feature extraction, feature, matching. First stage converts captured RGB image into binary image using gray threshold method with noise, removed using me-dian, dian filter [medfilt2] and Guassian filter, followed by morphological operations. Second, ing blob and crop is applied for getting region of interest and then “Sobel” edge, stage extracts hand region us-ing, , detection is applied on extracted region. Third stage produces feature vector as centroid and area of edge,, which will be compared with feature vectors of a training dataset of gestures using Euclidian distance in the, fourth stage.,  Least Euclidian distance gives recognition of perfect matching gesture for display of ASL alphabet, meaningful, words using file handling. This paper includes ex, ex-periments for 26 static hand gestures related to A-Z, A, alphabets. Training dataset consists of 100 samples of each ASL symbol in different lightning conditions,, different sizes and shapes of hand., d gestures in real time and can achieve a,  This gesture recognition system can reliably recognize single-hand, single, , 90.19% recognition rate in complex background with a “minimum-possible, “minimum possible constraints” approach. The, Scenario for Hand Gesture Recognition System (HGRS) for ASL Recognition is depicted in Fig. 2.4.4

Page 43 :
Fig. 2.4.4 : Scenario for Hand Gesture Recognition System for ASL Recognition, ,  Scenarios are based on perception, ion and perspective of user. Brain capabilities and imagination is translated in the, form of designs. Scenarios includes various vital factors such as multiple communication with users and, clients, validations of task models, expressiveness of users and interactive, interactive approach, end users of system,, solution of real-time, time system, and socio organizational issues., , 2.4.4Navigation,  Only basic designing, detailed designing and interactive designing are not sufficient solution of socio technical, d using navigation. i.e. Actual user interface that allows navigation of HMI system is needed, problems in needed, , as navigation design of HGRS is shown in Fig. 2.4.5., , Fig. 2.4.5 : Navigation Design of Hand Gesture Recognition System for Dump and Deaf People

Page 44 :
 Navigation consists of interaction of user and machine via various levels used in user interface such as selection, of correct widgets and operations, logical collection of user controls on form or window, understanding of, application used in user interface, environment used interact with machine.,  Navigation plays important role in conveying about application, designing, and structuring of User interface, required in human and macnine interaction either local or global structuring way.Local structure is based on, common goal of HMI system while global structure involves heirarchical structure of overall system long with, , functional limitations e.g. HMI system consists of hierarchical structure as presented in Fig. 2.4.6., , Fig. 2.4.6 : HMI System based on Heirarchical Structure, , 2.4.5Iteration and Prototyping,  Users may work either in problem domain or solution domain based on the context. Simple or complicated, designs are based on simplicity or complexity of problem respectively. Visualization of correct problem along, , with best suitable solution is possible after iterations and prototyping only.,  Iteration involves redesign and reconfiguration of basic designing and detailed designing uptil the fulfillment of, requirement of user in HMI system. Repetation of task, task by heterogeneous users produces concrete and final, version of designing because heterogeous and collaborative mind sets are helpful in finding right solution. In, this context, idea generated by stimulus may leads to superficial view of design, but after gathering multiple, requirements and multiple interactions with client may produce exactness in design. Iteration may be possible, with paper work and with the use of designing tools. Iteration is also applicable at evalution phase as well., ,  Protyping iss the rough structured and logical model of iterative design. It may appear on paper as a result of, design thinking of basic design or detailed design. Collaborative thinking of team of users produces skeletl and, rototype. This prototype must be understandable and adaptable, schematic representation of HMI system as p, prototype., to the modifications because the prototype is further translated in the form of actual working model of HMI, system. It includes quatitative and qualitative measure of system along with correct evaluation, requires similar, e, time HMI systems in less time., to software architecture approach. Prototype helps the users to produce real, real-time, Because prototype is the visualization of problem in the form of basic level construction on paper., ototyping acts as best designing practices to achieve goal using preplanned approach of,  Iteration and prototyping, , software development process. Iteration and Prototyping is depicted in Fig. 2.4.7., 2.4.7 Moreover, iteration and, protype is shown in Fig. 2.4.8 used for Sign Language recogni, recognition.

Page 45 :
Fig. 2.4.7 : Iteration and Protyping of HMI System, , Fig. 2.4.8 : Iteration and Protyping of HMI System for Sign Language Recognition, , 2.5HMI in Software Process, 2.5.1Introduction,  Diversified software processes are involved in the development of HMI system. Basic design, interactive design,, and universal designs play crucial role in the development of Software for HMI System., sture Recognition System (HGRS) are depicted in Fig. 2.5.1 that comprises six,  E.g. Software processes of Hand Ge, Gesture, , phases namely; Image Capturing, Image Pre-processing,, Pre processing, Image Processing, Image Post processing, Feature, Matching, and Pattern Recognition.

Page 46 :
Fig. 2.5.1 : Software Process of Hand Gesture Recognition as HMI System, , 2.5.2Software Life Cycle,  Software life cycle of HMI system consists of phase-wise, phase, pipelined processes. These processes are determined, on the basis of input, operations, and expected outcome. Structuring of software processes is applicable to, present system architecture and workflow of Human Machine Interface (HMI) system. And, system, ter relationship between multiple components and modules to achieve common goal of, architecture acts as inter, , system. Two elements i.e. human and machine plays significant role in design process.,  HMI is a specified domain for the development and designing of multifold application., applicatio Here, computers acts as, machine that takes input and produces output based on processing applied. So, the science and technology, which allows computer to behave like human is called as Human Machine Interface (HMI).,  HMI is originated from the main research, research field of computer vision, pattern recognition, and object detection. As,, HMI comprises human element and computer element with their own capabilities and aspects. Human, onomics, emotions, etc. And,, aspects of HMI system includes various attributes such as human psychology, erg, ergonomics,, , computer element deals with its capability of storage, scalability, memory, computation ability etc. HMI is the, greatest of these, more efficient, easy, topmost research area applicable for the purpose of Hand Gesture, Recognition,, on, Character Recognition, Emotion Recognition, Face Recognition, etc.,  Therefore, HMI system comprises modified software life cycle mainly conenred with software development, processes required for pattern recognition as depicted in Fig. 2.5.2. It includes, includes two Inputs as Running images, and Training Dataset images, Image Processing on input, Basic Designing using System Architecture, Detailed, Designing using Workflow, Algorithmeic Approach, coding and User Interface, Evaluation, and Output in the, form of recognized pattern.

Page 47 :
Fig. 2.5.2 : Software Life Cycle used in HMI System Development, ,  Various ways of using available tools and design pattern to solve the problem in different ways is the basic, requirement of interactive design. Because correct input gives correct output from HMI system after, for representing, appropriate processing at each phase. Design process helps to produce framework required, requi, , detailed design and implementation of HMI system. Also, it is dependent on exact perception of problem and, understading of user., redesigning cycles,  Because, design can’t be perfect initially and most of the interactive designs may include few redesi, , of system architecture and its evaluation after some iterations.HMI system is developed using software life, cycle applied on input running image of hand sign and training dataset images as represented in Fig. 2.5.3, with output as recognized pattern, ttern as English alphabets and words., , Fig. 2.5.3 : Sign Language Recognizer using Software Life Cycle used in HMI System Development, , 2.5.3Usability Engineering,  Software engineering, ngineering deals with software development processes related to software life cycle. However,, usability engineering is based on basic designing and detailed designing, software life cycle processes along, sified criteria to determine the success of working model, with working model as well. It provides use of diver, diversified, , and its uasability in various fields.,  The major decisions taken initially in basic design phase and feedback analysis at each and every phase is, ediction analysis during Iteration and Prototyping afftect a lot, important in usability engineering. Similarly, pr, prediction, , on usability. Moreover, Decision Support System plays significant role to convey exact track of working style in, usability engineering. E.g. Usability engineering required for Devnagari Sign Language recognition is shown in, Fig. 2.5.4 developed using computer vision and socio technical approach along with usability engineering for, education and communication purpose for speech and hearing impaired children.

Page 48 :
Fig. 2.5.4 : Devnagari Sign Language Recognizer using Usability Engineering, , 2.5.4Protyping in Practice,  Traditionally, software engineering involves first and foremost pre requisite phase related to requirement, gathering. However, it is really difficult to know 100 % requirement the beginning of software life cycle. So, the

Page 49 :
necessityy of basic designing, detailed designing and interactive designing and more specifically iteration and, appropriate prototyping.,  So that correctness in the basic model is performed to know about at least basic requirement of system. And,, the modified and detailed architectural design phase i.e. prototyping deals with the generation of some more, , requirements., requirement. Also, it,  Essentially, best practice of prototyping is used to know about incomplete and actual requirem, resolves whatever may be the problems arrived during design processes. Multiple versions of prototypes, , applies usability characteristics of the HMI system., away, 2.Incremental, 3.Evolutionary., Prototyping,  There exists three prototyping approaches namely; 1. Throw, Throw-away,, 3., used in HMI system is represented in Fig. 2.5.5 (a) based on basic architectural design, Fig. 2.5.5 (b) using, Detailed architectural Design, and Fig. 2.5.5 (c) actual prototypical model leads to actual requirements., , Fig. 2.5.5 (a) : Prototyping based on Basic Architectural Design

Page 50 :
Fig. 2.5.5 (b) : Prototyping based on Detailed Architectural Design, , Fig. 2.5.5 (c) : Actual Prototypical Model leads to Actual Requirements., , 2.5.5Design Rational

Page 51 :
 Design rationale aquires crucial part in software development process because it offers documentation of, decisions taken at each and every phase of HMI system along with context responsible for taking those, decisions. As the basic design and detailed design stages require to take multiple decisions as well as, counterside of decision.,  Design actually deals with decision-making task and selection of appropriate decisions along with designing, techniques required for validation of design. Keeping track of decision is also the major tasks while design, rationale and decision finalization were made with justification.,  Any software development process starts with decisions made starting from selection of problem statement till, the final product that reaches till the end users. Decisions may be affected based on the customers, requirement or end users demands and needs. On the other hand, it is difficult to justify each and every, decision at different levels involved in HMI system development. Design rational acts as documentation and, information used to convey to each stakeholder included in architectural business cycle. It describes about, multifold angles of HMI system such as structural, functional, and behavioural views.,  So, it is related to both performing design rational as well as entire documentation. There exists various, advantages of using design rationale such as communication among stakeholders, determination of context, and working style, and efforts required in team.,  In HMI, effective working model can not possible using single decisions, so alternative decisions are required to, have best solution. Moreover, optimal decision leads to solution that is optimized. In this context, designers, capability of finding alternative decisions is the requirement of design rational. In project development, team, and overall decisions lead to the success of final product. Best and optimal decision ultimately results in best, HMI system with usability and applicability., , 2.6Design,  Design is a process of achieving goal within some constraints.,  Goal is nothing but purpose of designing a system, whereas constraints are method used for designing or raw, material used for design process or product., , 2.6.1Design Rules,  The best design can be created by understanding system requirements, the good design ensures that the system, will be more useful and effective.,  Golden rules of design are,, o, , Understand inputs (raw material used for making system), , o, , Understand Computer – Tools, Specifications, Limitations etc., , o, , Understand Users (People using system), ,  There are many issues needs to be handled while designing system as per the user’s requirement by, understanding their behaviour.,  All types of system can become more effective by using new way of designing user interface with the help of, graphics, animations and other multimedia components.

Page 52 :
Fig. 2.6.1 : Phases of System Design, ,  Good system design is essential for any system like hardware, software and other supporting system.,  A digital system is any interface of mobile phone, tablet or other devices software including web interface.,  Good Interface must understand requirements of System Design,, o, , System Users, , o, , User Expectations, , o, , Data Requirements, , o, , System Flow or Working, , o, , System Goals, , o, , Functions, , o, , Exceptional Cases, , o, , Multitasking required, , o, , Types of input models, , Fig. 2.6.2 : Designing Goals, , 2.6.2Mistakes Performed while Designing a Computer System,  System designers may think for various input operations using mouse click or drag and drop file objects, camera, to click photo etc.,  Designers may have assumed that end user knows everything about system and understand all necessary, actions required to use the system.,  Developers may deliver only targeted task of system and may overlook some important functions required for, system design that may cause the failure and usability of the system.

Page 53 :
 General errors by developer’s assumptions about end user,, o, , End user knows everything, , o, , Understanding about complex operations, , o, , End users behaviour may be ignored., ,  If system designer overlooks end user’s skill and knowledge, it leads to poor system design.,  The operator error may be considered as an human error in operating the system., , 2.6.3Design Principles, Standards, Guidelines, Recognize the Goals, 1.Software Design Process,  Goal directed design takes user expectations into consideration while developing system in various, development phases in order to improve acceptance of the system.,  Software systems are initiated by the project managers but, it will be enhanced by user requirements and, their expectations from system.,  The systems will be enhanced for quality improvement to avoid poor system design and to improve user, acceptance level.,  The development of system based on goal-oriented design; design provides a graphics-based visualization, of monitoring system., 2.Principals of design,  The machines are introduced for quick development of the products by less investment to earn huge, profits in market.,  The design phase was introduced in manufacturing industry for reducing future risk.,  System designs phase is deciding factor for success of the product.,  Factors for achieving success,, o, , Desirability : Identifying end users expectations, , o, , Viability : The product must check for usability and sustainability., , o, , Capability : The product meets new technology requirements., , 3.Recognising Goals,  In order to recognize goal directed design, developer should be clear with user goals for system to design, relevant system behaviour.,  User goals may be different than actual observed goals.,  End user may help to recognise user goals; we may forget to identify few user’s goals.,  All stockholders must identify all user goals collectively from user’s perspective.,  The prototype approach may help to identify the exact user goals.,  End users general goals,, o, , User-friendly interface

Page 54 :
o, , Easy Operations, , o, , Feasibility, , o, , User is able to enjoy the system operation., , 2.7Design Process, Q.What is design Process ?, , 2.7.1 Introduction,  To make user friendly user interface to user achieve user goals, it is necessary for developer to clearly, understand.,  This kind of user interface can be design by proper survey and research.,  Approach to identify user goals,, o, , Specific use the digital system, , o, , Technological systems required to design user interface, , o, , Information Resources Required, , o, , System Integration, ,  Designers should work like researchers to perform the user interface requirement survey.,  All software companies will carry out own market research to identify need of the various types of users and, also technically sound people.,  Goal directed design must be done in phases along with the market survey provides to meet the requirements, and goals of the end users., , 2.7.2Phases, There are number of phases mentioned below :, 1.Requirements Gathering, 2.Analysis, 3.Design, 4.Iteration and prototyping, 5.Deployment, 6.Support Phase, 1.Requirements Gathering,  This phase very important phase as it collects requirements.,  This phase mainly focuses on market survey, conducting user interviews and user generates actual user, information.,  The requirement phase will produce information about people involved product usage and exact, expectations from product.

Page 55 :
2.Analysis,  This phase will help to understand user requirements in details.,  Analysing potential application domains.,  Identifying the financial side of information gathering and dissemination.,  Performing preliminary cost-benefit analysis for cost.,  Find out data complexity.,  To set up priorities among multiple applications., 3.Iteration and prototyping,  This phase will present the prototype of actual product design and framework for the system behaviour. It, also proposes product interaction framework.,  It also explains colour schemes and visual style of user’s expectations.,  It helps to create story board at very high level of details., 4.Implementation Phase,  Every design iteration cannot fulfil without implementing all developmental challenges and technical, compatibility.,  Implementation completes after delivering the solution to intended receipient., 5.Support Phase,  Every development cannot fulfil all development challenge and technical compatibility.,  It is always required to carry out refinement and additional development to improve system continuously.,  This phase will perform UAT (User Acceptance Testing) to make sure that all developmental goals are, fulfilled.,  This phase also tries to meet all future requirements., , 2.8Goal Directed Design Process, Q.What is goal directed design Process ?, , 2.8.1Phases, There are number of phases mentioned below :, 1.Research Phase, 2.Modeling Phase, 3.Requirements Definition Phase, 4.Framework Phase, 5.Refinement Phase, 1.Research Phase

Page 56 :
 This phase will help to understand gap between user and developer.,  This phase mainly focuses on market survey, conducting user interviews and user observation.,  The research phase will generates actual user information., search will produce information about people actually involved product usage and exact,  The research, , expectations from product.,  The research phase will help to identify behaviour patterns of various users and modelling phase., 2.Modeling Phase,  The output of research, arch phase is converted to user model.,  User model includes information flow and work flow.,  This phase will help to understand user in details.,  There are composite type of user having behaviour attitude goals and motivations identified in research, phase., , Goal-Directed Design

Page 58 :
Fig. 2.8.1 : Goal-Directed Design process, , 3.Requirements Definition Phase,  Requirement definition phase provides the much needed connectivity between the user, models and, product framework.,  This phase very important phase as it collects requirements., 4.Framework Phase,  This phase will present the actual product design and framework for the system behaviour.,  It also proposes product interaction framework.,  It also explains colour schemes and visual style of user’s expectations., 5.Refinement Phase,  It mainly emphasises on details of system and product implementation.,  It helps to create story board at very high level of details., , 2.9 Designing for Different Experience Levels, Q. Explain various types of users as per their experience levels., , 1. Introduction,  Developer must ensure all system design decisions with end users for any computer system and system, user interface.,  All applications and other user interfaces or services designed must give impact on users.,  As we have discussed all necessary actions to identify the potential users of the system.,  The identification of business cases and identification of user is most important thing.,  Prior to starting any design work there should be clear cut idea of the business, potential users who will, experience the system, and how we can provide added value for the system.,  It is a biggest challenge to address all user needs and requirements.,  In market environment many users coming from all over with different level experiences.,  We need to achieve the best match between designers for beginners to incorporate best system design., 2. User Skill Spectrum,  The main goal of designer is to identify user is expert or a beginner.,  This understanding may help designer to design system as per designated user requirements.,  The system users do not belong to similar group of expertise as they are mixed bunch of people.,  The users are community of different levels of user experience and system familiarity.,  Skill spectrum divided as,, o, , Beginners

Page 59 :
o, , Intermediates, , o, , Experts, ,  These categories can be decided from their age, IQ level, skills they have and experience.,  The maximum users are the intermediator as compare to expert and beginning people., WHAT ARE THE COMMON QUESTIONS ?, , Fig. 2.9.1 : Common User Question, , a. Beginning User,  Every user is beginner user at earlier phase of their life.,  The time user remain beginner is decided by their skill to understand system Interface. The generally, generall user, will go from level beginner to intermediator.,  To make beginning user to intermediator designers, we must ensure that the things they see and use UI to, remain in their mental models.,  The main usability of beginning user is their main focus area, ar is on,, o, , Menus, , o, , Messages, ,  They tend to use above options hierarchical system architectures, reading all the labels and understanding, of location where specific options and features are placed.,  For dialogs and notifications user may refer them slower, trying to understand them thoroughly.,  The beginning user may require lot of help from system to understand process.,  Question of Beginning User,, o, , Which program should I use?, , o, , What will this program do?, , o, , From where should I start?, , o, , What is the, he way to do it?, , o, , Am I doing right things?

Page 60 :
Fig. 2.9.2 : Beginner User, , Example :,  In case of Microsoft office – Word,,  The beginner user will take help, help for office assistant to understand few functions of system.,  User majority times refer menu given at the header in system., b. Intermediator user,  Intermediates user is always looking for desired features and way to easily access them.,  Intermediate, iate level users will have some different requirements.,  The basic skill to operate system is already known to them.,  As they are familiar with basics they will now find out new techniques to operate system very effectively., n help them to find out new ways to do same things more effectively.,  The tooltip text can, ,  Majority numbers of users are intermediates.,  We will optimize user experiences for intermediates as majority of users are intermediators., , Fig. 2.9.3 : Working with Expert Help, , c. Expert user

Page 61 :
 The number of expert users is always smaller than other type of users as they become expert by longer, experience and excellent skill set.,  This group of user becomes very important group of users although there number is very small but their, effectiveness is very high.,  As always company trust on expert people and ask them for advice as well as design help.,  Experts may know additional functionalities and abilities of system to perform all tasks.,  If some interface is not accepted by these users it can be even rejected on these group.,  As it is expected that interface must help these users to be more productive.,  Interface should be definitely optimized for intermediates and helps beginners to understand application, but also be more productive for experts.,  Experts may be use some feature of system which is used very rarely.,  Experts always look for customization or automation in available system., , Fig. 2.9.4 : State of art technology, , 2.10Understanding User, Q. Explain how to understand user., , 2.10.1Introduction,  The success of any digital system is defined by the ability to satisfy requirements of user, owner and other, stakeholders.,  The main goal of system designer should understand the user to create the best possible system.,  The system designer should understand user of system whose experience will help designer to make system, better for usability.,  The user knowledge due to experience with system cannot be gained by any quantitative study during market, research.

Page 62 :
Fig. 2.10.1 : User Concerns, , 2.10.2Quantitative Study,  Qualitative study emphasizes on enhancement of system design interface by making decisions., decisi, (i)Stakeholder Interview(ii)Domain Expert Interview, (iii)User Interview(iv)Customer Interview, (v)User Observation(vi)Literature Survey, (vii)System Interface Design Audits,  Stakeholder Interview, (i)Boys like blue(ii)Girls like pink, (iii)Kids like Red or dark colors, , Fig. 2.10.2 : User Centric System Design

Page 63 :
2.11 Modeling Users : Persona and Goals, 1.System may have many types of users all of them may not be of similar characteristics., 2.The observations of the system end users may give some models to represent user behavioural patterns., 3.Persona, a.The above research to create descriptive model of interaction design, we can add some ideas which are also, known as personas., b.This persona may help developer to provide the way user think about system., c.The user’s behaviour and the way they think will exactly help developer to accomplish the things they want to do, with system., d.Personas are designed by behavioural data gathered from many users from which we capture some percent of, information., e.There are many ways to gather information from users., f.Personas may help to determine, communicate, build consequences, measure, and contribute the design quality, of the product., g.This may help to fit the product as per user’s level of experience., h.Personas will help to solve many design specific issues user and corner conditions., i.Personas are represented as individual people or group of users, 4.Goals, a.The personas will provide contextual information for user behaviours, b.Design goals are basic drivers for such user behaviours., c.Persona without goal may be an effective tool, d.Goal may serve as a magnifier through which designer may considers the functionality of the product., e.Goals will motivate the usage pattern to get better results after using the product., , 2.11.1 Steps in Constructing Persona,  Personas can be adopted by various techniques.,  Steps :, 1.Identify user behavioural patterns., 2.Arrange interview as per user behaviour., 3.Recognise user behavioural patterns., 4.Generate various user characteristics and relevant goals., 5.Check for completeness of goals., 6.Explain all attributes and behaviour of user., 7.Design various persona.

Page 64 :
2.12Evaluation Techniques : Universal Design, Q.What is design Process ?, , 2.12.1 Introduction,  Universal design process is used for designing products so that they can be utilized by maximum people.,  Universal design must provide uniform user experience.,  Design must be simple and cost effective., , 2.12.1Seven Principles of Universal design, , Fig. 2.12.1, , 1. Equitable Use,  The design must be usable for wide variety of audience.,  Similar type of access for all range of audiences.,  Proper security, privacy should be provided., 2. Flexible in Use, As per wide variety of audiences we need to get users behavior like pace of user, 3. Simple and intuitive,  The design must be simple and intuitive with regards to language, experience of user, user lifestyle and, expectations.,  System design should not be complicated unnecessarily.

Page 65 :
 If possible, system must provide prompt messages and feedbacks., 4. Perceptible info,  The design must provide useful information and communicate this to user easily and quickly.,  Information can be represented in multiple ways (Like audio, video, images etc.),  Important information must be highlighted.,  The design must be supported on all types of devices., 5. Tolerance for Errors,  Minimising effects happened due to some errors.,  The harmful situations are avoided or bypassed.,  Potential conditions must be shown with warnings and errors.,  The system must be safe from system failure and data losss., 6. Low Physical Efforts,  The system must be comfortable to use and should not give physical stress to user while using system.,  The system must maintain natural position of user, for making him comfortable with system.,  The redundant actions must be avoided for minimising work of user., 7. Size and space for approach and use,  Any user can use system without any problems, any height, any weight, any colour etc.,  The system must be reachable for all types of users., Review Questions, Q. 1Explain what is goal directed design Process., Q. 2 How to implement mental model in reality., Q. 3Explain various types of users as per their experience levels., Q. 4Write a Short Note,, a. Goal Directed Design, b.Implementation Models and Mental Models, c.Beginner User, d.Expert User, e.Intermediates, f. Designing for different experience levels

Page 66 :
g.Modeling personas and goals of users, Q. 5Explain how to understand user.

Page 67 :
CHAPTER 3, , Graphical User Interface, The graphical User Interface: Popularity of graphics, the concept of direct manipulation, graphical, systems, Characteristics. Web user Interface: Interface popularity, characteristics. The merging of, , graphical Business systems and the Web. Principles of user interface, i, design., , 3.1Graphical user interface,  The graphical user interface (GUI) is an interactive visual component through which user can communicate with, computer system easily., rmation on the screen. It is more user,  The GUI is used for performing actions by users and displaying info, information, , friendly than text based command line interface.,  It helps users to interact with different applications at a time by clicking icons as displayed on the screen.,  There are various graphical elements like icons,, icons buttons, menus, pointers, Windows, scroll bars, input devices,, cursors, buttons, list etc.,  These GUIs elements are associated with Microsoft Windows, Mac OSX, Chrome OS, KDE, and Android.

Page 68 :
Fig. 3.1.1 : Examples of graphical user interface, , 3.1.1Popularity of Graphics,  Information displays in terms of graphical images knows as icons instead of text.,  These icons could symbolize as objects or actions.,  Objects and actions are selected through pointing devices.,  User actions using graphics are fast, meaningful and dynamic.,  Graphic presentation is more effective than other presentation methods.,  Graphics should be properly used. It reduces memory loads and information could appear or disappear when, needed.,  Graphics contains WIMP interface: windows, icons, menus and pointers for providing visual information.,  Selection and interactive fields such as buttons, drop down, check boxes, list boxes, text entry field are, available.,  Information transfer is faster between user and computer system using graphics.,  Graphics can add appeal to the inter-face, inter face and permit good customization to design an exclusive organizational, style., , 3.1.2The Concept of Direct Manipulation, pulation is an interaction style in which objects of interest are visible on the screen,  Direct manipulation, ,  Users can act on visible objects via physical, reversible, incremental actions that receive immediate feedback.,  Actions are invoked physically via clicking on icons,, icons, pressing button, menu selections and touch gestures.,  Example of direct manipulation: “Moving, â œMoving a file from source folder to destination folderâ€, folderâ

Page 69 :
Fig. 3.1.2 : Dragging, Dragg, one file from one folder to another, , 3.1.3 Graphical Systems,  Graphical system are user friendly and used in more effective manner.,  It reduces memory load and system learning requirement.,  It requires less expert knowledge to use the system.,  Faster use and faster learning.,  It is more attractive system where symbols are recognized faster than text.,  Graphical systems increase system control and predictable response.,  Provide less error and increase feeling of control.,  Provide easy reversal of actions.,  User is in control and get feedback after performing actions.,  Using GUI, users can interact with multiple applications.,  Graphics provides less typing requirement.,  Provide consistency., , 3.1.4Characteristics, raphical user interface is a way where user can interact with computer system using graphical symbols. The, Graphical, GUI prevents human error and contribute to ease of use. There are following characteristics of graphical user, , interface :, 1.Visual Presentation, It is visual feature of user interface where user can interact with system by selecting and clicking on, interaction elements.,  These interaction elements are Windows, icons, menus and pointers.,  Window is the area on the screen that contains text, graphics, graphics and actions to perform.,  Icons are small clickable pictures to interact with the system.,  Menus choice of actions available on the screen. There are various types of menus like pull down, drop, down, contextual menu etc.,  Pointers are used for pointing and selecting the actions available on screen.

Page 70 :
Menu, Fig. 3.1.3 : Visual elements, , 2.Pick-and-Click Interaction,  To choose and perform the proposed action by clicking on the screen.,  Action can be performed using mouse and keyboard., 3.Restricted, Restricted Set of Interface Options,  User follows WYSIWYG mechanism i.e. “What, â, You See Is What You Get†.,  What is presented on the screen or what may be retrieved through user actions., 4.Visualization,  It is a cognitive process that allows user to understand available information on the screen.,  It is not necessary to reproduce a realistic graphical image, but to produce convey most relevant, information.,  Effective visualizations can increase productivity., 5.Object Orientation,  Objects are what user see on the screen while interacting with system.,  Objects are divided into three meaningful classes, (i) Data objects is for information., (ii) Container objects to hold other objects., (iii) Device objects represent physical obje, objects in the real world.

Page 71 :
 Objects are composed with sub objects. For example: an object may be an excel file and its sub objects, may be a table, formulas, sorting etc.,  Objects can contains other objects so if any changes in one object it reflects on other object., 6.Actions,  Users perform actions on objects. They manipulate and modify objects as per their need.,  User can select an action to apply on object. For example : choose a word and perform action is Bold in a, document file. Here selected word will be bold until further changes are made., , 3.2Web User Interface,  Web user interface provides the interaction between the user and software running on web server.,  Web based interface accepts the input and product output as webpage.,  This interface is very simple and straightforward because of its point and select feature., and,  Web User Interface (WUI) represents a good way to provide powerful communication by configuring, conf, , managing network security components.,  Web interface design is essentially the design of navigation and the presentation of information.,  Users can easily browse the browser to get the information., d in websites, online software, forms, online documentation and more.,  This kind of interface generally use, used, , Fig. 3.2.1: Web based user interface, , 3.2.1Interface Popularity,  Web user interface offers wide range of business advantages over traditional desktop application. For example :, MS Word is desktop application while Google Docs is web based application.,  The web interface has revolutionized computing which allow many users scattered across the globe to, communicate and access information.,  It allows people to control much of the display and the rendering of Web pages.,  It provides clear navigation interface, interfa and fast download time.,  Web based interface is easier to customize the presentation of information to different user groups., , 3.2.2Characteristics

Page 72 :
 The Web interface provide navigation environment where user move between pages of information.,  Web interface system can easily accessible anytime and anywhere with internet connection.,  It has graphically rich environment containing menus, icons, hyperlinks, images, buttons etc.,  It is easy to understand for users.,  It is easier to maintain,, n, secure and install.,  It can be customized as per range of audience.,  It is responsive and can be accessed using mobile devices.,  Web interface is consistent across all web pages., , 3.3The Merging of Graphical Business Systems and Web,  Graphic design has a big role to play in the modern competitive business environment.,  The primary task of web interface to inform about the application in business world.,  The increase penetration of internet usage, web interfaces supports business environment and groups., and responsive,  A good web based interface meets essential needs of the consumers in a simple, easy-to-use, easy, , manner., , 3.4Principles of User Interface Design, User interface provides communication between users and devices. It is not only about arranging buttons,, picking colours, selecting menus, clicking icons but also choosing right tool to provide effective interaction., Theprinciples of user interface designare intended to improve the quality of user interface design., , Fig. 3.4.1 : User Interface Design Principles

Page 73 :
1.Familiarity,  The interface should use terms and concepts which are drawn from experienced users to make system, more usable.,  Usability is often related with familiarity by users by using interaction styles.,  For example, if a user is in a habit to use windows OS, OS so it would not be too hard to work on that system, but user will not be comfortable with other OS in first interaction., 2.Consistency,  The interface should be consistence across the application.,  Consistency allows users to recognize usage patterns., patter,  Once user learns about the certain parts of the interface working, the same knowledge can be applied to, new areas and features.,  Define a design pattern and follow it. It should be same for text, colour code or performing actions., , Fig. 3.4.2 : Tool bar interface is consistent in MS applications, , 3.Minimal Surprise,  User should never be surprised while performing any action on the system.,  The user should be able to predict the operation of commands.,  For example : the following image shows that first style is simply text or second style is button as per, user’s knowledge.

Page 74 :
Fig. 3.4.3 : Recognition of button using minimal surprise concept, , 4.Recoverability,  The system should provide some resilience to user errors and allow the user to recover from errors.,  This might include an undo facility, confirmation of destructive actions, 'shift' delete, etc.,  The interface has to be able to help the user to recover from their mistakes., , Fig. 3.4.4 : The dialog box is for the confirmation of action to perform, , 5.User Guidance,  The interface should not mislead users and must provide meaningful feedback.,  Interface should provide guidance to user for full usage of applications, availableif they need any help,  Ensuring the user is aware of whatâ, what’s going onand there is help option available, , to perform any task., , ÂÂÂÂÂÂÂÂÂÂÂ, Fig. 3.4.5 : Get help option, opti is available in dialog box, , 6.User Diversity, Interface, Interface should be designed in such way so that different types of user can use it., Interface, Interface designing is not only for users of all ages, but of genders, races, levels of impairment and, disability, culture and ethnicity.

Page 75 :
Review Questions, Q. 1What are the characteristics of Graphical user interface., Q. 2What are the principles of User interface design., Q. 3Write short note on web user interface., Q. 4 Explain concept of direct manipulation., Q. 5 Describe popularity of graphics.

Page 76 :
CHAPTER 4, , Screen Designing, Design goals , Screen planning and purpose, organizing screen elements, ordering of screen data and, en navigation and flow, Visually pleasing composition, amount of information, focus and, content , screen, emphasis, presentation information simply and meaningfully, information retrieval on web, statistical, , graphics, Technological consideration in interface design., , 4.1Design Goals, Designing is a creative and decision making activity to achieve goal within constraints. Interaction designing is, an iterative process with some limitations of human and design. Defining good and useful goals make your design, , more attractive. Without, out clear designing goals, designing will not be proper and changes may happen in final, product., , 4.1.1Designing Process, Usability is the main concern of designing any product. Here we will discuss simplified view of interaction, design process for make the system more usable., , Fig. 4.1.1 : Interaction Design Process, , 1.What is wanted : User Requirement. This is the first phase from where requirements are collected from the user., There are number of techniques available like interviewing people,, people, brainstorming, videotaping, looking at the, documents etc., 2.Analysis : The results of interviews and observations needs to be in ordered in such a way to analysis user, requirements and find out key issues for designing., 3.Design : At this stage our main focus will be how the system will work rather than what user wants. There are various, designing rules, guidelines and principles available for designing of good system., 4.Prototype : We do not expect to get designs right in first time. We need to evaluate a design to see how well it is, working and what improvements can be done.

Page 77 :
5.Implementation and Deployment : This is the final stage where we actually developed the product and deploying it, with real users., , 4.1.2Screen Designing, The objective of designingg is not to use computer system but use socio-techno environment in such a ways, where user can interact with system in easy manner. User can interact with system at various levels :, , (a)Widget choices : The appropriate choice of widgets in menus bars and buttons, buttons will help user to know how to, use them for a particular selection or action., (b)Screen design : user needs to find things on the screen, understand the logical grouping of items like buttons,, text boxes, colors, images, etc., ser will be able to understand what will happen when a button is pressed., (c)Navigation design : user, , Fig. 4.1.2 : Levels of Interactions, , 4.2Screen Planning and Purpose, The screen elements must have meaning to users and serve a purpose in performing tasks or fulfilling user’s needs., , Good and well organized screen always produces satisfactory results., If any element does not have meaning so do not include it on the screen because it creates unnecessary, , information and increase memory load., Each screen element should be in control and all text should be organized., organ, Screen color, graphics and animation should be clear and pleasant., All form filling screen must product feedback result for form submission., , 4.3Organizing Screen Elements, Screens are clearly visible when display elements are well organized and in meaningful, meaningful ways., A clear organization of screen, make user understand which is essential elements., Clarity is influenced by many factors like consistency, visually pleasing composition, a logical and sequential, , ordering, the presentation of the proper amount of information, groupings, and alignment of screen items., , 4.4Ordering of Screen Elements and Layout (Data and Content)

Page 78 :
Grouping of information into units that are logical and meaningful., Screen provides interrelationships between related information., Elements, lements on the screen should place in a group as well as on priority basis., Ordering schemes includes : Sequence of use , Frequency of use, Function and Importance., It ensures that only information relative to task is presented on screen., Organizational, ional scheme is to minimize number of information variables., , Fig. 4.4.1 : Items are grouped in order of screen, , 4.5Screen Navigation and Flow,  Screen navigation allows user to move from one place to another while accessing the system like webpages or, website.,  It encourages natural movement of sequences.,  It minimizes distance between pointer and eye movement.,  There are two types of navigation structure :, o, , Local structure : looking from one screen or page out, , o, , Global structure : structure of website, movement between screens., ,  Some websites have navigation bars which show all the links available all the time., , Fig. 4.5.1 : Menu bar on webpages

Page 79 :
 Screen navigation provides information to understand where the user is on the webpage, what user is doing,, what user can do and what user has done.,  Navigation provides the proper flow of the web pages.,  Maintain left to right and top to bottom orientation throughout the web pages.,  It provides control between user and screen items., , 4.6Visually Pleasing Composition,  The aim of screen designing is to improve the user experience with the effects of illustrations, photography,, space, layouts, and color on the usability of products and on their aesthetic appeal.,  Arrange visual elements like buttons, text, images, colors in such manner where user experience should be, maximal and efficient.,  Designers can shape the user experience in order to produce user responses and behaviors that suit the proper, usage of the product.,  Visual tools that could help us to ensure that the physical structure of screen emphasized the logical structure of, the user interaction.,  Visual tools like physical grouping, ordering of items, decoration such as fonts, lines and color, alignment and the, use of white space.,  A successful visual design ensures that content remains central to the page or function. To achieve pleasing, visual design, designers consider the following qualities :, (a)Symmetry, (b)Regularity, (c)Predictability, (d)Sequentially, (e)Economy, (f)Simplicity, (g)Groupings, , 4.7Amount of Information,  Information should be clear.,  emphasize the important data.,  Minimize non-data elements.,  Do not represent redundant information.,  Fill the information/data in graph’s available area.,  Show various types of information and group them.,  Provide proper framework for data interpretation.

Page 80 :
4.8 Focus and Emphasis,  Good screen design always focuses on users and their needs while designing a user interface.,  Designing elements such as text, images, icons, and buttons etc are arranged in such a way that enables users to, easily understand and apply the actions to perform.,  User centred design is based on user’s preferences, skills and goals.,  It is responsibly of designers to place important facts on the screen in such order where user can pay attention, easily.,  Too many details make our design, n overloaded so while designing be focused and emphasis.,  Emphasis is a way to make user’s attention on the screen for the particular content, image, link, button etc.,  It is a strategy to visible the screen elements on the screen.,  Website designerss use emphasis to perform action for interacting with system.,  Emphasis elements are focal points such as “use via SMS” or “Download now” buttons.,  Focal points are generally designed with large fonts, standout colors( red, orange, blue) and large buttons., butt, , Fig. 4.8.1 : Focus and emphasis using focal points, , Tools to create emphasis :, , 1., , Lines : Designers use specific linear flow to determine the overall direction of the websites., When you change the flow, attention will be paid to the point from where the flow is broken. For, example: if website contains horizontal lines but only one section contains horizontal lines then this is a, point where attention is required., , 1., , Shapess : If designers use group of similar shapes (like circle) then using different shapes (like, triangle) will instantly pay attention to find different things., , 1., , Colors : Colors play important role to emphasis the task. More contrast colors means more, user attention is required., , 1., , Textures: Designers can use texture in website for drawing attention. For example: embossed, effect can be used for text. If embossed effect is changed, changed in shadow text to draw attention to element., , 4.9Presentation Information Simply and Meaningfully

Page 81 :
 User judge the system by its interface and then it’s functionality.,  When any system is designed, content should be simple and meaningful so that user can interact in easy, manner.,  All related information should be grouped together which maximise user experience.,  Reduce memory load.,  Provides meaningful feedback.,  There should be dialog boxes wherever is required.,  Provide clear navigation process.,  Do not produce so many information on a single page., , 4.10Information Retrieval on Web,  Information retrieval is the process through which website respond of user’s query quickly.,  The web is used to represent a lot information but meaningful.,  The structure of the web is to create for more user interaction.,  The website should be goal oriented and provides between navigation from one page to another.,  Respect users desire to leave anywhere and anytime., , 4.10.1Problems with Searching,  User understanding is not clear.,  Difficulties in searching information.,  Identify the level of user expertise for interaction.,  Do not make good plan for user’s switching purposes during search process.,  Flexibility in the search process is not available.,  To know all kind of user and searching information., , 4.10.2Browsing Guidelines on Web,  Users access the websites for different purposes.,  Focused search for a piece of information gives good result in browsing.,  User should express the search.,  Provide search facility guidelines.,  Present meaningful results.,  Provide groupings of information.,  Provide concise and pleasant design.,  Use proper buttons, text, bullets, images, colors etc.,  Understand terms to minimize the need for users to switch context.

Page 82 :
4.11Statistical Graphics,  The graphical representation of data gives clear picture, presents numbers into small space.,  It helps us to avoid the data distortion and gives clear purpose of description, exploration, tabulation and, decoration.,  Basically it presents the data in graphic format.,  It is used to minimize redundant data.,  It shows variation in data at one place., p,  Help in comparing actual and projected data.,  Provide meaningful organization of data in different format.,  Using the correct graphs in the correct place and correct time establish a good communication of various, quantitative ideas., , 4.11.1Types, s of Statistical Graphics, (a)Line Graph, , , It displays continuous changes data over time., , , , Each line in graph shows points that connects with data., , , , Line graphs are used when we want to predict data or show some trends over the data., , , , When to compare variables(situation) over the time period., The following graphshows annual sales of a company for the period of six consecutive years, For Example :The, , :, , Fig. 4.11.1 : Example of line graph, , (b)Bar Graphs, , , Bar graphsare used in economics, statistics, and marketing.

Page 83 :
, , They are commonly used to compare several categories of data., , , , It is used to compare data among various categories., For Example : The following bar chart represents, represents the total sum of sales for Product A and Product B over, three years., , Fig. 4.11.2 : Example of Bar Graphs, , (c)Pie Charts :, , , It displays data and statistics in an easy-to-understand, easy, ‘pie-slice’ format., , , , It illustrates numerical proportion., , , , Each pie slice is relative to the size of a particular category in a given group as a whole., transportation used by 1000, For Example : The following chart represents the proportion of types of transporta, , students to go to their school.

Page 84 :
Fig. 4.11.3 : Example of Pie Graphs, , 4.12Technological Consideration in Interface Design,  Screen designing should be compatible with system functionalities.,  There will be proper power supply to system for proving good interaction.,  Screen size should be compatible with user.,  Screen resolution should be adjustable.,  Software will run on various platform.,  Web screen should open on different browsers.,  Color scheme should be pleasant.,  There should be help manual to use the system.,  Design for the most commonly used bandwidth.,  Provide technology tool to interact with internet.,  Create multiple versions that support multiple browsers., Review Questions, Q. 1Draw the diagram for interaction design process., Q. 2What is Screen designing ? Explain its levels., Q. 3Write short note on Screen Navigation and flow., Q. 4Explain Statistical Graphics in details., Q. 5Write short note on designing process.

Page 85 :
CHAPTER 5, , Interface Design for Mobile Device, Mobile Ecosystem : Platforms, Application frameworks: Types of Mobile Applications : Widgets,, Element of Mobile, Applications, Games, Mobile Information Architecture, Mobile 2.0, Mobile Design : Elements, Design, Tools., , 5.1Mobile Ecosystem : Platforms, Application Frameworks,  Mobile Ecosystem is group of devices, platforms software (Application /System), companies and the united set, of services offered by a mobile device company, including the, the device hardware, operating system, app store, and user account., , Fig. 5.1.1, ,  A mobile device is a general term for any type of handheld computer. These devices are designed to be, extremely portable, and they can often fit in your hand., are powerful enough to do many of the same,  Some mobile devices—like, like tablets, ee-readers, and smart phones—are, , things you can do with a desktop or laptop computer. A mobile, mobile application platform is a group of software, tools used for designing, creating and maintaining mobile applications.

Page 86 :
 The mobile application platform, which provides mobile application tools for development. It supports mobile, application development using various tools for different programming languages and it also offers an, application programming interface to allow interactivity between software packages.,  Following are some mobile platforms that changed the mobile industry in the past year., 1.Android, 2.iOS, 3.Windows Phone, 4.Blackberry etc,  A mobile framework is designed to support mobile app development. It is a software reference library that, provides an essential structure to support the applications specific environment development. The, frameworks are the most important driving tools for building any mobile or web application. It must be, remembered that every project or app has a different requirement and so the choice of the framework must, be made carefully and after ascertaining the other essential factors., Following are some recent Mobile App Development Frameworks, 1.React Native, React Native is to Preferred Cross-Platform Solution for iOS and Android App Development. Its development allows mobile app, developers to build high-performance apps in shorter development cycles and faster development time. it also gives, smooth animations as the code is converted into native views before performing., 2.Flutter, Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter, works with existing code, is used by developers and organizations around the world, and is free and open source.Flutter, helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times,, without losing state, on emulators, simulators, and hardware for iOS and Android., 3.Ionic, Ionic is an open-source platform. The main advantage of the Ionic framework is that mobile developers can use a set of, default UI elements like forms, filters, action sheets and navigation menu in their design. Thus, it helps to focus on, developing apps instead of concentrating on UI elements. Moreover, if the developers are familiar with CSS, JavaScript, or, HTML, then using the Ionic framework becomes much more manageable. It supports from Android 4.1, iOS 7 to all other, upgraded versions of Android and iOS., 4.Xamarin,  Xamarin has develope where developer can use C# for Android, iOS, and Universal for Windows apps.,  Xamarin is now included to Visual Studio with free costincludingVisual Studio Communityversion which isalso, freefor Individuals, open source projects and smaller teams., , 5.2Types of Mobile Applications

Page 87 :
There are three types of mobile applications, 1.Native app, 2.Web app, 3.Hybrid app, 1.Native App, A native mobile app is a smart phone application that works as standalone entity and coded in a specific programming, language, such as Objective C for iOS or Java for Android operating systems., That is totally compatible with the device hardware and native features. Native mobile apps provide fast performance and a, high degree of reliability. They also have access to a phone's various devices, such as its camera and address book. In, addition, users can use some apps without an internet connection. However, this type of app is expensive to develop, because it is tied to one type of operating system, forcing the company that creates the app to make duplicate versions, that work on other platforms., Type of Native App, (a)Window Phone that is Develop in Net, (b)IOS That is Develop in Objective-C or Swift, (C)Android that is Develop in JAVA, 2.Web App, Web application (Web app) is a responsive application program that is stored on a remote server and delivered over the, Internet through a browser interface that is typically run in a browser, now most of Web services are Web apps, websites, contain Web apps. any website component that performs some function for the user qualifies as a Web app that is, resemble a native application., 3.Hybrid App,  Hybrid apps are combining application of both native and Web applications for all platforms altogether, withXamarin (-Xamarin offers sophisticated cross-platform support for the three major mobile platforms of, iOS, Android, and Windows Phone.),the hybrid apps are developed with the combination of web technologies, like HTML, JavaScript, and CSS. Hybrid apps provide easy scaling to various platforms and mobile operating, systems and its allow users to work offline. PhoneGap and Xamarin are an example of the most popular, container for creating hybrid mobile apps.,  In hybrid apps store their files on the device or on a server there are two ways to implement a hybrid app., o, , Local- You can package HTML and JavaScript code inside the mobile application binary, in a, , manner similar to the structure of a native application. In this scenario you use REST APIs to move data, back and forth between the device and the cloud., o, , Server- Alternatively you can implement the full web application from the server (with optional, , caching for better performance), simply using the container as a thin shell over the UI Web view.

Page 89 :
5.3Widgets, The role of widget is very important while customizing the home screen. You can imagine the views of an, app’data and all functionality that is accessible from user’s home screen. Widgets can place across their home, screen panels anywhere , also it can be resize to the amount of information within a widget to their requirements., , 5.3.1Widget Types, 1.Information widgets,  Information widgets are the basics and important widgets, which display the essential information and it also, tracks changes occurring overtime. On touching information widgets, it opens the associated app for detail, view and information,  Some Examples of information widgets are the following, 1.Weather widgets, 2.Clock, 3.Sports score tracker, 2.Collection widgets,  Collection widgets as the name suggests helps in collection of similar elements shows elements, like collection, of pictures from a gallery, articles from a news app or emails/messages from a communication app.,  Collection widgets focuses mainly on two aspects: Browsing the collection and helping in opening a single, element for detailed view., 3.Control widgets,  The main function of control widget is to show frequently used functions which can directly be accessed from, the home screen, without opening the app itself.,  Example of Control widgets is music app widgets that allow the user to play, pause or skip music tracks outside, of the actual music app. Which acts like a remote controls for an app., 4.Hybrid Widgets,  Many widgets in reality are hybrids that combine elements of different types. It comes with combination of a, control widget elements and information widget type. For the purpose of your widget planning, center your, widget on one of the base types and add elements of other types if needed.,  A music player widget is mainly a control widget, but also keeps the user informed about what track is currently, playing.,  Limitations of Widget,  Widgets live on the home screen, so that they have to co-exist with the navigation that is established there. This, limits the gesture support that is available in a widget compared to a full-screen app. gesture is already, occupied on the home screen for the resolve of navigating between home panels.,  The only gestures available for widgets are

Page 90 :
1.Touch, 2.Vertical swipe, Designing a widget, Considering the various limitations and restrictions on gesture availability, we have to use available, parameters for designing a widget., Points to be remembered while designing a widget, 1.Focus on the main and important information of the widget and elaborate it in detail in the app., 2.Selecting the correct widget type is crucial., 3.Different sizes should be planned, which are able to adapt as per the content, 4.The layout should be able to adjust as per widget requirement and should be independent of the device, it should be able to, stretch and contract as per requirement, , 5.3.2Mobile Web Widgets, 1.Pros,  The pros of mobile web widgets are:,  They are easy to create, using basic HTML, CSS, and JavaScript knowledge.,  They can be simple to deploy across multiple handsets.,  They offer an improved user experience and a richer design, tapping into device features and offline use., 2.Cons,  They typically require a compatible widget platform to be installed on the device.,  They cannot run in any mobile web browser.,  They require learning additional proprietary, non-web standard technique, , 5.4Games,  Games are basically native applications based on similar SDK platform to create a rich gaming experience.,  Gaming mobile apps are popular amongst developers, due to their huge demand, they bring multiple users, regularly to use the app regularly for a very long time, each day, each week, sometimes multiple times a day,, games category is hugely competitive.,  Most of the popular games, keep users engaged for a longer time by providing a very rich and addictive, experience, providing various incentives like coins, points, daily game challenges to earn more points, our, using the app regularly for certain number of days or weeks in a succession,  Mobile game apps are mostly popular due to easy accessibility and ease of use and the varied experience it, provides.,  Games are portable and can easily be ported, since the gaming experience is created due to the graphics used,, wchich actually uses very little of the devices APIs.

Page 91 :
1.Pros,  They are very simple to use and provide a very rich and addictive experience,  Easy portability to multiple devices., 2.Cons,  Sometimes very costly to develop,  Difficult to port it to the mobile web,  Few examples of game apps, (a)Candy Crush Saga, (b)Game of Throne, (c)Temple run, , 5.5Mobile Information Architecture,  Mobile Information Architecture is the structure of your app’s content. The main goal of the designer working, on the Information Architecture is to make it simple and spontaneous to navigate.,  This method is very similar to how engineers invest their time and effort in creating drafts and figuring out, where the building’s core elements should be placed to be easily accessible to residents., , 5.5.1Building Blocks of Information Architecture,  Information architecture,  Interaction design,  Information design,  Navigation design,  Interface design, , 5.5.2Characteristics of Mobile Information Architecture,  Keeping It Simple,  Site Maps,  Clickstreams,  Wireframes,  Prototyping,  Different Information Architecture for Different Devices, , 5.5.3Top 6 Mobile Information Architecture Patterns,  There are already many IA patterns available for ready use, which a developer can use to create app’s basic, structure by carefully selecting the appropriate pattern as per requirement.

Page 92 :
 Using multiple app information architecture pattern can help to create a varied experience for the app, several, patterns can be combined to create a unique pattern, firstly we need to select the main pattern 7 then the, patterns for subsections, 1.Hierarchy,  In this pattern a main index page is created, which is linked to other pages which also can contain links to, subpages, this pattern easily fits a mobile app which has a similar structure as desktop websites.,  When you create a multi- faceted navigation structure using this patter, it sometimes become complicated and, troublesome to use it on a small screen, there we can choose a different pattern which is less complicated for, navigation, 2.Hub and Spoke,  In this pattern you have one main index page called as the HUB, which has got spokes to navigate, if the user, wants to go to different spoke from one spoke to another spoke, user will have to come back to hub before, going to next spoke. It helps in focusing on one task at a time. This pattern is useful for multi-functional apps,, where each app or tool has a specific purpose, however if the app is targeted at a multitasking user, it may, really not work well. This pattern is universally used for iPhone apps., 3.Settled Doll,  The main page is the is the index page, with a general overview for the content of the other pages, which have, more details, it is a linear pattern so the navigation is more clear and users can easily browse though the, content, without getting lost in the app’s content.,  This pattern is universally used for the Android applications, as it focuses on a particular topic or a couple of, closely related topics. It sometimes becomes very slow, to switch between various sections if there are many, levels in the IA., 4.Tabbed View,  You must be extremely familiar to this mobile app information pattern as it similar to the way tabs are arranged, or organized on desktop browser. The content is organised in different sections and users can switch between, these sections using the toolbar.,  This pattern is suitable for the apps that are created to be used as tools, for example if we see flipkart app it has, got options of searching and comparing varies categories, sub categories of tools, with a lots of goods which, are accessible through tabbed navigation, this app is good for creating a searching and comparing tool, It, becomes more complex due to the varied content and products it gives access to, you should try and keep it, as simple to use for the user., 5.Dashboard,  This pattern displays a part of information on the index page, the main advantage of this pattern is that, it gives, the glimpse of the all the information to help the user analyze and decided the sequence of the information in, the manner user wants to consume it.

Page 93 :
 It is suitable for the apps that are built for tablets, but not much suitable for Smartphone, It is suitable for apps, that are content driven and multifunctional tools in application.,  Sometimes the index page becomes overloaded with various elements and user feels lost in some set of, information, so attention should be given in testing how user uses the interface and it is important to have, their feedback to improve the experience., 6.Selected View,  This pattern allows the user to shift between different views by selecting the content they would like to see., This pattern gives complete freedom to explore and see the content in the manner they want.,  This pattern is ideal to be used for apps that display huge amount of content, like images, videos, etc. Also, remember that it should not be overloaded with many filter making the internal application very complex to, display the right content on the small screen of Smartphone., Points to remember while designing a Good Mobile Information Architecture, 1.Defining the product goal, Defining the product goal is very important, what is the final requirement of the product every one working on the project, like, designer, developer, everyone should focus on the final outcome of the product, content of various elements and its, purpose should be properly defined., 2.Create the inventory on the content, Identify the various elements that would be required for the architecture, create an inventory for the same, it is ideal to create, a list of various elements as per requirement, all the titles, meta elements, audio files, videos, texts, documents, etc. This, will help you grouping the components as per requirement., 3.Planning the navigation system, Planning the navigation system is very important, how it will look and how we can navigate through different section, creating, sketches for various sections can help in creating a clear visual of the ideas to create the app. How different elements will, look on the screen can be used for representation purpose while discussing the ideas, 3.Simplify the design, As the smart phone screens are very small as compared to tablet or desktop, so it is really crucial to prioritize the elements and, include only those which are really required, keep it as simple as possible, Some tips for keeping the IA simple,  Keep the links as minimum as possible, less than 10 would be ideal,  Restricted the levels of contents a low as possible.,  Remove unwanted pages,  Keep links and menus simple and clear, 5.Research and Feedback

Page 94 :
Do a research with the potential users, take their feedback, consider various elementsmake modifications as per the outcome,, allow the potential user to use the pilot project and take their feedback, 6.Constantly Review the IA:, Constantly reviewing the IA is important, it should adapted and modified as per the changing trends to give the perfect user, experience, constantly gathering the feedback and updating the IA to enhance the performance and give a seamless, experience is important., , 5.6Mobile 2.0,  Mobile 2.0, is the term derived, following the same principles of Web 2.0.,  Mobile 2.0 has made many things possible which were earlier not possible; users can not only connect by voice,, but also control various devices online. Web is transformed into a more agile and user focused medium,, which can very swiftly deliver information to masses, users can share personalized content on the mobile and, web. Social media connectivity has become easier due to mobile 2.0, accesses have become easier,, interlinked and just a touch away. Wireless connectivity ahs improved significantly, texting, sending, listening,, capturing and viewing have become easier to access. All these multimedia features allow to convey rich, multimedia content., Enablers of Mobile 2.0,  Easy availability of high-speed mobile Broadband Access,  Open access, affordable access to various software platforms, tools and technologies.,  Monetization opportunities due to huge demand., Characteristics of Mobile 2.0,  The social networking has become mobile.,  The users are the generator of content, the site is run by the content created by its users and contributors,  Syncing various platforms, applications and devices to supply a very immersive and rich user experience,  Its Personal, Always available, always connected., , 5.7Mobile Design : Elements of Mobile Design, Tools, It is time to see the factors that have the biggest impact on creating an amazing user interface with the, fundamental mobile app design elements below., , 5.7.1The Elements of Mobile Design, 1.Context, Considering a user centric approach, the usability, the purpose of the app to be used, the context of all these is very crucial, while designing. Context is how a user can derive value from something that they are using or will be using, 2.Content

Page 95 :
Keep content to a minimum. Since mobile screens are compared to tablets, keep relevant content as per requirement, content, , should be universally supported on all devices. Page descriptions should be short and to the point, 3.Navigation,  Navigation should be Simple and easy, Keypads and touch screens are not made for precise navigation,  Minimize the levels of navigation to keep it simpler, use clear and concise labelling for navigation, use distinct, dist, colours for easing the navigation process, create proper sequencing as per the functionality of the app, 4.Layout, Your app must follow a general theme a smooth layout. The them and layout should be kept in mind from the start till the end, , of designing the app, it should be followed for creating a pleasing layout., 5.Color, Color is an important element of mobile design. When users open your app, the first thing that they see is the colour if it iis, , pleasing to their eyes it also connects with the type of emotion portrayed. It should as per users their location, and their, characteristics and preferences., 6.Graphics, Graphics in an important element while designing an app. based on the location the app will be used, the type and application, of the app the graphics can be selected. It should suit the app layout and design to provide a rich experience., , Do’s And Don’ts for Mobile Designs, , 5.7.2Tools,  Mobile app designers are always looking for the right tool that will make their designs worthwhile for the end, user. Developing a valuable mobile app requires top notch skill, creativity, and of course the right tools., Mobile design requires understanding, understan, the design elements and specific tools.,  The closest thing to a common design tool is Adobe Photoshop, though each framework has a different method, toolkit,, of implementing the design into the application. Some frameworks provide a complete interface toolki, , allowing designers or developers to simply piece together the interface. 5,  Following are some tool used in mobile design in recent

Page 96 :
1.Adobe Photoshop2.Sketch, 3.InVision4.Avocode, Review Questions, Q. 1Explain Application framework from mobile ecosystem., Q. 2Describe Mobile 2.0 in brief., Q. 3Differentiate between various types of operating system., Q. 4Explain Mobile Information Architecture., Q. 5Explain Mobile application Widgets., Q. 6List and Explain various elements of mobile design., Q. 7Explain mobile design tools., Q. 8Explain various mobile platform.

Page 97 :
CHAPTER 6, , Interaction Styles and Communication, Windows: Characteristics, Components, Presentation styles, Types of Windows, Management,, operations. Text messages: Words, Sentences, messages and text words, Text for web pages. Icons,, Multimedia and colors, , 6.1Windows, Window is the complete display or the visible area of the screen, which has got a definite border which, encompasses the region, it may have one or two or multiple windows, defined by a border that contains particular, view of the computer. The shape and size of the window depends on the size of the content; text, image that it, displays. It can be scrolled independently on the screen. The size of a window can be small or big as required., , 6.2 Window’s Characteristics, 1.It has got its own specific name and identity, 2.It has a size, height and width, which can vary., 3.There may be active and inactive, contents of active windows can be altered., 4.The portion that is seen in the window is visible potion and window may have a hidden window behind it which may, be partially or completely be hidden and can extend beyond the screen’s display area., 5.Other windows can be overlapping and can be arranged with other windows as required., 6.The part of a window that we select gets highlighted., 7.The task, application or the function of a particular window will depend on the specific task it is dedicated to do., , 6.3Components of a Window, Following are the components of windows:, 1.Frame,  A window is made up of a frame or a border which encompasses the content of it.,  It is usually rectangular in shape, as it is the most preferred shape but it can vary as per requirement.,  Text content runs from left to right of the screen.,  Window fits most efficiently within this structure.,  Windows can take various shapes as required and can be stretched or contracted as required,  The thickness and colour of the border may vary.

Page 98 :
2.Title Bar,  The title bar is present on the top edge of the window and it extends to the entire width of the window, inside its border.,  It is also called as by as thecaption,caption bar, ortitle area by other platforms.,  The title bar has a description, which helps in identifying the purpose of the window,  Pressing the Alt + Spacebar keys helps in displaying the shortcut menu for the window resizing,  Top right has the window resizing, closing and minimizing buttons.,  Title bars are includes on all primary and secondary windows., 3.Title Bar Icon,  At the left corner of the title bar in a primary window, this button is used in Windows to retrieve a pulldown menu of commands.,  It is a 16×16 version of the icon of the object being viewed.,  When clicked with the secondary mouse button, the commands applying to the object are presented., Microsoft suggests that, 4.Window Sizing Buttons,  It is located at the right corner of the title bar, these buttons are used to control the size of a window.,  The leftmost button is theminimizebutton,  It is used to reduce a window to its minimum size, usually an icon.,  It also hides all the contents of associated windows.,  The middle button is themaximizebutton — It is typically inscribed with a large box and helps in enlarging, a window to its maximum size, covering the entire screen.,  The last button- is the close (X) button; it helps in closing a particular window., 5.Menu Bar,  A menu bar is organizes and provides access to various actions points of the window.,  It is located horizontally at the top of the window, just below the title bar.,  A menu bar displays a list of topics or items that, when selected, are displayed on a pull-down menu, beneath the choice., 6.Status Bar,  The status bar is used to display information about the current state of what is being viewed on the, window.,  Descriptive messages about a selected menu or toolbar button, or other non interactive information can, be displayed,  It may also be used to explain menu and control bar items, as the items are highlighted by the user.

Page 99 :
7.Scroll Bars,  A scroll bar is designed in rectangular container consisting of a scroll area or shaft.,  For vertical scrolling, the scroll bar is positioned at the far right side of the work area, extending its entire, length.,  Horizontal scrolling can be accomplished through a scroll bar located at the bottom of the work area., 8.Split Box,  A split box is sometimes referred to as asplit bar.,  A window can be split into two or more separate viewing areas that are calledpanes.,  Splitting a window permits multiple views of an object.,  A split window enables the user to, o, , Examine two parts of a document at the same time., , o, , Display different, yet simultaneous, views of the same information., ,  It support the splitting of a window that is not presplit by design, include a split box., 8.Toolbar,  Toolbars are panels of choices that must be accessed quickly.,  They are sometimes calledcommand bars.,  Toolbars are designed to provide quick access to specific commands or options.,  Toolbars can occupy fixed positions or be movable or sometimes can be contained., , 6.4Window Presentation Styles, The presentation style of a window refers to its spatial relationship to other windows. There are two basic, styles, commonly called tiled or overlapping, , Fig. 6.4.1

Page 100 :
1.Tiled Windows,  As the name suggests, various windows are arrange in the form of Tiles.,  Windows arranged in tiled format appear to be in one plane on the screen and expand or contract and adjust as, per the available space to fill up the display space.,  It is generally a two-dimensional system and can be adjusted in height and width as per requirement,  However in some of the systems which are less powerful, they are only one-dimensional and can be adjusted in, one side only., Advantages, 1.The system automatically allocates and positions windows for the user, which helps in eliminating the necessity to, make decision regarding where to position a particular window, 2.Windows which are open are always visible so that there no possibility of them getting lost, 3.All windows are always completely visible, which eliminates the possibility of information being hidden., 4.They are less complex as compared to overlapping windows, as there is less management operation required., 5.Their performance is better., Disadvantages, 1.Limited number of windows can be displayed on the available screen area, 2.While opening or closing the window, existing window changes in size, this can be an irritant., 3.When windows change in size or position, this movement can sometimes be confusing., 4.As the number of windows displayed increases, each window can become very tiny., 5.Since the changes in sizes and locations are made by the system, it is difficult to predict., 2.Overlapping Windows,  Overlapping window appears to be placed on top of one another like papers placed on a desk.,  They are 3- dimensional and appear visually that each window is placed on a different plane.,  Users have the complete control on the location of these windows and the plane in which they appear or are, supposed to be placed.,  User can also change the sizes of some types of windows.,  Most of the systems generally use this style of windows., Advantages, 1.Visually it is three-dimensional and convenient., 2.Complete control to organize windows as per requirement, 3.Easy to maintain large size windows, 4.Consistent sized windows can be kept., 5.Consistent positioning of windows can be done.

Page 101 :
Disadvantages, 1.Their operation is much more complex than tiled windows, as it provides more control functions which requires more, attention of user., 2.Some or complete information in windows is masked behind other windows., 3.Windows are lost behind other windows and user presumes that they don’t exist., 3.Cascading Windows, It is a special type of overlapping window, in which different windows are automatically arranged in a regular, progression in a pattern, each window is slightly offset from others., , 6.5Types of Windows, The type of window used depends and varies on the nature and flow of the task. Creating a standard, definition for window types is again difficult across platforms because of the varying terminology and definitions, used by different windowing systems, and changes in terminology for new versions of systems., 1.Primary Window,  The first window that appears on the screen, when an activity or action begins is the Primary window.,  Every function or application possessing a menu bar and some basic action controls requires a primary, window, as previously described.,  It presents the framework for the various function’s commands and data for the window.,  Primary window is the main focus for all activities of the user, from where the action begins.,  Primary window contains regularly used components of the application, like menu items, 2.Secondary Windows,  Secondary windows compliment the functioning of Primary windows.,  Secondary windows may be dependent or independent of the primary window.,  A secondary window, which is dependent on primary window, can only be activated from the command, interface of the primary window.,  Most systems allow the use of multiple secondary windows, depending on the functionality required.,  Anindependentsecondary window, as name implies independent of primary window and can be opened, independently of a primary window,  An independent secondary window can be closed without regard to the state of the primary window, unless there is a co-relation to the primary window., , 6.6Words, Sentences, Messages, and Text, All communications used should be simple, clear and polite and properly provide the information for effective, use of a system.

Page 102 :
The design of these communications should also consider the user’s experience and knowledge of the system, topic and how much information the user needs for effective use to interact with the system., , 6.6.1Choosing the Proper Words Use,  Use Short and familiar words, affirmative terms, standard alphabetic characters,,  Consistent words, simple action words. Avoid jargons, difficult words and words with different meanings., 1.Abbreviations or acronyms.,  Avoid use of Abbreviations or acronyms unless they are familiar with reference to the context or, relevance.,  When using abbreviation for the first time, use fully spelt form of abbreviation for the user to understand, it and then use the abbreviation.,  Use an abbreviation if it is significantly shorter than the fully spelled out word, and if it saves needed, screen space., 2.Contractions or short forms.,  While contractions (won’t instead of will not) helps in saving space and creating an informal tone to the, interface, but one should be cautious while using them.,  One should never form a contraction using a subject and its verb, example: he’ll instead of he will.,  Use of prefixes and suffixes also sometimes make it more complicated to understand, like “un-,” or “ness.”, 3.Short, familiar words.,  Frequently used or familiar words should be used to make the interface easy to understand.,  Shorter words are generally used in daily conversations, so they are more familiar and easier to, understand.,  Sometimes a longer but a more familiar word can be used to make it easier to understand, familiar words, are the core., 4.Standard alphabetic characters.,  Standard alphabetic characters are regularly used since they are most familiar to screen viewers.,  Use of restricted alphabet sets should be avoided.,  Use of familiar and known Symbols should only be done., , 6.6.2Writing Sentences and Messages, 1.Sentences and messages must be,  Concise and simple.,  Length of the sentence should be not more than twenty words.,  A paragraph should be not more than six sentences.

Page 103 :
 Language should be at eighth grade level or less, for the general population.,  It should have a positive or affirmative statement.,  Straight and directly usable.,  It should be in an active voice format,  Sequence of events should be linked,  Structure should be such that the main topic is always close to the beginning.,  Constructing parallel sentences, 2.Sentences and messages must be of the proper tone,  Non demanding.,  Non aggressive.,  Non demeaning.,  Non punishing.,  Humor should be cautiously used, A sentence and a message must minimize any doubt and confusion, allowing the user to interpret easily,, correctly, and quickly., Following are the guidelines for fast and correct message interpretation, 1.Concise and simple : A message has to be very short but clear to easily understand., 2.Directly and readily usable : Language should be direct and readily usable; the user should easily understand the, meaning without searching the reference material, 3.Positive or affirmative tone : Positive or affirmative statements are easier to understand than negative statements,, use of affirmative tone makes it simpler for the user to interpret the right meaning., 4.Use of Active voice is generally recommended : Use of simple and direct language in Active voice format is, recommended. Active voice is easily understood and it is concise and clear than passive voice., For example, “Send the message by pressing TRANSMIT” is more understandable than “The message is sent by pressing, TRANSMIT.”, 1.Linked sequence,  Sequence of events should be linked in proper manner, so that it gives overall understanding of complete, picture.,  Complete the address, then page moves forward to complete other detail or to confirm, in a sequential, manner., 2.Main topic should be at the beginning,  Information that has to be remembered should be placed at the start or the beginning of a message or, sentence.

Page 104 :
 It is easier to remember something longer if it appears at the start, components that appear in the middle, are tough to be rembered., 3.Constructing parallel sentence,  Similar grammatical structure should be used for elements of sentences or messages that provide the, same kind of information.,  For example, say “Use this button to select one choice” and “Use this menu to select one option,” not, “To, select one choice use this button,” and “This menu is used to select one option.”, , 6.6.3Common message types are:, 1.Status messages.,  A status message is used to provide information relating to the progress of a prolonged or a lengthy, operation.,  It provides the progress of a function using an indicator and a short message describing the type of, operation being performed.,  It generally has only a Cancel button, to end the operation being performed. Pause and Resume buttons, may also sometimes be included, if required., 2.Informational messages,  Informational messages, also called notification messages, provide information about the state of the, system when it is not immediately obvious to the user.,  They also confirm when the scheduled task is completed and inform about the non-obvious processing, that is taking place or is completed.,  They are also used to provide intermediate feedback when normal feedback is delayed., 3.Warning messages.,  Warning messages call for action for a particular situation or state of activity being processed, they drive, your immediate attention for an undesired situation.,  They generally use an “!” icon towards the left of the message.,  The user identifies if the situation is problematic and the system seeks advice of the user to proceed, further.,  A message to delete may generate a warning message., 4.Critical messages,  Critical messages are those messages where immediate call to action is required before the system can, proceed any further.,  A message describes a flawed situation causing an error is generally described as a critical message,  Some systems use the following messages “STOP” or “Do Not”, 5.Question messages

Page 105 :
 A question message asks a question and provides choice of options for selection to proceed further.,  It is denoted by a “?” icon at the end of the message text.,  Some platforms use “?” for critical messages, so be careful while using this icon for question messages., , 6.7Content and Text for Web Pages,  A most important part of any webpage or website is text it should be very well written.,  Text for Web pages generally follows the above mentioned guidelines similar for words, sentences, messages,, instructions, and text.,  The distinctive characteristics of each web or web pages, need a separate set of supplemental guiding principles, for several Web topics, including, word usage, error message management, and text, heading, and title, writing.,  Attention must be given to write proper links., Words,  Minimal use of words should be done that call the attention of the Web.,  Avoid usage of words in general, that are specific to the Web.,  Here are few specific terms of Web usage “This Web site,” “Click here,” and “Follow this link.”,  You can do a simple exercise if the words make right sense, just take a printout of a page and read them out,, which will provide a clear understanding., Page Text, Web page text must be readable, understandable and appropriately written as per the standard and, requirement of the medium., Presentation,  Text should highly contrasts with the background.,  Text readability can be a critical problem if insufficient contrast is present between the text and its background.,  Backgrounds having Patterns or many colours can severely impact legibility., Writing, 1.Style,  Style of writing should be appropriate as per users needs.,  Writing objectively is required.,  Inverted pyramid organization structure should be used,  Be clear and concise, while using minimal and requisite word only,  Each paragraph used must be short and include only one main idea., 2.Links

Page 106 :
 Within-text links should be as minimum as possible,  Placing the links, the beginning or end of paragraphs or sections of text, must be done as require., 3.Scanning, Text should be easily scannable by use of the following,  Listings, bulleted or numbered.,  Table of contents,  Providing Headings and subheadings.,  Highlighting and focusing on the important issues.,  Using Short paragraphs., 4.International User, Consider the needs of international users using the same product, 5.Readability Testing, Testing it for legibility and readability is required., Link Labels Writing, Meaningful labels should be created that use the following:,  Explanatory, distinctive, predictive, and dynamic wording.,  Keywords must be positioned at the beginning.,  Content should be concise but long enough that the core is understood clearly.,  Word should clearly indicate the link’s desired action.,  Link names should match with their destination page.,  Integration of embedded links must be smoothly done in text.,  Embedded links must adequately describe the action.,  Few words should be used for the active link.,  links should be concise and in one line.,  Standalone links should generally not exceed the length beyond one sentence.,  Link labels should be assigned to assist link understanding., , 6.8Icons,  Icons are the images used to reflect the idea about objects icons are used.,  Icons are most often used to represent objects and actions with which users can interact or manipulate,  Icons may separate on a desktop or in a window, or be clubbed together in a toolbar,  Use of a icon also reinforces important information, like using a warning icon in a dialog message box.

Page 107 :
6.8.1Characteristics of Icons, 1. Syntactics : It refers to the physical structure of the Icon, Like Shape, Color, Size– Similar shapes and colors can be used to classify a group of associated icons, 2.Semanticsis : It is the meaning of the Icon –What does it refer to –a file, a waste basket, or some other objects?, 3.Pragmaticsis : It generally shows how the icons are physically produced and depicted–Screen resolution is, appropriate to illustrate or not., 4.Syntactics, semantics and pragmatics determine an icon’s efficiency and usefulness., , 6.8.2Influences on Icon Usability, Only providing an icon on a screen is not favourable for a user, unless it is carefully designed to present a, natural and meaningful relationship between the icon itself and actually what it stands for., The following factors are used for influencing an icon’s usability:, Icons should be,  Known and Familiar.,  Clear and understandable.,  Easy and simple,  Constant throughout,  Straight and direct.,  Efficient.,  Consider the context in which the icon is used.,  Consider what the user expects.,  Also consider the Complications of task., , 6.8.3Choosing Icon Images,  Existing icons should be used when available.,  Images should be used for nouns and not for verbs.,  Traditional images can be used.,  Users cultural and social norms should be considered., A Successful Icon,  Must look different from all other icons.,  Is should signify what it represents.,  Is is easily identifiable even in the smallest size.,  Should equally look good in black and white and in color., Size,  Standard sizes are H: 16xW: 16, H:24xW24, H:26xW26,H32xW32 pixels

Page 108 :
 Standard colors from the system palette can be used: 16-and-256 color version,  Odd number of pixels can be used on both sides,  Provide a large hot zone of 15 to 40 pixels, , 6.8.4Creating Icon Images,  Create recognizable and solid shapes.,  Create visually distinctive shapes.,  Distinctive features of the objects can be incorporated.,  Visibly reflect the objects represented, avoiding unnecessary detail.,  A set of various interlinked icons can be created, which communicate relationships using common shapes.,  Uniformity must be given to a particular icon type.,  Shapes representing proper emotional tone must be used., Icon Animation and Audition, Animation,  Use animation to provide feedback and visual interest,  It should independent of user’s primary interaction,  Do not use it for decorative purpose,  Allow permission to turn if off by the user,  Present images at 16++ frames /second for creating fluid animations, Design Process of the Icon,  Defining the icon’s purpose and use is required,  Gather, evaluate, and draft different ideas,  Draw the icon in black and white,  Icon-editing utility or drawing package can be used for designing., Test for users,  Expectations,  Identification,  Learning,  Test for clarity,  Register new designed icons in the system’s registry, Graphics in Web, Use Graphics to,  Compliment the textual content; it should not be used as a substitute for it

Page 109 :
 Effectively convey information that can’t be accomplished using text,  Navigation can be enhanced by the following., o, , Giving overview of the site, , o, , Clearly identifying the site pages, , o, , Properly identifying content areas, , 6.9Multimedia, As the Web is graphical flexible it permits inclusion of other media on a screen, It allows to include images,, photographs, video, diagrams, drawings, and spoken audio. Multimedia can hold the user’s attention, add interest, to a screen, entertain, and quickly express information that is more difficult to present textually. It makes the Web, much more accessible to people with disabilities., Images,  Standard images can be used, image internationalization should be possible.,  Provide descriptive text or labels with all images,  Distinguishing of navigational images from decorative images is required.,  Minimize the number of presented images and size of image and animation used in image.,  GIF, JPEG are the preferred formats,  Use when every aspect of the images is relevant, Use JPEG format,  On the initial page display a small version thumbnail,  Zoom-in on most relevant detail,  Link to larger photos showing as much detail as needed,  To show the proper way to perform a task,  To provide a personal message,  To grab attention,  Never automatically download a video into a page,  Provide controls (playing, pausing, and stopping), Diagrams,  Diagrams are used to show the structure of objects,  Diagrams are used to show the relationship of objects,  Diagrams are used to show the flow of a process or tasks,  Diagrams are used to reveal a temporal or spatial order, Animation

Page 110 :
 Animations are used to explain ideas concerning a change in, o, , Time, , o, , Position, ,  Animations are used to demonstrate the location or state of a process,  Animations are used to show continuity in transitions,  Animations are used to enhance graphical representations,  Animations are used to assist visualization of 3-D structures, Audition,  Auditions are used as a supplement to text and graphics,  Auditions are used to establish atmosphere,  Auditions are used to create a sense of place,  Auditions are used to teach,  Auditions are used to sample, Combining Mediums,  Use below mentioned sensory combination that works efficiently as per requirement,  Combination of Auditory text with visual graphics,  Combination of Screen text with visual graphics,  Visual and auditory information should be completely relevant for the task being performed,  Both the Visual and auditory textual description should be presented simultaneously,  Downloading time should be considered while choosing a media,  Graphics Testing should be done for, legibility, comprehensibility and acceptance, , 6.10Color,  A color gives dimension to the usability, color can only be described in terms of a person’s report of his or her, perceptions. The visual spectrum of wavelengths to which the eye is sensitive ranges from about 400 to 700, mill microns.,  Objects in the visual environment often emit or reflect light waves in a limited area of this visual spectrum,, absorbing light waves in other areas of the spectrum., Choose the Proper Colors:,  Use proper color to assist in formatting, o, , Grouping related elements, , o, , Separating different groups of information, , o, , Stressing or drawing attention to important information, ,  Use right color as visual code to identify

Page 111 :
o, , Screen captions and data, , o, , Information derived from different sources, , o, , Denoting status of information, ,  Use color to rationally portray natural objects, Use color to amplify screen appeal, Possible Problems with Color:, The use of color to a screen will not guarantee enhanced performance. Improperly used color may even, impair performance by distracting the viewer and interfering with the handling of information.,  Capacity of Getting High attention, o, , Viewer might associate, tie together, screen elements of same color, , o, , Result in confusing, slower reading, ,  Improper use of color can cause Interference with Use of Other Screens,  Varying Sensitivity of the Eye to Different Colors, o, , Eyes are sensitive to different colors, , o, , Viewing red and blue can cause Eye fatigue, ,  Color-Viewing Deficiencies may also have an impact,  Cross-Disciplinary and Cross-Cultural Differences:,  Different colors have different significance in different cultures, o, , For example blue color has different meanings as below, , o, , For financial mangers -Corporate qualities or reliability, , o, , For health care professionals –Death, , o, , For nuclear reactor monitors –Coolness or water, , Choosing Colors for Categories of Information, Usage,  Design for monochrome first or in shades of black, white and gray,  Doing this will permit the screen to be effectively used:,  By people with a color-viewing deficiency,  On monochrome displays,  In conditions where ambient lighting distorts the perceived color,  If the color ever fails, Use colors conservatively, Avoid use of color where other identification techniques, such as location, are available., Common Meanings

Page 112 :
 In order to indicate that actions are necessary, use warm colors, Red, orange, yellow,  In order to provide status or background, use cool colors, Green, blue, violet, purple,  Conform to human anticipation, o, , Red: Stop, fire, hot, danger, , o, , Yellow: Caution, slow, test, , o, , Green: Go, OK, clear, vegetation, safety, , o, , Blue: Cold, water, calm, sky, neutrality, , o, , Gray, White: Neutrality, , o, , Warm colors: Action, response required, spatial closeness, , o, , Cool colors: Status, background information, spatial remoteness, ,  Implications of color with emotion are potrayed, o, , High illumination: Hot, active, comic situations, , o, , Low illumination: Emotional, tense, tragic, romantic situations, , o, , High saturation: Emotional, tense, hot, comic situations, , o, , Warm colors: Active, leisure, recreation, comic situations, , o, , Cool colors: Efficiency, work, tragic and romantic situations., ,  Proper use of color also requires consideration of the experiences and expectation of the screen viewers, Choosing color for web pages,  Always use minimum colors minimize for faster downloading,  Always consider color in overall context and never in isolation,  Using a similar or same color schemes throughout a Website help the user maintain a sense of place,  Background and Foreground colors should be a different as possible.,  Black color is the most recommended foreground text color, a light-colored background of low intensity (off, white or light gray),  Dark backgrounds are used when establishing contrast between an area of the screen and the main screen body,  High intensity colors used as back-ground such as red, magenta and bright green must be avoided,  Contrasting combinations must be selected while choosing foreground and background colors,  Uniform color should be used in large screen areas,  Large areas of the same color can download faster,  Contrast can be used for smaller element,  Use of flat Web-safe colors is recommended,  Select easily reproducible color while converting to black and white

Page 113 :
Considerations for People with Color-Viewing Deficiencies,  Use contrasting color combinations that can be easily be viewed,  Ensure that the lightness contrast between foreground colors is high.,  Increase the lightness contrast between colors on either end of the visual spectrum (Blues and reds).,  Avoid using the combination of light colors from either end of the spectrum with dark colors methods such as, location, size, or element orientation. Colors chosen must also be legible, Choosing Colors for Textual Graphic Screens, Use adequately and prominently visible for displaying data, text, and symbols on a textual graphical screen (as, opposed to statistical graphics screens to be described shortly) colors selected should also have meaning, contrast,, and harmony.,  Use efficient foreground/background combinations.,  Background color should be selected first.,  More than four colors should not be displayed at one time.,  Use colors in toolbars scarcely.,  Before finalizing a color scheme, test the selected colors., Review Questions, Q. 1What are the Windows characteristics?, Q. 2List out components of Window., Q. 3Explain Tiled Windows with its advantages and disadvantages., Q. 4What are the types of windows., Q. 5Write short note on icon., Q. 6Explain multimedia in details., Q. 7Write short note on Color.