Managing distraction: OS X Mail unread count

There is only so much time in the day and if you’re not careful small distractions can chip away at your ability to accomplish tasks. I’m always looking for ways to reduce distractions for myself and my team.

Distractions break “flow”

We are big fans of 37 Signals and they have written about distractions extensively over the years. The nature of our work requires a balance of requests from many constituents around campus and the actual work those requests require. If we can’t accomplish the desired work we might not bother taking it on at all. The desired effect is to get in to a “flow” throughout the day to concentrate on the task at hand and complete it with the clarity and attention that every task deserves.

It takes a village

We have done many things as a team over the years to improve the amount of flow the Web team is able to obtain each day. It may seem like simple things but reducing the amount of sensory input  is a huge help. If you’ve been to the Web office at any time you’ve noticed ten of us work in one open area, which is an efficient use of space but is a slippery slope for distractions. We all work in the dark to reduce visual noise, most everyone wears headphones to reduce auditory noise, and there is very little talking before lunch. It takes the entire team to ensure the environment is respectful of everyone’s personal flow.

“Managing Distractions” series

I though I would start a series on the small things that make a big difference when it comes to managing distractions. The first and what I feel is the most important is the ability to get out of your inbox.

Get out of your inbox

Email is not a to-do list or an immediate trigger for action. If someone needed something this second they would call or rush in to your office. Emails never stop and reading/responding to them as they come in will keep you caught up in the thick of the thin all day. Before your know it, no real work actually gets done.

mail-badge

I’ve found the best way to remove the distraction that an email is “waiting to be read” is to get rid of the badge on the OS X Mail dock icon. Many would argue that never opening the Mail app in the first place accomplishes the same goal. But it doesn’t, because if you need to send an email or reading through a folder other than your inbox, that unread is there just begging for your attention.

mail-options

Removing the badge is actually quite easy, just go in to the Notification Center and click Options. In here you can manage all the annoying alerts that each app can produce. Find “Mail” and uncheck the “Badge app icon” to remove it completely.

Overall I recommend turning any “push” type of alert off except for the absolutely necessary ones. But this one alone can make a world of difference. Try it for a week, my bet is you’ll focus more on the task at hand and check email only when you have a few minutes to dedicate to it.

Taking action requires knowing the next step

Having a clear next step is essential to someone taking it. Next steps are easy to find online, banners, large rounded corner buttons and “Read more” links seem to be everywhere. But next steps go beyond the Web, if you have a problem with your home Internet, the next step is probably to call customer support. When you know the source of the problem it’s easy to know who to call.

Decentralized Web

Not all next steps, though, are easy to determine, especially in a decentralized Web environment like we have at Wayne State.

I recently saw a demo for a product called SiteImprove which aims to help automate quality assurance on a website. I was impressed by the product and mortified by the results at the same time. In the 1,700 pages that were part of the demo we had 445 broken links and 180 misspelled words. I expected some, but not that many issues with our site. I want to make it clear this isn’t an endorsement for the product, I have not used it, just received a demo.

I bring it up because it opened my eyes to a major problem with the decentralized Web, and specifically with “crowdsourced” Web content management, which is a more fitting description for the WSU environment.

Lots of eyes but no one speaks up

We get millions of visitors each month. A good chunk of them are internal audiences who read the content on our pages. I’m willing to bet that people are seeing these misspellings and broken links but they don’t know who or how to tell someone about them. There is the old trusty “webmaster” email address and we do get a fair number of emails there, but they are often from students who stumble on broken links they need and it is their last resort. Obviously we don’t want prospective students to get to this point.

Most often someone on campus has interacted with one of us in the Web department to set up their website. Which means they probably interacted with me, a designer, a developer and a content administrator at the very least. They know the drill, and that the content of a website is the responsibility of the department. So they often don’t think of contacting us to fix it and although we ensure the “Contact Us” area is prominent on every website it is often used for student recruitment and there may be many hoops before messages get to the Web person in the department.

The next step to alerting someone of the problem isn’t clear, therefore problems often don’t get reported.

Who’s responsible for QA?

At the end of the day, the Web Communications department is responsible for the overall user experience on the Web. There may be a lot of factors that go in to what is actually produced but if there is a problem we are charged with fixing it. Although the content on every page isn’t originated by us, we need to ensure it building the university brand instead of hurting it.

