Mindful Design

I know it’s strange, I’m a redneck and rednecks usually aren’t into meditation, unless it involves beer and fishing (not that there’s anything wrong with that). But, then there’s me I’m into meditation, yoga and qi gong. I’ve recently started yoga, and I have practiced qi going for years. I like to meditate, I’ve even built 2 meditational labyrinths. I walk our labyrinth regularly and recently started taking a mindfulness class.

Meditational Labyrinth by Matt Fitzwater The class is awesome, and it’s really made me realize just how much of the time I spend is just on “auto-pilot”. To be mindful or aware, to be truly present- man, that is difficult to do.

Of course I’m thinking about how to apply mindfulness to web design and that can be tricky to. Designing for everyone, being mindful of all the potential visitors. Here are just a few considerations to think about when mindfully designing a website.

  • What types of barriers could my website’s users have? Could they have a slow connection, a physical impairment?
  • 1 out of 5 people in the U.S. have a disability. Do my users need assistive technologies to access my websites, like screen readers, braille keyboards or maybe a mouth stick or head wand.
  • Is my message clear and concise?
  • Is my code clear and concise?
  • Am I writing to what my users need to hear, not just what I want to say?
  • Is my website, images, music, and videos inclusive, are they empowering people or are they excluding?
  • Am I following best practices for modern web design?

Incidentally, I guess this list could go on for a good while, but I hear some bluegill calling me.

Accessibility Classes, Badges, and Video Disasters

Accessibility has always been important to me, building an inclusive web has always seemed like the right thing to do. I’ve taken some accessibility classes in the past and this year I’ve decided to up my accessibility game. So I am taking a course from Deque University now (I’m going for the IAAP Certification) and I just finished a class from the University of Illinois at Urbana-Champaign “Web Design: Web Accessibility Evaluation Basics” and received their badge. These classes are really helping me become more of an empathetic designer, and realize some of the challenges people struggle with daily, like being deaf or hard of hearing and trying to watch a presentation or video without captions.

I’ve not dealt with a lot of videos on the web and only recently really thought about the accessibility considerations needed when working with video. Making websites inclusive is a serious subject, but this video on the fails of auto-captioning cracked me up, remember always double check the auto-captions. So now I’m in the process of redesigning my website to make it blazing fast and inclusive as possible. Stay tuned for some cool changes:)

Usability Resources

We have added a new member to our family this week and life is somewhat hectic, I forgot how much sleep you don’t get with a newborn. With that in mind, this week’s post is short.  Earlier this week someone asked what websites I like to visit for staying current in UX. My top picks and I also follow Nielsen Norman Group. There are many resources for testing usability, one of my favorites is they are a London-based usability consulting and usability training company and have put together an awesome workbook on usability testing.

5 Questions to Help Discover Your Website’s Primary Objective

Strategic communication is the best communication, so it’s important to define the strategy in the discovery stage of the project. Our strategy will determine the tactics we use for a developing a successful website. It’s hard to determine the strategy without knowing first what the primary objective of the project is. I have broken the discovery phase of user centered into 7 categories; each category may have questions, test or exercises.

  • Audience Discovery
  • Accessibility Discovery
  • Brand Discovery
  • Goal Discovery
  • SEO Discovery
  • Speed Discovery
  • Usability Discovery

Over the years I’ve acquired quite an arsenal of questions for gathering information. Below are 5 questions that I use in the Goal Discovery category.

  1. What exactly is purpose of this website? (please define a clear, concise objective)
  2. What is your vision for the website?
    How will you determine whether the vision is a success?
  3. What are your goals for this website and each section of the website?
    Are the goals really the goals? Can you define alternative goals? Last year Home Depot sold millions of ¼” drill bits. “Nary a soul” (as my grandmother used to say) wanted ¼”drill bit, they all wanted 1/4” holes. What is the end result, users need?
  4. Can you rank the applicable purposes of your site below, with 1 being the most important?

