1 of 19

2 of 19

City and town websites

Presented by Sarah Crossman (GovWebworks) and

Melanie Mazanec (Code for America)

3 of 19

Agenda

Introduction

Code of conduct
Warmup
Intro to people
Intro to concepts

Usability
Key terms
Resources

4 of 19

Introduction

5 of 19

What is civic tech?

Modern tech practices

“Civic tech is a loosely integrated movement that brings the strengths of the private-sector tech world [...] to public sector entities with the aim of making government more responsive, efficient, modern, and more just.” - Cyd Harrell, A Civic Technologist’s Practice Guide

Human-centered design to reduce burdens, advocacy to shift them to government

Administrative burden is cost of learning about public services, compliance with rules and requirements, psychological stress (Pamela Herd and Donald P. Moynihan, Administrative Burden)

I’m going to start where I think the civic tech industry started-- bringing modern software development practices into government. The tech industry has taken advantage of new practices that are facilitated by modern technology:

Iteration-- they don’t have to mail you a CD with AOL on it anymore-- they can just release updates and new features as they go, which allows for greater experimentation, starting small and perfecting over time
Valuing design and making things easy to use, rather than telling people to attend a training or read the manual (3 year olds don’t read ipad manuals)

We now know that software and coding is only one small piece of the picture. As more people from modern software companies started to get interested in government, they realized that even really amazing programming and design work can’t fix a broken process

So any modern tech practice has to be part of a larger look at what the whole experience is like
Ideally, you simplify things for everyone, and reduce the complexity for the people government is serving-- so just like people don’t need to read the ipad manual, people don’t have to read through municipal laws just to understand what the building permit process is like, or have to know what every person’s job is in city government just to find the right person to ask a question to

One example of this is expungement-- getting your criminal record cleared after you’ve served your time so that you can have an easier time finding housing and a job

6 of 19

Example: City of Boston forms

Josh “PDF killer” Gee moved 122 city forms online
“On average, it took me about 30 minutes to make a digital form and five weeks to meet with, earn the trust of, and get buy-in from the employees who would use it.”
“By focusing on the priority, moving forms online and making it easier for the customer, I could make consistent progress rather than be consistently blocked. Some departments moved to a more digital process; some literally print out submitted PDFs and put them in the wooden department inbox. Either way, customers can submit online and the system is saving time.”

Slide from a 2016 City of Boston deck on forms. Credit to Sebastian Ebarb for the design

7 of 19

What is human-centered design?

An approach to problem-solving that is oriented towards understanding how various human factors - physical, physiological, psychological - should influence the way something works, looks, and behaves.

A teapot is a simplistic example of human-centered design in a physical artifact. What aspects of a teapot reflect human factors or requirements for use?

How can a small town apply the principles and practices of human centered design?

One of the biggest things to work towards in trying to adopt a human-centered mindset is to be empathetic, to consciously think about developing empathy for the users you’re trying to support, asking questions like ‘What do they need?’, ‘What are their challenge??’, ‘What would make the most sense to them?’
These questions can be hard to answer yourself. Often you can devise answers that are logical and reflect empathy, but it is best to validate those ideas through research, or land on those answers by asking real users. It’s hard to be human - or user - centered without talking to users.
So the teapot. Firstly, what problem does a teapot solve? Why does its design work so well? Now that we have made some observations of why a classic teapot works so well for a human, try to imagine extending that type of thinking to designs for web-based interfaces. It is more of a leap to imagine something that requires the user have a device supporting their interaction but generally the concept is the same - what do you make available to the user, and how, that supports their needs to execute whatever tasks they’re tackling?

8 of 19

Usability

9 of 19

What is usability?

From Nielsen Norman Group: “Usability is a quality attribute that assesses how easy user interfaces are to use.”

Learnability
Efficiency
Memorability
Errors
Satisfaction

For government services (excerpted from Good Services by Lou Downe)

Easy to find
Set a user’s expectations
Enable each user to complete the outcome they set out to do
Agnostic of organizational structures

There are methods to connect with users in different parts of the process. We’re going to focus on usability today, since it’s a way to look at something that already exists, and flag parts that might need to change

Definitions from NNGroup:

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency: Once users have learned the design, how quickly can they perform tasks?
Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?

For government websites, one way to think of them is organizing services that governments offer-- the service of trash collection, of maintaining roads

The definition of a service offered by Lou Downe is “a service is something that helps someone do something”

When I worked on the city of Asheville website, we made the choice to include services that people thought we offered but that were actually offered by the county, and just pointing to the county website

10 of 19

Example: Machias

Welcome to Machias!

You’ve recently moved to Machias and need to figure out the requirements for handling trash. You know there is a transfer station (dump) but need to know where to find it, its hours of operations, and anything else involved in making use of the service in Machias. ��Where do you go?

Compare to the town of Harrison

