Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
5 Web Design CIS 1310 – HTML & CSS Learning Outcomes Describe Common Types of Website Organization Describe Principles of Visual Design Design for Target Audience Create Clear, Easy-to-use Navigation Improve Apply the Readability of Text on Web Pages Universal Design to Web Pages Describe Web Page Layout Design Techniques CIS 1310 – HTML & CSS Web Site Structure Hierarchical General to Detail Progression Linear Purchasing Sequence of E-Commerce Site Book Web Mimic Associative Thought and the Free Flow of Ideas CIS 1310 – HTML & CSS Web Site Structure Shallow Too Many Choices; Confusing & Less Usable Web Site Deep Too Many Clicks to Navigate to Desired Page Three Click Rule From a Page to Any Other Page in a Maximum of Three Clicks CIS 1310 – HTML & CSS Accessibility W3C’s WAI (Web Accessibility Initiative) http://www.w3.org/WAI Web Content Accessibility Guidelines http://www.w3.org/WAI/WCAG20/quickref/ Accessible Website Provides Accommodations for Individuals with: Visual, Auditory, Physical, & Neurological Disabilities CIS 1310 – HTML & CSS ? Importance of Accessibility Compliance Federal Law Americans with Disabilities Act (ADA) Prohibits Discrimination Against People with Disabilities Section 508 of US Rehabilitation Act Mirrors Web Accessibility Initiative of W3C Web Projects Funded by Government Took Effect 2001 CIS 1310 – HTML & CSS ? W3C WAI Guidelines Guideline 1 Provide Equivalent Alternatives to Auditory & Visual Content Provide Text Equivalent for Every Non-text Element Images, Image Maps, Animations, Graphical Buttons, Sounds, Audio, Audio Tracks of Video, Video Provide Redundant Text Links for Image Links Provide Auditory Description for Visual Multimedia Content CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 2 Do Not Rely on Color Alone All Information Conveyed with Color is Available without Color Ensure Foreground & Background Provide Sufficient Contrast Guideline 3 Use Markup & Style Sheets Properly Use Markup Rather than Images to Convey Information Create Documents that Validate to Published Formal Grammars Use Relative Rather than Absolute Units in Markup Use Header Elements to Convey Document Structure CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 4 Clarify Natural Language Usage Clearly Identify in Text Captions Specify Expansion of Abbreviation/Acronym When it First Occurs Guideline 5 Create Pages that Transform Gracefully For Data Tables, Identify Row & Column Headers CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 6 Ensure Pages with New Technologies Transform Gracefully Organize Documents So They May be Read Without Styles Ensure Pages are Usable When Scripts, Applets, etc. are Turned Off Not Supported CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 7 Ensure User Control of Time-sensitive Content Changes Avoid Causing the Screen to Flicker Avoid Causing Content to Blink Avoid Movement in Pages Do Not Create Periodically Auto-refreshing Pages Do Not Use Markup to Redirect Pages Automatically Configure the Server to Perform Redirects CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 8 Ensure Direct Accessibility of Embedded User Interfaces Embedded Objects with Their Own Interface Must be Accessible Guideline 9 Design for Device-independence Provide Client-side Image Maps Vs. Server-side Image Maps Create a Logical Tab Order Through Links & Form Controls Provide Keyboard Shortcuts To Important Links Form Controls Groups of Form Controls CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 10 Use Interim Solutions Do Not Cause Pop-ups or Other Windows to Appear Do Not Change the Current Window Without Informing User Ensure Proper Position For Form Controls With Labels Label Must Immediately Precede Its Control On The Same Line Be in the Line Preceding the Control Allowing More Than One Control/Label Per Line With Only One Label & One Control Per Line Provide a Linear Text Alternative for Tables that Use Parallel, Word-wrapped Columns CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 11 Use W3C Technologies & Guidelines Use W3C Technologies When Available & Appropriate For Tasks Use Latest Versions Avoid Deprecated Features of W3C Technologies Provide Info to Users According To Their Preferences Language, Content Type If You Cannot Create an Accessible Page Provide a Link to an Alternative Page That Uses W3C Technologies Is Accessible Has Equivalent Information or Functionality CIS 1310 – HTML & CSS W3C Guidelines Guideline 12 Provide Context & Orientation Information Divide Large Content Areas into More Manageable Groups Use OPTGROUP to Group OPTION Elements Inside a SELECT Group Form Controls with FIELDSET & LEGEND Use Nested Lists where Appropriate Use Headings to Structure Documents Associate Labels Explicitly with Their Controls Use LABEL & its FOR Attribute CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 13 Provide Clear Navigation Mechanisms Clearly Identify the Target of Each Link “Information About Version 4.3” Vs. “Click Here” Use of TITLE Attribute Use Navigation Mechanisms in a Consistent Manner Group Related Links, Identify the Group CIS 1310 – HTML & CSS W3C WAI Guidelines Guideline 14 Ensure that Documents are Clear & Simple Use Clearest & Simplest Language Appropriate For Site Supplement Text With Graphic or Auditory Presentations Only Where They Will Facilitate Comprehension of Page Create a Style of Presentation that is Consistent Across Pages CIS 1310 – HTML & CSS Three Levels of Emotional Design Behavioral Usability Visceral Appearance “Hardwired” Reflective Branding CIS 1310 – HTML & CSS Underlying Principles of Design Subjective Communication Visual Appeal Objective Utility Engagement CIS 1310 – HTML & CSS Underlying Principles of Design Communication User Interaction First Seconds 10 Seconds Site Must Clearly Communicate Why it is Useful Convince User Site can be Navigated Easily 1 Minute Content is of Real Interest & Value CIS 1310 – HTML & CSS Underlying Principles of Design Communication Clarity Logical Organization Opening Content that can be Scanned v. Read Benefit to User Concisely Stated, Without Extraneous Material Clear v. Obscure Error Free Spelling & Grammar Accurate & Current Link Rot, Link Quality, & Link Descriptions CIS 1310 – HTML & CSS Underlying Principles of Design Communication Legibility High Contrast Color Text Size Typeface Density Use Headings & Lists Images Meaningful Relationship to Content White Space CIS 1310 – HTML & CSS Underlying Principles of Design Communication Readability Understanding Familiar Terms & Phrases Language Vivid Active Personable CIS 1310 – HTML & CSS Underlying Principles of Design Visual Appeal Richness Uncluttered White Space Balance Images Complement Content & Each Other Images High Quality CIS 1310 – HTML & CSS Underlying Principles of Design Visual Appeal Style Suitable for Purpose Convey Mood or Tone Formal/Informal, Youthful/Mature, Playful/Serious Stylistic Elements Fit Together Color Combinations Typefaces Images CIS 1310 – HTML & CSS Underlying Principles of Design Visual Appeal Unity Organization Consistency & Repetition Color, Navigational Elements, Logo Makes Each Page Appear to be Part of the Whole Creates a Sense of Order Immediately Obvious Which Elements Relate to Each Other CIS 1310 – HTML & CSS Underlying Principles of Design Utility Intuitive Interface Easy to Use Clear as to How to Perform Tasks Predictable Lack of Frustration Successful Accomplishment of Tasks CIS 1310 – HTML & CSS Underlying Principles of Design Utility Navigability Clearly Identified Links Describes Link Destination Should NOT Have to Backtrack to Home Where You Are, Where You Can Go, Where You’ve Been Logical Organization of Content CIS 1310 – HTML & CSS Underlying Principles of Design Utility Value What is Benefit for User? Remember Site Return Visitors CIS 1310 – HTML & CSS Underlying Principles of Design Engagement User Awareness Types of Visitors Site Hopes to Engage Anticipate What Users Want & Expect Clearly Recognize Benefits CIS 1310 – HTML & CSS Underlying Principles of Design Engagement User-Centered Purpose Does the Site Have a Purpose? Knowledge Decision Support Accomplishing Tasks Interconnectedness Enjoyment Is Purpose Immediately Apparent? CIS 1310 – HTML & CSS Underlying Principles of Design Engagement Interpersonal Rapport Visitors Feel Comfort Trust Understanding Duration Return to Site? CIS 1310 – HTML & CSS Typography (Sans Serif v. Serif) Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. CIS 1310 – HTML & CSS Heading / Body Size Contrast Lorem Ipsum Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. Nam faucibus nulla nec nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. Nam faucibus nulla nec nulla. CIS 1310 – HTML & CSS Headings (Fewer & Larger) Lorem Ipsum Dolor Sit Amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. CIS 1310 – HTML & CSS Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est. Subheads As Named Anchors Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Dolor Sit Amet Nam faucibus nulla nec nulla. Praesent porttitor ultricies eros. Nam mauris. Proin augue libero, convallis non, hendrerit sed, condimentum at, magna. In convallis, ligula ac interdum adipiscing, lorem leo ultrices dolor, id tincidunt odio dolor at nibh. Aliquam nisl ante, vestibulum sed, ultricies a, ullamcorper id, turpis. Pellentesque quam lacus, dapibus vitae, interdum at, viverra non, orci. CIS 1310 – HTML & CSS Leading Lorem ipsum Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper http://www.typetester.org/ CIS 1310 – HTML & CSS mattis pede. White Space Space Between Visual Elements The Part of the Design that “Isn’t” There Just as Important as the Elements that are There CIS 1310 – HTML & CSS Graphic Placement Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et. CIS 1310 – HTML & CSS Graphic Cropping (Visual Impact) CIS 1310 – HTML & CSS Layout (Conservative / Dynamic) Well-defined, rectangular areas on the page Overlapping panels Warm greens accompanied by cool blues Imagery evokes customer service & technology Balance intimacy with professionalism Entertain the eye & communicate innovation CIS 1310 – HTML & CSS Balance (Symmetrical / Asymmetrical ) Provide Sense of / Lack of Equilibrium Create Tension & Visual Weight Use of Approximate Horizontal Symmetry Imagery Incorporates Good Amount of White Graphic Text is Thin & Unobtrusive Elements Blend into Background Not Dominant in Any One Place Subtle Greens Used Sparingly CIS 1310 – HTML & CSS Diagonal Balance Upper Left to Lower Right POA (Primary Optical Area) to TA (Terminal Anchor) Natural Eye Movement LOGO LOGO Use Color to Draw Attention Guides the Eye Creates Focal Area CIS 1310 – HTML & CSS Button Dominance Emphasis & Visual Weight in a Composition Where the Eye is First Led to When Looking at a Design Right-most Column is Dominant Largest Area of Color Uses Big, Reversed Text for Major Headings Center Column is Subdominant Uses Less Color & Smaller Text in Less Space Left-most Column is Subordinate CIS 1310 – HTML & CSS Writing for the Web Legibility See, Distinguish, Recognize Characters/Words in Text Typeface No More Than Three Different Fonts No More Than Four Colors Use a Reasonably Large Default Font Size Even Larger for Young Children & Seniors Users Aged 65+ Are 43% Slower at Using Websites Sans-Serif Easier to Read on Monitor Verdana Most Readable Online Typeface CIS 1310 – HTML & CSS Writing for the Web Legibility Contrast Black on White Preferable Use Grayscale to See if Content is Discernable Subtle Background Color Blindness 8% Men, 5% Women CIS 1310 – HTML & CSS Writing for the Web Legibility Low Contrast Legibility Suffers Discoverability and Findability Are Reduced Mobile Use Becomes Even More Difficult Accessibility Is Severely Reduced Users With Low Vision or Cognitive Impairments Cognitive Strain Increases CIS 1310 – HTML & CSS Writing for the Web Readability Complexity of Words/Sentence Structure in Content Use Plainspoken Words Use Short Sentences Reading Monitor 25% Slower than Paper Web Content Should be About Half of Print Content Start Sentences with Verbs More Impact CIS 1310 – HTML & CSS Writing for the Web Readability Write in Active Voice Aim at an 8th-grade Reading Level Aim at a 12th-grade Reading Level If Targeting Broad Consumer Audience For Educated or Specialized B2B Audience Use Specialized Terminology for Specialized Audience CIS 1310 – HTML & CSS Writing for the Web Comprehension Understand Intended Meaning & Draw Correct Conclusions User-centric vs. Maker-centric Language Focus on Benefits of Product / Service, Not Features Avoid Industry & Business Jargon Speak to Your Readers, Not at Them “You” and “We” Instead of “Our Customers” or “Company X” 30-day money-back satisfaction guarantee entitles customer to a refund of installation fees and first month’s Cox High Speed Internet service fee and modem charge if purchased from Cox and excludes other Cox service fees. Customer must claim refund within 30 days of service activation. Other restrictions may apply. CIS 1310 – HTML & CSS Writing for the Web Scannability 79% Scan v. Read Visitors Average 27 Seconds on a Web Page Visitors Average 1 Minute 49 Seconds on a Web Site Average User Reads Only 20% of Page Short Paragraphs < 5 Sentences Short Sentences < 20 Words CIS 1310 – HTML & CSS Writing for the Web Scannability SubHeads Bulleted Lists Bullet List Read More Often than Without (70% vs. 55%) Sorting Highlighting & Emphasis Don’t Confuse with Hyperlinks CIS 1310 – HTML & CSS Writing for the Web Scannability Occasionally Break Grammar Rules on Websites for Clarity Use Sentence Fragments Show Numbers as Numerals For Numbers up to a Billion One Sentence Paragraphs Use Exclamation Points Users Miss Subtle Enthusiasm in Content Eyetracking Reveals Users are Attracted to Exclamation Points CIS 1310 – HTML & CSS Writing for the Web Scannability Paragraph # Visitors Viewing Paragraph 1 81% 2 71% 3 63% 4 32% Spell Check / Grammar Proofread Other than Author CIS 1310 – HTML & CSS Writing for the Web Plain Language Inverted Pyramid General Start with Overview One Idea per Paragraph Detail Only First Sentence Read Most Important Point Within First Two Lines of Paragraph Terminology Consider User Demographics FedStats.gov: Metropolitan Area v. City CIS 1310 – HTML & CSS Priming Exposure to a Stimulus Influences Behavior in Subsequent, Possibly Unrelated Tasks Interface Can Prime User Behavior / Expectations Promotion Code field primes users to search for a coupon CIS 1310 – HTML & CSS Images of young children misleads users to think it does not cater to older children Color Eye’s Response to Wavelengths of Radiation Hue, Value, Saturation All Hues Brought Down to a Mid-range Value Surrounded by Red & Orange Plays Off of Natural Complements Very Warm, Very Rich Set of Tones Feel Full & Vibrant http://paletton.com/ CIS 1310 – HTML & CSS Color Color Wheel Based Schemes Monochromatic – Shades / Tints / Tones of a Color CIS 1310 – HTML & CSS Color Color Wheel Based Schemes Analogous – Adjacent Colors CIS 1310 – HTML & CSS Color Color Wheel Based Schemes Complentary – Opposite Colors CIS 1310 – HTML & CSS Color Color Wheel Based Schemes Triadic – Three Equidistant Colors CIS 1310 – HTML & CSS Color Color Wheel Based Schemes Tetradic – Two Complementary Sets of Colors CIS 1310 – HTML & CSS Color Psychological Response Red Power, Energy, Warmth, Passion, Aggression, Danger Green Nature, Health, Renewal, Good Luck, Jealousy Problems in Global Market Blue Trust, Conservative, Security, Order CIS 1310 – HTML & CSS Color Psychological Response Yellow Optimism, Hope, Cowardice, Betrayal Purple Sacred Color to Hindus Spiritual, Mystery, Royalty, Arrogance Orange Energy, Balance, Warmth Signifies a Product is Inexpensive in the US CIS 1310 – HTML & CSS Color Psychological Response Brown Earth, Reliability, Comfort, Endurance Successful Food Packaging in US Poor Sales in Columbia Gray Intellect, Future, Modest, Sadness, Decay CIS 1310 – HTML & CSS Color Psychological Response White Purity, Cleanliness, Precision, Innocence, Death Signifies Marriage in the US Signifies Death in India, Other Eastern Cultures Black Death, Mystery, Fear, Unhappiness Packaging Power, Sexuality, Sophistication, Elegance CIS 1310 – HTML & CSS Shape Psychological Response Rectangle Order, Logic, Containment Circle Connection, Community, Wholeness Female Warmth, Comfort, Sensuality, Love Triangle Energy, Power, Law, Science, Religion Male Strength, Aggression, Dynamic CIS 1310 – HTML & CSS Branding Signifies Goods/Services Name Slogan Logo Something That Won’t Come Off in the Wash CIS 1310 – HTML & CSS Branding Functional — Objective, Logical, Practical Communicate Recognition & Recall Differentiate Emotional — Subjective, Emotive, Creative Personality Add Value Attractive CIS 1310 – HTML & CSS Branding General Leo Burnett Nike v. Adidas Logitech Michelin v. Firestone FedEx CIS 1310 – HTML & CSS Branding Web Principles Consistency Logo Tagline Navigation Color Scheme CIS 1310 – HTML & CSS Branding Web Principles Characters Simple Stylistic Trend Permeates Site to Thematically Unite It Element of Logo Used Next to Header Text Used as Bullet Marker CIS 1310 – HTML & CSS File Size Page Size = HTML + Objects 10 Second Threshold Bailout — Users Who Don’t Wait For Full D/L Slow or Broken Links Unable to Find Data Unable to Find Company Data Limited Search Functionality Poorly Labeled Links CIS 1310 – HTML & CSS Resolution Desktop Resolution 1024x??? - 6% 1280 x ??? 10% 1366 x 768 + 84% w3schools 1/16 Optimize For 1440 Pixel Widescreen Monitors Percentage v. Fixed Width CIS 1310 – HTML & CSS Page Layout Design Wireframe Layout of Web Page Depict Containers for All Major Page Elements & Functionality Navigation Images Content Functional Elements (e.g., Search) Footer Created for Home Page Each Unique Second Level Page Any Other Significantly Different Page On Site CIS 1310 – HTML & CSS Page Layout Design Techniques Fixed Fixed-width Can Be Left Aligned or Centered Configured with a Fixed or Percentage Width Fluid AKA Liquid Expands to Fill Browser Window at All Resolutions CIS 1310 – HTML & CSS Mobile Web Design Approaches Develop Separate Site Separate Site Hosted within Same Domain Use .mobi TLD m.domain.com Use Responsive Design CIS 1310 – HTML & CSS Mobile Web Design Considerations Small Screen Size Low Bandwidth Font, Color, & Media Issues Awkward Controls, Limited Processor & Memory Functionality CIS 1310 – HTML & CSS