How to report a problem

I have posted in the past about how we handle dozens of support requests per day without a ticket system and that has worked well for the past few years. We are now employing the same technique to our phones. Everyone in the Web department now has a single phone number. This way if anyone is out of the office or away from their desk the phone can still be answered and get handled in an appropriate timeframe. If someone leaves a voicemail it goes to our group email account that everyone sees. It’s been a week so far and the simplification has really helped to filter all requests through one person, our project manager, and only assigned/disrupt a staff member when they are needed.

The Web Department is now acting as a single point of contact for the campus community to know their next step. They no longer have to remember a staff members name, phone number or email address. Once a problem is reported we are able to determine who is the owner of the website and the quickest route to get it fixed. We will do all the leg work to ensure it gets corrected even if the website isn’t in the main university system.

But what about the public?

The process for the public to alert us is a little trickier. In the past if we added a feedback form or email address to a website as a “feature” it tends to get used by people who simply can’t find information or to ask a basic question. This would flood the IT staff with general questions instead of actual problems. The easier it is for the visitor the contact someone the more likely it is for them to use the contact info instead of using the website to find the information they need, they often look past the purpose of the form. That being said we are hesitant to put a “Report a problem” link on the page, even if it only shows if the visitor is on campus.

We are currently testing different options and should have a solution in the next few weeks.

Contacting Web Communications

Phone: 7-9707
Email: web@wayne.edu

 

Introducing Formy – Our self-service form manager

Over the past seven years the Web Communications department has strived to not only give our end users the best experience but to also create tools that can be deployed across campus. We started with the CMS, then the Events Calendar, RSVP system, URL Shortener, Social Media Dashboard and more. Today we are introducing our newest self-service tool, a Web Form Manager which we have been calling Formy.

The problem

Without a way to get feedback or information from users, the Web would be a boring place. Typically a site has two or more forms: a request for information form, contact form, and possibly more. Every department has different requirements for what they need from the user and because of that each form has to be created by hand. Creating forms can be a pain: there are many requirements, a server with database and email capabilities and of course a programmer. Up until now we’ve charged our normal hourly rate to create forms. This can range from $150 – $750 per form, depending on how complex it is and what type of manager/approval system needs to be created. Although we could keep going this route forever and continue to spend hundreds of hours creating forms, we knew we had to make a change to focus on larger projects. After a few hundred  forms we started to develop a pattern, we knew we could solve 80 percent of all form needs on campus with a core set of features.

We realized we have been creating forms for the past two years in the events calendar RSVP system. So we took all the existing constructs (and codebase) and migrated it to a self-standing form creator.

Creating forms with Formy

To create a form visit forms.wayne.edu, sign in with your AccessID and you’ll see a list of forms that you have either created or have access to. Click “create a form” and the process is very similar to creating an RSVP in the events calendar. It’s a three step process starting with some basic information.

Basic information

The first step is to name your form and provide a description that the user will see no mater where the form is used. From there you can set the limits and the thank you page/email responses.

Choosing fields

The second step is where it starts to get fun. Every form starts out with the First Name, Last Name, and Email address fields. Almost every form in the system has these fields so we auto populate them. To add other fields simply click on the field type on the right. We have options for almost every form element type and if you don’t see something you’re looking for, just let us know and we can probably add it.

File uploads

We made two important additions to the forms creator, the first is the “upload file” field. We found that most of the forms we were asked to custom create involved some sort of file upload, so we built that right in. You can even add multiple file fields per form.

Reorder fields

The second is the ability to drag and drop the field order. Although it isn’t something the user will see, the previous way to reorder fields was clunky and at times would end in a phone call to our department for help.

Require authentication

A bonus addition: We also recognize that a lot of the forms we created need to first authenticate that the user has some sort of Wayne State affiliation. So we added the “Require Authentication” option which will first ask the user to log in before they can fill out the form. This also ties their AccessID and any information about them to the form so you don’t have to ask for information we as a university already know.

Submit for approval

Once the form is up to your standards the next step is to submit it for approval. This process is the exact same as the Events Calendar. It comes into our queue and we check it over just to make sure the flow of the form makes sense to the intended audience and that you’re going to get the information you need. We typically approve forms within the same day.

