Forem: Erin

Sitemaps, Search Engines, and Accessibility - Oh My!

Erin — Thu, 06 May 2021 10:34:39 +0000

Do you need a site map?

Yes. Yes you do. Let me explain. The goal of a site map is primarily so that search engines can crawl your site to find appropriate content to display when a user submits a query. Without a site map, the crawlers have to peruse all your content to see what is relevant, taking a bit of time (depending on site size). If you have a site map, the crawlers will use that information to analyze your site's content.

When would you benefit the most from having a sitemap?

if your site has a ton of pages, and by a ton, I mean hundreds.
if your site has a lot of content that may not be logically related.
your content updates frequently.

Where do you start?

Decide if you're going to use a third-party service or write it yourself. The advantage of using a service is that it is quicker and requires less intricate knowledge of your website. These services are most appropriate for sites that are on the smaller side with fewer interconnecting pages. A website with a lot of pages with deeply linked content would also benefit from using a service but would need to have a person review the information to make sure it is complete and accurate. If you are looking to write it yourself, I found an easy-to-follow explanation of XML at sitemaps.org.

When creating your site map, HTML or XML are the two formats recommended for search engine crawlers. HTML site maps are great for content that does not change regularly or you want to display on a website. HTML site maps don't include any update or publishing information. XML site maps have tags that include the initial publication date and how often the content is updated. That is useful for content that changes regularly; it gives the web crawler an idea of when it needs to sweep the site again for new information.

For the VetsWhoCode site, I wanted to use an XML site map because I wanted to indicate the frequency of updates. With the program running several times a year, the site has a constant stream of new and fresh ideas integrated into the web app. I found an easy-to-follow explanation of XML at sitemaps.org. It included all the elements needed to write a complete site map for VWC.

I decided to try the free sitemap generator from Sure Oak SEO. This process was quick, populating 14 pages from the VWC site.

I opened the XML file that was available for download, and it included all the URL information and the update frequency. All the URLs did default to daily update, which needs to change based on the actual change frequency of the site. It also did not include any priority tags, which on a 14-page site isn't too time-consuming to add, but it would be tedious on a site with hundreds of pages.

<url>    
        <loc>https://vetswhocode.io/</loc>    
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
    </url>  
    <url>    
        <loc>https://vetswhocode.io/apply/</loc>    
        <changefreq>monthly</changefreq> 
        <priority>0.8</priority>
    </url>

Now that you have a site map, what do you do with it? Could you add it to your back end solely for the web crawlers? Sure, but I would encourage you to create an HTML site map also, add style to it, make it functional and link it in your footer. Having all your information accessible in one space makes it easier for people who 1) aren't as familiar with your site to locate what they are looking for and 2) increases the ease of access for visitors either navigating by keyboard or using a screen reader. It is fewer steps to get from one place to another if all the steps are in one place.

The Power of Information Architecture

Erin — Tue, 15 Dec 2020 22:55:06 +0000

WTF is information architecture?

Information architecture, what is it? Not simply put, it's how the information on your site is organized so that it makes sense and the viewer can logically find what they are looking for. So why, as a UX girl, am I writing about information architecture? Why would anyone in the UX world care about IA? Because it plays into how a user interacts and relates to the information presented on the website. You spend an extraordinary amount of time creating a wonderfully functioning, beautiful site; it would be a shame if visitors had difficulty finding what they were looking for.

According to usability.gov, there are four components to IA.

Organization Schemes
Labeling Systems
Navigation Systems
Search Systems

Why should I care?

First, we will explore the Navigation Systems piece of the IA landscape. I think it is the best one to start with because it is easier to understand and make a meaningful impact. Navigation systems mean how a person clicks around and finds information on your website. A person rarely types the exact page web URL to get to a specific page on your site. Most web visitors type in your main website address and then uses a menu to get to the information they are looking for. Ensuring your navigation system or navigation menus make sense and are intuitive goes a long way in creating that seamless user experience.

Imagine, if you will, you're shopping for a new pair of fuzzy slippers, and you go to the site fuzzyslippersforme.com, and you're looking for the perfect pair. Once you get there, you see the navigation, and you can choose between adult and kid sizes; that's fine; most people will be shopping for one or the other. You click adult, and the choices from there are small, medium, and large. So you think, "am I small or medium? What size would a small be?" You expect the sizes to be comparable to shoe sizes, not shirt sizes, when shopping for slippers. Researching the IA for the fuzzy slipper shopper would show you what most shoppers expect to see when using the navigation menu.

Okay, I care... Now what?

