Screen-Desing-HMI-Mod-4 watermark PDF

Preview

Summary

Module 4 : Screen Design ● Design Goals - Topics Covered: ● Screen Planning and Purpose - ● Organizing Screen Elements - ● Ordering of Screen Data and Content - ● Screen Navigation and Flow - ● Visually pleasing composition - ● Amount of Information - ● Focus and Emphasis - ● Presentation informatio...

Description

Module 4 : Screen Design Topics Covered: ● ● ● ● ● ● ● ● ● ● ● ●

Design Goals - 2 Screen Planning and Purpose - 3 Organizing Screen Elements - 4 Ordering of Screen Data and Content Screen Navigation and Flow - 6 Visually pleasing composition Amount of Information - 14 Focus and Emphasis - 15 Presentation informat simply and Meaningfully - 18 Information Retrie n Web -21 Statistical Graph - 26 Technologica nsiderations in Interface Design - 35

A well-designed screen: ➢ Reflects the capabilities, needs, and tasks of its users. ➢ It 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. To accomplish these goals, the designer must first understand the principles of good screen design. What follows is an extensive compilation of general screen design guidelines for the user interface. It begins with a detailed series of guidelines dealing with user considerations, including the test for good design, organizing screen elements, screen navi tion and flow, visually pleasing composition, typography, and reading, browsing, and ng on the Web. The step concludes with considerations imposed by a system’s are and software.

Interface Design Goals To make an interface easy and pleasant to use, then, t ➢ ➢ ➢ ➢ ➢

Reduce visual work. Reduce intellectual work. Reduce memory work. Reduce motor work. Minimize or eliminate any b

The result will always be imp our review of the principl screens.

in design is to:

or instructions imposed by technology.

user productivity and increased satisfaction. Let’s begin od design by applying the following simple test to all

The Test for a Good Design: ➢ ➢ ➢

➢ ➢ ➢

A simple test for good screen design does exist. A screen that passes this test will have surmounted the first obstacle to effectiveness. The test is this: Can all screen elements (field captions, data, title, headings, text, types of controls, and so on) be identified without reading the words that identify or comprise them? That is, can a component of a screen be identified through clues independent of its content? If this is so, a person’s attention can quickly be drawn to the part of the screen that is relevant at that moment. People look at a screen for a particular reason, perhaps to locate a piece of information

such as a customer name, to identify the name of the screen, or to find an instructional or error message. The signal at that moment is that element of interest on the screen. The noise is everything else on the screen. Cues independent of context that differentiate the components of the screen will reduce visual search times and minimize confusion.

➢ ➢ ➢

Screen Meaning and Purpose Each screen element . . . ● ● ● ● ● ● ● ● ●

Every control All text The screen organization All emphasis Each color Every graphic All screen animation Each message All forms of feedback

Must . . . ● Have meaning to screen users. ● Serve a purpose in performing All elements of a screen must h aning to users and serve a purpose in performing tasks or fulfilling needs. If an elem es not have meaning, do not include it on the screen because it is noise. Noise acting, competes for the screen user’s attention, and contributes to inform erload. That which is important will be more difficult to find.

Organizing Screen Elements Clearly and Meaningfully Visual clarity is achieved when the display elements are organized and presented in meaningful and understandable ways. A clear and clean organization makes it easier to recognize the screen’s essential elements and to ignore its secondary information when appropriate. Clarity is influenced by a multitude of factors: consistency in design, a visually pleasing composition, a logical and sequential ordering, the presentation of the proper amount of information, groupings, and alignment of screen items. What must be avoided is visual clutter created by indistinct elements, random placement, and confusing patterns.

Consistency ➢ Provide real-world consistency. Reflect a person’s experiences, exp ations, work conventions, and cultural conventions. ➢ Provide internal consistency. Observe the same conventions es for all aspects of an interface screen, and all application or Web site screen ➢ Follow the same conventions and rules across all relate faces. ➢ Deviate only when there is a clear benefit for the us ➢ Quite simply, consistency greatly aids learning. ➢ Inconsistency makes it difficult for a coheren ure to emerge. ➢ Inconsistency also creates a screen variati makes it difficult to notice another variation that may be important for a p task or need.

