Communications

Office of the Mayor

Part One: Feedback and Insights

After conducting focus group sessions and surveys with community members, stakeholders and
City of Tuscaloosa employees regarding Tuscaloosa.com, we have compiled an overall report.
From these groups, the most common phrase received was not user friendly.

Employee Feedback

Our research indicates that most City

employees visit Tuscaloosa.com at least once
a week, and all employees surveyed have
referred people to the site for information.
Around 91 percent of surveyed City
employees said that they were able to
accomplish their goal on Tuscaloosa.com,
even though most of them ranked the overall
design of the site at three out of five or below.
Cumbersome was a term used to describe
finding files, and the nagivation to find
specific information was described as a long
process involving too many clicks.

Concerning the use of Percussion,

respondents generally agreed that
publishing is an issue and that the content
management system (CMS) was not user
friendly. Uploading content was referred
to as clunky and browser compatibility
issues were frequently reported, namely
with the use of Internet Explorer on
Windows systems.
Most users send content to the
webmaster to be updated rather
than uploading it themselves through
Percussion.

You have to know where things are to find them.

Its hard to explain the navigation to the public.
We should be able to check our homepage for
updates if a citizen calls.
...think like an average citizen who doesnt work
with the City everyday.

A consensus was gathered that there

should be a link to a simple, intuitive
current events calendar on the
homepage. Respondents also agreed
that departments individual websites
should be linked directly to
Tuscaloosa.com. One respondent
suggested finding out what citizens are
calling Tuscaloosa 311 for, and making
those topics more easily accessible on
the website.

Stakeholder Feedback

Over 70 percent of stakeholders surveyed said that they liked Tuscaloosa.com, but an even
greater percentage of those said that the site does need some changes, including a more
responsive design to fit desktop and mobile devices, photos from events and more updated
information and maps for police, crime and construction.
The stakeholders felt the site should
have an access website to pay
bills and find contact information
for departments and
personnel.
Social media integration on the
homepage was also requested,
as well as a move for more visual
fluidity on the pages. Other
recommended improvements
were a contact page for easy
access to a specific persons
information on the site, as well as
a heading with street closures
listed to notify the public.
If everyone is screaming on the screen, viewers shut down and dont see anything.
[Tuscaloosa.com] is like going through a rabbit hole and you have to find a way back out.
There are good things happening in Tuscaloosa, and we should tell people about them.

Public Online Survey

Feedback

Statistically, the site seems to

sufficiently meet the needs of half
the online survey respondents. The
main issues for the other half of the
respondents involved site navigation
problems and outdated information.
The site requires multiple clicks
through pages to get to the location
the general user is looking for. The
lack of site map or directory
enhances this issue. In addition,
certain areas like bill payment are
difficult to access.

I visit the City of Tuscaloosa website at least once a month to pay my utility bills, and it would
be nice if you didn't have to click through multiple pages to arrive at your destination.

Things are buried too deep.

It's very hard to find things.
There needs to be a way to
find things easier. The
navigation needs to be
easier.
There is not a clear map to
locate information on the
site...
I would imagine for people
that were not on there very
much, it could be very
frustrating.

Responses related to the sites visual

appeal were fairly inconclusive, with
43 percent of respondents citing
moderate appeal and the rest at
mid-20 percent for either very
appealing or not so appealing.
Respondents evaluated the site as
not mobile friendly, with almost 70
percent reporting that a mobile app
would be beneficial.
There was a high frequency of
requests for additions including
Tuscaloosa 311 service requests,
city construction plans,
permitting/licensing information,
zoning/planning information and
development/budgeting information.

Its a little lack-luster and

information is not organized
well.

Its not logically set up. It also

isnt easy to navigate.

The usability is awful and its

not mobile friendly.

Tuscaloosa.com Google Analytics Report

March 2014 - December 2015

165,684

E-Services

134,340
80,760

Homepage

60,488
49,896

Human Resources

42,589
47,471

Departments
List Page

35,861
32,408

Government

Total Page Views

