Building Usable Websites
Upcoming SlideShare
Loading in...5
×
 

Building Usable Websites

on

  • 632 views

Guide to building usable websites presented at OpenGovDC.com on June 14, 2011

Guide to building usable websites presented at OpenGovDC.com on June 14, 2011

Statistics

Views

Total Views
632
Views on SlideShare
632
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • There are more and more web sites and services competing for users’ attention every day\n\nAs a result, users’ attention spans continue to get shorter and shorter as they try to make sense of all of this\n\nFocus your efforts on what is unique to your web site and leverage third-party networks rather than compete against them (no matter how cluttered Facebook’s UI is, your users are used to using it already)\n\nHedging your bets (what if Facebook takes a dive like MySpace did?)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Building Usable Websites Building Usable Websites Presentation Transcript

  • Building Usable Websites OpenGovDC Presented by David Leonard and Joel Sackett
  • IntroductionDave Leonard, Solutions Architect(@davethesave)Joel Sackett, Senior Technical Project &Creative Manager (@joelstweets)
  • What well be covering
  • What well be coveringUser Engagement Scrolling is OKContent IconographyPrioritization Registration andVisual Connections AuthenticationVisual Hierarchy AccessibilityNavigation Menus Mobile Interfaces
  • User Experience
  • User Engagement
  • User Engagement
  • Content PrioritizationContent Prioritization
  • Content Prioritization Fighting the urge to “hoard” old content of little significance What to keep, what to toss, what to "archive" (dubious value) Analytics are your ally in these conversations Quality over quantity! Consider the ‘curation’ effect - what do you want your users to do after reading your content.Content Prioritization
  • Content PlanningUser Engagement
  • Content Planning Use focus groups to define organizational goals & success criteria User surveys (targeted) Let needs drive the techniquesUser Engagement
  • AudienceUser Engagement
  • AudienceUser Engagement
  • AudienceUser Engagement
  • AudienceUser Engagement
  • Call to ActionUser Engagement
  • Call to ActionUser Engagement
  • Pave The WayUser Engagement
  • Pave The WayUser Engagement
  • Pave The WayUser Engagement
  • Pave The WayUser Engagement
  • Pave The WayUser Engagement
  • Pave The WayUser Engagement
  • Pave The WayUser Engagement
  • PersonalizationUser Engagement
  • PersonalizationUser Engagement
  • PersonalizationUser Engagement
  • PersonalizationUser Engagement
  • Navigation
  • NavigationUse traditional navigation menus as afallback, not a primary means of interactionShould not be a direct match to your site’sinformation architecture or organizationalstructure (minimal depth/hierarchy)Use action-oriented verbiage when possible
  • Navigation
  • Navigation
  • Navigation
  • Navigation
  • Navigation
  • Design
  • Establish A Visual Connection
  • Establish A Visual ConnectionOne of the main goals of design is to connectusers with your brand, message, or organizationCollaborate: get designers and stakeholders in thesame room & spark a discussion - designers areanother type of problems solvers & critical thinkersDesign surveysUse iterative design strategies, like style tiles, tocollaborate with clients before doing full-blowndesign
  • Style Tiles
  • Style Tiles
  • Style Tiles
  • Style Tiles
  • Visual Hierarchy
  • Visual HierarchyConstructing the page in a way that makes itclear to users the order in which they areexpected to consume the informationFont sizes / choicesColor applicationWhite spaceVerbiage and design elements that drawattention to action-oriented content
  • Visual Hierarchy
  • Visual Hierarchy
  • Using Icons
  • Using IconsHelpful when space-constrainedRequires a fair amount of design timeCreates an lasting impact, helps establish identity/brandingUse sparingly for maximum effectivenessAccessibility concerns / alt or descriptive text toaccompanyCaution - can be subjective, different icons meandifferent things to different people
  • Using Icons
  • Using Icons
  • Using Icons
  • Using Icons
  • Icons
  • Icons
  • Scrolling is OK“Above the fold” discussions are passéImpact of new devices and interactionsUsability studiesPeople spend lots of time on the web, if youhook them early they will stay engaged
  • Accessibility
  • Authentication
  • AuthenticationMake it easy for people to authenticateLogin to comment via Facebook, Twitter, etcwithout having to register.Disqus...
  • Authentication
  • Authentication
  • Authentication
  • Authentication
  • Accessibility and 508
  • Accessibility and 508Section 508 Compliance Alt text for images and icons Screen reader-friendly navigation (traversable, skip navigation) Use true semantic headers (h1, h2, h3) and reasonable font sizes Label forms clearly Color coding/contrastingWhy content strategy and training is key
  • Mobile
  • MobileChallenges of catering to a variety ofdevices, move towards responsive designCater primarily to mobile usage scenarios,dont assume any parity in terms of userexperienceExposing your site’s content to a mobile app
  • Mobile
  • Mobile
  • Mobile
  • Backend UI
  • Backend UIStreamlining content creation formsHelp text that explains meaning behind fieldsBalancing low-level configurability withmaking commonly performed tasks easy todoBuilding flexible tools for content editors
  • Questions? Connect with us: David Leonard (@davethesave) Joel Sackett (@joelstweets)http://www.linkedin.com/in/joelsackett