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
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
Human Computer Interface: The humancomputer 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.
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
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
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
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
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 users 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 users 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 users knowledge and skills Each users experience Each users personal preference Each users 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
Obstacles in User Interface Design process: The general observations in design process: Pitfalls are, No early analysis and understanding of the users 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
Human considerations in design: The users knowledge and experience: Computer literacy. System Experience Application experience Task experience Other system use Education Reading level Typing skill Native language and culture The users 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 users psychological characteristics Attitude and Motivation Patience Stress level Expectations Cognitive style The users physical characteristics Age Hearing vision Cognitive processing Gender Handedness Human interaction speeds:
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 users 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 systems 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
Formatting menus: Guidelines for formatting: Consistency: Provide consistency with the users 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.
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:
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
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.
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:
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: -
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
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.
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 users hands are occupied
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
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
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 .
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.
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.
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
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.
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.
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.
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.
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
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
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
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
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
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 persons 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
expressed
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 Ones 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
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:
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
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
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
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
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
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
or
Purpose Of Usability Testing: 1. Establish communication bridge between developers and users Developer learns about users 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 Developers intuitions are not always correct There is no average user Its 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:
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
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
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:
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
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 tests 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
Information Search:
Search Techniques
Free Text Search Boolean Logic Proximity Wildcards Field Searching Other Search Tools
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.
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
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.
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
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.
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
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
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.