So, how do you go about determining the information architecture design for the navigation of your site? Card sorting. Card sorting is when you present all your navigation items to people and allow them to group them as they see fit. The goal is not to influence the sorting in any way; observe and record how others would group your information. It is also key to note if any cards take longer to sort, that may indicate the need to simplify that card. Smashing Magazine has a great article if you want to read even more.

How do you get started with card sorting? Great question! For this post, I used the Navigation System related to the #VetsWhoCode site. I used card sorting to determine if there is a better way to present the site's navigation items. I found a free tool (for small sample sizes) from Optimal Workshop that let me run a card sorting exercise with all the items from the site. The cards I included were all navigation items and any external links that were important to the site.

I set up the study with categories that I thought made sense already presented but left the sorter the option to create new categories.

The free tool allowed 10 people to complete the study, and I was lucky enough to get 9 people to sort the cards and provide valuable information on how they think the items go together. The most interesting result is that people did not have a consistent thought of how things should go together. There were two cards that 100% agreed went with the category, and those were Home and Contact. Not surprising. The survey creates an interesting chart; it's called a standardized grid, showing how often each card falls into each category.

I went into this experiment hoping to find a better way to structure the site's navigation menu. Still, the way the sorting was set up and the small number of results that were so varied didn't provide a clear idea of there being a better way to structure the navigation.

What would I do differently next time?

Be more descriptive on the cards. I left them vague this time because I didn't want to influence other than the actual word. It would help participants categorize the cards better if they knew what they meant, not just the word.
I would not offer categories next time. I would like to see how, with no input, the cards were put together.
I would provide better instruction in that there can be as many or as few categories as you want.
I would try to persuade more people from Twitter to participate. This time, I had many people already familiar with the content sort the cards, and I think it would be interesting to see people's thoughts not familiar.

In summary

Information architecture is important to the UX community because it ensures all of our beautifully designed and implemented content is put where it makes sense for the viewer to see it.

Is Your Baby Ugly? A User Experience Case Study.

Erin — Mon, 16 Nov 2020 02:22:33 +0000

The VetsWhoCode team was gracious enough to allow me to perform my case study on the VWC website, their baby, so let’s go through that together. Hopefully we all learn something!

Starting out we’re going to create a couple personas of the users who would be going to the vets who code site, then evaluate the site based on their assumed actions and outcomes.

The first persona we have today is Mark. Mark is 28 and he works in a major cell phone retailer in the middle of the country. He is a veteran of the armed forces and moved back to his hometown after his enlistment. He lives in an area of little opportunity so is looking to find a way to make himself a more valuable candidate for positions without going to college. Mark likely heard about the program from a podcast he listens to and was intrigued enough to check out the website. As a potential student of the program the main goal Mark has is to understand if and how the program can help him. Does he even qualify? Is it really free? What does the training schedule look like? How can he apply? Those kinds of questions are the ones we want to make sure Mark can find easily.

Generally speaking, consumers are browsing on their mobile device more often than they are on a desktop computer, and Mark is no exception. He uses his mobile device for all his web browsing needs. Let’s take a look at a few of the pages that Mark is likely to encounter on his user journey.

The first page he will navigate to is the home page of the main site. Luckily that is the first search result on Google, so Mark will have no issue finding the appropriate site. The first thing I noticed when navigating the the VetsWhoCode mobile site is that the buttons move. The typing text gets your attention and draws your eye to the call to action buttons below them, but when the text says ‘learn javascript’ the text causes a line break which makes the buttons move. Not hugely inconvenient but if you’re hovering your finger over those buttons to press, and they move, its unexpected.

Since Mark is interested in the program and not wanting to be a mentor, he will probably click on the apply button. The apply button takes him to the page listing the pre-work as well as the application process. It would probably create a better user experience if Mark were given an initial option to learn more about the program before jumping into the apply section. There is a navigation item for Mark to view the syllabus, but the movement of the words above the CTA buttons draws Mark to those two actions before anything else. In the grand scheme of things, most people in the position to want to join the program have heard more about it than just the name of the organization, so they have a pretty good idea about the ins and outs. On that same note, the pre-work links could use an additional indicator that they are a hyperlink. The text being colored and capitalized only visually indicates emphasis, only upon scrolling over the text do you realize it is a hyperlink. Keeping that the way it is and then including more button looking items below the text above the application would be a more clear indication that you are supposed to end up somewhere else. While we are on the aesthetics, the apply page, on mobile, has no margin or padding around the main text. Again, not detrimental to the function of the site, but could improve the look of that particular page when being viewed on a mobile device.

