Skip Navigation

Thought leadership from SAI to accelerate your performance
 

Systems Alliance Blog

Opinion, advice and commentary on IT and business issues from SAI
Date: Feb 2016

It’s no surprise that in-browser image-editing has become a common feature in many of the web apps we use every day. Before in-browser editing, users would have to take the time to fire up a desktop image-editing program (if they had one), adjust their image, save it, and then finally upload the edited image. That’s a lot of steps, especially if the user only wanted to do something simple, like crop an image before uploading it!

Fortunately, today we can leverage the power of JavaScript and the HTML5 Canvas element to allow users to upload images and adjust them all within a web app, creating a positive, streamlined experience. We’ve had a few requests to add this feature to our Acadia™ platform and—needless to say—we think it’s a great idea. 

I’ve started to prototype this new feature in Acadia™, but I wanted to take some time out to share some of the things I’ve learned so far—specifically some thoughts on getting started with in-browser image editing and choosing an “approach” that fits your needs. 

Pure Canvas

As noted above, JavaScript and canvas are the two technologies that make in-browser image-editing “go.” Rolling my own image-manipulation library based on those two was one of the first things I considered when I started thinking about Acadia’s image-manipulation feature. Canvas exposes a pretty rich API that allows developers to do just about anything they want to an image—even down to pixel-specific operations, like inverting colors or making a color-picker.

While all that control is great, working directly with canvas can be a bit low-level and challenging if you’re doing anything non-trivial. Rotating an image (or shape), for example seems like a pretty straightforward operation, but it requires a bit more effort with pure canvas. First, you’ll be dealing with radians, not degrees—which isn’t a huge issue, but it can be a pain point if you forget. Second, if you happened to want a rotation from the center of the image or shape in question, you’ve got still more work to do. Canvas handles rotation based on the origin—or center—of the canvas, so to rotate an image around its middle, you’ll first need to make sure you translate (or move) the canvas so that its origin is in the center of the object you’re rotating.

While the above example is somewhat trivial, the bottom line is this: if you want fine-grained control and are up for the challenge, working with canvas directly is the way to go, otherwise, read on!

Canvas Libraries

Luckily for developers looking for something with a lower learning curve, there are quite a few JavaScript libraries built on top of canvas that abstract away some of the craziness. Libraries like Fabric.js, CamanJS, and others simplify things a lot. Take, for instance, inverting the colors in an image. Using JavaScript and canvas directly, you’d end up with code that looks something like this:

var canvas = document.getElementById(‘canvas’);
var context = canvas.getContext(‘2d’);
var imageData, data, i;

context.drawImage(myImage, 0, 0);

imageData = context.getImageData(0, 0, canvas.width, canvas.height);
data = imageData.data;

for (i = 0; i < data.length; i += 4) {
    data[i] = 255 – data[i];
    data[i] = 255 – data[i+1];
    data[i] = 255 – data[i+2];
}

context.putImageData(imageData, 0, 0);

It’s not the craziest piece of code ever, but this is just scratching the surface. Anyway, compare that to the simplicity allowed by a library like CamanJS:

Caman(‘#image-element-id’, function() {
                this.invert().render();
});

Fabric.js can also accomplish color inversion in a similarly straightforward fashion:

fabric.Image.fromURL(‘my-image-url.jpg’, function(img) {
                img.filters.push(new fabric.Image.filters.Invert());

});

That’s it! And one of the best parts about canvas libraries is that they’re still built on top of canvas, so if you need direct access to the canvas API, you can still dig down and build your own functionality, too!

Final Thoughts and Resources

Ultimately, choosing one of the above approaches is all about understanding the use cases and needs of your users.  Working directly with canvas provides the most fine-grained control, but canvas libraries reduce the overhead of getting up and running, while still allowing for low-level customization. In either case, there are loads of great resources available on the web to help you get started once you’ve taken the first step and chosen a path.

If you’re going pure canvas, the Mozilla Developer Network has an excellent reference with tutorials and lots of examples.

If you’re looking for a library approach, Caman.js and Fabric.js are two of the most popular libraries I’ve found. Both libraries have pretty solid documentation and plenty of examples to help you get underway.  

As customer care and service support professionals, how do we foster clear and concise communication while creating a framework of trust with our clients?

There are three simple ways to super-succeed in establishing clear communication and providing customer support. Try them out during your next customer interaction.

1. Know the Customer’s Worries, Fears and Goals

We can easily forget that everyone has worries, fears and goals that influence an interaction and communication from the get go. You may have a customer call your support line at 4:55 p.m. frantic that he can’t pull a report for all page edits on his website. He asks if you can get the report to him within the hour. In this case we could easily forget to humanize the process and become stressed at the urgent request.

But if we take the time to understand the customer’s urgency we will learn a thing or two. This customer could tell us that he’s been putting out fires all day and this is the topper of the day. He may tell us that he has a new boss who needs this report ASAP. Getting to know and understand the backstory of a customer’s need and experience will build your connection with them and cultivate open, effective communication.

2. Listen

When we are faced with a customer issue, we can easily jump right into playing Mr. or Ms. Fix It. We begin processing how and what we are going to do before the customer has even finished explaining why they are reaching out. Customers want to be heard. Take a deep breath and listen to all of the details, even if you think you know the answer. Listening is a key way that you demonstrate your attention to the customer—and that develops trust in the relationship. There will never be any harm in having “too much” information.

3. Validate

