Todays Lesson: Three Important Themes for Designing Web

Todays Lesson: Three Important Themes for Designing Web Sites All web pages have signs that communicate messages to their audience. This lecture looks at the design of web pages in 3 themes associated to signs. 1. Design for the context of use 2. Design for the user experience 3. Design for balancing simplicity and enrichment In this presentation there are purple slides titled

your turn. Please do those with your team and hand in the teams report in D2L folder called Sept 20. SWE 4783 Content and Signs in Web sites Sept 20 1 Exploring Content in web sites Lets visit a company web site. Microsoft

10 years ago for Japan 10 years ago for France 2 yrs ago for US 2 yrs for Japan 2 yrs for France SWE 4783 Content and Signs in Web sites Sept 20 2 Microsoft Japan Site SWE 4783 Content and Signs in Web sites Sept 20 3

Microsoft France Site SWE 4783 Content and Signs in Web sites Sept 20 4 2 yrs ago Site SWE 4783 Content and Signs in Web sites Sept 20 5 2 yrs ago Japan Site SWE 4783 Content and Signs in Web sites Sept 20

6 2 yrs ago France Site SWE 4783 Content and Signs in Web sites Sept 20 7 YOUR TURN Visit and screen shot your Current site Capture initial page Document what signs you see

List what you think you can do Then explore two of those things to do SWE 4783 Content and Signs in Web sites Sept 20 8 What Do We Mean by Context? That which weaves together: Inter-relationships of objects and activities Achieving a coherent whole That which surrounds:

In the physical world A collection of increasingly larger neighborhoods On the web The The The The The web web web web web

extrinsic environment user genre site page SWE 4783 Content and Signs in Web sites Sept 20 9 In the Physical World ET K R A M R o re

E t P S of SU n tio F Dry S ood ec i sl A s

ea T s s& e e e e f f ff Co Co e ate n

i e ff a c De ffee Co d rs lge ted Fo feina f ca fee De Cof

SWE 4783 Content and Signs in Web sites Sept 20 10 Contextual Order of Supersession for Design Decisions Si te Us er Th e e

Th re n e G Pa ge Genre ic s ri n xt v En

nm o ir t en User Context e Th E Extrinsic Environment Site SWE 4783 Content and Signs in Web sites Sept 20

11 SWE 4783 Content and Signs in Web sites Sept 20 12 SWE 4783 Content and Signs in Web sites Sept 20 13 SWE 4783 Content and Signs in Web sites Sept 20 14 SWE 4783 Content and Signs in Web

sites Sept 20 15 SWE 4783 Content and Signs in Web sites Sept 20 16 SWE 4783 Content and Signs in Web sites Sept 20 17 YOUR TURN Examine your Current site Document

the objects of the site Notice and comment on the Interrelationships of objects and activities Does the page achieve a coherent whole? Explain Give the concentric circles of your exploration in the site SWE 4783 Content and Signs in Web sites Sept 20 18 What to Consider When Designing For Context 1.

2. 3. The environment The genre The look and feel SWE 4783 Content and Signs in Web sites Sept 20 19 Designing for the Environment The user environment Physical space Cognitive space

The site environment Mental models Metaphors SWE 4783 Content and Signs in Web sites Sept 20 20 Structural Representation of the Munich Subway System SWE 4783 Content and Signs in Web sites Sept 20 21

Functional Representation of the Munich Subway System SWE 4783 Content and Signs in Web sites Sept 20 22 Designing for Genre Context SWE 4783 Content and Signs in Web sites Sept 20 23 Web Genres & Subgenres GENRES

NEWS SHOPPING INFORMATION ENTERTAINMENT SUBGENRE S Broadcast TV Newspaper Magazine I. Product Sites II. Service Sites (a) Travel

(b) Consulting (c) Real Estate Tourism Education Career Web Site Development Hobby Government City/Local Medical Business Intranet Online Video Games Casino Games Sweepstakes Fan/Celebrities Movie

Music SWE 4783 Content and Signs in Web sites Sept 20 24 Designing for Genre Context Content Expression Form SWE 4783 Content and Signs in Web sites Sept 20 25

News Content: Headlines of Major Current Stories SWE 4783 Content and Signs in Web sites Sept 20 26 Genre - Higher Education Content: Relevant Words & Pictures SWE 4783 Content and Signs in Web sites Sept 20 27 Genre - Expression & Content: Entertainment

SWE 4783 Content and Signs in Web sites Sept 20 28 Genre - Content for Shopping: Pricing Scentimentals Scentimentals Perfumes America Perfumes America Perfumes America Perfumania.com

Perfumania.com SWE 4783 Content and Signs in Web sites Sept 20 29 Defining Content by Pictures and Words SWE 4783 Content and Signs in Web sites Sept 20 30 Genre Expression for Newspaper Subgenre: Photographs & Text SWE 4783 Content and Signs in Web sites Sept 20