Ordering of Screen Da ➢ ➢ ➢ ➢

➢ ➢ ➢

nd Content

Divide information into at are logical, meaningful, and sensible. Organize by the degre errelationship between data or information. Provide an orderin reen units of information and elements that are prioritized according to th expectations and needs. Possible order chemes include: ○ Conventional. ○ The sequence of use. ○ Frequency of use. ○ Function. ○ Importance. ○ General to specific. Form groups that cover all possibilities. Ensure that information that must be compared is visible at the same time. Ensure that only information relative to the user’s tasks or needs is presented on the screen.

Conventional Through convention and custom, some ordering schemes have evolved for certain elements. Examples are by days of the week, by months of the year, by one’s name and address, or along a timeline. These elements should always be ordered in a customary way.

Sequence of use The sequence of use grouping involves arranging information items in the order in which they are commonly received or transmitted, or in natural groups. An address, for example, is normally given by street, city, state, and zip code. Another example of natural grouping is the league standings of football teams, appearing in order of best to worst records.

Frequency of use Frequency of use is a design technique based on the principle tha frequently should be grouped at the beginning, the second mo next, and so forth.

mation items used most ently used items grouped

Function or category Information items are grouped according to th pose or by some common parameter. All items pertaining to insurance coverage, for le, maybe placed in one location. Transportation vehicles may be grouped the categories of planes, trains, and automobiles. Such grouping also allo venient group identification using headings for the user. Sub-categories with sub-hea may also be established.

Importance Importance grouping ed on the information’s importance to the user’s task or need. Important items are p ed first or in the most prominent position. Items may be organized from best to worst or largest to smallest.

General to specific If some data is more general than others, the general elements should precede the specific elements. This will usually occur when there is a hierarchical relationship between data elements. This is a common Web site organization scheme.

Screen Navigation and Flow ➢ ➢ ➢ ➢ ➢ ➢

➢ ➢ ➢ ➢ ➢

➢ ➢ ➢ ➢ ➢ ➢

Screen navigation should be obvious and easy to accomplish. Navigation can be made obvious by grouping and aligning screen controls, and judiciously using line borders to guide the eye. The direction of movement between screen items should be obvious, consistent, and rhythmic. The eye, or pointer, should not be forced or caused to wander long distances about the display seeking the next item. Borders provide visual cues concerning the arrangement of screen elements because the eye will tend to stay within a border to complete a task. In establishing eye movement through a screen, also consider that the eye tends to move sequentially, for example: ○ From dark areas to light areas. ○ From big objects to little objects. ○ From unusual shapes to common shapes. ○ From highly saturated colors to unsaturated col These techniques can be used initially to focus a per ttention to one area of the screen and then direct it elsewhere. For screens containing data, locate the most i nt or frequently used screen controls to the top left of the screen where attention is usually directed. This will also reduce the overall numbe and manual control movements needed to work with a screen. Then, maintain a top-to-bottom, right flow through the screen. This is contrary to the older te ed screen cursor movement direction that precedes left to right, then top to bo his top-to-bottom orientation is recommended for information entry for th wing reasons: ○ Eye movemen ween items will be shorter. ○ Control m ts between items will be shorter. ○ Groupi more obvious perceptually. ○ When on eye moves away from the screen and then back, it returns to about the same place it left, even if it is seeking the next item in a sequence (a visual anchor point remains). Unfortunately, most product style guides recommend a left-to-right orientation. This orientation is based upon the presumption that since people read left-to-right, a screen must be organized in this way. The left-to-right orientation of paper forms was not dictated by human needs but by mechanical considerations. The metaphor for the earliest display screens five decades ago (although this term was not used then) was the typewriter. Our earliest display screens reflected this left-to-right entry orientation and have done so for many years. Today, in our display-based world, the typewriter’s mechanical limitations no longer exist.

