Screen Design workshop
Design Considerations (Web)
PRINCIPLES OF INTERFACE& SCREEN DESIGNOverview What users want and doInterface design goalsThe test for a good designOrganizing screen elements Navigation and flowVisually pleasing compositionTypographyKeying proceduresData output Web sites and Web pagesStatistical graphicsTechnological considerationsMyth #1Design is common sense
HUMAN CONSIDERATIONS IN DESIGNUser's Knowledge and Experience
Computer LiteracySystem ExperienceApplication ExperienceTask ExperienceOther System UseEducationReading LevelTyping SkillNative Language and Culture
HUMAN CONSIDERATIONS IN DESIGNNovice Versus Expert UsersNovicesPossess a fragmented conceptual model of a systemOrganize information less meaningfully, orienting it toward surface features of the systemStructure information into fewer categoriesHave difficulty in generating inferences and relating new knowledge to their objectives and goalsPay more attention to low-level detailsPay more attention to surface features of the system
HUMAN CONSIDERATIONS IN DESIGNNovice Versus Expert Users (Continued)ExpertsPosses an integrated conceptual model of a systemPossess knowledge that is ordered more abstractly and more procedurally Organize information more meaningfully, orienting it toward their taskStructure information into more categoriesAre better at making inferences and relating new knowledge to their objectives and goalsPay less attention to low-level detailsPay less attention to surface features of a system
HOW TO DISTRACTTHE SCREEN USERSome Common Problemsin Visual Interface DesignVisual inconsistency Lack of restraint in the use of design features and elementsOveruse of three-dimensional presentationsOveruse of bright colorsPoorly designed iconsBad typographyMetaphors either overbearing or too cute, or too literal thereby restricting design options
HOW TO DISTRACTTHE SCREEN USERSome Web Screen DistractionsNumerous visual and auditory interruptionsExtensive visual clutterPoor information readabilityIncomprehensible screen componentsConfusing and inefficient navigationInefficient operations and extensive waste of user timeExcessive or inefficient page scrollingInformation overloadDesign inconsistencyOutdated informationStale design caused by emulation of printed documentsand past systems
WHAT SCREEN USERS WANTAn orderly, clean, clutter-free appearanceAn obvious indication of what is being shown and what should be done with itExpected information located where it should beA clear indication of what relates to what, including options, headings, captions, data, and so forthPlain, simple EnglishA simple way of finding out what is in a system and how to get it outA clear indication of when an action can make a permanent change in the data or system
WHAT SCREEN USERS DOIdentify a task to be performed or need to be fulfilled.
Decide how the task will be completed or the need fulfilled.
Manipulate the computers controls.
Gather the necessary data.
Form judgments resulting in decisions relevant to the task or need.
INTERFACE DESIGN GOALSReduce visual workReduce intellectual workReduce memory workReduce motor workMinimize or eliminate any burdens or instructions imposed by technology
THE TEST FOR GOOD DESIGNCan all screen elementsbe identified by cues otherthan by reading the wordsthat make them up?
MEANING AND PURPOSEEach screen element...Every controlAll textThe screen organizationAll emphasisEach colorEvery graphicAll screen animationEach messageAll forms of feedbackMust...Have meaning to screen usersServe a purpose in performing tasks
ORGANIZING SCREEN ELEMENTS CLEARLY AND MEANINGFULLYConsistencyProvide real-world consistencyProvide internal consistency, including:Operational and navigational proceduresVisual identity or themeComponent:OrganizationPresentationUsageLocationsFollow the same conventions and rules across all related interfacesDeviate only when there is a clear benefit for the user
ORGANIZING SCREENSStarting Point
Provide an obvious starting point in the screens upper-left corner.
Focus user's attention to the most important part of a screen or page.
ORGANIZING SCREENSStarting PointTextual DisplaysStart in upper-left cornerScan in a counterclockwise directionGraphic and Web DisplaysAdditional visual cues of weight and compositionPeople tend to look at text first, not imagesLarger type dominates over smaller typeChanging information looked at before non-changing F shaped scan Nielsen, 2006
ORGANIZING SCREENSOrdering of Screen Data and ContentDivide information into units that are logical, meaningful, and sensible. Organize by the degree interrelationship between data or information. Provide an ordering of screen units of information and elementsthat is prioritized according to the users expectations and needs. Possible ordering schemes include:ConventionalFunctionSequence of UseImportanceFrequency of UseGeneral to specificForm groups that cover all possibilities.Ensure that information that must be compared is visible atthe same timeEnsure that only information relative to the users tasks or needsis presented on the screen
ORGANIZING SCREENSOrdering Web PagesEstablish levels of importance. Place critical information near the top of Web site. Place important items near the top of a page.Organize information clearly.Place important items consistently.Facilitate scanning.Structure for easy comparison.
ORGANIZING SCREENSNavigation and FlowProvide an ordering of screen information and elements that:Is rhythmic, guiding the eye through the displayEncourages natural movement sequencesMinimizes pointer and eye movement distancesLocate the most important and most frequently used elements or controls at the top leftMaintain a top-to-bottom, left-to-right flowAssist in navigation through a screen by:Aligning elementsGrouping elementsUsing of line borders
ORGANIZING SCREENSNavigation and Flow (Continued)Through focus and emphasis, sequentially, direct attention to items that are:CriticalImportantSecondaryPeripheralTab through window in logical order of displayed information.Locate command buttons at end of the tabbing order sequence.When groups of related information must be broken and displayed on separate screens, provide breaks at logical or natural points in the information flow.
ORGANIZING SCREENSQualities of Visually Pleasing CompositionBalanceProvide an equal weight of screen elements, left and right, top and bottomSymmetryReplicate elements left and right of the screen centerlineRegularityEstablish standard and consistently spaced horizontal and vertical alignment pointsUse similar element sizes, shapes, colors, and spacingPredictabilityBe consistent in following conventional orders or arrangements
ORGANIZING SCREENSQualities of Visually Pleasing Composition (Continued)SequentialityArrange elements to guide the eye in an obvious, logical, rhythmic, and efficient mannerEconomyUse as few styles, display techniques, and colors as possibleUnityUse similar sizes, shapes, or colors for related informationLeave less space between elements of a screen than the space left at the marginsProportionCreate windows and groupings of data or text with aesthetically pleasing proportions
ORGANIZING SCREENSQualities of Visually Pleasing Composition (Continued)SimplicityOptimize the number of elements on a screen, within limits of clarityMinimize the alignment points, especially horizontal or columnarProvide standard grids of horizontal and vertical lines to position elementsGroupingsProvide functional groupings of associated elementsCreate spatial groupings as closely as possible to five degreesof visual angle (1.67 inches in diameter)Evenly space controls within a groupingVisually reinforce groupings:Separation through use of white spaceProvide line borders around groupsProvide meaningful groupings
ORGANIZING SCREENSPerceptual Principles and Grouping Use visual organization to create functional groupingsCombine visual organization principles in logical waysAvoid visual organization principles that conflict
ORGANIZING SCREENSGrouping Using White SpaceProvide adequate separation between groupings through liberal use of white spaceFor Web pages, carefully consider the trade-off between screen white space and the need for scrolling
ORGANIZING SCREENSGrouping Using BordersIncorporate line borders for:Focusing attention on groupings or related informationGuiding the eye through the screenDo not exceed three lines styles or two line thicknesses on a screenUse a standard hierarchy for line presentationCreate lines consistent in height and lengthLeave consistent padding space between the information and the line bordersFor adjacent groupings align borders left, right, top and bottomUse rules and borders sparinglyIn Web page design:Be cautious in using horizontal lines as separators between page sectionsReserve horizontal lines for for situations in which the difference between adjacent sections must be emphasized
ORGANIZING SCREENSGrouping Using BackgroundsConsider incorporating a contrasting background for related informationThe background should not have the emphasis of the screen component being attended toConsider about a 25 percent gray screeningReserve higher contrast or emphasizing techniques for screen components to which attention should be drawn
VISUAL STYLEIN WEB PAGE DESIGNMaintain a consistent and unified visual style throughout the pages of an entire Web siteBase the visual style on theThe profile and goals of the Web site ownerThe profile, tastes, and expectations of the site user
DISTINCTIVENESSIndividual screen controls, and groups of controls, must be perceptually distinctScreen controlsShould not touch a window borderShould not touch each other