25,076

Unique Page Views

26,335
21,010

News

22,579
16,284

Recovery

20,214

City Council

11,881

Planning and
Development

20,135
13,730

Visitor Services

15,598
13,364

According to a report gathered from March 2014

to December 2015, Tuscaloosa.coms e-services page
received the highest number of total page views at
over 165,000 in that period. Of those total views, nearly
135,000 of them, or 81 percent, were unique page
views (meaning that only 19 percent
were repeat viewers).

12,418

Mayor

As a means of gauging the use of Tuscaloosa.com,

the City uses Google Analytics, the current industry
standard for online analytics.

9,300
11,346

Resident Services

Tuscaloosa.coms homepage received the secondhighest number of total and unique page views, with
human resources coming in third in both categories.

9,428
8,040

Help

6,751
6,672

Students

This information tells us that people come to our site

to accomplish a specific goal, like paying utility bills or
applying for jobs. Because of this, we need to make
our content more engaging for site visitors to increase
traffic on other pages.

5,747
6,378

Economic
Development

3,949

City Engineer

4,133

6,321
6,264

Environmental
Services

4,650
6,179

Places to Visit

5,386
5,050

Elections

4,295
5,021

Calendar

435

20000

40000

60000

80000

100000

120000

140000

160000

180000

200000

Part Two: Web Trends and Usability

With digital media now a staple of our everyday lives, it is paramount that the City of Tuscaloosa
remains up-to-date with technology trends to better serve our citizens and stakeholders. This
includes increasing usability and accessibility for all users.

Web Trends in the Digital Era

One of the most notable digital trends of the past few

years is the emergence of responsive web design.
Responsive web design involves designing websites
and applications for optimal viewing across multiple
devices and screen sizes without sacrificing user
experience (or UX).

Traditional
Site

Responsive
Site

Mobile digital media time in the U.S. now sits at 51

percent, compared to just 42 percent for desktop use.
As more and more people turn to the scrolling nature of
their mobile devices to browse the web, it is important
for organizations to have a web presence that is just as
simple to access on a phone or tablet as it is on a
notebook or desktop computer.

App Usage

At least 80 percent of internet users own a smartphone,

which means that same 80 percent have the ability to
download web applications.
Those in the 25-34 year age range are the heaviest
mobile app users in the U.S., with those aged 18-24
coming in a close second.
Even with the popularity of mobile apps, more than half
of app users have uninstalled or decided to not install an
app due to concerns about their personal information.

Tuscaloosa.com Mobile Screenshot

*Currently, Tuscaloosa.com does
not use a responsive web design

73.8

74.6
63.5
49.9

Design Choices Matter

According to Krugs first law of usability, web

pages should be obvious and self-explanatory.
Advances in web design have resulted in a
more sleek, streamlined look for webpages
from their predecessors. Companies like
Google have completely overhauled their
sites to be flatter and easier to read.
The use of plentiful white space, or negative
space, has also emerged as a means of
keeping web pages clutter-free and easily
understood.

The use of san serif fonts also reflects this

change to a more modern design. Serif fonts
like Times New Roman or Baskerville were
traditionally used in print media because the
tails, or serifs, on the letters made words easier
to read. On screen, these serifs are no longer
necessary. Googles rebranding is a great
example of this modern transition.

The Evolution of Googles Visual Identity

Old Google Logo

Texture, Shadowing

Create a Theme

Previous Google Logo

Flat, Dated Font

Along with choosing a san serif font, its

important that the web page use no more
than three fonts, and uses them on a
permanent basis. Also, fonts must be large
enough to read on any screen. This
enhances the sites readability and gives
users a level of visual consistency.
In addition, colors need to be chosen
carefully. Dark fonts with white backgrounds are most preferred by users,
regardless of their level of ability.

Current Google Logo

Flat, San Serif Font

Comparing Contrast
Both of these examples have very high
contrast ratios, which aid site readbility

Dark Text, Light Background

Light Text, Dark background

Less is More

