Website Planning ProcessLisa Spitz  //  //  lisa@lisaspitz‐ 
Website Planning ProcessLisa Spitz  //  //  lisa@lisaspitz‐ 
Website Planning Process              • Goals & Objec?ves              • Audiences / Personas               • Content Inve...
Website Planning ProcessWeb                                   ~         ArchitectureAudiences / Personas                  ...
Website Planning ProcessGoals & Objec?vesText // Font Choices• Intent: How will your website expand your business? • Prese...
Website Planning ProcessAudience / PersonasText // Font Choices• Audiences = Who are you designing for?   – Home owners   ...
Website Planning ProcessAudience / PersonasText // Font Choices• Personas = Stories about your audiences goals & behaviors...
Website Planning ProcessContent Inventory Text // Font Choices• Content = Text, images & media to be included on your site...
Website Planning ProcessInforma?on ArchitectureText // Font Choices• Informa?on Architecture = Organiza?on and hierarchy  ...
Website Planning ProcessInforma?on Architecture // Ways of OrganizingText // Font Choices• By topic / categoryLisa Spitz  ...
Website Planning ProcessInforma?on Architecture // Ways of OrganizingText // Font Choices• By audienceLisa Spitz  //  lspi...
Website Planning ProcessInforma?on Architecture // Ways of OrganizingText // Font Choices• By task Lisa Spitz  //  lspitz@...
Website Planning ProcessInforma?on Architecture // Sample Site MapText // Font ChoicesLisa Spitz  //  // ...
Website Planning ProcessWireframesText // Font Choices• Wireframes = S?ck figure layout for par?cular pages   – Important f...
Website Planning ProcessWireframes // Elements of a Webpage WireframeText // Font Choices• Company logo• Site Naviga?on• P...
Website Planning ProcessWireframes // Sample Wireframe DiagramText // Font Choices        hp://‐in...
Website Planning ProcessWireframes // Things to ConsiderText // Font Choices• Naviga?on   – Are naviga8onal elements consi...
Website Planning ProcessWireframes // Things to ConsiderText // Font Choices• Hierarchy and Organiza?on   – Are most impor...
Website Planning ProcessWireframes // Sample Wireframe DiagramText // Font ChoicesLisa Spitz  //  //  lis...
Tips for Implementa?onLisa Spitz  //  //  lisa@lisaspitz‐ 
Tips for Implementa?on              • Naviga?on              • Images               • Mul?media              • FlashLisa S...
Tips for Implementa?onNaviga?onText // Font Choices• Don’t do anything that would disable browser controlsLisa Spitz  //  ...
Tips for Implementa?onImagesText // Font Choices• Use ALT text to communicate the content and purpose of     a graphic <al...
Tips for Implementa?onMul?mediaText // Font Choices• Limit background noise in audio and video files• Provide text alterna?...
Tips for Implementa?onFlashText // Font Choices• Avoid content that moves, blinks, or flashes• Make sure flash does not inte...
Tools for Assessing Your SiteLisa Spitz  //  //  lisa@lisaspitz‐ 
Tools for Assessing Your Site              • Ask Key Ques?ons              • Evaluate Your Work              • Collect Dat...
Tools for Assessing Your SiteAsk Key Ques?onsText // Font Choices• Purpose = develop a “user‐centered” mindset   – Who is ...
Tools for Assessing Your SiteEvaluate Your WorkText // Font Choices• Purpose = Iden?fy poten?al usability issues for indiv...
Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• Increase font sizes 200‐300%Lisa...
Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• Use a color contrast checker:   ...
Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• View website under color blindne...
Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• Check images for Alt Tags:    hp...
Tools for Assessing Your SiteEvaluate Your Work // Brain‐Based Limita?onsText // Font Choices• Read content for a 6‐9th gr...
Tools for Assessing Your SiteCollect DataText // Font Choices• Purpose = Get the most informa?on about how people use     ...
Tools for Assessing Your SiteCollect Data // Site Sta?s?csText // Font Choices• Track page views, bounce rates, average ?m...
Tools for Assessing Your SiteCollect Data // Heat MapsText // Font Choices• See where most people look/click on your websi...
Tools for Assessing Your SiteAsk an Objec?ve OutsiderText // Font Choices• Purpose = Get an objec?ve view of your website ...
Upcoming SlideShare
Loading in …5

The User Friendly Website. Presented at Build Boston, Boston MA, November 2010


