072012 tc day03
Upcoming SlideShare
Loading in...5
×
 

072012 tc day03

on

  • 417 views

 

Statistics

Views

Total Views
417
Views on SlideShare
416
Embed Views
1

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The above example is from a website's "About Us" pages. The heatmap clearly shows users' tendency to read in an "F" pattern, and their focus on information that's presented in bulleted lists. In this case, there's also a small amount of attention to the "see also" area, but no viewing of the promotions in the rightmost column. \n
  • \n
  • \n
  • Web users tend to ignore everything that looks like advertisement and, what is interesting, they’re pretty good at it. Although advertisement is noticed, it is almost always ignored. Since users have constructed web related schemata for different tasks on the Web, when searching for specific information on a website, they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks. Large colourful or animated banners and other graphics are in this case ignored.\nJakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.\n\n
  • On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.\n\n
  • Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad. Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Examples\nGood IA: Supermarket puts chocolate together with other snack foods\nBad IA: nAll grocery items by manufacturer \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • you can see parallels. similarities but travel on the web is magical. you just appear at the next point in your journey from page to page. no experience of the landscape unfolding before you as a series of landmarks.\n
  • \n
  • Consistency is the golden rul of interface design and way finding, but paradox is if everything looks the dame, THERE ARE NO EDGES. in a corporate site if y ou move from one region to another, from marketing to HR, you ought to notice that you just passed an important regional bouncary.\n
  • \n
  • The Paradox of Choice, Barry Schwartz give users choice is the matra but too many will overwhelm them.\n
  • As pages get more complex you risk overwhelming the user with the “times Square effect” of too many competing visual stimuli.\n
  • Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  • \n
  • Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  • Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  • Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

