the user friendly website. presented at build boston, boston ma, november 2010

Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com

Website Planning Process

mailto:[email protected]






• Goals & Objec?ves• Audiences / Personas • Content Inventory• Informa?on Architecture• Wireframes







Web ~ Architecture

Audiences / Personas ~ Client

Content Inventory ~ Programming

Informa8on Architecture ~ Site Planning

Wireframes ~ Schema8c Design







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?







Text // Font ChoicesAudience / Personas

• Audiences = Who are you designing for?

– Home owners– Businesses (domes8c & interna8onal)– Realtors, Developers, Builders







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







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.







Text // Font ChoicesInforma?on Architecture

• Informa?on Architecture = Organiza?on and hierarchy of content

– Logical and consistent naming structure– Based on audience expecta8ons







Text // Font ChoicesInforma?on Architecture // Ways of Organizing

• By topic / category








• By audience








• By task







Text // Font ChoicesInforma?on Architecture // Sample Site Map







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







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







Text // Font ChoicesWireframes // Sample Wireframe Diagram

h\p://webstyleguide.com/wsg3/3‐informa8on‐architecture/4‐presen8ng‐informa8on.html





http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html



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?







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?







Text // Font ChoicesWireframes // Sample Wireframe Diagram






Tips for Implementa?on







• Naviga?on• Images • Mul?media• Flash







Text // Font ChoicesNaviga?on

• Don’t do anything that would disable browser controls







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







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







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






Tools for Assessing Your Site







• Ask Key Ques?ons• Evaluate Your Work• Collect Data• Ask an Objec?ve Outsider







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?







Text // Font ChoicesEvaluate Your Work

• Purpose = Iden?fy poten?al usability issues for individuals with vision and brain‐based limita?ons







Text // Font ChoicesEvaluate Your Work // Vision Limita?ons

• Increase font sizes 200‐300%








• Use a color contrast checker: h\p://juicystudio.com/services/luminositycontrastra8o.php





http://juicystudio.com/services/luminositycontrastratio.php




























• View website under color blindness condi?ons: h\p://colorfilter.wickline.org/





http://colorfilter.wickline.org/













• Check images for Alt Tags: h\p://wave.webaim.org





http://wave.webaim.org















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



Text // Font ChoicesCollect Data

• Purpose = Get the most informa?on about how people use your website with site sta?s?cs and heat maps







Text // Font ChoicesCollect Data // Site Sta?s?cs

• Track page views, bounce rates, average ?me on site, etc.– h\p://www.google.com/analy8cs





http://www.google.com/analytics












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





http://www.crazyegg.com/









http://www.labsmedia.com/clickheat/









http://www.clickdensity.com/










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’.