[ ] Information
[ ] Branding
[ ] Lead generation/qualifying prospects
[ ] Sales revenue
[ ] Ad revenue
[ ] Internal needs
[ ] Transformation

  1. What are the 3 main things you want people to do you your web site?

Some of the questions will lead to more questions, and hopefully, they will help define the overall strategy.

Real World Speed Test

In my quest to build the fastest website possible, I stay busier than a Colorado Taco Bell employee working the late shift. I have several methods of testing website speed; one of the automated tests I like to use is Google PageSpeed Insights.

In following their recommended techniques, websites will get a lower grade for using an external style sheet (if the style sheet is small). Therefore, I started testing inline styles as opposed to an external style sheet. I realize there are many different variables in determining the speed and my test are not the most scientific, but if you look at “exhibit A”, the page with the inline styles is over 100 milliseconds slower than “exhibit B” which is using an external style sheet. However, by using an external style sheet, the site loads faster in the real world, so I believe I am going to stay with the external file on my website for now.

I am using Typekit for my web fonts and that also brings down the score, but I am thinking it is still faster than using images, not to mention the time it takes to develop and optimize the images. I believe speed is king and it will always be a factor on the web. With the percentage of mobile web surfers climbing it will be even more of a factor. In the end, using automated tools for testing is good, but using common sense and real world test will always be a better solution.

Testing Readability

When optimizing a website for usability content should be easy to read. Writing web or email copy should be easy to scan and written on a 6th to 8th-grade level. You might want to knock that down a couple of grades if you are writing for the average redneck. Regardless of your audience, it is important to test the readability of your copy. I try to score a 60 or above on the Flesch–Kincaid readability tests there’s a great online tool or you can use Microsoft Word to test this.

To check the readability of your copy in Microsoft Word

  • Make sure “Show readability statistics” is checked under “File > Options > Proofing”
  • Open Microsoft Word and paste your text in the new document
  • Click “Review > Spelling and Grammar”

For this post, I scored 69.3 on the test, and it looks like I am writing on about a 7th-grade level. I am guessing my audience is not the average redneck; I’m guessing they are classy and sophisticated or at least like me — an above average redneck:)

Speed is King, Content is Queen

When people think of the “King” some might think of Elvis or Michael Jackson. Being a redneck-nerd, I think of Dale Earnhardt and a chess king. When talking about the web, a lot of people say: “Content is King”. I’m going to run with my chess theme- I believe “Content is Queen” and “Speed is King”.

In chess losing your queen, is almost as bad as losing the game, you can still play, however, it’s a lot harder to play without a queen. So you can still play with poor content (your game will suck) but, you can’t even play the game without a king. If your site is slow, and not helping the user meet their goals fast, you can’t even play— checkmate baby.

People do not want to wait, and it’s only going to get worse. I don’t see a wave of patience sweeping across the world anytime soon; I’m the worlds worst if I see a loading screen taking too long, I’m gone! Interrupt my goal of finding a burlap teddy for my wife for Valentines Day with a stupid survey, I’m gone! I’m shopping somewhere else. (I’m joking about the burlap teddy). Microsoft seems to think that 250 milliseconds is the magic number for having a competitive advantage.

Speed up your site with lean coding and goal-driven design

  • Obviously hardware, uptime and bandwidth is going to be a factor here. Make sure, your site is fast and reliable. Periodically monitor your site for any changes.
  • Make sure, your page validates. This will make sure users are seeing your content, the way it should be seen.
  • Follow the recommendations of Yahoo and try to score an “A”. Another good resources is Google Page Insights.
  • Avoid the bloat in content management systems and frameworks. When I view the source and see a site loading 12 JS files and 9 CSS files, I cringe. What about those speedy frameworks? Is the latest and greatest CSS framework worth the 200k download? Find out the how many files users are downloading and the size of your page here.
  • Are your goals and your visitors goals clearly defined? Know the main things that people want to do on your web site and make them obvious and easy.
  • Please don’t block first-time users with unrealistic prompts. Why would a first-time user want to sign up for a survey, like you on Facebook or give you their information before they get to know you?