31 Genre Expression for E-shopping Subgenre: Stylized Pictures SWE 4783 Content and Signs in Web sites Sept 20 32 Genre Expression for E-shopping Services Subgenre: Icons, Representing Services & Links SWE 4783 Content and Signs in Web sites Sept 20 33

Genre Expression: Medical Subgenre SWE 4783 Content and Signs in Web sites Sept 20 34 Sample of Genre Characteristics Genre: NEWS Characteristics Content Expression Form

Traditional News programming & newspaper categories include: Highly Textual Information Feature Story in Top Center Textual Links Maximized for easy reading, black text on white - Current News - International News - National News - Sports News - Financial - Breaking Stories

Photographic Images - Archived Stories Long Pages Conservative Colors-navy blue, whites, gray, pages are dense, little white space Time and date determine importance, older stories toward bottom of page Sites are Medium to Large (# of pages) Necessary to scroll Grid with Regular Columns - Multimedia Enhancements

(video or audio clips) SWE 4783 Content and Signs in Web sites Sept 20 35 Sample of Genre Characteristics Characteristics Content Expression Form Information and Product Goods Iconic Images

Select Goods Featured in Center of the Page Genre: SHOPPING Not Textual Product Information Multimedia Content Unified Design (Branding Prominent) Maximized for Easy Browsing Short Pages Transaction Pages Customer Service

Information Bright Colors, Pastels Model Welcoming Quality of Traditional Shopping Environments Sites are Full Range, Small to Very Large (# of Pages) Limited Scrolling Required Advertisements More White Space Categories Model Traditional Shopping Environment SWE 4783 Content and Signs in Web sites Sept 20

36 Sample of Genre Characteristics Genre: INFORMATION Characteristics Content Expression Form Tips or Articles Highly Textual Information Tutorials

Textual Links Maximized for Easy Reading, Black Text on White Background Stories Photographic Images Long Pages Releases Dense Pages Sites are Full Range, Small to Very Large (# of Pages)

Data Little White Space Necessary to Scroll Statistics SWE 4783 Content and Signs in Web sites Sept 20 37 Sample of Genre Characteristics Genre: ENTERTAINMENT Characteristics Content

Expression Form Large Multimedia Files Iconic and Photographic Images Main Feature Centered and Highlighted Not Textual Short Pages Advertisements

Bright Colors, More Design Focused Sites are Full Range, Small to Very Large (# of Pages) Limited HTML Text Animations Limited Scrolling Required Sales Pitch Language Banner Advertisements Prominent Graphic Images Transaction Pages

SWE 4783 Content and Signs in Web sites Sept 20 38 Three Important Themes for Designing Web Usability Design for the context of use Design for the user experience Design for balancing simplicity and

enrichment SWE 4783 Content and Signs in Web sites Sept 20 39 Designing for the Look and Feel The web site context Positioning the content Speeding up the response time Smoothing the navigation SWE 4783 Content and Signs in Web sites Sept 20

40 Positioning the Content SWE 4783 Content and Signs in Web sites Sept 20 41 CNNs Sub-site Pull-down Menu SWE 4783 Content and Signs in Web sites Sept 20 42 CNN.com Europe Pull-down Menu SWE 4783 Content and Signs in Web

sites Sept 20 43 YOUR TURN Content using screen shots -Comment on the Content of the 3 pages visited Expression give the expression available in the pages Form what are the characteristics of the form in the pages? SWE 4783 Content and Signs in Web sites Sept 20

44 Smoothing the Navigation SWE 4783 Content and Signs in Web sites Sept 20 45 Smoothing the Navigation: Site Map SWE 4783 Content and Signs in Web sites Sept 20 46 Smoothing the Navigation: Icons SWE 4783 Content and Signs in Web

sites Sept 20 47 Web page with History Trail SWE 4783 Content and Signs in Web sites Sept 20 48 Site with Search Engine SWE 4783 Content and Signs in Web sites Sept 20 49 Metacrawler Site with

Multiple Search Choices SWE 4783 Content and Signs in Web sites Sept 20 50 YOUR TURN The last 5 slides showed examples of either content, expression, or form. Present two examples from your site. SWE 4783 Content and Signs in Web sites Sept 20 51

Designing for the Look and Feel The web page context must be Consistency Coherence Information placement SWE 4783 Content and Signs in Web sites Sept 20 52 A dCluttered Page oo FoodRightNow.com

F ies d o tr Go duspresents In Fast Food On the Web Home About Us FRN.com Good Food Indus. For Investors Menu Cheeseburger Meal Hamburger Meal

BBQ Sandwich Meal Chicken Sandwich Meal French Fries Taco Meal Onion Rings Pizza Why Invest? Latest Numbers. New Shakes and Ice Cream

Soda and Other Drinks Desserts Great Careers Why FRN.com? Job Openings More Food Foods To Be Added. Our Suppliers Cities We Serve Atlanta.Go! New York.Go! Los AngelesGo! San Fran.Go! BostonGo! Wash., DCGo!

Corporate Sponsors Good4U Soda Click Here!! Our Menu About Us FoodRightNow.com is Coming soon to the following cities: Detroit.Go! Chicago.Go! Kansas CityGo! Houston.Go! DallasGo! BaltimoreGo!

FoodRightNow.com is great for parties! Click Here For Details! For Investors Our Mission August 11, 2014 Our Vision Based in Atlanta, Georgia, FoodRightNow.com was founded on the concept that consumers want the ability to order fast food via the web and delivered straight to their door See More FoodRightNow

will be appear at the following trade shows: New Food Technologies Conference Detroit, MI Aug. 31, 2001 E-Commerce Hear Radio Ad Tends Show Toledo, OH Did you know that FoodRightNow.com Sept. 19, 2001 has been featured in various food trade journals, newspapers and business Food magazines? We will even be featured Innovations

on TV Read More Show Waukesha, WI Oct. 28, 2001 We always offer special coupons. If you In the News order Today and receive 20% off your next order of over $15.00. Dont forget, FoodRightNow.com is a great for parties! Complete Our Survey Win Free Food!!!! Great Careers More Learn More Click Here

To see behind the scenes at FoodRightNow.com! SWE 4783 Content and Signs in Web SeptMission 20 Food Cities We ServesitesOur Tickets Click Here od o d Ftries o Go dus In 53

In The News Learn More A Well-Organized Page SWE 4783 Content and Signs in Web sites Sept 20 54 Page with Effective Use of White Space SWE 4783 Content and Signs in Web sites Sept 20 55 Homepage with Most Requested Information at Top

SWE 4783 Content and Signs in Web sites Sept 20 56 YOUR TURN Last one! Present two examples from your site that show balancing simplicity and enrichment. SWE 4783 Content and Signs in Web sites Sept 20 57 Conclusion: Three Important Themes

for Designing Web Usability Design for the context of use Design for the user experience Design for balancing simplicity and enrichment SWE 4783 Content and Signs in Web sites Sept 20 58

Recently Viewed Presentations

  • COCCIDIA (SPOROZOA) Coccidia are members of the class

    COCCIDIA (SPOROZOA) Coccidia are members of the class

    Malaria parasites in thick and thin blood films are best stained at pH 7.1 - 7.2 using a Romanowsky stain The thick film is a concentration method that may be used to detect the presence of organisms. The thin film...
  • Data Recombination for Neural Semantic Parsing

    Data Recombination for Neural Semantic Parsing

    Adversarial evaluation. Question: The number of new Huguenot colonists declined after what year? Paragraph: The . largest portion of the Huguenots to settle in the Cape arrived between 1688 and 1689…but quite a few arrived as late as
  • THE KINGDOM PROTISTA The Algae ALGAL CHARACTERISTICS  grass

    THE KINGDOM PROTISTA The Algae ALGAL CHARACTERISTICS grass

    Phylum Rhodophyta"red algae" multicellular. pigments: phycobilins, carotenoids. stores food as starch. calcium carbonate, cellulose, and pectin cell walls. sexual reproduction. marine algae that help produce reefs and islands. used to produce . agar . a gelatinous substance used in growing...
  • Power Iteration Clustering - brenocon

    Power Iteration Clustering - brenocon

    Power iteration clustering (PIC) can provide a similar solution at a very low cost (fast)! The Power Iteration Or the power method, is a simple iterative method for finding the dominant eigenvector of a matrix:
  • The Power of the NPT: International Norms and Nuclear ...

    The Power of the NPT: International Norms and Nuclear ...

    However, the nuclear inheritances of the non-Russian successor states were nevertheless staggering. While non-Russian republics lacked some key elements of a nuclear weapons program, like uranium enrichment or plutonium reprocessing, or warhead production, their technological and scientific ...
  • Digestion - San Diego Miramar College

    Digestion - San Diego Miramar College

    Hormones in the GI Tract Regulate Digestion Hormones regulate digestion by controlling: Release of gastric and pancreatic secretions Peristalsis Enzyme Activity Enterogastrones are produced and secreted by the cells lining the stomach and small intestine.
  • Ionizing Radiation - X-Ray Imaging

    Ionizing Radiation - X-Ray Imaging

    The differential absorption of the x-ray by the tissue is the cardinal features that lead to image formation. There are special terms we use in x-ray reports these include radiopaque, radiolucent, high attenuation, low attenuation and water density. Radiopaque and...
  • Présentation PowerPoint - ENSEEIHT

    Présentation PowerPoint - ENSEEIHT

    Premières session. Deuxième session. Métrologie. Transferts en milieu poreux. Master de recherche HHSE. CHARGES EXTERNE PAYEES AU DEPARTEMENT. UNIX. MFN_UNIX. ETD réel. MMNI. HMKF. HCHA. HSUL. MYHD. STAT. INP-9-Méthodes numériques et interfaces déformables D. Legendre. HYDVOIL. Riboux. Totaux du semestre...