The User-Friendly Website
-
Upload
lisa-spitz-design -
Category
Design
-
view
104 -
download
0
description
Transcript of The User-Friendly Website
![Page 1: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/1.jpg)
The User-Friendly Website
www.HumanCenteredDesign.org
November 18, 2009Build Boston
![Page 2: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/2.jpg)
The Boston Society of Architects/AIA is a Registered Provider with The American Institute of Architects Continuing Education Systems. Credit earned on completion of this program will be reported to CES Records for AIA members. Certificates of Completion for non-AIA members are available on request.
This program is registered with the AIA/CES for continuing professional education. As such, it does not include content that may be deemed or construed to be an approval or endorsement by the AIA of any material of construction or any method or manner of handling, using, distributing, or dealing in any material or product. Questions related to specific materials, methods, and services will be addressed at the conclusion of this presentation.
Welcome
![Page 3: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/3.jpg)
This presentation is protected by US and International Copyright laws. Reproduction, distribution, display and use of the presentation without written permission of the speaker is prohibited.
© Institute for Human Centered Design, 2010
Copyright Materials
![Page 4: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/4.jpg)
Session Objectives• Identify current concerns that drive the need
for user-friendly websites• Explore how a clear design process and good
organization can make navigation easier• Learn graphic design basics that will increase
the legibility of your website• See clear examples of what works• Learn about resources that will help make your
website more user-friendly
![Page 5: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/5.jpg)
www.HumanCenteredDesign.org
An international nonprofit based in Boston dedicated to enhancing the experiences of people of all ages and abilities through excellence in design.
![Page 6: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/6.jpg)
www.HumanCenteredDesign.org
617.695.1225 voice/tty617.482.8099 fax
200 Portland Street, Boston, MA 02114www.HumanCenteredDesign.org
Public Programming- Retail store www.IHCDstore.org- Showroom and exhibits- Public library- Lectures, events & conference and meeting space- Membership
IHCD Studio (see our website for more detail)- Full spectrum of design services- Expert consultation on social sustainability- Participatory planning and design- Plan review- Site review - Accessibility & inclusive design audit- Product review through analysis and/or focus groups
Funded ProjectsNew England Americans with Disabilities Act (ADA) Center,
1.800.949.4232 voice/tty
National Endowment for the ArtsUniversal Design
Case Study Projectwww.UDcasestudies.org
![Page 7: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/7.jpg)
Presenters• Stephanie Grey
Stephanie's creative solutions have been implemented through websites, printed materials, and environmental graphic design for a wide range of clients. She has lived and worked abroad, gaining an international perspective on design, and developing an understanding of communication solutions that meet the needs of diverse cultures. Recently, Stephanie joined the Graphic Design faculty at Framingham State University.
• Lisa SpitzLisa's experience spans the corporate and nonprofit worlds. Her work includes usability evaluation; interface design; original identity, logo, and web design. Presently she is Director of Design for CAST, responsible for planning and supervising the design of universally designed learning environments, public facing websites, and organizational print collateral.
• Gabriela Sims,Moderator, Institute for Human Centered Design
www.HumanCenteredDesign.org
![Page 8: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/8.jpg)
Vision limitations in the US
More than 169 million people in the US – 55% of the population wear vision correction. U.S. Census
• Presbyopia – a term coming from a Greek word that means “an old man” is the condition that causes people in their middle age to be reliant upon reading glasses to see up close.
• Of the 169 million who wear vision correction, more than 63 million – 53% up to the age of 64 are presbyopic
Light is critical as you age• We require 2x more light at 60 than at 40
There are 1.3 million legally blind people in US
Lisa Spitz // [email protected] // [email protected]
![Page 9: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/9.jpg)
Brain-based limitations rising…
Brain-based conditions 84% of all Special Education students (US DoE, 2006-07)
One in four US adults suffers from a diagnosable mental disorder in any given year
1.4 M Americans experience a Traumatic Brain Injury (TBI) each year
13% (5.3M) of Americans over 65 have Alzheimer’s Disease, projected to double every 20 years
Lisa Spitz // [email protected] // [email protected]
![Page 10: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/10.jpg)
Activity limitation
Source: study commissioned by Microsoft, conducted by Forrester Research, Inc., 2003
0%
5%
10%
15%
20%
25%
30%
Visual Dexterity Hearing Cognitive Speech
Difficulties and Impairments Among Working-Age Adults
Lisa Spitz // [email protected] // [email protected]
![Page 11: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/11.jpg)
Fifty Six SecondsThat is all the time a person will spend watching your loading animation, clicking through your site, reading your copy and making a decision if it’s worthy of a return visit or further exploration. Source: Nielsen Online
Lisa Spitz // [email protected] // [email protected]
![Page 13: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/13.jpg)
Home Page: Light text, with an added shadow, on a light background is difficult to read
Lisa Spitz // [email protected] // [email protected]
![Page 14: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/14.jpg)
The back button doesn’t work once you are in the site
The text is difficult to read on almost every page.
Lisa Spitz // [email protected] // [email protected]
![Page 15: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/15.jpg)
Organizationally we jump to a left side column
The text is too small but a nice feature if colors were changed and the text enlarged
Lisa Spitz // [email protected] // [email protected]
![Page 16: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/16.jpg)
Home page: It’s very difficult to locate the information that will guide you through the site.
Lisa Spitz // [email protected] // [email protected]
![Page 17: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/17.jpg)
The image changes each time you enter their site I’m just not sure these images deliver the best message. Nice shots but maybe better in another location.
Home Page
Lisa Spitz // [email protected] // [email protected]
![Page 18: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/18.jpg)
The wood is a very nice idea, however a darker wood would do the trick along with a bit larger text for the paragraph
Lisa Spitz // [email protected] // [email protected]
![Page 19: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/19.jpg)
Drop down menu is not opaque creating rendering it more difficult to read
Lisa Spitz // [email protected] // [email protected]
![Page 23: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/23.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
• Goals & Objec?ves• Audiences / Personas • Content Inventory• Informa?on Architecture• Wireframes
![Page 24: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/24.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Web ~ Architecture
Audiences / Personas ~ Client
Content Inventory ~ Programming
Informa8on Architecture ~ Site Planning
Wireframes ~ Schema8c Design
![Page 25: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/25.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesGoals & Objec?ves
• Intent: How will your website expand your business? • Present vs. Future State: How will it change over 8me?
• Compe?tors: How are you unique/different?
• Vision: What quali8es do you hope to communicate?
• Success Criteria: How will you measure effec8veness?
![Page 26: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/26.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesAudience / Personas
• Audiences = Who are you designing for?
– Home owners– Businesses (domes8c & interna8onal)– Realtors, Developers, Builders
![Page 27: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/27.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesAudience / Personas
• Personas = Stories about your audiences goals & behaviors
– Age, Gender, Marital Status– Living situa8on & loca8on– Educa8on &/or Employment– Interests and Ac8vi8es– Reasons for visi8ng your site– Impression you want to make– Ac8ons they are hoping to take
![Page 28: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/28.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesContent Inventory
• Content = Text, images & media to be included on your site
– Plans for future growth (+ 5‐10 yrs) – Use descrip8ve links within your content– Audience considera8ons: interna8onal users, individuals with mental disorders, brain injury, alzheimer’s, etc.
![Page 29: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/29.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture
• Informa?on Architecture = Organiza?on and hierarchy of content
– Logical and consistent naming structure– Based on audience expecta8ons
![Page 30: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/30.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Ways of Organizing
• By topic / category
![Page 31: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/31.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Ways of Organizing
• By audience
![Page 32: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/32.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Ways of Organizing
• By task
![Page 33: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/33.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Sample Site Map
![Page 34: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/34.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesWireframes
• Wireframes = S?ck figure layout for par?cular pages
– Important for making decisions– Where things go, not what they look like– Ways of naviga8ng– Hierarchy of content
![Page 35: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/35.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesWireframes // Elements of a Webpage Wireframe
• Company logo
• Site Naviga?on• Page ?tle• Primary page content
• Related content• Copyright statements
• Contact informa?on
![Page 36: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/36.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesWireframes // Sample Wireframe Diagram
h\p://webstyleguide.com/wsg3/3‐informa8on‐architecture/4‐presen8ng‐informa8on.html
![Page 37: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/37.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesWireframes // Things to Consider
• Naviga?on
– Are naviga8onal elements consistently placed on each page?– Have I provided mul8ple pathways through the content? – Will each of my audiences be able to find what they are looking for?
![Page 38: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/38.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesWireframes // Things to Consider
• Hierarchy and Organiza?on
– Are most important things given the space they require?– Is there a logical reading order? – Is there enough space surrounding each element or is it crowded?
![Page 39: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/39.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesWireframes // Sample Wireframe Diagram
![Page 40: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/40.jpg)
Graphic Design Elements
![Page 41: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/41.jpg)
Graphic Design Elements
• An interdependent system of elements for an audience of varied abili6es
• A set of ‘guidelines’ rather than strict rules
![Page 42: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/42.jpg)
• Typography
• Grid
• Naviga6on
• Color
• Images
Graphic Design Elements
![Page 43: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/43.jpg)
Graphic Design Elements
Most common issues within these areas:
• Contrast
• White Space
• Hierarchy
• Consistency
![Page 44: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/44.jpg)
Graphic Design Elements
Type // Typeface Choices
Graphic Design Elements
Typography
• Establishes a visual hierarchy allowing informa6on to be read clearly
Good type
• Used consistently, builds user confidence
![Page 45: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/45.jpg)
Graphic Design Elements
Type // Typeface Choices
Graphic Design Elements
Typography
• Typeface Choices (fonts)
• Bodies of Text
![Page 46: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/46.jpg)
Graphic Design Elements
Type // Typeface Choices
Serif
Sans Serif
![Page 47: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/47.jpg)
Graphic Design Elements
Type // Typeface Choices
Serif
Sans Serif
![Page 48: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/48.jpg)
Graphic Design Elements
Type // Typeface Choices
Sans SerifVerdana Helvetica Trebuchet
![Page 49: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/49.jpg)
Graphic Design Elements
Type // Typeface Choices
SerifGeorgia Times New Roman Palatino
![Page 50: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/50.jpg)
Graphic Design Elements
Type // Typeface Choices
Upper and lower case letters are generally more legible than all uppercase letters.
![Page 51: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/51.jpg)
Graphic Design Elements
Type // Typeface Choices
UPPER AND LOWER CASE LETTERS ARE GENERALLY MORE LEGIBLE THAN ALL UPPERCASE LETTERS.
![Page 52: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/52.jpg)
Graphic Design Elements
Type // Typeface Choices
UPPER AND LOWER CASE LETTERS ARE GENERALLY MORE LEGIBLE THAN ALL UPPERCASE LETTERS.
![Page 53: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/53.jpg)
Graphic Design Elements
Type // Typeface Choices
Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
![Page 54: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/54.jpg)
Graphic Design Elements
Type // Typeface Choices
Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
![Page 55: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/55.jpg)
Graphic Design Elements
Type // Typeface Choices
Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
![Page 56: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/56.jpg)
Graphic Design Elements
Type // Typeface Choices
Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
![Page 57: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/57.jpg)
Graphic Design Elements
Type // Typeface Choices
H , s ffi s.
![Page 58: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/58.jpg)
Graphic Design Elements
Type // Typeface Choices
ResidencesSalzman Residence Highland Park, Illinois
Oversize doors, simply detailed cabinets, reconfigured ceilings and new lighting are composed to create a serene series of interlocking rooms. Cherry cabinets and slate counters bring each space to life, offering a warm and engaging environment.
![Page 59: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/59.jpg)
Graphic Design Elements
Type // Typeface Choices
Residences
Salzman Residence Highland Park, IllinoisOversize doors, simply detailed cabinets, reconfigured ceilings and new lighting are composed to create a serene series of interlocking rooms. Cherry cabinets and slate counters bring each space to life, offering a warm and engaging environment.
![Page 60: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/60.jpg)
Graphic Design Elements
• Point Size & Leading (Line Spacing)
• Line Length & Jus6fica6on
Type // Bodies of Text
![Page 61: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/61.jpg)
Graphic Design Elements
Type // Bodies of Text
Common Issues:
• Point sizes too small
• Lines of text oTen too long/short
• Lack of visual hierarchy
• Not enough white space
• Long, centered paragraphs
![Page 62: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/62.jpg)
Graphic Design Elements
Type // Bodies of Text // Point Size & Leading
• Readers like larger type
• 2 pts. leading for print
• More generous leading is a key to legibility on the web
ex: 12 pt. type / 14 pt. leading
ex: 12 pt. type / 16 pt. leading
![Page 63: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/63.jpg)
point size too small
![Page 64: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/64.jpg)
![Page 65: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/65.jpg)
Body Text12/16 Verdana
Title13/20 Verdana Bold
![Page 66: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/66.jpg)
16 pt.
12 pt.
increased leading
![Page 67: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/67.jpg)
Graphic Design Elements
Type // Bodies of Text // Point Size & Leading
Residences
Salzman Residence Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-locking rooms. Cherry cabinets and slate
Effec%ve Not Effec%ve
Residences
Salzman Residence Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-locking rooms. Cherry cabinets and slate
![Page 68: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/68.jpg)
Graphic Design Elements
Type // Bodies of Text // Point Size & Leading
Residences
Salzman Residence Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-locking rooms. Cherry cabinets and slate
Effec%ve Not Effec%ve
Residences
Salzman Residence
Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-
locking rooms. Cherry cabinets and slate
![Page 69: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/69.jpg)
Graphic Design Elements
Type // Bodies of Text // Line Length & Jus6fica6on
• 8–16 words per line for comfort
• Jus6fy on the leT margin
• Allow for white space around text
![Page 70: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/70.jpg)
too long
![Page 71: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/71.jpg)
Graphic Design Elements
Type // Bodies of Text // Line Length & Jus6fica6on
not long enough
Salzman Residence Highland Park, Illinois
Oversize doors, simply detailed cabinets, reconfigured ceilings and new lighting are composed to create a serene series of interlocking rooms. Cherry cabinets and slate counters bring each space to life, offering a warm and engaging environment.
![Page 72: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/72.jpg)
Graphic Design Elements
Type // Bodies of Text // Line Length & Jus6fica6on
effec6ve length
Partnerships in Health aims to improve the health and well-being of
vulnerable individuals, children and families by integrating legal assistance
into the medical setting. We address social determinants of health and
seek to eliminate barriers to healthcare in order to help people meet their
basic needs and to help them stay healthy. Not every illness has a biological
remedy. A family forced to choose between food and heat in the winter
months cannot be treated with a prescription or a vaccination. Similarly,
an asthmatic person will never breathe symptom free—no matter how
much medication is administered—if he or she returns from the doctor’s
office to mold-infested housing, as thousands do.
![Page 73: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/73.jpg)
effec6ve length
effec6ve length, not enough contrast
![Page 74: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/74.jpg)
Graphic Design Elements
Type // Bodies of Text // Line Length & Jus6fica6on
• Always use leT-‐jus6fied text for the web
• Centered and right-‐jus6fied text blocks are difficult to read
![Page 75: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/75.jpg)
![Page 76: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/76.jpg)
---
--
---
--
-
![Page 77: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/77.jpg)
---
--
---
--
-
![Page 78: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/78.jpg)
Centered, Ragged Left and Right
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia
nestotatio moluptur, consequia venis dis quidem volorro optassu ntia
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia
nestotatio moluptur, consequia venis dis quidem volorro optassu ntia-
tur, se sum nonsequi blatur
![Page 79: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/79.jpg)
Centered, Ragged Left and Right
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia
nestotatio moluptur, consequia venis dis quidem volorro optassu ntia
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia
nestotatio moluptur, consequia venis dis quidem volorro optassu ntia-
tur, se sum nonsequi blatur
![Page 80: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/80.jpg)
---
--
---
--
-
![Page 81: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/81.jpg)
---
--
---
--
-
![Page 82: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/82.jpg)
![Page 83: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/83.jpg)
point size/leadingrela%onship
Effec6ve
![Page 84: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/84.jpg)
hierarchy
hierarchy
Effec%ve
![Page 85: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/85.jpg)
Effec%ve
white space
white spacele9 jus%fied
![Page 86: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/86.jpg)
contrast
contrast
Effec%ve
![Page 87: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/87.jpg)
Effec%ve More Effec%ve
![Page 88: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/88.jpg)
Graphic Design Elements
Type // Typeface Choices
Graphic Design Elements
Typography
• To help maintain consistency, create a wrifen style guide ahead of 6me that defines fonts, 6tles, sub-‐6tles, and paragraphs
Sugges6on
![Page 89: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/89.jpg)
Graphic Design Elements
Grids
Grids
• Organize iden6ty, naviga6on and content
• Create consistency and hierarchy
• Are a necessary element for any website
![Page 90: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/90.jpg)
![Page 91: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/91.jpg)
![Page 92: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/92.jpg)
![Page 93: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/93.jpg)
TheGridSystem.org
![Page 94: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/94.jpg)
960 Grid960.gs
![Page 95: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/95.jpg)
960 Grid960.gs
![Page 96: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/96.jpg)
Graphic Design Elements
Type // Typeface Choices
Graphic Design Elements
Naviga6on
Common Issues:
• Losing Your Place
• Images/Words too Small to Click
• Difficult to Read or Find
![Page 97: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/97.jpg)
![Page 98: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/98.jpg)
![Page 99: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/99.jpg)
Where am I?
![Page 100: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/100.jpg)
![Page 101: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/101.jpg)
![Page 102: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/102.jpg)
![Page 103: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/103.jpg)
![Page 104: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/104.jpg)
![Page 105: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/105.jpg)
![Page 106: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/106.jpg)
![Page 107: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/107.jpg)
![Page 108: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/108.jpg)
![Page 109: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/109.jpg)
Graphic Design Elements
Type // Typeface Choices
Graphic Design Elements
Color
• A key component of usability
• Almost 10 percent of male readers have trouble dis6nguishing shades of red from shades of green
• The most common issue with color is not enough contrast
![Page 110: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/110.jpg)
Effective Contrast
More Effective Contrast
Less Effective Contrast
![Page 111: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/111.jpg)
The optimal combination for legibility is black on white
![Page 112: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/112.jpg)
White text on black is almost as good for legibility
![Page 113: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/113.jpg)
Attention
• Reverse text helps to call out important information
![Page 114: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/114.jpg)
Light Colors
Dark Colors
Hue: basic colorcategories
![Page 115: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/115.jpg)
Light Colors
Dark Colors
Effective
Effective
Aries Arditi, PhD
![Page 116: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/116.jpg)
Light Colors
Dark Colors
Not Effective
Effective
Effective
Not Effective
Aries Arditi, PhD
![Page 117: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/117.jpg)
![Page 118: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/118.jpg)
![Page 119: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/119.jpg)
Effec%ve Range of Hues
![Page 120: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/120.jpg)
Graphic Design Elements
Images
Common Issues:
• Images Behind Text
![Page 121: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/121.jpg)
Not Effec6ve
![Page 122: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/122.jpg)
Not Effec6ve
![Page 123: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/123.jpg)
![Page 124: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/124.jpg)
![Page 125: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/125.jpg)
![Page 126: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/126.jpg)
Resources
Web Style Guide (Yale)WebStyleGuide.com
![Page 128: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/128.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tips for Implementa?on
• Naviga?on• Images • Mul?media• Flash
![Page 129: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/129.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tips for Implementa?on
Text // Font ChoicesNaviga?on
• Don’t do anything that would disable browser controls
![Page 130: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/130.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tips for Implementa?on
Text // Font ChoicesImages
• Use ALT text to communicate the content and purpose of a graphic <alt=“insert your text here”>
• Use Null ALT text for images that are purely decora?ve <alt=“”>
• For images that can not be described briefly with alt text, provide a long descrip?on
![Page 131: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/131.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tips for Implementa?on
Text // Font ChoicesMul?media
• Limit background noise in audio and video files
• Provide text alterna?ves for audio and video files (e.g. transcripts for audio files, cap?ons for videos)
• Allow control over play, pause, stop, mute, and volume for all audio and video files
![Page 132: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/132.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tips for Implementa?on
Text // Font ChoicesFlash
• Avoid content that moves, blinks, or flashes
• Make sure flash does not interfere with screen reader, audio or keyboard commands
• Either use NO ?me sensi?ve content or allow users to manipulate or control it
• Allow font sizes to be enlarged or reduced• Provide text equivalents for all non text elements that convey meaning
![Page 134: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/134.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
• Ask Key Ques?ons• Evaluate Your Work• Collect Data• Ask an Objec?ve Outsider
![Page 135: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/135.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesAsk Key Ques?ons
• Purpose = develop a “user‐centered” mindset
– Who is my audience?– When are they accessing my site? – Where are they when viewing my site? – Why are they coming to my site?– What are you trying to communicate? – How does the experience of using your website address their current needs?
![Page 136: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/136.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesEvaluate Your Work
• Purpose = Iden?fy poten?al usability issues for individuals with vision and brain‐based limita?ons
![Page 137: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/137.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesEvaluate Your Work // Vision Limita?ons
• Increase font sizes 200‐300%
![Page 138: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/138.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesEvaluate Your Work // Vision Limita?ons
• Use a color contrast checker: h\p://juicystudio.com/services/luminositycontrastra8o.php
![Page 139: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/139.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesEvaluate Your Work // Vision Limita?ons
• View website under color blindness condi?ons: h\p://colorfilter.wickline.org/
![Page 140: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/140.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesEvaluate Your Work // Vision Limita?ons
• Check images for Alt Tags: h\p://wave.webaim.org
![Page 141: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/141.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesEvaluate Your Work // Brain‐Based Limita?ons
• Read content for a 6‐9th grade reading level• Step back and squint at the website• Look for mul?ple ways of naviga?ng
• Check that naviga?on is in same loca?on on all pages
• Check that current loca?on is clearly marked
• Look for consistent font styles and easy to read line lengths• Read links to see if they make sense out of context
![Page 142: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/142.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesCollect Data
• Purpose = Get the most informa?on about how people use your website with site sta?s?cs and heat maps
![Page 143: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/143.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesCollect Data // Site Sta?s?cs
• Track page views, bounce rates, average ?me on site, etc.– h\p://www.google.com/analy8cs
![Page 144: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/144.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesCollect Data // Heat Maps
• See where most people look/click on your website
– h\p://www.crazyegg.com– h\p://www.labsmedia.com/clickheat – h\p://www.clickdensity.com
![Page 145: The User-Friendly Website](https://reader036.fdocuments.in/reader036/viewer/2022070304/54c732c74a7959d67c8b45fd/html5/thumbnails/145.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tools for Assessing Your Site
Text // Font ChoicesAsk an Objec?ve Outsider
• Purpose = Get an objec?ve view of your website
– Ask someone who has not been involved in your design process.– The most valuable feedback will come from your ‘audience’.