072012 tc day03 072012 tc day03 Presentation Transcript

  • WHAT ISUSABILITYTESTING?
  • WELL, WHAT ISUSABILITY?“Usability really just means making sure that somethingworks well: that a person of average (or even below average)ability and experience can use the thing - whether its a Website, a fighter jet, or a revolving door - for its intendedpurpose without getting hopelessly frustrated.”
  • USABILITYTESTINGTesting is a technique to ensure that the intended users canperform the intended tasks efficiently, effectively andsatisfactorily. Without frustration! View slide
  • WHAT TOOLS AREAVAILABLE? Surveys Interviews Eyetracking studies Usability testing Online testing tools View slide
  • SURVEYSAllow users to review the site.Distribute surveys.Ask them to answer questions Survey
  • INTERVIEWSAllow users to review the site.Make user comfortable.Ask users questions.See handout. Interview
  • EYETRACKING STUDIES
  • EYETRACKINGAND THE EYEEyetracking is following the trail of where a person is looking.Equipment can be built into the computer.Eyetracking software keeps track of what’s on screen while How does it work?user is looking at it.
  • FIXATIONWhen the eye is resting on something.Last between one-tenth and one-half.Red spots are fixations.
  • SACCADESThe eye’s rapid movements from one fixation to the next.Last between one-hundredth and one-tenth of a second.Thin red line connecting the dots are saccades betweenfixations. Eyetracking Study
  • HEAT MAPSVisualization technique for eyetracking studies.A color-coded screenshot that shows the user’s fixations.Red: where users looked most.Yellow: indicate fewer fixations.Blue: indicate least view areas.Gray: no fixations. Facebook Heatmap
  • F-
  • BANNER
  • USERS FOCUS
  • USERS FOCUS
  • USABILITYTESTINGSeries of tasks for participants to perform on an actualwebsite or prototype.Tasks are formulated from user and business goals.Measures the success of failure of a design.
  • STEPS
  • #1INTRODUCTION(5-10 MINS)Make participant feel comfortable.Let them know they can have a break any time.
  • #2 TASKS (10 -15 MINS )Be sure to read the task aloud.Encourage participant to think aloud.Have a written version that you leave in front of the user.DO NOT HELP THE USER THROUGH THE TASK.
  • TECHNOLOGYMorae®: A recorder that captures onscreen activity of theuser’s computer and a camera video of the user.Creates a synchronized index of events occurring behind thescenes in applications and in the operating system. Morae Website
  • COMMONERRORSStrategic Errors - premature testing, not enough time orwill to make changes.Inadequate Planning - do a pilot test to uncover problemswith plan and materials.Read script aloud.
  • COMMONERRORSPoor Task Design - test core functionality and areasidentified as problematic.If scenarios were used, convert into tasks to ensure keyinteractions are studied.Accidental Revelation - revealing too much. Watch your
  • TESTPARTICIPANTSGet representative users - Craig’s list, LinkedIn,employmentagencies, market research agencies.Use questionnaires to screen.Offer incentives.
  • ENVIRONMENT
  • TESTPARTICIPANTSSchedule 5 - 8 users.Only need 5 - account for no shows, botched tests.Test up to 3 groups of 5 - 1 test after iterations made.
  • http://www.xperienceconsulting.com/en/research/lab_usability_test.php
  • http://happyuser.xperienceconsulting.com/tag/test-de-usuarios/
  • http://usit.com.au/introducing-cider-or-why-i-dont-like-the-term
  • USING THE DATA
  • USING THE DATATransform both qualitative and quantitative data to makerecommendations
  • QUANTITATIVEDATAAny information that can be measured:Ease of useSatisfactionVerbal descriptions of people’s experiences
  • QUALITATIVEDATAInformation that requires interpretationIdentifies trends or categories of user’s behaviorExample: How well users can complete a taskWhere they are encountering problems
  • COMB THE DATA
  • FROM INTERVIEWS Preferences Needs Stories Current Behaviors Pain Points Satisfaction Level
  • FROM USERTESTING Success New Behaviors Usage Patterns Pain Points Time to complete Assists required
  • ONLINE TESTING TESTING SITES - Usabilla - Infomaki - Chalkmark CARD SORTING - Optimal Sort - XSort (desktop app for Mac) NAVIGATION TESTING - Treejack - Five Second Test
  • ORGANIZING THEDATAOrganize the data into categories or findings.Find themes and put in table.
  • AFFINITYDIAGRAMSOrganizes items into common themes.Helpful when you have a large amount of data.You have many facts or ideas in apparent chaos.When issues seem too large and complex.
  • AFFINITYDIAGRAMS1. Record each idea on sticky noteand layout on wall2. Look for groups3. Repeat till all notes are grouped4. If a note seems to belong in twogroups, make a second note5. Discuss patterns and reason forgroupings6. Find headers
  • SPREADSHEETSUse to track stories, needs, pain points, successesProvides Quantitative layer over Qualitative informationMore difficult to collaborate than affinity diagrams Example
  • WORKSHOP # 1 -USABILITY TEST Please break into twos. Person A tests Person B Follow format: Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happen
  • WORKSHOP # 1 -USABILITYyou? Anything surprise TEST Any new insight? Anything go wrong? Was the site used in a way that you did not expect? Did you discover any usability problems?
  • WORKSHOP # 1a-USABILITY TEST Please break into twos. Person B tests Person A Follow format: Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happen
  • WORKSHOP # 1a -USABILITYyou? Anything surprise TEST Any new insight? Anything go wrong? Was the site used in a way that you did not expect? Did you discover any usability problems?
  • DESIGNING FORWEB USABILITY
  • USER EXPERIENCE"User experience isnt a layer or component of a product orservice. Its really about the design of the whole systems andtheir interconnections."- Andre Hinton, Senior IA at Vanguard
  • WHY TEST?If a user can’t find what a product, they won’t buy.If they can’t find what they are looking for, they will lookelsewhere.The holder of the mouse rules!
  • NAVIGATION & WAYFINDING
  • NAVIGATION“Navigation isn’t just a feature of a website, it is the web site,in the same way that the building, the shelves, and thecash register are Sears. Without it, there’s no there there.”-Steve Krug
  • WAYFINDINGCoined by Kevin Lynch in The Image of the City, 1960.Describes the elements that allow us to navigate successfullyin cities and towns.
  • 4 CORECOMPONENTS1. Orientation: Where am I now?2. Route decisions: Can I find the way to where I want to go?3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
  • ELEMENTS OFMENTAL MAPS1. Paths: streets, transit lines, canals, railroads - channelsthat people regularly move.2. Edges: physical barriers; walls, fences, rivers, shore -boundaries that create linear breaks in continuity/separateand relate two distinct regions.
  • ELEMENTS OFMENTAL MAPS4. Nodes: Intersections, enclosed squares, street corners,subway stations - all serve as points of reference, transitionand destination.5. Landmarks: Towering buildings, golden domes,mountains, signs, storefronts, trees - physical objects that
  • ON THE WEBNo sense of scale or movement in space.No compass: no direction.You are here: navigation interface.Paths: lead the way: site navigation, breadcrumbs.
  • PATHSConsistent, predictable navigational links.Appear the same throughout the site.Can be habitual.Explicit elements: breadcrumbs.
  • EDGES &DISTRICTSEffective interface design uses consistent page grid,terminology, navigation links.
  • Landmarks along the wayREGION REGION REGION REGION REGION REGION
  • NODESThe local coffee shop or Times Square?Too much choice causes stress, slows decisions, makes usless satisfied and more likely to walk away.
  • LANDMARKS“YOU ARE HERE”Search function cuts across all the normal wayfindingboundaries.Orientation cues are particularly important since users oftenarrive at a page without having followed a deliberate andrepeatable path.
  • Headers: “You are
  • SUMMARY1. Paths: create consistent, well-marked navigation paths.2. Regions: create a unique but related identity for each site region.3. Nodes: don’t confuse the user with too many choices.4. Landmarks: use consistent landmarks in site navigation and graphics to keep the user oriented.Web Style Guide, 3rd Edition
  • PAGE LAYOUT
  • ELEGANCE &SIMPLICITYUse economy of expression.Most powerful designs are result of a process ofsimplification and refinement.
  • MINIMALISM“A designer knows he has achieved perfection not whenthere is nothing left to add, but when there is nothing left totake away.”- Anoine de Saint Exupéry-
  • ADVANTAGESApproachability: easy to tell at aglance what it is and designs invitefurther exploration.Recognizability: recognized easily,easily assimilated, understoodand…REMEMBERED.Immediacy: have greater impactbecause they can be immediatelyrecognized and understood withminimal effort.Usability: simplicity enhances
  • PRINCIPLES Unity Refinement Fitness All the elements must be unified to produce a coherent whole. The parts and whole must be refined to focus user attention and the fitness of the solution to the communication problem must be ensured at every level.
  • HOWReductionRegularizationLeverageReduce the design to its essence, regularize the elements ofthe design, then combine them for maximum leverage.
  • INFORMATION...... consists of differences that make a difference.- Edward Tufte, Envisioning Information
  • SCALE,CONTRAST,
  • SCALEDescribes the relative size of a design element in relation tothe other design elements and the composition as a whole.
  • CONTRASTResults from the differences that can be seen between thedesign elements.Provides visual distinctions in: shape, size, color, texture,position, orientation, and movement.
  • PROPORTIONDetermines the balance and harmony of the relationshipbetween the elements.
  • ORGANIZATION &STRUCTUREProvide the user with visual pathways needed to experiencea site in a systematic way.Must be introduced by establishing relationships among thedesign elements.
  • PRINCIPLES Grouping Hierarchy Relationships Balance
  • GROUPINGStart by grouping display elements into higher order units.(Note: words in a book are grouped into columns,paragraphs, sections etc).Higher-level structures orient the user.Binds functional units tightly together.Use spacing and alignment for effectiveness.
  • HIERARCHYEye looks for visual hierarchies for orientation.Most important elements must be large enough to draw theviewer closer.Specifics follow.
  • RELATIONSHIPSGrouping and hierarchy are reinforced when visualelements are related.Position, size and value provide visual cues.Alignment helps form visual relations.
  • BALANCEEnsures that the elements remain stable in their position onthe page.A composition is balanced when the visual weight of theelements on either side of the piece are approximately equal.
  • WORKSHOP # 2 -PAGE LAYOUT Please break into three groups. Find websites that illustrate: 1. Scale 5. Grouping 2. Contrast 6. Hierarchy 3. Proportion 7. Relationships 8. Balance 4. Organization & Structure
  • HOMEPAGES
  • FIRST CHANCEcan be your first (and possibly last) chance to attract a user
  • IDENTITYinclude a tag line that summarizes what the company does
  • FRONT PAGEshould be like the front page of a newspaper
  • TELL YOUR STORYshould say who you are, what you do or what products your offer and what sets you apart from the competition
  • SHOW COMPANY LOGO
  • PRIORITYemphasize highest priority tasks so there is a clear starting point
  • SHOULD BE UNIQUEdesign to be clearly different from all other pages on the site
  • ESTABLISH TRUST & CREDIBILITY
  • HAVE CLEARNAVIGATION
  • THE FINE PRINTgroup all corporate information in one distinct area
  • INCLUDE SEARCH BAR
  • CALLS TO ACTION reveal site content with calls to action
  • USE MEANINGFUL GRAPHICS
  • DESIGNCONVENTIONS
  • Link to home page Primary location for search, shopping carts LOGO Calender | A-Z Index Search This Site GO Navigation and search The tagline would go here... Identity and titles Header Navigation links Navigation | Navigation | Navigation | Navigation Tab navigation Selected Tab Unselected Tab Unselected Tab Navigation Home page > Section > Page Breadcrumb trail Alternate right location Navigation for scan column Navigation navigation and searchLocal Navigation Navigation Navigation Common location for Navigation banner ads Navigation Navigation Search, banner ads, Left scan column Right scan column Main content column contact (optional) (optional) information Contact information, Footer Copyright 2012 | Company Name | Company Address | New York, NY | 555-555-5555 copyrights, dates
  • WEB STANDARDS“The experienced web designer, like the talented newspaperart director, accepts that many projects she works on willhave headers and columns and footers. Her job is not towhine about emerging commonalities but to use them tocreate pages that are distinctive, natural, brand-appropriate,subtly memorable and quietly but unmistakably engaging.”- Jeffery Zeldman-
  • ABOVE THE FOLDAbove the fold - a graphic design concept that refers to thelocation of an important news story or a visually appealingphotograph on the upper half of the front page of anewspaper.In web design, top 600 to 700 pixels (on 19” - 22” monitor)Just a guideline.
  • BREAKING THERULESMore sites now will put important content beneath the fold. 37signalsthe content is interesting. FundPeople will scroll if Acumen Zipcare
  • PURPOSE OFGRAPHIC DESIGNUnlike a print, web users interact with information.GUI (graphic user interface) must convey function andmeaning.Graphics are integral to the user’s experience.
  • PURPOSE OFGRAPHIC DESIGNCreate visual hierarchy so you can see what’s important.Define functional regions of the page.Group page elements that are related, so you can seestructure in the content.
  • CONSISTENTLAYOUTHeader - mini versions of the homepage.Footer - about house keeping and and legal matters.Global NavigationLocal Navigation
  • PAGES SHOULDINCLUDE Informative title Identity Copyright statement Link back to home Navigational links Heading or title to clarify content Link to contact information Alternate (alt) text identifying
  • WHAT GOES INTOA HEADER? Site identity Major navigation links/utility navigation Search box (not always) Link back to home
  • POSSIBLE HEADERCOMPONENTS Advertising Search This Site GO CartIndividual designs rarely use them all. Navigation | Navigation | Navigation | Navigation LOGO Site titles, section identity, or advertising Selected Tab Unselected Tab Unselected Tab
  • Variations
  • WHAT GOES INTOA FOOTER? Contact information. Copyright statement. Page author. Links to related sites or to larger enterprise. Utility links can go here. Redundant navigation for long pages.
  • WRITING FOR THE WEB
  • CONTENT IS KING“Ultimately, users visit your website for its content.Everything else is just the backdrop. The design is there toallow people access to the content.”- Jakob Nielsen-
  • PAPER VERSUSMONITORBecause screen resolution is low (72 to 110 dpi), it places astrain on the human eye.Because we read on a screen, we are forced to view from amore or less fixed position - with print you can readanywhere in any position.
  • PAPER VERSUSMONITORScreen glare is not an obstacle when reading on paper.Monitor Flick: looks like a solid image, but the screen isrefreshing so fast that you are fooled into seeing a solidimage, but the brain is alway correcting for the flicker.Reading is 25% slower on a screen. (Jacob Nielsen)
  • READING ON THEWEB - Scrolling is clumsy - people don’t like it and they lose their place. - Readers scan on-screen, then print content for reading. - Web reading is not stationary - text jumps from link to link and page to page. - Many web pages end up as fragments of information taken from larger context.
  • 3 GUIDELINES 1. Be succinct - write no more than 50% of the test that you would have used in print. 2. Write for scanability - use short paragraphs, subheadings, bulleted lists. 3. Use hypertext to split up long information into multiple pages.
  • SCANABILITY - Studies show that almost 80% of users initially scan a webpage. - Users pick out key words, sentences and paragraphs of interest - They skip over the text they are not concerned with. - Write articles with two or three levels of headlines for easy scanability.
  • SCANABILITY - Use meaningful headlines - Tell the user what the page or section is about. - Use bulleted lists and similar design elements to break text blocks. - Use highlighting and emphasis to catch the users eye.
  • USE PLAINLANGUAGE - Start each page with the conclusion - most important material should come up front. - Users should be able to tell in a glance what the page is about. - Users often only read the first line of a paragraph - use topic sentences, one idea per paragraph. - Use simple sentence structure - avoid convoluted writing and
  • CHUNKING- Use hyperlinks to make text short.- Keep links visible, ideally above thefold.- Split the information into “chunks”that focus on a certain topic.- Move long, detailed info tosecondary pages.
  • HEADLINES - Online headlines are different than printed headlines. - Online headlines are often displayed out of context: as part of an article, in a search list, in a bookmark list. - Headline must stand on it’s own even when the rest of content is unavailable.
  • LEGIBILITY Use colors that have a high contrast between the text and the background. Use plain color-backgrounds or subtle patterns. Use fonts big enough that people can read. Make the text stand still – moving blinking or zooming text is hard to
  • LEGIBILITY Try to left justify text when possible.
  • LEGIBILITY AVOID THE USE OF ALL CAPS FOR TEXT BECAUSE RESEARCH HAS SHOWN THAT IT IS 10 PERCENT SLOWER TO READ THAN TEXT IN MIXED CASES, BECAUSE IT IS HARDER FOR THE EYE TO RECOGNIZE THE SHAPE OF WORDS AND CHARACTERS IN THE MORE UNIFORM AND BLOCKY APPEARANCE. DONT DO IT. Legibility depends on the tops of all the letters. Legibility depends on the tops of all the letters.
  • REMEMBERExplain what the article is about interms that relate to the user.Write in plain language.Avoid teasers that try to enticepeople to click.Try to make the first word animportant, information-carrying one.
  • WORKSHOP # 3HEADLINES Stay in your groups. Remove every word you can from the passages below and create a catching headline. 1. Government officials involved in the Olympics call it a fiasco, that is, the extent of chaos that has thrown security plans into disarray upon learning that of the shortfall of civilian guards. 2. If “Ghosts in the Machine” an ambitious exhibition at the Met were itself a machine, it would have lots of moving parts but not all would be performing with equal efficiency. 3. Apple announced that its’ bestselling MacBook laptop just got its newest makeover. It’s a thing of beauty, clad in
  • WEBTYPOGRAPHY
  • TYPOGRAPHYTypography is the process of arranging letters, manyterms are left over from the days of letterpressOn computers we use fonts, whether for digital printing oron the web.
  • HISTORY OF WEBTYPOGRAPHYAt first browsers had no way of embedding fonts.1995: Netscape introduces <font> tag1998: CSS2 allows for more type configuration2005: CSS3 introduces @font-face, allowing fonts to behosted online
  • WEB-SAFE FONTSCome preinstalled on most computers.Arial, Comic Sans MS, Courier,Georgia, Impact, TahomaTimes New Roman, Verdana
  • @FONT-FACELets the browser load a font from a remote server, meaningthat pages can display text in the specified font even if theuser does not have it installed on their computer.Allows for greater design customization without sacrificingaccessibility or SEO.
  • IMAGEREPLACEMENTGood for logos. Bad for accessibility and SEO.
  • CHOOSING THE RIGHT FONT
  • SERIF VS SANSSERIFSerifSans SerifSlab Serif
  • HEADERS VSCOPYYou can use decorative fonts forheaders...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesentsodales, sapien ut porta blandit, metus dui imperdiet ipsum, id eleifendest nulla eu orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget
  • X-HEIGHTLorem ipsum Lorem ipsumLorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consecteturadipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien utporta blandit, metus dui imperdiet ipsum, porta blandit, metus dui imperdiet ipsum, idid eleifend est nulla eu orci. Mauris lectus eleifend est nulla eu orci. Mauris lectus eros,eros, rutrum at lobortis ut, eleifend egeteros. Nulla at felis eget neque aliquam rutrum at lobortis ut, eleifend eget eros. Nullaconvallis. at felis eget neque aliquam convallis.
  • OUR FAVORITESOur favorite web fonts available for free from Google Fonts.Open Sans Open Sans Open Sans Open Sans Open SansLato Lato Lato LatoLora Lora Lora LoraVollkorn Vollkorn Vollkorn Vollkorn
  • WEB TYPOGRAPHY TIPS
  • INCREASELEADINGLorem ipsum dolor sit amet, consecteturadipiscing elit. Praesent sodales, sapien ut Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, sapien utporta blandit, metus dui imperdiet ipsum, porta blandit, metus dui imperdiet ipsum,id eleifend est nulla eu orci. Mauris lectusLine height should be at least 120% of font size.eros, rutrum at lobortis ut, eleifend eget id eleifend est nulla eu orci. Mauris lectuseros. Nulla at felis eget neque aliquam eros, rutrum at lobortis ut, eleifend egetconvallis. eros. Nulla at felis eget neque aliquam convallis.
  • DO
  • DON’T
  • MAINTAINLEGIBILITYLorem ipsum dolor sit amet, consecteturadipiscing elit. Praesent sodales, sapien ut Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, sapien utporta blandit, metus dui imperdiet ipsum, porta blandit, metus dui imperdiet ipsum,Light colors are hard to read, even on white. Beware of #666.id eleifend est nulla eu orci. Mauris lectus id eleifend est nulla eu orci. Mauris lectuseros, rutrum at lobortis ut, eleifend eget eros, rutrum at lobortis ut, eleifend egeteros. Nulla at felis eget neque aliquam eros. Nulla at felis eget neque aliquamconvallis. convallis.
  • DO
  • DON’T
  • COLUMN WIDTHThe eye can only comfortable track 7-10 words per line,which is about 40 to 80 characters.Multiply your text size by 30 to determine maximumcolumn width.10px type x 30 = 300px column width
  • DO
  • DON’T
  • IMPLEMENTHIERARCHYUse multiple typefaces to differentiate between elements onthe page.Mix between categories (serif, sans serif, slab serif, display)Don’t go too crazy! Don’t use more than 2 or 3 fonts.
  • DO
  • DON’T
  • RESOURCES FORWEB FONTSGOOGLE WEB FONTSFONTSQUIRRELTYPEKIT
  • WORKSHOP # 4CREATE SITE Please go into the group you worked with when creating personas. CREATE CONTENT FOR THE WEBSITE USING THE PERSONAS AND SCENARIOS. What content would the user you defined find on the site? Establish content Establish information architecture Create site map Create navigation Create wireframes or other prototype Do a prototype test
  • WORKSHOP #4SCENARIOS GROUP #1: Site is to provide info for people starting own business; some of them have experience in he business world; others this is their first exposure to issues running a business. GROUP #2: Site is to provide info for people looking to place parents in assisted living. GROUP #3: Site is to provide info for people looking to compare car insurance.