The next step of the user journey for Mark is to find the syllabus. The syllabus has the initial information Mark was looking for to figure out if this is the kind of tech he wants to learn. Two things the syllabus page could benefit from are an apply now button and padding on the first paragraph text.

Marks journey probably stops here if he doesn’t like the information he read or he will navigate back to the apply screen if he wants to continue. From there he will fill hopefully find the pre-work, complete those tasks, apply and join the next cohort.

While Mark’s journey likely ends there, we will move onto Michelle’s experience. Michelle is an advertising executive that believes strongly in giving back. She volunteers her time as well as makes monetary donations to organizations she believes in. She has recently started supporting veteran organizations because her sister is married to a service member and she recognizes the sacrifices bother her sister and brother-in-law are making. She is looking to make a donation to a veteran supporting organization and is researching various groups to make her decision. Her primary purpose in visiting the site is to find out how the organization supports veterans, how to make a donation and if her donation is tax deductible.

Michelle’s user journey also starts at the home page but she will be visiting the site on her desktop computer. She works from home at the moment so she is always at her desktop and currently does most of her browsing that way. When Michelle gets to the homepage, she will click on the donate CTA. An organization that runs solely on contribution from others, there are many donate buttons, which is important because the faster someone can complete the transaction, the more likely they are to follow through to completion.

Once Michelle gets to the donate page, she is greeted with a donor box widget and small paragraph of text to the right. Aside from the stylistic grammar modifications in the text, it would be great to see the entire donor box widget without having to scroll. Placing the headline text above the aside text would eliminate enough space at the top for the widget to be fully seen above the ‘fold’. Another added reassurance Michelle would like to see is that all donations are tax deductible. It is generally understood that all 501(c)(3) organizations are, but having it in writing gives her that verification.

If Michelle isn’t quite ready to make her donation, she will browse around to read more about the organization. She will likely navigate to the About Us page to read more about the program and also the Testimonials page to read of the impact the organization is making. Michelle really likes the about page, the video holds her attention and the information she is looking for is right there. When viewing the testimonials page though, she remembers reading that Vets Who Code has helped over 250 veterans, but there are only 5 testimonials? It would give Michelle more reassurance to part with her hard earned money if there were more stories she could read about.

Once Michelle has all the information she needs, she will navigate back to the donate page, which is really easy to find from anywhere on the site and complete her contribution. That is the end of the user journey for Michelle.

I am really appreciative the VetsWhoCode team let me take a peek at their baby and make suggestions. As you can tell, their baby isn't ugly but we can make some changes that could help their website visitors with their overall experience.

3 Easy UX Improvements

Erin — Sat, 03 Oct 2020 22:50:43 +0000

In this adventure of learning to be a UX designer, there are 3 things I have come across that web administrators can look at, that if done correctly, can improve the user experience of their site.

First, Text

The first one I want to focus on is making sure all your text is visible and readable, which includes hyperlinks! If your color scheme is very monochromatic, you may need to take a look at how your text reads on any part of your site. If you use images as backgrounds, you probably need to take a look at your text to make sure it people can read it easily.

Web accessibility standards have given us great guidelines for contrast in text, their general recommendation is 4.5:1. That varies all with size, but it is a good general rule of thumb. To check your text, they have a great tool at WebAIM that will tell you your ratio.

Second, CTAs

The next maybe not quick, but simple and hugely impactful is making sure your call to action button is easy to find. Make sure your audience knows how to give you their money, time, email address, whatever it is you would like to get from them. The best example of this is a recipe blog. I appreciate the recipe blogs that have a 'skip to recipe' button at the beginning of their post so I can skip directly to the ingredient list and directions, instead of having to scroll through their entire post on how they developed their signature dish.

Don't make people hunt for the way you want them to act. If your goal is to get a purchase from your website visitor, a shop now button needs to be one of the first things that draws the attention, but not in an obnoxious way. If your goal is to create a sales funnel via email marketing, make sure your newsletter opt-in is one of the first bits of information your viewer comes across.

Most Visited Pages

Take a look at your Google Analytics and find the pages people are visiting the most and the longest. That can be found under the behavior portion of the analytics. Make sure that page or pages is also easy for your visitors to access. It may be a good idea to move them around in your navigation bar so they are quicker to get to. The behavior flow gives you a great visual picture of how people are clicking around your site and can help focus the user experience improvements.

There you go, three easy ways to improve UX on your site.

On accessibility...

Erin — Sat, 03 Oct 2020 20:39:04 +0000

I am by no means a web accessibility expert, but consider myself an advocate. By reading, learning and understanding the best practices of web accessibility, it will help with the user experience for anyone who would like to experience a website.

But what is it?

