The User Friendly Website. Presented at Build Boston, Boston MA, November 2010
•
0 likes•676 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to The User Friendly Website. Presented at Build Boston, Boston MA, November 2010
Similar to The User Friendly Website. Presented at Build Boston, Boston MA, November 2010 (20)
Recently uploaded
Recently uploaded (20)
The User Friendly Website. Presented at Build Boston, Boston MA, November 2010
- 3. Website Planning Process • Goals & Objec?ves • Audiences / Personas • Content Inventory • Informa?on Architecture • Wireframes Lisa Spitz // lspitz@cast.org // lisa@lisaspitz‐design.com
- 4. 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
- 6. Website Planning Process Audience / Personas Text // Font Choices • Audiences = Who are you designing for? – Home owners – Businesses (domes8c & interna8onal) – Realtors, Developers, Builders Lisa Spitz // lspitz@cast.org // lisa@lisaspitz‐design.com
- 7. Website Planning Process Audience / Personas Text // 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 take Lisa Spitz // lspitz@cast.org // lisa@lisaspitz‐design.com
- 8. Website Planning Process Content 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 // lspitz@cast.org // lisa@lisaspitz‐design.com
- 9. Website Planning Process Informa?on Architecture Text // Font Choices • 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
- 14. Website Planning Process Wireframes Text // 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 content Lisa Spitz // lspitz@cast.org // lisa@lisaspitz‐design.com
- 16. Website Planning Process Wireframes // Sample Wireframe Diagram Text // Font Choices hp://webstyleguide.com/wsg3/3‐informa8on‐architecture/4‐presen8ng‐informa8on.html Lisa Spitz // lspitz@cast.org // lisa@lisaspitz‐design.com
- 17. Website Planning Process Wireframes // Things to Consider Text // 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 // lspitz@cast.org // lisa@lisaspitz‐design.com
- 18. Website Planning Process Wireframes // Things to Consider Text // 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 // lspitz@cast.org // lisa@lisaspitz‐design.com
- 21. Tips for Implementa?on • Naviga?on • Images • Mul?media • Flash Lisa Spitz // lspitz@cast.org // lisa@lisaspitz‐design.com
- 27. 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
- 28. Tools for Assessing Your Site Ask Key Ques?ons Text // 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 // lspitz@cast.org // lisa@lisaspitz‐design.com
- 37. Tools for Assessing Your Site Collect Data // Heat Maps Text // Font Choices • 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
- 38. Tools for Assessing Your Site Ask an Objec?ve Outsider Text // 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 // lspitz@cast.org // lisa@lisaspitz‐design.com
Editor's Notes
- \n
- When designing your website, it’s important to look before you leap\n
- Careful planning can ensure that your website fulfills your business goals, addresses your audience’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’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’s easier for the design/development team to “live and breath the user’s world”, 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’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 “Click Here”. \n
- The success of your web site will be determined largely by how well your site’s information architecture matches your users’ 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’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’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’ll probably want to jump in on the design...\n\nwireframes are the “rough map” 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’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’s needs, includes relevant content, has room for growth, and is easy to navigate\n
- \n
- ALSO BEWARE THAT SOME PEOPLE USE SCREENREADERS – NOT NEC BLIND Users.\n\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’s, etc.\n\n
- \n
- \n
- \n
- \n