The third step is optional, but it allows you to setup access to the form submissions and get alerts when someone completes the form. This is nice if you are creating a “Request for Information” form for example and you want the admissions counselor to have access to the submissions and/or you want a group email address like “askcoe@wayne.edu” to get alerted immediately.

Sharing and embedding forms

Now that your form is done the next step is to direct people to fill it out. There are two ways to do this.

Every form that is approved will have a forms.wayne.edu/1234567 URL associated with it. This URL will not change and you can direct users to fill out your form at that basic Wayne State page.

To embed the form on an existing Web page just visit “Step 1” of the form and you will notice a “CMS Embed” area right below the description. This line, which looks like “[form id=”1234567″]” is what you can copy & paste in to any CMS page and your form will automatically be embedded in that spot.

Tip: You can change the label on the submission button from “Save” by adding it to the embed code. For example if you wanted it to say “Request Information” you would simply add it like this:

[form id="1234567" button="Request Information"]

Getting submissions

Once your form is promoted and users fill it out, submissions will start to come in to forms.wayne.edu and you may be alerted by email if you have that set up. Every submission will have it’s own row in the list and you can click on the first field to see all the information about the submission including downloading of any files.

We have a few things in place to prevent duplicate submissions (often users click the submit button multiple times quickly) or spam submissions but sometimes they do come through. We allow you to delete any individual submission but instead of removing the data completely we just strike it out and don’t count it against the total number of entries. You can always view and undelete it at any time.

Lastly, if you need to export the submissions the process is the same as the Events Calendar. You can choose the fields and order, then click the “Export to Excel” button.

Data and statistics

The centralized form idea is something we have been thinking about for a few years. The data structure was actually created years ago when we added RSVP’s to the events calendar. What this means is all the forms and information are stored in one spot. To date we have ~1,700 forms in the system with more than ~100,000 total submissions. It also means that over the next few months we will be migrating all regular forms over to Formy forms. This will ensure there is one location for all user-submitted data. We can ensure the security of that data and push it to other systems as needed.

Feedback

Like all the tools we create they come out of university need with the goal of empowering the campus community. With that comes ever evolving changes as the campus needs change. We are always open to feedback and you can send it to web@wayne.edu. Often there may be existing ways to accomplish your needs.

So you want an HTML newsletter?

The types of projects our department takes on seem to go in waves. A bit of a history lesson takes us back to an abundance of websites which pushed us to build the CMS. The many events that followed gave us the idea to write and centralize them all in to a university events calendar. Then came the RSVP’s for those events. We got fed up creating hundreds of forms so we wrote an RSVP system for the events calendar. After that the campus community could maintain their own websites, and create events and RSVP’s by themselves. They then asked us to create pretty HTML emails to announce all of these components and we did that for a while before crafting the self- serve HTML email creator.

Everything goes digital

Now we are on the age of transitioning traditional print newsletters to digital pieces. These are a little more complex than the standard email and sometimes connect to a broader website with more information. In the last four months we have literally transitioned more than ten complete print publications to online editions. I would love to say that in those four months we created a self-service system for the entire campus to create and maintain publications, but I can’t. They all seem to have some unique factor that required individual attention.

Multiple flavors

Requesting a new HTML newsletter can result in a 2 hour or up to a 40 hour project. It’s important to know what you need before starting the process. Let’s walk through the process of the newsletter request and I hope I’ll be able to shed some light on the reason for the complexity.

Simple single column email

The most basic email is just a single column with a single message and any action items go off to existing websites. The types of emails have a custom header that identifies your department or group and is reusable at your leisure.

Here are a few examples of single column emails we have done:

Multiple column email

Typically a multiple column email is required when there is a single message that needs to be communicated and the content warrants “action items” on the side. These can be: upcoming deadlines, buttons for next steps or just “for your information.” They’re a little more complex but offer some flexibility to highlight multiple items “above the fold”. (BTW, there is no fold on the Web.)

Here are a few examples of multiple column emails we have done:

Multiple column newsletter

Using the same format as the multiple column email the newsletter takes it one step further and keeps a consistent format but with categories and articles feeding in to compile a complete email. Typically the format is set up and each month/semester/year a new “publication” is created which consists of article titles, teaser descriptions and links off to more information.

