Ui Design
CS1015 User Interface Design
CS1015 USER INTERFACE DESIGN AIM To implement the basics and in-depth knowledge about UID. It enables the students to take up the design the user interface, design, menu creation and windows creation and connection between menu and windows. OBJECTIVES • To study the concept of menus, windows, interfaces. • To study about business functions. • To study the characteristics and components of windows. • To study the various controls for the windows. • To study about various problems in windows design with color, text, graphics. • To study the testing methods UNIT I 8 Introduction-Importance-Human-Computer interface-characteristics of graphics interface-Direct manipulation graphical system - web user interface-popularitycharacteristic & principles. UNIT II 10 User interface design process- obstacles-usability-human characteristics in design Human interaction speed-business functions-requirement analysis-Direct-Indirect methods-basic business functions-Design standards-system timings - Human consideration in screen design - structures of menus - functions of menus-contents of menu-formatting -phrasing the menu - selecting menu choice-navigating menus-graphical menus. UNIT III 9 Windows: Characteristics-components-presentation styles-types-managementsorganizations-operations-web systems-device-based controls: characteristics-Screen based controls: operate control - text boxes-selection control-combination control-custom control-presentation control. UNIT IV 9 Text for web pages - effective feedback-guidance & assistance-Internationalizationaccesssibility-Icons-Image-Multimedia -coloring. UNIT V Windows layout-test :prototypes - kinds of tests - retest - Information search visualization - Hypermedia - www - Software tools. 9
TOTAL : 45 TEXT BOOK 1. Wilbent. O. Galitz ,“The Essential Guide to User Interface Design”, John Wiley& Sons, 2001. REFERENCES 1. Ben Sheiderman, “Design the User Interface”, Pearson Education, 1998. 2. Alan Cooper, “The Essential of User Interface Design”, Wiley – Dream Tech Ltd., 2002. © Einstein College of Engineering
CS1015 User Interface Design
UNIT I Introduction Defining the User Interface It is the parts of the computer and its software that people can touch , feel, talk to ,or otherwise understand and direct. It is a sub field to Human-computer interaction study. User interface design is a subset of a field of study called human computer interaction.(HCI). HCI is the study,planning and design of how people and computers work together.User interface has 2 components: Input, Output Input is how a person communicates his or her needs or desires to the computer. Ex. Keybord,mouse. Output is how the computer conveys its results of its computations and requirements to the user. Ex. Display screen Importance of good design: The Importance of Good Design Its very important to our users. It is the window to view the capabilities of the system The reasons for ineffient and confusing design is, No care on design Not enough time Not knowing what really makes good design Not possessing common sense. A well designed interface and screen is very important to the users.it is the main window to view the capabilities of the system.A screen design affect a person in a variety of ways. If the design is confusing and inefficient, people will have greater difficulty and make more mistakes,Chase some people away from the system.It also leads to aggravation,frustration and increased stress. Benefits of good design: Poor clarity forced screens force the users to take more time to process. The screen clarity and reability is done by making screens less crowded.Seperate items are placed in separate lines. Reformatting enquiry screens with good design principles Increase productivity Good recognization of the system
© Einstein College of Engineering
CS1015 User Interface Design
Human Computer Interface: The human–computer interface can be described as the point of communication between the human user and the computer. The flow of information between the human and computer is defined as the loop of interaction. The loop of interaction has several aspects to it including: Task Environment: The conditions and goals set upon the user. Machine Environment: The environment that the computer is connected to, i.e a laptop in a college student's dorm room. Areas of the Interface: Non-overlapping areas involve processes of the human and computer not pertaining to their interaction. Meanwhile, the overlapping areas only concern themselves with the processes pertaining to their interaction. Input Flow: The flow of information that begins in the task environment, when the user has some task that requires using their computer. Output: The flow of information that originates in the machine environment. Feedback: Loops through the interface that evaluate, moderate, and confirm processes as they pass from the human through the interface to the computer and back.
Introduction of the Graphical User Interface: A graphical user interface (GUI), often pronounced gooey, is a type of user interface that allows users to interact with programs in more ways than typing such as computers.Graphical user interfaces, such as Microsoft Windows and the one used by the Apple Macintosh, feature the following basic components: · pointer : A symbol that appears on the display screen and that you move to select objects and commands. Usually, the pointer appears as a small angled arrow. Text processing applications, however, use an I-beam pointer that is shaped like a capital I. · pointing device : A device, such as a mouse or trackball, that enables you to select objects on the display screen. · icons : Small pictures that represent commands, files, or windows. By moving the pointer to the icon and pressing a mouse button, you can execute a command or convert the icon into a window. You can also move the icons around the display screen as if they were real objects on your desk. · desktop : The area on the display screen where icons are grouped is often referred to as the desktop because the icons are intended to represent real objects on a real desktop. · windows: You can divide the screen into different areas. In each window, you can run a different program or display a different file. You can move windows around the display screen, and change their shape and size at will. · menus : Most graphical user interfaces let you execute commands by selecting a choice from a menu.
© Einstein College of Engineering
CS1015 User Interface Design
Advantages Symbols recognized faster than text Faster learning Faster use and problem solving Easier remembering More natural Exploits visual/spatial cues Fosters more concrete thinking Provides context Fewer errors Increased feeling of control Immediate feedback Predictable system responses Easily reversible actions Less anxiety concerning use More attractive May consume less space Replaces national Easily augmented with text Low typing requirements Smooth transition from command language system Disadvantages Greater design complexity Learning still necessary Lack of experimentally-derived design principles Inconsistencies in technique and terminology Working domain is the present Not always familiar Human comprehension limitations Window manipulation requirements Production limitations Few tested icons exist Inefficient for touch typists Inefficient for expert users Not always the preferred style of interaction Not always the fastest style of interaction Increased chances of clutter and confusion The futz and fiddle May consume more screen space Hardware limitations
© Einstein College of Engineering
CS1015 User Interface Design
Characteristics Of The Graphical User Interface: Sophisticated Visual Presentation Pick-and-Click Interaction Restricted Set of Interface Options Visualization Object Orientation Use of Recognition Memory Concurrent Performance of Functions
Direct Manipulation System: Direction manipulation system is one in which the user is able to select an object and then specify which actions are to be taken. System is portrayed as extension of real world Continuous visibility of objects and actions Virtual reality WYSIWYG What you see is what you get Actions are rapid and incremental with visible display of results Incremental actions are easily reversible Example: The "trash" on the desktop is an excellent example of direct manipulation within computer systems. Users can see both the trash and the files or folders they want to move to the trash. They then physically select the files and drag them to the trash can. While the user is doing this, all of the selected files move as well, illustrating which items the user has selected. When the mouse is placed over the trash, there is a shading indication that it has been selected. The user then has to release the mouse button to move the files to the trash. If there are many files, a dialogue box will show up illustrating the progress of moving files to the trash. Once the action is completed, the files are no longer visible in their original location. The user can change her mind at any time while dragging the files to the trash. Even after placing them there, they can as easily be taken out of the trash and put back in place. Indirect Manipulation Results from: Operations being difficult to conceptualize in the graphical system Graphics capability of the system being limited Amount of space available for placing manipulation controls in the window border being limited Difficulties for people to learn and remember all the necessary operations and actions
© Einstein College of Engineering
CS1015 User Interface Design
Web User Interface: Interaction Styles The Graphical User Interface The Popularity of Graphics The Concept of Direct Manipulation Advantages / Disadvantages Characteristics of the Graphical User Interface The Web User Interface The Popularity of the Web Characteristics of a Web Interface The Merging of Graphical Business Systems and the Web Characteristics of an Intranet vs. Internet Extranets Principles of User Interface Design Principles for the Xerox STAR General Principles The Blossoming of the World Wide Web: The World Wide Web, abbreviated as WWW and commonly known as the Web, is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks. Functions of WWW: The terms Internet and World Wide Web are often used in every-day speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global system of interconnected computer networks. In contrast, the Web is one of the services that runs on the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs. In short, the Web is an application running on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of communication messages, behind the scenes, in order to fetch and display it. First, the server-name portion of the URL is resolved into an IP address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image. Statistics measuring a website's popularity are usually based either on the number of page views or associated server 'hits' (file requests) that take place. While receiving these files from the web server, browsers may progressively render the page onto the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page
© Einstein College of Engineering
CS1015 User Interface Design composition languages. Any images and other resources are incorporated to produce the onscreen web page that the user sees. Most web pages contain hyperlinks to other related pages and perhaps to downloadable files, source documents, definitions and other web resources. Such a collection of useful, related resources, interconnected via hypertext links is dubbed a web of information. Publication on the Internet created what Tim Berners-Lee first called the WorldWideWeb (in its original CamelCase, which was subsequently discarded) in November 1990.
The Popularity of the Web:
The Web we know now, which loads into a browser window in essentially static screenfulls, is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to appear, and we are just starting to see how that embryo might develop. The Web will be understood not as screenfulls of text and graphics but as a transport mechanism, the ether through which interactivity happens. It will [...] appear on your computer screen, [...] on your TV set [...] your car dashboard [...] your cell phone [...] hand-held game machines [...] maybe even your microwave oven.Her use of the term deals mainly with Web design and aesthetics; she argues that the Web is "fragmenting" due to the widespread use of portable Web-ready devices. Her article is aimed at designers, reminding them to code for an everincreasing variety of hardware. As such, her use of the term hints at – but does not directly relate to – the current uses of the term. The term did not resurface until 2003. These authors focus on the concepts currently associated with the term where, as Scott Dietzen puts it, "the Web becomes a universal, standards-based integration platform".In 2004, the term began its rise in popularity when O'Reilly Media and MediaLive hosted the first Web 2.0 conference. In their opening remarks, John Battelle and Tim O'Reilly outlined their definition of the "Web as Platform", where software applications are built upon the Web as opposed to upon the desktop. The unique aspect of this migration, they argued, is that "customers are building your business for you". [10] They argued that the activities of users generating content (in the form of ideas, text, videos, or pictures) could be "harnessed" to create value.O'Reilly et al. contrasted Web 2.0 with what they called "Web 1.0". They associated Web 1.0 with the business models of Netscape and the Encyclopedia Britannica Online. For example, Netscape framed "the web as platform" in terms of the old software paradigm: their flagship product was the web browser, a desktop application, and their strategy was to use their dominance in the browser market to establish a market for high-priced server products. Control over standards for displaying content and applications in the browser would, in theory, give Netscape the kind of market power enjoyed by Microsoft in the PC market. Much like the "horseless carriage" framed the automobile as an extension of the familiar, Netscape promoted a "webtop" to replace the desktop, and planned to populate that webtop with information updates and applets pushed to the webtop by information providers who would purchase Netscape servers. In short, Netscape focused on creating software, updating it on occasion, and distributing it to the end users. O'Reilly contrasted this with Google, a company which did not at the time focus on producing software, such as a browser, but instead focused on providing a service based on data. The data being the links Web page authors make between sites. Google exploits this user-generated content to offer Web search based on reputation through its "page
© Einstein College of Engineering
CS1015 User Interface Design rank" algorithm. Unlike software, which undergoes scheduled releases, such services are constantly updated, a process called "the perpetual beta". A similar difference can be seen between the Encyclopedia Britannica Online and Wikipedia: while the Britannica relies upon experts to create articles and releases them periodically in publications, Wikipedia relies on trust in anonymous users to constantly and quickly build content. Wikipedia is not based on expertise but rather an adaptation of the open source software adage "given enough eyeballs, all bugs are shallow", and it produces and updates articles constantly. O'Reilly's Web 2.0 conferences have been held every year since 2004, attracting entrepreneurs, large companies, and technology reporters. In terms of the lay public, the term Web 2.0 was largely championed by bloggers and by technology journalists, culminating in the 2006 TIME magazine Person of The Year – "You". That is, TIME selected the masses of users who were participating in content creation on social networks, blogs, wikis, and media sharing sites. The cover story author Lev Grossman explains: It's a story about community and collaboration on a scale never seen before. It's about the cosmic compendium of knowledge Wikipedia and the million-channel people's network YouTube and the online metropolis MySpace. It's about the many wresting power from the few and helping one another for nothing and how that will not only change the world, but also change the way the world changes. Since that time, Web 2.0 has found a place in the lexicon; in 2009 Global Language Monitor declared it to be the one-millionth English word. Characteristics of a Web Interface: Web 2.0 websites allow users to do more than just retrieve information. They can build on the interactive facilities of "Web 1.0" to provide "Network as platform" computing, allowing users to run software-applications entirely through a browser. Users can own the data on a Web 2.0 site and exercise control over that data. These sites may have an "Architecture of participation" that encourages users to add value to the application as they use it. The concept of Web-as-participation-platform captures many of these characteristics. Bart Decrem, a founder and former CEO of Flock, calls Web 2.0 the "participatory Web" and regards the Web-as-information-source as Web 1.0. The impossibility of excluding group-members who don’t contribute to the provision of goods from sharing profits gives rise to the possibility that rational members will prefer to withhold their contribution of effort and free-ride on the contribution of others. This requires what is sometimes called Radical Trust by the management of the website. According to Best, the characteristics of Web 2.0 are: rich user experience, user participation, dynamic content, metadata, web standards and scalability. Further characteristics, such as openness, freedom and collective intelligence by way of user participation, can also be viewed as essential attributes of Web 2.0.
© Einstein College of Engineering
CS1015 User Interface Design
Principles Of User Interface Design: General Principles Accessibility Aesthetically Pleasing Availability Clarity Compatibility Configurability Consistency Control Directness Efficiency Familiarity Flexibility Forgiveness Immersion Obviousness Operability Perceptibility Positive First Impression Predictability Recovery Responsiveness Safety Simplicity Transparency Trade-offs Visibility Accessibility Systems should be designed to be usable, without modification, by as many people as possible. Aesthetically Pleasing Provide visual appeal by: Providing meaningful contrast between screen elements Creating groupings Aligning screen elements and groups Providing three-dimensional representation Using color and graphics effectively and simply Availability Make all objects available at all times. Avoid the use of modes. Clarity
© Einstein College of Engineering
CS1015 User Interface Design
The interface should be visually, conceptually, and linguistically clear, including: Visual elements Functions Metaphors Words and text Compatibility Provide compatibility with the following: The user The task and job The product Adopt the user’s perspective. Configurability Permit easy personalization, configuration, and reconfiguration of settings. Enhances a sense of control Encourages an active role in understanding Consistency A system should look, act, and operate the same throughout. Similar components should: Have a similar look Have similar uses Operate similarly The same action should always yield the same result. The function of elements should not change. The position of standard elements should not change. Inconsistency causes: More specialization by system users Greater demand for higher skills More preparation time and less production time More frequent changes in procedures More error-tolerant systems (because errors are more likely) More kinds of documentation More time to find information in documents More unlearning and learning when systems are changed More demands on supervisors and managers More things to do wrong Control The user must control the interaction. The context maintained must be from the perspective of the user. The means to achieve goals should be flexible and compatible with the user's skills, experiences, habits and preferences. Avoid modes because they constrain the actions available. Permit the user to customize the interface but provide defaults. Directness Provide direct ways to accomplish tasks.
© Einstein College of Engineering
CS1015 User Interface Design
Available alternatives should be visible. The effect of actions on objects should be visible.
Efficiency Minimize eye and hand movements, and other control actions. Transitions between various system controls should flow easily and freely. Navigation paths should be as short as possible. Eye movement through a screen should be obvious and sequential. Anticipate the user’s wants and needs whenever possible. Familiarity Employ familiar concepts and use a language that is familiar to the user Keep the interface natural, mimicking the user’s behavior patterns Use real-world metaphors Flexibility A system must be sensitive to the differing needs of its users, enabling a level and type of performance based upon: Each user’s knowledge and skills Each user’s experience Each user’s personal preference Each user’s habits The conditions at that moment Forgiveness Tolerate and forgive common and unavoidable human errors Prevent errors from occurring whenever possible Protect against possible catastrophic errors When an error does occur, provide constructive messages Immersion A state of mental focus so intense that awareness and sense of the real world is lost Foster immersion within tasks Obviousness A system should be easily learned and understood: What to look at What it is What to do When to do it Where to do it Why to do it How to do it Flow of actions, response, visual presentations, and information should be: In a sensible order Easy to recollect Easy to place in context Operability
© Einstein College of Engineering
CS1015 User Interface Design
Ensure that a system's design can be used by everyone, regardless of a person's physical capabilities. Perceptibility Ensure that a system's design can be perceived, regardless of a person's sensory capabilities. Positive First Impression Create a positive first impression of the system. Points of prospect Minimal barriers Progressive lures Predictability The user should be able to anticipate the natural progression of each task. Provide distinct and recognizable screen elements Provide cues to the result of an action to be performed All expectations should be fulfilled uniformly and completely. Recovery A system should permit: Commands or actions to be abolished or reversed Immediate return to a certain point if difficulties arise Ensure that users never lose their work as a result of: An error on their part Hardware, software, or communication problems Responsiveness The system must rapidly respond to the user’s requests. Provide immediate acknowledgment for all actions: Visual Textual Auditory Safety Protect the user from making mistakes. Provide visual cues Reminders Lists of choices Other aids as necessary Simplicity Provide as simple an interface as possible. Five ways to provide simplicity: Use progressive disclosure, hiding things until they are needed Present common and necessary functions first Prominently feature important functions Hide more sophisticated and less frequently used functions Provide defaults Minimize screen alignment points Make common actions simple at the expense of uncommon actions being made harder Provide uniformity and consistency
© Einstein College of Engineering
CS1015 User Interface Design
Transparency Permit the user to focus on the task or job, without concern for the mechanics of the interface. Workings and reminders of workings inside the computer should be invisible to the user Trade-Offs Final design will be based on a series of trade-offs balancing often-conflicting design principles. People’s requirements always take precedence over technical requirements. Visibility A system's status and methods of use should be clearly visible. Improve visibility through Hierarchical organization Context sensitivity Unit II: What Comprises Good Design? Understanding of: people, how we see, understand, and think how information must be visually presented to enhance human acceptance and comprehension how eye and hand movements must flow to minimize the potential for fatigue and injury Must consider the capabilities and limitations of the hardware and software of the human-computer interface Guidelines for the Interface Design Process Know your user or client Understand the basic business function Understand the principles of good screen design Develop system menus and navigation schemes Select the proper kinds of windows Select the proper device-based controls Choose the proper screen-based controls Write clear text and messages Provide effective feedback and guidance and assistance Provide effective internationalization and accessibility Create meaningful graphics, icons, and images Choose the proper colors Organize and layout windows and pages Test, test, and retest Graphical User Interface: “A graphical system consists of objects and actions. Objects are what people see on the screen. They are manipulated as a single unit. A well-designed system keeps users focused on the objects, not on how to carry out actions.”
© Einstein College of Engineering
CS1015 User Interface Design
Persistence: the maintenance of a state once it is established. An object’s state should always be automatically preserved when the user changes it.
Obstacles in User Interface Design process: The general observations in design process: Pitfalls are, No early analysis and understanding of the user’s needs and expectations A focus on using design features or components that are neat. Little or no creation of design element prototypes. No usability testing. No common design team vision of user interface design goals. Poor communication between members of the development team. Nobody ever gets it right the first time. Development is chock-full of surprises. Good design requires living in a sea of changes. Making contracts to ignore change will never eliminate the need for change. Even if you have made the best the system humanly possible, people will still make mistakes when using it. Designers need good tools You must have behavioral design goals like performance design goals
Pit falls can be eliminated by the following design commandments: Gain a complete understanding of users and their tasks Solicit early and ongoing user involvement Perform rapid prototyping and testing Modify and iterate the design as much as necessary Integrate the design of all the system components
Usability: Common Usability Problems: Ambiguous menus and icons Languages that permit only single-direction movement through a system Input and direct manipulation limits Highlighting and selection limitations Unclear step sequences More steps to manage the interface than to perform tasks Complex linkage between and within applications Inadequate feedback and confirmation Lack of system anticipation and intelligence
© Einstein College of Engineering
CS1015 User Interface Design
Inadequate error messages, help, tutorials, and documentation How to Measure Usability: How effective is the interface? Can the required range of tasks be accomplished. How learnable is the interface? How flexible is the interface? What are the attitudes of the users? Principles of Good Screen Design: A well-designed screen: Reflects the capabilities, needs, and tasks of its users Is developed within the physical constraints imposed by the hardware on which it is displayed. Effectively utilizes the capabilities of its controlling software Achieves the business objectives of the system for which it is designed Interface Design Goals: Reduce visual work Reduce intellectual work Reduce memory work Reduce motor work Minimize or eliminate any burdens or obstructions imposed by technology Test of a Good Design: Can all screen elements be identified by cues other than by reading the words that make them up? The best interfaces make everything on the screen obvious Elements of Good Screen Design: Upper-left starting point Provide an obvious starting point in the screen’s upper-left corner Screen navigation and flow Visually pleasing composition Balance Symmetry Regularity Predictability Sequentiality Economy Unity Proportion Simplicity (complexity) Groupings Human characteristics in Design: Perception: is our awareness and understanding of the elements and objects of our environment through the physical sensation of our various senses including sight sound, sound, smell and so forth.
© Einstein College of Engineering
CS1015 User Interface Design
Memory: There two components: Long term memory contains the knowledge we posses. Short termreceives information from either the senses or the long term memory. Sensory storage: is the buffer where the automatic processing of information collected from our senses takes place. Visual acuity: The capacity of the eye to resolve the details Foveal and peripheral vision: Foveal vision is used to focus directly on something Peripheral vision senses anything in the area surrounding the location .It can not be clearly resolved. Information Processing: The information that our senses collect that is deemed important enough to do something about then has to be processed insome meaningful way. Mental Models: is simply an internal representation of a person’s current understanding of something. Movement Control: The response from the computer is a movement. Movements include such activities as pressing keyboard keys, moving the screen pointer. Learning: is the process of encoding in long-term meomory information that is contained in shortterm memory. Skill: The goals of human performance is to perform skillfully.The essence of skill is performance of actions or movements in the correct time sequence with adequate precision. Individual differences:
© Einstein College of Engineering
CS1015 User Interface Design in looks, feelings, motor abilities, intellectual abilities, learning abilities and speed.
Human considerations in design: The user’s knowledge and experience: Computer literacy. System Experience Application experience Task experience Other system use Education Reading level Typing skill Native language and culture The user’s tasks and needs: Mandatory or discretionary use Frequency of use Task or need importance Task structure Social interactions Primary training Turnover rate Job category Lifestyle The user’s psychological characteristics Attitude and Motivation Patience Stress level Expectations Cognitive style The user’s physical characteristics Age Hearing vision Cognitive processing Gender Handedness Human interaction speeds:
© Einstein College of Engineering
CS1015 User Interface Design
Menus Reading Listening Speaking Keying Hand printing
Major form of navigation through a system If properly designed, assist the user in developing a mental model of the system Must reflect the conflicting needs of both inexperienced and experienced users Structures of menus: Defines the amount of control given to the user in performing a task. The most common structures are the following: Single Menus: A single screen or window is presented to seek the user’s input or request an action to be performed. Sequential linear menus: are represented on a series of screens possessing only one path. The objective of the menu is specifying parameters or for entering data. Simultaneous menus: All menu options are available simultaneously. The menu may be completed in the order desired by the user, choices being skipped and returned to later. Event trapping menus: Provide an ever present background of control over the system’s state and parameters while the user is working on a foreground task.The functions are, they may immediately change some parameter in the current environment they may take the user out of the current environment to perform a function They may exit the current environment and allow user to move to a totally new environment Functions of Menus: Navigation to a new menu Execute an action or procedure Displaying information Data or parameter input Contents of Menus: menu context provides information to keep the user oriented. menu title
© Einstein College of Engineering
CS1015 User Interface Design provides the context for the current set of choices. choice descriptions are the alternatives available to the user. These descriptions can range from a mnemonic, numeric, or alphabetized listing of choices to single words or phrases to full sentences or more. completion instructions tell the users to indicate their choices.
Formatting menus: Guidelines for formatting: Consistency: Provide consistency with the user’s expectations. Provide consistency in menu: Formatting, including organization, presentation,and choice ordering. Phrasing, including titles, choice descriptions, and instructions. Choice selection methods Navigation schemes.
Display: if continual or frequent references to menu options ar necessary, permanently display the menu in an area of the screen that will not obscure other screen data if only occasional references to menu options are necessary, the menu may be presented on demand. Critical options should be continuously displayed.
Presentation Ensure that a menu and its choices are obvious to the user by presenting them with a unique and consistent structure, location, and display technique. Ensure that other system components do not posses the same visual qualities as menu choices.
Organization: provide a general menu display match the menu structure to the structure of the task minimize the number of menu levels within limits of clarity Be conservative in the number of menu choices presented on a screen Provide decreasing direction menus, if sensible Never require menus to be scrolled Provide users with an easy way to restructure a menu according to how work is accomplished.
© Einstein College of Engineering
CS1015 User Interface Design
Complexity: Provide both simple and complex menus. Simple: a minimal set of actions and menus Complex: a complete set of actions and menus. Item arrangement: Ordering: Groupings: Line separators create groupings of items that are logical,distinctive, meaningful, and mutually exclusive Categorize them. Present nomore than six or seven groupings on the screen Order categorized groupings in a meaningful way. Create arbitary visual groupings. Separate groupings Provide immediate access to critical or frequently chosen items order lists of choices by their natural order for lists associated with numbers,use numeric order. align alternatives or choices into single columns whenever possible if a horizontal orientation of descriptions must be maintained, organize for left to right reading.
Separate vertically arrayed groupings with subtle solid lines. Separate veritically arrayed subgroupings with subtle dotted or dashed lines. For subgroupings within a category: left-justify the lines under the first letter of the columnized choice descriptions. right-justify the lines under the last letter of the longest choice descriptions. for independent groupings: extend the line to the left and right menu boders
Phrasing the menu: A menu must communicate to the user information about: - the nature and purpose of the menu itself - the nature and purpose of each presented choice - How the proper choice may be selected. Navigating menus:
© Einstein College of Engineering
CS1015 User Interface Design
Navigation is an efficient navigational structure, is the most important element in system usability. A simple and clear navigational structure is the backbone which all system features is draped. A system’s organizational structure and its navigational tools influence the system’s navigational ease of use. Web site navigation problems: Technical issues. Usage problems.
Navigation goals: A well designed navigational system facilitates quick and easy navigation between components. A good navigational scheme and navigational tools will minimize, if not eliminate, the problems associated with cognitive or mental overload and feelings of disorientation. Control: For multilevel menus, provide one simple action to return to the next higher-level menu. Return to the main menu provide multiple path ways through a menu hierarchy when ever possible Menu navigation aids: to aid menu navigation and learning, provide an easily accessible: menu maps look aheads navigation history Web site navigation: Web site Navigation focuses specifically on website navigation design It will review website organizational schemes, the navigational components including browser command button ,links, website toolbars and command butt and the characteristics and the components of a website. Website organization: Divide the content into logical units, fragments, or chunks. Establish a hierarchy of generality or importance Structure the relationships among content fragments, units, or chunks. Create a well-balanced hierarchical tree. Kinds of Graphical Menus: Menu bar To identify and provide access to common and frequently used actions
© Einstein College of Engineering
CS1015 User Interface Design
Pull-down menu For frequently used application actions that take place in a wide variety of different windows Cascading menu To simplify a higher-level menu Pop-up menu For frequent users and frequently used contextual commands Tear-off menu For items sometimes frequently or infrequently selected Iconic menu To designate applications available and special functions within an application Pie Menu A pie menu is a circular representation of menu items, that can be used as an alternative to a pull-down or pop-up menu.
Unit III: Window: The application program in Windows operating system is opened in rectangular area on the desktop. This rectangular area is known as window. Components of window: The application program in Windows operating system is opened in rectangular area on the desktop. This rectangular area is known as window. In Windows operating system multiple programs can be simultaneously opened in multiple windows. It is because this operating system is referred to as Windows.
© Einstein College of Engineering
CS1015 User Interface Design
Title bar. Control icon. Status bar. Menu bar. Toolbar. Title Bar The bar located at the top of the application window is known as Title Bar. Usually the Title Bar contains the name of application program and the name of current document. In the above figure, the Title Bar has an application name “Microsoft Word” and the document name is “Document2”. The user can drag and drop the window from one location to other on the screen by dragging its Title Bar. More than one application windows of different programs can be opened vertically or horizontally. The Title Bar of the active window will be darker in color than the Title Bar color of other window (inactive window). The active window is one in which you are currently working. Control Icon The icon that appears on the left most side of the Title Bar of every application window is known as Control Icon. It is used to control the application window. When the Control Icon is clicked, a control menu appears with a group of commands. These commands are used to set the dimension of window as well as to close the window (application program). The commands of control menu and their functions are: Restores – the application window to its original size. Move – Enables the application window to be moved on the desktop, if it is minimized. Size – Used to change the size of application window. Minimize – Used to minimize the current application window. Maximize – Used to maximize the current application window. Close – Used to close the application window along with application program. Control Buttons The buttons that appear on the right most side of the Title Bar of every application window are known as Control Buttons. Like control menu, these are also used to control the dimension of window by using only mouse. These buttons provide the shortcut method to control the window. The control buttons and their functions are: Minimize Button – By clicking this button, the current window is minimized and disappeared from desktop. Maximize Button – By clicking this button, the current window is maximized and fills the entire screen. When window is maximized, a restore button is appeared in place of maximize button. Restore Button – By clicking this button, the window restores to its original size. Close Button – By clicking this button, the window is closed and its button is also removed from the task bar.
© Einstein College of Engineering
CS1015 User Interface Design
Status Bar The bar located at the bottom of application window is known as Status Bar. It provides some basic information about the status of current document or objects in window. For example, the Control Panel’s status bar tells you how many objects appear in the window. Scroll Bars When information displayed .in application window is larger and cannot fit in it then scroll bars appear automatically at the right or bottom borders. In this case, a part of the information is displayed and remaining information remains hidden. The hidden information can be displayed by moving the scroll bars of the window. Each scroll bar has two arrows also at its ends. By clicking these arrows you can move around the window but very slowly (line by line or column by column). The scroll Bar also has a scroll box. By dragging this box, you can quickly move around the window. Menu Bar The bar that contains drop-down menus and appears immediately below the title bar is known as Menu Bar. The commands that are used to perform different tasks are grouped together on the Menu Bar. The Menu bar is accessed by clicking mouse or by using keyboard shortcuts. When any menu option from Menu Bar is clicked, a drop down menu appears with a list of commands. You can select a command from the list by clicking it. The drop-down menu may contain some commands as active and some as inactive. The inactive command is not available for selection and appears as dim, usually in light gray color. You can select only from the active commands. To access the Menu Bar using mouse, follow these steps:
Bring the mouse pointer on the desired menu option and click it. A drop down menu appears with a list of commands. Point to the command you want to use and click it to execute. The command is executed and drop down menu is disappeared. To disappear the menu without selecting any command, point the mouse pointer to the empty area of window (or desktop) and click it or use Esc key. Dialog Boxes A dialog box is a command element in Windows and its application programs. It is used to collect information from the user before processing a command. In a dialog box, the user has to enter information such as file names or has to select options etc. For example, when a Save command is selected to save the work (or document) the Save As dialog, box appears to get the name of file. Similarly, when Open command is selected to open an existing file the Open dialog box appears to get the name fiIe to be opened. The dialog boxes are also used to display messages or to provide information to the user. For example, to alert the user about the problem occurred in the computer or about any other error. The dialog box also contains command buttons to send the input to the application, program (or, computer) to take action or to get help about the dialog box. For example the Ok command button is clicked to proceed after making selection or entering information. Similarly, clicking Cancel button ends the current operation without giving any information to computer. Device Based Controls:
© Einstein College of Engineering
CS1015 User Interface Design
They are the mechanism through which people communicate their desires to the system, also known as input devices. Characteristics of device Based Controls: To point an object on the screen. To select the object or identify it as the focus of attention To drag an object across the screen To draw something free form on the screen To track or follow a moving object To orient or position an object To enter or manipulate data or information
The example devices are, Track ball: Description: Advantages: direct relationship between hand and pointer movement in terms of direction and speed Does not obscure vision of screen Does not require additional desk space A spherical object that rotates freely in all directions in its socket Direction and speed is tracked and translated into cursor movement Trackball Joystick Graphic Tablet Touch screen Light pen Voice Mouse Keyboard
Disadvantages: -
Movement is indirect, in a plane different from the screen
© Einstein College of Engineering
CS1015 User Interface Design
No direct relationship exists between hand and pointer movement in terms of distance Requires a degree of eye-hand coordination Requires hand to be moved from keyboards Requires different hand movements Requires hand to be moved from keyboards keys Requires additional desk space May be difficult to control May be fatiguing to use over extended time
Joystick: Description:
A joystick is an input device consisting of a stick that pivots on a base and reports its angle or direction to the device it is controlling. Joysticks are often used to control video games, and usually have one or more push-buttons whose state can also be read by the computer. Advantages: Direct relationship between hand and pointer movement in terms of direction. Does not obscure vision of screen Does not require additional desk space
Disadvantages: -
Movement is indirect, in a plane different from the screen No direct relationship exists between hand and pointer movement in terms of distance Requires a degree of eye-hand coordination Requires hand to be moved from keyboards Requires different hand movements Requires hand to be moved from keyboards keys Requires additional desk space
-
© Einstein College of Engineering
CS1015 User Interface Design
Graphic tablet: A graphics tablet (or digitizer, digitizing tablet, graphics pad, drawing tablet) is a computer input device that allows one to hand-draw images and graphics, similar to the way one draws images with a pencil and paper. These tablets may also be used to capture data or handwritten signatures. It can also be used to trace an image from a piece of paper which is taped or otherwise secured to the surface. Capturing data in this way, either by tracing or entering the corners of linear poly-lines or shapes is called digitizing. Advantages: direct relationship between touch and pointer movement in terms of direction and speed Does not obscure vision of screen More comfortable horizontal operating plane May be fatiguing to use over extended time May be slow and inaccurate
Disadvantages: Touch screen:
Movement is indirect, in a plane different from the screen Requires hand to be moved from keyboards Requires hand to be moved from keyboards keys Requires different hand movements Requires additional desk space Finger may be too large for accuracy with small objects
A touch screen is an electronic visual display that can detect the presence and location of a touch within the display area. The term generally refers to touching the display of the device with a finger or hand. Touch screens can also sense other passive objects, such as a stylus. The touch screen has two main attributes. First, it enables one to interact directly with what is displayed, rather than indirectly with a cursor controlled by a mouse or touchpad. Secondly, it lets one do so without requiring any intermediate device that would need to be held in the hand.
© Einstein College of Engineering
CS1015 User Interface Design
Advantages: direct relationship between hand and pointer movement in terms of direction, distance and speed requires minimal additional desk space Stands up in high-use environments More accurate than finger touching Movement is direct, in the same plane as screen
Disadvantages: Voice:
very fatiguing to use over extended time requires picking it up to use requires moving the hand far from the keyboard to use hand may obscure part of screen
Automatic speech recognition by the computer Advantages: Disadvantages; High error rates due to difficulties in: Recognizing boundaries between spoken words Blurred word boundaries due to normal speech patterns slower throughput than with typing difficult to use in noisy environments impractical to use in quiet environments Simple and direct Useful for people who cannot use a keyboard Useful when the user’s hands are occupied
© Einstein College of Engineering
CS1015 User Interface Design
Mouse: mouse is a pointing device that functions by detecting two-dimensional motion relative to its supporting surface. Physically, a mouse consists of an object held under one of the user's hands, with one or more buttons. Advantages: direct relationship between hand and pointer movement in terms of direction, distance and speed Does not obscure vision of screen More comfortable horizontal operating plane Selection mechanisms are included on mouse
Disadvantages: Keyboard :
Movement is indirect, in a plane different from the screen Requires hand to be moved from keyboards Requires additional desk space May require long movement distances Requires a degree of eye-hand cocordination
Standard typewriter keyboard and cursor movement keys Advantages: familiar accurate does not take up additional desk space very useful for: entering text and alphanumeric data inserting in text and alphanumeric data keyed shortcuts - accelerators keyboard mnemonics – equivalents
© Einstein College of Engineering
CS1015 User Interface Design advantageous for: performing actions when less than three mouse buttons exist use with very large screens touch typists
Disadvantages: slow for non-touch-typist slower than other devices in pointing requires discrete actions to operate no direct relationship between finger or hand movement on the keys and cursor movement on screen in terms of speed and distance
Screen based controls: Are the elements of a screen that constitute its body. The example includes, Buttons: Th e C o m m a n d b u tto n i s a co m m o n c o n tr o l f r e q u e n tl y u s e d i n V B p r o g r a m mi n g . Th i s i s o n e o f th e f i r s t c o n tr o l s th a t b e g i n n e r s l e a r n to p l a ce o n to a f o r m a n d th e n t o co d e a n "e v e n t p r o ce d u r e " f o r th e co m m a n d buttons text entry/read-only controls selection controls combination entry/selection controls specialized operable controls custom controls presentation controls web controls
© Einstein College of Engineering
CS1015 User Interface Design co n tr o l o b j e c t. A n e v e n t p r o ce d u r e i s s o m e th i n g th a t h a p p e n s i n r e s p o n s e to a u s e r a cti o n s u ch a s a cl i ck o r a "m o u s e o v e r ". ( I f a n o b j e ct o n a f o r m h a s n o co r r e s p o n d i n g co d e w r i tte n b y th e p r o g r a m m e r , n o th i n g w il l h a p p e n i f th e u s e r cl i ck s o n th e co n tr o l o r a t te m p ts a n y o th e r a cti o n w i th th a t co n tr o l . ) D o u b l e - cl i ck i n g o n a C om m a n d b u tto n i n th e to o l b a r w il l pl a ce i t o n to th e ce n te r o f y o u r f o r m . L e f t cli ck o n i t th e "d ra w " i t o n to th e f o r m b y d r a gg i ng th e m o u s e a n d a t th e s a m e ti m e , h ol d i n g d o w n th e le f t m o u s e k e y w h il e d r a g g i ng . R el e a s e th e l e f t m o u s e k ey w h e n th e o b j e ct i s th e s i z e y o u w a n t i t to b e . Yo u ca n a l s o "d r a g " a n o b j e ct i n th e w o r k a r e a b y fi r s t s e l e cti ng th e o b j e ct w i th a s i n g l e m o u s e cl i ck th e n d r a gg i n g th e o b j e ct b y p o s i ti o n i n g th e m o u s e p o i n te r o v e r th e o b j e ct, h o l d i n g do w n o n th e l e f t m o u s e k e y , a n d m o v i n g th e o b j e ct to a n e w l o ca ti o n i n th e w o r k a r e a , th e n r el e a si n g th e l e f t m o u s e b u tto n to s to p th e m o v e a n d f i n a l ly , b y cl i ck i n g s o m e w h e re o f f th e o b j e ct to d e s e l e ct th e o b j e ct th a t w a s j u s t m o v e d . W h i l e th e m o u s e p o i n te r i s o v e r th e C o m ma n d b u tt o n , cl i ck a n d r e l e a s e th e l e f t m o u s e b u tto n to h i g hl i g h t (s e l e ct) the C o mm a n d b u tto n . Yo u w i ll s ee r e s i z i ng h a n d l e s a p p e a r w h i ch y o u ca n d r a g d i a g o n al l y , h o r i z o n ta ll y , o r v e r ti ca l ly to ch a n g e th e s i z e o f th e C o m ma n d b u tto n . Th e o n l y r e a s o n y o u w o u l d w a n t to d o th i s i s to f i t a l a rg e ca p ti o n o n to th e b u tt o n . M o s t o f th e ti m e , y o u w il l n o t n e e d to r e s i z e th e C om m a n d b u tto n . B e g i n n e r s l i ke to p l a y w i th th e r e s i z i n g s o h a v e f u n w i th i t. A n o th e r w a y to p l a ce a C o mm a n d b u tto n o n to a f o r m i s to s i ng l e - cli ck o n th e C o m m a n d b u tto n i n th e To o l b a r . Th e n p l a ce th e m o u s e p o i n te r o v e r th e f o r m a n d h o l d d o w n o n th e l e f t m o u s e b u tto n w h i l e d r a g g i n g a s h o r t d i a g o n a l li n e f r o m co r n e r to co r n e r w h e r e y o u w a n t t h e b u t to n to b e p l a ce d . I f th e s i z e i s n o t r i g h t, l e f t - cl i ck o n th e b u t to n a n d d r a g th e r e - s i z i n g h a n d l e s to m a k e i t th e s i z e y o u n e e d . The Name and Naming Conventions G e tti n g d o w n to se r i o u s b u si n e s s , th e C o mm a n d b u tto n w i ll n ee d to h a ve a n a m e . I t i s n am e d w hi le i t i s h ig h li g h te d (s e l e cte d ) o n th e f o r m . W h il e th e C o m m a n d b u tto n o n th e f o r m i s s e l e cte d , g o to th e P r o p e r ti e s W i n d o w a n d s e l e ct th e Al p h a b e ti ca l ta b . A t th e to p o f th i s l is t th e f i r s t i te m to a p p e a r w i ll b e N am e . Cl i ck o n N a me a n d to th e r i g h t o f th a t, d o u b l e cli ck i n th e N a m e s p a ce to h i g hl i g h t th e w o r d s C om m an d 1 . S ta r t ty p i n g a n a m e f o r y o u r C o m m a n d b u tto n b e g i n n i n g wi th th e l o w e r ca s e l e tte r s "cm d " w i th o u t th e q u o ta ti o n m a r k s , j u s t p l a i n cm d N am e w he r e N am e i s th e o n e y o u s el e ct, s u ch a s cm d S h o w 3 . N a m i ng co n v e n ti o n s f o r co n tr o l s a n d v a r i a b l es ( te x tb o o k n a m i n g co n v e n ti o n s f o r f i r s t a n d s e co n d s e m e s te r V B s tu d e n ts ) a r e d i s cu s s e d i n th e a r ti cl e H u n g a r i a n N o ta ti o n . M a n y p r o g r a mm e r s b e gi n th e n a m e p a r t ( a f te r th e cm d p r e f i x ) w i th a ca p i ta l l e tte r to m a k e i t e a s i e r to r e a d , s u ch a s cm d L a r g e . I f tw o w o r d s a r e to b e i n th e n a m e o f a n y co n tr o l s u ch a s a C o m m a n d b u tto n , b e s u r e y o u d o n o t al l ow a n y s p a ce s i n th e n a m e. B eg i n th e s e co n d w o r d w i th a ca p i ta l l e tte r l i k e th i s : cm d S e co n d W o r d . Th i s i s o n l y
© Einstein College of Engineering
CS1015 User Interface Design d o n e to m a k e i t e a s ie r to r e a d . cm d s e co n d w o r d i s a l s o l e g al b u t i s h a r d e r to r e a d . CA S E ( U p p e r ca s e o r l o w e r ca s e ) d o es n o t m a tte r . TH I S i s th e s a m e w o r d a s th i s . V i s u a l B a s i c w il l r e ve r t b a ck to w h a te v e r u p p e r ca s e a n d l o w e r ca s e le tte r s w e r e u s e d i n a v a ri a b l e a t th e ti m e y o u w r i te th e Di m s ta te m e n t to d i m e n s i o n th e v a ri a b le . M or e o n th i s l a tte r . A to ta l o f 2 5 5 ch a r a cte r s a r e p e r m i s si b l e i n a co n tr o l o r v a r i a b le n a m e. Te ch n i ca ll y , a f te r th e v a r i a b l e n a m e be g i n s w i th a t le a s t o n e l e tte r , a n y co m b i n a ti o n o f l e tte r s , n u m e r a l s , a n d u n d e r s co r e s m a y b e u s e d . S p e ci a l ch a r a cte r s li k e p e r i o d o r a m pe r s a n d ( & ) a re n o t a ll o w e d an d a l l s tu d e n ts a r e e n co u r a g e d b y p r o g r a m m e r s to p l e a s e u s e th e H u n g a ri a n n o ta ti o n c o n v e n ti o n s w h e n n a m i n g co n tr o l s a n d v a r i a b l e s. Th e H u n g a ri a n N o ta ti o n p re f i x e s ( ag a i n , f or V B s tu d e n ts ) a r e u s e d f o r e a s e i n d e b u gg i ng , to h e l p y o u r em e m b e r w h a t ty p e o f v a r i a bl e o r co n tr o l y o u m a d e ( a f te r a l o n g ti me h a s e l a p s e d y o u m a y n o t r em e m be r ) . H u n g a ri a n n o ta ti o n h a s b e e n a c ce p te d b y p r o g r a m m e r s a s a ty p e o f n a m i n g co n v e n ti o n o r s ta n d a r d i z a ti o n i n co d i n g a n d i n n am in g co n tr o l s a n d v a r i a bl e s. M a n y ti m e s p r o g r am m e rs w o r k o n m o d u l es - - l i ttl e p i e ce s o f l a rg e r p r og r a m s a n d m a n y p e o p le w o r k o n o n e p r o g r am . Wi th o u t th e H u n g a r i a n N o ta ti o n p r o to co l s y o u r o w n v a r i a b l e s w o u l d m a k e le s s s e n s e to a n o t h e r p e r s o n . Th e p r e f i x te ll s a n o th e r p e r s o n w h a t ty p e o f co n tr o l o r v a r i a b l e y o u h a v e cr e a te d . The Caption: And Using the ampersand (&) in a Command button Caption C a p ti o n i s a P r o p e r ty o f th e C o m ma n d co n tr o l b u tto n ( th e co m m a n d b u tto n ) . L e f t cl i ck o n th e C o m m a n d b u tto n a g a i n o n th e f o r m , to s e l e ct i t. R e tu r n to th e P r o p e r ti e s w i n d o w . Cl i ck o n th e A l p h a b e ti ca l ta b . S cr o l l d o w n u n ti l C a p ti o n i s r e a d a n d cl i ck o n i t. D o u b le cl i ck o n th e w o r d s to th e r ig h t o f C a p ti o n a n d s ta r t ty p i n g th e w o r d s y o u w a n t to a p p e a r o n y o u r b u tto n . F o r a n e x i t b u tto n ty p e E& x i t f o r th e C a p ti o n a n d to u ch EN T ER . W h y th e a m p e r s a n d ? Yo u ca n u s e a n a m p e r s a n d ( &) o n e ti m e i n e a ch C o n tr o l b u tto n C a p ti o n . Th i s wi ll u n d e r li n e o n e le tte r i n th e ca p ti o n . I t i s th e le tte r f o l l o w i ng th e a m p e r s a n d th a t w i l l b e u nd e r l i n e d. Th a t u n d e r l i n e d l e tte r s i g n i fi e s w hi ch co r r e s p o n d i n g k e y b o a r d l ette r k e y ca n b e u s e d a l o n g w i th th e A L T k e y to a cce s s th e C o n tr o l b u tto n . B y u s i n g th e A L T k e y ( h el d d o w n ) w h i l e p r e s s i ng th e co r r e s p o n d i n g l e tte r k ey o n th e k e y b o a r d y o u w o ul d ge t th e s a m e p r o g r a m o u tp u t a s i f y o u h a d "pr e s s e d " o n a C o m m a n d b u tto n b y cl i ck i n g o n i t w i th th e m o u s e i n s te a d. To r e p h r a s e th i s : i f th e e xi t b u tto n h a s a C a p ti o n o f E& x i t, th e l e tte r x i s u n d e r l i n e d th e n y o u co u l d p r e s s A L T + x to e x i t th e p r o g r a m i n s te a d o f h a v i n g to c l i ck o n th e e x i t b u t to n . The Default Property of the Command control button Th i s i s a n i ce p r o p e r ty to s e t a t de s ig n tim e . Th e o n l y tw o p o s s i bl e v a l u e s a r e D e f a u l t = F a l s e o r D e f a u l t = Tr u e . On ly o n e co m m a n d b u tto n p e r f o r m s h o u l d h a v e a D e f a u l t = Tr u e s e tti n g. W i th D e f a u l t = Tr u e s e t f o r a p a r ti cu l a r C o m m a n d b u tto n , th e n th a t b u tt o n ' s cl i ck _ e v e n t ca n b e a ch i e v e d b y p r e s s i n g th e EN TER k e y i n s te a d o f h a v i n g to u s e th e m o u s e . I f y o u d o n o t d o a n y th i n g a t al l w i th thi s D e f a u l t p r o p e r ty , V i s u a l B a s i c w il l a l w ay s s e t th e
© Einstein College of Engineering
CS1015 User Interface Design
D e f a u l t = F a l se o p ti o n . Th is i s co n v e n i e n t in th a t m o s t a l l C o mm a n d b u tto n s w i ll n e e d to h a v e a f a l s e D e f a u l t s e tti n g s i n ce o n l y o n e b u t to n w i th th e tr u e D e f a u l t s e tti n g ca n b e a cce s s e d w i th th e EN TER k e y ( p e r f o r m ) . I n th e P r o p e r ti e s w i n d o w ( F 4 s h o r tcu t to th e p r o p e r ti e s w i n d o w ) , s cr o l l d o w n to D e f a u l t a n d cl i ck o n th e d r o p d o w n a r r o w t o s e e tw o ch o i ce s . C l i ck o n Tr u e , i f ch a n g i n g t h e D e f a u l t to tr u e . D o n o t h i n g a n d i t w i l l b e l e f t a t th e D e f a u l t = F a l s e , a u to m a ti ca l l y . The Cancel Property of the Command button Th e C a n ce l P r o p e r ty d e te rm i n e s w h e th e r o r n o t a C o mm a n d b u tto n i s th e ca n ce l b u tto n o f th e f o r m , th e b u tto n w h o s e a cti o n o f ca n ce l l i ng a f o r m i s a cce s s e d b y th e Es ca p e k e y ( ES C o n th e k e y b o a r d ) . V i s u al B a s i c b y d e f a ul t s e ts Es ca p e = F a l s e f o r a l l co m m a n d b u tto n s , s i n ce o n l y o n e C o m m a n d b u tto n p e r f o r m ca n b e a c ce s s e d b y th e ES C k e y ( e s ca p e ) . I u s e th e Ex i t b u tto n i f I h a v e o n e o n th e f o r m a n d a t d e s i g n ti m e i n th e P r o p e r ti e s W i n d o w I s e t th e C a n ce l o p ti o n to Tr u e . To d o th i s , s e l e ct th e C o m m a n d b u tto n w h i ch i s to b e th e ca n ce l b u tto n . S cr o l l i n th e P r o p e r ti e s W i n d o w to th e C a n ce l p r o p e r ty . C li ck o n th e d r o p d o w n a r r o w a n d cl i ck o n Tr u e . To u ch EN TER k e y . ( J u s t l i k e th e D e f a u l t p r o p e r ty th e r e a r e o n l y tw o s e tti n g s f o r th e C a n ce l p r o p e r ty , Tr u e o r F a l s e . ) . A g a i n, d o n o th i n g a n d th e s e tti n g w i l l a u to m a ti ca l l y b e F a l s e. N o w , a q u i ck r e ca p : Th e r e a r e th r e e w a y s f o r a u s e r to a cce s s th e cm d Ex i t ( co m m a n d b u tto n ) :
Click on the button Use the keyboard short -cut, ALT + X, if the programmer has used E&xit in the Caption so that X will be a "hot key" to use with ALT key.
Use the ESC key (Escape), if the Cancel Property of cmdExit has been set to True by the programmer (at Design time).
N o te : A n a d d i ti o n a l w a y to e x i t o r ca n ce l th e f o r m f r o m R u n m o d e i s t h e o b v i o u s W i n d o w s me th o d o f cl i ck i n g o n th e e x i t b u tto n i n th e Ti tl e b a r o f th e f o r m . ToolTips Property for any control object, including the Command button Th e C a n ce l P r o p e r ty a n d th e D e f a ul t P r op e r ty w e r e i n h e r e n t o n ly to th e C o m m a n d b u tto n . M a n y p r o p e r ti e s a v a i l ab l e to th e co m m a n d b u tt o n m a y a l s o b e s e t w i th o th e r co n tr o l o b j e cts f r o m th e to o l b a r , a n d e v e n o b j e cts n o t f r o m th e to o l b a r . Th e T o o l Ti p s p r o p e r t y i s a v a i l a bl e f o r s e tti n g w i th a n y o f th e V i s u a l B a s i c co n tr o l o b j e cts . Th e To o l Ti p s p r o p e r ty i s a cle v e r w a y to h av e th e u s e r r e a d a m e ss a g e a b o u t a co n tr o l o b j e ct s i m p ly b y h o v e r i ng wi th the m o u s e p oi n te r o v e r th a t o b j e ct f o r a co u p l e o f s e co n d s .
© Einstein College of Engineering
CS1015 User Interface Design
S e tti n g th e m e s s ag e o f th i s p r o p e r ty i s v e r y si m pl e . J u s t cli ck o n th e C o m m a n d b u tto n o r a n o th e r o b j e ct to s e l e ct i t a n d th e n i n th e P r o p e r ti e s W i n d o w ( F 4 ) , s cr o l l d o w n to To o l Ti p s a n d d o u b l e cl i ck i n th e s p a ce to th e r i g h t o f To o l Ti p s a n d s ta r t t y p i n g y o u r m e s s a g e w i th o u t q u o ta ti o n m a r k s . Yo u w i ll n e e d to r u n th e p r o g r am ( F 5 s h o r tcu t) , a n d h o l d y o u r m o u s e p o i n te r o v e r th e o b j e c t i n o r d e r f o r y o u r T o o l Ti p m e s s a g e to a p p e a r . A l wa y s ch e ck y o u r To o l Ti p s i n th e R u n m o d e j u s t to m a k e ce r tai n th e y a r e f u n cti o n i n g th e w a y y o u w a n t th e m to . R e m e m b e r , s e t th i s P r o p e r ty , p r e f e r a b l y a t D e s i g n ti m e.
Text-Entry Field (Control) — Reference Description A text-entry field is a text field where a user can type or place characters, as arguments, in an application. Text-Entry Field
When to Use Recommended Provide a text-entry field to allow the user to enter characters. Guidelines Required Support insert mode for all entry of text. Required Do not support replace mode when nontextual elements (for example, icons or choices) are included as elements in text and laid out as characters. Recommended Provide replace mode for text entry if the text is displayed using a fixed-width font.
© Einstein College of Engineering
CS1015 User Interface Design
Recommended If you provide replace mode, allow the user to switch between insert and replace mode by pressing the Insert key. Initial Values in Text-Entry Fields Recommended If a text-entry field must contain a value, provide an appropriate initial value. Recommended If the user will typically replace the initial value in the text-entry field, use a persistent selection to select the entire initial value so that the data can be replaced by typing the first input character. Verification of Entered Text Required Even if the information entered by the user into a text-entry field is not acceptable to the application and if the focus has been moved out of the text-entry field, do not automatically move focus back to the text-entry field. Recommended When using an explicit focus policy, if the information entered by the user into a textentry field is not acceptable and focus is on another control, display a warning message that includes a choice that returns focus to the text-entry field. Optional If the information entered by the user into a text-entry field is not acceptable and focus has been moved out of the text-entry field, mark the field in some way (for example, with a new color) so that the user can locate and correct it. Insert Mode Required In insert mode, position the text cursor between adjacent elements. Required In insert mode, when the user types a character, insert the character before the cursor. Replace Mode Required In replace mode, display the text cursor as if it were on a character. However, with respect to the rules for navigation and selection, treat it as if it were positioned prior to the character on which it is displayed. When the cursor is at the end of a line, it should appear to be on an empty character following the last character on the line. Required In replace mode, when the cursor is not at the end of a line and the user types a printing character, delete the character on which the cursor appears before inserting the new character. This should have the effect of replacing the character. Required
© Einstein College of Engineering
CS1015 User Interface Design
In replace mode, when the cursor is at the end of the line and the user types a printing character, insert the character before the cursor position. Behavior Required When a control supports text entry, support primary, clipboard, and drag-and-drop transfer in the text field. Required Allow the user to scroll data in a text-entry field when more text can be typed or when more information is available than can be displayed in the field. Required In text, when the user presses Space or Shift Space, insert a space. Required In a text-display field or a single-line text-entry field, when the user presses Enter, invoke the default action. Required In a multiline text-entry field, when the user presses Enter, insert a new line. End the current line with the character preceding the current cursor position and start a new line with the following character. Required In a text-display field, use Tab and Shift Tab for tab-group navigation. Required In a multiline text-entry field, use Tab and Shift Tab for internal navigation. Use Tab either to insert a tab or to skip to the next tab stop. Shift Tab should have either no effect or should skip back to the previous tab stop. Required In a single-line text-entry field, use Tab and Shift Tab either for tab-group navigation or for internal navigation as in a multiline text-entry field. Recommended In a text-entry field, when the user presses Ctrl Delete, delete the characters following the cursor to the end of the line. If text is selected, delete the selection instead. Guidelines Label the entry field with a text label above it or to its left, using sentence capitalization. Provide an access key in the label that allows the user to give focus directly to the entry field. Right-justify the contents of entry fields that are used only for numeric entry, unless the convention in the user's locale demands otherwise. This is useful in windows where the user might want to compare two numerical values in the same column of controls. In this case, ensure the right edges of the relevant controls are also aligned.
© Einstein College of Engineering
CS1015 User Interface Design
When the user gives focus to an entry field using the keyboard, place the text cursor at the end of the existing text and highlight its contents (but don't overwrite the existing PRIMARY clipboard selection). This makes it easy to immediately overtype or append new text, the two most common operations performed on entry fields. Size text entry fields according to the likely size of the input. This gives a useful visual cue to the amount of input expected, and breaks up the dialog making it easier to scan. Don't make all the fields in the dialog the same width just to make everything line up nicely. In an instant-apply property or preference window, validate the contents of the entry field when it loses focus or when the window is closed, not after each keypress. Exception: if the field accepts only a fixed number of characters, such as a hexadecimal color code, validate and apply the change as soon as that number of characters have been entered. Provide a static text prompt for text boxes that require input in a particular format or in a particular unit of measurement. For example: Figure 6-4 Text entry field with static text prompt
Where possible, provide an additional or alternative control that limits the required input to the valid range. For example, provide aspinbox or slider if the required input is one of a fixed range of integers, or provide access to a GtkCalendar control if the user has to enter a valid date: Figure 6-5 Text entry field requiring a date as input, with a button beside it to pop up a GtkCalendar control to simplify the task
This is less error-prone than expecting the user to format their text input in some arbitrary format. You may still want to provide the entry field control as well, however, for expert users who are familiar with the required format. If you implement an entry field that accepts only keystrokes valid in the task context, such as digits, play the system warning beep when the user tries to type an invalid character. If the user types three invalid characters in a row, display an alert that explains the valid inputs for that textfield. The cursor blink rate is globally defined by the XSettings "gtk-cursor-blink" and "gtkcursor-blink-time". Standard toolkit controls use these and they must not be altered in applications by any means. New controls with text cursors must respect these global values.
Selection control: Presents on the screen all the alternatives, conditions, or choices that may exist for entity, property or value.
© Einstein College of Engineering
CS1015 User Interface Design
Radio Buttons: A radio button is a Windows control made of two sections: a round box O and a label. The label informs the user as to what the control is used for. The user makes his or her decision by selecting or clicking the round box . In practical usage, a radio button is accompanied by one or more other radio buttons that appear and behave as a group. The user decides which button is valid by selecting only one of them. When the user clicks one button, its round box fills with a (big) dot: . When one button in the group is selected, the other round buttons of the (same) group are empty. The user can select another button by clicking a different choice, which empties the previous selection. This technique of selecting is referred to as mutuallyexclusive.
User Interface Design Elements The Palette
Windows Events
The Paints
Pull-down Menus / Drop-down Menus Push Buttons Icons Checkboxes Radio Buttons Scrolling Lists Text Field Popup List Spin Boxes Sliders
© Einstein College of Engineering
CS1015 User Interface Design
Windows The most pervasive element used in GUIs is the window. It could be considered to be a metaphor for a "window" into the computer, but it is dependent on idioms for its operation. The video screen itself can be considered to be a window into the computer. In character-based interfaces it was the only window into the computer and was not really thought of as such. The GUI paradigm, however, allowed for the user to see into multiple areas within the computer, and the window metaphor was born.
Events An "event," with respect to user interfaces, is any function initiated by the user. Selecting something from a pull-down menu, clicking a button or a checkbox, and closing a window are all examples of events. It is a common misconception that events were born of the GUI age. In fact character-based interfaces accommodated myriad events, but they were generally performed by complex keystrokes such as control-shift-F6. An application such as WordPerfect would usually provide a so-called "quick reference card" to aid the users in remembering which keystroke combination initiated which event. By visually presenting all of the possible events to the user, the need for a quick reference card vanished. Also, the advent of pointing devices such as the mouse allowed entirely new kinds of events to be implemented, such as "drag and drop."
Pull-down Menus / Drop-down Menus Pull-down menus are menus that the user can "pull down" from the menu bar that traverses the top of the screen. On some platforms these are called "drop down" menus because the user does not need to hold the mouse button down in order for the menu to remain visible.
© Einstein College of Engineering
CS1015 User Interface Design
Push Buttons A push button is simply a rectangle that appears on a panel with some sort of label or icon inside it. The metaphor is to any button you'd find in the physical world, such as on a calculator or telephone. Clicking on a push button will cause some sort of action will occur. Sometimes a panel will have a "default" button, which appears with an enhanced border. This button will be activated when the Enter key is pressed.
Icons Icons are small pictures that are generally represent objects in the physical world or are used as metaphors for functions or actions. Icons can be "clickable" and used to initiate an event. These are sometimes referred to as "buttcons," as they become hybrids of buttons and icons.
Checkboxes A checkbox is a small square with some sort of label beside it. Clicking on a checkbox will cause an 'X' to appear in the box. Clicking it again will cause the 'X' to disappear.
© Einstein College of Engineering
CS1015 User Interface Design
Radio Buttons A radio button is small circle with some sort of label beside it. A black dot inside the circle indicates that the button is selected. The absence of a dot indicates that the button is unselected. The metaphor with radio buttons is to old-fashioned car radios that used mechanical buttons to change the radio station. When one button is pushed in, whatever other button had been pushed in will pop out. In this way, only one button can be pushed in at a time. Similarly, with the radio button form object, clicking on one option will cause whatever other option that had been selected to become unselected.
When applicable, radio buttons should be placed in a logical order. Don't use radio buttons for binary choices (e.g. Yes/No). Use check boxes for this.
Scrolling Lists Scrolling lists are lists of elements that appear in a box with a scroll bar on the side, allowing the user to scroll through the elements in the list. In this way the list can contain more elements than can be displayed at any one time. Clicking on an element in the list will cause that element to become selected, as shown below.
Noting selected
"Element2" selected
Optionally, a list can allow multiple selections. These can either be contiguous or discontiguous, as shown below (respectively).
Contiguous selection
Discontiguous selection
Text Field A text field is simply a space in which the user can type text. Text fields are usually contained within a rectangle, but it could just be space on a panel that can accept text.
© Einstein College of Engineering
CS1015 User Interface Design
If a text field is contained within a rectangle, it can optionally have a scroll bar to allow it to contain more information than can be displayed at any one time.
Popup List A popup list appears initially as a box containing some sort of label. When the user clicks on the box, a larger box containing a variety of choices will "pop up." By moving the mouse, the user can cause another choice to become selected. When the user releases the mouse, the popup menu will disappear leaving currently selected choice to appear in the box.
Spin Boxes A spin box is a box containing some value, with up and down arrows on one side and generally a label on the other. By clicking the up or down arrow, different values will appear in the box. The entire range of choices can be cycled through if the up or down arrows are clicked enough times. Whatever value appears in the box is the value that is selected at that time.
Sliders A slider is a long box with a control that the user is able to slide one way or the other. Often a slider will have an arrow button at either end to allow the user to adjust the slider one unit at a time. Also there is often a text field to the side of the slider that will indicate the value that the slider is currently set on and allow the user to enter a specific value.
© Einstein College of Engineering
CS1015 User Interface Design
Unit IV: Text for Web Pages: Writing Clear Text and Messages: Do not use Use short, familiar words positive terms complete words consistent words jargon abbreviations, contractions, mnemonics, or acronyms hyphenated words
Providing Effective Feedback and Guidance and Assistance: Instructions or prompting A help facility Contextual help Task-oriented help Reference help Wizards
© Einstein College of Engineering
CS1015 User Interface Design
Hints or tips
INTERNATIONALIZATION & ACCESSIBILITY: International Considerations Localization Cultural Considerations Writing Text Using Images and Symbols Requirements Determination and Testing Accessibility Visual Disabilities Hearing Disabilities Physical Movement Disabilities Speech or Language Disabilities Cognitive Disabilities Seizure Disorders INTERNATIONALIZATION Internationalization The process of isolating culturally specific elements from a product Localization The process of infusing a specific cultural context into a previously internationalized product When to do it: When the market includes few or no English speakers When translation is required by law or by custom When the widest possible market is desired When not to do it: When the audience already reads English When the cost of retrofitting or rewriting the software is prohibitive Cultural Dimensions Power distance Individualism (versus collectivism) Masculinity (versus feminity) Uncertainty avoidance Long-term orientation (versus short term) Words and Text Use simple English Develop a restricted vocabulary Restrict the sentence structure using: noun-verb-object Avoid: Acronyms and abbreviations
© Einstein College of Engineering
CS1015 User Interface Design
Slang or obscure phrasing Stringing three nouns together Local or computer jargon A telegraphic writing style An over-friendly writing style Culturally specific examples References to national, racial, religious, and sexist stereotypes Adhere to local user language idioms and cultural contexts Keep the original term for words that cannot be translated Allow additional screen space for the translation Horizontally, using Table 10.1 Vertically When translating to other languages, first do: European: German Middle East: Arabic Far East: Japanese Position icon captions outside of the graphic Modify mnemonics for keyboard access Adhere to local formats for date, time, money, measurements, addresses, and telephone numbers Images and Symbols Adhere to local cultural and social norms Use internationally accepted symbols Develop generic images Be particularly careful with: Religious symbols (crosses and stars) The human body Women Hand gestures Flags The cross and check for check boxes Review proposed graphical images early in the design cycle Color, Sequence, and Functionality Adhere to local color connotations and conventions Provide the proper information sequence Provide the proper functionality Remove all references to features not supported Requirements Determination and Testing Establish international requirements at the beginning of product development Establish a relationship within the target culture Test the product as if it were new ACCESSIBILITY: Definition
© Einstein College of Engineering
CS1015 User Interface Design
Providing easy access to a system for people with disabilities
Objective Minimize all barriers that make a system difficult, or impossible, to use Accessibility Design Consider accessibility issues during system planning, design, and testing Provide compatibility with installed accessibility utilities Provide a customizable interface Follow standard Windows conventions Use standard Windows controls Assure online forms can be easily completed Visual Disabilities Guidelines Utilities Ensure compatibility with screen-review utilities Ensure compatibility with screen-enlargement utilities Screen Components Include meaningful screen and window titles Provide associated captions or labels for all controls, objects, icons, and graphics, including graphical menu choices Provide a textual summary for each statistical graphic Allow for screen element scalability Support system settings for high contrast for all user interface controls and client area content When “high contrast” setting is established, hide any images drawn behind text to maintain screen information legibility Screen Components (Continued) Avoid displaying or hiding information based on the movement of the pointer Exception: Unless part of the standard interface (ToolTips, for example) Keyboard Provide a complete keyboard interface Provide a logical order of screen navigation Color Use color as an enhancing design characteristic If used: Select color combinations that can be discriminated Ensure the lightness contrast between foreground and background color is high Increase the lightness contrast between colors at each end of the color spectrum (blues and reds) Avoid combining dark colors from the middle of the spectrum with light colors at either end Create the color combinations based on the system colors for window components
© Einstein College of Engineering
CS1015 User Interface Design
Hearing Disabilities Provide captions or transcripts of important audio content Provide an option to display a visual cue for all audio alerts Provide an option to adjust the volume Use audio as an enhancing design characteristic Provide a spell-check or grammar-check utility Do not define specific colors Use tools to verify what colors will look like when seen by colordeficient people
Physical Movement Disabilities Provide voice-input systems Provide a complete and simple keyboard interface Provide a simple mouse interface Provide on-screen keyboards Provide keyboard filters Speech or Language Disabilities Provide a spell-check or grammar-check utility Limit the use of time-based interfaces Never briefly display critical feedback or messages and then automatically remove them Provide an option to permit the user to adjust the length of the time-out Cognitive Disabilities Permit modification and simplification of the interface Limit the use of time-based interfaces Do not briefly display critical feedback or messages and then automatically remove them Provide an option to permit the user to adjust the length of the time-out Seizure Disorders Use elements that do not blink or flicker at rates between frequency ranges of 2 Hz and 55 Hz Minimize the area of the screen that is flashing Avoid flashing that has a high level of contrast between states Provide an option to enable users to slow down or disable screen Web Page Accessibility Design Pages Provide a simple and consistent layout Place important information at page top
© Einstein College of Engineering
CS1015 User Interface Design
Provide simple backgrounds contrasting well with text Provide a “Skip to Main Content” link at the top of each page Structure articles with two or three levels of headings End sentences, headings, and list items with punctuation Provide frame titles Provide user adjustable font sizes and styles, colors, graphical attributes, and volume Avoid blinking or constantly changing elements Controls Provide large buttons Links Provide fully descriptive headings Separate consecutive links with a dividing character Tables, Frames, and Columns Use sparingly Provide alternate ways to access items contained within tables Images Provide associated text Audio Include one or more of the following: Caption or pop-up text window Textual transcript Textual description For lengthy descriptions or transcripts, provide a link to a separate page Video Include one or more of the following in both a textual and audio format: Transcript Description For lengthy descriptions or transcripts, provide a link to a separate page Image Maps Provide equivalent text menus Animation Provide an option to display in a nonanimated presentation mode Plug-ins and applets Use sparingly General Synchronize multimedia elements Test for accessibility For online forms that cannot be read by utilities Provide alternate method of communication If accessability cannot be accomplished any other way: Provide equivalent text-only page Follow WWW and Section 508 guidelines Usability for Lower-Literacy To aid lower-literacy Web users:
© Einstein College of Engineering
CS1015 User Interface Design
Prioritize information Avoid moving or changing text Streamline page design Simplify navigation Optimize search Usability for Senior Citizens Provide large targets Reduce the number of clicks Do not require double-clicks Do not use pull-down menus Do not have a deep page hierarchy Concentrate important information at page top Avoid the need to scroll Place most links in bulleted, not tightly clustered list Clearly differentiated visited/non-visited links Use few colors, avoiding blue and green tones For text to be read or scanned, use: 12- to 14-point sans serif font (Helvetica, Arial) Black text on white background Left alignment Increased spacing (leading) between lines Sentence style mixed-case letters Appropriate large headings in a sans serif font Documentation
14-
to
16-point
Provide documentation on all accessible features Provide documentation in alternate formats Provide online documentation for people who have difficulty reading or handling printed material Testing Icons: Kinds of Icons Characteristics of Icons Influences on Icon Usability Choosing Icons Multimedia Images Photographs/Pictures Diagrams Drawings Test all aspects of accessibility as part of the normal system testing process
© Einstein College of Engineering
CS1015 User Interface Design
Creating Meaningful Graphics, Icons, and Images: Icons should be: familiar clear and legible simple consistent direct efficient discriminable
Choosing Images: Use existing icons when available Use images for nouns, not verbs Use traditional images Consider user cultural and social norms
Choosing the Proper Colors: Adds dimension, or realism, to screen usability Draws attention because it attracts a person’s eye If used properly, it can emphasize the logical organization of information, facilitate the discrimination of screen components, accentuate differences among elements, and make displays more interesting If used improperly, it can be distracting, visually fatiguing
Organizing and Laying Out Windows and Pages: Organize for meaningfulness and efficiency Create groupings Provide alignment and balance
Kinds of Icon
© Einstein College of Engineering
CS1015 User Interface Design
Icon—Something that looks like what it means Index—A sign that was caused by the thing to which it refers Symbol—A sign that may be completely arbitrary in appearance — Marcus (1984) Resemblance—An image that looks like what it means Symbolic—An abstract image representing something Exemplar—An image illustrating an example or characteristic of something Arbitrary—An image completely arbitrary in appearance whose meaning must be learned Analogy—An image physically or semantically associated with something — Rogers (1989) Characteristics of Icons Syntactics is an icon’s physical structure Square, round, red, green, big, small? Semantics is the icon’s meaning To what does it refer? Pragmatics is how the icon is physically produced Can it be illustrated clearly? Influences on Icon Usability Provide icons that are: Familiar Clear and legible Simple Consistent Direct Efficient Discriminable Also consider the: Context in which the icon is used Expectancies of users Complexity of task A Successful Icon Looks different from all other icons Is obvious what it does or represents Is recognizable when no larger than 16 pixels square Looks as good in black and white as in color Size Supply in all standard sizes. 16 x 16 pixels 16- and 256-color versions 32 x 32 pixels 16- and 256-color versions
© Einstein College of Engineering
CS1015 User Interface Design
Effective: 24 x 24 or 26 x 26 in 32 x 32 icon 48 x 48 pixels 16- and 256-color versions Use colors from the system palette Use an odd number of pixels along each side Provides center pixel around which to focus design Minimum sizes for easy selection: With stylus or pen: 15 pixels square With mouse: 20 pixels square With finger: 40 pixels square Provide as large a hot zone as possible Choosing Images Use existing icons when available Use images for nouns, not verbs Use traditional images Consider user cultural and social norms Creating Images Create familiar and concrete shapes Create visually and conceptually distinct shapes Incorporate unique features of an object Do not display within a border Clearly reflect objects represented Simply reflect objects represented, avoiding detail Create as a set, communicating relationships to one another through common shapes Provide consistency in icon type Create shapes of the proper emotional tone Drawing Images Provide consistency in shape over varying sizes Do not use triangular arrows in design to avoid confusion with other system symbols When icons are used to reflect varying attributes, express those attributes as meaningfully as possible Provide proper scale and orientation Use perspective and dimension whenever possible Accompany icons with labels to ensure intended meaning Icon Animation and Audition Animation Use: To provide feedback For visual interest Make it interruptible or independent of user’s primary interaction Do not use it for decoration Permit it to be turned off by the user For fluid animation, present images at 16 or more frames per second Audition
© Einstein College of Engineering
CS1015 User Interface Design
Consider auditory icons The Design Process Define the icon’s purpose and use Collect, evaluate, and sketch ideas Draw in black and white Draw using an icon-editing utility or drawing package Test for user: Expectations Recognition Learning Test for legibility Register new icons in the system’s registry Screen Presentation Follow all relevant general guidelines for screen design Limit the number of symbols to 12, if possible, and at most 20 Arrange icons In a meaningful way, reflecting the organization of the real world To facilitate visual scanning Consistently Place object and action icons in different groups Present an interactive icon as a raised screen element Ensure that a selected icon is differentiable from unselected icons Permit arrangement of icons by the user Permit the user to choose between iconic and text display of objects and actions Multimedia: Purpose of Graphics Navigational To identify links that may be followed Representational To illustrate items mentioned in text Organizational To depict relationships among items mentioned in text Explanative To show how things or processes work Decorative To provide visual appeal and emphasis Graphics Use graphics to Supplement the textual content, not as a substitute for it Convey information that can’t be effectively using text Enhance navigation through Presenting a site overview Identifying site pages Identifying content areas
expressed
© Einstein College of Engineering
CS1015 User Interface Design
Images Limit the use of graphics that take a long time to load Coordinate the graphics with all other page elements Graphics should not look like gratuitous decorations or banner ads
Insure images convey their intended message General: Use standard images Use images consistently Produce legible images Provide descriptive text or labels with all images Distinguish navigational from decorative images Minimize: The number of presented images The size of presented images Restrict single images to 5K Restrict page images to 20K Provide thumbnail size images Image animation Avoid extraneous or gratuitous images Color Minimize the number of colors in an image Format Produce images in the most appropriate format GIF or JPEG Internationalization: Provide for image internationalization Screen design: Limit large images above the page fold Use simple background images Reuse images on multiple pages Image Maps Use Provide navigation links to other content Advantages Can be arrayed in a meaningful and obvious structure Faster to load than separate images Disadvantages Consume a significant amount of screen space “Hot spots” not always obvious One’s location within map is not always obvious Guidelines Use with caution Provide effective visual cues and emphasis to make it easy to identify link boundaries Ensure image maps are accessible to the vision impaired Photographs/Pictures
© Einstein College of Engineering
CS1015 User Interface Design
Use when every aspect of the image is relevant Guidelines: Use JPEG format On the initial page: Display a small version A thumbnail-size image Zoom-in on most relevant detail Link to larger photos showing as much detail as needed Include fewer people and objects in less complicated settings than in photos for print Emphasize close-up shots with clean backgrounds Video Uses: Show things that move or change over time Show the proper way to perform a task Show events that cannot be seen directly Convey human behavior and emotions Provide a personal message Grab attention
Disadvantages: Expensive to produce Slow to download Small and difficult to discern detail Guidelines: Never automatically download a video into a page Create short segments Provide controls: playing, pausing, and stopping Consider using: Existing video Audio only A slide show with audio Diagrams Uses: Show the structure of objects Show the relationship of objects Show the flow of a process or task Reveal a temporal or spatial order Kinds: Flow charts Cause and effect charts Gantt charts Entity relationship charts Organization charts Network diagrams Parts:
© Einstein College of Engineering
CS1015 User Interface Design
Shapes Labels Lines Guidelines: Provide simple diagrams Provide cutaway diagrams or exploded views to illustrate key points Drawings Use when some parts need emphasize or representation Guidelines: Provide simple drawings showing minimal detail Provide a link to a complete drawing Animation Uses: Explain ideas involving a change in time or position Illustrate the location or state of a process Provide feedback Show continuity in transitions Enrich graphical representations Aid visualization of 3-D structures Attract attention Disadvantages: Very distracting Can potentially create problems for people with some disabilities Slow loading Guidelines: Use only when an integral part of the content Introduce animation Create short segments Provide a freeze frame and stop mode Avoid distracting animation Audition Uses: Supplement to text and graphics Establish atmosphere Create a sense of place Teach Sample For users: With disabilities In eye-busy and hands-busy situations Without access to keyboard and/or monitor Advantages: Does not obscure information on the screen Shorter downloading time than video Disadvantages:
© Einstein College of Engineering
CS1015 User Interface Design
Annoying to many people in the vicinity Easily overused and ignored Not reliable because: Some people are hard of hearing Leaves no permenant record The user can turn it off Audio capability may not exist Guidelines: When words are spoken: Content should be simple Narration speed should be about 160 WPM When used to introduce new ideas or concepts the narration should be slowed Off-screen narration should be used rather than on-screen Unless narrator is recognized authority Create short segments Provide high-quality segments Provide audio controls Play background audio softly Interactive Voice Response (IVR) Limit to three or four levels Limit to four or fewer choices per level Combining Mediums Combinations Use sensory combinations that work best together: Auditory text with visual graphics Screen text with visual graphics Integration Closely integrate screen text with graphics Relevance Both the visual and auditory information should be totally relevant to the task being performed Presentation: Visual and auditory textual narrative should be presented simultaneously, or the visuals should precede the narrative by no more than 7 seconds To control attention, reveal systematically Limit elements revealed to one item at a time For related elements reveal sequentially Show action initiation as well as result Avoid animation that distracts from other more important information Consider download times when choosing media Testing Thoroughly test all graphics for: Legibility Comprehensibility Acceptance
© Einstein College of Engineering
CS1015 User Interface Design
Coloring: Color’s characteristics What color is Uses of color Possible problems and cautions Color connotations Results of color research Color and human vision How to use color How to choose the proper colors for: Textual graphic screens Statistical graphics screens Web screen text and images Color—What Is It? Results from the stimulation of the proper receptor in the eye by a received light wave A color name is a learned phenomenon based on previous experiences and associations The visual spectrum of wavelengths to which the eye is sensitive ranges from about 400 to 700 millimicrons Three properties: Hue—Spectral wavelength composition of a color such as green or red Chroma or saturation—Purity of a color in a scale from gray to the most vivid version of the color Value or intensity—Relative lightness or darkness of a color in a range from black to white Primary colors: red, green, and blue Their wavelengths additively combine in pairs to produce magenta, cyan, and yellow, and all the other visible colors in the spectrum Color Uses: Use color to assist in formatting a screen: Relating or tying elements into groupings Breaking apart separate groupings of information Associating information that is widely separated Highlighting or calling attention to important information by setting off from other information Use color as a visual code to identify Screen components Logical structure of ideas, processes, sequences Sources of information Status of information Use color to Realistically portray natural objects Increase screen appeal Possible problem with colors: High attention-getting capacity
© Einstein College of Engineering
CS1015 User Interface Design
Interference with use of other screens Varying sensitivity of the eye to different colors More sensitive to those in the middle of the visual spectrum: Yellow and green Combinations of screen colors can strain the eye’s accommodation mechanism: Blue and red Color-viewing deficiencies 8 percent of males 0.4 percent of females Cross-disciplinary and cross-cultural differences Colors can have different meanings in different situations to different people
Color and Human Vision: Lens Muscles that focus wavelengths of light on the retina Different wavelengths are focused at different distances behind the lens Longer wavelengths (red) are focused farther back than the shorter wavelengths (blue) Colors of a different wavelength from the color actually being focused will appear out of focus To create a sharp image of the out-of-focus colors requires a refocusing of the eye Excessive refocusing (such as between red and blue) can lead to eye fatigue Retina Light-sensitive surface of the eye Rods Sensitive to lower light levels and function primarily at night Cones Stimulated by higher light levels and react to color Different cones possess maximum sensitivity to different wavelengths of light Two-thirds (64 percent) maximally sensitive to longer light wavelengths Referred to as “red” sensitive cones However, peak sensitivity is in the yellow portion of the visual spectrum One-third (32 percent) maximally sensitive to medium wavelengths Referred to as “green” sensitive cones 2 percent primarily react to short light wavelengths Referred to as “blue” sensitive cones Choosing Colors: Choosing Colors for Categories of Information Requires a clear understanding of how the information will be used Some examples: If different parts of the screen are attended to separately, color-code the different parts to focus selective attention on each in turn If decisions are made based on the status of certain types of information on the screen, color-code the types of status
© Einstein College of Engineering
CS1015 User Interface Design
If screen searching is performed to locate information of a particular kind or quality, color-code these kinds for contrast If the sequence of information use is ordered, use color to identify the sequence If the information displayed on a screen is packed or crowded, use color to provide visual groupings Use color as a redundant code
Colors In Context: Usage Design for monochrome first Useful: For 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 Do not use color where other identification techniques, such as location, are available Discrimination and Harmony For best absolute discrimination, select no more than four or five colors widely spaced on the color spectrum. Good colors: red, yellow, green, blue, and brown For best comparative discrimination, select no more than six or seven colors widely spaced on the color spectrum. Other acceptable colors: orange, yellow-green, cyan, violet, and magenta Choose harmonious colors One color plus two colors either side it's complement Three colors equidistant points around color circle For extended viewing or for older viewers, use brighter colors. Emphasis To draw attention or to emphasize elements, use bright or highlighted colors. To de-emphasize elements: Use less bright colors The perceived brightness of colors from most to least is white, yellow, green, blue, red To emphasize separation, use contrasting colors Red and green Blue and yellow To convey similarity, use similar colors Orange and yellow Blue and violet Common Meanings To indicate that actions are necessary, use warm colors: Red Orange
© Einstein College of Engineering
CS1015 User Interface Design
Yellow To provide status or background information, use cool colors: Green Blue Violet Purple Conform to human expectations In the job In the world at large Location In the center of the visual field, use, red and green For peripheral viewing, use blue, yellow, black, and white Use adjacent colors that differ by hue and value or lightness Ordering Order colors by their spectral position: Red Orange Yellow Green Blue Indigo Violet Foregrounds Use colors that highly contrast with background color For text or data, use: Black Desaturated or spectrum center colors: white, yellow, or green Warmer more active colors Use colors that possess the same saturation and lightness To emphasize an element, highlight it in a light value of the foreground color, pure white, or yellow To de-emphasize an element, lowlight it in a dark value of the foreground color Backgrounds Use a background color to organize a group of elements into a unified whole Use colors that do not compete with the foreground Use: Light-colored backgrounds of low intensity: off-white or light gray Desaturated colors Cool, dark colors such as blue or black Colors on the spectral extremes Three-Dimensional Look Use at least five colors or color values to create a 3-D look on a screen. Background: Control itself and window on which it appears Foreground:
© Einstein College of Engineering
CS1015 User Interface Design
Captions and lines for buttons, icons, and other objects (usually black or white)
Selected mode: Color used when the item is selected Top shadow: Bezel on the top and left of the control Bottom shadow: Bezel on the bottom and right of the control Color Palette, Defaults, and Customization Permit users to customize their colors Provide a default set of colors for all screen components Provide a palette of six or seven foreground colors Provide 2 to 5 values or lightness shades for each foreground color Provide a palette of six or seven background colors Never refer to a screen element by its color Gray Scale For fine discriminations use a black-gray-white scale Recommended values are white, light gray, medium gray, dark gray, black Text in Color When switching text from black to color: Double the width of lines Use bold or larger type: If originally 8 to 12 points, increase by 1 to 2 points If originally 14 to 24 points, increase by 2 to 4 points Check legibility by squinting at text Too-light type will recede or even disappear Monochromatic Screens At the standard viewing distance, white, orange, or green are acceptable colors At a far viewing distance, white is the best choice Over all viewing distances, from near to far, white is the best choice Consistency Be consistent in color use Considerations for People with Color-Viewing Deficiencies Use color combinations that can be easily discriminated Ensure lightness contrast between foreground and background is high Increase lightness contrast between colors on either end of visual spectrum (blues and reds) Avoid combining light colors from either end of spectrum with dark colors from middle Use tools to see what screen/pages will look like to color deficient viewers Cultural, Disciplinary, and Accessibility Considerations Consider the impact of specific colors on Users of various cultures Users of various disciplines Users relying on accessibility utilities Choosing Colors for Textual Graphic Screens Overview
© Einstein College of Engineering
CS1015 User Interface Design
Use effective foreground/background combinations Use effective foreground combinations Choose the background color first Display no more than four colors at one time Use colors in toolbars sparingly Test the chosen colors Effective Foreground/Background Combinations The majority of good combinations possess a bright or high-intensity color as the foreground color The majority of poor combinations are those with low contrast The best overall color is black The poorest overall color is brown Maximum flexibility and variety in choosing a foreground color exists with black or blue backgrounds Brown and green are the poorest background choices — Lalomia and Happ (1987) For dark on light polarity Any foreground color is acceptable if the background color is chosen properly Increased saturation of the foreground only marginally affected ratings, implying that any dark, saturated, foreground color is satisfactory Saturated backgrounds yield unsatisfactory ratings Less saturated backgrounds generally receive high ratings with any foreground color For light on dark polarity Combinations involving saturated colors tend to be unsatisfactory As foreground color saturation increases, the number of background colors yielding high ratings diminishes Generally, desaturated foreground/background color combinations yielded the best ratings Short wavelength, cool colors were preferred for backgrounds (blue, bluish cyan, cyan) — Pastoor (1990) Choose the Background First Then, choose acceptable foreground colors Maximum of Four Colors Displaying more than four colors at one time on a textual screen gives rise to a feeling of “too much” Use Colors in Toolbars Sparingly Use color in toolbar icons simply and conservatively, and only if the color: Aids icon identification Makes it easier to distinguish icons Adds meaning Test the Colors Always test all chosen colors Statistical Graphic Screens Choosing Colors Emphasize the graphic’s data Number of Colors
© Einstein College of Engineering
CS1015 User Interface Design
Use no more than six colors at one time Use one color of five values or lightness Backgrounds Surround images In a neutral color In a color complementary to the main image Size Provide images of an adequate size for the task If the image changes in size, use colors that exhibit a minimum shift in hue or lightness White, yellow, and red on dark backgrounds Status To indicate a status, use the following colors: Proper, normal, or OK: Green, white, or blue Caution: Yellow or gold Emergency or abnormal: Red Measurements and Area-Fill Patterns Display measurements in the following colors: Grids: Gray Data points: Yellow Variance or error bars: Blue Out of specified range data: Red Captions / labels: Lavender Lime green Cyan Display area-fill patterns in the following colors: Widely spaced dots: Red Closely spaced dots: Green Wide dashed lines: Magenta Narrow dashed lines: Cyan Wide crosshatch: Blue Narrow Crosshatch: Yellow Physical Impressions Size To convey an impression of: Larger: Use bright or saturated colors Smaller: Use dark or desaturated colors Similar: Use colors of equal lightness Weight To convey an impression of: Heavy: Use dark, saturated colors Light: Use light, desaturated colors Distance To convey an impression of: Close: Use saturated, bright, long-wavelength (red) colors Far: Use saturated, dark, short-wavelength (blue) colors
© Einstein College of Engineering
CS1015 User Interface Design
Height To convey an impression of height, use desaturated, light colors Depth To convey an impression of depth, use saturated, dark colors Concentration level To convey an impression of concentration level: High: Saturated colors Low: Desaturated colors Magnitude of change: To convey an impression of magnitude of change: Lowest: Short-wavelength (blue) colors Highest: Long-wavelength (red) colors Actions: To convey an impression of action: Required: Long-wavelength (red) colors Not required: Short-wavelength (blue) colors Order: To convey an impression of order with color: Low end of continuum: Short-wavelength (blue) High end of continuum: Long-wavelength (red) When displaying an array of ordered colors, position: Short-wavelength colors at left side or bottom Long-wavelength colors at right side or top To convey impression of order with value or lightness, use the lightness order of a color (darkest to lightest or vice versa)
Neutrality: To convey impression of neutrality, use black, gray, and white
Web Pages: Choosing Colors Purpose Color must always have a meaningful purpose Palette Use the browser 216-color palette Presentation Minimize the number of presented colors Always consider color in context Use similar or the same color schemes throughout For foregrounds: Use black or strong colors for text and headings For backgrounds: Use weaker contrasting colors such as off-white or light gray Use a uniform color in large areas The smaller the element, the more contrast is required between it and its background
© Einstein College of Engineering
CS1015 User Interface Design
Larger images should use Flat, Web-safe colors Fewer colors than small images Select colors easily reproduced in black and white
Links
Use default colors for links Make unselected/unvisited links blue Make selected/visited links purple Do not display non-link text in link colors Test all colors Uses of Color to avoid: Relying exclusively on color Too many colors at one time Highly saturated, spectrally extreme colors together: Red and blue Yellow and purple Low-brightness colors for extended viewing or older viewers Colors of equal brightness Colors lacking contrast: Yellow and white Black and brown Reds, blues, and browns against light background Fully saturated colors for text or other frequently read screen components Pure blue for text, thin lines, and small shapes Colors in small areas Color for fine details Non-opponent colors Red and green in the periphery of large-scale displays Adjacent colors that only differ in the amount of blue they possess Single-color distinctions for color-deficient users Using colors in unexpected ways Using color to improve legibility of densely packed text Organize And Layout Windows And Pages Overview Organizing and laying out graphical and Web screens to encourage accurate: Information comprehension Control execution Organizing for meaningfulness and efficiency Creating groupings Providing alignment and balance Organization and Layout: General Guidelines Amount of information
© Einstein College of Engineering
CS1015 User Interface Design
Present the proper amount of information on each screen Too little is inefficient Too much is confusing Present all information necessary for performing an action or making a decision on one screen, whenever possible Organization and flow Divide information into units that are logical, meaningful, and sensible Provide an ordering that: Is prioritized according to the user's expectations and needs Is logical and sequential Is rhythmic, guiding a person’s eye Encourages natural movement sequences Minimizes pointer and eye movement distances Control placement Position the most important and frequently used controls at the top left Maintain a top-to-bottom, left-to-right flow If one control enables or affects another, the enabling control should be above or to the left Place the command buttons that affect the entire window horizontally, and centered, at bottom Navigation The flow of interaction should: Require minimal cursor and pointer travel Minimize the number of times a person’s hand has to travel between keyboard and mouse Assist users in navigating through a screen by: Aligning elements Grouping elements Including line borders Aesthetics: Provide a visually pleasing composition through Adequate use of white space Balance Groupings Alignment of elements Avoid visual clutter by maintaining Low screen density levels Distinctiveness of elements Focus and emphasis Provide visual emphasis to the most important screen elements, its data, or information Sequentially, direct attention to items that are: Critical Important Secondary Peripheral Consistency
© Einstein College of Engineering
CS1015 User Interface Design
Provide consistency With a person’s experiences and cultural conventions Internally within a system Externally across systems Visual identity or theme Creating Groupings General Provide groupings of associated elements Elements of a radio button or check box Two or more related fields or controls Create groupings of 5 degrees of visual angle White space Provide adequate separation of groupings through the liberal use of white space Leave adequate space: Around groups of related controls Between groupings and window borders The space between groupings should be greater than the space between fields within a grouping Headings Provide grouping headings that meaningfully and concisely describe the nature of the group Borders Enhance groupings through incorporation of borders around Elements of a single control Groups of related controls or fields Individual control borders should be visually differentiable from borders delineating groupings Provide a border consisting of a thin line around single controls Provide a border consisting of slightly thicker line around groups of fields or controls Do not place individual borders around single Entry fields List boxes Combination boxes Spin boxes Sliders Do not place borders around command buttons Control Borders Incorporate a thin single-line border around the elements of a selection control Section Borders Incorporate a thicker single-line border around groups of related entry or selection controls Dependent Controls Position a conditional control or controls To the right of the control to which it relates Alternatively, position it below the control to which it relates
© Einstein College of Engineering
CS1015 User Interface Design
Either: Display these conditional controls in a subdued or grayed out manner When a control is relevant, return it to normal intensity Do not display a conditional control until the information to which it relates is set Inscribe a filled-in arrow between the selected control and its dependent controls to visually relate them to each other Aligning Screen Elements Minimize alignment points on a window Vertically Horizontally Balancing Screen Elements Create balance by Equally distributing controls,spatially, within a window Aligning borders whenever possible Control Navigation Tab/arrow keys Use the Tab key to move between operable window controls, in the logical order of the controls Do not tab to field captions/labels Radio buttons Use arrow keys to move through radio buttons within a single control Check boxes Use the Tab key to move between check boxes, when they are independent controls Within a border or group box, use arrow keys to move between the check boxes since they appear as a logical group List boxes Use arrow keys to navigate within list box choices Command buttons For exiting or expanding/feature dialog command buttons, tab to it at the end of the screen control tabbing sequence For a command button with a contingent relationship to a control in the window body, tab to it at the logical point in the tabbing sequence within the window Keyboard equivalents Use keyboard equivalents (mnemonics) for direct access to each control, whenever possible Mnemonic designations must be unique within a window Window Guidelines Organization Organize windows to support user tasks Present related information in a single window Support the most common tasks in the most efficient sequence of steps Use: Primary windows to:
© Einstein College of Engineering
CS1015 User Interface Design
Begin an interaction and provide top- level context for dependent windows Perform a major interaction Secondary windows to: Extend the interaction Obtain or display supplemental information for primary window Dialog boxes for: Infrequently needed information “Nice-to-know” information Minimize the number of windows needed to accomplish an objective Size Provide large enough windows to: Present all relevant and expected information for the task Not hide important information Not cause crowding or visual confusion Minimize the need for scrolling Less than the full size of the entire screen If a window is too large, determine: Is all the information needed? Is all the information related? Page Layout General Provide a layout that is: Efficient Logical Consistent Self-explanatory Scannable Strike a proper balance between: Textual information Graphics Links Create and use a layout grid Layout Grid Gather representative samples of the contents of site pages Navigation pages, content pages, simple pages, and complex pages Experiment with various arrangements for all kinds of pages Paint or sketch patterns of organization on sample pages Follow all layout guidelines and evolving page organizational standards in the sketching process Maintain as much consistency between pages types as possible Establish a design grid (or grids) for the identified page types Plug in content (navigational components, text, and graphics) for each page Size Restrict the number of elements per page Minimize page length
© Einstein College of Engineering
CS1015 User Interface Design
Generally, use shorter pages for: Home and navigation pages Pages needing to be quickly browses or read online and information quickly found Situations where the pages will be loading over slow modems and all pages are not needed Generally, use longer pages for: Content pages: Where uninterrupted reading is desirable In which an entire concept must be understood without interruption. To match the structure of a paper counterpart To make pages more convenient to download and print To simplify page maintenance
Organization Place critical or important information at the very top so it is always viewable at page opening Within top 4 inches of page Limit large images above the fold Position remaining elements according to importance Reduce graphic complexity and textual density toward the page bottom Formatting Provide sufficient but moderate amount of white space Minimum of 30 percent Keep length of textual lines short Fast reading – 75-100 characters User preference important – 50-60 characters Avoid very narrow columns Keep text and related graphics close together Provide adequate horizontal spacing Use horizontal rules sparingly If multiple audiences exist, provide information formatted for each audience Platforms Design for different platforms and screens Specify an image-safe area Frames Use frames with caution Consider for global elements Use fluid layout (not fixed) Change organization and structure only when significant benefits exist Navigation Elements Differentiate and group navigation elements Provide global at page top Provide local or topical on left side For long lists, consider placing in frame Optionally, provide secondary on right side
© Einstein College of Engineering
CS1015 User Interface Design
Provide explicit or embedded links in content area Consider duplicating embedded links in left navigation bar For long pages provide: “List of Contents” links Important global and local links repeated at page bottom Create common, consistent theme Never create pages without navigational options Homepage Limit to one screen Clearly identify the Web site’s content and purpose Elements to include: Masthead, name, logo of owner and tagline Web site name Brief Web site description Summary of key information content Site overview or map Navigation links to most (if not all) of the site or major sections Summary of latest news or promotions Search facility Possible Page Components Page title Navigation bar Table of contents Site identifier Search facility Page’s author contact person Contact e-mail address Comment facility Other contact details Copyright Date of creation Links to: Skip to main content Other major sections of site Home Page Index Page Site Map or Directory Next Page Previous Page Unit V: Usability:
or
© Einstein College of Engineering
CS1015 User Interface Design
Dimensions Effective Efficient Engaging Error tolerant Easy to learn
Purpose Of Usability Testing: 1. Establish communication bridge between developers and users Developer learns about user’s goals, perceptions, questions, and problems User exposed to capabilities of system early on, before design is solidified 2. Evaluate a product Validate design decisions Identify potential problems early in design Enable comparison of alternate versions of a design element Assess how well user needs and expectations are met Prevent embarrassment resulting from things “slipping through the cracks” Importance of Usability Testing: Developers and users possess different models Developer’s intuitions are not always correct There is no average user It’s impossible to predict usability from appearance Design standards and guidelines are not sufficient Informal feedback is inadequate Products’ built-in pieces almost always have system-level inconsistencies Problems found late more difficult and expensive to fix Problems fixed during development mean reduced support costs later Advantages over a competitive product can be achieved Scope of Testing: Types of Tests Exploratory Evaluations Explore prototype interface design features Gather feedback on preliminary designs Verify assumptions derived during requirements determination Assessment Evaluations Establish how well user tasks are supported Determine what usability problems may exist Comparative Evaluations Compare two or more design alternatives Validation Evaluations Ascertain whether a usability objective is achieved Prototypes:
© Einstein College of Engineering
CS1015 User Interface Design
Vehicles for Exploration Communication Evaluation Purpose Obtain user input in design Provide feedback to designers Roles Communication not accuracy or thoroughness Enables design to be better visualized Provides insights into how the software will look and work Aids in defining tasks, their flow, the interface its screens
itself,
and
Kinds Hand sketches and scenarios Screen sketches created by hand Interactive paper prototypes Interface components constructed of common paper technologies Programmed facades Examples of finished dialogs and screens for some important aspects of the system Prototype-oriented languages An example of finished dialogs and screens for some important aspects of the system Hand Sketches and Scenarios Description Screen sketches created by hand Focus is on design, not interface mechanics A low-fidelity prototype Advantages Can be used very early in the development process Suited for use by entire design team No large investment of time and cost No programming skill needed Easily portable Fast to modify and iterate A rough approximation often yields more substantive critical comments Easier to comprehend than functional specifications Can be used to define requirements Disadvantages Only a rough approximation Limited in providing an understanding of navigation and flow A demonstration, not an exercise Driven by a facilitator, not the user Limited usefulness for a usability test
© Einstein College of Engineering
CS1015 User Interface Design
A poor detailed specification for writing the code Usually restricted to most common tasks Hand Sketch Creation Process Sketch (storyboard) the screens while determining: The source of the screen’s information The content and structure of individual screens The overall order of screens and windows Use an erasable medium Sketch the screens needed to complete each task Try selected metaphors and change as necessary Storyboard common/critical/frequent scenarios first Follow from beginning to end Then, go back and build in exceptions Don’t get too detailed; exact control positioning is not important, just overall order and flow Sketch storyboard as a team, including at least one user Develop online prototypes only when everyone agrees that a complete set has been satisfactorily sketched Interactive Paper Prototypes Description Interface components (menus, windows, and screens) constructed of common paper technologies (Post-It notes, transparencies) Components are manually manipulated to reflect the dynamics of the software A low-fidelity prototype Advantages: More illustrative of program dynamics than sketches Can be used to demonstrate the interaction Otherwise, generally the same as for hand-drawn sketches and scenarios Disadvantages: Only a rough approximation A demonstration, not an exercise Driven by a facilitator, not the user Limited usefulness for usability testing
Programmed Facades Description Examples of finished dialogs and screens for some important aspects of the system Created by prototyping tools Medium-fidelity to high-fidelity prototypes Advantages Provide detailed specification for writing code A vehicle for data collection Disadvantages May solidify the design too soon
© Einstein College of Engineering
CS1015 User Interface Design
May create the false expectation that the “real thing” is only a short time away More expensive to develop More time-consuming to create Not effective for requirements gathering Not all of the functions demonstrated may be used Not practical for investigating more than two or three approaches Prototype-Oriented Languages Description An example of finished dialogs and screens for some important aspects of the system Created through programming languages that support the actual programming process A high-fidelity prototype Advantages May include the final code Otherwise, generally the same as those of programmed facades Disadvantages Generally the same as for programmed facades Fidelity Prototype fidelity seems to have no impact on the identification of usability problems Combinations of these prototypes should be used throughout the entire system development cycle Tests: A tool to measure something, including: Conformance with a requirement Conformance with guidelines for good design Identification of design problems Ease of system learning Retention of learning over time Speed of task completion Speed of need fulfillment Error rates Subjective user satisfaction Guidelines and standards review A review of the interface in terms of an organization’s standards and design guidelines Heuristic evaluation A detailed evaluation of a system by interface design specialists to identify problems Cognitive walkthroughs Reviews of the interface in the context of tasks users perform Think-aloud evaluations Users perform specific tasks while thinking aloud Usability test An interface evaluation under real-world conditions
© Einstein College of Engineering
CS1015 User Interface Design
Classic experiments An objective comparison of two or more prototypes identical in all aspects except for one design issue Focus groups A discussion with users about interface design prototypes or tasks Guidelines and Standards Review Description: A review of the interface in terms of an organization’s standards and design guidelines Advantages: Can be performed by developers Low cost Can identify general and recurring problems Particularly useful for identifying screen design and layout problems Disadvantages: May miss severe conceptual, navigation, and operational problems Heuristic Evaluation Description: A detailed evaluation of a system by interface design specialists to identify problems Advantages: Easy to do Relatively low cost Does not waste user’s time Can identify many problems Disadvantages: Evaluators must possess interface design expertise Evaluators may not possess an adequate understanding of the tasks and user communities Difficult to: Identify system wide structural problems Uncover missing exits and interface elements Identify most important of all identified problems Does not provide systematic way to generate solutions to problems
Heuristic Evaluation Process Guidelines: Use 3 to 5 expert evaluators Choose knowledgeable people Familiar with the project situation Possessing a long-term relationship with the organization Experienced Preparing the session: Select evaluators Prepare or assemble:
© Einstein College of Engineering
CS1015 User Interface Design
Project overview Checklist of heuristics Provide briefing to evaluators to: Review the purpose of the evaluation session Preview the evaluation process Present the project overview and heuristics Answer any evaluator questions Provide any special evaluator training that may be necessary Conducting the session: Have each evaluator review the system alone The evaluator should: Establish own process or method of review Provide usage scenarios, if necessary Compare findings with usability principles list Identify any other relevant problems / issues Make at least two passes through the system Detected problems should be related to the specific heuristics they violate Comments are recorded either: By evaluator By observer The observer may answer questions and provide hints Restrict the length of the session to 2 hours After the session: Hold a debriefing session including observers and design team members where: Each evaluator presents problems detected and the heuristic it violated A composite problem listing is assembled Design suggestions for improving the problematic aspects of system are discussed After the debriefing session: Generate a composite list of violations as a ratings form Request evaluators to assign severity ratings to each violation Analyze results and establish a program to correct violations and deficiencies
Research-Based Set of Heuristics Automate unwanted workload Free cognitive resources for high-level tasks Eliminate mental calculations, estimations, unnecessary thinking Reduce uncertainty Display data in a manner that is clear and obvious Fuse data
comparisons, and
© Einstein College of Engineering
CS1015 User Interface Design
Reduce cognitive load by bringing together lower-level data into a higher-level summation Present new information with meaningful aids to interpretation Use a familiar framework, making easier to absorb Use everyday terms, metaphors, and so on Use names that are conceptually related to functions Context-dependent Attempt to improve recall and recognition Group data in consistently meaningful ways to decrease search time Limit data-driven tasks Reduce the time needed to assimilate raw data Make appropriate use of color and graphics Include in the displays only that information needed by a user at a given time Allow users to remain focused on critical data Exclude extraneous information that is not relevant to current tasks Provide multiple coding of data where appropriate Practice judicious redundancy To resolve the conflict between heuristics 6 and 8 From Gerhardt-Powals (1996) Possible Web Page Heuristics Speak the user’s language Use familiar words, phrases, and concepts Present information in a logical and natural order Be consistent Indicate similar concepts through identical terminology and graphics Adhere to uniform conventions for layout, formatting, typefaces, labeling, and so on Minimize the user’s memory load Take advantage of recognition rather than recall Do not force users to remember key information across documents Possible Web Page Heuristics (Table 14.4) (Continued) Build flexible and efficient systems Accommodate a range of user sophistication and diverse user goals Provide instructions where useful Lay out screens so that frequently accessed information is easily found Design aesthetic and minimalist systems Create visually pleasing displays Eliminate irrelevant or distracting information Use chunking Write materials so that documents are short and contain only one topic
© Einstein College of Engineering
CS1015 User Interface Design
Do not force the user to access multiple documents to complete a single thought Provide progressive levels of detail Organize information hierarchically, with more general information appearing before more specific Encourage the user to delve as deeply as needed, but to stop whenever sufficient information has been obtained Give navigational feedback Facilitate jumping between related topics Allow the user to determine current position in document structure Make it easy to return to an initial state Don’t lie to the user Eliminate erroneous or misleading links Do not refer to missing information From Levi and Conrad (1996) Cognitive Walkthroughs Description: Reviews of the interface in the context of tasks users perform Advantages: Allow a clear evaluation of the task flow early in the design process Do not require a functioning prototype Low cost Can be used to evaluate alternate solutions Can be performed by developers More structured than a heuristic evaluation Useful for assessing “exploratory learning” Disadvantages: Tedious to perform May miss inconsistencies and general and recurring problems Guidelines: Needed to conduct the walkthrough are: General description of proposed system users and their relevant knowledge Specific description of one or more core or representative tasks to be performed List of correct actions to complete each task Review: Several core or representative tasks across a range of functions Proposed tasks of particular concern Developers must be assigned roles of: Scribe to record results of the action Facilitator to keep the evaluation moving Start with simple tasks Don’t get bogged down demanding solutions Limit session to 60 to 90 minutes
© Einstein College of Engineering
CS1015 User Interface Design
Think-Aloud Evaluations Description: Users perform specific tasks while thinking aloud Comments are recorded and analyzed Advantages: Utilizes actual representative tasks Provides insights into the user’s reasoning Disadvantages: May be distracting and unnatural for participants Can slow participants thought processes Can be exhausting for participant Guidelines: Develop: Several core or representative tasks Tasks of particular concern Limit session to 60 to 90 minutes Usability Test Description: An interface evaluation under real-world or controlled conditions Measures of performance are derived for specific tasks Problems are identified Advantages: Utilizes an actual work environment Identifies serious or recurring problems Disadvantages: High cost for establishing facility Requires test conductor with interface expertise Emphasizes first-time system usage Poorly suited for detecting inconsistency problems Performance and Process Measures Performance Data Focuses on how well users can do their tasks Completion rates Completion times Error rates Process Data Comprised of measures about what users are doing during task completion Participant's self reports Observation of participant behavior Eye movement tracking Classic Experiments Description: An objective comparison of two or more prototypes identical in all aspects except for one design issue Advantages: Objective measures of performance are obtained
© Einstein College of Engineering
CS1015 User Interface Design
Subjective measures of user satisfaction may be obtained Disadvantages: Requires a rigorously controlled experiment to conduct the evaluation The experiment conductor must have expertise in setting up, running, and analyzing data collected Requires creation of multiple prototypes Guidelines: State a clear and testable hypothesis Specify a small number of independent variables to be manipulated Carefully choose the measurements Judiciously select study participants and carefully or randomly assign them to groups Control for biasing factors Collect the data in a controlled environment Apply statistical methods to data analysis Resolve the problem that led to conducting the experiment Focus Groups Description: A discussion with users about interface design prototypes or tasks Advantages: Useful for: Obtaining initial user thoughts Trying out ideas Easy to set up and run Low cost Disadvantages: Requires experienced moderator Not useful for establishing: How people really work What kinds of usability problems people have Guidelines: Restrict group size to 8 to 12 Limit to 90 to 120 minutes in length Record session for later detailed analysis Choosing a Testing Method: Usability Test vs. Heuristic Evaluation Research concludes that both are effective at different times in the design process and should be utilized Heuristic reviews should be applied first or early in the design process to identify simpler problems Usability testing should be applied later in the design process to identify more complex problems Concurrent vs. Retrospective User Comments Concurrent
© Einstein College of Engineering
CS1015 User Interface Design
Participants verbalize their observations and comments during the test Retrospective Participants verbalize their observations and comments after test completion Study Results There are no differences in the majority of the comments using either method Concurrent does not appear to slow down the participants or cause more errors Valid comments can be collected up to 24 hours after the test Participants tend to comment on successes, not “struggles” Concurrent are better for certain design problems such as link naming Retospective are more valuable for helping resolve complex issues
Developing and Conducting a Test The Test Plan Define the scope of the test Define the purpose of the test Performance goals What the test is intended to accomplish Create a test timetable Define the test methodology Type of test to be performed Test limitations Developer participants Develop scenarios to satisfy the test’s purpose Select test Participants Identify and schedule the test facility or location Run a pilot test Things to Test in Web Site Design All the browsers, servers, and monitors used Different dial-up speeds Navigation design Visual design style Content legibility and readability Backgrounds and color Graphics and icons Page breaks Page printing Accessibility Test Participants Assemble the proper people to participate Consider allowing users to work in pairs Select the proper number of participants Consider providing compensation or incentives Test Facility or Location In a formal environment
© Einstein College of Engineering
CS1015 User Interface Design
Usability laboratory In an informal environment Office or conference room In the field at the actual work location Unmoderated remote testing Pilot Test Choose a participant Design and assemble the test environment Run the pilot test Analyze and interpret the data to see whether anything important has been overlooked Recruit test participants at conclusion of the pilot test Usability Test Guidelines Before starting the test: Ensure that all test materials and equipment are available Explain that the objective is to test the software, not the participants Explain how test materials and records will be used If a consent agreement is to be signed, explain all information on it If verbal protocols will be collected, let participants practice thinking aloud Ensure that: All participants’ questions are answered All participants are comfortable with all procedures During the test: Minimize the number of people who will interact with the participants If observers will be in the room, limit them to two or three Provide a checklist for recording: Times to perform tasks Errors made in performing tasks Unexpected user actions System features used/not used Difficult/easy-to-use features System bugs or failures Record techniques and search patterns that participants employ when attempting to work through a difficulty If participants are thinking aloud, record assumptions and inferences being made Record the session with a tape recorder or video camera Do not interrupt participants unless absolutely necessary If participants need help, provide some response Provide encouragement or hints Give general hints before specific hints Record the number of hints given Watch carefully for signs of stress in participants: Sitting for long times doing nothing Blaming themselves for problems Flipping through documentation without really reading it
© Einstein College of Engineering
CS1015 User Interface Design
Provide short breaks when needed Maintain a positive attitude, no matter what After the test: Hold a post-session interview with participants Inform what has been learned in the test Provide a follow-up questionnaire that asks participants to evaluate the product or tasks performed If videotaping, use tapes only in proper ways Respect participants’ privacy Get written permission to use tapes Compile the data from all test participants List the problems the participants had Sort the problems by priority and frequency Develop solutions for the problems Modify the prototype as necessary Test the system again and again Evaluate the working System: Collect information on actual system usage through: Interviews and focus group discussions Surveys Support line Online suggestion box or trouble reporting Online bulletin board User newsletters and conferences User performance data logging Respond to users who provide feedback The user interface is one of the most important parts of any system. It must be continually evaluated to ensure it is achieving its design objectives and satisfying all your client’s needs. When you can satisfy all your client’s needs, your client will be happy and so will you!
Information Search:
Search Techniques
Free Text Search Boolean Logic Proximity Wildcards Field Searching Other Search Tools
Free Text Search
© Einstein College of Engineering
CS1015 User Interface Design The most simple search involves a free text search. This is based on a word or phrase of your choice appearing anywhere in the source material. Most bibliographic databases have their own individual controlled language which is composed of keywords. These are organised in a structured hierarchy (Thesaurus). This demonstrates the relationship between them, and enables the user to include all the terms that are relevant to their search. The Thesaurus permits a more controlled and detailed search to be undertaken because keywords are used in the indexing of the database.
Boolean Logic If the only thing you learn about effective searching is how to use Boolean logic, you will not go far wrong. Boolean logic breaks a subject down into concepts and uses “operators” such as: AND – narrows down a search using a combination of terms OR – broadens a search by searching for a number of different terms NOT – narrows down a search by eliminating terms that are not associated with something you are trying to find For example: Salmonella AND eggs will retrieve records that contain both terms Salmonella OR eggs will retrieve all records containing a reference to either salmonella or eggs Salmonella NOT eggs will retrieve records that contain Salmonella but have no reference to eggs Boolean logic can be improved by “nesting” which involves the use of parentheses to combine several search requests, for example: (Salmonella OR Listeria) AND (chocolate OR eggs) will retrieve records on Salmonella and eggs, Salmonella and chocolate, Listeria and eggs, and Listeria and chocolate. Not all search engines support Boolean logic but most academic resources (journals, bibliographic databases, reference works) will. Some search engines will support phrase searching which looks for a specifc term. For example:
“salmonella in eggs” will only find records with that exact term.
Proximity Not all search engines recognise proximity operators but a few search engines will have advanced features where proximity searching can be deployed. The most common proximity operator is “NEAR” allowing you to specify two terms that can be found close together.
© Einstein College of Engineering
CS1015 User Interface Design
Wildcards Wildcards are not supported by all search engines but can be used to represent a character or number of characters. They are useful when you are either not sure how to spell something or when you want to find records with different word endings. Different search engines use different symbols but the most common wildcards are “*” and “?”. for example:
poison* will retrieve all records that include poison, poisons, poisoned or poisoning col*r will retrieve all records that contain either colour or color wom*n will retrieve all records that contain either woman or women Field Searching Electronic sources of information have a field structure. Not all sources use the same fields. You will therefore need adapt your search accordingly. Field searching is very precise and powerful but not all sources allow you to search in this way Other search tools Depending on the database or information resource you are using, you may be able to refine your search, save your search, set up search alerts which will run a search for you and email you the results on a regular basis. Search tools and user guides can be found either on your library website or may be made available by the resource provider. These are well worth using in order to get the most out of your searching. Basic Database Searching Techniques Basic Database Searching Techniques The IU Libraries provide access to many subscription information sources often called databases. Because many of the databases the Libraries subscribe to are from different companies their interfaces vary. The following searching techniques will work in most databases. To use any database effectively, read the screens and use the help functions to find the answers to your questions. Boolean Searching Most databases allow the user different searching methods. One of the most common searching methods is Boolean Searching, also called key word searching. This type of search tells the database to retrieve all of the records in the database which cont ain a word or a set of words. You can alter the results by using Boolean Operators which are the words AND, OR and NOT. See below for an explanation of these terms Boolean Operators
AND
© Einstein College of Engineering
CS1015 User Interface Design
Example: cookies and milk will retrieve records which contain the word cookies and the word milk.
OR Example: caffeine or coffee will retrieve records which contain the word caffeine or the word coffee. This operator is used to broaden the number of records retrieved.
NOT Example: chocolate not cake will retrieve records which contain only the word chocolate but not the word cake. This operator is used to reduce the number of records retrieved. Truncation Use Truncation to find different forms of words in a Boolean or keyword search. Some databases use the asterisk and others use the question mark. Check the help function of the database you are using to learn the truncation symbol. Example: employ will retrieve records which contain the words: employ, employment, employs, employee, employer in a record. You can combine truncated terms with other words using Boolean Operators. Example: employ and education will retrieve records which include the various forms of employ and the word education. Nesting Use Nesting to preserve the "logic" of your Boolean Search. Nesting is the use of parenthesis to put your search words into sets. Example: success and (education or employment) will retrieve records which contain the word success and the word education or the word employment. Nesting is often used when search terms have similar meanings: Example: education and (employment or jobs) Stop words Stop words are commonly used words that will automatically stop a computer keyword search because they occur too frequently in records. Stop words are usually listed in the help screens of whatever database you are using. Some stop words are: the, an, at, for, from, then. When constructing a keyword search, choose the most important words. Example: If you want to find information about "What are the effects of Global Warming on agriculture?" Your keywords are: global warming, effects, agriculture. The words what, is, of, the, are not descriptive of your topic.
© Einstein College of Engineering
CS1015 User Interface Design
Visualization: Visualization is any technique for creating images, diagrams, or animations to communicate a message. Visualization through visual imagery has been an effective way to communicate both abstract and concrete ideas since the dawn of man. Examples from history include cave paintings, Egyptian hieroglyphs, Greek geometry, and Leonardo da Vinci's revolutionary methods of technical drawing for engineering and scientific purposes. Overview The use of visualization to present information is not a new phenomenon. It has been used in maps, scientific drawings, and data plots for over a thousand years. Examples from cartography include Ptolemy's Geographia (2nd Century AD), a map of China (1137 AD), and Minard's map (1861) of Napoleon's invasion of Russia half a century earlier. Most of the concepts learned in devising these images carry over in a straight forward manner to computer visualization. Edward Tufte has written two critically acclaimed books that explain many of these principles. Computer graphics has from its beginning been used to study scientific problems. However, in its early days the lack of graphics power often limited its usefulness. The recent emphasis on visualization started in 1987 with the special issue of Computer Graphics on Visualization inScientific Computing. Since then there have been several conferences and workshops, cosponsored by the IEEE Computer Society and ACM SIGGRAPH, devoted to the general topic, and special areas in the field, for example volume visualization. Most people are familiar with the digital animations produced to present meteorological data during weather reports on television, though few can distinguish between those models of reality and the satellite photos that are also shown on such programs. TV also offers scientific visualizations when it shows computer drawn and animated reconstructions of road or airplane accidents. Some of the most popular examples of scientific visualizations are computergenerated images that show real spacecraft in action, out in the void far beyond Earth, or on otherplanets. Dynamic forms of visualization, such as educational animation or timelines, have the potential to enhance learning about systems that change over time. Apart from the distinction between interactive visualizations and animation, the most useful categorization is probably between abstract and model-based scientific visualizations. The abstract visualizations show completely conceptual constructs in 2D or 3D. These generated shapes are completely arbitrary. The model-based visualizations either place overlays of data on real or digitally constructed images of reality, or they make a digital construction of a real object directly from the scientific data. Scientific visualization is usually done with specialized software, though there are a few exceptions, noted below. Some of these specialized programs have been released as Open source software, having very often its origins in universities, within an academic environment where sharing software tools and giving access to the source code is common. There are also many proprietary software packages of scientific visualization tools. Models and frameworks for building visualizations include the data flow models popularized by systems such as AVS, IRIS Explorer, and VTK toolkit, and data state models in spreadsheet systems such as the Spreadsheet for Visualization and Spreadsheet for Images. Some 3D Visualization samples can be seen at www.3dvisualization.com.au
© Einstein College of Engineering
CS1015 User Interface Design
Applications of visualization A scientific visualization of an extremely large simulation of a Raleigh-Taylor instability caused by two mixing fluids. As a subject in computer science, data visualization or scientific visualization is the use of interactive, sensory representations, typically visual, of abstract data to reinforce cognition, hypothesis building and reasoning. Scientific visualization Scientific visualization is the transformation, selection or representation of data from simulations or experiments, with an implicit or explicit geometric structure, to allow the exploration, analysis and understanding of the data. It's a very important part of visualization and maybe the first one, as the visualization of experiments and phenomena is as old as Science itself. Traditional areas of Scientific Visualization are Flow Visualization, medical visualization, astrophysical visualization and chemical visualization. There are several different techniques to visualize scientific data, with isosurface reconstruction and direct volume rendering being the more common. Educational visualization Educational visualization is using a simulation normally created on a computer to create an image of something so it can be taught about. This is very useful when teaching about a topic which is difficult to otherwise see, for example, atomic structure, because atoms are far too small to be studied easily without expensive and difficult to use scientific equipment. It can also be used to view past events, such as looking at dinosaurs, or looking at things that are difficult or fragile to look at in reality like the human skeleton, without causing physical or mental harm to a subjective volunteer or cadaver. Information visualization Information visualization concentrates on the use of computer-supported tools to explore large amount of abstract data. The term "information visualization" was originally coined by the User Interface Research Group at Xerox PARC and included Dr. Jock Mackinlay. Practical application of information visualization in computer programs involves selecting, transforming and representing abstract data in a form that facilitates human interaction for exploration and understanding. Important aspects of information visualization are dynamics of visual representation and the interactivity. Strong techniques enable the user to modify the visualization in real-time, thus affording unparalleled perception of patterns and structural relations in the abstract data in question. Knowledge visualization The use of visual representations to transfer knowledge between at least two persons aims to improve the transfer of knowledge by using computer and non-computer based visualization methods complementarily.[1] Examples of such visual formats are sketches, diagrams, images, objects, interactive visualizations, information visualization applications and imaginary visualizations as in stories. While information visualization concentrates on the use of computer-supported tools to derive new insights, knowledge visualization focuses on transferring insights and creating new knowledge ingroups. Beyond the mere transfer of facts, knowledge visualization aims to further transfer insights, experiences, attitudes, values, expectations, perspectives, opinions,
© Einstein College of Engineering
CS1015 User Interface Design and predictions by using dictionary, Visual dictionary Product Visualization Product Visualization involves visualization software technology for the viewing and manipulation of 3D models, technical drawing and other related documentation of manufactured components and large assemblies of products. It is a key part of Product Lifecycle Management. Product visualization software typically provides high levels of photorealism so that a product can be viewed before it is actually manufactured. This supports functions ranging from design and styling to sales and marketing. Technical visualization is an important aspect of product development. Originally technical drawings were made by hand, but with the rise of advanced computer graphics the drawing board has been replaced by computer-aided design (CAD). CAD-drawings and models have several advantages over hand-made drawings such as the possibility of 3-D modeling, rapid prototyping and simulation Visual communication Visual communication is the communication of ideas through the visual display of information. Primarily associated with two dimensional images, it includes: alphanumerics, art, signs, and electronicresources. Recent research in the field has focused on web design and graphically oriented usability. Visual analytics Visual analytics focuses on human interaction with visualization systems as part of a larger process of data analysis. Visual analytics has been defined as "the science of analytical reasoning supported by the interactive visual interface" [2]. Its focus is on human information discourse (interaction) within massive, dynamically changing information spaces. Visual analytics research concentrates on support for perceptual and cognitive operations that enable users to detect the expected and discover the unexpected in complex information spaces. Technologies resulting from visual analytics find their application in almost all fields, but are being driven by critical needs (and funding) in biology and national security. various complementary visualizations. See also: Picture
Visualization techniques: The following are examples of some common visualization techniques:
Constructing isosurfaces direct volume rendering Streamlines, streaklines, and pathlines table, matrix charts (pie chart, bar chart, histogram, function graph, scatter plot, etc.) graphs (tree diagram, network diagram, flowchart, existential graph, etc.) Maps parallel coordinates - a visualization technique aimed at multidimensional data treemap - a visualization technique aimed at hierarchical data Venn diagram Timeline Euler diagram
© Einstein College of Engineering
CS1015 User Interface Design
Chernoff face Hyperbolic trees brushing and linking Cluster diagram or dendrogram Ordinogram
Hypermedia
Hypermedia is used as a logical extension of the term hypertext in which graphics, audio, video, plain text and hyperlinks intertwine to create a generally non-linear medium of information. This contrasts with the broader term multimedia, which may be used to describe non-interactive linear presentations as well as hypermedia. It is also related to the field of Electronic literature. The term was first used in a 1965 article by Ted Nelson.[1] The World Wide Web is a classic example of hypermedia, whereas a noninteractive cinema presentation is an example of standard multimedia due to the absence of hyperlinks. The first hypermedia work was, arguably, the Aspen Movie Map. Atkinson's HyperCard popularized hypermedia writing, while a variety of literary hypertext and hypertext works, fiction and nonfictions, demonstrated the promise of links. Most modern hypermedia is delivered via electronic pages from a variety of systems including Media players, web browsers, and stand-alone applications. Audio hypermedia is emerging with voice command devices and voice browsing. Hypermedia development tools: Hypermedia may be developed a number of ways. Any programming tool can be used to write programs that link data from internal variables and nodes for external data files. Multimedia development software such as Adobe Flash, Adobe Director, Macromedia Authorware, and MatchWare Mediator may be used to create stand-alone hypermedia applications, with emphasis on entertainment content. Some database software such as Visual FoxPro and FileMaker Developer may be used to develop stand-alone hypermedia applications, with emphasis on educational and business content management. Hypermedia applications may be developed on embedded devices for the mobile and the Digital signage industries using the Scalable Vector Graphics (SVG) specification from W3C (World Wide Web Consortium). Software applications such as Ikivo Animator and Inkscape simplify the development of Hypermedia content based on SVG. Embedded devices such as iPhone natively support SVG specifications and may be used to create mobile and distributed Hypermedia applications. Hyperlinks may also be added to data files using most business software via the limited scripting and hyperlinking features built in. Documentation software such as the Microsoft Office Suite allows for hypertext links to other content within the same file, other external files, and URL links to files on external file servers. For more emphasis on graphics and page layout, hyperlinks may be added using most modern desktop publishing tools. This includes presentation programs, such as Microsoft Powerpoint, add-ons to print layout programs such as Quark Immedia, and tools to include hyperlinks inPDF documents such as Adobe InDesign for creating and Adobe Acrobat for editing. Hyper Publish is a tool specifically designed and optimized for hypermedia and hypertext management. Any HTML Editor may be used to build HTML files, accessible by any web browser. CD/DVD authoring tools such as DVD Studio Pro may be used to hyperlink the content of DVDs for DVD players or web links when the disc is played on a personal computer connected to the internet.
© Einstein College of Engineering
CS1015 User Interface Design
FLAn (Foreign Language Annotator) is a hypermedia editor for annotating foreign language texts with various types of media such as text (definitions, translations, grammar notes, comments, etc.), images, audio, video, animations, and Web links [edit]Hypermedia and Learning There has been a number of theories concerning hypermedia and learning. One important claim in the literature on hypermedia and learning is that it offers more control over the instructional environment to the reader or student. Another claim is that it makes level the playing field among students of varying abilities and enhances collaborative learning. A claim from psychology includes the notion that hypermedia more closely models the structure of the brain, in comparison with printed text. WWW: The World Wide Web, abbreviated as WWW and commonly known as the Web, is a system of interlinked hypertext documents accessed via theInternet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them viahyperlinks. Using concepts from earlier hypertext systems, English engineer and computer scientist Sir Tim Berners-Lee, now the Director of the World Wide Web Consortium, wrote a proposal in March 1989 for what would eventually become the World Wide Web. At CERN in Geneva, Switzerland, Berners-Lee and Belgian computer scientist Robert Cailliau proposed in 1990 to use "HyperText ... to link and access information of various kinds as a web of nodes in which the user can browse at will", and publicly introduced the project in December.
Function:
The terms Internet and World Wide Web are often used in every-day speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global system of interconnected computer networks. In contrast, the Web is one of the services that runs on the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs. In short, the Web is an application running on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of communication messages, behind the scenes, in order to fetch and display it. First, the server-name portion of the URL is resolved into an IP address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image. Statistics measuring a website's popularity are usually based either on the number of page views or associated server 'hits' (file requests) that take place. While receiving these files from the web server, browsers may progressively render the page onto the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page composition languages. Any images and other resources are incorporated to produce the onscreen web page that the user sees. Most web pages contain hyperlinks to other related pages and perhaps to downloadable files, source documents, definitions and other web resources. Such a collection of useful, related resources, interconnected via hypertext links is dubbed
© Einstein College of Engineering
CS1015 User Interface Design a web of information. Publication on the Internet created what Tim Berners-Lee first called the WorldWideWeb (in its original CamelCase, which was subsequently discarded) in November 1990. Software Tools: A programming tool or software development tool is a program or application that software developers use to create, debug, maintain, or otherwise support other programs and applications. The term usually refers to relatively simple programs that can be combined together to accomplish a task, much as one might use multiple hand tools to fix a physical object. History The history of software tools began with the first computers in the early 1950s that used linkers, loaders, and control programs.Tools became famous with Unix in the early 1970s with tools like grep, awk and make that were meant to be combined flexibly with pipes. The term "software tools" came from the book of the same name by Brian Kernighan and P. J. Plauger. Tools were originally simple and light weight. As some tools have been maintained, they have been integrated into more powerful integrated development environments (IDEs). These environments consolidate functionality into one place, sometimes increasing simplicity and productivity, other times sacrificing flexibility and extensibility. The workflow of IDEs is routinely contrasted with alternative approaches, such as the use of Unix shell tools with text editors like Vim and Emacs. The distinction between tools and applications is murky. For example, developers use simple databases (such as a file containing a list of important values) all the time as tools.However a full-blown database is usually thought of as an application in its own right. For many years, computer-assisted software engineering (CASE) tools were sought after. Successful tools have proven elusive.[citation needed] In one sense, CASE tools emphasized design and architecture support, such as for UML. But the most successful of these tools are IDEs. The ability to use a variety of tools productively is one hallmark of a skilled software engineer. Categories Software development tools can be roughly divided into the following categories:
Performance analysis tools Debugging tools Static analysis and formal verification tools Correctness checking tools Memory usage tools Application build tools Integrated development environments List of tools Software tools come in many forms:
Binary compatibility analysis: icheck, ABI Compliance Checker Bug Databases: Comparison of issue tracking systems - Including bug tracking systems
© Einstein College of Engineering
CS1015 User Interface Design
Build Tools: Build automation, List of build automation software Code coverage: Code coverage#Software code coverage tools. Software Diagnostics Code Sharing Sites: Freshmeat, Krugle, Sourceforge, GitHub. See also Code search engines. Compilation and linking tools: GNU toolchain, gcc, Microsoft Visual Studio, CodeWarrior, Xcode, ICC Debuggers: Debugger#List of debuggers. See also Debugging. Development Productivity Tools: JRebel eliminates the build and redeploy phases of Java EE Development by mapping the project workspace directly to any type application server in real-time Disassemblers: Generally reverse-engineering tools. Documentation generators: Comparison of documentation generators, help2man, POD, asciidoc Formal methods: Mathematically-based techniques for specification, development and verification GUI interface generators Library interface generators: Swig Integration Tools Memory Use/Leaks/Corruptions Detection: dmalloc, Electric Fence, duma, Insure++, Developer Edition. Memory leak detection: In the C programming language for instance, memory leaks are not as easily detected - software tools called memory debuggers are often used to find memory leaks enabling the programmer to find these problems much more efficiently than inspection alone. Parser generators: Parsing Parser development software Performance analysis or profiling: List of performance analysis tool Refactoring Browser Revision control: List of revision control software, Comparison of revision control software Scripting languages: PHP, Awk, Perl, Python, REXX, Ruby, Shell, Tcl Search: grep, find Source code Clones/Duplications Finding: Duplicate code Tools Source code formatting: indent Source code generation tools: Automatic programming Implementations Static code analysis: List of tools for static code analysis Text editors: List of text editors, Comparison of text editors Unit testing: List of unit testing frameworks IDEs Integrated development environments (IDEs) combine the features of many tools into one package. They for example make it easier to do specific tasks, such as searching for content only in files in a particular project. IDEs may for example be used for development of enterprise-level applications. Different aspects of IDEs for specific programming languages can be found in this comparison of integrated development environments.
© Einstein College of Engineering
CS1015 USER INTERFACE DESIGN AIM To implement the basics and in-depth knowledge about UID. It enables the students to take up the design the user interface, design, menu creation and windows creation and connection between menu and windows. OBJECTIVES • To study the concept of menus, windows, interfaces. • To study about business functions. • To study the characteristics and components of windows. • To study the various controls for the windows. • To study about various problems in windows design with color, text, graphics. • To study the testing methods UNIT I 8 Introduction-Importance-Human-Computer interface-characteristics of graphics interface-Direct manipulation graphical system - web user interface-popularitycharacteristic & principles. UNIT II 10 User interface design process- obstacles-usability-human characteristics in design Human interaction speed-business functions-requirement analysis-Direct-Indirect methods-basic business functions-Design standards-system timings - Human consideration in screen design - structures of menus - functions of menus-contents of menu-formatting -phrasing the menu - selecting menu choice-navigating menus-graphical menus. UNIT III 9 Windows: Characteristics-components-presentation styles-types-managementsorganizations-operations-web systems-device-based controls: characteristics-Screen based controls: operate control - text boxes-selection control-combination control-custom control-presentation control. UNIT IV 9 Text for web pages - effective feedback-guidance & assistance-Internationalizationaccesssibility-Icons-Image-Multimedia -coloring. UNIT V Windows layout-test :prototypes - kinds of tests - retest - Information search visualization - Hypermedia - www - Software tools. 9
TOTAL : 45 TEXT BOOK 1. Wilbent. O. Galitz ,“The Essential Guide to User Interface Design”, John Wiley& Sons, 2001. REFERENCES 1. Ben Sheiderman, “Design the User Interface”, Pearson Education, 1998. 2. Alan Cooper, “The Essential of User Interface Design”, Wiley – Dream Tech Ltd., 2002. © Einstein College of Engineering
CS1015 User Interface Design
UNIT I Introduction Defining the User Interface It is the parts of the computer and its software that people can touch , feel, talk to ,or otherwise understand and direct. It is a sub field to Human-computer interaction study. User interface design is a subset of a field of study called human computer interaction.(HCI). HCI is the study,planning and design of how people and computers work together.User interface has 2 components: Input, Output Input is how a person communicates his or her needs or desires to the computer. Ex. Keybord,mouse. Output is how the computer conveys its results of its computations and requirements to the user. Ex. Display screen Importance of good design: The Importance of Good Design Its very important to our users. It is the window to view the capabilities of the system The reasons for ineffient and confusing design is, No care on design Not enough time Not knowing what really makes good design Not possessing common sense. A well designed interface and screen is very important to the users.it is the main window to view the capabilities of the system.A screen design affect a person in a variety of ways. If the design is confusing and inefficient, people will have greater difficulty and make more mistakes,Chase some people away from the system.It also leads to aggravation,frustration and increased stress. Benefits of good design: Poor clarity forced screens force the users to take more time to process. The screen clarity and reability is done by making screens less crowded.Seperate items are placed in separate lines. Reformatting enquiry screens with good design principles Increase productivity Good recognization of the system
© Einstein College of Engineering
CS1015 User Interface Design
Human Computer Interface: The human–computer interface can be described as the point of communication between the human user and the computer. The flow of information between the human and computer is defined as the loop of interaction. The loop of interaction has several aspects to it including: Task Environment: The conditions and goals set upon the user. Machine Environment: The environment that the computer is connected to, i.e a laptop in a college student's dorm room. Areas of the Interface: Non-overlapping areas involve processes of the human and computer not pertaining to their interaction. Meanwhile, the overlapping areas only concern themselves with the processes pertaining to their interaction. Input Flow: The flow of information that begins in the task environment, when the user has some task that requires using their computer. Output: The flow of information that originates in the machine environment. Feedback: Loops through the interface that evaluate, moderate, and confirm processes as they pass from the human through the interface to the computer and back.
Introduction of the Graphical User Interface: A graphical user interface (GUI), often pronounced gooey, is a type of user interface that allows users to interact with programs in more ways than typing such as computers.Graphical user interfaces, such as Microsoft Windows and the one used by the Apple Macintosh, feature the following basic components: · pointer : A symbol that appears on the display screen and that you move to select objects and commands. Usually, the pointer appears as a small angled arrow. Text processing applications, however, use an I-beam pointer that is shaped like a capital I. · pointing device : A device, such as a mouse or trackball, that enables you to select objects on the display screen. · icons : Small pictures that represent commands, files, or windows. By moving the pointer to the icon and pressing a mouse button, you can execute a command or convert the icon into a window. You can also move the icons around the display screen as if they were real objects on your desk. · desktop : The area on the display screen where icons are grouped is often referred to as the desktop because the icons are intended to represent real objects on a real desktop. · windows: You can divide the screen into different areas. In each window, you can run a different program or display a different file. You can move windows around the display screen, and change their shape and size at will. · menus : Most graphical user interfaces let you execute commands by selecting a choice from a menu.
© Einstein College of Engineering
CS1015 User Interface Design
Advantages Symbols recognized faster than text Faster learning Faster use and problem solving Easier remembering More natural Exploits visual/spatial cues Fosters more concrete thinking Provides context Fewer errors Increased feeling of control Immediate feedback Predictable system responses Easily reversible actions Less anxiety concerning use More attractive May consume less space Replaces national Easily augmented with text Low typing requirements Smooth transition from command language system Disadvantages Greater design complexity Learning still necessary Lack of experimentally-derived design principles Inconsistencies in technique and terminology Working domain is the present Not always familiar Human comprehension limitations Window manipulation requirements Production limitations Few tested icons exist Inefficient for touch typists Inefficient for expert users Not always the preferred style of interaction Not always the fastest style of interaction Increased chances of clutter and confusion The futz and fiddle May consume more screen space Hardware limitations
© Einstein College of Engineering
CS1015 User Interface Design
Characteristics Of The Graphical User Interface: Sophisticated Visual Presentation Pick-and-Click Interaction Restricted Set of Interface Options Visualization Object Orientation Use of Recognition Memory Concurrent Performance of Functions
Direct Manipulation System: Direction manipulation system is one in which the user is able to select an object and then specify which actions are to be taken. System is portrayed as extension of real world Continuous visibility of objects and actions Virtual reality WYSIWYG What you see is what you get Actions are rapid and incremental with visible display of results Incremental actions are easily reversible Example: The "trash" on the desktop is an excellent example of direct manipulation within computer systems. Users can see both the trash and the files or folders they want to move to the trash. They then physically select the files and drag them to the trash can. While the user is doing this, all of the selected files move as well, illustrating which items the user has selected. When the mouse is placed over the trash, there is a shading indication that it has been selected. The user then has to release the mouse button to move the files to the trash. If there are many files, a dialogue box will show up illustrating the progress of moving files to the trash. Once the action is completed, the files are no longer visible in their original location. The user can change her mind at any time while dragging the files to the trash. Even after placing them there, they can as easily be taken out of the trash and put back in place. Indirect Manipulation Results from: Operations being difficult to conceptualize in the graphical system Graphics capability of the system being limited Amount of space available for placing manipulation controls in the window border being limited Difficulties for people to learn and remember all the necessary operations and actions
© Einstein College of Engineering
CS1015 User Interface Design
Web User Interface: Interaction Styles The Graphical User Interface The Popularity of Graphics The Concept of Direct Manipulation Advantages / Disadvantages Characteristics of the Graphical User Interface The Web User Interface The Popularity of the Web Characteristics of a Web Interface The Merging of Graphical Business Systems and the Web Characteristics of an Intranet vs. Internet Extranets Principles of User Interface Design Principles for the Xerox STAR General Principles The Blossoming of the World Wide Web: The World Wide Web, abbreviated as WWW and commonly known as the Web, is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks. Functions of WWW: The terms Internet and World Wide Web are often used in every-day speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global system of interconnected computer networks. In contrast, the Web is one of the services that runs on the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs. In short, the Web is an application running on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of communication messages, behind the scenes, in order to fetch and display it. First, the server-name portion of the URL is resolved into an IP address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image. Statistics measuring a website's popularity are usually based either on the number of page views or associated server 'hits' (file requests) that take place. While receiving these files from the web server, browsers may progressively render the page onto the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page
© Einstein College of Engineering
CS1015 User Interface Design composition languages. Any images and other resources are incorporated to produce the onscreen web page that the user sees. Most web pages contain hyperlinks to other related pages and perhaps to downloadable files, source documents, definitions and other web resources. Such a collection of useful, related resources, interconnected via hypertext links is dubbed a web of information. Publication on the Internet created what Tim Berners-Lee first called the WorldWideWeb (in its original CamelCase, which was subsequently discarded) in November 1990.
The Popularity of the Web:
The Web we know now, which loads into a browser window in essentially static screenfulls, is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to appear, and we are just starting to see how that embryo might develop. The Web will be understood not as screenfulls of text and graphics but as a transport mechanism, the ether through which interactivity happens. It will [...] appear on your computer screen, [...] on your TV set [...] your car dashboard [...] your cell phone [...] hand-held game machines [...] maybe even your microwave oven.Her use of the term deals mainly with Web design and aesthetics; she argues that the Web is "fragmenting" due to the widespread use of portable Web-ready devices. Her article is aimed at designers, reminding them to code for an everincreasing variety of hardware. As such, her use of the term hints at – but does not directly relate to – the current uses of the term. The term did not resurface until 2003. These authors focus on the concepts currently associated with the term where, as Scott Dietzen puts it, "the Web becomes a universal, standards-based integration platform".In 2004, the term began its rise in popularity when O'Reilly Media and MediaLive hosted the first Web 2.0 conference. In their opening remarks, John Battelle and Tim O'Reilly outlined their definition of the "Web as Platform", where software applications are built upon the Web as opposed to upon the desktop. The unique aspect of this migration, they argued, is that "customers are building your business for you". [10] They argued that the activities of users generating content (in the form of ideas, text, videos, or pictures) could be "harnessed" to create value.O'Reilly et al. contrasted Web 2.0 with what they called "Web 1.0". They associated Web 1.0 with the business models of Netscape and the Encyclopedia Britannica Online. For example, Netscape framed "the web as platform" in terms of the old software paradigm: their flagship product was the web browser, a desktop application, and their strategy was to use their dominance in the browser market to establish a market for high-priced server products. Control over standards for displaying content and applications in the browser would, in theory, give Netscape the kind of market power enjoyed by Microsoft in the PC market. Much like the "horseless carriage" framed the automobile as an extension of the familiar, Netscape promoted a "webtop" to replace the desktop, and planned to populate that webtop with information updates and applets pushed to the webtop by information providers who would purchase Netscape servers. In short, Netscape focused on creating software, updating it on occasion, and distributing it to the end users. O'Reilly contrasted this with Google, a company which did not at the time focus on producing software, such as a browser, but instead focused on providing a service based on data. The data being the links Web page authors make between sites. Google exploits this user-generated content to offer Web search based on reputation through its "page
© Einstein College of Engineering
CS1015 User Interface Design rank" algorithm. Unlike software, which undergoes scheduled releases, such services are constantly updated, a process called "the perpetual beta". A similar difference can be seen between the Encyclopedia Britannica Online and Wikipedia: while the Britannica relies upon experts to create articles and releases them periodically in publications, Wikipedia relies on trust in anonymous users to constantly and quickly build content. Wikipedia is not based on expertise but rather an adaptation of the open source software adage "given enough eyeballs, all bugs are shallow", and it produces and updates articles constantly. O'Reilly's Web 2.0 conferences have been held every year since 2004, attracting entrepreneurs, large companies, and technology reporters. In terms of the lay public, the term Web 2.0 was largely championed by bloggers and by technology journalists, culminating in the 2006 TIME magazine Person of The Year – "You". That is, TIME selected the masses of users who were participating in content creation on social networks, blogs, wikis, and media sharing sites. The cover story author Lev Grossman explains: It's a story about community and collaboration on a scale never seen before. It's about the cosmic compendium of knowledge Wikipedia and the million-channel people's network YouTube and the online metropolis MySpace. It's about the many wresting power from the few and helping one another for nothing and how that will not only change the world, but also change the way the world changes. Since that time, Web 2.0 has found a place in the lexicon; in 2009 Global Language Monitor declared it to be the one-millionth English word. Characteristics of a Web Interface: Web 2.0 websites allow users to do more than just retrieve information. They can build on the interactive facilities of "Web 1.0" to provide "Network as platform" computing, allowing users to run software-applications entirely through a browser. Users can own the data on a Web 2.0 site and exercise control over that data. These sites may have an "Architecture of participation" that encourages users to add value to the application as they use it. The concept of Web-as-participation-platform captures many of these characteristics. Bart Decrem, a founder and former CEO of Flock, calls Web 2.0 the "participatory Web" and regards the Web-as-information-source as Web 1.0. The impossibility of excluding group-members who don’t contribute to the provision of goods from sharing profits gives rise to the possibility that rational members will prefer to withhold their contribution of effort and free-ride on the contribution of others. This requires what is sometimes called Radical Trust by the management of the website. According to Best, the characteristics of Web 2.0 are: rich user experience, user participation, dynamic content, metadata, web standards and scalability. Further characteristics, such as openness, freedom and collective intelligence by way of user participation, can also be viewed as essential attributes of Web 2.0.
© Einstein College of Engineering
CS1015 User Interface Design
Principles Of User Interface Design: General Principles Accessibility Aesthetically Pleasing Availability Clarity Compatibility Configurability Consistency Control Directness Efficiency Familiarity Flexibility Forgiveness Immersion Obviousness Operability Perceptibility Positive First Impression Predictability Recovery Responsiveness Safety Simplicity Transparency Trade-offs Visibility Accessibility Systems should be designed to be usable, without modification, by as many people as possible. Aesthetically Pleasing Provide visual appeal by: Providing meaningful contrast between screen elements Creating groupings Aligning screen elements and groups Providing three-dimensional representation Using color and graphics effectively and simply Availability Make all objects available at all times. Avoid the use of modes. Clarity
© Einstein College of Engineering
CS1015 User Interface Design
The interface should be visually, conceptually, and linguistically clear, including: Visual elements Functions Metaphors Words and text Compatibility Provide compatibility with the following: The user The task and job The product Adopt the user’s perspective. Configurability Permit easy personalization, configuration, and reconfiguration of settings. Enhances a sense of control Encourages an active role in understanding Consistency A system should look, act, and operate the same throughout. Similar components should: Have a similar look Have similar uses Operate similarly The same action should always yield the same result. The function of elements should not change. The position of standard elements should not change. Inconsistency causes: More specialization by system users Greater demand for higher skills More preparation time and less production time More frequent changes in procedures More error-tolerant systems (because errors are more likely) More kinds of documentation More time to find information in documents More unlearning and learning when systems are changed More demands on supervisors and managers More things to do wrong Control The user must control the interaction. The context maintained must be from the perspective of the user. The means to achieve goals should be flexible and compatible with the user's skills, experiences, habits and preferences. Avoid modes because they constrain the actions available. Permit the user to customize the interface but provide defaults. Directness Provide direct ways to accomplish tasks.
© Einstein College of Engineering
CS1015 User Interface Design
Available alternatives should be visible. The effect of actions on objects should be visible.
Efficiency Minimize eye and hand movements, and other control actions. Transitions between various system controls should flow easily and freely. Navigation paths should be as short as possible. Eye movement through a screen should be obvious and sequential. Anticipate the user’s wants and needs whenever possible. Familiarity Employ familiar concepts and use a language that is familiar to the user Keep the interface natural, mimicking the user’s behavior patterns Use real-world metaphors Flexibility A system must be sensitive to the differing needs of its users, enabling a level and type of performance based upon: Each user’s knowledge and skills Each user’s experience Each user’s personal preference Each user’s habits The conditions at that moment Forgiveness Tolerate and forgive common and unavoidable human errors Prevent errors from occurring whenever possible Protect against possible catastrophic errors When an error does occur, provide constructive messages Immersion A state of mental focus so intense that awareness and sense of the real world is lost Foster immersion within tasks Obviousness A system should be easily learned and understood: What to look at What it is What to do When to do it Where to do it Why to do it How to do it Flow of actions, response, visual presentations, and information should be: In a sensible order Easy to recollect Easy to place in context Operability
© Einstein College of Engineering
CS1015 User Interface Design
Ensure that a system's design can be used by everyone, regardless of a person's physical capabilities. Perceptibility Ensure that a system's design can be perceived, regardless of a person's sensory capabilities. Positive First Impression Create a positive first impression of the system. Points of prospect Minimal barriers Progressive lures Predictability The user should be able to anticipate the natural progression of each task. Provide distinct and recognizable screen elements Provide cues to the result of an action to be performed All expectations should be fulfilled uniformly and completely. Recovery A system should permit: Commands or actions to be abolished or reversed Immediate return to a certain point if difficulties arise Ensure that users never lose their work as a result of: An error on their part Hardware, software, or communication problems Responsiveness The system must rapidly respond to the user’s requests. Provide immediate acknowledgment for all actions: Visual Textual Auditory Safety Protect the user from making mistakes. Provide visual cues Reminders Lists of choices Other aids as necessary Simplicity Provide as simple an interface as possible. Five ways to provide simplicity: Use progressive disclosure, hiding things until they are needed Present common and necessary functions first Prominently feature important functions Hide more sophisticated and less frequently used functions Provide defaults Minimize screen alignment points Make common actions simple at the expense of uncommon actions being made harder Provide uniformity and consistency
© Einstein College of Engineering
CS1015 User Interface Design
Transparency Permit the user to focus on the task or job, without concern for the mechanics of the interface. Workings and reminders of workings inside the computer should be invisible to the user Trade-Offs Final design will be based on a series of trade-offs balancing often-conflicting design principles. People’s requirements always take precedence over technical requirements. Visibility A system's status and methods of use should be clearly visible. Improve visibility through Hierarchical organization Context sensitivity Unit II: What Comprises Good Design? Understanding of: people, how we see, understand, and think how information must be visually presented to enhance human acceptance and comprehension how eye and hand movements must flow to minimize the potential for fatigue and injury Must consider the capabilities and limitations of the hardware and software of the human-computer interface Guidelines for the Interface Design Process Know your user or client Understand the basic business function Understand the principles of good screen design Develop system menus and navigation schemes Select the proper kinds of windows Select the proper device-based controls Choose the proper screen-based controls Write clear text and messages Provide effective feedback and guidance and assistance Provide effective internationalization and accessibility Create meaningful graphics, icons, and images Choose the proper colors Organize and layout windows and pages Test, test, and retest Graphical User Interface: “A graphical system consists of objects and actions. Objects are what people see on the screen. They are manipulated as a single unit. A well-designed system keeps users focused on the objects, not on how to carry out actions.”
© Einstein College of Engineering
CS1015 User Interface Design
Persistence: the maintenance of a state once it is established. An object’s state should always be automatically preserved when the user changes it.
Obstacles in User Interface Design process: The general observations in design process: Pitfalls are, No early analysis and understanding of the user’s needs and expectations A focus on using design features or components that are neat. Little or no creation of design element prototypes. No usability testing. No common design team vision of user interface design goals. Poor communication between members of the development team. Nobody ever gets it right the first time. Development is chock-full of surprises. Good design requires living in a sea of changes. Making contracts to ignore change will never eliminate the need for change. Even if you have made the best the system humanly possible, people will still make mistakes when using it. Designers need good tools You must have behavioral design goals like performance design goals
Pit falls can be eliminated by the following design commandments: Gain a complete understanding of users and their tasks Solicit early and ongoing user involvement Perform rapid prototyping and testing Modify and iterate the design as much as necessary Integrate the design of all the system components
Usability: Common Usability Problems: Ambiguous menus and icons Languages that permit only single-direction movement through a system Input and direct manipulation limits Highlighting and selection limitations Unclear step sequences More steps to manage the interface than to perform tasks Complex linkage between and within applications Inadequate feedback and confirmation Lack of system anticipation and intelligence
© Einstein College of Engineering
CS1015 User Interface Design
Inadequate error messages, help, tutorials, and documentation How to Measure Usability: How effective is the interface? Can the required range of tasks be accomplished. How learnable is the interface? How flexible is the interface? What are the attitudes of the users? Principles of Good Screen Design: A well-designed screen: Reflects the capabilities, needs, and tasks of its users Is developed within the physical constraints imposed by the hardware on which it is displayed. Effectively utilizes the capabilities of its controlling software Achieves the business objectives of the system for which it is designed Interface Design Goals: Reduce visual work Reduce intellectual work Reduce memory work Reduce motor work Minimize or eliminate any burdens or obstructions imposed by technology Test of a Good Design: Can all screen elements be identified by cues other than by reading the words that make them up? The best interfaces make everything on the screen obvious Elements of Good Screen Design: Upper-left starting point Provide an obvious starting point in the screen’s upper-left corner Screen navigation and flow Visually pleasing composition Balance Symmetry Regularity Predictability Sequentiality Economy Unity Proportion Simplicity (complexity) Groupings Human characteristics in Design: Perception: is our awareness and understanding of the elements and objects of our environment through the physical sensation of our various senses including sight sound, sound, smell and so forth.
© Einstein College of Engineering
CS1015 User Interface Design
Memory: There two components: Long term memory contains the knowledge we posses. Short termreceives information from either the senses or the long term memory. Sensory storage: is the buffer where the automatic processing of information collected from our senses takes place. Visual acuity: The capacity of the eye to resolve the details Foveal and peripheral vision: Foveal vision is used to focus directly on something Peripheral vision senses anything in the area surrounding the location .It can not be clearly resolved. Information Processing: The information that our senses collect that is deemed important enough to do something about then has to be processed insome meaningful way. Mental Models: is simply an internal representation of a person’s current understanding of something. Movement Control: The response from the computer is a movement. Movements include such activities as pressing keyboard keys, moving the screen pointer. Learning: is the process of encoding in long-term meomory information that is contained in shortterm memory. Skill: The goals of human performance is to perform skillfully.The essence of skill is performance of actions or movements in the correct time sequence with adequate precision. Individual differences:
© Einstein College of Engineering
CS1015 User Interface Design in looks, feelings, motor abilities, intellectual abilities, learning abilities and speed.
Human considerations in design: The user’s knowledge and experience: Computer literacy. System Experience Application experience Task experience Other system use Education Reading level Typing skill Native language and culture The user’s tasks and needs: Mandatory or discretionary use Frequency of use Task or need importance Task structure Social interactions Primary training Turnover rate Job category Lifestyle The user’s psychological characteristics Attitude and Motivation Patience Stress level Expectations Cognitive style The user’s physical characteristics Age Hearing vision Cognitive processing Gender Handedness Human interaction speeds:
© Einstein College of Engineering
CS1015 User Interface Design
Menus Reading Listening Speaking Keying Hand printing
Major form of navigation through a system If properly designed, assist the user in developing a mental model of the system Must reflect the conflicting needs of both inexperienced and experienced users Structures of menus: Defines the amount of control given to the user in performing a task. The most common structures are the following: Single Menus: A single screen or window is presented to seek the user’s input or request an action to be performed. Sequential linear menus: are represented on a series of screens possessing only one path. The objective of the menu is specifying parameters or for entering data. Simultaneous menus: All menu options are available simultaneously. The menu may be completed in the order desired by the user, choices being skipped and returned to later. Event trapping menus: Provide an ever present background of control over the system’s state and parameters while the user is working on a foreground task.The functions are, they may immediately change some parameter in the current environment they may take the user out of the current environment to perform a function They may exit the current environment and allow user to move to a totally new environment Functions of Menus: Navigation to a new menu Execute an action or procedure Displaying information Data or parameter input Contents of Menus: menu context provides information to keep the user oriented. menu title
© Einstein College of Engineering
CS1015 User Interface Design provides the context for the current set of choices. choice descriptions are the alternatives available to the user. These descriptions can range from a mnemonic, numeric, or alphabetized listing of choices to single words or phrases to full sentences or more. completion instructions tell the users to indicate their choices.
Formatting menus: Guidelines for formatting: Consistency: Provide consistency with the user’s expectations. Provide consistency in menu: Formatting, including organization, presentation,and choice ordering. Phrasing, including titles, choice descriptions, and instructions. Choice selection methods Navigation schemes.
Display: if continual or frequent references to menu options ar necessary, permanently display the menu in an area of the screen that will not obscure other screen data if only occasional references to menu options are necessary, the menu may be presented on demand. Critical options should be continuously displayed.
Presentation Ensure that a menu and its choices are obvious to the user by presenting them with a unique and consistent structure, location, and display technique. Ensure that other system components do not posses the same visual qualities as menu choices.
Organization: provide a general menu display match the menu structure to the structure of the task minimize the number of menu levels within limits of clarity Be conservative in the number of menu choices presented on a screen Provide decreasing direction menus, if sensible Never require menus to be scrolled Provide users with an easy way to restructure a menu according to how work is accomplished.
© Einstein College of Engineering
CS1015 User Interface Design
Complexity: Provide both simple and complex menus. Simple: a minimal set of actions and menus Complex: a complete set of actions and menus. Item arrangement: Ordering: Groupings: Line separators create groupings of items that are logical,distinctive, meaningful, and mutually exclusive Categorize them. Present nomore than six or seven groupings on the screen Order categorized groupings in a meaningful way. Create arbitary visual groupings. Separate groupings Provide immediate access to critical or frequently chosen items order lists of choices by their natural order for lists associated with numbers,use numeric order. align alternatives or choices into single columns whenever possible if a horizontal orientation of descriptions must be maintained, organize for left to right reading.
Separate vertically arrayed groupings with subtle solid lines. Separate veritically arrayed subgroupings with subtle dotted or dashed lines. For subgroupings within a category: left-justify the lines under the first letter of the columnized choice descriptions. right-justify the lines under the last letter of the longest choice descriptions. for independent groupings: extend the line to the left and right menu boders
Phrasing the menu: A menu must communicate to the user information about: - the nature and purpose of the menu itself - the nature and purpose of each presented choice - How the proper choice may be selected. Navigating menus:
© Einstein College of Engineering
CS1015 User Interface Design
Navigation is an efficient navigational structure, is the most important element in system usability. A simple and clear navigational structure is the backbone which all system features is draped. A system’s organizational structure and its navigational tools influence the system’s navigational ease of use. Web site navigation problems: Technical issues. Usage problems.
Navigation goals: A well designed navigational system facilitates quick and easy navigation between components. A good navigational scheme and navigational tools will minimize, if not eliminate, the problems associated with cognitive or mental overload and feelings of disorientation. Control: For multilevel menus, provide one simple action to return to the next higher-level menu. Return to the main menu provide multiple path ways through a menu hierarchy when ever possible Menu navigation aids: to aid menu navigation and learning, provide an easily accessible: menu maps look aheads navigation history Web site navigation: Web site Navigation focuses specifically on website navigation design It will review website organizational schemes, the navigational components including browser command button ,links, website toolbars and command butt and the characteristics and the components of a website. Website organization: Divide the content into logical units, fragments, or chunks. Establish a hierarchy of generality or importance Structure the relationships among content fragments, units, or chunks. Create a well-balanced hierarchical tree. Kinds of Graphical Menus: Menu bar To identify and provide access to common and frequently used actions
© Einstein College of Engineering
CS1015 User Interface Design
Pull-down menu For frequently used application actions that take place in a wide variety of different windows Cascading menu To simplify a higher-level menu Pop-up menu For frequent users and frequently used contextual commands Tear-off menu For items sometimes frequently or infrequently selected Iconic menu To designate applications available and special functions within an application Pie Menu A pie menu is a circular representation of menu items, that can be used as an alternative to a pull-down or pop-up menu.
Unit III: Window: The application program in Windows operating system is opened in rectangular area on the desktop. This rectangular area is known as window. Components of window: The application program in Windows operating system is opened in rectangular area on the desktop. This rectangular area is known as window. In Windows operating system multiple programs can be simultaneously opened in multiple windows. It is because this operating system is referred to as Windows.
© Einstein College of Engineering
CS1015 User Interface Design
Title bar. Control icon. Status bar. Menu bar. Toolbar. Title Bar The bar located at the top of the application window is known as Title Bar. Usually the Title Bar contains the name of application program and the name of current document. In the above figure, the Title Bar has an application name “Microsoft Word” and the document name is “Document2”. The user can drag and drop the window from one location to other on the screen by dragging its Title Bar. More than one application windows of different programs can be opened vertically or horizontally. The Title Bar of the active window will be darker in color than the Title Bar color of other window (inactive window). The active window is one in which you are currently working. Control Icon The icon that appears on the left most side of the Title Bar of every application window is known as Control Icon. It is used to control the application window. When the Control Icon is clicked, a control menu appears with a group of commands. These commands are used to set the dimension of window as well as to close the window (application program). The commands of control menu and their functions are: Restores – the application window to its original size. Move – Enables the application window to be moved on the desktop, if it is minimized. Size – Used to change the size of application window. Minimize – Used to minimize the current application window. Maximize – Used to maximize the current application window. Close – Used to close the application window along with application program. Control Buttons The buttons that appear on the right most side of the Title Bar of every application window are known as Control Buttons. Like control menu, these are also used to control the dimension of window by using only mouse. These buttons provide the shortcut method to control the window. The control buttons and their functions are: Minimize Button – By clicking this button, the current window is minimized and disappeared from desktop. Maximize Button – By clicking this button, the current window is maximized and fills the entire screen. When window is maximized, a restore button is appeared in place of maximize button. Restore Button – By clicking this button, the window restores to its original size. Close Button – By clicking this button, the window is closed and its button is also removed from the task bar.
© Einstein College of Engineering
CS1015 User Interface Design
Status Bar The bar located at the bottom of application window is known as Status Bar. It provides some basic information about the status of current document or objects in window. For example, the Control Panel’s status bar tells you how many objects appear in the window. Scroll Bars When information displayed .in application window is larger and cannot fit in it then scroll bars appear automatically at the right or bottom borders. In this case, a part of the information is displayed and remaining information remains hidden. The hidden information can be displayed by moving the scroll bars of the window. Each scroll bar has two arrows also at its ends. By clicking these arrows you can move around the window but very slowly (line by line or column by column). The scroll Bar also has a scroll box. By dragging this box, you can quickly move around the window. Menu Bar The bar that contains drop-down menus and appears immediately below the title bar is known as Menu Bar. The commands that are used to perform different tasks are grouped together on the Menu Bar. The Menu bar is accessed by clicking mouse or by using keyboard shortcuts. When any menu option from Menu Bar is clicked, a drop down menu appears with a list of commands. You can select a command from the list by clicking it. The drop-down menu may contain some commands as active and some as inactive. The inactive command is not available for selection and appears as dim, usually in light gray color. You can select only from the active commands. To access the Menu Bar using mouse, follow these steps:
Bring the mouse pointer on the desired menu option and click it. A drop down menu appears with a list of commands. Point to the command you want to use and click it to execute. The command is executed and drop down menu is disappeared. To disappear the menu without selecting any command, point the mouse pointer to the empty area of window (or desktop) and click it or use Esc key. Dialog Boxes A dialog box is a command element in Windows and its application programs. It is used to collect information from the user before processing a command. In a dialog box, the user has to enter information such as file names or has to select options etc. For example, when a Save command is selected to save the work (or document) the Save As dialog, box appears to get the name of file. Similarly, when Open command is selected to open an existing file the Open dialog box appears to get the name fiIe to be opened. The dialog boxes are also used to display messages or to provide information to the user. For example, to alert the user about the problem occurred in the computer or about any other error. The dialog box also contains command buttons to send the input to the application, program (or, computer) to take action or to get help about the dialog box. For example the Ok command button is clicked to proceed after making selection or entering information. Similarly, clicking Cancel button ends the current operation without giving any information to computer. Device Based Controls:
© Einstein College of Engineering
CS1015 User Interface Design
They are the mechanism through which people communicate their desires to the system, also known as input devices. Characteristics of device Based Controls: To point an object on the screen. To select the object or identify it as the focus of attention To drag an object across the screen To draw something free form on the screen To track or follow a moving object To orient or position an object To enter or manipulate data or information
The example devices are, Track ball: Description: Advantages: direct relationship between hand and pointer movement in terms of direction and speed Does not obscure vision of screen Does not require additional desk space A spherical object that rotates freely in all directions in its socket Direction and speed is tracked and translated into cursor movement Trackball Joystick Graphic Tablet Touch screen Light pen Voice Mouse Keyboard
Disadvantages: -
Movement is indirect, in a plane different from the screen
© Einstein College of Engineering
CS1015 User Interface Design
No direct relationship exists between hand and pointer movement in terms of distance Requires a degree of eye-hand coordination Requires hand to be moved from keyboards Requires different hand movements Requires hand to be moved from keyboards keys Requires additional desk space May be difficult to control May be fatiguing to use over extended time
Joystick: Description:
A joystick is an input device consisting of a stick that pivots on a base and reports its angle or direction to the device it is controlling. Joysticks are often used to control video games, and usually have one or more push-buttons whose state can also be read by the computer. Advantages: Direct relationship between hand and pointer movement in terms of direction. Does not obscure vision of screen Does not require additional desk space
Disadvantages: -
Movement is indirect, in a plane different from the screen No direct relationship exists between hand and pointer movement in terms of distance Requires a degree of eye-hand coordination Requires hand to be moved from keyboards Requires different hand movements Requires hand to be moved from keyboards keys Requires additional desk space
-
© Einstein College of Engineering
CS1015 User Interface Design
Graphic tablet: A graphics tablet (or digitizer, digitizing tablet, graphics pad, drawing tablet) is a computer input device that allows one to hand-draw images and graphics, similar to the way one draws images with a pencil and paper. These tablets may also be used to capture data or handwritten signatures. It can also be used to trace an image from a piece of paper which is taped or otherwise secured to the surface. Capturing data in this way, either by tracing or entering the corners of linear poly-lines or shapes is called digitizing. Advantages: direct relationship between touch and pointer movement in terms of direction and speed Does not obscure vision of screen More comfortable horizontal operating plane May be fatiguing to use over extended time May be slow and inaccurate
Disadvantages: Touch screen:
Movement is indirect, in a plane different from the screen Requires hand to be moved from keyboards Requires hand to be moved from keyboards keys Requires different hand movements Requires additional desk space Finger may be too large for accuracy with small objects
A touch screen is an electronic visual display that can detect the presence and location of a touch within the display area. The term generally refers to touching the display of the device with a finger or hand. Touch screens can also sense other passive objects, such as a stylus. The touch screen has two main attributes. First, it enables one to interact directly with what is displayed, rather than indirectly with a cursor controlled by a mouse or touchpad. Secondly, it lets one do so without requiring any intermediate device that would need to be held in the hand.
© Einstein College of Engineering
CS1015 User Interface Design
Advantages: direct relationship between hand and pointer movement in terms of direction, distance and speed requires minimal additional desk space Stands up in high-use environments More accurate than finger touching Movement is direct, in the same plane as screen
Disadvantages: Voice:
very fatiguing to use over extended time requires picking it up to use requires moving the hand far from the keyboard to use hand may obscure part of screen
Automatic speech recognition by the computer Advantages: Disadvantages; High error rates due to difficulties in: Recognizing boundaries between spoken words Blurred word boundaries due to normal speech patterns slower throughput than with typing difficult to use in noisy environments impractical to use in quiet environments Simple and direct Useful for people who cannot use a keyboard Useful when the user’s hands are occupied
© Einstein College of Engineering
CS1015 User Interface Design
Mouse: mouse is a pointing device that functions by detecting two-dimensional motion relative to its supporting surface. Physically, a mouse consists of an object held under one of the user's hands, with one or more buttons. Advantages: direct relationship between hand and pointer movement in terms of direction, distance and speed Does not obscure vision of screen More comfortable horizontal operating plane Selection mechanisms are included on mouse
Disadvantages: Keyboard :
Movement is indirect, in a plane different from the screen Requires hand to be moved from keyboards Requires additional desk space May require long movement distances Requires a degree of eye-hand cocordination
Standard typewriter keyboard and cursor movement keys Advantages: familiar accurate does not take up additional desk space very useful for: entering text and alphanumeric data inserting in text and alphanumeric data keyed shortcuts - accelerators keyboard mnemonics – equivalents
© Einstein College of Engineering
CS1015 User Interface Design advantageous for: performing actions when less than three mouse buttons exist use with very large screens touch typists
Disadvantages: slow for non-touch-typist slower than other devices in pointing requires discrete actions to operate no direct relationship between finger or hand movement on the keys and cursor movement on screen in terms of speed and distance
Screen based controls: Are the elements of a screen that constitute its body. The example includes, Buttons: Th e C o m m a n d b u tto n i s a co m m o n c o n tr o l f r e q u e n tl y u s e d i n V B p r o g r a m mi n g . Th i s i s o n e o f th e f i r s t c o n tr o l s th a t b e g i n n e r s l e a r n to p l a ce o n to a f o r m a n d th e n t o co d e a n "e v e n t p r o ce d u r e " f o r th e co m m a n d buttons text entry/read-only controls selection controls combination entry/selection controls specialized operable controls custom controls presentation controls web controls
© Einstein College of Engineering
CS1015 User Interface Design co n tr o l o b j e c t. A n e v e n t p r o ce d u r e i s s o m e th i n g th a t h a p p e n s i n r e s p o n s e to a u s e r a cti o n s u ch a s a cl i ck o r a "m o u s e o v e r ". ( I f a n o b j e ct o n a f o r m h a s n o co r r e s p o n d i n g co d e w r i tte n b y th e p r o g r a m m e r , n o th i n g w il l h a p p e n i f th e u s e r cl i ck s o n th e co n tr o l o r a t te m p ts a n y o th e r a cti o n w i th th a t co n tr o l . ) D o u b l e - cl i ck i n g o n a C om m a n d b u tto n i n th e to o l b a r w il l pl a ce i t o n to th e ce n te r o f y o u r f o r m . L e f t cli ck o n i t th e "d ra w " i t o n to th e f o r m b y d r a gg i ng th e m o u s e a n d a t th e s a m e ti m e , h ol d i n g d o w n th e le f t m o u s e k e y w h il e d r a g g i ng . R el e a s e th e l e f t m o u s e k ey w h e n th e o b j e ct i s th e s i z e y o u w a n t i t to b e . Yo u ca n a l s o "d r a g " a n o b j e ct i n th e w o r k a r e a b y fi r s t s e l e cti ng th e o b j e ct w i th a s i n g l e m o u s e cl i ck th e n d r a gg i n g th e o b j e ct b y p o s i ti o n i n g th e m o u s e p o i n te r o v e r th e o b j e ct, h o l d i n g do w n o n th e l e f t m o u s e k e y , a n d m o v i n g th e o b j e ct to a n e w l o ca ti o n i n th e w o r k a r e a , th e n r el e a si n g th e l e f t m o u s e b u tto n to s to p th e m o v e a n d f i n a l ly , b y cl i ck i n g s o m e w h e re o f f th e o b j e ct to d e s e l e ct th e o b j e ct th a t w a s j u s t m o v e d . W h i l e th e m o u s e p o i n te r i s o v e r th e C o m ma n d b u tt o n , cl i ck a n d r e l e a s e th e l e f t m o u s e b u tto n to h i g hl i g h t (s e l e ct) the C o mm a n d b u tto n . Yo u w i ll s ee r e s i z i ng h a n d l e s a p p e a r w h i ch y o u ca n d r a g d i a g o n al l y , h o r i z o n ta ll y , o r v e r ti ca l ly to ch a n g e th e s i z e o f th e C o m ma n d b u tto n . Th e o n l y r e a s o n y o u w o u l d w a n t to d o th i s i s to f i t a l a rg e ca p ti o n o n to th e b u tt o n . M o s t o f th e ti m e , y o u w il l n o t n e e d to r e s i z e th e C om m a n d b u tto n . B e g i n n e r s l i ke to p l a y w i th th e r e s i z i n g s o h a v e f u n w i th i t. A n o th e r w a y to p l a ce a C o mm a n d b u tto n o n to a f o r m i s to s i ng l e - cli ck o n th e C o m m a n d b u tto n i n th e To o l b a r . Th e n p l a ce th e m o u s e p o i n te r o v e r th e f o r m a n d h o l d d o w n o n th e l e f t m o u s e b u tto n w h i l e d r a g g i n g a s h o r t d i a g o n a l li n e f r o m co r n e r to co r n e r w h e r e y o u w a n t t h e b u t to n to b e p l a ce d . I f th e s i z e i s n o t r i g h t, l e f t - cl i ck o n th e b u t to n a n d d r a g th e r e - s i z i n g h a n d l e s to m a k e i t th e s i z e y o u n e e d . The Name and Naming Conventions G e tti n g d o w n to se r i o u s b u si n e s s , th e C o mm a n d b u tto n w i ll n ee d to h a ve a n a m e . I t i s n am e d w hi le i t i s h ig h li g h te d (s e l e cte d ) o n th e f o r m . W h il e th e C o m m a n d b u tto n o n th e f o r m i s s e l e cte d , g o to th e P r o p e r ti e s W i n d o w a n d s e l e ct th e Al p h a b e ti ca l ta b . A t th e to p o f th i s l is t th e f i r s t i te m to a p p e a r w i ll b e N am e . Cl i ck o n N a me a n d to th e r i g h t o f th a t, d o u b l e cli ck i n th e N a m e s p a ce to h i g hl i g h t th e w o r d s C om m an d 1 . S ta r t ty p i n g a n a m e f o r y o u r C o m m a n d b u tto n b e g i n n i n g wi th th e l o w e r ca s e l e tte r s "cm d " w i th o u t th e q u o ta ti o n m a r k s , j u s t p l a i n cm d N am e w he r e N am e i s th e o n e y o u s el e ct, s u ch a s cm d S h o w 3 . N a m i ng co n v e n ti o n s f o r co n tr o l s a n d v a r i a b l es ( te x tb o o k n a m i n g co n v e n ti o n s f o r f i r s t a n d s e co n d s e m e s te r V B s tu d e n ts ) a r e d i s cu s s e d i n th e a r ti cl e H u n g a r i a n N o ta ti o n . M a n y p r o g r a mm e r s b e gi n th e n a m e p a r t ( a f te r th e cm d p r e f i x ) w i th a ca p i ta l l e tte r to m a k e i t e a s i e r to r e a d , s u ch a s cm d L a r g e . I f tw o w o r d s a r e to b e i n th e n a m e o f a n y co n tr o l s u ch a s a C o m m a n d b u tto n , b e s u r e y o u d o n o t al l ow a n y s p a ce s i n th e n a m e. B eg i n th e s e co n d w o r d w i th a ca p i ta l l e tte r l i k e th i s : cm d S e co n d W o r d . Th i s i s o n l y
© Einstein College of Engineering
CS1015 User Interface Design d o n e to m a k e i t e a s ie r to r e a d . cm d s e co n d w o r d i s a l s o l e g al b u t i s h a r d e r to r e a d . CA S E ( U p p e r ca s e o r l o w e r ca s e ) d o es n o t m a tte r . TH I S i s th e s a m e w o r d a s th i s . V i s u a l B a s i c w il l r e ve r t b a ck to w h a te v e r u p p e r ca s e a n d l o w e r ca s e le tte r s w e r e u s e d i n a v a ri a b l e a t th e ti m e y o u w r i te th e Di m s ta te m e n t to d i m e n s i o n th e v a ri a b le . M or e o n th i s l a tte r . A to ta l o f 2 5 5 ch a r a cte r s a r e p e r m i s si b l e i n a co n tr o l o r v a r i a b le n a m e. Te ch n i ca ll y , a f te r th e v a r i a b l e n a m e be g i n s w i th a t le a s t o n e l e tte r , a n y co m b i n a ti o n o f l e tte r s , n u m e r a l s , a n d u n d e r s co r e s m a y b e u s e d . S p e ci a l ch a r a cte r s li k e p e r i o d o r a m pe r s a n d ( & ) a re n o t a ll o w e d an d a l l s tu d e n ts a r e e n co u r a g e d b y p r o g r a m m e r s to p l e a s e u s e th e H u n g a ri a n n o ta ti o n c o n v e n ti o n s w h e n n a m i n g co n tr o l s a n d v a r i a b l e s. Th e H u n g a ri a n N o ta ti o n p re f i x e s ( ag a i n , f or V B s tu d e n ts ) a r e u s e d f o r e a s e i n d e b u gg i ng , to h e l p y o u r em e m b e r w h a t ty p e o f v a r i a bl e o r co n tr o l y o u m a d e ( a f te r a l o n g ti me h a s e l a p s e d y o u m a y n o t r em e m be r ) . H u n g a ri a n n o ta ti o n h a s b e e n a c ce p te d b y p r o g r a m m e r s a s a ty p e o f n a m i n g co n v e n ti o n o r s ta n d a r d i z a ti o n i n co d i n g a n d i n n am in g co n tr o l s a n d v a r i a bl e s. M a n y ti m e s p r o g r am m e rs w o r k o n m o d u l es - - l i ttl e p i e ce s o f l a rg e r p r og r a m s a n d m a n y p e o p le w o r k o n o n e p r o g r am . Wi th o u t th e H u n g a r i a n N o ta ti o n p r o to co l s y o u r o w n v a r i a b l e s w o u l d m a k e le s s s e n s e to a n o t h e r p e r s o n . Th e p r e f i x te ll s a n o th e r p e r s o n w h a t ty p e o f co n tr o l o r v a r i a b l e y o u h a v e cr e a te d . The Caption: And Using the ampersand (&) in a Command button Caption C a p ti o n i s a P r o p e r ty o f th e C o m ma n d co n tr o l b u tto n ( th e co m m a n d b u tto n ) . L e f t cl i ck o n th e C o m m a n d b u tto n a g a i n o n th e f o r m , to s e l e ct i t. R e tu r n to th e P r o p e r ti e s w i n d o w . Cl i ck o n th e A l p h a b e ti ca l ta b . S cr o l l d o w n u n ti l C a p ti o n i s r e a d a n d cl i ck o n i t. D o u b le cl i ck o n th e w o r d s to th e r ig h t o f C a p ti o n a n d s ta r t ty p i n g th e w o r d s y o u w a n t to a p p e a r o n y o u r b u tto n . F o r a n e x i t b u tto n ty p e E& x i t f o r th e C a p ti o n a n d to u ch EN T ER . W h y th e a m p e r s a n d ? Yo u ca n u s e a n a m p e r s a n d ( &) o n e ti m e i n e a ch C o n tr o l b u tto n C a p ti o n . Th i s wi ll u n d e r li n e o n e le tte r i n th e ca p ti o n . I t i s th e le tte r f o l l o w i ng th e a m p e r s a n d th a t w i l l b e u nd e r l i n e d. Th a t u n d e r l i n e d l e tte r s i g n i fi e s w hi ch co r r e s p o n d i n g k e y b o a r d l ette r k e y ca n b e u s e d a l o n g w i th th e A L T k e y to a cce s s th e C o n tr o l b u tto n . B y u s i n g th e A L T k e y ( h el d d o w n ) w h i l e p r e s s i ng th e co r r e s p o n d i n g l e tte r k ey o n th e k e y b o a r d y o u w o ul d ge t th e s a m e p r o g r a m o u tp u t a s i f y o u h a d "pr e s s e d " o n a C o m m a n d b u tto n b y cl i ck i n g o n i t w i th th e m o u s e i n s te a d. To r e p h r a s e th i s : i f th e e xi t b u tto n h a s a C a p ti o n o f E& x i t, th e l e tte r x i s u n d e r l i n e d th e n y o u co u l d p r e s s A L T + x to e x i t th e p r o g r a m i n s te a d o f h a v i n g to c l i ck o n th e e x i t b u t to n . The Default Property of the Command control button Th i s i s a n i ce p r o p e r ty to s e t a t de s ig n tim e . Th e o n l y tw o p o s s i bl e v a l u e s a r e D e f a u l t = F a l s e o r D e f a u l t = Tr u e . On ly o n e co m m a n d b u tto n p e r f o r m s h o u l d h a v e a D e f a u l t = Tr u e s e tti n g. W i th D e f a u l t = Tr u e s e t f o r a p a r ti cu l a r C o m m a n d b u tto n , th e n th a t b u tt o n ' s cl i ck _ e v e n t ca n b e a ch i e v e d b y p r e s s i n g th e EN TER k e y i n s te a d o f h a v i n g to u s e th e m o u s e . I f y o u d o n o t d o a n y th i n g a t al l w i th thi s D e f a u l t p r o p e r ty , V i s u a l B a s i c w il l a l w ay s s e t th e
© Einstein College of Engineering
CS1015 User Interface Design
D e f a u l t = F a l se o p ti o n . Th is i s co n v e n i e n t in th a t m o s t a l l C o mm a n d b u tto n s w i ll n e e d to h a v e a f a l s e D e f a u l t s e tti n g s i n ce o n l y o n e b u t to n w i th th e tr u e D e f a u l t s e tti n g ca n b e a cce s s e d w i th th e EN TER k e y ( p e r f o r m ) . I n th e P r o p e r ti e s w i n d o w ( F 4 s h o r tcu t to th e p r o p e r ti e s w i n d o w ) , s cr o l l d o w n to D e f a u l t a n d cl i ck o n th e d r o p d o w n a r r o w t o s e e tw o ch o i ce s . C l i ck o n Tr u e , i f ch a n g i n g t h e D e f a u l t to tr u e . D o n o t h i n g a n d i t w i l l b e l e f t a t th e D e f a u l t = F a l s e , a u to m a ti ca l l y . The Cancel Property of the Command button Th e C a n ce l P r o p e r ty d e te rm i n e s w h e th e r o r n o t a C o mm a n d b u tto n i s th e ca n ce l b u tto n o f th e f o r m , th e b u tto n w h o s e a cti o n o f ca n ce l l i ng a f o r m i s a cce s s e d b y th e Es ca p e k e y ( ES C o n th e k e y b o a r d ) . V i s u al B a s i c b y d e f a ul t s e ts Es ca p e = F a l s e f o r a l l co m m a n d b u tto n s , s i n ce o n l y o n e C o m m a n d b u tto n p e r f o r m ca n b e a c ce s s e d b y th e ES C k e y ( e s ca p e ) . I u s e th e Ex i t b u tto n i f I h a v e o n e o n th e f o r m a n d a t d e s i g n ti m e i n th e P r o p e r ti e s W i n d o w I s e t th e C a n ce l o p ti o n to Tr u e . To d o th i s , s e l e ct th e C o m m a n d b u tto n w h i ch i s to b e th e ca n ce l b u tto n . S cr o l l i n th e P r o p e r ti e s W i n d o w to th e C a n ce l p r o p e r ty . C li ck o n th e d r o p d o w n a r r o w a n d cl i ck o n Tr u e . To u ch EN TER k e y . ( J u s t l i k e th e D e f a u l t p r o p e r ty th e r e a r e o n l y tw o s e tti n g s f o r th e C a n ce l p r o p e r ty , Tr u e o r F a l s e . ) . A g a i n, d o n o th i n g a n d th e s e tti n g w i l l a u to m a ti ca l l y b e F a l s e. N o w , a q u i ck r e ca p : Th e r e a r e th r e e w a y s f o r a u s e r to a cce s s th e cm d Ex i t ( co m m a n d b u tto n ) :
Click on the button Use the keyboard short -cut, ALT + X, if the programmer has used E&xit in the Caption so that X will be a "hot key" to use with ALT key.
Use the ESC key (Escape), if the Cancel Property of cmdExit has been set to True by the programmer (at Design time).
N o te : A n a d d i ti o n a l w a y to e x i t o r ca n ce l th e f o r m f r o m R u n m o d e i s t h e o b v i o u s W i n d o w s me th o d o f cl i ck i n g o n th e e x i t b u tto n i n th e Ti tl e b a r o f th e f o r m . ToolTips Property for any control object, including the Command button Th e C a n ce l P r o p e r ty a n d th e D e f a ul t P r op e r ty w e r e i n h e r e n t o n ly to th e C o m m a n d b u tto n . M a n y p r o p e r ti e s a v a i l ab l e to th e co m m a n d b u tt o n m a y a l s o b e s e t w i th o th e r co n tr o l o b j e cts f r o m th e to o l b a r , a n d e v e n o b j e cts n o t f r o m th e to o l b a r . Th e T o o l Ti p s p r o p e r t y i s a v a i l a bl e f o r s e tti n g w i th a n y o f th e V i s u a l B a s i c co n tr o l o b j e cts . Th e To o l Ti p s p r o p e r ty i s a cle v e r w a y to h av e th e u s e r r e a d a m e ss a g e a b o u t a co n tr o l o b j e ct s i m p ly b y h o v e r i ng wi th the m o u s e p oi n te r o v e r th a t o b j e ct f o r a co u p l e o f s e co n d s .
© Einstein College of Engineering
CS1015 User Interface Design
S e tti n g th e m e s s ag e o f th i s p r o p e r ty i s v e r y si m pl e . J u s t cli ck o n th e C o m m a n d b u tto n o r a n o th e r o b j e ct to s e l e ct i t a n d th e n i n th e P r o p e r ti e s W i n d o w ( F 4 ) , s cr o l l d o w n to To o l Ti p s a n d d o u b l e cl i ck i n th e s p a ce to th e r i g h t o f To o l Ti p s a n d s ta r t t y p i n g y o u r m e s s a g e w i th o u t q u o ta ti o n m a r k s . Yo u w i ll n e e d to r u n th e p r o g r am ( F 5 s h o r tcu t) , a n d h o l d y o u r m o u s e p o i n te r o v e r th e o b j e c t i n o r d e r f o r y o u r T o o l Ti p m e s s a g e to a p p e a r . A l wa y s ch e ck y o u r To o l Ti p s i n th e R u n m o d e j u s t to m a k e ce r tai n th e y a r e f u n cti o n i n g th e w a y y o u w a n t th e m to . R e m e m b e r , s e t th i s P r o p e r ty , p r e f e r a b l y a t D e s i g n ti m e.
Text-Entry Field (Control) — Reference Description A text-entry field is a text field where a user can type or place characters, as arguments, in an application. Text-Entry Field
When to Use Recommended Provide a text-entry field to allow the user to enter characters. Guidelines Required Support insert mode for all entry of text. Required Do not support replace mode when nontextual elements (for example, icons or choices) are included as elements in text and laid out as characters. Recommended Provide replace mode for text entry if the text is displayed using a fixed-width font.
© Einstein College of Engineering
CS1015 User Interface Design
Recommended If you provide replace mode, allow the user to switch between insert and replace mode by pressing the Insert key. Initial Values in Text-Entry Fields Recommended If a text-entry field must contain a value, provide an appropriate initial value. Recommended If the user will typically replace the initial value in the text-entry field, use a persistent selection to select the entire initial value so that the data can be replaced by typing the first input character. Verification of Entered Text Required Even if the information entered by the user into a text-entry field is not acceptable to the application and if the focus has been moved out of the text-entry field, do not automatically move focus back to the text-entry field. Recommended When using an explicit focus policy, if the information entered by the user into a textentry field is not acceptable and focus is on another control, display a warning message that includes a choice that returns focus to the text-entry field. Optional If the information entered by the user into a text-entry field is not acceptable and focus has been moved out of the text-entry field, mark the field in some way (for example, with a new color) so that the user can locate and correct it. Insert Mode Required In insert mode, position the text cursor between adjacent elements. Required In insert mode, when the user types a character, insert the character before the cursor. Replace Mode Required In replace mode, display the text cursor as if it were on a character. However, with respect to the rules for navigation and selection, treat it as if it were positioned prior to the character on which it is displayed. When the cursor is at the end of a line, it should appear to be on an empty character following the last character on the line. Required In replace mode, when the cursor is not at the end of a line and the user types a printing character, delete the character on which the cursor appears before inserting the new character. This should have the effect of replacing the character. Required
© Einstein College of Engineering
CS1015 User Interface Design
In replace mode, when the cursor is at the end of the line and the user types a printing character, insert the character before the cursor position. Behavior Required When a control supports text entry, support primary, clipboard, and drag-and-drop transfer in the text field. Required Allow the user to scroll data in a text-entry field when more text can be typed or when more information is available than can be displayed in the field. Required In text, when the user presses Space or Shift Space, insert a space. Required In a text-display field or a single-line text-entry field, when the user presses Enter, invoke the default action. Required In a multiline text-entry field, when the user presses Enter, insert a new line. End the current line with the character preceding the current cursor position and start a new line with the following character. Required In a text-display field, use Tab and Shift Tab for tab-group navigation. Required In a multiline text-entry field, use Tab and Shift Tab for internal navigation. Use Tab either to insert a tab or to skip to the next tab stop. Shift Tab should have either no effect or should skip back to the previous tab stop. Required In a single-line text-entry field, use Tab and Shift Tab either for tab-group navigation or for internal navigation as in a multiline text-entry field. Recommended In a text-entry field, when the user presses Ctrl Delete, delete the characters following the cursor to the end of the line. If text is selected, delete the selection instead. Guidelines Label the entry field with a text label above it or to its left, using sentence capitalization. Provide an access key in the label that allows the user to give focus directly to the entry field. Right-justify the contents of entry fields that are used only for numeric entry, unless the convention in the user's locale demands otherwise. This is useful in windows where the user might want to compare two numerical values in the same column of controls. In this case, ensure the right edges of the relevant controls are also aligned.
© Einstein College of Engineering
CS1015 User Interface Design
When the user gives focus to an entry field using the keyboard, place the text cursor at the end of the existing text and highlight its contents (but don't overwrite the existing PRIMARY clipboard selection). This makes it easy to immediately overtype or append new text, the two most common operations performed on entry fields. Size text entry fields according to the likely size of the input. This gives a useful visual cue to the amount of input expected, and breaks up the dialog making it easier to scan. Don't make all the fields in the dialog the same width just to make everything line up nicely. In an instant-apply property or preference window, validate the contents of the entry field when it loses focus or when the window is closed, not after each keypress. Exception: if the field accepts only a fixed number of characters, such as a hexadecimal color code, validate and apply the change as soon as that number of characters have been entered. Provide a static text prompt for text boxes that require input in a particular format or in a particular unit of measurement. For example: Figure 6-4 Text entry field with static text prompt
Where possible, provide an additional or alternative control that limits the required input to the valid range. For example, provide aspinbox or slider if the required input is one of a fixed range of integers, or provide access to a GtkCalendar control if the user has to enter a valid date: Figure 6-5 Text entry field requiring a date as input, with a button beside it to pop up a GtkCalendar control to simplify the task
This is less error-prone than expecting the user to format their text input in some arbitrary format. You may still want to provide the entry field control as well, however, for expert users who are familiar with the required format. If you implement an entry field that accepts only keystrokes valid in the task context, such as digits, play the system warning beep when the user tries to type an invalid character. If the user types three invalid characters in a row, display an alert that explains the valid inputs for that textfield. The cursor blink rate is globally defined by the XSettings "gtk-cursor-blink" and "gtkcursor-blink-time". Standard toolkit controls use these and they must not be altered in applications by any means. New controls with text cursors must respect these global values.
Selection control: Presents on the screen all the alternatives, conditions, or choices that may exist for entity, property or value.
© Einstein College of Engineering
CS1015 User Interface Design
Radio Buttons: A radio button is a Windows control made of two sections: a round box O and a label. The label informs the user as to what the control is used for. The user makes his or her decision by selecting or clicking the round box . In practical usage, a radio button is accompanied by one or more other radio buttons that appear and behave as a group. The user decides which button is valid by selecting only one of them. When the user clicks one button, its round box fills with a (big) dot: . When one button in the group is selected, the other round buttons of the (same) group are empty. The user can select another button by clicking a different choice, which empties the previous selection. This technique of selecting is referred to as mutuallyexclusive.
User Interface Design Elements The Palette
Windows Events
The Paints
Pull-down Menus / Drop-down Menus Push Buttons Icons Checkboxes Radio Buttons Scrolling Lists Text Field Popup List Spin Boxes Sliders
© Einstein College of Engineering
CS1015 User Interface Design
Windows The most pervasive element used in GUIs is the window. It could be considered to be a metaphor for a "window" into the computer, but it is dependent on idioms for its operation. The video screen itself can be considered to be a window into the computer. In character-based interfaces it was the only window into the computer and was not really thought of as such. The GUI paradigm, however, allowed for the user to see into multiple areas within the computer, and the window metaphor was born.
Events An "event," with respect to user interfaces, is any function initiated by the user. Selecting something from a pull-down menu, clicking a button or a checkbox, and closing a window are all examples of events. It is a common misconception that events were born of the GUI age. In fact character-based interfaces accommodated myriad events, but they were generally performed by complex keystrokes such as control-shift-F6. An application such as WordPerfect would usually provide a so-called "quick reference card" to aid the users in remembering which keystroke combination initiated which event. By visually presenting all of the possible events to the user, the need for a quick reference card vanished. Also, the advent of pointing devices such as the mouse allowed entirely new kinds of events to be implemented, such as "drag and drop."
Pull-down Menus / Drop-down Menus Pull-down menus are menus that the user can "pull down" from the menu bar that traverses the top of the screen. On some platforms these are called "drop down" menus because the user does not need to hold the mouse button down in order for the menu to remain visible.
© Einstein College of Engineering
CS1015 User Interface Design
Push Buttons A push button is simply a rectangle that appears on a panel with some sort of label or icon inside it. The metaphor is to any button you'd find in the physical world, such as on a calculator or telephone. Clicking on a push button will cause some sort of action will occur. Sometimes a panel will have a "default" button, which appears with an enhanced border. This button will be activated when the Enter key is pressed.
Icons Icons are small pictures that are generally represent objects in the physical world or are used as metaphors for functions or actions. Icons can be "clickable" and used to initiate an event. These are sometimes referred to as "buttcons," as they become hybrids of buttons and icons.
Checkboxes A checkbox is a small square with some sort of label beside it. Clicking on a checkbox will cause an 'X' to appear in the box. Clicking it again will cause the 'X' to disappear.
© Einstein College of Engineering
CS1015 User Interface Design
Radio Buttons A radio button is small circle with some sort of label beside it. A black dot inside the circle indicates that the button is selected. The absence of a dot indicates that the button is unselected. The metaphor with radio buttons is to old-fashioned car radios that used mechanical buttons to change the radio station. When one button is pushed in, whatever other button had been pushed in will pop out. In this way, only one button can be pushed in at a time. Similarly, with the radio button form object, clicking on one option will cause whatever other option that had been selected to become unselected.
When applicable, radio buttons should be placed in a logical order. Don't use radio buttons for binary choices (e.g. Yes/No). Use check boxes for this.
Scrolling Lists Scrolling lists are lists of elements that appear in a box with a scroll bar on the side, allowing the user to scroll through the elements in the list. In this way the list can contain more elements than can be displayed at any one time. Clicking on an element in the list will cause that element to become selected, as shown below.
Noting selected
"Element2" selected
Optionally, a list can allow multiple selections. These can either be contiguous or discontiguous, as shown below (respectively).
Contiguous selection
Discontiguous selection
Text Field A text field is simply a space in which the user can type text. Text fields are usually contained within a rectangle, but it could just be space on a panel that can accept text.
© Einstein College of Engineering
CS1015 User Interface Design
If a text field is contained within a rectangle, it can optionally have a scroll bar to allow it to contain more information than can be displayed at any one time.
Popup List A popup list appears initially as a box containing some sort of label. When the user clicks on the box, a larger box containing a variety of choices will "pop up." By moving the mouse, the user can cause another choice to become selected. When the user releases the mouse, the popup menu will disappear leaving currently selected choice to appear in the box.
Spin Boxes A spin box is a box containing some value, with up and down arrows on one side and generally a label on the other. By clicking the up or down arrow, different values will appear in the box. The entire range of choices can be cycled through if the up or down arrows are clicked enough times. Whatever value appears in the box is the value that is selected at that time.
Sliders A slider is a long box with a control that the user is able to slide one way or the other. Often a slider will have an arrow button at either end to allow the user to adjust the slider one unit at a time. Also there is often a text field to the side of the slider that will indicate the value that the slider is currently set on and allow the user to enter a specific value.
© Einstein College of Engineering
CS1015 User Interface Design
Unit IV: Text for Web Pages: Writing Clear Text and Messages: Do not use Use short, familiar words positive terms complete words consistent words jargon abbreviations, contractions, mnemonics, or acronyms hyphenated words
Providing Effective Feedback and Guidance and Assistance: Instructions or prompting A help facility Contextual help Task-oriented help Reference help Wizards
© Einstein College of Engineering
CS1015 User Interface Design
Hints or tips
INTERNATIONALIZATION & ACCESSIBILITY: International Considerations Localization Cultural Considerations Writing Text Using Images and Symbols Requirements Determination and Testing Accessibility Visual Disabilities Hearing Disabilities Physical Movement Disabilities Speech or Language Disabilities Cognitive Disabilities Seizure Disorders INTERNATIONALIZATION Internationalization The process of isolating culturally specific elements from a product Localization The process of infusing a specific cultural context into a previously internationalized product When to do it: When the market includes few or no English speakers When translation is required by law or by custom When the widest possible market is desired When not to do it: When the audience already reads English When the cost of retrofitting or rewriting the software is prohibitive Cultural Dimensions Power distance Individualism (versus collectivism) Masculinity (versus feminity) Uncertainty avoidance Long-term orientation (versus short term) Words and Text Use simple English Develop a restricted vocabulary Restrict the sentence structure using: noun-verb-object Avoid: Acronyms and abbreviations
© Einstein College of Engineering
CS1015 User Interface Design
Slang or obscure phrasing Stringing three nouns together Local or computer jargon A telegraphic writing style An over-friendly writing style Culturally specific examples References to national, racial, religious, and sexist stereotypes Adhere to local user language idioms and cultural contexts Keep the original term for words that cannot be translated Allow additional screen space for the translation Horizontally, using Table 10.1 Vertically When translating to other languages, first do: European: German Middle East: Arabic Far East: Japanese Position icon captions outside of the graphic Modify mnemonics for keyboard access Adhere to local formats for date, time, money, measurements, addresses, and telephone numbers Images and Symbols Adhere to local cultural and social norms Use internationally accepted symbols Develop generic images Be particularly careful with: Religious symbols (crosses and stars) The human body Women Hand gestures Flags The cross and check for check boxes Review proposed graphical images early in the design cycle Color, Sequence, and Functionality Adhere to local color connotations and conventions Provide the proper information sequence Provide the proper functionality Remove all references to features not supported Requirements Determination and Testing Establish international requirements at the beginning of product development Establish a relationship within the target culture Test the product as if it were new ACCESSIBILITY: Definition
© Einstein College of Engineering
CS1015 User Interface Design
Providing easy access to a system for people with disabilities
Objective Minimize all barriers that make a system difficult, or impossible, to use Accessibility Design Consider accessibility issues during system planning, design, and testing Provide compatibility with installed accessibility utilities Provide a customizable interface Follow standard Windows conventions Use standard Windows controls Assure online forms can be easily completed Visual Disabilities Guidelines Utilities Ensure compatibility with screen-review utilities Ensure compatibility with screen-enlargement utilities Screen Components Include meaningful screen and window titles Provide associated captions or labels for all controls, objects, icons, and graphics, including graphical menu choices Provide a textual summary for each statistical graphic Allow for screen element scalability Support system settings for high contrast for all user interface controls and client area content When “high contrast” setting is established, hide any images drawn behind text to maintain screen information legibility Screen Components (Continued) Avoid displaying or hiding information based on the movement of the pointer Exception: Unless part of the standard interface (ToolTips, for example) Keyboard Provide a complete keyboard interface Provide a logical order of screen navigation Color Use color as an enhancing design characteristic If used: Select color combinations that can be discriminated Ensure the lightness contrast between foreground and background color is high Increase the lightness contrast between colors at each end of the color spectrum (blues and reds) Avoid combining dark colors from the middle of the spectrum with light colors at either end Create the color combinations based on the system colors for window components
© Einstein College of Engineering
CS1015 User Interface Design
Hearing Disabilities Provide captions or transcripts of important audio content Provide an option to display a visual cue for all audio alerts Provide an option to adjust the volume Use audio as an enhancing design characteristic Provide a spell-check or grammar-check utility Do not define specific colors Use tools to verify what colors will look like when seen by colordeficient people
Physical Movement Disabilities Provide voice-input systems Provide a complete and simple keyboard interface Provide a simple mouse interface Provide on-screen keyboards Provide keyboard filters Speech or Language Disabilities Provide a spell-check or grammar-check utility Limit the use of time-based interfaces Never briefly display critical feedback or messages and then automatically remove them Provide an option to permit the user to adjust the length of the time-out Cognitive Disabilities Permit modification and simplification of the interface Limit the use of time-based interfaces Do not briefly display critical feedback or messages and then automatically remove them Provide an option to permit the user to adjust the length of the time-out Seizure Disorders Use elements that do not blink or flicker at rates between frequency ranges of 2 Hz and 55 Hz Minimize the area of the screen that is flashing Avoid flashing that has a high level of contrast between states Provide an option to enable users to slow down or disable screen Web Page Accessibility Design Pages Provide a simple and consistent layout Place important information at page top
© Einstein College of Engineering
CS1015 User Interface Design
Provide simple backgrounds contrasting well with text Provide a “Skip to Main Content” link at the top of each page Structure articles with two or three levels of headings End sentences, headings, and list items with punctuation Provide frame titles Provide user adjustable font sizes and styles, colors, graphical attributes, and volume Avoid blinking or constantly changing elements Controls Provide large buttons Links Provide fully descriptive headings Separate consecutive links with a dividing character Tables, Frames, and Columns Use sparingly Provide alternate ways to access items contained within tables Images Provide associated text Audio Include one or more of the following: Caption or pop-up text window Textual transcript Textual description For lengthy descriptions or transcripts, provide a link to a separate page Video Include one or more of the following in both a textual and audio format: Transcript Description For lengthy descriptions or transcripts, provide a link to a separate page Image Maps Provide equivalent text menus Animation Provide an option to display in a nonanimated presentation mode Plug-ins and applets Use sparingly General Synchronize multimedia elements Test for accessibility For online forms that cannot be read by utilities Provide alternate method of communication If accessability cannot be accomplished any other way: Provide equivalent text-only page Follow WWW and Section 508 guidelines Usability for Lower-Literacy To aid lower-literacy Web users:
© Einstein College of Engineering
CS1015 User Interface Design
Prioritize information Avoid moving or changing text Streamline page design Simplify navigation Optimize search Usability for Senior Citizens Provide large targets Reduce the number of clicks Do not require double-clicks Do not use pull-down menus Do not have a deep page hierarchy Concentrate important information at page top Avoid the need to scroll Place most links in bulleted, not tightly clustered list Clearly differentiated visited/non-visited links Use few colors, avoiding blue and green tones For text to be read or scanned, use: 12- to 14-point sans serif font (Helvetica, Arial) Black text on white background Left alignment Increased spacing (leading) between lines Sentence style mixed-case letters Appropriate large headings in a sans serif font Documentation
14-
to
16-point
Provide documentation on all accessible features Provide documentation in alternate formats Provide online documentation for people who have difficulty reading or handling printed material Testing Icons: Kinds of Icons Characteristics of Icons Influences on Icon Usability Choosing Icons Multimedia Images Photographs/Pictures Diagrams Drawings Test all aspects of accessibility as part of the normal system testing process
© Einstein College of Engineering
CS1015 User Interface Design
Creating Meaningful Graphics, Icons, and Images: Icons should be: familiar clear and legible simple consistent direct efficient discriminable
Choosing Images: Use existing icons when available Use images for nouns, not verbs Use traditional images Consider user cultural and social norms
Choosing the Proper Colors: Adds dimension, or realism, to screen usability Draws attention because it attracts a person’s eye If used properly, it can emphasize the logical organization of information, facilitate the discrimination of screen components, accentuate differences among elements, and make displays more interesting If used improperly, it can be distracting, visually fatiguing
Organizing and Laying Out Windows and Pages: Organize for meaningfulness and efficiency Create groupings Provide alignment and balance
Kinds of Icon
© Einstein College of Engineering
CS1015 User Interface Design
Icon—Something that looks like what it means Index—A sign that was caused by the thing to which it refers Symbol—A sign that may be completely arbitrary in appearance — Marcus (1984) Resemblance—An image that looks like what it means Symbolic—An abstract image representing something Exemplar—An image illustrating an example or characteristic of something Arbitrary—An image completely arbitrary in appearance whose meaning must be learned Analogy—An image physically or semantically associated with something — Rogers (1989) Characteristics of Icons Syntactics is an icon’s physical structure Square, round, red, green, big, small? Semantics is the icon’s meaning To what does it refer? Pragmatics is how the icon is physically produced Can it be illustrated clearly? Influences on Icon Usability Provide icons that are: Familiar Clear and legible Simple Consistent Direct Efficient Discriminable Also consider the: Context in which the icon is used Expectancies of users Complexity of task A Successful Icon Looks different from all other icons Is obvious what it does or represents Is recognizable when no larger than 16 pixels square Looks as good in black and white as in color Size Supply in all standard sizes. 16 x 16 pixels 16- and 256-color versions 32 x 32 pixels 16- and 256-color versions
© Einstein College of Engineering
CS1015 User Interface Design
Effective: 24 x 24 or 26 x 26 in 32 x 32 icon 48 x 48 pixels 16- and 256-color versions Use colors from the system palette Use an odd number of pixels along each side Provides center pixel around which to focus design Minimum sizes for easy selection: With stylus or pen: 15 pixels square With mouse: 20 pixels square With finger: 40 pixels square Provide as large a hot zone as possible Choosing Images Use existing icons when available Use images for nouns, not verbs Use traditional images Consider user cultural and social norms Creating Images Create familiar and concrete shapes Create visually and conceptually distinct shapes Incorporate unique features of an object Do not display within a border Clearly reflect objects represented Simply reflect objects represented, avoiding detail Create as a set, communicating relationships to one another through common shapes Provide consistency in icon type Create shapes of the proper emotional tone Drawing Images Provide consistency in shape over varying sizes Do not use triangular arrows in design to avoid confusion with other system symbols When icons are used to reflect varying attributes, express those attributes as meaningfully as possible Provide proper scale and orientation Use perspective and dimension whenever possible Accompany icons with labels to ensure intended meaning Icon Animation and Audition Animation Use: To provide feedback For visual interest Make it interruptible or independent of user’s primary interaction Do not use it for decoration Permit it to be turned off by the user For fluid animation, present images at 16 or more frames per second Audition
© Einstein College of Engineering
CS1015 User Interface Design
Consider auditory icons The Design Process Define the icon’s purpose and use Collect, evaluate, and sketch ideas Draw in black and white Draw using an icon-editing utility or drawing package Test for user: Expectations Recognition Learning Test for legibility Register new icons in the system’s registry Screen Presentation Follow all relevant general guidelines for screen design Limit the number of symbols to 12, if possible, and at most 20 Arrange icons In a meaningful way, reflecting the organization of the real world To facilitate visual scanning Consistently Place object and action icons in different groups Present an interactive icon as a raised screen element Ensure that a selected icon is differentiable from unselected icons Permit arrangement of icons by the user Permit the user to choose between iconic and text display of objects and actions Multimedia: Purpose of Graphics Navigational To identify links that may be followed Representational To illustrate items mentioned in text Organizational To depict relationships among items mentioned in text Explanative To show how things or processes work Decorative To provide visual appeal and emphasis Graphics Use graphics to Supplement the textual content, not as a substitute for it Convey information that can’t be effectively using text Enhance navigation through Presenting a site overview Identifying site pages Identifying content areas
expressed
© Einstein College of Engineering
CS1015 User Interface Design
Images Limit the use of graphics that take a long time to load Coordinate the graphics with all other page elements Graphics should not look like gratuitous decorations or banner ads
Insure images convey their intended message General: Use standard images Use images consistently Produce legible images Provide descriptive text or labels with all images Distinguish navigational from decorative images Minimize: The number of presented images The size of presented images Restrict single images to 5K Restrict page images to 20K Provide thumbnail size images Image animation Avoid extraneous or gratuitous images Color Minimize the number of colors in an image Format Produce images in the most appropriate format GIF or JPEG Internationalization: Provide for image internationalization Screen design: Limit large images above the page fold Use simple background images Reuse images on multiple pages Image Maps Use Provide navigation links to other content Advantages Can be arrayed in a meaningful and obvious structure Faster to load than separate images Disadvantages Consume a significant amount of screen space “Hot spots” not always obvious One’s location within map is not always obvious Guidelines Use with caution Provide effective visual cues and emphasis to make it easy to identify link boundaries Ensure image maps are accessible to the vision impaired Photographs/Pictures
© Einstein College of Engineering
CS1015 User Interface Design
Use when every aspect of the image is relevant Guidelines: Use JPEG format On the initial page: Display a small version A thumbnail-size image Zoom-in on most relevant detail Link to larger photos showing as much detail as needed Include fewer people and objects in less complicated settings than in photos for print Emphasize close-up shots with clean backgrounds Video Uses: Show things that move or change over time Show the proper way to perform a task Show events that cannot be seen directly Convey human behavior and emotions Provide a personal message Grab attention
Disadvantages: Expensive to produce Slow to download Small and difficult to discern detail Guidelines: Never automatically download a video into a page Create short segments Provide controls: playing, pausing, and stopping Consider using: Existing video Audio only A slide show with audio Diagrams Uses: Show the structure of objects Show the relationship of objects Show the flow of a process or task Reveal a temporal or spatial order Kinds: Flow charts Cause and effect charts Gantt charts Entity relationship charts Organization charts Network diagrams Parts:
© Einstein College of Engineering
CS1015 User Interface Design
Shapes Labels Lines Guidelines: Provide simple diagrams Provide cutaway diagrams or exploded views to illustrate key points Drawings Use when some parts need emphasize or representation Guidelines: Provide simple drawings showing minimal detail Provide a link to a complete drawing Animation Uses: Explain ideas involving a change in time or position Illustrate the location or state of a process Provide feedback Show continuity in transitions Enrich graphical representations Aid visualization of 3-D structures Attract attention Disadvantages: Very distracting Can potentially create problems for people with some disabilities Slow loading Guidelines: Use only when an integral part of the content Introduce animation Create short segments Provide a freeze frame and stop mode Avoid distracting animation Audition Uses: Supplement to text and graphics Establish atmosphere Create a sense of place Teach Sample For users: With disabilities In eye-busy and hands-busy situations Without access to keyboard and/or monitor Advantages: Does not obscure information on the screen Shorter downloading time than video Disadvantages:
© Einstein College of Engineering
CS1015 User Interface Design
Annoying to many people in the vicinity Easily overused and ignored Not reliable because: Some people are hard of hearing Leaves no permenant record The user can turn it off Audio capability may not exist Guidelines: When words are spoken: Content should be simple Narration speed should be about 160 WPM When used to introduce new ideas or concepts the narration should be slowed Off-screen narration should be used rather than on-screen Unless narrator is recognized authority Create short segments Provide high-quality segments Provide audio controls Play background audio softly Interactive Voice Response (IVR) Limit to three or four levels Limit to four or fewer choices per level Combining Mediums Combinations Use sensory combinations that work best together: Auditory text with visual graphics Screen text with visual graphics Integration Closely integrate screen text with graphics Relevance Both the visual and auditory information should be totally relevant to the task being performed Presentation: Visual and auditory textual narrative should be presented simultaneously, or the visuals should precede the narrative by no more than 7 seconds To control attention, reveal systematically Limit elements revealed to one item at a time For related elements reveal sequentially Show action initiation as well as result Avoid animation that distracts from other more important information Consider download times when choosing media Testing Thoroughly test all graphics for: Legibility Comprehensibility Acceptance
© Einstein College of Engineering
CS1015 User Interface Design
Coloring: Color’s characteristics What color is Uses of color Possible problems and cautions Color connotations Results of color research Color and human vision How to use color How to choose the proper colors for: Textual graphic screens Statistical graphics screens Web screen text and images Color—What Is It? Results from the stimulation of the proper receptor in the eye by a received light wave A color name is a learned phenomenon based on previous experiences and associations The visual spectrum of wavelengths to which the eye is sensitive ranges from about 400 to 700 millimicrons Three properties: Hue—Spectral wavelength composition of a color such as green or red Chroma or saturation—Purity of a color in a scale from gray to the most vivid version of the color Value or intensity—Relative lightness or darkness of a color in a range from black to white Primary colors: red, green, and blue Their wavelengths additively combine in pairs to produce magenta, cyan, and yellow, and all the other visible colors in the spectrum Color Uses: Use color to assist in formatting a screen: Relating or tying elements into groupings Breaking apart separate groupings of information Associating information that is widely separated Highlighting or calling attention to important information by setting off from other information Use color as a visual code to identify Screen components Logical structure of ideas, processes, sequences Sources of information Status of information Use color to Realistically portray natural objects Increase screen appeal Possible problem with colors: High attention-getting capacity
© Einstein College of Engineering
CS1015 User Interface Design
Interference with use of other screens Varying sensitivity of the eye to different colors More sensitive to those in the middle of the visual spectrum: Yellow and green Combinations of screen colors can strain the eye’s accommodation mechanism: Blue and red Color-viewing deficiencies 8 percent of males 0.4 percent of females Cross-disciplinary and cross-cultural differences Colors can have different meanings in different situations to different people
Color and Human Vision: Lens Muscles that focus wavelengths of light on the retina Different wavelengths are focused at different distances behind the lens Longer wavelengths (red) are focused farther back than the shorter wavelengths (blue) Colors of a different wavelength from the color actually being focused will appear out of focus To create a sharp image of the out-of-focus colors requires a refocusing of the eye Excessive refocusing (such as between red and blue) can lead to eye fatigue Retina Light-sensitive surface of the eye Rods Sensitive to lower light levels and function primarily at night Cones Stimulated by higher light levels and react to color Different cones possess maximum sensitivity to different wavelengths of light Two-thirds (64 percent) maximally sensitive to longer light wavelengths Referred to as “red” sensitive cones However, peak sensitivity is in the yellow portion of the visual spectrum One-third (32 percent) maximally sensitive to medium wavelengths Referred to as “green” sensitive cones 2 percent primarily react to short light wavelengths Referred to as “blue” sensitive cones Choosing Colors: Choosing Colors for Categories of Information Requires a clear understanding of how the information will be used Some examples: If different parts of the screen are attended to separately, color-code the different parts to focus selective attention on each in turn If decisions are made based on the status of certain types of information on the screen, color-code the types of status
© Einstein College of Engineering
CS1015 User Interface Design
If screen searching is performed to locate information of a particular kind or quality, color-code these kinds for contrast If the sequence of information use is ordered, use color to identify the sequence If the information displayed on a screen is packed or crowded, use color to provide visual groupings Use color as a redundant code
Colors In Context: Usage Design for monochrome first Useful: For 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 Do not use color where other identification techniques, such as location, are available Discrimination and Harmony For best absolute discrimination, select no more than four or five colors widely spaced on the color spectrum. Good colors: red, yellow, green, blue, and brown For best comparative discrimination, select no more than six or seven colors widely spaced on the color spectrum. Other acceptable colors: orange, yellow-green, cyan, violet, and magenta Choose harmonious colors One color plus two colors either side it's complement Three colors equidistant points around color circle For extended viewing or for older viewers, use brighter colors. Emphasis To draw attention or to emphasize elements, use bright or highlighted colors. To de-emphasize elements: Use less bright colors The perceived brightness of colors from most to least is white, yellow, green, blue, red To emphasize separation, use contrasting colors Red and green Blue and yellow To convey similarity, use similar colors Orange and yellow Blue and violet Common Meanings To indicate that actions are necessary, use warm colors: Red Orange
© Einstein College of Engineering
CS1015 User Interface Design
Yellow To provide status or background information, use cool colors: Green Blue Violet Purple Conform to human expectations In the job In the world at large Location In the center of the visual field, use, red and green For peripheral viewing, use blue, yellow, black, and white Use adjacent colors that differ by hue and value or lightness Ordering Order colors by their spectral position: Red Orange Yellow Green Blue Indigo Violet Foregrounds Use colors that highly contrast with background color For text or data, use: Black Desaturated or spectrum center colors: white, yellow, or green Warmer more active colors Use colors that possess the same saturation and lightness To emphasize an element, highlight it in a light value of the foreground color, pure white, or yellow To de-emphasize an element, lowlight it in a dark value of the foreground color Backgrounds Use a background color to organize a group of elements into a unified whole Use colors that do not compete with the foreground Use: Light-colored backgrounds of low intensity: off-white or light gray Desaturated colors Cool, dark colors such as blue or black Colors on the spectral extremes Three-Dimensional Look Use at least five colors or color values to create a 3-D look on a screen. Background: Control itself and window on which it appears Foreground:
© Einstein College of Engineering
CS1015 User Interface Design
Captions and lines for buttons, icons, and other objects (usually black or white)
Selected mode: Color used when the item is selected Top shadow: Bezel on the top and left of the control Bottom shadow: Bezel on the bottom and right of the control Color Palette, Defaults, and Customization Permit users to customize their colors Provide a default set of colors for all screen components Provide a palette of six or seven foreground colors Provide 2 to 5 values or lightness shades for each foreground color Provide a palette of six or seven background colors Never refer to a screen element by its color Gray Scale For fine discriminations use a black-gray-white scale Recommended values are white, light gray, medium gray, dark gray, black Text in Color When switching text from black to color: Double the width of lines Use bold or larger type: If originally 8 to 12 points, increase by 1 to 2 points If originally 14 to 24 points, increase by 2 to 4 points Check legibility by squinting at text Too-light type will recede or even disappear Monochromatic Screens At the standard viewing distance, white, orange, or green are acceptable colors At a far viewing distance, white is the best choice Over all viewing distances, from near to far, white is the best choice Consistency Be consistent in color use Considerations for People with Color-Viewing Deficiencies Use color combinations that can be easily discriminated Ensure lightness contrast between foreground and background is high Increase lightness contrast between colors on either end of visual spectrum (blues and reds) Avoid combining light colors from either end of spectrum with dark colors from middle Use tools to see what screen/pages will look like to color deficient viewers Cultural, Disciplinary, and Accessibility Considerations Consider the impact of specific colors on Users of various cultures Users of various disciplines Users relying on accessibility utilities Choosing Colors for Textual Graphic Screens Overview
© Einstein College of Engineering
CS1015 User Interface Design
Use effective foreground/background combinations Use effective foreground combinations Choose the background color first Display no more than four colors at one time Use colors in toolbars sparingly Test the chosen colors Effective Foreground/Background Combinations The majority of good combinations possess a bright or high-intensity color as the foreground color The majority of poor combinations are those with low contrast The best overall color is black The poorest overall color is brown Maximum flexibility and variety in choosing a foreground color exists with black or blue backgrounds Brown and green are the poorest background choices — Lalomia and Happ (1987) For dark on light polarity Any foreground color is acceptable if the background color is chosen properly Increased saturation of the foreground only marginally affected ratings, implying that any dark, saturated, foreground color is satisfactory Saturated backgrounds yield unsatisfactory ratings Less saturated backgrounds generally receive high ratings with any foreground color For light on dark polarity Combinations involving saturated colors tend to be unsatisfactory As foreground color saturation increases, the number of background colors yielding high ratings diminishes Generally, desaturated foreground/background color combinations yielded the best ratings Short wavelength, cool colors were preferred for backgrounds (blue, bluish cyan, cyan) — Pastoor (1990) Choose the Background First Then, choose acceptable foreground colors Maximum of Four Colors Displaying more than four colors at one time on a textual screen gives rise to a feeling of “too much” Use Colors in Toolbars Sparingly Use color in toolbar icons simply and conservatively, and only if the color: Aids icon identification Makes it easier to distinguish icons Adds meaning Test the Colors Always test all chosen colors Statistical Graphic Screens Choosing Colors Emphasize the graphic’s data Number of Colors
© Einstein College of Engineering
CS1015 User Interface Design
Use no more than six colors at one time Use one color of five values or lightness Backgrounds Surround images In a neutral color In a color complementary to the main image Size Provide images of an adequate size for the task If the image changes in size, use colors that exhibit a minimum shift in hue or lightness White, yellow, and red on dark backgrounds Status To indicate a status, use the following colors: Proper, normal, or OK: Green, white, or blue Caution: Yellow or gold Emergency or abnormal: Red Measurements and Area-Fill Patterns Display measurements in the following colors: Grids: Gray Data points: Yellow Variance or error bars: Blue Out of specified range data: Red Captions / labels: Lavender Lime green Cyan Display area-fill patterns in the following colors: Widely spaced dots: Red Closely spaced dots: Green Wide dashed lines: Magenta Narrow dashed lines: Cyan Wide crosshatch: Blue Narrow Crosshatch: Yellow Physical Impressions Size To convey an impression of: Larger: Use bright or saturated colors Smaller: Use dark or desaturated colors Similar: Use colors of equal lightness Weight To convey an impression of: Heavy: Use dark, saturated colors Light: Use light, desaturated colors Distance To convey an impression of: Close: Use saturated, bright, long-wavelength (red) colors Far: Use saturated, dark, short-wavelength (blue) colors
© Einstein College of Engineering
CS1015 User Interface Design
Height To convey an impression of height, use desaturated, light colors Depth To convey an impression of depth, use saturated, dark colors Concentration level To convey an impression of concentration level: High: Saturated colors Low: Desaturated colors Magnitude of change: To convey an impression of magnitude of change: Lowest: Short-wavelength (blue) colors Highest: Long-wavelength (red) colors Actions: To convey an impression of action: Required: Long-wavelength (red) colors Not required: Short-wavelength (blue) colors Order: To convey an impression of order with color: Low end of continuum: Short-wavelength (blue) High end of continuum: Long-wavelength (red) When displaying an array of ordered colors, position: Short-wavelength colors at left side or bottom Long-wavelength colors at right side or top To convey impression of order with value or lightness, use the lightness order of a color (darkest to lightest or vice versa)
Neutrality: To convey impression of neutrality, use black, gray, and white
Web Pages: Choosing Colors Purpose Color must always have a meaningful purpose Palette Use the browser 216-color palette Presentation Minimize the number of presented colors Always consider color in context Use similar or the same color schemes throughout For foregrounds: Use black or strong colors for text and headings For backgrounds: Use weaker contrasting colors such as off-white or light gray Use a uniform color in large areas The smaller the element, the more contrast is required between it and its background
© Einstein College of Engineering
CS1015 User Interface Design
Larger images should use Flat, Web-safe colors Fewer colors than small images Select colors easily reproduced in black and white
Links
Use default colors for links Make unselected/unvisited links blue Make selected/visited links purple Do not display non-link text in link colors Test all colors Uses of Color to avoid: Relying exclusively on color Too many colors at one time Highly saturated, spectrally extreme colors together: Red and blue Yellow and purple Low-brightness colors for extended viewing or older viewers Colors of equal brightness Colors lacking contrast: Yellow and white Black and brown Reds, blues, and browns against light background Fully saturated colors for text or other frequently read screen components Pure blue for text, thin lines, and small shapes Colors in small areas Color for fine details Non-opponent colors Red and green in the periphery of large-scale displays Adjacent colors that only differ in the amount of blue they possess Single-color distinctions for color-deficient users Using colors in unexpected ways Using color to improve legibility of densely packed text Organize And Layout Windows And Pages Overview Organizing and laying out graphical and Web screens to encourage accurate: Information comprehension Control execution Organizing for meaningfulness and efficiency Creating groupings Providing alignment and balance Organization and Layout: General Guidelines Amount of information
© Einstein College of Engineering
CS1015 User Interface Design
Present the proper amount of information on each screen Too little is inefficient Too much is confusing Present all information necessary for performing an action or making a decision on one screen, whenever possible Organization and flow Divide information into units that are logical, meaningful, and sensible Provide an ordering that: Is prioritized according to the user's expectations and needs Is logical and sequential Is rhythmic, guiding a person’s eye Encourages natural movement sequences Minimizes pointer and eye movement distances Control placement Position the most important and frequently used controls at the top left Maintain a top-to-bottom, left-to-right flow If one control enables or affects another, the enabling control should be above or to the left Place the command buttons that affect the entire window horizontally, and centered, at bottom Navigation The flow of interaction should: Require minimal cursor and pointer travel Minimize the number of times a person’s hand has to travel between keyboard and mouse Assist users in navigating through a screen by: Aligning elements Grouping elements Including line borders Aesthetics: Provide a visually pleasing composition through Adequate use of white space Balance Groupings Alignment of elements Avoid visual clutter by maintaining Low screen density levels Distinctiveness of elements Focus and emphasis Provide visual emphasis to the most important screen elements, its data, or information Sequentially, direct attention to items that are: Critical Important Secondary Peripheral Consistency
© Einstein College of Engineering
CS1015 User Interface Design
Provide consistency With a person’s experiences and cultural conventions Internally within a system Externally across systems Visual identity or theme Creating Groupings General Provide groupings of associated elements Elements of a radio button or check box Two or more related fields or controls Create groupings of 5 degrees of visual angle White space Provide adequate separation of groupings through the liberal use of white space Leave adequate space: Around groups of related controls Between groupings and window borders The space between groupings should be greater than the space between fields within a grouping Headings Provide grouping headings that meaningfully and concisely describe the nature of the group Borders Enhance groupings through incorporation of borders around Elements of a single control Groups of related controls or fields Individual control borders should be visually differentiable from borders delineating groupings Provide a border consisting of a thin line around single controls Provide a border consisting of slightly thicker line around groups of fields or controls Do not place individual borders around single Entry fields List boxes Combination boxes Spin boxes Sliders Do not place borders around command buttons Control Borders Incorporate a thin single-line border around the elements of a selection control Section Borders Incorporate a thicker single-line border around groups of related entry or selection controls Dependent Controls Position a conditional control or controls To the right of the control to which it relates Alternatively, position it below the control to which it relates
© Einstein College of Engineering
CS1015 User Interface Design
Either: Display these conditional controls in a subdued or grayed out manner When a control is relevant, return it to normal intensity Do not display a conditional control until the information to which it relates is set Inscribe a filled-in arrow between the selected control and its dependent controls to visually relate them to each other Aligning Screen Elements Minimize alignment points on a window Vertically Horizontally Balancing Screen Elements Create balance by Equally distributing controls,spatially, within a window Aligning borders whenever possible Control Navigation Tab/arrow keys Use the Tab key to move between operable window controls, in the logical order of the controls Do not tab to field captions/labels Radio buttons Use arrow keys to move through radio buttons within a single control Check boxes Use the Tab key to move between check boxes, when they are independent controls Within a border or group box, use arrow keys to move between the check boxes since they appear as a logical group List boxes Use arrow keys to navigate within list box choices Command buttons For exiting or expanding/feature dialog command buttons, tab to it at the end of the screen control tabbing sequence For a command button with a contingent relationship to a control in the window body, tab to it at the logical point in the tabbing sequence within the window Keyboard equivalents Use keyboard equivalents (mnemonics) for direct access to each control, whenever possible Mnemonic designations must be unique within a window Window Guidelines Organization Organize windows to support user tasks Present related information in a single window Support the most common tasks in the most efficient sequence of steps Use: Primary windows to:
© Einstein College of Engineering
CS1015 User Interface Design
Begin an interaction and provide top- level context for dependent windows Perform a major interaction Secondary windows to: Extend the interaction Obtain or display supplemental information for primary window Dialog boxes for: Infrequently needed information “Nice-to-know” information Minimize the number of windows needed to accomplish an objective Size Provide large enough windows to: Present all relevant and expected information for the task Not hide important information Not cause crowding or visual confusion Minimize the need for scrolling Less than the full size of the entire screen If a window is too large, determine: Is all the information needed? Is all the information related? Page Layout General Provide a layout that is: Efficient Logical Consistent Self-explanatory Scannable Strike a proper balance between: Textual information Graphics Links Create and use a layout grid Layout Grid Gather representative samples of the contents of site pages Navigation pages, content pages, simple pages, and complex pages Experiment with various arrangements for all kinds of pages Paint or sketch patterns of organization on sample pages Follow all layout guidelines and evolving page organizational standards in the sketching process Maintain as much consistency between pages types as possible Establish a design grid (or grids) for the identified page types Plug in content (navigational components, text, and graphics) for each page Size Restrict the number of elements per page Minimize page length
© Einstein College of Engineering
CS1015 User Interface Design
Generally, use shorter pages for: Home and navigation pages Pages needing to be quickly browses or read online and information quickly found Situations where the pages will be loading over slow modems and all pages are not needed Generally, use longer pages for: Content pages: Where uninterrupted reading is desirable In which an entire concept must be understood without interruption. To match the structure of a paper counterpart To make pages more convenient to download and print To simplify page maintenance
Organization Place critical or important information at the very top so it is always viewable at page opening Within top 4 inches of page Limit large images above the fold Position remaining elements according to importance Reduce graphic complexity and textual density toward the page bottom Formatting Provide sufficient but moderate amount of white space Minimum of 30 percent Keep length of textual lines short Fast reading – 75-100 characters User preference important – 50-60 characters Avoid very narrow columns Keep text and related graphics close together Provide adequate horizontal spacing Use horizontal rules sparingly If multiple audiences exist, provide information formatted for each audience Platforms Design for different platforms and screens Specify an image-safe area Frames Use frames with caution Consider for global elements Use fluid layout (not fixed) Change organization and structure only when significant benefits exist Navigation Elements Differentiate and group navigation elements Provide global at page top Provide local or topical on left side For long lists, consider placing in frame Optionally, provide secondary on right side
© Einstein College of Engineering
CS1015 User Interface Design
Provide explicit or embedded links in content area Consider duplicating embedded links in left navigation bar For long pages provide: “List of Contents” links Important global and local links repeated at page bottom Create common, consistent theme Never create pages without navigational options Homepage Limit to one screen Clearly identify the Web site’s content and purpose Elements to include: Masthead, name, logo of owner and tagline Web site name Brief Web site description Summary of key information content Site overview or map Navigation links to most (if not all) of the site or major sections Summary of latest news or promotions Search facility Possible Page Components Page title Navigation bar Table of contents Site identifier Search facility Page’s author contact person Contact e-mail address Comment facility Other contact details Copyright Date of creation Links to: Skip to main content Other major sections of site Home Page Index Page Site Map or Directory Next Page Previous Page Unit V: Usability:
or
© Einstein College of Engineering
CS1015 User Interface Design
Dimensions Effective Efficient Engaging Error tolerant Easy to learn
Purpose Of Usability Testing: 1. Establish communication bridge between developers and users Developer learns about user’s goals, perceptions, questions, and problems User exposed to capabilities of system early on, before design is solidified 2. Evaluate a product Validate design decisions Identify potential problems early in design Enable comparison of alternate versions of a design element Assess how well user needs and expectations are met Prevent embarrassment resulting from things “slipping through the cracks” Importance of Usability Testing: Developers and users possess different models Developer’s intuitions are not always correct There is no average user It’s impossible to predict usability from appearance Design standards and guidelines are not sufficient Informal feedback is inadequate Products’ built-in pieces almost always have system-level inconsistencies Problems found late more difficult and expensive to fix Problems fixed during development mean reduced support costs later Advantages over a competitive product can be achieved Scope of Testing: Types of Tests Exploratory Evaluations Explore prototype interface design features Gather feedback on preliminary designs Verify assumptions derived during requirements determination Assessment Evaluations Establish how well user tasks are supported Determine what usability problems may exist Comparative Evaluations Compare two or more design alternatives Validation Evaluations Ascertain whether a usability objective is achieved Prototypes:
© Einstein College of Engineering
CS1015 User Interface Design
Vehicles for Exploration Communication Evaluation Purpose Obtain user input in design Provide feedback to designers Roles Communication not accuracy or thoroughness Enables design to be better visualized Provides insights into how the software will look and work Aids in defining tasks, their flow, the interface its screens
itself,
and
Kinds Hand sketches and scenarios Screen sketches created by hand Interactive paper prototypes Interface components constructed of common paper technologies Programmed facades Examples of finished dialogs and screens for some important aspects of the system Prototype-oriented languages An example of finished dialogs and screens for some important aspects of the system Hand Sketches and Scenarios Description Screen sketches created by hand Focus is on design, not interface mechanics A low-fidelity prototype Advantages Can be used very early in the development process Suited for use by entire design team No large investment of time and cost No programming skill needed Easily portable Fast to modify and iterate A rough approximation often yields more substantive critical comments Easier to comprehend than functional specifications Can be used to define requirements Disadvantages Only a rough approximation Limited in providing an understanding of navigation and flow A demonstration, not an exercise Driven by a facilitator, not the user Limited usefulness for a usability test
© Einstein College of Engineering
CS1015 User Interface Design
A poor detailed specification for writing the code Usually restricted to most common tasks Hand Sketch Creation Process Sketch (storyboard) the screens while determining: The source of the screen’s information The content and structure of individual screens The overall order of screens and windows Use an erasable medium Sketch the screens needed to complete each task Try selected metaphors and change as necessary Storyboard common/critical/frequent scenarios first Follow from beginning to end Then, go back and build in exceptions Don’t get too detailed; exact control positioning is not important, just overall order and flow Sketch storyboard as a team, including at least one user Develop online prototypes only when everyone agrees that a complete set has been satisfactorily sketched Interactive Paper Prototypes Description Interface components (menus, windows, and screens) constructed of common paper technologies (Post-It notes, transparencies) Components are manually manipulated to reflect the dynamics of the software A low-fidelity prototype Advantages: More illustrative of program dynamics than sketches Can be used to demonstrate the interaction Otherwise, generally the same as for hand-drawn sketches and scenarios Disadvantages: Only a rough approximation A demonstration, not an exercise Driven by a facilitator, not the user Limited usefulness for usability testing
Programmed Facades Description Examples of finished dialogs and screens for some important aspects of the system Created by prototyping tools Medium-fidelity to high-fidelity prototypes Advantages Provide detailed specification for writing code A vehicle for data collection Disadvantages May solidify the design too soon
© Einstein College of Engineering
CS1015 User Interface Design
May create the false expectation that the “real thing” is only a short time away More expensive to develop More time-consuming to create Not effective for requirements gathering Not all of the functions demonstrated may be used Not practical for investigating more than two or three approaches Prototype-Oriented Languages Description An example of finished dialogs and screens for some important aspects of the system Created through programming languages that support the actual programming process A high-fidelity prototype Advantages May include the final code Otherwise, generally the same as those of programmed facades Disadvantages Generally the same as for programmed facades Fidelity Prototype fidelity seems to have no impact on the identification of usability problems Combinations of these prototypes should be used throughout the entire system development cycle Tests: A tool to measure something, including: Conformance with a requirement Conformance with guidelines for good design Identification of design problems Ease of system learning Retention of learning over time Speed of task completion Speed of need fulfillment Error rates Subjective user satisfaction Guidelines and standards review A review of the interface in terms of an organization’s standards and design guidelines Heuristic evaluation A detailed evaluation of a system by interface design specialists to identify problems Cognitive walkthroughs Reviews of the interface in the context of tasks users perform Think-aloud evaluations Users perform specific tasks while thinking aloud Usability test An interface evaluation under real-world conditions
© Einstein College of Engineering
CS1015 User Interface Design
Classic experiments An objective comparison of two or more prototypes identical in all aspects except for one design issue Focus groups A discussion with users about interface design prototypes or tasks Guidelines and Standards Review Description: A review of the interface in terms of an organization’s standards and design guidelines Advantages: Can be performed by developers Low cost Can identify general and recurring problems Particularly useful for identifying screen design and layout problems Disadvantages: May miss severe conceptual, navigation, and operational problems Heuristic Evaluation Description: A detailed evaluation of a system by interface design specialists to identify problems Advantages: Easy to do Relatively low cost Does not waste user’s time Can identify many problems Disadvantages: Evaluators must possess interface design expertise Evaluators may not possess an adequate understanding of the tasks and user communities Difficult to: Identify system wide structural problems Uncover missing exits and interface elements Identify most important of all identified problems Does not provide systematic way to generate solutions to problems
Heuristic Evaluation Process Guidelines: Use 3 to 5 expert evaluators Choose knowledgeable people Familiar with the project situation Possessing a long-term relationship with the organization Experienced Preparing the session: Select evaluators Prepare or assemble:
© Einstein College of Engineering
CS1015 User Interface Design
Project overview Checklist of heuristics Provide briefing to evaluators to: Review the purpose of the evaluation session Preview the evaluation process Present the project overview and heuristics Answer any evaluator questions Provide any special evaluator training that may be necessary Conducting the session: Have each evaluator review the system alone The evaluator should: Establish own process or method of review Provide usage scenarios, if necessary Compare findings with usability principles list Identify any other relevant problems / issues Make at least two passes through the system Detected problems should be related to the specific heuristics they violate Comments are recorded either: By evaluator By observer The observer may answer questions and provide hints Restrict the length of the session to 2 hours After the session: Hold a debriefing session including observers and design team members where: Each evaluator presents problems detected and the heuristic it violated A composite problem listing is assembled Design suggestions for improving the problematic aspects of system are discussed After the debriefing session: Generate a composite list of violations as a ratings form Request evaluators to assign severity ratings to each violation Analyze results and establish a program to correct violations and deficiencies
Research-Based Set of Heuristics Automate unwanted workload Free cognitive resources for high-level tasks Eliminate mental calculations, estimations, unnecessary thinking Reduce uncertainty Display data in a manner that is clear and obvious Fuse data
comparisons, and
© Einstein College of Engineering
CS1015 User Interface Design
Reduce cognitive load by bringing together lower-level data into a higher-level summation Present new information with meaningful aids to interpretation Use a familiar framework, making easier to absorb Use everyday terms, metaphors, and so on Use names that are conceptually related to functions Context-dependent Attempt to improve recall and recognition Group data in consistently meaningful ways to decrease search time Limit data-driven tasks Reduce the time needed to assimilate raw data Make appropriate use of color and graphics Include in the displays only that information needed by a user at a given time Allow users to remain focused on critical data Exclude extraneous information that is not relevant to current tasks Provide multiple coding of data where appropriate Practice judicious redundancy To resolve the conflict between heuristics 6 and 8 From Gerhardt-Powals (1996) Possible Web Page Heuristics Speak the user’s language Use familiar words, phrases, and concepts Present information in a logical and natural order Be consistent Indicate similar concepts through identical terminology and graphics Adhere to uniform conventions for layout, formatting, typefaces, labeling, and so on Minimize the user’s memory load Take advantage of recognition rather than recall Do not force users to remember key information across documents Possible Web Page Heuristics (Table 14.4) (Continued) Build flexible and efficient systems Accommodate a range of user sophistication and diverse user goals Provide instructions where useful Lay out screens so that frequently accessed information is easily found Design aesthetic and minimalist systems Create visually pleasing displays Eliminate irrelevant or distracting information Use chunking Write materials so that documents are short and contain only one topic
© Einstein College of Engineering
CS1015 User Interface Design
Do not force the user to access multiple documents to complete a single thought Provide progressive levels of detail Organize information hierarchically, with more general information appearing before more specific Encourage the user to delve as deeply as needed, but to stop whenever sufficient information has been obtained Give navigational feedback Facilitate jumping between related topics Allow the user to determine current position in document structure Make it easy to return to an initial state Don’t lie to the user Eliminate erroneous or misleading links Do not refer to missing information From Levi and Conrad (1996) Cognitive Walkthroughs Description: Reviews of the interface in the context of tasks users perform Advantages: Allow a clear evaluation of the task flow early in the design process Do not require a functioning prototype Low cost Can be used to evaluate alternate solutions Can be performed by developers More structured than a heuristic evaluation Useful for assessing “exploratory learning” Disadvantages: Tedious to perform May miss inconsistencies and general and recurring problems Guidelines: Needed to conduct the walkthrough are: General description of proposed system users and their relevant knowledge Specific description of one or more core or representative tasks to be performed List of correct actions to complete each task Review: Several core or representative tasks across a range of functions Proposed tasks of particular concern Developers must be assigned roles of: Scribe to record results of the action Facilitator to keep the evaluation moving Start with simple tasks Don’t get bogged down demanding solutions Limit session to 60 to 90 minutes
© Einstein College of Engineering
CS1015 User Interface Design
Think-Aloud Evaluations Description: Users perform specific tasks while thinking aloud Comments are recorded and analyzed Advantages: Utilizes actual representative tasks Provides insights into the user’s reasoning Disadvantages: May be distracting and unnatural for participants Can slow participants thought processes Can be exhausting for participant Guidelines: Develop: Several core or representative tasks Tasks of particular concern Limit session to 60 to 90 minutes Usability Test Description: An interface evaluation under real-world or controlled conditions Measures of performance are derived for specific tasks Problems are identified Advantages: Utilizes an actual work environment Identifies serious or recurring problems Disadvantages: High cost for establishing facility Requires test conductor with interface expertise Emphasizes first-time system usage Poorly suited for detecting inconsistency problems Performance and Process Measures Performance Data Focuses on how well users can do their tasks Completion rates Completion times Error rates Process Data Comprised of measures about what users are doing during task completion Participant's self reports Observation of participant behavior Eye movement tracking Classic Experiments Description: An objective comparison of two or more prototypes identical in all aspects except for one design issue Advantages: Objective measures of performance are obtained
© Einstein College of Engineering
CS1015 User Interface Design
Subjective measures of user satisfaction may be obtained Disadvantages: Requires a rigorously controlled experiment to conduct the evaluation The experiment conductor must have expertise in setting up, running, and analyzing data collected Requires creation of multiple prototypes Guidelines: State a clear and testable hypothesis Specify a small number of independent variables to be manipulated Carefully choose the measurements Judiciously select study participants and carefully or randomly assign them to groups Control for biasing factors Collect the data in a controlled environment Apply statistical methods to data analysis Resolve the problem that led to conducting the experiment Focus Groups Description: A discussion with users about interface design prototypes or tasks Advantages: Useful for: Obtaining initial user thoughts Trying out ideas Easy to set up and run Low cost Disadvantages: Requires experienced moderator Not useful for establishing: How people really work What kinds of usability problems people have Guidelines: Restrict group size to 8 to 12 Limit to 90 to 120 minutes in length Record session for later detailed analysis Choosing a Testing Method: Usability Test vs. Heuristic Evaluation Research concludes that both are effective at different times in the design process and should be utilized Heuristic reviews should be applied first or early in the design process to identify simpler problems Usability testing should be applied later in the design process to identify more complex problems Concurrent vs. Retrospective User Comments Concurrent
© Einstein College of Engineering
CS1015 User Interface Design
Participants verbalize their observations and comments during the test Retrospective Participants verbalize their observations and comments after test completion Study Results There are no differences in the majority of the comments using either method Concurrent does not appear to slow down the participants or cause more errors Valid comments can be collected up to 24 hours after the test Participants tend to comment on successes, not “struggles” Concurrent are better for certain design problems such as link naming Retospective are more valuable for helping resolve complex issues
Developing and Conducting a Test The Test Plan Define the scope of the test Define the purpose of the test Performance goals What the test is intended to accomplish Create a test timetable Define the test methodology Type of test to be performed Test limitations Developer participants Develop scenarios to satisfy the test’s purpose Select test Participants Identify and schedule the test facility or location Run a pilot test Things to Test in Web Site Design All the browsers, servers, and monitors used Different dial-up speeds Navigation design Visual design style Content legibility and readability Backgrounds and color Graphics and icons Page breaks Page printing Accessibility Test Participants Assemble the proper people to participate Consider allowing users to work in pairs Select the proper number of participants Consider providing compensation or incentives Test Facility or Location In a formal environment
© Einstein College of Engineering
CS1015 User Interface Design
Usability laboratory In an informal environment Office or conference room In the field at the actual work location Unmoderated remote testing Pilot Test Choose a participant Design and assemble the test environment Run the pilot test Analyze and interpret the data to see whether anything important has been overlooked Recruit test participants at conclusion of the pilot test Usability Test Guidelines Before starting the test: Ensure that all test materials and equipment are available Explain that the objective is to test the software, not the participants Explain how test materials and records will be used If a consent agreement is to be signed, explain all information on it If verbal protocols will be collected, let participants practice thinking aloud Ensure that: All participants’ questions are answered All participants are comfortable with all procedures During the test: Minimize the number of people who will interact with the participants If observers will be in the room, limit them to two or three Provide a checklist for recording: Times to perform tasks Errors made in performing tasks Unexpected user actions System features used/not used Difficult/easy-to-use features System bugs or failures Record techniques and search patterns that participants employ when attempting to work through a difficulty If participants are thinking aloud, record assumptions and inferences being made Record the session with a tape recorder or video camera Do not interrupt participants unless absolutely necessary If participants need help, provide some response Provide encouragement or hints Give general hints before specific hints Record the number of hints given Watch carefully for signs of stress in participants: Sitting for long times doing nothing Blaming themselves for problems Flipping through documentation without really reading it
© Einstein College of Engineering
CS1015 User Interface Design
Provide short breaks when needed Maintain a positive attitude, no matter what After the test: Hold a post-session interview with participants Inform what has been learned in the test Provide a follow-up questionnaire that asks participants to evaluate the product or tasks performed If videotaping, use tapes only in proper ways Respect participants’ privacy Get written permission to use tapes Compile the data from all test participants List the problems the participants had Sort the problems by priority and frequency Develop solutions for the problems Modify the prototype as necessary Test the system again and again Evaluate the working System: Collect information on actual system usage through: Interviews and focus group discussions Surveys Support line Online suggestion box or trouble reporting Online bulletin board User newsletters and conferences User performance data logging Respond to users who provide feedback The user interface is one of the most important parts of any system. It must be continually evaluated to ensure it is achieving its design objectives and satisfying all your client’s needs. When you can satisfy all your client’s needs, your client will be happy and so will you!
Information Search:
Search Techniques
Free Text Search Boolean Logic Proximity Wildcards Field Searching Other Search Tools
Free Text Search
© Einstein College of Engineering
CS1015 User Interface Design The most simple search involves a free text search. This is based on a word or phrase of your choice appearing anywhere in the source material. Most bibliographic databases have their own individual controlled language which is composed of keywords. These are organised in a structured hierarchy (Thesaurus). This demonstrates the relationship between them, and enables the user to include all the terms that are relevant to their search. The Thesaurus permits a more controlled and detailed search to be undertaken because keywords are used in the indexing of the database.
Boolean Logic If the only thing you learn about effective searching is how to use Boolean logic, you will not go far wrong. Boolean logic breaks a subject down into concepts and uses “operators” such as: AND – narrows down a search using a combination of terms OR – broadens a search by searching for a number of different terms NOT – narrows down a search by eliminating terms that are not associated with something you are trying to find For example: Salmonella AND eggs will retrieve records that contain both terms Salmonella OR eggs will retrieve all records containing a reference to either salmonella or eggs Salmonella NOT eggs will retrieve records that contain Salmonella but have no reference to eggs Boolean logic can be improved by “nesting” which involves the use of parentheses to combine several search requests, for example: (Salmonella OR Listeria) AND (chocolate OR eggs) will retrieve records on Salmonella and eggs, Salmonella and chocolate, Listeria and eggs, and Listeria and chocolate. Not all search engines support Boolean logic but most academic resources (journals, bibliographic databases, reference works) will. Some search engines will support phrase searching which looks for a specifc term. For example:
“salmonella in eggs” will only find records with that exact term.
Proximity Not all search engines recognise proximity operators but a few search engines will have advanced features where proximity searching can be deployed. The most common proximity operator is “NEAR” allowing you to specify two terms that can be found close together.
© Einstein College of Engineering
CS1015 User Interface Design
Wildcards Wildcards are not supported by all search engines but can be used to represent a character or number of characters. They are useful when you are either not sure how to spell something or when you want to find records with different word endings. Different search engines use different symbols but the most common wildcards are “*” and “?”. for example:
poison* will retrieve all records that include poison, poisons, poisoned or poisoning col*r will retrieve all records that contain either colour or color wom*n will retrieve all records that contain either woman or women Field Searching Electronic sources of information have a field structure. Not all sources use the same fields. You will therefore need adapt your search accordingly. Field searching is very precise and powerful but not all sources allow you to search in this way Other search tools Depending on the database or information resource you are using, you may be able to refine your search, save your search, set up search alerts which will run a search for you and email you the results on a regular basis. Search tools and user guides can be found either on your library website or may be made available by the resource provider. These are well worth using in order to get the most out of your searching. Basic Database Searching Techniques Basic Database Searching Techniques The IU Libraries provide access to many subscription information sources often called databases. Because many of the databases the Libraries subscribe to are from different companies their interfaces vary. The following searching techniques will work in most databases. To use any database effectively, read the screens and use the help functions to find the answers to your questions. Boolean Searching Most databases allow the user different searching methods. One of the most common searching methods is Boolean Searching, also called key word searching. This type of search tells the database to retrieve all of the records in the database which cont ain a word or a set of words. You can alter the results by using Boolean Operators which are the words AND, OR and NOT. See below for an explanation of these terms Boolean Operators
AND
© Einstein College of Engineering
CS1015 User Interface Design
Example: cookies and milk will retrieve records which contain the word cookies and the word milk.
OR Example: caffeine or coffee will retrieve records which contain the word caffeine or the word coffee. This operator is used to broaden the number of records retrieved.
NOT Example: chocolate not cake will retrieve records which contain only the word chocolate but not the word cake. This operator is used to reduce the number of records retrieved. Truncation Use Truncation to find different forms of words in a Boolean or keyword search. Some databases use the asterisk and others use the question mark. Check the help function of the database you are using to learn the truncation symbol. Example: employ will retrieve records which contain the words: employ, employment, employs, employee, employer in a record. You can combine truncated terms with other words using Boolean Operators. Example: employ and education will retrieve records which include the various forms of employ and the word education. Nesting Use Nesting to preserve the "logic" of your Boolean Search. Nesting is the use of parenthesis to put your search words into sets. Example: success and (education or employment) will retrieve records which contain the word success and the word education or the word employment. Nesting is often used when search terms have similar meanings: Example: education and (employment or jobs) Stop words Stop words are commonly used words that will automatically stop a computer keyword search because they occur too frequently in records. Stop words are usually listed in the help screens of whatever database you are using. Some stop words are: the, an, at, for, from, then. When constructing a keyword search, choose the most important words. Example: If you want to find information about "What are the effects of Global Warming on agriculture?" Your keywords are: global warming, effects, agriculture. The words what, is, of, the, are not descriptive of your topic.
© Einstein College of Engineering
CS1015 User Interface Design
Visualization: Visualization is any technique for creating images, diagrams, or animations to communicate a message. Visualization through visual imagery has been an effective way to communicate both abstract and concrete ideas since the dawn of man. Examples from history include cave paintings, Egyptian hieroglyphs, Greek geometry, and Leonardo da Vinci's revolutionary methods of technical drawing for engineering and scientific purposes. Overview The use of visualization to present information is not a new phenomenon. It has been used in maps, scientific drawings, and data plots for over a thousand years. Examples from cartography include Ptolemy's Geographia (2nd Century AD), a map of China (1137 AD), and Minard's map (1861) of Napoleon's invasion of Russia half a century earlier. Most of the concepts learned in devising these images carry over in a straight forward manner to computer visualization. Edward Tufte has written two critically acclaimed books that explain many of these principles. Computer graphics has from its beginning been used to study scientific problems. However, in its early days the lack of graphics power often limited its usefulness. The recent emphasis on visualization started in 1987 with the special issue of Computer Graphics on Visualization inScientific Computing. Since then there have been several conferences and workshops, cosponsored by the IEEE Computer Society and ACM SIGGRAPH, devoted to the general topic, and special areas in the field, for example volume visualization. Most people are familiar with the digital animations produced to present meteorological data during weather reports on television, though few can distinguish between those models of reality and the satellite photos that are also shown on such programs. TV also offers scientific visualizations when it shows computer drawn and animated reconstructions of road or airplane accidents. Some of the most popular examples of scientific visualizations are computergenerated images that show real spacecraft in action, out in the void far beyond Earth, or on otherplanets. Dynamic forms of visualization, such as educational animation or timelines, have the potential to enhance learning about systems that change over time. Apart from the distinction between interactive visualizations and animation, the most useful categorization is probably between abstract and model-based scientific visualizations. The abstract visualizations show completely conceptual constructs in 2D or 3D. These generated shapes are completely arbitrary. The model-based visualizations either place overlays of data on real or digitally constructed images of reality, or they make a digital construction of a real object directly from the scientific data. Scientific visualization is usually done with specialized software, though there are a few exceptions, noted below. Some of these specialized programs have been released as Open source software, having very often its origins in universities, within an academic environment where sharing software tools and giving access to the source code is common. There are also many proprietary software packages of scientific visualization tools. Models and frameworks for building visualizations include the data flow models popularized by systems such as AVS, IRIS Explorer, and VTK toolkit, and data state models in spreadsheet systems such as the Spreadsheet for Visualization and Spreadsheet for Images. Some 3D Visualization samples can be seen at www.3dvisualization.com.au
© Einstein College of Engineering
CS1015 User Interface Design
Applications of visualization A scientific visualization of an extremely large simulation of a Raleigh-Taylor instability caused by two mixing fluids. As a subject in computer science, data visualization or scientific visualization is the use of interactive, sensory representations, typically visual, of abstract data to reinforce cognition, hypothesis building and reasoning. Scientific visualization Scientific visualization is the transformation, selection or representation of data from simulations or experiments, with an implicit or explicit geometric structure, to allow the exploration, analysis and understanding of the data. It's a very important part of visualization and maybe the first one, as the visualization of experiments and phenomena is as old as Science itself. Traditional areas of Scientific Visualization are Flow Visualization, medical visualization, astrophysical visualization and chemical visualization. There are several different techniques to visualize scientific data, with isosurface reconstruction and direct volume rendering being the more common. Educational visualization Educational visualization is using a simulation normally created on a computer to create an image of something so it can be taught about. This is very useful when teaching about a topic which is difficult to otherwise see, for example, atomic structure, because atoms are far too small to be studied easily without expensive and difficult to use scientific equipment. It can also be used to view past events, such as looking at dinosaurs, or looking at things that are difficult or fragile to look at in reality like the human skeleton, without causing physical or mental harm to a subjective volunteer or cadaver. Information visualization Information visualization concentrates on the use of computer-supported tools to explore large amount of abstract data. The term "information visualization" was originally coined by the User Interface Research Group at Xerox PARC and included Dr. Jock Mackinlay. Practical application of information visualization in computer programs involves selecting, transforming and representing abstract data in a form that facilitates human interaction for exploration and understanding. Important aspects of information visualization are dynamics of visual representation and the interactivity. Strong techniques enable the user to modify the visualization in real-time, thus affording unparalleled perception of patterns and structural relations in the abstract data in question. Knowledge visualization The use of visual representations to transfer knowledge between at least two persons aims to improve the transfer of knowledge by using computer and non-computer based visualization methods complementarily.[1] Examples of such visual formats are sketches, diagrams, images, objects, interactive visualizations, information visualization applications and imaginary visualizations as in stories. While information visualization concentrates on the use of computer-supported tools to derive new insights, knowledge visualization focuses on transferring insights and creating new knowledge ingroups. Beyond the mere transfer of facts, knowledge visualization aims to further transfer insights, experiences, attitudes, values, expectations, perspectives, opinions,
© Einstein College of Engineering
CS1015 User Interface Design and predictions by using dictionary, Visual dictionary Product Visualization Product Visualization involves visualization software technology for the viewing and manipulation of 3D models, technical drawing and other related documentation of manufactured components and large assemblies of products. It is a key part of Product Lifecycle Management. Product visualization software typically provides high levels of photorealism so that a product can be viewed before it is actually manufactured. This supports functions ranging from design and styling to sales and marketing. Technical visualization is an important aspect of product development. Originally technical drawings were made by hand, but with the rise of advanced computer graphics the drawing board has been replaced by computer-aided design (CAD). CAD-drawings and models have several advantages over hand-made drawings such as the possibility of 3-D modeling, rapid prototyping and simulation Visual communication Visual communication is the communication of ideas through the visual display of information. Primarily associated with two dimensional images, it includes: alphanumerics, art, signs, and electronicresources. Recent research in the field has focused on web design and graphically oriented usability. Visual analytics Visual analytics focuses on human interaction with visualization systems as part of a larger process of data analysis. Visual analytics has been defined as "the science of analytical reasoning supported by the interactive visual interface" [2]. Its focus is on human information discourse (interaction) within massive, dynamically changing information spaces. Visual analytics research concentrates on support for perceptual and cognitive operations that enable users to detect the expected and discover the unexpected in complex information spaces. Technologies resulting from visual analytics find their application in almost all fields, but are being driven by critical needs (and funding) in biology and national security. various complementary visualizations. See also: Picture
Visualization techniques: The following are examples of some common visualization techniques:
Constructing isosurfaces direct volume rendering Streamlines, streaklines, and pathlines table, matrix charts (pie chart, bar chart, histogram, function graph, scatter plot, etc.) graphs (tree diagram, network diagram, flowchart, existential graph, etc.) Maps parallel coordinates - a visualization technique aimed at multidimensional data treemap - a visualization technique aimed at hierarchical data Venn diagram Timeline Euler diagram
© Einstein College of Engineering
CS1015 User Interface Design
Chernoff face Hyperbolic trees brushing and linking Cluster diagram or dendrogram Ordinogram
Hypermedia
Hypermedia is used as a logical extension of the term hypertext in which graphics, audio, video, plain text and hyperlinks intertwine to create a generally non-linear medium of information. This contrasts with the broader term multimedia, which may be used to describe non-interactive linear presentations as well as hypermedia. It is also related to the field of Electronic literature. The term was first used in a 1965 article by Ted Nelson.[1] The World Wide Web is a classic example of hypermedia, whereas a noninteractive cinema presentation is an example of standard multimedia due to the absence of hyperlinks. The first hypermedia work was, arguably, the Aspen Movie Map. Atkinson's HyperCard popularized hypermedia writing, while a variety of literary hypertext and hypertext works, fiction and nonfictions, demonstrated the promise of links. Most modern hypermedia is delivered via electronic pages from a variety of systems including Media players, web browsers, and stand-alone applications. Audio hypermedia is emerging with voice command devices and voice browsing. Hypermedia development tools: Hypermedia may be developed a number of ways. Any programming tool can be used to write programs that link data from internal variables and nodes for external data files. Multimedia development software such as Adobe Flash, Adobe Director, Macromedia Authorware, and MatchWare Mediator may be used to create stand-alone hypermedia applications, with emphasis on entertainment content. Some database software such as Visual FoxPro and FileMaker Developer may be used to develop stand-alone hypermedia applications, with emphasis on educational and business content management. Hypermedia applications may be developed on embedded devices for the mobile and the Digital signage industries using the Scalable Vector Graphics (SVG) specification from W3C (World Wide Web Consortium). Software applications such as Ikivo Animator and Inkscape simplify the development of Hypermedia content based on SVG. Embedded devices such as iPhone natively support SVG specifications and may be used to create mobile and distributed Hypermedia applications. Hyperlinks may also be added to data files using most business software via the limited scripting and hyperlinking features built in. Documentation software such as the Microsoft Office Suite allows for hypertext links to other content within the same file, other external files, and URL links to files on external file servers. For more emphasis on graphics and page layout, hyperlinks may be added using most modern desktop publishing tools. This includes presentation programs, such as Microsoft Powerpoint, add-ons to print layout programs such as Quark Immedia, and tools to include hyperlinks inPDF documents such as Adobe InDesign for creating and Adobe Acrobat for editing. Hyper Publish is a tool specifically designed and optimized for hypermedia and hypertext management. Any HTML Editor may be used to build HTML files, accessible by any web browser. CD/DVD authoring tools such as DVD Studio Pro may be used to hyperlink the content of DVDs for DVD players or web links when the disc is played on a personal computer connected to the internet.
© Einstein College of Engineering
CS1015 User Interface Design
FLAn (Foreign Language Annotator) is a hypermedia editor for annotating foreign language texts with various types of media such as text (definitions, translations, grammar notes, comments, etc.), images, audio, video, animations, and Web links [edit]Hypermedia and Learning There has been a number of theories concerning hypermedia and learning. One important claim in the literature on hypermedia and learning is that it offers more control over the instructional environment to the reader or student. Another claim is that it makes level the playing field among students of varying abilities and enhances collaborative learning. A claim from psychology includes the notion that hypermedia more closely models the structure of the brain, in comparison with printed text. WWW: The World Wide Web, abbreviated as WWW and commonly known as the Web, is a system of interlinked hypertext documents accessed via theInternet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them viahyperlinks. Using concepts from earlier hypertext systems, English engineer and computer scientist Sir Tim Berners-Lee, now the Director of the World Wide Web Consortium, wrote a proposal in March 1989 for what would eventually become the World Wide Web. At CERN in Geneva, Switzerland, Berners-Lee and Belgian computer scientist Robert Cailliau proposed in 1990 to use "HyperText ... to link and access information of various kinds as a web of nodes in which the user can browse at will", and publicly introduced the project in December.
Function:
The terms Internet and World Wide Web are often used in every-day speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global system of interconnected computer networks. In contrast, the Web is one of the services that runs on the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs. In short, the Web is an application running on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of communication messages, behind the scenes, in order to fetch and display it. First, the server-name portion of the URL is resolved into an IP address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image. Statistics measuring a website's popularity are usually based either on the number of page views or associated server 'hits' (file requests) that take place. While receiving these files from the web server, browsers may progressively render the page onto the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page composition languages. Any images and other resources are incorporated to produce the onscreen web page that the user sees. Most web pages contain hyperlinks to other related pages and perhaps to downloadable files, source documents, definitions and other web resources. Such a collection of useful, related resources, interconnected via hypertext links is dubbed
© Einstein College of Engineering
CS1015 User Interface Design a web of information. Publication on the Internet created what Tim Berners-Lee first called the WorldWideWeb (in its original CamelCase, which was subsequently discarded) in November 1990. Software Tools: A programming tool or software development tool is a program or application that software developers use to create, debug, maintain, or otherwise support other programs and applications. The term usually refers to relatively simple programs that can be combined together to accomplish a task, much as one might use multiple hand tools to fix a physical object. History The history of software tools began with the first computers in the early 1950s that used linkers, loaders, and control programs.Tools became famous with Unix in the early 1970s with tools like grep, awk and make that were meant to be combined flexibly with pipes. The term "software tools" came from the book of the same name by Brian Kernighan and P. J. Plauger. Tools were originally simple and light weight. As some tools have been maintained, they have been integrated into more powerful integrated development environments (IDEs). These environments consolidate functionality into one place, sometimes increasing simplicity and productivity, other times sacrificing flexibility and extensibility. The workflow of IDEs is routinely contrasted with alternative approaches, such as the use of Unix shell tools with text editors like Vim and Emacs. The distinction between tools and applications is murky. For example, developers use simple databases (such as a file containing a list of important values) all the time as tools.However a full-blown database is usually thought of as an application in its own right. For many years, computer-assisted software engineering (CASE) tools were sought after. Successful tools have proven elusive.[citation needed] In one sense, CASE tools emphasized design and architecture support, such as for UML. But the most successful of these tools are IDEs. The ability to use a variety of tools productively is one hallmark of a skilled software engineer. Categories Software development tools can be roughly divided into the following categories:
Performance analysis tools Debugging tools Static analysis and formal verification tools Correctness checking tools Memory usage tools Application build tools Integrated development environments List of tools Software tools come in many forms:
Binary compatibility analysis: icheck, ABI Compliance Checker Bug Databases: Comparison of issue tracking systems - Including bug tracking systems
© Einstein College of Engineering
CS1015 User Interface Design
Build Tools: Build automation, List of build automation software Code coverage: Code coverage#Software code coverage tools. Software Diagnostics Code Sharing Sites: Freshmeat, Krugle, Sourceforge, GitHub. See also Code search engines. Compilation and linking tools: GNU toolchain, gcc, Microsoft Visual Studio, CodeWarrior, Xcode, ICC Debuggers: Debugger#List of debuggers. See also Debugging. Development Productivity Tools: JRebel eliminates the build and redeploy phases of Java EE Development by mapping the project workspace directly to any type application server in real-time Disassemblers: Generally reverse-engineering tools. Documentation generators: Comparison of documentation generators, help2man, POD, asciidoc Formal methods: Mathematically-based techniques for specification, development and verification GUI interface generators Library interface generators: Swig Integration Tools Memory Use/Leaks/Corruptions Detection: dmalloc, Electric Fence, duma, Insure++, Developer Edition. Memory leak detection: In the C programming language for instance, memory leaks are not as easily detected - software tools called memory debuggers are often used to find memory leaks enabling the programmer to find these problems much more efficiently than inspection alone. Parser generators: Parsing Parser development software Performance analysis or profiling: List of performance analysis tool Refactoring Browser Revision control: List of revision control software, Comparison of revision control software Scripting languages: PHP, Awk, Perl, Python, REXX, Ruby, Shell, Tcl Search: grep, find Source code Clones/Duplications Finding: Duplicate code Tools Source code formatting: indent Source code generation tools: Automatic programming Implementations Static code analysis: List of tools for static code analysis Text editors: List of text editors, Comparison of text editors Unit testing: List of unit testing frameworks IDEs Integrated development environments (IDEs) combine the features of many tools into one package. They for example make it easier to do specific tasks, such as searching for content only in files in a particular project. IDEs may for example be used for development of enterprise-level applications. Different aspects of IDEs for specific programming languages can be found in this comparison of integrated development environments.
© Einstein College of Engineering
You May Also Find These Documents Helpful
-
The graphical user interface of the software is to be designed with first priority as the…
- 612 Words
- 3 Pages
Good Essays -
Artin, John M. “Integrating User Interface Design and Object-Oriented Development Through Task Analysis and Use Cases”. http://www.cutsys.com/CHI97/Artim.html…
- 1472 Words
- 6 Pages
Powerful Essays -
The aim of this unit is to ensure learners know the impact Human Computer Interaction (HCI) has on society, economy and culture provides the basic skills and understanding required to enable learners to design and implement human computer interfaces.…
- 695 Words
- 4 Pages
Satisfactory Essays -
Shelly, G. B., & Rosenblatt, H. J. (2012). User Interface Design. In G. B. Shelly, H. J. Rosenblatt, M. Staudt, & M. Stranz (Eds.), Systems Analysis and Design (Vol. 9th, p. 371). Mason, Ohio: Cengag Learning.…
- 1029 Words
- 5 Pages
Better Essays -
Imagine you are managing a design project that will create an interface for automobile mechanics. The interface would be used by the mechanics to look up various fixes and parts for any number of makes or models of automobiles that may come through their garage. Decide what usability measures would be most motivating when designing this interface and describe the unique challenges you would have to plan for when designing an interface for an automotive repair shop. Use supporting evidence to support your response.…
- 720 Words
- 3 Pages
Good Essays -
The Final Project is a Web Site analysis. You will select an e-business or e-commerce Web site to respond to the Capstone Discussion Question, The Final Project consists of your recommendations on how to improve the site.…
- 2926 Words
- 12 Pages
Satisfactory Essays -
The user interface shall be built to provide an easy-to-use graphical interface that includes dropdown menu, labels, summit button, icons, pull-down menus, buttons, and hyperlinks. It also should adhere to commonly accepted user interface guidelines on windowing systems. For instance a button should perform like a button and not like a checkbox. Buttons will be used for single independent actions that are relevant to the current screen. Text fields (label) will be used when the user may type in anything they want.…
- 559 Words
- 3 Pages
Good Essays -
PART 1: 11 short essay questions, each for 5 points for the total of 55 points. Please use APA citations.…
- 553 Words
- 4 Pages
Satisfactory Essays -
2. Create an interactive design of output during prototyping that includes users and a variety of differently configured systems when testing the appearance of Web documents.…
- 409 Words
- 2 Pages
Satisfactory Essays -
There are three tools used to measure crime in the United States; Uniform Crime Report , National Crime Victimization Survey and National Incident Based Reporting System .…
- 1372 Words
- 4 Pages
Good Essays -
One of the key issues when designing a GUI is that developer must focus on the end user, and make the user the "front and center" throughout the GUI development process. User-Centered design is a method where developers stay attuned to the concerns, thought processes, habits, and preferences of the people targeted to use their products will develop interfaces and services that are easier to use, have greater functionality and usefulness, and are more pleasant for their customers (Rubin, 1994).…
- 416 Words
- 2 Pages
Good Essays -
"It is easy for all users to find specific information on the World Wide Web".…
- 1190 Words
- 5 Pages
Good Essays -
This type of interface lets you interact with a computer or device by working your way through a series of screens or menus.…
- 826 Words
- 4 Pages
Good Essays -
It provides leadership in addressing issues that confront the future of the Internet and is the…
- 2702 Words
- 11 Pages
Powerful Essays -
References: o Conceptic Interactive Menus. (2012). Home Page. Available: http://www.emenu-international.com/. Last accessed 23rd Oct 2012.…
- 2230 Words
- 9 Pages
Powerful Essays