Monday, June 30, 2014

End the Bloodletting in Digital Visibility

Over the decade I've been working in web design, I've come across multiple complaints from staff telling me a student or parent called about being unable to find something on their webpage. I come over to their office, so we can look at their webpage together, and we notice that the content is really there, so the next question is typically: how do we get people to notice this information?

I've seen a very common "knee-jerk" reaction to this issue that reminds me of the days of bloodletting. No, I'm not old enough to remember it firsthand, but if you will recall from your history books, doctors used to believe that the reason people were sick was because something bad was in their blood. If they removed the infected blood from a person's body, that would cure them of their ills.

Now, it's true, you likely do have a lot of bad stuff running through your blood when you are sick, but what else is in running through your veins at the same time? Good blood cells that are fighting off the bad bacteria and viruses. Those doctors didn't know that at the time, so they would continue to remove good and bad blood from their patients' bodies. Did that help? Sometimes, but they likely also killed many patients in the process. It was an inefficient solution.

Archaic Solution for Digital Visibility

I often see similar solutions when it comes to making content more visible to users of websites. Web maintainers are constantly told to do the following to make content more visible:
This is really important information. I mean, important. Like, come on now. You need to read this!
    Okay, well, that didn't work. Let's try:
    This is really important information. I mean, important. LIKE, COME ON NOW. You need to read this! 
      No, still didn't work. Let's try:
      ***This is really important information. I mean, important. LIKE, COME ON NOW. You need to read this!***
        On occasion, this seems to cure the problem, right? You seem to be getting fewer questions about it which also seems to prove that your technique worked. As you can see from the above usage of bold, italics, underline, color, font size, and extra characters, you may have solved the visibility problem of one portion of your content, but you may have created potentially many others.

        What else might be happening? Users are now calling that they can't find some other content that you and I both know is on the same page as the content we just fixed.

        Why is this Not the Solution?

        What common purpose do all these techniques shown in the above examples actually have on your page? All of the above techniques are merely aesthetic modifications. Granted, when we think about aesthetics, we think about what we see with our eyes, visual cues to direct our brains to pay attention to specific content. However, if there are multiple regions of content applying these techniques, our brains can only focus on the content temporarily, as they notice another region and then another, and may not record this information into memory.

        Your content is going through a visibility war. Each piece is now in competition with the next piece of content. From an accessibility point of view, this is very bad for users with permanent or temporary mental disabilities (see Simulations of Mental Disabilities), such as attention deficit disorder or TV combined with a screaming child. And considering these modifications are for people who can see, what purpose does font size or color have for catching a blind person's attention?

        The Modern Solution for Digital Visibility

        This isn't a design issue, this is a content issue. That is, you need to rethink how you write your content before resolving that the issue is aesthetic. Here are some tips for making your content more visible.

        Page Flow

        Your users should be able to easily scan your page top-down for information. If they pop around on the page, they will lose focus.
        1. Be clear and concise, and keep your paragraphs short.
        2. Turn your content into consumable (small) chunks of information.
        3. Use tables and lists over paragraphs to make content easier to understand.
        4. Separate your consumable content with short headings for easy scanning and comprehension.
        5. Keep It Simple


        Your users need to be able to understand what you are saying. This goes beyond spelling and grammar.
        1. If your audience for this page is external, avoid using jargon that external audiences will not understand.
        2. If jargon is needed, define jargon after you have led users to your content with commonly understood terms.
        3. When speaking to a general audience (i.e., parents and potential students), make sure your content is readable at a sixth grade level.
        4. Summarize complex content first before introducing such content, if it is required on your page.

        Content For Your Users

        Think about who is reading your content, their personas. Each page your create must serve a purpose for your target audience(s).
        1. Change the purpose of content from what you want to see on the page to what your audience wants to see.
        2. Cut any content that does not serve a valuable purpose, that isn't benefits or value driven, or a call to action for your audience.
        3. Organize your content based on the importance of the information to your audience. 
        4. Write to your audience instead of using third person, so your audience can connect with your message.
        5. Keep the tone of your message upbeat, and rephrase your message in a way that makes "bad" news, or a negative call to action, look like "good" news, or a positive call to action.

        More Information

        We can't put everything and the kitchen sink in one blog post (similar to the issue with overloading web pages with content), or you would stop reading! However, if you need to reference more information, put it at the bottom of your page, so when your users do have the time to read, they will come back here and check out these valuable links.

        Simulations of Mental Disabilities

        These videos are simulations of how the environment can affect a person with a mental disability. A physical environment is no different from a virtual environment as both have sights and sounds. Web designers often talk about a layout being "too busy." Think about what you see and hear in these videos and how this may affect layout of content on a web page.

        Caution: These may trigger reactions for those with autism, Aspergers and other mental disabilities.

        Monday, June 23, 2014

        Searching for a search


        In the beginning...there was responsive design for the website. It was good, but there had to be a better way to search on the website. So the search began for a better search. It had to be light so phones could access it, and it had to be easy to use so users wouldn't have to waste too much time keying in their search request.

        The Search

        Like many other colleges and universities, Tarleton utilized Google's Custom Search Engine to search our website. As we saw from other universities using the Google search, results would always appear on a generic results page, however we needed more control over the results because of issues our users had from this search engine:
        • Results would rank our departmental pages inaccurately
        • Results for the existing online phone directory couldn't be combined with the Google results
        We needed more information and less information all at the same time. We wanted our search to provide better results for what users requested as well as more options to fine-tune their request results.

        We found that Facebook's search function was different. It was full-featured, and at the same time unobtrusive and minimalist. We liked the idea of providing categories (i.e., search the web, search the phone directory, search the website directory) for fine-tuning search results, and we could add more categories as needed (i.e., search the press releases). Web Services staff all agreed that the Facebook search style was the direction we needed to go due to its flexibility.


        Caution: Technical jargon ahead. 

        We had some feeds we could implement immediately our search, so in order to make them better for phones and just easier to use, I rewrote them to spit out JSON, which is an easier feed to manipulate (items being requested were just plain raw datum) and style for our use (no need to work around Google's styles to make the content appear seamlessly as part of the Tarleton website user interface). I also made use of AJAX, so the page would not need to be refreshed or open a new page which saves mobile phones from wasting data. In a world where a phone is taxed on how much data it uses, every kilobyte counts.

        As of this post we have:
        • People and Departments
        • Website Directory (formerly the A-Z Directory)
        • Google
        • News
        People and Departments is our updated phone and email directory. We wanted the results to be more accessible from a mobile phone, since smart phones can make calls off numbers displayed on web browsers. Also our desk phones connected to our desktop computers (and Cisco Jabber) can make use of the calling feature just by clicking the telephone icon.

        Website Directory (A-Z Directory) was pretty straight forward. Cascade Server (our Content Management System) publishes an XML file that one of my search scripts parses for absolute matches or keyword alternatives. Karole cooked it up to be easy to modify with keywords that should be connected to each website or webpage for quicker, more accurate search results.

        Google was a little tricky. The API Google provides for integrating Google search results on another website generally only allows for a limited number of results. To retrieve a longer list of results, you have to submit a request for the next set of results. That doesn't fly with what we were trying to accomplish in our seamless integration. In the background, when the user selects the 'More' button, a script runs loops to collect 100 searches. If Google runs out of results (which it won't), it stops the loop. In either case, it returns a JSON file with the results. The Google search results are the same results you see if you search directly on the Google Search website.

        News pulls its data from our press releases maintained by Media Relations. It just searches for anything with the search criteria and spits it back. We already had an implementation based on JSON and AJAX that use for the news stories on the front page, so it was very easy to just request news stories with a search term.

        Potential Future Projects

        We have thrown around the idea of adding degree program searching, locations on campus, and specific keyword translations based on analytics (e.g., finding a department whose name has changed).


        If you would like to provide feedback to us about the new search, such as ways to improve, just submit your feedback to our online form

        Keep calm and search on.