The User Friendly Website. Presented at Build Boston, Boston MA, November 2010
-
Upload
lisa-spitz-design -
Category
Design
-
view
420 -
download
0
description
Transcript of The User Friendly Website. Presented at Build Boston, Boston MA, November 2010
![Page 3: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/3.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
• Goals & Objec?ves• Audiences / Personas • Content Inventory• Informa?on Architecture• Wireframes
![Page 4: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/4.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 5: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/5.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 6: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/6.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 7: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/7.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 8: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/8.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 9: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/9.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 10: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/10.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Ways of Organizing
• By topic / category
![Page 11: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/11.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Ways of Organizing
• By audience
![Page 12: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/12.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Ways of Organizing
• By task
![Page 13: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/13.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesInforma?on Architecture // Sample Site Map
![Page 14: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/14.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 15: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/15.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 16: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/16.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 17: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/17.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 18: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/18.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 19: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/19.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Website Planning Process
Text // Font ChoicesWireframes // Sample Wireframe Diagram
![Page 21: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/21.jpg)
Lisa Spitz // [email protected] // lisa@lisaspitz‐design.com
Tips for Implementa?on
• Naviga?on• Images • Mul?media• Flash
![Page 22: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/22.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 23: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/23.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 24: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/24.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 25: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/25.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 27: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/27.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 28: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/28.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 29: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/29.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 30: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/30.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 31: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/31.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 32: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/32.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 33: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/33.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 34: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/34.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 35: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/35.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 36: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/36.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 37: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/37.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 38: The User Friendly Website. Presented at Build Boston, Boston MA, November 2010](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c2b2904a795947748b4595/html5/thumbnails/38.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’.