Let’s talk about a real small town in Maine, my hometown, Machias. We’re going to run a quick usability test here in this session. A usability test, by the way, is a method of user research in which you challenge a test user to complete a task or series of tasks to understand how easily they are able to achieve it, where they struggle, and other various things about where they look, what catches their attention, etc. I would typically ask a test user to provide narration as they go to help me as the observer understand what they see, feel, observe, notice, like or dislike as they go. In this case, we’ll keep it informal, let’s see how easily you can complete this task. As we go, pay attention to observations you make but also begin to think about how other people might encounter this...for instance how would your parent or grandparent do with this task?

Now let’s quickly take a look at the mobile experience for completing this task. I routinely find through user research at my work, which is focused on user access to state services and runs the gamut from health and human services to labor markets to transportation, that >50% of users are on their phones when routinely accessing state websites, so something that is great on a desktop environment but not great on mobile may be disadvantaging the majority of your site users.

11 of 19

Key terms

12 of 19

Terms to know

Accessibility - the extent to which individuals of varied abilities can interact with a website, application or tool.

Analytics - data associated with website or application usage, typically including things like total numbers of users, some demographic info, time spent on each page, areas of high traffic, click paths, and the devices and browsers used.

Audiences - the groups of users a site or app is targeted towards.

Information Architecture (IA) - the organization of content in a website, usually reflecting a hierarchy or nested structure involving a parent-child relationship between topics.

Plain Language - wording and language that requires minimal prior knowledge or domain expertise to understand. ‘Layman’s terms’

User Research - observation, data collection and analysis that is aimed at understanding user needs, habits, preferences, challenges, circumstances, biases, etc. done to support data-based decision-making and / or to validate ideas or solutions already devised.

Accessibility - generally the goal is to make your site as widely accessible as possible. All humans have differences in their abilities and habits and accessibility is a big topic to cover, but you should remember there are small and large differences in visual acuity, hearing, motor ability, reading level / speed, and motion sensitivity that should be accommodated. It’s also important to remember we all face ‘disability’ at some point in our lives because disability is classified not as a permanent condition or difference, but actually situational. An example of a situational disability is if you have something you’re cradling in one arm - like an infant - limiting your use to only your other arm. Or I recently came across a cool pair of running shoes that are engineered to allow the wearer to step down into the shoe and not require any interaction with hands to pull them on or tie them; while I have fairly mainstream dexterity, when I do winter running and my hands are either very cold or under several layers of gloves or mittens, shoes like this would serve me well; effectively in those conditions I have a situational disability.

Analytics - if you have access to site analytics - Google Analytics is the common platform used - reviewing those is one way to understand more about your users. What areas are catching their attention?

Audiences - it is often valuable to start analysis of usability by defining who your audience is - who are you trying to serve? Typically I strive to define a primary, secondary and tertiary audiences because occasionally you need to make a global decision for the site that serves one type of user better than the others, and in the event of a conflict you can prioritize primary over secondary. Defining audiences can be a helpful step towards better understanding of site users’ particular needs, challenges, etc.

Plain language - reading level is a consideration here too. Often it is helpful to set a target reading level for your content, and adhering to that will help ensure you use plain language. Acronyms also should be used very carefully; never assume your site visitors will know an acronym, you should minimally explain the acronym the first time it is used.

13 of 19

Resources

14 of 19

General website resources

Ten Usability Heuristics for Web Design from the Nielsen Norman Group

Google Analytics

Content management systems used by federal agencies

15 of 19

Content and information architecture resources

Information Architecture Basics from usability.gov

The Difference Between Information Architecture (IA) and Navigation by the Nielsen-Norman Group

How to Make Sense of Any Mess by Abby Covert

Writing style guides from federal government agencies

City of Boston writing guid e

Federal plain language guidelines

16 of 19

Usability testing and user research resources

Card Sorting 101 from Optimal Workshop

Tree Testing: Fast, Iterative Testing of Menu Labels and Categories by the Nielsen Norman Group

Treejack Testing Tool from Optimal Workshop

Simple Written Questionnaire Tool from SurveyMonkey

Usability Testing from usability.gov

When to Use Which User Research Methods by the Nielsen Norman Group

Userbrain.net is a cheap unmoderated usability testing service

17 of 19

Accessibility resources

WCAG Color Contrast Checker via WebAIM

Color Blindness Simulator from Adobe

The State of Accessible UI Frameworks by Derek Kay

The Business Pitch for Accessibility from UX Collective

Lighthouse Page Scanner for Performance and Accessibility by Google

Powermapper Site Crawler for Accessibility Issues

Hemingway Editor tool for addressing reading levels of text

Accessibility for Content Designers from the GSA

How People with Disabilities Use the Web from W3C

18 of 19

Additional resources from the chat

Card Sorting with GitHub free option for card sorting

Tree Testing with a Clickable Prototype free option for tree testing

Accessibility Checklists by Section 508.gov

Checking for Accessibility in Chrome from Lighthouse

Usability in Government Systems book by Elizabeth Buie and Dianne Murray

A Civic Technologist’s Practice Guide book by Cyd Harrell

19 of 19

Questions?