Great design and usability, your website can have both.
Upcoming SlideShare
Loading in...5
×
 

Great design and usability, your website can have both.

on

  • 137 views

Using examples and resource, this session will explore how good organization can make navigation easier; identify graphic design tips to improve website legibility; review legal precedence of ICT ...

Using examples and resource, this session will explore how good organization can make navigation easier; identify graphic design tips to improve website legibility; review legal precedence of ICT accessibility; offer a general overview of relevant guidelines such as Section 508 of the Rehabilitation Act and WAI-WCAG 2.0; and highlight specific considerations for cultural institutions.

Statistics

Views

Total Views
137
Views on SlideShare
137
Embed Views
0

Actions

Likes
0
Downloads
1
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

    Great design and usability, your website can have both. Great design and usability, your website can have both. Presentation Transcript

    • Great design and usability, your website can have both. www.HumanCenteredDesign.org May 19, 2013 American Alliance of Museums Annual Meeting
    • 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.
    • Design powerfully and profoundly influences everyone and our sense of confidence, comfort, and control. Variation in ability is ordinary, not special, and affects most of us for at least part of our lives. 2 core beliefs… www.HumanCenteredDesign.org
    • www.HumanCenteredDesign.orgwww.HumanCenteredDesign.org Scope of Services Regional, National, International Design & Consulting on accessibility and universal design  Built environment  Products, service design  Information & Communication Technology (ICT) Technical Assistance (federal funding)  Fair Housing Accessibility – National  Americans with Disabilities Act User/Expert Lab – review by people with physical, sensory, brain-based conditions at IHCD or the field Education & Training on accessibility and universal design Research – qualitative and quantitative
    • www.HumanCenteredDesign.org Institute for Human Centered Design Technical Assistance Projects One of ten national centers providing information, guidance and training on the Americans with Disabilities Act. 800-949-4232 v/tty A member of the 888-341-7781 v/tty A program of the US Department of Housing and Urban Development providing information on the Fair Housing Act design and construction requirements.
    • www.HumanCenteredDesign.org
    • 2011 2010 2009 IHCD Publishes a Book a Year www.HumanCenteredDesign.org 2012
    • Presenters • Lisa Spitz, Lisa Spitz Design BA Psychology and Graphic Arts, Regis College - M.Des, Interaction Design, Carnegie Mellon Lisa is a strategic, detail-oriented, Senior User Experience Designer with 10+ years experience in corporate and nonprofit worlds. Lisa is passionate about leveraging the power of design to transform business needs into meaningful user experiences. Her work includes user research, information architecture, interface/web design, print design, usability evaluation and consultation. • Gabriela Sims, Institute for Human Centered Design (IHCD) BA, Communication Design, Parsons School of Design MPA, Suffolk University Gabriela has been at IHCD since 1992. Originally trained in graphic design, she oversees graphic quality in all IHCD projects including books, websites, information products, and marketing. She also works with the technical specialists on IHCD’s review of websites to ensure accessibility. www.HumanCenteredDesign.org
    • A little background on the need for accessible websites…
    • The legal precedence
    • Legal Precedence for Accessible Websites • Section 504 of Rehabilitation Act: Programs that receive federal assistance • Section 508 of the Rehabilitation Act: Federal agencies or entities that supply or contract to them • Americans with Disabilities Act Title I – Employment, reasonable accommodations Title II – State & Local Government Title III – Places of public accommodations • 21st Century Communications and Video Accessibility Act of 2010 (CCVA): Video content – closed captions, video description, mobile browser accessibility
    • Section 508 Compliance - Snapshot • Requires electronic and information products for and by government entities to be accessible (physical, sensory) • Includes websites, software, online services, multi- media and hardware • While the overarching principle is equivalent access, guidelines allow for alternate access. • Section 508 is undergoing a refresh by US Access board to align with WAI-WCAG
    • Section 504 Compliance - Snapshot Section 504 provides for equal opportunity to enter facilities and participate in programs and activities. • The important considerations are that disabled people have:  the same opportunities in employment,  the same opportunities to enter and move around in facilities,  the same opportunities to communicate, and  the same opportunities to participate in programs
    • Section 504 Compliance - Snapshot Under 504 there is an obligation to program accessibility. Websites are a really important backbone of the museum experience and this creates a need to pay attention to creating an accessible website. These days so much happens on websites - access to galleries, community forums etc. Remember legal compliance will only get you to minimum 508 standards – user friendly graphics are often over looked but go beyond...
    • 21st Century CVAA Compliance - Snapshot • The CCVA contains groundbreaking protections to enable people with disabilities to access broadband, digital and mobile innovations. • Title I addresses communications access to make products and services using Broadband fully accessible to people with disabilities. For example smart phones will be required to be usable by blind and visually impaired people • Title II makes it easier for people with disabilities to view video programming on television and Internet –
    • WC3/WAI – Taking it further
    • W3C WAI WCAG 2.0- Snapshot Calls for information to be: • Understandable – readable and understandable text as well as the operation of the user interface • Perceivable – text and other alternatives for non-text and multi-media; multiple ways of presenting information • Operable – keyboard access, cognitively sound, easy to navigate • Robust – compatible with variety of tools
    • RtF – Taking it further
    • But legal precedence is still minimum compliance…
    • Vision loss in the US  More than 62% of the population of people over 40 have vision problems National Eye Institute, based on 2010 U.S. Census Populations  Approximately 30% of the population has Presbyopia • Presbyopia means "old eye" and involves the loss of the eye's ability to focus on close objects, the condition that causes people in their middle age to be reliant upon reading glasses to see up close.  Light is critical as you age. We require 2x more light at 60 than at 40  70% of U.S. adults experience some form of digital eye strain while using their electronic devicesVision Council of America, 2012  There are 1.3 million legally blind people in US  Approximately 75% of adults use some sort of vision correction Vision Council of America
    • Vision loss in the US Macular Degeneration: In general, magnification and high levels of illumination will assist in reading and other near vision tasks. Photos courtesy of National Eye Institute
    • Vision loss in the US Photos courtesy of National Eye Institute Cataracts: Age related cataracts are often yellow or brown causing loss of sensitivity to blue.
    • Vision loss in the US Photos courtesy of National Eye Institute Diabetic Retinopathy: The largest single cause of visual impairment among those of working age. Impacts between 40 to 45 percent of Americans diagnosed with diabetes.
    • Vision loss in the US Photos courtesy of National Eye Institute Color Blindness: Impacts 1 of 76 Americans. Causes difficulties seeing colors in red-green, yellow-blue range and while rare, any color range at all.
    • Vision loss in the US Photos courtesy of National Eye Institute Color Blindness: Press the Green button to Start
    •  One in five people in the United States has a learning disability Twenty-ninth annual Report to Congress, U.S. Dept of Ed. 2010  One in four US adults suffers from a diagnosable mental disorder in any given year  1.5 to 2 M Americans experience a Traumatic Brain Injury (TBI) each year Centers for Disease Control and Prevention, National Center for Injury Prevention and Control, March 25, 2010  In the US there are believed to be at least 5 million individuals with age-related dementias. It is estimated that 1 in 6 women, and 1 in 10 men, who live past the age of 55 will develop dementia in their lifetime Institute for Dementia Research & Prevention, Pennington Biomedical Research Center Brain-based conditions rising…
    • 1. Specific learning disabilities 2. Speech/language impairments 3. Intellectual limitation 4. Emotional disturbance 5. Other health impairment 6. Developmental delay 7. Autism (source: U.S. DoE, 2005-6, IDEA) Cognitive variations… Most prevalent types of disabilities for children in the US… 13.8% of all youth age 3-21
    • This population is larger than those with all other physical and sensory disabilities combined Web AIM’s Cognitive accessibility can be defined by the following principles: Simple Consistent Clear Multimodal Error-tolerant Attention-focusing Cognitive Variations…
    • Activity difficulties 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
    • Examples of common problems…
    • 1. Color Usage
    • 2. Font Size & Style Poor legibility: Low contrast, condensed fonts and stylized font striping
    • Light text, with an added shadow, on a light background is difficult to read
    • Drop down menu is not opaque rendering it more difficult to read
    • Flash that makes you wait and gives you no easy way to skip it is frustrating, it also doesn’t work very well with smart phones and tablets 3. Over use of flash
    • Navigation is not intuitive, the back button doesn’t work once you are in the site 4. Lack of Intuitiveness
    • Home page: It’s very difficult to locate the information that will guide you through the site.
    • 6. Information conveyed only with color, that wasn’t also conveyed without color. Registration 7. General difficulty in finding critical information, for example hours of operation, ticket prices and accessibility information. 5. Meaningless out of context Alt. Text: Instead of ‘Click Here’ it should say what it is. “Registration” “Buy Tickets” etc.
    • You  can  make  a  difference
    • New  WHO  defini5on  of  disability -­‐ “Disability  occurs  in  the  interac2on  between  a  person,  his  or  her   func2onal  ability,  and  the  environment.” -­‐ “One  is  more  or  less  disabled  based  on  the  intersec2on  between   herself,  her  func2onal  abili2es,  and  the  many  types  of  environments   with  which  she  interacts.”   -­‐ “The  experience  of  disability  can  be  minimized  by  designing   environments  to  accommodate  varying  func5onal  abili5es  and   providing  individualized  solu5ons  when  needed.” -­‐ Source:  h?p://www.accessingsafety.org   Why  Design  for  “All”?
    • Poten5al  website  visitors  include… Why  Design  for  “All”?
    • If  you  only  include  the  middle... Why  Design  for  “All”?
    • But  if  you  look  to  the  outskirts... Why  Design  for  “All”?
    • But  wait,  that’s  not  all...
    • But  wait,  that’s  not  all... The  rise  of  touch  devices -­‐ 31%  of  American  adults  own  a  tablet  computer  (January  2013) -­‐ 87%  of  American  adults  have  a  cell  phone  (December  2012) -­‐ 45%  of  American  adults  have  a  smartphone  (December  2012) -­‐ Source:  h?p://pewinternet.org/Commentary/2012/February/Pew-­‐Internet-­‐Mobile.aspx
    • But  wait,  that’s  not  all... Source:  h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html
    • But  wait,  that’s  not  all... Source:  h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html
    • But  wait,  that’s  not  all... Source:  h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html
    • But  wait,  that’s  not  all... Source:  h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html
    • But  wait,  that’s  not  all... Source:  h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html
    • But  wait,  that’s  not  all... Source:  h?p://designtaco.com/?p=893
    • Crea5ng  a  posi5ve   user  experience   for  all  users   across  all  devices
    • What  is  “User  Experience”? -­‐ "User  experience"  encompasses  all  aspects  of  the  end-­‐user's   interac2on  with  the  company,  its  services,  and  its  products.”   -­‐ Source:  Nielsen  Norman  Group h?p://www.nngroup.com/about/userexperience.html   Crea=ng  a  Posi=ve  User  Experience
    • The  User  Experience  Honeycomb Crea=ng  a  Posi=ve  User  Experience -­‐ Source:  User  Experience  Design  by  Peter  Morville h?p://seman2cstudios.com/publica2ons/seman2cs/000029.php
    • Tools  for  Assessing  Your  Site
    • Tools  for  Assessing  Your  Site •  Purpose   –  Iden2fy  poten2al  usability  or  accessibility  issues –  Understand  what  your  site  looks  like  on  Tablets  and        Smartphones  and  iden2fy  poten2al  usability  issues DIY  (Do  it  yourself)
    • Tools  for  Assessing  Your  Site DIY  Methods •  Increase  font  sizes  200-­‐300%
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesDIY  Methods •  Use  a  color  contrast  checker              h?p://juicystudio.com/services/luminositycontrastra2o.php  
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesDIY  Methods •  View  website  under  color  blindness  condi5ons            h?p://colorfilter.wickline.org/
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesDIY  Methods •  Check  images  for  Alt  Tags        h?p://wave.webaim.org  
    • Tools  for  Assessing  Your  Site DIY  Methods •  Test  your  website  across  placorms          http://mattkersley.com/responsive/
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesUser  Research •  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?
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesUser  Research •  5  second  test        h?p://fivesecondtest.com/  
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesUser  Research •  Chalkmark        h?p://www.op2malworkshop.com/chalkmark  
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesUser  Research •  UserTes5ng        h?p://www.usertes2ng.com/  
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesUser  Research •  Track  page  views,  bounce  rates,  average  5me  on  site,  etc.        h?p://www.google.com/analy2cs  
    • Tools  for  Assessing  Your  Site Text  //  Font  ChoicesUser  Research •  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  
    • Approach  for  Redesigning   Your  Site
    • Process •  Audiences  /  Personas   •  Goals  &  Objec5ves •  Content  Inventory •  Informa5on  Architecture •  Wireframes
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesAudience  /  Personas •  Audiences  =  Who  are  you  designing  for? –  Individuals –  Families –  Schools –  Poten2al  employees –  Funders
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesAudience  /  Personas •  Personas  =  Stories  about  your  audiences  goals  &  behaviors –  Age,  Gender,  Marital  Status –  Living  situa7on  &  loca7on –  Educa2on  &/or  Employment –  Interests  and  Ac2vi2es –  Reasons  for  visi2ng  your  site –  Impression  you  want  to  make –  Ac2ons  they  are  hoping  to  take
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesGoals  &  Objec5ves •  Intent:  How  will  your  website  expand  your  business?   •  Present  vs.  Future  State:  How  will  it  change  over  2me?   •  Compe5tors:  How  are  you  unique/different? •  Vision:  What  quali2es  do  you  hope  to  communicate? •  Success  Criteria:  How  will  you  measure  effec2veness?
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesContent  Inventory   •  Content  =  Text,  images  &  media  to  be  included  on  your  site –  Plans  for  future  growth  (+  5-­‐10  yrs)     –  Use  descrip2ve  links  within  your  content –  Audience  considera5ons:  interna2onal        users,  individuals  with  mental  disorders,        brain  injury,  alzheimer’s,  etc.
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesInforma5on  Architecture •  Informa5on  Architecture  =  Organiza5on  and  hierarchy        of  content –  Logical  and  consistent  naming  structure –  Based  on  audience  expecta2ons
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesInforma5on  Architecture  //  Ways  of  Organizing •  By  topic  /  category
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesInforma5on  Architecture  //  Ways  of  Organizing •  By  audience
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesInforma5on  Architecture  //  Ways  of  Organizing •  By  task  
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesInforma5on  Architecture  //  Sample  Site  Map
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesWireframes •  Wireframes  =  S5ck  figure  layout  for  par5cular  pages –  Important  for  making  decisions –  Where  things  go,  not  what  they  look  like –  Ways  of  naviga2ng –  Hierarchy  of  content
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesWireframes  //  Elements  of  a  Webpage  Wireframe •  Company  logo •  Site  Naviga5on •  Page  5tle •  Primary  page  content •  Related  content •  Copyright  statements •  Contact  informa5on
    • Approach  for  redesigning  your  site Text  //  Font  ChoicesWireframes  //  Sample  Wireframe  Diagram h<p://webstyleguide.com/wsg3/3-­‐informa7on-­‐architecture/4-­‐presen7ng-­‐informa7on.html
    • Website  Planning  Process Text  //  Font  ChoicesWireframes  //  Things  to  Consider •  Naviga5on –  Are  naviga2onal  elements  consistently  placed  on  each  page? –  Have  I  provided  mul2ple  pathways  through  the  content?   –  Will  each  of  my  audiences  be  able  to  find  what  they  are  looking  for? •  Hierarchy  and  Organiza5on –  Are  most  important  things  given  the  space  they  require? –  Is  there  a  logical  reading  order?  
    • Website  Planning  Process Text  //  Font  ChoicesWireframes  //  Things  to  Consider MOBILETABLET
    • Graphic  Design  Elements
    • Graphic  Design  Elements •  An  interdependent  system        of  elements  for  an  audience        of  varied  abili;es •  A  set  of  ‘guidelines’  rather        than  strict  rules
    • •  Typography •  Grid •  Naviga;on •  Color •  Images Graphic  Design  Elements
    • Graphic  Design  Elements Most  common  issues: •  Font  choice  and  size •  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
    • 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.
    • 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
    • - - - - - - - - - -
    • - - - - - - - - - -
    • 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
    • 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
    • Larger text would be more effective Nice color system helps with navigation Effective font size and leading Larger text would be more effective
    • 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
    • Graphic  Design  Elements Images Common  Issues: •  Images  Behind  Text
    • Not  Effec6ve
    • Not  Effec6ve
    • Graphic  Design  Elements Type  //  Typeface  Choices Graphic  Design  Elements Mobile  Device  Considera1ons •  Space-­‐Efficient  Type •  Plain  Backgrounds •  Le>-­‐Aligned  Text •  Clear  Touch  targets
    • Increase  the  size  and  margin  for  bu4ons  and  calls-­‐to-­‐ac7on. Source:  h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness   Not  Effec)ve Effec)ve
    • Ensure  links  and  calls-­‐to-­‐ac7on  look  tap-­‐able  without  hover  states. Source:  h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness   Not  Effec)ve Effec)ve
    • Increase  font  sizes  for  legibility. Source:  h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness   Not  Effec)ve Effec)ve
    • Increase  padding  around  naviga7on  menu  items. Source:  h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness   Not  Effec)ve Effec)ve
    • Increase  margins  on  pages  and  content  blocks. Source:  h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness   Not  Effec)ve Effec)ve
    • Increase  form  field  size  and  spacing. Source:  h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness   Not  EffecCve EffecCve
    • Design for Accessibility A national project leading to a new digital resource on accessibility and universal design in cultural environments In cooperation with the Institute for Human Centered Design Coming your way in fall 2013!
    • An international nonprofit based in Boston dedicated to enhancing the experiences of people of all ages and abilities through excellence in design. Thank you! Come visit us at Booth #1024