Visual and Information Design
Contents
1. amd A Tes dorem um Echt ee ee ies ss Hee Bob ES ee Se Oe eee Bee eee Hs uH ope pii eee di alum ee we mr Hed ur ee Und eee See Lee eee a ee pes on rec amni gr m CS 464 Human Computer Interaction BP ie Te peh ee ee EE IS du mS ep ee See eee er ON Page layout Fixed vs flexible 2 5 Variable width containers reflow to fill the browser window Fixed width containers maintain their dimensions regardless of the browser window Slide 54 Page layout Fixed vs flexible 3 5 Fixed layout Advantages Maximum control over page layout and design Much easier to implement than flexible especially when designing graphics in Photoshop The content area can be designed to narrow the line lengths in which content is presented which is easier to read Tabs in browsers are becoming increasingly common so rarely do users resize the browser window Maximized windows seem but not definitely to be the usual setting Disadvantages CS 464 Human Computer Interaction Users with lower resolutions or monitor sizes might have to use the very annoying horizontal scrollbar Real estate will go unused for users with larger monitors and higher resolutions than the fixed width You can avoid the wasteland effect of a fixed layout by center2. 2 961 Comment Mead 189 Beene Gealbook sytimes com Lede Reaction in en Were Egypt 527 PvE i Xc QUOTES Head on Economy F s RARDARO 67 metes Candidates Go Head Ds 43 2PER eed MICIHAI With Justices Set to Rule on Health Law 2 Parties Strategize WAN ana that the election would turn on Mitt Romney who was also in revival President Obama ackmowledg the divergence between him a Ohio on how to achieve econon ty JONATHAN WE MALL HEAR s Comment Read 203 If the measure is not thrown out House Republicans plan Romney Says Obama s Don t Match Words to force repeal vote while top officials at the White House are projecting confidence that the justices will rule in their favor of Neanderthals Tests Put Cave Art in the 2 NOBLE WILFORD are far older of them more said Paintings on cave walls than 40 000 years old scientist than previously thought ieterectve How the Supreme Court Cou Rut U N Monitors Find Vast Devastation in Syrian Village ONE 316 Xerox amp rmany s Strength NER 66 w Merkel Stresses Limits to NOHOLAS SH sitet 22 the country Chanerllor Angela Merkel told C te OVIES Stores were cannot prop up the faltering zone looted and
3. Give users direct access 1 2 Provide the user with the information they want in the fewest possible steps and in the shortest time Design an efficient hierarchy of information to minimize the number of steps through menu pages nterface studies have shown that users prefer menus that present a minimum of five to seven links and that users prefer a few very dense screens of choices over many layers of simplified menus CS 464 Human Computer Interaction Slide 79 Give users direct access 2 2 n the table below note that you do not need many levels of menus to incorporate large numbers of choices Humber of menu items listed A z D 10 z 2 5 49 64 100 B 125 343 512 1000 CS 464 Human Computer Interaction Slide 80 Chunking information 1 2 Long before the Web was invented technical writers discovered that readers appreciate short chunks of information that can be located and scanned quickly This method for presenting information translates well to the Web for several reasons Few Web users spend time reading long passages of text on screen Most users either save long documents to disk or print them for more comfortable reading Discrete chunks of information lend themselves to Web links The user of a link usually expects to find a specific unit of related information not a whole book s worth of information to filter through But don t subdivide your
4. CS 464 Human Computer Interaction 1 2 Information hierarchies are the best way to organize most complex bodies of information Because Web sites are usually organized around a single home page hierarchical schemes are particularly suited to Web site organization The simplest form of hierarchical site structure is a star or hub and spoke set of pages arrayed off a central home page The site is essentially a single tier hierarchy Navigation tends to be a simple list of subpages plus a link for the home page im 1 CS 464 Human Computer Interaction Slide 90 2 2 Most web sites adopt some form of multitiered hierarchical or tree architecture This arrangement of major categories and subcategories has a powerful advantage for complex site organization in that most people are familiar with hierarchical organizations and can readily form mental models of the site structure Although hierarchical sites organize their M ran content and pages in a tree of site menus and submenus off the home page this hierarchy of content subdivisions should not become a navigational straitjacket for the T T user who wants to jump from one area of the site to another Li JEN JN UN Most site navigation interfaces provide global navigation links that allow users to jump from one major site
5. 24 Ae bees sd mos revere et pees pa ce re lee LA m P eo nc CS 464 Human Computer Interaction Slide 49 Page layout considerations 1 3 Line length Research shows that reading slows and retention rates fall as line lengths begin to exceed the ideal width Quantitative studies show that moderate line lengths significantly increase the legibility of text Try to limit the line length ideally to ten to twelve words per line Margins Margins define the reading area of your page by separating the main text from non text elements such as interface elements and other unrelated graphics Margins also provide contrast and visual interest Take advantage of the options CSS provides to establish margins and use them consistently throughout your site to provide unity CS 464 Human Computer Interaction Slide 50 Page layout considerations 2 3 Source W3Counter March 2013 Screen Resolutions 1366x768 19 28 1024x768 12 26 1280x800 9 55 1280x1024 6 49 1920x1080 5 2496 1440x900 5 69 320x480 4 99 T08x1024 4 54 1600x900 4 0096 1680x1050 3 0896 Source W3Schools Screen Resolution Statistic Screen Resolution Today most visitors have a screen resolution higher than 1024x768 pixels StatCounter Global Stats Top 10 Screen Resolutions from April 2011 to March 2012 Cou
6. m pee ee ere ee er ie emg eerie ere oe eee eee goa eo fare spade uS Pa eee seed daii eee ee ee ee Mo imo ee Uum orum eee 8 ee Lili fl Ln Lele ee ee Fue ee ee Ge Poe eee rug pEaurum hamd ee eee ee ei glee ka aum ehm ese Gib oda ee ee ee bau ED mdi ox Kr ee eran ee eee ost Bee erl Hane ees ee Hacia em ims om mmm ae amgm ee s iuri gn bru peer aud eee berum Seang ee ap Lue s 7 m od BE ded od Ta Sygped jd eibi dama pde m c do fi ue Na He ee Pa ee lema o PET LI eee SLIMM 07 MEI 1E I cep amem Ea dE euro p ee 1 Ham mp Fep gig e odo ie ge egg dee baf el enm en gg cce commo piopoacqne eMe mms kes gis mss m mas pope n sede beu sare ber am n GU Wd ee ee ima piar Pom Nomada pit ana p eee cb beu LIJI LM ILMILILOEMLOILILILOE LES EMI Amr ue duy Aaa we a ha prem acid Sees rg Wage hg
7. salt LO Ths 1 1 74 sticks chilled unsalted butter cut inte places 2 egg lightly beaten with 1 The water L jar 258 66 Leman Curd or min eme at tart filli Whippad meringue fresh fruit or candied ginger for garnish in the bowl of a food combine the flour tugar and pak snd pulse to min Add the butter and proces in short until crumbe form 20 25 geconds While pulzing add the valk mixture and proceeds form larga maise crumbs LO to 15 seconds mare Turn the dough out anto a lightly flawred surface shape i the dough into ball and divide it in half Shape each Cuiginart PowerPrep Plug Feod half inta flat dick cower with plastic wrap and m Procezizor Chrome refrigerate at east 1 hour 399 00 Position a rack in the canter of an oven and preheat to 400 Working with one piece of dough at 4 time roll out te Lideinch Using Tinch round cockia RE SAT o cutter 12 rounds of pastry Trangfer round t Regulan 2 taler 18 99 wall of LZ wall mini tart plaque er misi emulfzn pan Using your fingers prasa the pastry to into the well Bake until the tart shells are evenly geldan and crisp L8 to 22 minutes Cool the tart shells in the plague for 5 minutes then remove from the plaque and cool te roam temper tart Fill each tart zhell with 1 L
8. Computer Interaction Slide 45 Page layout Introduction 2 2 s Unlike a printed document which is fixed in its medium the look of a Web page depends on such elements as the display size resolution and color settings the height and width of the browser window software preferences such as link and background color settings and available fonts Indeed there is no way to have complete control over the design of a Web page The best approach then is to design flexible pages that are accessible to all users One of the visual properties that Cascading Style Sheets are meant to describe is how elements are positioned on the page Style sheet positioning should provide all the design control needed to lay out visually appealing and legible Web pages n practice however there are a few browser inconsistencies that the designer should take into consideration See http www glish com css CS 464 Human Computer Interaction Slide 46 Page layout Don t use tables Tables existed in HTML for one reason To display tabular data But then border 0 made it possible for designers to have a grid upon which to lay out images and text Still the most dominant means of designing visually rich Web sites the use of tables is now actually interfering with building a better more accessible flexible and functional Web Table based pages are much less accessible to users with disabilities and viewers using
9. ocupan partion Aburrbez in bassa whine Gn cunis Eamge csl a ELAPAPAEFIG ph icamunca filmes hut uk rst gi deoa ace bbc B cp gs eee ks fc oo La Tn i18 4 mo SC AT LOPRPED HANTETPIHE AD x phi yrma urs re Hga himno Ioa ie thy aM sire inthe Pecan ad cb E nnm the rip Drier koe cara noue uo bum cic Ais i mi OF T HANTAEPRHEALD s sh pri d ine Lira n rice pc gc amd oop Hoi Lh ba mamie deala Ease odgse of head eth A FE head wr ipae appear Gack od ge of perse wc ry aane Moh Garcia ti mast an ipic Ek in zx Ti 1 Computer Interaction OR THRESHERA HAN EROH D APER S cada are wu CA LEP io iur us gt i IWE bre Ay m ee bg ele el oe Design grids for Web pages 3 4 Cumis rie Trinlibrss Serer Pee ire Can The sene 2 FLUE ree TXIAML TIL pt OU far pnt Thr menir
10. opping cart clear expectations about where common content and interface elements are likely to appear Violate these expectations at your peril CS 464 Human Computer Interaction Slide 67 Colour Colour vision Aperson with normal colour vision is able to perceive over 7 million different shades of colour But only 8 to 10 different colours can be identified accurately without prior training About 896 of men and 196 of women are colour blind most commonly being unable to discriminate between red and green Atthe periphery the eye is least sensitive to red green and yellow light and most sensitive to blue light Blue is a good background color especially on big screens s At the front of the eye where colour vision is at its best the eye is most sensitive to red and yellow and is least sensitive to blue Small blue objects tend to disappear on the screen and this is especially true where the blue is pale Small changes in shades of blue are difficult to distinguish but the eye is sensitive to small changes in red CS 464 Human Computer Interaction Slide 69 Colour vision considerations Spectrally extreme colours should not be placed together Thus blue and red must never be placed together Last checked 0 minutes ago No mails fetched View history Check mail now Authentication error Mail from this account has not been retrieved since 9 18 am Red orang
11. Bee pred anch I Bac oe part of fa Tesi Hapri abara bri e pope a shk prfermen 4nd cones vis help ee Ges goers eis mA a chege ihe Gash The dei jri gne iir a e ef aen aed ie tasing maris ubl ity ciara Slide 18 Tvpography White space The vertical space a text block is called leading and it is the distance from one baseline of text to the next Leading strongly affects the legibility of text blocks Too much leading makes it hard for the eye to locate the start of the next line Too little leading confuses the lines ndenting paragraphs There are two major schools of thought on denoting paragraphs Theclassic typographic method uses indents to signal the beginning of a new paragraph However many technical reference and trade publications now use a blank line of white space to separate paragraphs Either approach is valid as long as the paragraph style is implemented consistently throughout the site CS 464 Human Computer Interaction Slide 19 Tvpography Type faces 1 2 Each typeface has a unique tone that should produce harmonious fit between the verbal and visual flow of your content A layout that is carefully designed using one face may not format correctly in another n specifying typefaces you should choose from the resid
12. Saver Delivery Amazon Gift Cards with Free One Day Delivery LOOK INSIDE gt Shop now CS 464 Human Computer Interaction Slide 74 Today s Deals web usability Amazon Family Outlet Amazon Prime Gift Cards Help Hello Sign in Join Your Account Mobile Apps Amazon Toolbar Designing Web Usability The Practice of Simplicity by Jakob Nielsen Jan 2000 3400 29 74 Paperback Prime tenis 32 Order in the next 7 hours and get it by Friday Apr 5 Eligible tor FREE Super Saver Delivery Only 3 left in stock order soon Books See all 3 314 items Mare buying choices Paperback 20 02 new 30 offers 0 01 used 87 offers Don t Make Me Think Common Sense Approach to Web Usability by Steve Krug 18 Aug 2005 100 17 49 Paperback Prime Arrr 94 Order in the next 7 hours and get it by Friday Apr 5 Eligible for FREE Super Saver Delivery 21 sell this back for amp mazon co uk Gift Card 15 74 kindle Edition Books See all 3 314 items Available far download now m Mare buying choices Paperback 12 50 new 54 offers 11 72 used 23 offers Prioritizing Web Usability by Jakob Nielsen and Hoa Loranger 20 Apr 2006 2699 30 59 Paperback Prime tetris 5 Order in the next 6 hours and get it by Friday Apr 5 Eligible for FREE Super Saver Delivery Only 3 left in stock order soon sell this back for an Amazon co uk Gift Card Awailable for download
13. Switrerland and Gra Storm 05 PMET feroes Villains and the Smell of Wine and bomes Norris Conspiracy Theories Graphic The Crisis Now nvisible Cheap Perfume abandoned in _ A look at the Tom Cruise Al US Airports a Build m Takes Hold Herings ia the stars in Rock AO VOLUAWAD besieged for days by Syrian forces amd the smell of death hung in the air said United Nations monitors m2 Human ot Ages Sate Show in the midst of that taken gest The nation s biggest airports major renovations or together amount to some af th infrastracture projects in Ame Watch then Festival Solitary Retreat Your Sister s Sister is Lynn Sheiton s new comedy 5 WATCH THE TRAILER NOW Syran Bearng Toy Guns 5 45 Stanford Gets 110 Years in Billion Ponzi Case Slide 44 Page layout Introduction 1 2 HTML was designed by engineers and scientists who never envisioned it as a page layout tool Their aim was to provide a way to describe structural information about a document not a tool to determine a document s appearance Once the real world started to work on the Web graphic designers began adapting the primitive tools of HTML to produce documents that looked more like their print counterparts The point was not to produce jazzier or prettier pages CS 464 Human
14. area to another without being forced to back up to a central home page or submenu CS 464 Human Computer Interaction Slide 91 Web The goal is often to mimic associative thought and free flow of ideas where users follow their interests in a heuristic idiosyncratic pattern unique to each person who visits the site This organizational pattern develops Web sites with very dense links both to other information within the site and information on other World Wide Web sites Webs work best for small sites dominated by lists of links aimed at highly educated or experienced users looking for further education or enrichment not for a basic understanding of your topic CS 464 Human Computer Interaction Slide 92 Site structure summary 1 2 Most complex Web sites share aspects of all three types of information structures Exceptin sites that rigorously enforce a sequence of pages your users likely to use any Web site in a free form web like manner just as they would skip through chapters in a reference book Ironically the clearer and more concrete your site organization is the easier it is for users to jump freely from place to place without feeling lost CS 464 Human Computer Interaction Slide 93 Site structure summary 2 2 The chart below summarizes the three basic organization patterns against the linearity of the narrative and the complexity of the
15. cell phones and PDAs to access the Web Visitors using screen readers as well as those with slow connections do not have to wade through countless table cells and spacers to get at the actual content of our pages Modern browsers are much better at rendering Web standards and you dont need to use these archaic methods any more CS 464 Human Computer Interaction Slide 47 Page layout Use CSS Instead of nesting tables within tables and filling empty cells with spacer GIFs you can use much simpler markup and CSS to lay out beautiful sites that are faster to load easier to redesign and more accessible to everyone By using structural markup in your HTML documents and Cascading Style Sheets to lay out your pages you can keep the actual content of your pages separated from the way they are presented By removing presentational markup from your pages redesigns of existing sites and content is much less labor intensive and much less expensive To change the layout of the site all you need to do is change the style sheets you do not need to edit the pages themselves at all see http www csszengarden com Using Web standards also makes it extremely easy to maintain visual consistency throughout a site Since pages use the same CSS document for their layout they are all formatted the same CS 464 Human Computer Interaction Slide 48 DN 55 Screen Conventional screen display Page as printed
16. colors close to the default Web link colors of blue and violet CS 464 Human Computer Interaction Slide 26 Tvpography Emphasis 3 4 RECIANGLES T acabilitxv danande an tha tane af VLL toe Tnitial Caps Cause Pointless Bumps CS 464 Human Computer Interaction Monotonous Capital letters Capitalized text is one of the most common and least effective methods for adding typographical emphasis Words set in all capitals should generally be avoided because they are hard to scan Words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the eye Down style typing capitalize only the first word and any proper nouns is recommended for large areas of text Down style is more legible because as we read we primarily scan the tops of words Slide 27 Tvpography Emphasis 4 4 Spacing and indentation One of the most effective and subtle ways to vary the visual contrast and relative importance of a piece of text is simply to isolate it or treat it differently from the surrounding text f you want your major headers to stand out more without making them larger add space before the header to separate it from any previous copy Indentation is another effective means of distinguishing bulleted lists or quotations CS 464 Human Computer Interaction Slide 28
17. content Web linked site Complex educated audiences Hierarchical site Sequence site Simple basic content training sites Linear narrative Nonlinear hyperlinked Predictable structure Flexible may be confusing CS 464 Human Computer Interaction Slide 94 Information foraging Informavores try to find and devour information How to get lots of it quickly One of the major attributes that informavores use to guide their searching is what is called information scent Predicting a path s success Links titles and context provide the information scent in a web page CS 464 Human Computer Interaction Slide 95 Detecting poor scent User observation tell tale signs Flailing around the page not knowing what to do or where to look in the page Low confidence Checking their confidence before and after they click on a link Before clicking confidence will reveal whether the link has high scent After the click will reveal if the page beacons the information the user Is trying to get to Back button overuse Major problems in navigation CS 464 Human Computer Interaction Slide 96 Low vs High information scent Links Poor information scent Generic uninformative links Click here Picture 1 Made up words and jargon Slogans designers jargon marketing embellishments Spade digging implement excavation solution Users scan for words they know
18. images are composed by dedicating 74 bits o memory to each pixel eight each for the red green and blue components 85 5 5 24 24 Lbhit true color displays Pixels on thi im P ih pe c Each screen pixel 1s represented by thres groups 01 bres Fog gg 4 64 a 4 E E E r E E E E a eight biis for a total of 24 bits Slide 59 Page length 3 7 Long Web pages do have their advantages however s They are often easier for creators to organize and for users to download Web site managers don t have to maintain as many links and pages with longer documents and users don t need to download multiple files to collect information on a topic Long pages are particularly useful for providing information that you don t expect users to read online realistically that means any document longer than two printed pages s You can make long pages friendlier by positioning jump to top buttons at regular intervals down the page That way the user will never have to scroll far to find a navigation button that quickly brings him or her back to the top of the page CS 464 Human Computer Interaction Slide 60 Page length 4 7 Pathology Department Pediatric Deparment Pediatric Neurology Pharmacology Department Physician Associate Pr
19. in order to provide additional redundant coding for salience CS 464 Human Computer Interaction Slide 72 Example Amazon in Grayscale kindle aMaZON cou Your Amazon co uk Today s Deals GiftCards Help paperwhite gt From 109 shop by T Hello Sign in Join 0 Wish Department search i usability Your Account N nasket List Welcome Warehouse Deals Subscribe amp Save Amazon Family Outlet Amazon Prime Mobile Apps Amazon Toolbar Department web usability Books Computing amp Internet Web Graphics amp Animation Web Design Showing 1 16 of 3 325 Results Choose a Department to enable sorting Designing Web Usability The Practice of Simplicity by Jakob Nielsen Jan 2000 ee 24 99 29 74 Paperback Prime Arriet 32 Web Development Order in the next 7 hours and get it by Friday Apr 5 Eligible for FREE Super Saver Delivery Kindle Store Only 3 left in stock order soon Books See all 3 314 items Web Site Design More buying choices Paperback Computer Programming Designing 20 02 new 30 offers Computer Systems Analysis amp 0 01 used 57 offers Design Computer Graphic Design LOOKINSIDE Don t Make Me Think A Common Sense Approach to Web Usability by Steve Krug 18 Aug 2005 See All 4 Departments Steve Krug eve Kru 5 24 99 17 49 Paperback vPrime Arret 94 Delivery Option whats this DONT Order in the nex
20. most operating systems CS 464 Human Computer Interaction Slide 22 Tvpography Type size 1 2 Setting the size of type is a matter of some controversy The Web is supposed to be a universal medium where users of all kinds have equal access to information For example low vision users can set the type of Web documents to display at a size that they find legible But these adjustments can skew a page layout With the introduction of the FONT tag designers also gained the ability to set the font size The W3C recommends that you let users set the base font size in their browser and that you set all variations using the em unit For example if the user set default is 12 point then a 2 em text indent would be 24 point but if the user used the text zoom feature of the browser to change the size to 16 point the indent would change to 32 point to reflect the larger type size If you try this approach use a flexible page layout that will hold up to large type CS 464 Human Computer Interaction Slide 23 Tvpography Type size 2 2 With a well designed flexible layout the design remains intact even when the text is enlarged Core Story Web content publish or perish ee ee ee ee Suus es ep ee See ee ee ee ee ETE Se Ciz mend id Hd n pd wn hens s inns am pe lae be At Eb Peg domo F
21. now More buying choices Paperback 17 99 new 25 offers 9 27 used 21 offers Kindle gt From 109 L Prime Choose a Department to enable sorting Information Design Organizing information and information scent Steps in organizing information There are five basic steps in organizing your information 1 Inventory your content What do you have already What do you need 2 Establish a hierarchical outline of your content and create a controlled vocabulary so the major content site structure and navigation elements are always identified consistently 3 Chunking Divide your content into logical units with a consistent modular structure 4 Draw diagrams that show the site structure and rough outlines of pages with a list of core navigation links and 5 Analyze your system by testing the organization interactively with real users revise as needed CS 464 Human Computer Interaction Slide 76 hat racks Themes to organize information 1 2 1 Category Organization by the similarity of characteristics or relatedness of the items A particularly useful approach when all the things being organized are of equal or unpredictable importance Examples include topics of books in a bookstore or library and items in a department or grocery store 2 Time Organization by timeline or history where elements are presented in a sequential step by step manner Thi
22. oro Te ncm dan merae fre Tie ne e 81 ie WB Een oim Ear Dunn wee pre HE dee Ten d rpeTi TeE3eEH am Die ees bem erre md Tee eae eee muda d 7 o DOBLE bar fing ar ary Tam im age A rmh ri Peer gc ee PELLE Len abe m br pal Lra nbe pets rap nals T REGI apie bese mera Hee art Pie Tite idl Crepe Ligr n dann Web page on a seventeen inch monitor 1024 x 768 pixels Book spreads are seen as units of two pages Web pages are always single units regardless of monitor size Slide 42 Design grids for Web pages 4 4 Most Web page designs can be divided vertically into zones with different functions and varying levels of graphics and text complexity As vertical scrolling progressively reveals the page new content appears and the upper content disappears First screen ss w Highest priority e lost graphics Highest density links Above the fold Below the told Second screen e Lower priority items Less graphic Density of links less critical Notice the vertical structure of the home page reproduced beside The top screen of information is much denser with links because it is the onl
23. page layouts are not designed with large type in mind For example fixed layouts that limit the text column to a specified width are typically sized to accommodate 12 point type or smaller Indeed at large type sizes a fixed text column may contain only a few words which makes the text awkward to read For adaptable pages use a flexible layout that transforms gracefully to accommodate larger type sizes CS 464 Human Computer Interaction Slide 32 Layout Grids alignment and web page layout Introduction Users seek clarity order and trustworthiness in information sources whether they are traditional paper documents or Web pages The spatial organization of graphics and text on the Web page can engage the user with graphic impact direct the user s attention prioritise information and make the user s interactions with your Web site more enjoyable and more efficient CS 464 Human Computer Interaction Slide 34 Establish a visual hierarchy 1 4 The primary task of graphic design is to create a strong consistent visual hierarchy where important elements are emphasized and content is organized logically and predictably Graphic design is visual information management using the tools of layout typography and illustration to lead the reader s eye through the page CS 464 Human Computer Interaction Slide 35 Establish a visual hierarchy 2 4 s Readers see pages first a
24. scans or other illustrative material and experiment with various arrangements of the elements on the page In larger projects it isn t possible to exactly predict how every combination of text and graphics will interact on the screen but examine your Web layout Sketches against both your most complex and your least complex pages Your goal is to establish a consistent logical screen layout one that allows you to plug in text and graphics without having to stop and rethink your basic design approach on each new page Without a firm underlying design grid your project s page layout will be driven by the problems of the moment and the overall design of your Web site will seem patchy and confusing CS 464 Human Computer Interaction Slide 41 Hook page spread THh ESHERA HAMM DHEA S3 A Pc pul pinza Tha ery tho cauta Gm b clo meu od thy iara po Jc amp Uu rari iB ca Fuori darem un Sor mail pe dac Badger dall od Lares ko E n ET Pow o bn ooa Pal ni summe Bie Ti imo Ala pila Ape ao Hlc Ehe she Foie E FP ry Brea purses geh can Fic o allis Lec ark cip i Fc Pure d aed c n ee Dr Box kc Ba ie eo Piu ron c 8 e io 1 Bi NINE THEA D x ph pna at bina Cras ak eth Eu girl hee naut ixi
25. tool in your Web site The table is more than a list of links it gives the user an overview of the organization extent and narrative flow of your presentation CS 464 Human Computer Interaction Slide 86 Web site structures Web sites are built around basic structural themes These fundamental architectures govern the navigational interface of the Web site and mold the user s mental models of how the information is organized Three essential structures can be used to build a Web site Sequences hierarchies and webs CS 464 Human Computer Interaction Slide 87 Sequence 1 2 The simplest way to organize information is to place it in a sequence Sequential ordering may be chronological a logical series of topics progressing from the general to the specific or alphabetical as in indexes encyclopedias and glossaries Straight sequences are the most appropriate organization for training sites for example in which the reader is expected to go through a fixed set of material and the only links are those that support the linear navigation path CS 464 Human Computer Interaction 88 Sequence 2 2 More complex Web sites may still be organized as a logical sequence but each page in the main sequence may have links to one or more pages of digressions parenthetical information or information on other Web sites Siar Se SS Slide 89
26. CSS Print Page on a cell phone CSS Handheld S comma SEWER AV IT A o du o hos 21 LES Lbs aon got mm umet rnm ry hmm qum moy fy anm ee La wee 7 z ara Jua ny pn domo qnm m dut pa j 2 tensed massere ommo pt rer Vw anm Crete at oe isl Agi deem Mage run mo Hed ee te Me LLLA TLIEIAMI ALL IJI ll mt t wm ny 14 47 sumpt 0 am t clamo rt atom a vm by ek Von Am eoo om ame am oh mtr e Hd vm T eut mcm m 0 mme t ome emm t om cte o m m I Els Aoc Ad addi Penner 22 54 ol qr mtn LOL lll AE fem m amamos rt m im NL lll Sii TA ph ERIE N rmt nm tdm te eter m hmm 2 rb maet 2 iw Img D In o eT AMD emo Pm LA LM loo D wSLLLL eoo codem eee mere oS T OR a o dm em oso o R AQ pahan Tur semi tes di Lame tatg atum imma hus eres manis rabo C o end eats wia ae Aem moo o e Dot nt Bane meee dhe d esha bem m Sere o meet ue mom
27. TYLE OPINION Actos Bogs Books Cartoons Claes fuscis Cro sworda Dining Wire Eoucator Evert Guida Fashion Sty Home amp Garden Jota M agaz ne Dacre Music Obtveres Raal Ext Sonday Review T Magarre on Tranter Travel Wextdirga Colnbrations MULTIME Imie ac oves Photograph Podcasts Valeo TOOLS MORE Aarts Beta amp 20 7 rura tienes Che New York Cimes Thursday June 14 2012 it Ur 209 PY ET Search two A DIRECT Subscribe 10 Home Debvery Personalize You OPINION Kristof From Iran l ersian Translation SundayReview J BROAD jews Analysis Iran s High ard at the Nuclear egotiation Table Court Dissolves Parliament in Egypt in Blow to Islamists DD KINKPATRICNR Editorial Jamie Dimon Greenhouses Proxy War ran has increased uranium 2 Townies Russian Heart carichment and is now 5 minutes ago Egypt s high court which also blessed the presidential bid of Hosni Mubarak s last prime minister Thursday appeared to be engaged in a frontal legal on the Muslim Op Ed How Drones Help Al roducing clase to Qaeda mb grade tee 3 1 Taking Note Gingrich ARKETS 2 08 PM IAP AN A S ang a Brother bcd 8 570 55 1800840 229555 DealB k
28. Tvpography Consistency Asin traditional print publishing high quality Web sites adhere to established type style settings consistently throughout the site Consistency gives polish to a site and encourages visitors to stay by creating an expectation about the structure of a text fsloppy inconsistent formatting confounds this expectation you will confuse your readers and they may not return You should decide on such settings as fonts inter paragraph spacing the size of subheads and so on and then create a written style guide to help you maintain these settings as you develop the site This step is especially critical for large sites that incorporate numerous pages CS 464 Human Computer Interaction Slide 29 Tvpography Accessibility 1 3 When considering type the main accessibility issues are size and color These attributes come into play for users who have vision disabilities such as low vision or color blindness Vision impaired users need to be able to transform text that they find illegible into a format that they can read Low vision users need to be able to increase the type size and set the text and page background colors for maximum contrast Colorblind users also need control over text and background color Scalable text Users cannot easily enlarge text that is set using absolute size values To ensure scalability use relative units Use text graphics sparingly and always offer a t
29. UNIVERSITY OF CRETE FACULTY OF SCIENCES AND ENGINEERING COMPUTER SCIENCE DEPARTMENT COURSE CS 464 OPTIONAL HUMAN COMPUTER INTERACTION Course Convenor Constantine Stephanidis Visual and Information Design Contents Visual Design Vision Purpose The three basic tools of Visual Design Typography Layout Colour Information Design Organizing and structuring information Information foraging and information scent CS 464 Human Computer Interaction Slide 2 Visual Design A minute to learn a lifetime to master gt eager Primary source of information for normally sighted persons Vision Is a two step process 1 Begins with the physical characteristics of the eye which enables us to see objects physical reception of stimulus e objects have to be large enough with enough contrast in a visible colour and so on that the eyes can register them 2 n the second step retinal signals are transferred to the brain processing interpretation of stimulus e once we see an object clearly we have to interpret what we see e g what is this icon CS 464 Human Computer Interaction Slide 4 the capabilities and limitations of visual processing 8 pal The quick brown fox jumps over the the lazy dog CS 464 Human Computer Interaction Movement Pie menu in the game the Sims CS 464 Hum
30. Z The tart filling with whippad craam meringue frezh fruit ar candied ginger Makes LZ tarts CS 464 Human Computer Interaction Slide 38 Grids Designing with grids using grouping and alignment to convey structure 11 e 2 j 11 2 BEES S HEELS aan amt Whole Vit Wrap Around 17 E SS SO E Align related options along column quide Place most important option near the top CS 464 Human Computer Interaction Slide 39 Design grids for Web pages 1 4 Poor page layout no visual hierarchy Better page layout predictable modular clear visual structure Consistency and predictability are essential attributes of any well designed information system When used inappropriately or inconsistently the typographic controls and inlined graphics of Web pages can create a confusing visual jumble without apparent hierarchy of importance Haphazardly mixed graphics and text decrease usability and legibility just as they do in paper pages A balanced and consistently implemented design scheme will increase readers confidence in your site CS 464 Human Computer Interaction Slide 40 Design grids for Web pages 2 4 No one design grid system is appropriate for all Web pages Your first step is to establish a basic layout grid To start gather representative examples of your text along with some graphics
31. aars aci aim Pra ere phe hia dacigs praci nd fered Ge Shee fest thingy Ba WE man Pgs et ie eg ee ei Goma Lange queer ba Heed epee cna cam ber ied 53 eck Enarri Tree Era veg by arpeseiing CPS sach ys dh Vid de yeu predariin da fer paa gos of crei nens ei eil ea Dg vrina DET arm prices ethan wing fo 22 wars lae farebarawilyeuusema3 pies e wins Lo egisti stat ee den i C Cell m ann incl ien ely PRS bul abeo cn ciae maze Fra Tangzl users bona Dei daak Agan wicca des gees dead hew be maka fier andae pam pite Disks eda Whol driwru arid shed las wy jra wg bee gees ou ake dass Tre Das A Pique ribi Eva Coe ieee Der 5a 3 Lar E bae lagu al Sed DE arr weet b far Ere Inoathar 3 Fined cw br 37 simcle 35 piezer rf en mars ar zo mir fes ek rn fad pande Pirang Pa 10 miuhara ere Apriles mas nist oe al Sa fect Ex ell be
32. an Computer Interaction Slide 6 Users find it difficult to manipulate small objects Consequently Targets should generally be as large as possible and the distance to be moved as small as possible This has led to suggestions that pie chart shaped menus are preferable to lists since all options are equidistant However if lists are used the most frequently used options can be placed closest to the user s start point for example at the top of the menu Three goals for visual design s Guide Convey Structure relative importance relationships Pace Draw people in help orient provide hooks to dive deep Message Express meaning and style breathe life into the content CS 464 Human Computer Interaction Slide 7 Three basic tools of visual design Typography Whitespace Weight and scale Typefaces Layout Grids and alignments Considerations and trade offs Color Considerations and challenges Tips CS 464 Human Computer Interaction Typography Tvpography The invitation exercise How might we improve this And would the objective function be You are cordially invited to Robert and Alexandra s delectable after dinner party Wine and nibbles will be served when June 30th 2012 at 9 30pm Where The Pad if you need directions ping us Kindly let us know if you ll be attending by June 1st Exercise adopted from Scott Klemmer s St
33. anford Visual Design inspired by Jennifer Tidwell s Designing Interfaces CS 464 Human Computer Interaction Slide 10 The invitation exercise Whitespace You are cordially invited to Robert and Alexandra s delectable after dinner party Wine and nibbles will be served When June 30th 2012 at 9 30pm Where The Pad if you need directions ping us Kindly let us know if you ll be attending by June 1st Whitespace conveys grouping CS 464 Human Computer Interaction Slide 11 Scale and weight variation You are cordially invited to Robert and Alexandra s delectable after dinner party Wine and nibbles will be served When June 30th 2012 at 9 30pm Where The Pad if you need directions ping us Kindly let us know if you ll be attending by June 1st CS 464 Human Computer Interaction Slide 12 Typography Introduction Good typography depends on the visual contrast between one font and another and between text blocks headlines and the surrounding white space Nothing attracts the eye and brain of the reader like strong contrast and distinctive patterns When your content is primarily text typography is the tool you use to paint patterns of organization on the page The first thing the reader sees is not the title or other details on the page but the overall pattern and contrast of the page CS 464 Human Computer Interaction Slide 13 Typography Alignm
34. dates and correctly cite the source CS 464 Human Computer Interaction Slide 63 Page length 7 7 Shorter Web pages should be favored for e Home pages and menu or navigation pages elsewhere in your site e Documents to be browsed and read online e Pages with very large graphics Longer documents are e Easier to maintain content is in one piece not in linked chunks e More like the structure of their paper counterparts not chopped up e Easier for users to download and print CS 464 Human Computer Interaction Slide 64 Where to put things and why 1 3 Eye tracking studies by Jakob Nielsen show that web pages dominated by text information are scanned in an F pattern of intense eye fixations across the top header area and down the left edge of the text p s 4 i About Us page left Product page center search engine results rights CS 464 Human Computer Interaction Slide 65 Where to put things and why 2 3 When readers scan web pages they are clearly using combination of classic Gutenberg z page scanning combined with what they have learned from the emerging standards and practices of web designers External links Shopping cart Help link About us CS 464 Human Computer Interaction Slide 66 Where to put things and why 3 3 Users have developed
35. e and yellow can be viewed comfortably together Dark or dim colours should be used for the background and bright colours for the foreground National Archives Insufficient contrast CS 464 Human Computer Interaction Slide 70 Len iin pedhes auc Segmentation colour is a very powerful way of dividing a display into separate regions Lint eid Bats Amount of colour too many colours in a display increase search times so they should be used conservatively B up MASTER MATRIX 3 7 le Edit Quit Quit Quit Quit Quit Quit Quit Quit Quit Qui File Disk View C a 0 MASTER MATRIX 3 7 es 9550094 Mi 05 37 01 00 91 AUTO CLEANDE DY SEASON FALL HrsDTD U 186135 PO 03 47 07 08 91 AUTO CLEANUP MEM RBS SHUTDOWN 04 01 CONSOLE B BBS V5 SOHESE 0534 07708791 CHANNEL 10 21 Lai dc 1 ACRE inm ck rie T Horizontal QVartieal AL EXPENSES EEG INCOME PRBETT Ungua uer E CS 464 Human Computer Interaction Slide 71 Tips Design in grayscale first Often people rely on colour as a crutch for making visual distinctions in designs That is fine but it should happen after the other tools have been used typography and layout Use luminance to distinguish between what s more and less important Add colour later preserving the luminance distinctions
36. e bac Canta Pas mia mm Ham ee mi eee oe a ei m o hegus bane cee rusa cmd pe a ed Ee ee ee led rc m IAS IS ML LL LL LLLLLLCCLLLLGLLLLLLLLLLLLLLALOLALLLLLLQALL a Hu gor norm mE RENS US i Reb ue bg Puch deed Emo a e we HE Ege an rao dh adul ep ap 74 9 Tau dom cm mseho ES cd Rai md bm goal ud mom esses el qoem Game Pagi Se auimims fae Aa Gm nce ede eee Foe Fa ee deers bip Bgn Paer pA ddan aH Ma hih P Re fd d ee a pee ed tes ert eee mM beat cm bas mcd a m Hime umida acis s ee geram mas Wei dg TRE Te io d e ee eum dede s Pp E m uud Igel 4 1 toe m ieget Pn ee ape kg tani bnc acm os quac mom jc kd mo Fib REGERE ap gH Tipsi Bales Rabon fe wym oe eee 14 mque Bee eB fee Fur eee ee Ruhe
37. ength 2 3 Users should be able to structure their own view Users with a large monitor may not want their text blocks circumscribed if it means that a large portion of their screen goes unused Alow vision user with fonts set large will not appreciate being forced to view long pages with short lines of text So although leaving text free to fill the browser window may affect readability following conventions may also affect the accessibility and legibility of your documents CS 464 Human Computer Interaction Slide 17 Tvpography Line length 3 3 Fixed text black large portion af the screen unused eee be rn rdasaskeeer codes Fo adings IPETEA D CLTC TECHNICAL GUIDES Agar E 15585 Gog global eth grid Baw doer 4 9 TECHNICAL boettcher judah W qid and 124013434 A W IPIE Wis pang Dub Kem ho geb cee phi ated Go Marin BOTE ded a Fuge cb asd bh chua mee Has T Dogg Rabat Bee amp queda fes tha rice Piae rur Spika 4 380 Goran Agbert A ETE Inislactuad property The nghin cf day agp andern ipie o darilbaa ad L and A E Ye
38. ent default fonts for most operating systems If you specify a font that is not on the user s machine the browser will display your pages using the user specified default font Users may set their browser preferences to ignore font tags and display all pages using their designated default font CS 464 Human Computer Interaction Slide 20 Tvpography Type faces 2 2 Adapted traditional typefaces Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens Times New Roman is a good font to use in text heavy documents that will probably be printed by readers rather than read from the screen Designed for the screen Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen These fonts offer excellent legibility for Web pages designed to be read directly from the screen However these fonts look massive and clumsy when transferred to the high resolution medium of paper CS 464 Human Computer Interaction Slide 21 Choosing type faces Which typeface to use one definite answer Observe a typeface in multiple places to see its range Look at how the same text with different typefaces to change its effect n any case it is safest to use a single typographic family and vary its weight and size for display type and emphasis Also it is safest to use a typeface that will be present in
39. ent 1 2 Justification and rivers The relatively primitive justification available today on the Web creates word space problems that result in rivers of white space that seem to run down the page Left justified ragged right Centered Right justified ragged lett and right ragged lett Lorem ipsum dolor Lorem ipsum dalar Lorem ipsum dolar Left justified text is the most legible option for Web pages ragged left margin makes reading difficult CS 464 Human Computer Interaction Slide 14 Typography Alignment 2 2 Titles and headings over left justified body text should also be flush left s Centered headings pair well with justified text but justified text should not be used on Web pages Centered display type contrasts with the asymmetry of the ragged right margin of left justified body text and produces an unbalanced page CS 464 Human Computer Interaction Slide 15 Tvpography Line length 1 3 Text on the computer screen is hard to read not only because of the low resolution of computer screens but also because the layout of most Web pages violates a fundamental rule of book and magazine typography the lines of text on most Web pages are far too long for easy reading n conventional print layouts columns of thirty to forty characters per line are considered ideal CS 464 Human Computer Interaction Slide 16 Tvpography Line l
40. ent will provide landmarks to direct the reader through your content A good rule of thumb when working with type is to add emphasis using one parameter at a time talics Italicized text attracts the eye because it contrasts in shape from body text Use italics for convention when listing book or magazine titles for example or within text for stressed or foreign words or phrases Avoid setting large blocks of text in italics because the readability of italicized text is much lower than in comparably sized roman text CS 464 Human Computer Interaction Slide 25 Tvpography Emphasis 2 4 Bold Boldface text gives emphasis because it contrasts in color from the body text Section subheads work well set in bold Boldface text is readable on screen though large blocks of text set in bold lack contrast and therefore lose their effectiveness Underlined Underlining has a special functional meaning in Web documents Most readers have their browser preferences set to underline links If you include underlined text on your Web page it will certainly be confused with a hypertext link Colored text You should avoid putting colored text within text blocks because readers will assume that the colored text is a hypertext link and click on it Colored text does work well as a subtle means to distinguish section heads however Choose dark shades of color that contrast with the page background and avoid using
41. ext only equivalent CS 464 Human Computer Interaction Slide 30 Tvpography Accessibility 2 3 Structural markup Text formatting done using presentation style markup instead of style sheets limits users ability to transform a layout to meet their needs Some browsers have a feature that allows users to override author defined style sheets with their own style sheet This means that users can define a custom style sheet that meets their viewing needs Butthese measures will not work or will only work partially on pages that are formatted using presentation markup ftext color is set using lt FONT COLOR and headings set using FONT SIZE and B for emphasis the user defined style sheet will have nothing to apply itself to no paragraph or heading tags f you set presentation properties using style sheets users who need to customize the page can do so CS 464 Human Computer Interaction Slide 31 Tvpography Accessibility 3 3 Emphasis If you use color alone to achieve typographic emphasis users who cannot distinguish the colors will miss the emphasis To emphasize text so that it won t be overlooked use bold formatting as well as color Also be sure that there is sufficient contrast between the background and text on your page Although contrast is particularly important for vision impaired users all users will benefit from greater readability Adaptable layouts Most Web
42. gin to build mental models They use these models to assess relationships among topics and to make guesses about where to find things they haven t seen before The success of your Web site as an organization of information will largely be determined by how well your actual organization system matches your user s expectations Alogical site organization allows users to make successful predictions about where to find things CS 464 Human Computer Interaction Slide 84 Relationships 2 2 Consistent methods of displaying information permit users to extend their knowledge from familiar pages to unfamiliar ones f you mislead users with a structure that is not logical or have no comprehensible structure at all users will be constantly frustrated by the difficulties of find their way around You don t want your user s mental model of your site to look like this Lonfusing user image CS 464 Human Computer Interaction Slide 85 Information Organization Summary The most important step in planning your site is to organize your information Thinking carefully about what you want to say and how you want to say it requires that you become intimately acquainted with your site content Create outlines chunk your information into sections and subsections think about how the sections relate to one another and create a table of contents A well organized table of contents can be a major navigation
43. information too much or you will frustrate your readers CS 464 Human Computer Interaction Slide 81 Chunking information 2 2 Chunking can help organize and present information in a uniform format This allows users not only to apply past experience with a site to future searches and explorations but also to predict how an unfamiliar section of a Web site will be organized Concise chunks of information are better suited to the computer screen which provides only a limited view of long documents Very long Web pages tend to be disorienting because they require the user to scroll long distances and to remember the organization of things that have scrolled off screen CS 464 Human Computer Interaction Slide 82 Hierarchy of importance Most sites depend on hierarchies moving from the most general overview of the site the home page down through increasingly specific submenus and content pages Major submenus Content E E E E E Chunks of information should be ranked in importance and organized by the interrelations among units Once you have determined a logical set of priorities you can build a hierarchy from the most important or general concepts down to the most specific or detailed topics Slide 83 CS 464 Human Computer Interaction Relationships 1 2 When confronted with new and complex information system users be
44. ing the container in the browser window or by designing a background graphic to fill the empty areas of the screen Slide 55 Page layout Fixed vs flexible 4 5 Flexible layout Advantages takes advantage of screen real estate and the capabilities of a user s computer not to mention giving users the freedom to decide the overall presentation Minimizes the possibility of vertical scrolling presents more information above the fold Although wheels on mice have become standard so vertical scrolling is not a problem anymore Disadvantages text spanning across a wide distance in larger monitors and high resolutions is very difficult to read The designer loses freedom and control over the final presentation of the content Difficult to implement a graceful and graphic intense design that looks great on several resolutions and browser window sizes CS 464 Human Computer Interaction Slide 56 Page layout Fixed vs flexible 5 5 Which one There is no standard answer designers still argue over the best solution The final decision will depend on various factors f your site is intended to grab attention be arty promotional or something similar you should think seriously about a fixed layout f your site is geared towards a wider audience and its primary purpose is to convey information you need to make it as flexible as possible CS 464 Human Co
45. mputer Interaction Slide 57 Page length 1 7 s Determining the proper length for any Web page requires balancing four factors 1 Therelation between page and screen size 2 The content of your documents 3 Whether the reader is expected to browse the content online or to print or download the documents for later reading 4 bandwidth available to your audience Researchers have noted the disorientation that results from scrolling on computer screens The reader s loss of context is particularly troublesome when such basic navigational elements as document titles site identifiers and links to other site pages disappear off screen while scrolling CS 464 Human Computer Interaction Slide 58 Page length 2 7 CS 464 Human Computer Interaction computer display 15 Called an emnt Dit oF SAo color jenlay and it very caminan ui current muerecemeuting auis WED L m m gm Lum pm mom eem pm TL gm m of rig pong Yr og ms ton ey are n Le Jd f deg CSR Eley Lee bo alo DUE I Each screen pixel represented by eight bits of memory If still more memory is dedicated to each pixel we can get nearly photographic color on the computer screen True color or 24 bit color displays can show millions of unique colors sumultaneously on the computer screen True color 24 bit
46. ng 1990 Wo cana onlin canait C Esse at F e hona DRE Map PTPP Rege tan Mp Wise Wah chron cod Haing SPER alee foe acd the Pee Agee 41211 21 b pEDACOLY Rr LE TI nt Haran Toma Hals and A Gittoed L 97 Technology mi the dlp argir RC Prom thaory Bi precise Sana 2215 42 55 lio available an didus Eti ol i Raginu Per erie ML and frasi 1934 Tha Wild Wida Web ad an taal poama 17402 Aio on Uzzrrrricriddrzgs Tah quel DUBE guijelrep dau sand wes Bokoasras Additional line spacing allows a somewhat longer line length without sacrificing legibility CS 464 Human Computer Interaction Unrestricted text tills browser window long lines of text Erra E ceri agar Eoi wle LET ED t Lippe greed chase Cagis F par cariarad x Wiha eer Cenipeedi Doon Hie rareug an Pea et m oer sce jar stad wouesnt dee ee you ee tres w a a Ee Le SRST 1 ecas ng on fio BAe Ped iere Pea ey ee VET Check E clon of fis fee eer hi bee Hem ell des ond he rarior b wth fries inal degn Toss Loe Ce Derim CDi viuis pmb Tr s j
47. ntry Region Worldwide 1024x768 January 2013 90 9 January 2012 85 1396 January 2011 65 14 January 2010 7 696 20 CS 464 Human Computer Interaction 800x600 0 596 19 09 190 640 480 0 0 0 09 0 5 19 1 39 v EA 99787578 amp gt Line E Bar Slide 51 Page layout considerations 3 3 Monitor Size There is no definite study about the size of monitors t seems the most prevalent sizes are 17 and 19 inch monitors but there is no doubt that there is a substantial amount of users still using old 15 inch monitors and much larger ones s Keep these in mind when deciding the layout of your site and the width of every area particularly the content area where the user will spend time reading CS 464 Human Computer Interaction Slide 52 Page layout Fixed vs flexible 1 5 An important choice that must be taken early in the design process is to decide if the layout of the page will be flexible or fixed In flexible or fluid layouts the content flows to fit the width of the window In fixed layouts the width is predetermined by the designer CS 464 Human Computer Interaction Bote mr mre P umen 3 oe a Pe beia mos dora after qa ee vr dmm Ep Te in m og RR db de F urtang am ee
48. oe ego eed 8 r ces TE ening Ter Y Bold Prete Cee oe i iL Leah Lele a ee FEE FE AU i Fer ome Ead In Enterprise seeds teer ad Web content wis penah 1 qM I deo po wms Web content publish or perish Information 3 O ogldated content can be deadly fora Web sie Make your ste sticky by Sysbems 4 contend wall mew and frequenily updated mfarmation Infrastructane Bv Jon dich amp Network CNET Enterprise Collaboration Amm Management Old and familiar are fine for a favorite pair of comfy shoes but they Planning amp can be deadly for a Web site Whatever you re selling on your site supply Chain things ideas or services if your offerings aren t wrapped a HR amp Finance package featuring fresh content you run the risk of losing your visitors interest The shelf ile of most Web content short so as important as it is CS 464 Human Computer Interaction Slide 24 Tvpography Emphasis 1 4 A Web page of solid body text is hard to scan for content structure and will not engage the eye s Adding display type to a docum
49. ogram Photobiology Section Primary Care Clerkship Psuchistry Department PuxA EPWVA Center for Neuroscience and Regeneration Research Q Remedy Recovered Medical Equipment Room Reservations at the Medical Center 5 Surgery Department Systems Support IT5 Mad T Telemedicine Office af TS OCD cinice Child Study u Li Vascular Surgery Section info med yale edu CS 464 Human Computer Interaction Slide 61 Page length 5 7 All Web pages longer than two vertical screens should have a jump button at the foot of the page Jump to top af page tania 1999 2001 Yale New Haven All o reserved Comments ar suggestions to the site editor Read the policies guiding operation of this site CS 464 Human Computer Interaction Slide 62 Page length 6 7 f you wish to provide both a good online interface for a long document and easy printing or saving of its content Divide the document into chunks of no more than one to two printed pages worth of information including inlined graphics or figures Use the power of hypertext links to take advantage of the Web medium Provide a link to a separate file that contains the full length text combined as one page designed so the reader can print or save all the related information in one step Don t forget to include the URL of the online version within the text of that page so users can find up
50. or expect to find Improving link information scent Multi word links With specific recognizable terms Trigger words not clever terms Helps accessibility as well CS 464 Human Computer Interaction Slide 97
51. s approach is commonly used in training Other examples include television listings a history of specific events and measuring the response times of different systems 3 Location Organization by spatial or geographic location most often used for orientation and direction Obviously lends itself to maps but is also used extensively in training repair and user manual illustrations and other instances where information is tied to a place CS 464 Human Computer Interaction Slide 77 Five hat racks Themes to organize information 2 2 4 Alphabetic Organization based on the initial letter of the names of items Obvious examples are telephone and other name oriented directories dictionaries and thesauri where users know the word or name they are seeking Alphabetic systems are simple to grasp and familiar in everyday life This method of organization is less effective for short lists of unrelated things but is powerful for long lists 5 Continuum Organization by the quantity of a measured variable over a range such as price score size or weight Continuum organization is most effective when organizing many things that are all measured or scored the same way Examples include rankings and reviews of all kinds such as the best movies in a given year darkest or lightest items and other instances where a clear weight or value can be assigned to each item CS 464 Human Computer Interaction Slide 78
52. s large masses of shape and colour with foreground elements contrasted against the background field Yisual scanning and page structure Rough visual scanning Finer scanning Start reading headers Only secondarily do they begin to pick out specific information first from graphics if they are present and only afterward do they start parsing the harder medium of text and begin to read individual words and phrases CS 464 Human Computer Interaction Slide 36 Establish a visual hierarchy 3 4 The overall graphic balance and organization of the page is CS 464 Human Computer Interaction crucial to drawing the reader into your content A dull page of solid text will repel the eye as a mass of undifferentiated grey but a page dominated by poorly designed or overly bold graphics or type will also repel sophisticated users looking for substantive content Dull visual focus Strong visual contrasts What you want is an appropriate balance that attracts the eye with visual contrast and provides a sense of organization Slide 37 Establish a visual hierarchy 4 4 WILLIAMS SONOMA Mini Tarts Th se pastries are ideal for entertaining Garnish tha mimcemieat tarts with whippad cream and the lennon tarts with meringue fresh seasonal fruit or candied ginger Ingrodlants L 1 4 cups all purpose fleur 1 3 cup comfectionars sugar 1 2
53. t 7 hours and get it by Friday Apr 5 Eligible for FREE Super Saver Delivery FREE Super Saver Delivery Sell this back for an Amazon co uk Gift Card 15 74 Kindle Edition Books See all 3 314 items Available for download now THINK More buying choices Paperback sce pease kg 12 50 new 54 offers A mazon 1172 used 23 offers LOOK INSIDE Prioritizing Web Usability by Jakob Nielsen and Hoa Loranger 20 Apr 2006 Gift Cards 35 09 30 59 Paperback Prime 5 with Free Order in the next 6 hours and get it by Friday Apr 5 Eligible for FREE Super Saver Delivery Only 3 left in stock order soon sell this back for an Amazon co uk Gift Card One Day Delivery J gt Shop now ce lesen Available for download now eb Usability More buying choices Paperback 17 99 new 25 offers 9 27 used 21 offers CS 464 Human Computer Interaction Slide 73 Amazon in colour Your Amazon co uk am AZON cour ee Shop by Department Search Welcome Warehouse Deals Subscribe amp Save Department web usability Books Computing amp Internet Web Graphics amp Animation Web Design Website Design Web Development Kindle Store Web Site Design Computer Programming Computer Systems Analysis amp Design Computer Graphic Design showing 1 16 of 3 325 Results LOOK INSIDE See All 4 Departments Delivery Option whats this FREE Super
54. y area that is sure to be visible to all users CS 464 Human Computer Interaction Slide 43 Examples STANFORD UNIVERSI I TOP DESTINATIONS EVENTS Earm Sciences Educa Engeevrg oPumacties Sciences Economics of the sun Sumiors professor deives into he prospects for cosi competibve solar power ORE STORIES in counties where cooking can trying to promote safer stoves Departmeets A Z researchers heip endecipinany Programs visualize Cabforma s cha gog SriTAcs TUN Dissecting a classic Stanford Mospital amp Clinics Huw Morgar Taking the sting out of Packard Cratren 1 5 oper Sucens explore product design Ux Peough restorabon of a 92 summer Advice fror 7 Caditac Devile Sza oed wicamess 1 8 amp experts gt Startord Unser braces JUN Design 1 6 Program Frai Presematons 130 pm independent Labs Research Centers EVENT CALENDAR SLIDESHOW in SPORTS ae Pos gt STAY CONNECTED Stanford on osnog GOSTANF OWD CS 464 Human Computer Interaction VIDEO MOST POPULAR Edtion US Giobat Subscribe Digital Home Delivery scotfiemmer Help WORLD POLITICS NEW YORK BUSINESS DEALBOOK TECHNOLOGY SPORTS SCIENCE HEALTH ARTS S
Download Pdf Manuals
Related Search