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

Post on 24-Jan-2015

419 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

Thoughtful, user-friendly design starts with your website, an opportunity to demonstratehow much you value the needs of your clients. We provide clear examples to help you create a site that satisfies esthetically and functionally.

TRANSCRIPT

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

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

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

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 

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?

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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.

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

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

• By topic / category

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

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

• By audience

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

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

• By task 

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

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

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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? 

Lisa Spitz  //  lspitz@cast.org  //  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?

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Website Planning Process

Text // Font ChoicesWireframes // Sample Wireframe Diagram

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Tips for Implementa?on

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Tips for Implementa?on

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

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Tips for Implementa?on

Text // Font ChoicesNaviga?on

• Don’t do anything that would disable browser controls

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Tools for Assessing Your Site

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

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 

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?

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  lisa@lisaspitz‐design.com 

Tools for Assessing Your Site

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

• Increase font sizes 200‐300%

Lisa Spitz  //  lspitz@cast.org  //  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 

Lisa Spitz  //  lspitz@cast.org  //  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/

Lisa Spitz  //  lspitz@cast.org  //  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 

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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

Lisa Spitz  //  lspitz@cast.org  //  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 

Lisa Spitz  //  lspitz@cast.org  //  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’.

top related