Published on

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.

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • When designing your website, it&amp;#x2019;s important to look before you leap\n
  • Careful planning can ensure that your website fulfills your business goals, addresses your audience&amp;#x2019;s needs, includes relevant content, has room for growth, and is easy to navigate\n
  • This kind of planning process is not unique to website design. Within the field of architecture there are similar processes and deliverables\n
  • The first step when thinking about creating a user-friendly website is to document your goals and objectives.\n\nWhy are you building this site - what do you hope it will do for your business?...\n
  • It&amp;#x2019;s important to identify the potential audience for your web site so that you can structure the site design to meet their needs and expectations.\n\n\n
  • By creating stories about your audiences, it&amp;#x2019;s easier for the design/development team to &amp;#x201C;live and breath the user&amp;#x2019;s world&amp;#x201D;, to relate to them as individuals. It also helps people to remain more objective - filtering out their own motivations and personal preferences. \n\nIdeally, these personas should be revisited throughout the design process.\n
  • A content inventory is a detailed listing of basic information about all the content that exists in a site to be redesigned or, in some cases, a site to be newly created from existing content resources.\n\nIt should include plans for future growth, and take into consideration the needs of your audiences.\n\nFor international audiences, keep in mind that your site may be translated through an automated system like Google Translate. Keep your wording and phrases simple.\n\nFor individuals with mental disorders, brain injury, alzheimer&amp;#x2019;s, etc - consider simplifying wording and keeping content clear and concise. \n\nWhen considering links within your content - keep in mind that people skim websites for things to click on. Links should be descriptive so that people will know where the link is taking them. Not &amp;#x201C;Click Here&amp;#x201D;. \n
  • The success of your web site will be determined largely by how well your site&amp;#x2019;s information architecture matches your users&amp;#x2019; expectations. A logical, consistently named site organization allows people to make successful predictions about where to find things.\n\nThe same is true for the design of a house. You wouldn&amp;#x2019;t put all the bathrooms in one part of the house. Your site needs to be organized in a way that makes sense to your audiences not your own organization&amp;#x2019;s internal structure.\n
  • Need to decide how to organize the information on your website...\n
  • \n
  • Can provide multiple ways of organizing / navigating content\n
  • But should have it all mapped out on paper - with a Plan for the future...\n\n
  • At this point you&amp;#x2019;ll probably want to jump in on the design...\n\nwireframes are the &amp;#x201C;rough map&amp;#x201D; that will eventually be used by graphic and interface designers to create preliminary and final page designs for the site.\n
  • Some items that are commonly included in a wireframe\n
  • An example of a simple wireframe. Used for getting sign off on location and amount of space devoted to each of the major elements\n
  • \n
  • \n
  • An example of a more complete wireframe. Also used for getting sign off on location and amount of space devoted to each of the major elements.\n\nIn addition, it&amp;#x2019;s more realistic and complete. Actual content and links are included. \n\nThis degree of detail is especially helpful if someone else will be handling the design.\n
  • \n
  • Careful planning can ensure that your website fulfills your business goals, addresses your audience&amp;#x2019;s needs, includes relevant content, has room for growth, and is easy to navigate\n
  • \n
  • \n
  • Visual effects that flicker or produce a strobe-like effect may cause seizures in some individuals with epilepsy!!\n\nFlash should be accessible with keyboard only\n\nEliminate the need for fine motor skills\n\n
  • \n
  • \n
  • \n
  • \n
  • Low vision, color blindness, blindness: \n \n
  • Low vision, color blindness, blindness: \n
  • Low vision, color blindness, blindness: \n \n
  • Low vision, color blindness, blindness: \n\n
  • Mental disorder, brain injury, Alzheimer&amp;#x2019;s, etc.\n\n
  • \n
  • \n
  • \n
  • \n
  • The User Friendly Website. Presented at Build Boston, Boston MA, November 2010

    1. 1. Website Planning ProcessLisa Spitz  //  //  lisa@lisaspitz‐ 
    2. 2. Website Planning ProcessLisa Spitz  //  //  lisa@lisaspitz‐ 
    3. 3. Website Planning Process • Goals & Objec?ves • Audiences / Personas  • Content Inventory • Informa?on Architecture • WireframesLisa Spitz  //  //  lisa@lisaspitz‐ 
    4. 4. Website Planning ProcessWeb ~ ArchitectureAudiences / Personas ~ ClientContent Inventory ~ ProgrammingInforma8on Architecture ~ Site PlanningWireframes ~ Schema8c DesignLisa Spitz  //  //  lisa@lisaspitz‐ 
    5. 5. Website Planning ProcessGoals & Objec?vesText // Font Choices• 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  //  //  lisa@lisaspitz‐ 
    6. 6. Website Planning ProcessAudience / PersonasText // Font Choices• Audiences = Who are you designing for? – Home owners – Businesses (domes8c & interna8onal) – Realtors, Developers, BuildersLisa Spitz  //  //  lisa@lisaspitz‐ 
    7. 7. Website Planning ProcessAudience / PersonasText // Font Choices• 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 takeLisa Spitz  //  //  lisa@lisaspitz‐ 
    8. 8. Website Planning ProcessContent Inventory Text // Font Choices• 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  //  //  lisa@lisaspitz‐ 
    9. 9. Website Planning ProcessInforma?on ArchitectureText // Font Choices• Informa?on Architecture = Organiza?on and hierarchy    of content – Logical and consistent naming structure – Based on audience expecta8onsLisa Spitz  //  //  lisa@lisaspitz‐ 
    10. 10. Website Planning ProcessInforma?on Architecture // Ways of OrganizingText // Font Choices• By topic / categoryLisa Spitz  //  //  lisa@lisaspitz‐ 
    11. 11. Website Planning ProcessInforma?on Architecture // Ways of OrganizingText // Font Choices• By audienceLisa Spitz  //  //  lisa@lisaspitz‐ 
    12. 12. Website Planning ProcessInforma?on Architecture // Ways of OrganizingText // Font Choices• By task Lisa Spitz  //  //  lisa@lisaspitz‐ 
    13. 13. Website Planning ProcessInforma?on Architecture // Sample Site MapText // Font ChoicesLisa Spitz  //  //  lisa@lisaspitz‐ 
    14. 14. Website Planning ProcessWireframesText // Font Choices• 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 contentLisa Spitz  //  //  lisa@lisaspitz‐ 
    15. 15. Website Planning ProcessWireframes // Elements of a Webpage WireframeText // Font Choices• Company logo• Site Naviga?on• Page ?tle• Primary page content• Related content• Copyright statements• Contact informa?onLisa Spitz  //  //  lisa@lisaspitz‐ 
    16. 16. Website Planning ProcessWireframes // Sample Wireframe DiagramText // Font Choices hp://‐informa8on‐architecture/4‐presen8ng‐informa8on.htmlLisa Spitz  //  //  lisa@lisaspitz‐ 
    17. 17. Website Planning ProcessWireframes // Things to ConsiderText // Font Choices• 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  //  //  lisa@lisaspitz‐ 
    18. 18. Website Planning ProcessWireframes // Things to ConsiderText // Font Choices• 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  //  //  lisa@lisaspitz‐ 
    19. 19. Website Planning ProcessWireframes // Sample Wireframe DiagramText // Font ChoicesLisa Spitz  //  //  lisa@lisaspitz‐ 
    20. 20. Tips for Implementa?onLisa Spitz  //  //  lisa@lisaspitz‐ 
    21. 21. Tips for Implementa?on • Naviga?on • Images  • Mul?media • FlashLisa Spitz  //  //  lisa@lisaspitz‐ 
    22. 22. Tips for Implementa?onNaviga?onText // Font Choices• Don’t do anything that would disable browser controlsLisa Spitz  //  //  lisa@lisaspitz‐ 
    23. 23. Tips for Implementa?onImagesText // Font Choices• 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?onLisa Spitz  //  //  lisa@lisaspitz‐ 
    24. 24. Tips for Implementa?onMul?mediaText // Font Choices• 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 filesLisa Spitz  //  //  lisa@lisaspitz‐ 
    25. 25. Tips for Implementa?onFlashText // Font Choices• 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 meaningLisa Spitz  //  //  lisa@lisaspitz‐ 
    26. 26. Tools for Assessing Your SiteLisa Spitz  //  //  lisa@lisaspitz‐ 
    27. 27. Tools for Assessing Your Site • Ask Key Ques?ons • Evaluate Your Work • Collect Data • Ask an Objec?ve OutsiderLisa Spitz  //  //  lisa@lisaspitz‐ 
    28. 28. Tools for Assessing Your SiteAsk Key Ques?onsText // Font Choices• 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  //  //  lisa@lisaspitz‐ 
    29. 29. Tools for Assessing Your SiteEvaluate Your WorkText // Font Choices• Purpose = Iden?fy poten?al usability issues for individuals     with vision and brain‐based limita?onsLisa Spitz  //  //  lisa@lisaspitz‐ 
    30. 30. Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• Increase font sizes 200‐300%Lisa Spitz  //  //  lisa@lisaspitz‐ 
    31. 31. Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• Use a color contrast checker:     hp:// Lisa Spitz  //  //  lisa@lisaspitz‐ 
    32. 32. Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• View website under color blindness condi?ons:     hp:// Spitz  //  //  lisa@lisaspitz‐ 
    33. 33. Tools for Assessing Your SiteEvaluate Your Work // Vision Limita?onsText // Font Choices• Check images for Alt Tags:    hp:// Lisa Spitz  //  //  lisa@lisaspitz‐ 
    34. 34. Tools for Assessing Your SiteEvaluate Your Work // Brain‐Based Limita?onsText // Font Choices• 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 contextLisa Spitz  //  //  lisa@lisaspitz‐ 
    35. 35. Tools for Assessing Your SiteCollect DataText // Font Choices• Purpose = Get the most informa?on about how people use     your website with site sta?s?cs and heat mapsLisa Spitz  //  //  lisa@lisaspitz‐ 
    36. 36. Tools for Assessing Your SiteCollect Data // Site Sta?s?csText // Font Choices• Track page views, bounce rates, average ?me on site, etc. – hp:// Lisa Spitz  //  //  lisa@lisaspitz‐ 
    37. 37. Tools for Assessing Your SiteCollect Data // Heat MapsText // Font Choices• See where most people look/click on your website – hp:// – hp://  – hp:// Lisa Spitz  //  //  lisa@lisaspitz‐ 
    38. 38. Tools for Assessing Your SiteAsk an Objec?ve OutsiderText // Font Choices• 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’.Lisa Spitz  //  //  lisa@lisaspitz‐