You’ve taken the time to understand the customer’s worries, you’ve listened to them describe the issue or situation and now it is time to piece it all together with validation. Validation is simply accurately reflecting back all the intel you’ve just gathered. Being able to reflect back the emotion, confusion or frustration of the customer—and summarize the issue—puts you both on the same team. If I say to our late-in-the-day caller, “Wow, the deadline you are up against sounds challenging. I understand that level of stress when trying to get a report to run. Here’s what we can do. . .” it lets him know that I’m on his side and I’m going to do what I can to help him out. It eases the stress so we can work toward a resolution. Validation is a powerful mechanism for squashing potential frustration, demonstrating care and building trust.

Remember that customers come seeking your help because they are lost. You are proving yourself to be the hero by how you treat the transaction—not just by providing the solution.

Now, carry on and make people happy.

In December 2015 Accenture published research findings that revealed a disconnect between what users expect from government websites and what they get. As web technology continues to advance, government websites have historically been behind the times. However, as the internet becomes a ubiquitous part of daily life, most users have come to expect the “Amazon experience” on whatever site they visit—including public sector websites—and too often those sites don’t meet expectations.

This is especially true for users accessing the internet on mobile devices. The number of mobile-optimized government websites is woefully low. In fact, a recent study by Pew Research Center revealed more than 40 percent of Americans access government websites on mobile devices, but less than 30% of those websites are mobile optimized, including the four most popular government websites!

This presents a huge opportunity for government agencies, states and municipalities to better serve constituents with a deeper investment in their digital presence. Too often, sensitivity to the out-of-pocket cost of a website redesign is a rationalization not to improve an agency’s web presence, but this argument is counterintuitive. A high-functioning website quickly proves to be a wise use of taxpayer dollars through improved delivery of pertinent online services for citizens, greater transparency and a more positive perception of—and engagement with—government overall.

A government entity is a brand like any other. A website is a direct reflection of that brand and can have a significant impact on user perception. Even the most prestigious brand can unwittingly generate customer dissatisfaction by having a sub-par website. That’s why an investment in digital presence is critically important for both the private and public sector. Residents are more likely to participate in local events, remain engaged and become more informed about local news and municipal, state or federal issues if a government website is user friendly, well organized and reflects the same brand attributes it exhibits through offline channels.

To illustrate both the tangible and intangible benefits an improved government website can have on public perception, let’s take a few minutes to review SAI’s recent redesign of Anne Arundel County, Maryland’s website, which launched in February 2016.

SAI surveyed more than a thousand Anne Arundel County (AACO) residents to gain insight into AACO’s website from a customer service perspective. One of the biggest pain points reported was a lack of understanding of the services available to residents via the web and how to access those services. This finding is consistent with Accenture’s research, which states that more than half of respondents surveyed said that the biggest obstacle to connected services is simply not knowing what services can be accessed online.

Excerpts from the AACO survey:

 “Poor menu structure [makes it] difficult to find the information I need”

“Too many clicks to get to what I am looking for. Things should be easier to find”

“I wish I was able to search programs in AA County”

“The site. . .is more about the county and not about what you can do on the site or the services available”

By providing easier access to all available services, AACO is able to better serve its residents. The homepage now features a search box (shown below) that allows users to easily search for any service or program, with a link to view all services and programs that can then be filtered by department or action.

AACO Search Image

If, for example, a resident wants to pay a red light camera ticket, there are multiple ways to find this service. A user can search for the service, view all services and sort by the “pay” action, or use the main site search to find the correct page on the site. Once on the “pay red light camera tickets” page (shown below), a user can learn how to pay the fine, whom to contact with questions and request a court date online. All service and program pages have a consistent layout to allow users to easily navigate the site, so they know what to expect and where to find information on each page.AACO Pay PageConsistent layouts and easy access to services are just two ways the new AACO website helps residents. Poor organization and inefficient search capabilities are other key factors that prevent users from effectively engaging with government websites. On the AACO site, streamlined navigation allows users to easily find information about topics such as moving to or visiting Anne Arundel County, available jobs, opening a small business, and directions to locations such as local parks, schools and senior centers. 

To further improve engagement, the website is fully integrated with the county’s social media channels. Facebook, Twitter and YouTube feeds are featured prominently on the homepage and department-specific social media channels are featured on various department pages throughout the site, helping residents stay up-to-date on the latest news and events throughout the region. In addition, users can submit their photos to the AACO Flickr account, from which select photos are featured on the new website’s homepage.

AACO Social Media Links

There are hundreds of services, programs, forms and publications available to residents and visitors of Anne Arundel County, and now users can easily access this information on their desktop, tablet or smartphone, allowing them to remain engaged with the county and more easily accomplish their goals, whether it be to pay a water bill or learn about available team sports.

By addressing common concerns of citizens, the new AACO website will help create a more positive perception of the Anne Arundel County Government, which could have long-term benefits including, greater participation in county events, fewer frustrated calls to customer service centers and greater voter turnout in upcoming elections, to name a few.

Before:

AACO Before Image

After:

AACO After Image

As web technology continues to advance, it will become even more important for local, state and federal governments to invest in modern web technology to affirm their investment in the community and provide easily accessible, convenient services to constituents. Anne Arundel County can now count themselves among the innovators in the public sector.

If you’d like guidance on transforming your website’s user experience and joining this growing group of industry innovators, please contact us.

Calendar
Feb 2016
 123456
78910111213
14151617181920
21222324252627
2829