Wait, let’s take a step back. What exactly is web accessibility as I’m referring? Just to be clear, I don’t mean people being able to connect to the internet and browse webpages. The ability to have an internet connection is not the accessibility I’m talking about. The web accessibility I am referring to is the ability for people to access the web and the information on the web that interact with the browser differently. Someone who may need a screen reader because they can’t see as well, or someone that needs to use the keyboard to navigate because it is easier than using a mouse. Also, if someone is colorblind, making the site distinguishable for them as well.

Why?

Why should you make your site accessible? The ADA and Section 508 of the Rehabilitation Act all have provisions that require some kind of assistance or access for those covered by the law. A quick reference that pulls out those pieces for you: accessibility laws.

You would also want to make your site accessible so that everyone can have the information you so generously made available to the world wide web. Why go through all the hassle to create a website if everyone can’t “see” it. But what if you’re selling something that a blind person wouldn’t use, cars for example… Just because someone may not directly use your product or personally need your service, doesn’t mean they aren’t looking for someone they know. I had a conversation with my husband the other day as to why a car dealership needs a website that is accessible. For example, if someone needs to use a screen reader, odds are, they aren’t driving, right? Well, that person has to get around somehow or they may have a teenager that is getting ready to drive. They also may have been a car enthusiast prior to their eyesight diminishing and likes to keep up with what is current in the car industry. There are a lot of reasons to make your site accessible, even if your target audience may not need those assistive technologies.

Okay, so now what?

So, where do you start? Actually filling in the alt of your images is a good place! I know we all have seen alt=” “, fill those in! That is how the screen “reads” an image to someone that can’t see it. If you’re always putting the alt description, then good for you, move on to another access point.

Next, keyboard navigation. There are several reasons why people would need to navigate using just their keyboard. One could be efficiency. There is no other reason except to prevent the hand movement between keyboard and mouse. Others could be because of low-vision, no vision or motor skill issues that make using a mouse difficult. To ensure your page is keyboard friendly, first is to make sure if you hit your tab key, you can get to any link on your page, if not, you have a bit of adjusting to do.