“Every millisecond matters.”

Arvind Jain
Google Engineer

If milliseconds matter, a user might leave a site before they even get to view the content — Speed is King.

Thoughts on UX Design

 I am hesitant to brand myself as UX Designer, Web Designer, Graphic Designer or even redneck designer. I really don’t want to paint myself into a corner and fit into any box. I like the diversity of wearing many hats and being a “creative professional, who practices UX Design” seems to be a better title (doubt it would fit on business card though).

UX Design or User Experience Design can mean a lot of different things, and it seems everyone will give you a different definition. I like how the Nielsen and Norman group define “User Experience”.

“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

What is a UX designer?

A UX designer uses a set process for researching what the users actually want and need. UX is strategic communication, I believe it’s about building relationships with people through design.

The set process of UX design that I follow involves 4 steps that are cyclic. The first 2 steps are where i spend the most time building a relationship with the client. Obliviously, defining the project constraints and obstacles (time, budget, etc.) will determine the actual tactics and time we will use in each step. Here’s my “Cliff Notes” on the process that I adhere to…

  1. Discover
    The listening phase. Getting to know the company, services, products, customers and defining a strategic objective and setting the design boundaries and guidelines. Asking more questions than a nosy neighbor because what you don’t know, can hurt you. So it’s imperative to get as much information as possible up front to define a clear, concise objective based on the information. After we gather our information we should then:

    • Define the objective and strategy
    • Outline the steps to be accomplished.
    • Define the required tactics, including budget and team.
    • Preparing a schedule.
  2. Design
    This is where we start pulling in the information, I use a pencil and paper, (lots of paper) during this stage. We will set our primary objective(s), developing persona’s, flushing out ideas, determining cliche’s and the obvious design choices. Prototyping, Wire-framing and user flow. I like to develop high fidelity concepts for ever page and interaction and start the style guide at this point.
    Sharing the style guide and concepts with all the stakeholders should reduce and surprises.
  3. Development
    Bringing it all together, following the Style Guide and using a Content Matrix and Content Deck makes this stage come together quick, but always watch for deviations or bottlenecks. Identify any weak links and beat them unmercifully, just kidding.
  4. Deployment
    Launching the final site, analytics and split testing. I am a big believer in A/B split testing and believe if your site isn’t getting better it’s at best stagnant. Using the data we gather from the split testing and our analytics we go back to the discovery phase.

Great UX, Graphic, Web or whatever design shouldn’t be focused on a single destination, but the entire journey covering all aspects of the brand and user. Great design is relationship building design.

Quick, Down and Dirty UX

Sometimes I’m lucky and I’ll have a nice design brief, sometimes I have to wing it. Whether it’s the budget, the time, size of the project or the perceived value. At times there just isn’t a way to go through the 4 stages of UX design, sometimes we just need to get stuff done. The most important aspects of any strategic communication is defining the primary objective and target audience.

After I’ve went through a Brand Discovery Process (defining the brand that I’m designing for) and SWOT Analysis (and hopefully built a good relationship with my client). I’ll need to know what is the primary purpose of this project? Can we define a clear and concise objective?
Getting to 1 concise objective is awesome but, if we have multiple stakeholders it may not be possible. If you can’t get 1 try to rank the objectives. It’s always better to have fewer objectives. Remember in trying to say everything, we say nothing… choice kills design and user flow.

Who is the primary audience?
After I have my goals defined, I’ll develop proto-personas and design for them. 1 or 2 proto-personas based on any research that I might have, helps a redneck like me become more empathetic. What is their age, location, job, education, and life stage? Design for these people.

After we’ve defined the primary objective and our target audience. Now we design for the user, what they need to see and hear. Successful communication is strategic communication and in UX design we will focus on where the business goals and the user’s goals converge. Depending on the size of the project I’ll jump right in to the wire-frames, user flows and prototypes. Early prototypes shared with the stakeholders early on will help prevent any confusion, project creep and unnecessary time.