➢

Top-to-bottom orientation is also recommended for presenting displays of read-only information that must be scanned.

Visually Pleasing Composition ➢ ➢ ➢ ➢ ➢

The visually pleasing composition draws attention subliminally, conveying a positive message clearly and quickly. A lack of visually pleasing composition is disorienting, obscures the intent and meaning, slows one down and confuses one. Graphic design experts have, through perceptual research, derived a number of principles for what constitutes a visually pleasing appearance. It is as if the screen were viewed through “squinted eyes,” causing the words themselves to become a blur. Provide a visually pleasing composition with the following qua ○ Balance. ○ Symmetry. ○ Regularity. ○ Predictability. ○ Sequentiality. ○ Economy. ○ Unity. ○ Proportion. ○ Simplicity. ○ Groupings.

Balance Balance is stabilization o brium, a midway center of suspension. The design elements have equal weight, lef ht, top to bottom. The opposite of balance is instability; the design elements seemingly r to topple over. Our discomfort with instability, or imbalance, is reflected every time we straighten a picture hanging askew on the wall. Balance is most often informal or asymmetrical, with elements of different colors, sizes, and shapes being positioned to strike the proper relationships.

Symmetry Symmetry is axial duplication: A unit on one side of the ne is exactly replicated on the other side. This exact replication creates formal balan the difference is that balance can be achieved without symmetry. Symmetries oppos symmetry. Our eye tends to perceive something as more compressed or compact wh symmetric. Asymmetric arrays are perceived as larger.

Regularity Regularity is uniformity of elements based on some principle plan. Regularity in screen design is achieved by establishing standard and consistently spaced columns and row starting points for screen elements. It is also achieved by using elements similar in size, shape, color, and spacing. The opposite of regularity, irregularity, exists when no such plan or principle is apparent. A critical element on a screen will stand out better, however, if it is not regularized

Predictability Predictability, illustrated e 3.4, suggests a highly conventional order or plan. Viewing one screen enables one dict how another will look. Viewing part of a screen enables one to predict how the re he screen will look. The opposite of predictability— spontaneity—suggests no plan and thus an inability to predict the structure of the remainder of a screen or the structure of other screens. In screen, design predictability is also enhanced through design consistency.

Sequentiality Sequentiality is a plan of presentation to guide th rough the screen in a logical, rhythmic order, with the most important infor significantly placed. Sequentiality can be achieved by alignment, spacing, and gro s illustrated. The opposite of sequentiality is randomness, whereby an arrangemen ow cannot be detected.

Economy The economy is the frugal and judicious use of display elements to get the message across as simply as possible. The opposite is intricacy, the use of many elements just because they exist. The effect of intricacy is ornamentation, which often detracts from clarity. The economy in screen design means mobilizing just enough display elements and techniques to communicate the desired message and no more. Historically, the use of color in screens has often violated this principle, with screens sometimes taking on the appearance of Christmas trees.

Unity Unity, illustrated in F .7, is coherence, a totality of elements that is visually all one piece. With unity, the ments seem to belong together, to dovetail so completely that they are seen as one thing. The opposite of unity is fragmentation, each piece retaining its own character. In screen design, similar sizes, shapes, and colors promote unity, as does white space—borders at the display boundary. Unity should exist between related screens, and Web site screens, as well.

Proportion Down through the ages, people and cultures have eferred proportional relationships. What constitutes beauty in one culture is not rily considered the same by another culture, but some proportional shapes hav the test of time and are found in abundance today.

Simplicity (Complexity) Simplicity, is directness and singleness of form, a combination of elements that results in ease of comprehending the meaning of a pattern. The opposite pole on the continuum is complexity. The scale created may also be considered a scale of complexity, with extreme complexity at one end and minimal complexity (simplicity) at the other.

