The User-Friendly Website
Upcoming SlideShare
Loading in...5
×
 

The User-Friendly Website

on

  • 94 views

Thoughtful, user-friendly design starts with your website, an opportunity to demonstrate ...

Thoughtful, user-friendly design starts with your website, an opportunity to demonstrate
how much you value the needs of your clients. We provide clear examples to help you create a site that satisfies esthetically and functionally.

Statistics

Views

Total Views
94
Slideshare-icon Views on SlideShare
94
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    The User-Friendly Website The User-Friendly Website Presentation Transcript

    • The User-Friendly Website www.HumanCenteredDesign.org November 18, 2009 Build Boston
    • 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
    • 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
    • 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
    • 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.
    • www.HumanCenteredDesign.org 617.695.1225 voice/tty 617.482.8099 fax 200 Portland Street, Boston, MA 02114 www.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 Projects New England Americans with Disabilities Act (ADA) Center, 1.800.949.4232 voice/tty National Endowment for the Arts Universal Design Case Study Project www.UDcasestudies.org
    • 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 Spitz Lisa'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
    • 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 // lspitz@cast.org // lisa@lisaspitz-design.com
    • 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 // lspitz@cast.org // lisa@lisaspitz-design.com
    • 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 // lspitz@cast.org // lisa@lisaspitz-design.com
    • Fifty Six Seconds That 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 // lspitz@cast.org // lisa@lisaspitz-design.com
    • Examples: the not so good but could be… Lisa Spitz // lspitz@cast.org // lisa@lisaspitz-design.com
    • Home Page: Light text, with an added shadow, on a light background is difficult to read Lisa Spitz // lspitz@cast.org // lisa@lisaspitz-design.com
    • The back button doesn’t work once you are in the site The text is difficult to read on almost every page. Lisa Spitz // lspitz@cast.org // lisa@lisaspitz-design.com
    • 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 // lspitz@cast.org // lisa@lisaspitz-design.com
    • Home page: It’s very difficult to locate the information that will guide you through the site. Lisa Spitz // lspitz@cast.org // lisa@lisaspitz-design.com
    • 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 // lspitz@cast.org // lisa@lisaspitz-design.com
    • 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 // lspitz@cast.org // lisa@lisaspitz-design.com
    • Drop down menu is not opaque creating rendering it more difficult to read Lisa Spitz // lspitz@cast.org // lisa@lisaspitz-design.com
    • This feature could be made more apparent Lisa Spitz // lspitz@cast.org // lisa@lisaspitz-design.com
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process • Goals & Objec?ves • Audiences / Personas  • Content Inventory • Informa?on Architecture • Wireframes
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process Web ~ Architecture Audiences / Personas ~ Client Content Inventory ~ Programming Informa8on Architecture ~ Site Planning Wireframes ~ Schema8c Design
    • Lisa Spitz  //  lspitz@cast.org  //  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?
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  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.
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process Text // Font ChoicesInforma?on Architecture // Ways of Organizing • By topic / category
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process Text // Font ChoicesInforma?on Architecture // Ways of Organizing • By audience
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process Text // Font ChoicesInforma?on Architecture // Ways of Organizing • By task 
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process Text // Font ChoicesInforma?on Architecture // Sample Site Map
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process Text // Font ChoicesWireframes // Sample Wireframe Diagram hp://webstyleguide.com/wsg3/3‐informa8on‐architecture/4‐presen8ng‐informa8on.html
    • Lisa Spitz  //  lspitz@cast.org  //  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? 
    • Lisa Spitz  //  lspitz@cast.org  //  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?
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Website Planning Process Text // Font ChoicesWireframes // Sample Wireframe Diagram
    • Graphic  Design  Elements
    • Graphic  Design  Elements •  An  interdependent  system        of  elements  for  an  audience        of  varied  abili6es •  A  set  of  ‘guidelines’  rather        than  strict  rules
    • •  Typography •  Grid •  Naviga6on •  Color •  Images Graphic  Design  Elements
    • Graphic  Design  Elements Most  common  issues   within  these  areas: •  Contrast •  White  Space •  Hierarchy •  Consistency
    • 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
    • Graphic  Design  Elements Type  //  Typeface  Choices Graphic  Design  Elements Typography •  Typeface  Choices  (fonts) •  Bodies  of  Text
    • Graphic  Design  Elements Type  //  Typeface  Choices Serif Sans Serif
    • Graphic  Design  Elements Type  //  Typeface  Choices Serif Sans Serif
    • Graphic  Design  Elements Type  //  Typeface  Choices Sans Serif Verdana Helvetica Trebuchet
    • Graphic  Design  Elements Type  //  Typeface  Choices Serif Georgia Times New Roman Palatino
    • Graphic  Design  Elements Type  //  Typeface  Choices Upper and lower case letters are generally more legible than all uppercase letters.
    • Graphic  Design  Elements Type  //  Typeface  Choices UPPER AND LOWER CASE LETTERS ARE GENERALLY MORE LEGIBLE THAN ALL UPPERCASE LETTERS.
    • Graphic  Design  Elements Type  //  Typeface  Choices UPPER AND LOWER CASE LETTERS ARE GENERALLY MORE LEGIBLE THAN ALL UPPERCASE LETTERS.
    • Graphic  Design  Elements Type  //  Typeface  Choices Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
    • Graphic  Design  Elements Type  //  Typeface  Choices Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
    • Graphic  Design  Elements Type  //  Typeface  Choices Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
    • Graphic  Design  Elements Type  //  Typeface  Choices Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.
    • Graphic  Design  Elements Type  //  Typeface  Choices H ,     s   ffi     s.
    • Graphic  Design  Elements Type  //  Typeface  Choices Residences 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.
    • Graphic  Design  Elements Type  //  Typeface  Choices Residences 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.
    • Graphic  Design  Elements •  Point  Size  &  Leading  (Line  Spacing) •  Line  Length  &  Jus6fica6on Type  //  Bodies  of  Text
    • 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
    • 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
    • point  size  too  small
    • Body  Text 12/16  Verdana Title 13/20  Verdana  Bold
    • 16  pt. 12  pt. increased  leading
    • 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  
    • 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  
    • 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
    • too   long
    • 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
    • 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.
    • effec6ve  length effec6ve  length,  not  enough  contrast
    • 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
    • -­ -­ -­ -­ -­ -­ -­ -­ -­ -­
    • -­ -­ -­ -­ -­ -­ -­ -­ -­ -­
    • 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  
    • 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  
    • -­ -­ -­ -­ -­ -­ -­ -­ -­ -­
    • -­ -­ -­ -­ -­ -­ -­ -­ -­ -­
    • point  size/ leading rela%onship Effec6ve
    • hierarchy hierarchy Effec%ve
    • Effec%ve white  space white  space le9  jus%fied
    • contrast contrast Effec%ve
    • Effec%ve More  Effec%ve
    • 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
    • Graphic  Design  Elements Grids Grids •  Organize  iden6ty,      naviga6on  and  content •  Create  consistency        and  hierarchy •  Are  a  necessary      element  for  any  website
    • TheGridSystem.org
    • 960  Grid 960.gs
    • 960  Grid 960.gs
    • 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
    • Where  am  I?
    • 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
    • Effective Contrast More Effective Contrast Less Effective Contrast
    • The optimal combination for legibility is black on white
    • White text on black is almost as good for legibility
    • Attention • Reverse text helps to call out important information
    • Light Colors Dark Colors Hue: basic color categories
    • Light Colors Dark Colors Effective Effective Aries Arditi, PhD
    • Light Colors Dark Colors Not Effective Effective Effective Not Effective Aries Arditi, PhD
    • Effec%ve  Range  of  Hues
    • Graphic  Design  Elements Images Common  Issues: •  Images  Behind  Text
    • Not  Effec6ve
    • Not  Effec6ve
    • Resources Web  Style  Guide  (Yale) WebStyleGuide.com
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tips for Implementa?on
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tips for Implementa?on • Naviga?on • Images  • Mul?media • Flash
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tips for Implementa?on Text // Font ChoicesNaviga?on • Don’t do anything that would disable browser controls
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tools for Assessing Your Site
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tools for Assessing Your Site • Ask Key Ques?ons • Evaluate Your Work • Collect Data • Ask an Objec?ve Outsider
    • Lisa Spitz  //  lspitz@cast.org  //  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?
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tools for Assessing Your Site Text // Font ChoicesEvaluate Your Work // Vision Limita?ons • Increase font sizes 200‐300%
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tools for Assessing Your Site Text // Font ChoicesEvaluate Your Work // Vision Limita?ons • Use a color contrast checker:      hp://juicystudio.com/services/luminositycontrastra8o.php 
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tools for Assessing Your Site Text // Font ChoicesEvaluate Your Work // Vision Limita?ons • View website under color blindness condi?ons:      hp://colorfilter.wickline.org/
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tools for Assessing Your Site Text // Font ChoicesEvaluate Your Work // Vision Limita?ons • Check images for Alt Tags:     hp://wave.webaim.org 
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  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
    • Lisa Spitz  //  lspitz@cast.org  //  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. – hp://www.google.com/analy8cs 
    • Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com  Tools for Assessing Your Site Text // Font ChoicesCollect Data // Heat Maps • See where most people look/click on your website – hp://www.crazyegg.com – hp://www.labsmedia.com/clickheat  – hp://www.clickdensity.com 
    • Lisa Spitz  //  lspitz@cast.org  //  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’.