Keyboard navigation primarily depends on the tab, shift, enter, space bar and arrow keys for people to progress through the page. To further enhance your keyboard navigation, allow the selections to have an on-screen focus or hi-light. A lot of CSS reset boilerplates take that functionality out of the web browser, so putting that back in will help people using the keyboard to navigate to understand where they are on the page a bit easier. A reference: [Keyboard Navigation](http://www.practicalecommerce.com/Using-Keyboard-only-Navigation-for-Web-Accessibility.

These two items just scratch the surface of what it means to make your site accessible. There are a whole lot of other considerations, but I think this one is a good start for most people looking to increase accessibility. Baby steps.

For your additional reading pleasure:

Using CRAP to enhance the web experience

Erin — Tue, 28 Jul 2020 01:15:53 +0000

Well, CRAP!

One of the widely accepted design guidelines is CRAP, catchy yet misleading, referring to contrast, repetition, alignment and proximity. Graphic designers tend to think in these terms when looking at graphic images and print designs, but they can also apply to the design of user experience. Yes, I said the design of user experience…

Let’s dive into the C…

Contrast can relate to several different concepts, contrast in color typically, but can also mean the contrast in size, shape and texture. Antonio Villegas has a great article on Nelio about color and has a great graphic that demonstrates the importance of contrast when it comes to color. The difference is the experience the user has when trying to consume content from the site in the most efficient way possible. It also leads itself into web accessibility, but that is a topic for a later discussion.

I regret not saving a resource, but I read somewhere that a great way to check your contrast is to put the document in grayscale, which can be done with overlays in most mock-up programs, to see how the colors react to one another when hue is not a contributing factor. Do the grey tones all blend together? If they do, then you should re-evaluate.

Another place where contrast can come into play when creating a quality user experience is in interactive elements. Imagine how hard it would be to quickly find a button to submit an online order if it were the same color as the elements around it? Contrast is a great way to make the things we want people to take action on to be more present and apparent, which makes the experience for the user easier. An example from an article on Digital Litmus has a great example.

Typography is another area where contrast can be applied to the design of user experience. Pages that are text heavy, can improve the user experience by helping to guide the visitors eye to where you want it to land with contrasting size or style of type. It can also help establish a hierarchy of information at a quick glance. I asked Google how long the average person spends scanning a webpage and the first search result was 2.6 seconds. That means you have less than 3 seconds to get your visitor interested before they are moving on. Using a type that draws the eye is one way to gain the users attention so they do not navigate away from the page.

Increasing the contrast of the words you want the visitors to read first, by making them larger and/or bolder will draw the eye to that text. This contrast can also be created by difference in typefaces. Using contrasting typefaces can give the appearance of importance within large bodies of text.

Contrast can be hugely helpful in designing a user experience that makes a page easier to digest and lead the reader to the most important information.

Moving on to the R, repetition. Repetition is the use of repeating elements in the design. Repetition is important in the design of user experience because it helps train the user how to interact with your site. What does that mean? Train the user? By now, each person visiting a webpage has a general idea where they can expect to find particular elements. The navigation will probably be near the top, the main content in the middle-ish, all the less important stuff that has to be there will be near the bottom. If you have a site that doesn’t follow those typical conventions, repetition can help you train your user how to see your site. Side bar- there is something to be said about keeping your site as viewers expect, makes the user experience more fluid because there isn’t a learning curve.

In an article from The Design Work, several examples of atypical designs are presented. All of them intriguing, all of them requiring additional thought from the visitor before moving on within the site. And by additional thought, I don’t mean people are staring at the page in confusing, but the decision to click an interaction such as a menu takes a fraction longer when it isn’t where it is expected to be.

In this example, the navigation is at the bottom of the left side page. With each page turn, the navigation should stay in that same spot, using repetition to train the user how to interact with the site. If the navigation moved around the “pages” based on how it looks best, readers may become frustrated at having to find their way around each time.

Another place where repetition helps in the design of user experience, page layouts. Each page in the site should have a repetitive look about them. Why is that important? To maintain consistency, which improves the user experience because the user knows what to expect and generally where they can find a particular element, like navigation, next buttons or site map (if that’s a thing anymore). Again, we’re back to having 2.6 seconds to make an impression, if it takes your user much longer than that to find what they need, they will probably look somewhere else.

A fun graphic from Orbit Media showing why people leave pages, they can’t find stuff! Use repetition of site layout or element designs to help users find the information they need and create an easy user experience.

Following contrast and repetition is alignment. Alignment refers to how things are lined up with one another. The first element we typically think of when bringing up alignment is text. Text can be aligned to the page in several ways, but the easiest to read is left justified. Center justified is okay, with small pieces of text, such as captions or quotes. A great article from Meetchopz on Medium explains it well.

Alignment can also refer to elements other than text. It will create a better user experience if all elements have a similar alignment. An example being a blog where all post previews are left justified versus alternating between left, right and center aligned. Consistent alignment allows the viewers eye to use the most efficient movement to take in the consecutive information.

This blog page has posts arranged from left to right in chronologic order, kind of, but they are aligned up and down. It is very unexpected and causes the visitor to have to think about articles are arranged because the alignment is not typical of a blog page.

Lastly we have proximity. When talking about proximity, we are referring to the relationship each element has with each other, including the use of white space. Proximity of elements helps to group like items and create a hierarchy of information. Having elements that belong together in close proximity encourages them to visually be experienced together. With elements being grouped together, having white space between groupings creates a pause so the viewer understands there is a break in thought or idea.

A big point I want to make in regards to proximity is the use of white space. I know I mentioned it just a few sentences ago, but it is something that I find needs its own thought. White space is not necessarily white, but it is space that doesn't have anything in it. Its a break between elements or groups of elements that act as a paragraph break. These are important because it helps present information in digestible pieces. I found a great article from interaction-design.org that has a lot more detail, if your interested.

So there you go, next time you're creating a design remember the design principles of C.R.A.P.

The Value of a Designer

Erin — Tue, 14 Jul 2020 23:06:04 +0000

Fun fact, I am a web designer (who knows enough code to get in trouble). I went to school to be a web designer. I’ve been through a boot camp, sat through Lynda and Udemy courses, read design theory books like they are going out of style, but why?

Why is that a thing when there are template sites and drop and drag services, so anyone can be a web designer, right? Wrong, a web designer and a website creator will get two different end products. A designer asks “how can i make this site better for my user” and a template asks, well it doesn’t ask anything, but the template designer makes sure it is intuitive and easy to use for the person building the site.

So, with all the options to create a website without a designer, why would you? I think there are instances where it absolutely makes sense to use the template or prebuilt model for a website, but not every time. If your website is purely informational and you don’t intend for your audience to take any sort of action within your site, then the template site will work perfectly for you. If you are looking to have any sort of return on your web traffic, you need a designer.

Why? Because every decision has a reason behind it, usually based on research. Rarely will you hear a designer tell you they made a decision solely based on something looking cool or because they liked it, odds are they have put a lot of time into understanding the behavior of the person looking at the component and knows what will garner an action, a feeling, a response. That is the true value of a designer.