If the links for each article go to existing stories already published on the Web it gets the user to interact with multiple areas of your website and possibly explore things they otherwise wouldn’t have without being prompted by the email.

Here are a few examples of multiple column newsletters we have done:

Newsletter Web page

Lastly the most complex and time consuming is the HTML newsletter that has a stand alone website which features the full text of each article and is organized like a newsletter with editions and archives. This approach is really driven by the print mentality of compiling an entire edition of articles and publishing the entire thing at once. It wraps up the email and website into a single package for the user to experience. One of the downsides, just like a printed newsletter/magazine is once the user receives it and browses through, they typically recycle it or close the window and never come back. Their only reason to come back in the future is when their next email comes in. It isn’t “sticky” and doesn’t build continuous engagement, but in the end it’s what most traditional writers are comfortable with.

Here are a few example of newsletter websites that we have done:

Thinking about requesting an HTML email?

Make sure you have thought through how you want it to work and be prepared to answer some tough questions by our team. Just because “email is free”, aka you don’t have to pay postage, it doesn’t mean that your audience will engage the same way they have in the past.

Email overload: Who is getting your attention?

Something that has been on my mind for a while is the massive amount of internal email we get and send at Wayne State. There have been countless articles written about the death of email but from the user’s point of view it has appeared to pick up faster than normal. We do have a proposed solution coming, but is it going to be our saving grace? Or just another piece of noise?

Hoarding emails

I have a special “_email” folder in my inbox where I place ALL internal bulk mail. My hope is one day I would analyze it for who is sending out the most, create a wordle of the subjects or body of the messages but I just have not had time. But I wanted to do something useful with them.

The 10 second test

Just like a website, email has the same “10 second test” factor. I would argue it is shorter and a message may not even make it to the test if the subject (or sender) isn’t appealing enough. Since creation is decentralized on campus it is impossible to have a consistent message through every email. Additionally, every email has a specific audience who has different tolerances to the information they are use to (willing to) receive.

Standing out

For those of you who don’t get as many emails as I do, I put together a representative sample of what is coming out of the university and going in to people’s inboxes. I am making no judgement about the content of the emails, purely looking at visuals in this case. Flip through the examples above as an end user. Some of which went out to lists with 50,000+ people on them, are they conveying the message you think they are trying to convey?

If you were trying to get your email read and have the recipient take action, how would you stand out? Which messages would you pay attention to? What catches your attention? Is it the images, colors, headings, links?

Insights: Sharing Events with AddThis Plugin

Last week we started investigating sharing methods for events on events.wayne.edu. When we initially launched the university events calendar we wanted to make sure events were easy to find and share. After the launch we saw an upswing in the number of events being added and the traffic to the site. We were happy so we continued advocating and pushing the functionality on the campus community. Now, a year later, our goals have changed. Our calendar has an abundance of events and it’s time to share them with the world.

AddThis Plugin

We started playing around with the Facebook Open Graph plugin this week and it sparked our interest in how people were sharing events. We initially put the AddThis plugin in the right column of each event with the most popular options at the time for sharing. Looking at the analytics we were surprised with some of the results.

1. E-mail is still king

There has been a lot of talk the last few days about e-mail being dead but we are seeing 37 percent of all event shares being sent out through e-mail. Another interesting note is that e-mail is not the first item on the share list, it’s actually the last item in the first column which makes it a little harder to notice.

2. Facebook and Open Graph

We assumed Facebook would be at the top of the list for shares but it wasn’t. It still pulled in a respectable 24 percent of all event shares, however. To us this has more impact than email because Facebook shares are a one-to-many relationship. They allow for a snowball effect, allowing friends and extended friends to comment and like shares which extend the reach exponentially.

Last week we also added the Open Graph plugin to the right hand column of event pages. It’s still too early to report on the analytics but we are seeing a spike in usage already and will report on this later. I will tell you that Open Graph is far more powerful than we imagined.

3. CTRL-P

To our surprise printing was in the top three share options for AddThis. 12 percent of people click on the “Print” link within the plugin to keep or share a hard copy of an event. This peeked our interest because it isn’t doing anything special other than File->Print in your browser. What it did was give us the opportunity to double check our print style sheet to make sure we were maximizing the page content. We did fix a few things after our investigation.