A key to successful web design is content that is short, simple and to the point. Research shows
that web users often do not read word for word but skim pages, picking out relevant words and
phrases.
To enhance a users ability to skim, use white backgrounds with large headings and
appropriately sized type, bold or highlighted text and bulleted lists.
Excessive words or paragraphs make the information both overwhelming and intimidating,
making it more difficult to comprehend and encouraging the reader to skip over the page.
If you read this entire page, call Deidre. She has a prize for you.
Breaking up blocks of information into small paragraphs with simple language or using images as
dividers can drastically improve a users experience.

Tracking Eye Movements

Data from digitalinformationworld.com

80%

69%

of time users look at

the information in
the portion of a
webpage that
doesnt require
scrolling.

of users spend time

looking at the left
side of a page
rather than the right
side, which usually
goes unnoticed.

58.4%

10%

of logos and
brands located on
the top left side of
web page are
remembered
better than those in
other placement
areas.

increase in
absolute or relative
size of a button
makes it easier for
users to find the
button and use it.

Eye Movement Patterns

Today, web users move through

content at a rapid pace. The Nielsen
Norman Group conducted a study of
users to track the patterns in which
they read content across web pages.
The most common patterns resemble
the letters F and E and outline
three movements:
1. Users first move horizontally, across
the content area at the top. This is the
top line of the F or E.
2. Users then move down the page
and again, move across horizonally.
However, this horizontal movement
covers a shorter area of content. This is
the secondary horizontal line in the F
or E.
3. Lastly, users make a slower, more
precise vertical movement, making
the stem of the F or E.

Eye Movement Examples

Knowing this, it is vital
that considerations are
made to put important
information, like
navigation bars, at the
top or left sides of each
webpage.

Avoid Static Pages

Due to the requirement of frequent updates to the website, a static webpage is not appropriate
for the City of Tuscaloosa website.
Static web pages are now a thing of the past. For Tuscaloosa.com to effectively and efficiently
serve the needs of our citizens, information and content on the site must be updated on a daily,
and preferably real-time, basis. Accomplishing this must be a joint effort between departments
to ensure accurate and timely information is published regularly.

Web Design Best Practices

1. Do not include a lot of text, as users will
not read it completely. Be concise.

4. Consider F and E eye movement

patterns when writing content and
image layout.

2. The first paragraph on every page

should state the most important
information, not a welcome.

5. Place important content on the left side

of the page.

3. Place logo at the top left of the site,

and do not have the head banner
distract from the image.

6. Navigation bars should be across the

top or on the left side, but preferably
across the top.

Making the Case for Accessibility

According to the Centers for Disease Control and Prevention, 22 percent of adults in the United
States live with some form of disability. The percentage of adults living with disabilities is higher in
the Southeast than other parts of the country.
Web accessibility means that people with
disabilities, and those whose abilities have
changed due to aging, can perceive,
understand, navigate and interact with the
Web, and that they can actively contribute
to it.
There are several benefits to making sites
more accessible, including increased search
engine optimization and a more usable
interface for everyone, regardless of ability
level.
The traditional style of web page often does
not provide adequate resources for those
with accessibility issues. Tuscaloosa.com
needs to address these accessability and
usability issues in a number of ways:

Disability Types Affecting Web Use

Cognition

Vision

Serious difficulty
concentrating,
remembering or
making decisions

Blind or serious
difficulty seeing,
even when
wearing glasses

Hearing

Physical
Ability

Difficulty hearing
high-pitched
sounds and
separating sounds

Reduced dexterity
and fine motor
control

- Make Tuscaloosa.com fully compatible with

page reader software by
- providing alternative text and alt
tags for graphics and images.
- eliminating graphics with text in
them and PDFs (readers cannot
interpret these files).

- Use appropriate font choices (size, type)

and create contrast between text and
backgrounds.

- Create large text fields when developing

forms to allow for easy reading and editing.

- Make clickable icons large enough to be

selected by those with dexterity issues.

- Provide transcripts of video and audio files.

- Simplify the copy on each page.