Web Design: Length, Placement, and Usability

Chapter Objectives

• The chapter discusses the relationship between page length, content placement, and usability
• Step 4 involves specifying the website’s navigation system
• Step 5 involves designing the look and feel of the website
• Step 6 involves testing, publishing, and maintaining the website activities
• A checklist can be used to review the web design plan

Page Length, Content Placement, and Usability

• The initial, visible screen area is valuable space
• Screen resolution and size determine page visibility
• Critical information should be placed above and to the left of scroll zones
• A cluttered appearance should be avoided
• The same guidelines should be followed on subsidiary pages
• Carousels, card layouts, and slide shows can help prevent webpage scrolling
• SEO may be affected by use of carousels, card layouts, and slide shows
• Eye-tracking studies use technologies to produce heat maps to represent data using color
• A website's visitors typically look at the top and left areas of a page first, then down and to the right
• Eye-tracking heat maps are created by analyzing a visitor's eye movement on a webpage
• Page width needs to be managed when you design a webpage
• Options for page width management include: fixed-width page, liquid/flexible page layout, hybrid page layout

Website Navigation System

• The website navigation should be simple for visitors to understand and follow
• An easy-to-use navigation system encourages exploration of detail pages that satisfy their needs
• This step involves: user-based navigation system and user-controlled navigation system
• Websites should include a search capability so visitors can quickly find what they are looking for
• Website navigation should address the needs of touch screen users

Link Types

• Types of links include: text links, hidden links, image links, related link groups, and breadcrumb trails

WAI Link and Navigation Guidelines

• The Web Accessibility Initiative (WAI) offers link and navigation guidelines
• The WAI guidelines state to clearly identify the target, do not use color alone to indicate links, and group related links together in navigation bars

User-Based and User-Controlled Navigation

• User-based navigation is based on visitors’ needs rather than publishers’ needs
• Target audience profiles and UX are important for user-based navigation
• User-controlled navigation allows visitors to move around a website as they choose
• Navigation should include a way back to the home page from all subsidiary pages

Text Links

• Text links are word-based hyperlinks in an HTML document.
• Targets should be clearly identified, using tooltips if necessary
• Use existing text flow and avoid phrases like "click here"
• Including formatting and color, using color to indicate clicked links, and being consistent are great practices

Hidden Links

• Off-canvas or hamburger menus: Saves screen space but visitors might not see them
• Rollover links appear when a user hovers over an element

Image Links

• Image links involve illustrations or photographs
• Image maps are also used, which are images with hot spots

Navigation Areas

• Navigation areas group related links
• Menus are a list of related links, sometimes using pop-out menus
• Bars are navigation elements where graphic buttons represent links, sometimes using drop-down menus
• Tabs use links as small tabs to navigate

Breadcrumb Trails

• Breadcrumb trails are a hierarchical outline or horizontal list that shows a visitor's path from the home page to the current page

Search Capability

• A website search feature is a popular navigation tool for websites with many pages
• A hosted website search provider is a third party that uses spiders to build a searchable index
• The provider hosts the index on their servers
• A website index summarizes links to major pages
• Autocomplete predicts search terms as a visitor enters keywords

Levels of Navigation

• Primary navigation provides an overview of the website
• Local or subsidiary navigation is within an area of the website
• Contextual navigation is specific to the content being viewed
• Adaptive navigation uses links based on visitors' history

Website Look and Feel

• The look of a website is the combination of design aspects
• The feel of a website is the behavior of its elements, including navigation and animation
• Together, the look and feel are the emotion or reaction of visitors

Visual Consistency

• Create visual consistency by repeating design elements across all pages
• Repeat font and typeface, content position, color scheme, and placement of name, logo, and navigation

Color and Visual Contrast

• Color schemes create unity; apply a color scheme to the background, graphic art, illustrations, and text across all pages
• Choose background and text colors to provide sufficient contrast
• Ensure graphics match the chosen color scheme
• Color can evoke mood, stimulate interest, support a website’s purpose, and meet audience expectations
• Templates, web design tools, color schemes, and color-matching software aid achieving consistency

CSS and Formatting

• CSS helps web designers to use a text document, called a style sheet, to control the appearance of one or more pages
• Styles can create visual consistency
• Style rules define one or more formatting properties (declarations) for specific HTML tags (selectors)
• Inline style is inserted within a tag
• Internal style sheets are inserted within a page’s heading tags
• External style sheets are saved in a folder with the website’s pages and linked with an HTML tag
• Updating a style sheet updates all webpages using the style sheet
• CSS editor software can be used
• CSS prioritizes size rules: inline styles, internal/external style sheets, default browser styles

Page Layout

• Page layout can ensure visual consistency
• Page layout elements involves: standardized layout, layout grids, and CSS
• Wireframing plans the arrangement of page elements, which separates page layout and functionality from design
• Wireframing is like creating a UX sketch or blueprint
• Layout grids feature underlying structure of rows and columns
• Allows for precise positioning and aligning of page content
• Fluid grid layouts are based on percentage of screen
• Responsive grid layouts combine percentages and fixed limits
• Style sheets can control page layout by dividing a page into sections, such as header/navigation section

Testing, Publishing and Maintaining the Website

• A website plan must include how to test the site, how it will be published, where it will be hosted, and how to maintain and update it

Testing

• A formal website usability test, which evaluates the site, takes place in a structured environment
• The website should meet the needs of the hosting service, whether internal or external
• Important issues to consider are: size limits, update frequency, the person in charge of updating, and budget restrictions

Publishing and Maintaining

• Plans should be in place to ensure the website meets hosting service needs and the site is kept updated and the content stays relevant

Site Plan Checklist

• The checklist includes steps to: identify the website’s purpose and target audience, determine the website’s general content, select the website’s structure, specify the website’s navigation system, design the look and feel of the website, and test, publish, and maintain the website