Beyond Events

We have the AddThis plugin installed on pages throughout the Wayne State website and are gathering statistics from these areas also but they were not taken into account in this blog post. The users for the event calendar are different than other areas on campus and we treat their needs differently. We are going to continue to monitor share usage throughout the entire website and hope to offer visitors the most effective sharing options to continue to spread the great things going on at Wayne State.

Whiteboard: Giving HTML E-mail Flow

The last two weeks have been really busy for us if you haven’t noticed the lack of posts. It’s been a good busy though and we have been getting a lot done. Posts will be coming soon.

Boxes and Arrows

In the spirit of sharing how we work I’m starting to post more about our process. The photo above is the planning for the upcoming Division of Development HTML e-mail newsletter. The first thing we do after meeting with a department and before we start any design or development is outline the entire user flow on a whiteboard. We do it with boxes and arrows to show direction, space and user experience.

As we talk through it the flow often changes, the content moves around and we simplify things. It’s also a prime time for the designers, developers and content writers to get a good understanding of the requirements for the project. We experience pain points and work through them to focus the whole experience on the user.

Sneak Preview

Here is just a preview of what it will look like when it launches in the next week or so… (subject to change)

New Newsletters: Exemplar & Synergy

This last week we launched two newsletters. Over the last year or so schools and colleges across campus have been transitioning their traditional print publications to the web. Right now most are doing dual format but we expect them to go all digital over the next few years. This will not only allow them to save money (on postage and printing) but also get the word out to in a timely manor and start interacting with their audience.

College of Engineering – Exemplar

Traditionally a print magazine and will still be for some time but now they give their readers the option to read and subscribe online. The main audience is alumni and unfortunately they don’t have email addresses for them all. This is a slow transition by promoting the online version in print to get people to subscribe to the email and online version. It is still early so we don’t have statistics yet to show the conversion rate.

View the Exemplar Newsletter

College of Pharmacy – Synergy

Also started out as a print newsletter but this one has gone all digital, no more print. Traditionally they would publish a PDF of the print version online but not many people were reading them. The new site also includes an HTML email formatted specifically to promote the primary articles and upcoming events. Below is the preview of the email.

View the Synergy Newsletter

Overall this trend doesn’t look like it’s going to stop. Almost all the school and college sites we do have brought up bringing their newsletter online. Initially these were all custom but as we do more of them we noticed tons of similarities. We are building the tools to bring this capability into the CMS for anyone who hosts a site through us to use. We will keep you updated on these features as they become available in the CMS.

Testing HTML emails efficiently as possible

Recently, I talked about the pros and cons of sending HTML vs Text emails to your clients in this article “Filling your inboxes with visual appealing HTML emails”. Since HTML Emails are becoming increasingly more popular to send here at Wayne State, we are trying to come up with a system that makes this painstakingly clumsy process as streamlined as possible.

Third party testing

If you have one main template and don’t have to create new ones often, a pay email testing service might be for you. For a small fee you can use one of these services to send your HTML code to and then it will produce screenshots of how the email looks in the most popular email clients. In addition, some of these services will also test how your email will react with spam filters.

Pay for testing resources

screenshot inbox inspectorlitmus email screenshotscampaign monitor email screenshots

Testing in house

If you don’t have the resources or funding to go with one of the automated services, you can go the “old fashioned way” and set up a series of test email accounts on all the popular email clients. To begin with, set up accounts on Hotmail, Yahoo, Google, AOL and of course, Outlook 2000, 2003, 2007 and Outlook Express. Don’t forget to test Apple Mail 2 and 3 and to test on the iPhone as well. This will get you tested in over 80% of all the popular email clients, according to Campaign Monitor as of June 2009, in their article Email client popularity.

Email-client-popularity

Don’t forget to test email in popular mobile environments as well, iPhone for example is now more popular than gmail in viewing email. Once you establish some main HTML email templates the testing will get easier. When designing email templates, keep it simple. Trying too much, is one of the biggest mistakes designers do when creating HTML emails.

Here are some more good resources for getting a professional and cross-platform HTML email below. Remember to test, test, test!

Free HTML testing resources

Other resources and HTML email information