Groupings Grouping screen elements a stablishing structure, meaningful relationships, and meaningful form. In add providing aesthetic appeal, past research has found that grouping aids in infor recall and results in a faster screen search. The study by Grose, Parush, Nadir, and Sh (1998) found that providing groupings of screen elements containing meaningful group titles was also related to shorter screen search times. In this study groupings also contributed to stronger viewer preferences for a screen.

Amount of Information ➢

➢

➢ ➢

Present the proper amount of information for the task. ○ — 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. ○ —People should not have to remember things from one screen to the next. Restrict screen or window density levels to no more than about 30 percent. We will discuss all of this in detail in the next slides.

Proper amount of information Presenting too much information on a screen is confusing; there greater competition among a screen’s components for a person’s attention. Visual times will be longer, and meaningful structure will be more difficult to perceive. Pre g too little information is inefficient and may tax a person’s memory as informat tained on multiple screens may have to be remembered.

Present all necessary information In general; present all information nec or performing an action or making a decision on one screen. If information located o ent screens must be remembered, a person’s memory will again be taxed. Dev a screen with all the necessary information requires careful analysis of the user’s t

Screen density One objective measure of “how much” should go on a screen has been developed: “density.” Density, by definition, is a calculation of the proportion of display character positions on the screen, or an area of the screen containing something. Density is clearly related to complexity, since both measure “how much is there.” Complexity looks at elements, density at characters, so they should rise and fall together. ➢ ➢ ➢ ➢

In general, increasing the density of a display increases the time and errors in finding information. There are two types of density to be calculated on a screen: overall and local. Overall density is a measure of the percentage of character positions on the entire screen containing data. Local density is a measure of how “tightly packed” the screen is.

Focus and Emphasis Visually emphasize the: ● Most prominent element. ● Most important elements. ● The central idea or focal point.

To provide emphasis use techniques such as: ● ● ● ● ● ● ● ● ● ● ● ●

Higher brightness. Reverse polarity or inverse video. Larger and distinctive font. Underlining. Blinking. Line rulings and surrounding boxes or frames. Contrasting color. Larger size. Positioning. Isolation. Distinctive or unusual shape. White space.

De-emphasize less importa To ensure that empha

ments. creen elements stand out, avoid:

● Emphasizing any screen elements. ● Using too many emphasis techniques. ● Screen clutter. In Web page design: ● Call attention to the new or changed content. ● Ensure that page text is not overwhelmed by page background. Apply a visual emphasis technique to highlight the most important or prominent parts of a screen. An emphasized element should contrast with the rest of the screen, calling the user’s eyes to it.

Brightness A brighter element has a good attention-getting quality and no disturbing features. It may be used to indicate items in error, and increased brightness is the best vehicle for calling attention to data on inquiry screens. Do not use more than two brightness levels on a screen. If brightness has a fault, it is that displays with improperly set manual screen contrast controls can diminish its effectiveness, even causing it to disappear. This can be a major problem for displays placed in exceptionally bright viewing conditions.

Fonts Differences in fonts have a moderate attention-getting capability. T ying sizes and shapes can be used to differentiate screen components. Larger, b etters can be used to designate higher-level screen pieces, such as different levels o ngs if the headings are used to search for something. Do not use larger fonts, how r entry/modification (conversational) and display/read-only screens, becaus will place too much emphasis on the headings themselves.

Underlining Underlining is a moderate attention-g mechanism but it can reduce legibility, so it should be used conservatively and c y. In graphical systems, it is commonly used to designate keyboard equivalents monics. In Web pages, it is used to designate navigation links.

Blinking Blinking has a very high attention-getting capability, but it reduces text readability and is disturbing to most people. It often causes visual fatigue if used excessively. Therefore, it should be reserved for urgent situations and times when a quick response is necessary. A user should be able to turn off the blinking once his or her attention has been captured. The recommended blink rate is 2–5 Hz, with a minimum “on” time of 50 percent. An alternative to consider is creating an “on” cycle considerably longer than the “off,” a wink rather than a blink.

Line rulings and surrounding boxes or frames Use lines to emphasize an...