{"id":162,"date":"2018-07-24T09:21:44","date_gmt":"2018-07-24T09:21:44","guid":{"rendered":"http:\/\/csp8.epgpbooks.inflibnet.ac.in\/?post_type=chapter&p=162"},"modified":"2018-08-07T12:37:30","modified_gmt":"2018-08-07T12:37:30","slug":"user-interface-design","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/chapter\/user-interface-design\/","title":{"rendered":"User Interface Design"},"content":{"raw":"
\r\n\r\n \r\n

DESIGN USER INTERFACE DESIGN<\/strong><\/p>\r\n \r\n

User Interface design is the effective design and development of the user interface of a system. The user interface must be user friendly and easy to use else users tend to avoid usage of the system.<\/p>\r\n \r\n

USABILITY\u00a0<\/strong><\/p>\r\n \r\n

Usability is the degree of ease to use a particular system. Usability focuses on the following motives such as:<\/p>\r\n \r\n

\u00b7\u00a0 Ease of learning<\/p>\r\n

\u00b7\u00a0 Ease of use<\/p>\r\n

\u00b7\u00a0 Ease of remembering<\/p>\r\n

\u00b7\u00a0 Subjective satisfaction<\/p>\r\n

\u00b7\u00a0 Efficiency of use<\/p>\r\n

\u00b7\u00a0 Effectiveness of use<\/p>\r\n \r\n

USABILITY ENGINEERING\u00a0<\/strong><\/p>\r\n \r\n

Usability Engineering (UE) processes to build \u201cUsability\u201d into products. Various methods can be used throughout the design lifecycle and these methods are incorporated into design process easily. Methods maintain focus on user throughout design.<\/p>\r\n \r\n

Usability Engineering though incorporates ease of use for the clients; it is not done regularly as developers believe<\/p>\r\n \r\n

\u00b7\u00a0 it takes too long<\/p>\r\n

\u00b7\u00a0 is too expensive<\/p>\r\n

\u00b7\u00a0 is not critical to development<\/p>\r\n

\u00b7\u00a0 they can afford to learn about user problems during \u201clive\u201d use<\/p>\r\n

\u00b7\u00a0 Also developers may not know how <\/em>to do it<\/p>\r\n \r\n

TYPICAL WEB-SITE USABILITY PROBLEMS\u00a0<\/strong><\/p>\r\n \r\n

Some of the website usability issues include:<\/p>\r\n\r\n<\/div>\r\n \r\n

\u00b7\u00a0 Navigation through the website o Knowing where you are o Finding what you want<\/span><\/p>\r\n

\u00b7\u00a0 Structure of web site<\/span><\/p>\r\n

\u00b7\u00a0 Layout<\/span><\/p>\r\n\r\n

\r\n\r\n \r\n

o\u00a0\u00a0 Needs sufficient white space<\/p>\r\n

o\u00a0\u00a0 Use of large graphics<\/p>\r\n \r\n\r\nUSER CENTERED DESIGN\u00a0<\/strong>\r\n\r\n \r\n\r\nUCD is a dialog between the customer and the designer. Rules of thumb for user centered design:\r\n\r\n \r\n\r\n\u00b7\u00a0 \u00a0Get to know and understand the users.\r\n\r\n\u00b7\u00a0 \u00a0Build an application, applying usability principles.\r\n\r\n\u00b7\u00a0 \u00a0Test designs by observing users in a real work setting (environment and work load).\r\n\r\n \r\n\r\n\"\"\r\n

User centre design process starts with the idea for innovation, do research and understand the needs of the users. After understanding the needs and specification of the users, uses case for the system is developed and the interactions between the modules are defined. The UI for the system is designed using prototyping and they are evaluated for their effectiveness. After the design phase, the system is developed and tested by deploying it in real work environment.<\/p>\r\n \r\n\r\nUSABILITY PRINCIPLES<\/strong>\r\n\r\n<\/div>\r\n\"\"\r\n

GUI DESIGN IS MULTI DISCIPLINARY<\/strong><\/p>\r\n \r\n

A team comprises\u00a0 of analyst, designer, technology expert, graphic artist, social and behavioral scientist, programmer<\/span><\/p>\r\n\r\n

\r\n\r\n \r\n\r\nBasic Principles\u00a0<\/strong>\r\n\r\n \r\n\r\nThe basic principles while designing a GUI encompasses the assumption that users,\r\n\r\n \r\n\r\n\u00b7\u00a0 Have not <\/em>read the manual\r\n\r\n\u00b7\u00a0 Have not <\/em>attended training\r\n\r\n\u00b7\u00a0 Do not <\/em>have external help readily at hand\r\n\r\n \r\n

Based on the assumptions, all controls should be clear, understandable and placed in an intuitive location on the screen.<\/p>\r\n \r\n\r\nUSABILITY DESIGN PROCESS\u00a0<\/strong>\r\n\r\n \r\n\r\nUsability design process involves the following phases:\r\n\r\n \r\n\r\n\u00b7\u00a0 \u00a0Use, scenario development.\r\n\r\n\u00b7\u00a0 \u00a0Interface structure design\r\n\r\n\u00b7\u00a0 \u00a0Interface standards design\r\n\r\n\u00b7\u00a0 \u00a0Interface design prototyping\r\n\r\n\u00b7\u00a0 \u00a0Interface evaluation<\/span>\r\n\r\n \r\n\r\n\"\"\r\n\r\nUse Scenario Development\u00a0<\/span><\/strong>\r\n\r\n \r\n\r\n\u00b7\u00a0 \u00a0 Use cases for the scenario are developed.<\/span>\r\n\r\n\u00b7\u00a0 \u00a0 Use scenarios - are just a single thread through a use case.<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\nUI Structure\/Flow of Control\u00a0<\/strong>\r\n\r\n \r\n

UI Structure or the flow of control provides the flow or the navigation through a system. The structure of the system must be organized for ease of use and access by the users. The following example gives an overview for window navigation.<\/p>\r\n\r\n<\/div>\r\n\"\"\r\n

Interface Standards Design\u00a0<\/span><\/strong><\/p>\r\n\r\n

\r\n\r\n \r\n

The interface standards <\/em>are the basic design elements that are common across the screens, forms, and reports within the system.<\/p>\r\n \r\n\r\nInterface Design Prototyping\u00a0<\/strong>\r\n\r\n \r\n\r\nInterface design prototyping comprises of the following techniques such as,\r\n\r\n \r\n\r\n\u00b7\u00a0 \u00a0Storyboard\r\n\r\n\u00b7\u00a0 \u00a0HTML Prototype\r\n\r\n\u00b7\u00a0 \u00a0Language Prototype\r\n\r\n\u00b7\u00a0 \u00a0Interface Evaluation\r\n\r\n \r\n

o\u00a0\u00a0 Heuristic<\/p>\r\n

o\u00a0\u00a0 Walkthrough<\/p>\r\n

o\u00a0\u00a0 Interactive<\/p>\r\n \r\n\r\n\u00b7\u00a0 \u00a0Formal Usability Testing\r\n\r\n \r\n

A good practice for creating UI prototype involves creating low-fidelity prototypes. Some examples are paper prototype, <\/strong>Visio\/HTML\/PPT prototypes.<\/p>\r\n \r\n\r\nInterface\/Dialogue Design\u00a0<\/strong>\r\n\r\n \r\n\r\nThe team needs to focus on the following while interface\/Dialogue design:\r\n\r\n \r\n\r\n\u00b7\u00a0 \u00a0Layout (of buttons, text, table data, \u2026)\r\n\r\n\u00b7\u00a0 \u00a0Structuring data entry (tab order)<\/span>\r\n\r\n\u00b7\u00a0 \u00a0Controlling data input (validation and format controls)<\/span>\r\n\r\n\u00b7\u00a0 \u00a0Feedback (prompting, status, warning, and error messages)<\/span>\r\n\r\n\u00b7\u00a0 \u00a0Dialogue sequencing<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\nDialogue <\/strong>is a sequence of interactions between the system and a user. Dialogue design involves:\r\n\r\n \r\n\r\n\u00b7\u00a0 \u00a0Designing a dialogue sequence\r\n\r\n\u00b7\u00a0 \u00a0Building a prototype\r\n\r\n\u00b7\u00a0 \u00a0Assessing usability\r\n\r\n \r\n

GUI Design <\/strong>Guidelines involves the following activities such as User in control, Consistency, Personalization & Customization, Forgiveness, Feedback and Aesthetics & Usability.<\/p>\r\n \r\n\r\nUser in Control\u00a0<\/strong>\r\n\r\n \r\n

The user\u2019s perception <\/em>of control is the objective while designing a GUI. The users should be in control of the interface. There is no mothering principle; the user should feel that they initiate actions.\u00a0 Feedback from the users is necessary for this to work.<\/p>\r\n \r\n\r\nConsistency\u00a0<\/strong>\r\n\r\n \r\n

The conformity is based on the GUI vendor\u2019s standards. A GUI developer must not be too creative and innovative in the interface design. The conformance to the naming, coding and other GUI-related standards developed are done internally by the organization. This includes the naming and coding of menus, action buttons, screen fields, etc. It also includes standards for the placement of screen objects and consistent use of other GUI elements across applications.<\/p>\r\n \r\n\r\nPersonalization & Customization\u00a0<\/strong>\r\n\r\n \r\n

GUI personalization <\/em>is customization for personal use. E.g. A user reorders and resizes columns in a grid display and saves these changes as preferences. GUI customization <\/em>is an administrative task of tailoring the software to different groups of users. E.g. when the program operates differently for novice and advanced users.<\/p>\r\n \r\n

Forgiveness\u00a0<\/span><\/strong><\/p>\r\n \r\n

A good interface allows users to experiment and make mistakes in a \u201cforgiving\u201d way. Forgiveness encourages interface exploration because the user is allowed to take erroneous routes that can be \u201crolled back\u201d (even to the starting point if necessary). Forgiveness implies facilities such as a multi-level undo operation and the ability to cancel long-running actions.<\/span><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\nFeedback\u00a0<\/strong>\r\n\r\n \r\n

The feedback guideline is a spin-off of the first guideline \u2013 the user in control. The term to be \u201cin control\u201d involves knowing what is going on when the control is temporarily with the program. The developer should build visual and\/or audio cues for every user event. e.g. hourglass, wait indicator to let the user known about the progress visually.<\/p>\r\n \r\n\r\nAesthetics & Usability\u00a0<\/strong>\r\n\r\n \r\n

Aesthetics is about visual appeal. Usability is about the ease, simplicity, efficiency, reliability in using the interface. Simplicity is an additional and related guideline to keep the interface simple and easy to use by the users.<\/p>\r\n \r\n\r\nThe issues to consider regarding aesthetics and usability include:\r\n\r\n \r\n\r\n\u00b7\u00a0 \u00a0the fixation and movement of the human eye,\r\n\r\n\u00b7\u00a0 \u00a0the use of colors,\r\n\r\n\u00b7\u00a0 \u00a0the sense of balance and symmetry,\r\n\r\n\u00b7\u00a0 \u00a0the alignment and spacing of elements,\r\n\r\n\u00b7\u00a0 \u00a0the sense of proportion,\r\n\r\n\u00b7\u00a0 \u00a0the grouping of related elements, etc.\r\n\r\n\u00b7\u00a0 \u00a0the responsiveness of the system\r\n\r\n \r\n\r\n \r\n\r\nSymmetry: Law of Proximity\u00a0<\/strong>\r\n\r\n \r\n

The law of proximity allows us to group elements which are in close proximity. It provides better understanding of the information.<\/p>\r\n \r\n\r\nThe law of closure allows us to see meaning where none existed before. E.g. the IBM logo.\r\n\r\n<\/div>\r\n \r\n

Ten Golden Usability Rules\u00a0<\/span><\/strong><\/p>\r\n \r\n

A great set of guidelines created by Jakob Nielsen in his book <\/span>Usability Engineering<\/em>.<\/span><\/p>\r\n\r\n

\r\n\r\n \r\n\r\n1.\u00a0 Use simple and natural dialog\/language.\u00a0<\/strong>\r\n\r\n \r\n

User interfaces should be simplified as much as possible, since every additional feature or item of information on a screen is one more thing to learn, one more thing to misunderstand, and one more thing to search through. And the GUI should not overdo it with color (= Less is more).<\/p>\r\n \r\n\r\n2.\u00a0 Use language that fits the user group.\u00a0<\/strong>\r\n\r\n \r\n

The language should be based on user\u2019s language and not on the system-oriented terms. Translation from one language to another is more than just words. Time, currency, phrases, metaphors, measurements, etc. must fit the culture of the user group.<\/p>\r\n \r\n\r\n3.\u00a0 Minimize the load on short-term memory.\u00a0<\/strong>\r\n\r\n \r\n

Users should not have to remember information from one part of the dialogue to another. Instructions to the use of the system should be visible or easily retrievable whenever appropriate.<\/p>\r\n \r\n\r\n4.\u00a0 Make the graphical user interface coherent and consistent.\u00a0<\/strong>\r\n\r\n \r\n

The same action should always have the same effect. Users will feel confident in using the system, and they will be encouraged to try out exploratory learning because they already have part of the knowledge needed to operate new parts of the system.<\/p>\r\n \r\n\r\n5.\u00a0 Give the ability to use shortcuts.\u00a0<\/strong>\r\n\r\n \r\n

Accelerators \u2013 unseen by the novices, may often speed up the interaction for the expert users, such as: function keys, command keys, macros, etc.<\/p>\r\n \r\n\r\n6.\u00a0 Give feedback to the user's actions.\u00a0<\/strong>\r\n\r\n \r\n

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.<\/p>\r\n\r\n

    \r\n \t
  • 0.1 sec user feel the system is responding immediately;<\/li>\r\n \t
  • 1 sec. is about the limit users flow of thought will stay interrupted.<\/li>\r\n \t
  • 10 seconds is about the limit to keep users attention focused on the dialogue; so if the user has to wait longer the system should give feedback about the waiting time.<\/li>\r\n<\/ul>\r\n<\/div>\r\n \r\n

    7.\u00a0 Avoid error situations.<\/strong><\/p>\r\n \r\n

    Ask the user if she\/he really wants to do the action especially if the action leads to serious consequences. Avoid having too similar commands in the interface. \u00a0Commands whose actions are opposite should not be placed close to each other.<\/p>\r\n \r\n

    8.\u00a0\u00a0Give clear exit marks.<\/span><\/strong><\/p>\r\n \r\n

    Users often choose actions by mistake and will need a clearly marked \u201cemergency exit\u201d to leave the unwanted state without having to go through an extended dialogue. Cancel should be offered when the operation will take a long time. In the navigation bars, the users should be able to back up.<\/p>\r\n \r\n

    9.\u00a0 Give clear and understandable error messages.<\/strong><\/p>\r\n \r\n

    The error messages displayed should be clear and understandable by the users. The messages should be phrased clearly and should avoid obscure codes. The messages should be precise, not vague or general. The messages should constructively help the user with the system. The messages should be polite and not intimidate the user or put the blame explicitly on the user For example: \u201cILLEGAL, FATAL ACTION, JOB ABORTED!\u201d phrases should not be used.<\/p>\r\n \r\n

    10.\u00a0 Give clear help and understandable documentation.<\/strong><\/p>\r\n \r\n

    Information should be easy to search; it should be focused on the user\u2019s task. The concrete steps that should be carried out must be listed. The help manual should not be too large, it should be precise and easy to understand.<\/p>\r\n \r\n\r\n \r\n\r\nWeb Links<\/strong>\r\n

      \r\n \t
    • https:\/\/en.wikipedia.org\/wiki\/User_interface_design<\/li>\r\n \t
    • https:\/\/www.usability.gov\/what-and-why\/user-interface-design.html<\/li>\r\n \t
    • https:\/\/careerfoundry.com\/en\/blog\/ui-design\/how-to-become-a-ui-designer\/<\/li>\r\n<\/ul>\r\n \r\n\r\nSupporting & Reference Materials<\/strong>\r\n
        \r\n \t
      • Roger S. Pressman, \u201cSoftware Engineering: A Practitioner\u2019s Approach\u201d, Fifth Edition, McGraw Hill, 2001.<\/li>\r\n \t
      • Pankaj Jalote, \u201cAn Integrated Approach to Software Engineering\u201d, Second Edition, Springer Verlag, 1997.<\/li>\r\n \t
      • Ian Sommerville, \u201cSoftware Engineering\u201d, Sixth Edition, Addison Wesley, 2000.<\/li>\r\n<\/ul>","rendered":"
        \n

         <\/p>\n

        DESIGN USER INTERFACE DESIGN<\/strong><\/p>\n

         <\/p>\n

        User Interface design is the effective design and development of the user interface of a system. The user interface must be user friendly and easy to use else users tend to avoid usage of the system.<\/p>\n

         <\/p>\n

        USABILITY\u00a0<\/strong><\/p>\n

         <\/p>\n

        Usability is the degree of ease to use a particular system. Usability focuses on the following motives such as:<\/p>\n

         <\/p>\n

        \u00b7\u00a0 Ease of learning<\/p>\n

        \u00b7\u00a0 Ease of use<\/p>\n

        \u00b7\u00a0 Ease of remembering<\/p>\n

        \u00b7\u00a0 Subjective satisfaction<\/p>\n

        \u00b7\u00a0 Efficiency of use<\/p>\n

        \u00b7\u00a0 Effectiveness of use<\/p>\n

         <\/p>\n

        USABILITY ENGINEERING\u00a0<\/strong><\/p>\n

         <\/p>\n

        Usability Engineering (UE) processes to build \u201cUsability\u201d into products. Various methods can be used throughout the design lifecycle and these methods are incorporated into design process easily. Methods maintain focus on user throughout design.<\/p>\n

         <\/p>\n

        Usability Engineering though incorporates ease of use for the clients; it is not done regularly as developers believe<\/p>\n

         <\/p>\n

        \u00b7\u00a0 it takes too long<\/p>\n

        \u00b7\u00a0 is too expensive<\/p>\n

        \u00b7\u00a0 is not critical to development<\/p>\n

        \u00b7\u00a0 they can afford to learn about user problems during \u201clive\u201d use<\/p>\n

        \u00b7\u00a0 Also developers may not know how <\/em>to do it<\/p>\n

         <\/p>\n

        TYPICAL WEB-SITE USABILITY PROBLEMS\u00a0<\/strong><\/p>\n

         <\/p>\n

        Some of the website usability issues include:<\/p>\n<\/div>\n

         <\/p>\n

        \u00b7\u00a0 Navigation through the website o Knowing where you are o Finding what you want<\/span><\/p>\n

        \u00b7\u00a0 Structure of web site<\/span><\/p>\n

        \u00b7\u00a0 Layout<\/span><\/p>\n

        \n

         <\/p>\n

        o\u00a0\u00a0 Needs sufficient white space<\/p>\n

        o\u00a0\u00a0 Use of large graphics<\/p>\n

         <\/p>\n

        USER CENTERED DESIGN\u00a0<\/strong><\/p>\n

         <\/p>\n

        UCD is a dialog between the customer and the designer. Rules of thumb for user centered design:<\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0Get to know and understand the users.<\/p>\n

        \u00b7\u00a0 \u00a0Build an application, applying usability principles.<\/p>\n

        \u00b7\u00a0 \u00a0Test designs by observing users in a real work setting (environment and work load).<\/p>\n

         <\/p>\n

        \"\"<\/p>\n

        User centre design process starts with the idea for innovation, do research and understand the needs of the users. After understanding the needs and specification of the users, uses case for the system is developed and the interactions between the modules are defined. The UI for the system is designed using prototyping and they are evaluated for their effectiveness. After the design phase, the system is developed and tested by deploying it in real work environment.<\/p>\n

         <\/p>\n

        USABILITY PRINCIPLES<\/strong><\/p>\n<\/div>\n

        \"\"<\/p>\n

        GUI DESIGN IS MULTI DISCIPLINARY<\/strong><\/p>\n

         <\/p>\n

        A team comprises\u00a0 of analyst, designer, technology expert, graphic artist, social and behavioral scientist, programmer<\/span><\/p>\n

        \n

         <\/p>\n

        Basic Principles\u00a0<\/strong><\/p>\n

         <\/p>\n

        The basic principles while designing a GUI encompasses the assumption that users,<\/p>\n

         <\/p>\n

        \u00b7\u00a0 Have not <\/em>read the manual<\/p>\n

        \u00b7\u00a0 Have not <\/em>attended training<\/p>\n

        \u00b7\u00a0 Do not <\/em>have external help readily at hand<\/p>\n

         <\/p>\n

        Based on the assumptions, all controls should be clear, understandable and placed in an intuitive location on the screen.<\/p>\n

         <\/p>\n

        USABILITY DESIGN PROCESS\u00a0<\/strong><\/p>\n

         <\/p>\n

        Usability design process involves the following phases:<\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0Use, scenario development.<\/p>\n

        \u00b7\u00a0 \u00a0Interface structure design<\/p>\n

        \u00b7\u00a0 \u00a0Interface standards design<\/p>\n

        \u00b7\u00a0 \u00a0Interface design prototyping<\/p>\n

        \u00b7\u00a0 \u00a0Interface evaluation<\/span><\/p>\n

         <\/p>\n

        \"\"<\/p>\n

        Use Scenario Development\u00a0<\/span><\/strong><\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0 Use cases for the scenario are developed.<\/span><\/p>\n

        \u00b7\u00a0 \u00a0 Use scenarios – are just a single thread through a use case.<\/span><\/p>\n<\/div>\n

        \n

         <\/p>\n

        UI Structure\/Flow of Control\u00a0<\/strong><\/p>\n

         <\/p>\n

        UI Structure or the flow of control provides the flow or the navigation through a system. The structure of the system must be organized for ease of use and access by the users. The following example gives an overview for window navigation.<\/p>\n<\/div>\n

        \"\"<\/p>\n

        Interface Standards Design\u00a0<\/span><\/strong><\/p>\n

        \n

         <\/p>\n

        The interface standards <\/em>are the basic design elements that are common across the screens, forms, and reports within the system.<\/p>\n

         <\/p>\n

        Interface Design Prototyping\u00a0<\/strong><\/p>\n

         <\/p>\n

        Interface design prototyping comprises of the following techniques such as,<\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0Storyboard<\/p>\n

        \u00b7\u00a0 \u00a0HTML Prototype<\/p>\n

        \u00b7\u00a0 \u00a0Language Prototype<\/p>\n

        \u00b7\u00a0 \u00a0Interface Evaluation<\/p>\n

         <\/p>\n

        o\u00a0\u00a0 Heuristic<\/p>\n

        o\u00a0\u00a0 Walkthrough<\/p>\n

        o\u00a0\u00a0 Interactive<\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0Formal Usability Testing<\/p>\n

         <\/p>\n

        A good practice for creating UI prototype involves creating low-fidelity prototypes. Some examples are paper prototype, <\/strong>Visio\/HTML\/PPT prototypes.<\/p>\n

         <\/p>\n

        Interface\/Dialogue Design\u00a0<\/strong><\/p>\n

         <\/p>\n

        The team needs to focus on the following while interface\/Dialogue design:<\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0Layout (of buttons, text, table data, \u2026)<\/p>\n

        \u00b7\u00a0 \u00a0Structuring data entry (tab order)<\/span><\/p>\n

        \u00b7\u00a0 \u00a0Controlling data input (validation and format controls)<\/span><\/p>\n

        \u00b7\u00a0 \u00a0Feedback (prompting, status, warning, and error messages)<\/span><\/p>\n

        \u00b7\u00a0 \u00a0Dialogue sequencing<\/span><\/p>\n<\/div>\n

        \n

         <\/p>\n

        Dialogue <\/strong>is a sequence of interactions between the system and a user. Dialogue design involves:<\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0Designing a dialogue sequence<\/p>\n

        \u00b7\u00a0 \u00a0Building a prototype<\/p>\n

        \u00b7\u00a0 \u00a0Assessing usability<\/p>\n

         <\/p>\n

        GUI Design <\/strong>Guidelines involves the following activities such as User in control, Consistency, Personalization & Customization, Forgiveness, Feedback and Aesthetics & Usability.<\/p>\n

         <\/p>\n

        User in Control\u00a0<\/strong><\/p>\n

         <\/p>\n

        The user\u2019s perception <\/em>of control is the objective while designing a GUI. The users should be in control of the interface. There is no mothering principle; the user should feel that they initiate actions.\u00a0 Feedback from the users is necessary for this to work.<\/p>\n

         <\/p>\n

        Consistency\u00a0<\/strong><\/p>\n

         <\/p>\n

        The conformity is based on the GUI vendor\u2019s standards. A GUI developer must not be too creative and innovative in the interface design. The conformance to the naming, coding and other GUI-related standards developed are done internally by the organization. This includes the naming and coding of menus, action buttons, screen fields, etc. It also includes standards for the placement of screen objects and consistent use of other GUI elements across applications.<\/p>\n

         <\/p>\n

        Personalization & Customization\u00a0<\/strong><\/p>\n

         <\/p>\n

        GUI personalization <\/em>is customization for personal use. E.g. A user reorders and resizes columns in a grid display and saves these changes as preferences. GUI customization <\/em>is an administrative task of tailoring the software to different groups of users. E.g. when the program operates differently for novice and advanced users.<\/p>\n

         <\/p>\n

        Forgiveness\u00a0<\/span><\/strong><\/p>\n

         <\/p>\n

        A good interface allows users to experiment and make mistakes in a \u201cforgiving\u201d way. Forgiveness encourages interface exploration because the user is allowed to take erroneous routes that can be \u201crolled back\u201d (even to the starting point if necessary). Forgiveness implies facilities such as a multi-level undo operation and the ability to cancel long-running actions.<\/span><\/p>\n<\/div>\n

        \n

         <\/p>\n

        Feedback\u00a0<\/strong><\/p>\n

         <\/p>\n

        The feedback guideline is a spin-off of the first guideline \u2013 the user in control. The term to be \u201cin control\u201d involves knowing what is going on when the control is temporarily with the program. The developer should build visual and\/or audio cues for every user event. e.g. hourglass, wait indicator to let the user known about the progress visually.<\/p>\n

         <\/p>\n

        Aesthetics & Usability\u00a0<\/strong><\/p>\n

         <\/p>\n

        Aesthetics is about visual appeal. Usability is about the ease, simplicity, efficiency, reliability in using the interface. Simplicity is an additional and related guideline to keep the interface simple and easy to use by the users.<\/p>\n

         <\/p>\n

        The issues to consider regarding aesthetics and usability include:<\/p>\n

         <\/p>\n

        \u00b7\u00a0 \u00a0the fixation and movement of the human eye,<\/p>\n

        \u00b7\u00a0 \u00a0the use of colors,<\/p>\n

        \u00b7\u00a0 \u00a0the sense of balance and symmetry,<\/p>\n

        \u00b7\u00a0 \u00a0the alignment and spacing of elements,<\/p>\n

        \u00b7\u00a0 \u00a0the sense of proportion,<\/p>\n

        \u00b7\u00a0 \u00a0the grouping of related elements, etc.<\/p>\n

        \u00b7\u00a0 \u00a0the responsiveness of the system<\/p>\n

         <\/p>\n

         <\/p>\n

        Symmetry: Law of Proximity\u00a0<\/strong><\/p>\n

         <\/p>\n

        The law of proximity allows us to group elements which are in close proximity. It provides better understanding of the information.<\/p>\n

         <\/p>\n

        The law of closure allows us to see meaning where none existed before. E.g. the IBM logo.<\/p>\n<\/div>\n

         <\/p>\n

        Ten Golden Usability Rules\u00a0<\/span><\/strong><\/p>\n

         <\/p>\n

        A great set of guidelines created by Jakob Nielsen in his book <\/span>Usability Engineering<\/em>.<\/span><\/p>\n

        \n

         <\/p>\n

        1.\u00a0 Use simple and natural dialog\/language.\u00a0<\/strong><\/p>\n

         <\/p>\n

        User interfaces should be simplified as much as possible, since every additional feature or item of information on a screen is one more thing to learn, one more thing to misunderstand, and one more thing to search through. And the GUI should not overdo it with color (= Less is more).<\/p>\n

         <\/p>\n

        2.\u00a0 Use language that fits the user group.\u00a0<\/strong><\/p>\n

         <\/p>\n

        The language should be based on user\u2019s language and not on the system-oriented terms. Translation from one language to another is more than just words. Time, currency, phrases, metaphors, measurements, etc. must fit the culture of the user group.<\/p>\n

         <\/p>\n

        3.\u00a0 Minimize the load on short-term memory.\u00a0<\/strong><\/p>\n

         <\/p>\n

        Users should not have to remember information from one part of the dialogue to another. Instructions to the use of the system should be visible or easily retrievable whenever appropriate.<\/p>\n

         <\/p>\n

        4.\u00a0 Make the graphical user interface coherent and consistent.\u00a0<\/strong><\/p>\n

         <\/p>\n

        The same action should always have the same effect. Users will feel confident in using the system, and they will be encouraged to try out exploratory learning because they already have part of the knowledge needed to operate new parts of the system.<\/p>\n

         <\/p>\n

        5.\u00a0 Give the ability to use shortcuts.\u00a0<\/strong><\/p>\n

         <\/p>\n

        Accelerators \u2013 unseen by the novices, may often speed up the interaction for the expert users, such as: function keys, command keys, macros, etc.<\/p>\n

         <\/p>\n

        6.\u00a0 Give feedback to the user’s actions.\u00a0<\/strong><\/p>\n

         <\/p>\n

        The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.<\/p>\n

          \n
        • 0.1 sec user feel the system is responding immediately;<\/li>\n
        • 1 sec. is about the limit users flow of thought will stay interrupted.<\/li>\n
        • 10 seconds is about the limit to keep users attention focused on the dialogue; so if the user has to wait longer the system should give feedback about the waiting time.<\/li>\n<\/ul>\n<\/div>\n

           <\/p>\n

          7.\u00a0 Avoid error situations.<\/strong><\/p>\n

           <\/p>\n

          Ask the user if she\/he really wants to do the action especially if the action leads to serious consequences. Avoid having too similar commands in the interface. \u00a0Commands whose actions are opposite should not be placed close to each other.<\/p>\n

           <\/p>\n

          8.\u00a0\u00a0Give clear exit marks.<\/span><\/strong><\/p>\n

           <\/p>\n

          Users often choose actions by mistake and will need a clearly marked \u201cemergency exit\u201d to leave the unwanted state without having to go through an extended dialogue. Cancel should be offered when the operation will take a long time. In the navigation bars, the users should be able to back up.<\/p>\n

           <\/p>\n

          9.\u00a0 Give clear and understandable error messages.<\/strong><\/p>\n

           <\/p>\n

          The error messages displayed should be clear and understandable by the users. The messages should be phrased clearly and should avoid obscure codes. The messages should be precise, not vague or general. The messages should constructively help the user with the system. The messages should be polite and not intimidate the user or put the blame explicitly on the user For example: \u201cILLEGAL, FATAL ACTION, JOB ABORTED!\u201d phrases should not be used.<\/p>\n

           <\/p>\n

          10.\u00a0 Give clear help and understandable documentation.<\/strong><\/p>\n

           <\/p>\n

          Information should be easy to search; it should be focused on the user\u2019s task. The concrete steps that should be carried out must be listed. The help manual should not be too large, it should be precise and easy to understand.<\/p>\n

           <\/p>\n

           <\/p>\n

          Web Links<\/strong><\/p>\n

            \n
          • https:\/\/en.wikipedia.org\/wiki\/User_interface_design<\/li>\n
          • https:\/\/www.usability.gov\/what-and-why\/user-interface-design.html<\/li>\n
          • https:\/\/careerfoundry.com\/en\/blog\/ui-design\/how-to-become-a-ui-designer\/<\/li>\n<\/ul>\n

             <\/p>\n

            Supporting & Reference Materials<\/strong><\/p>\n

              \n
            • Roger S. Pressman, \u201cSoftware Engineering: A Practitioner\u2019s Approach\u201d, Fifth Edition, McGraw Hill, 2001.<\/li>\n
            • Pankaj Jalote, \u201cAn Integrated Approach to Software Engineering\u201d, Second Edition, Springer Verlag, 1997.<\/li>\n
            • Ian Sommerville, \u201cSoftware Engineering\u201d, Sixth Edition, Addison Wesley, 2000.<\/li>\n<\/ul>\n","protected":false},"author":4,"menu_order":16,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["dr-r-baskaran"],"pb_section_license":""},"chapter-type":[],"contributor":[58],"license":[],"class_list":["post-162","chapter","type-chapter","status-publish","hentry","contributor-dr-r-baskaran"],"part":3,"_links":{"self":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/pressbooks\/v2\/chapters\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/wp\/v2\/users\/4"}],"version-history":[{"count":6,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/pressbooks\/v2\/chapters\/162\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/pressbooks\/v2\/chapters\/162\/revisions\/391"}],"part":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/pressbooks\/v2\/chapters\/162\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/pressbooks\/v2\/chapter-type?post=162"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/wp\/v2\/contributor?post=162"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp8\/wp-json\/wp\/v2\/license?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}