blog

3 things I like about Scrum

I recently started working on a Scrum team and just finished a Scrum Essentials class. So far I really am enjoying working on a Scrum team. Some people complain about the Scrum process for a number of meetings. I can’t believe I actually like (some) meetings now, well I’ve never minded “productive” meetings and the Scrum meetings seem to be productive and focused on getting results.

3 of the coolest things I like about Scrum so far…

  1. Constant Improvement – The entire process seems to be focused on moving forward and how we can get more done as a team.
  2. Transparency – Using a Scrum board, we know exactly what’s going on and each member of the team knows what we need to do to achieve our goals.
  3. The Rituals – I like the structure, we have set processes like setting goals, planning, and refining that we don’t deviate from.

Browser Support

I’m finally getting settled (or kinda settled) into having a new baby in the house and I hope to get back into a routine of writing. I am really enjoying experimenting with some of the new features of HTML5 and CSS3, however, sometimes it doesn’t work well with older browsers and I wonder about the new feature support.

If it were just me I wouldn’t be concerned about browser compatibility, but I have to buy diapers by the truckload. And working for me doesn’t buy diapers or even wipes, so when I’m working for others I try supporting the latest browsers and I like to stay compatible with 2 previous browser versions. I just came across this website, and it seems to be a pretty good resource when checking for browser compatibly issues http://caniuse.com/.

Setting Media Query Breakpoints

I am a big fan of using analytics to make informed decisions and it is an important tool in determining break-points in CSS media queries. In Google Analytics you can check those by visiting…

Audience > Technology > Browser & OS > Screen Resolution

I look through the top 100 resolutions and make sure there isn’t anything out really wacky, like a trend in huge or small screens, then design for the most common devices and that will also depend on the goals of the website. I group the most common resolutions together in the breakpoints using “max-width” and “min-width” in the media query to save time. There’s a popular saying about designing for mobile first, I don’t believe that is necessarily true, I’m always going to design for the user first. There are a lot of factors to consider when determining the breakpoints for the design, but the user, content, readability, and usability should be at the forefront when making those decisions.

On side-note resolutions change all the time and it’s a good idea to check these periodically. Below are the top 20 screen resolutions for one of my websites. 1366 x 768 has held the top spot since 2012, before that it was 1024 x 768. With smartphones and tablets outpacing computers to access the internet it will be interesting to see what resolutions will be in the top 20 in a few years. Regardless of resolution or device, its a safe bet to design user first.

  1. 1366×768 – (25.94%)
  2. 1440×900
  3. 1280×800
  4. 1280×1024
  5. 1600×900
  6. 1920×1080
  7. 1024×768
  8. 320×480
  9. 320×568
  10. 768×1024
  11. 720×1280
  12. 360×640
  13. 1680×1050
  14. 1280×720
  15. 1093×614
  16. 480×800
  17. 1536×864
  18. 1301×731
  19. 1360×768
  20. 1438×808

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 uxmag.com and uie.com. I also follow Nielsen Norman Group. There are many resources for testing usability, one of my favorites is www.userfocus.co.uk they are a London-based usability consulting and usability training company and have put together an awesome workbook on usability testing.

HTML5 Responsive Images and CSS3 Image Flipping

It’s hard to have a responsive website without responsive images, I usually use the HTML5 figure “figure” or the aside “aside” tag for responsive images. In your CSS just assign your width, max-width and/or min-width to the tag.

In the code below, the image below will not exceed 800 pixels wide or get smaller than 300 pixels wide.

figure{min-width:300px;max-width:800px}
figure img{width:100%;}

Using CSS3, we can also flip images horizontally without the use of an image editor or JavaScript.

aside img{
-moz-transform:scaleX(-1);
-o-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
transform:scaleX(-1);
}

Check out the demo here, be sure to resize the browser window.

Reducing Clutter Helps Users Reach Goals

And in other news, water is wet. In design “choice” kills, if you try to say everything you end up saying nothing. I am not a big fan of clutter or anything that gets in the way of a user achieving their goals, like social media icons on websites. Therefore, it is really no surprise when I read Removing Social Sharing Buttons Increases Conversions. Yes, You Heard That Right! I am a big fan of “Goal-Driven Design” and if your goal is to drive traffic away from your website, add the social media icons and other distractions.

Every object on a web page is competing for the user’s attention and it is a user-centered designers job to lead the users to their goal, and every design element should have it is time, place and weight. If your primary objective is to drive traffic to your social media presence, sure the links should be prominent. However, if your goal is for the user to interact with your website, then wait. Wait until after the user has completed their goal then invite them to like your social media page. If your website does not have a goal, well then check out my last post on defining your website objectives.

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:)

Faster Websites Increase Profitability

When it comes to designing fast websites, I guess I’m a dinosaur. I remember the distinct sound of my 56k modem firing up and the challenges of trying to develop a website that would look good and load fast on slow connection. To me, a big part of user-centered design is fast loading pages and a snappy interface whether you are designing for 56k or 3g.

Like any pure blooded redneck- I believe faster is always better and It looks like having a fast website pays off where it counts, a recent internal study by Wal-Mart found that:

  • A 100 millisecond delay resulted in a 1% DROP in revenue
  • A 500 millisecond delay resulted in a 20% DROP in traffic

After

I’ve wrote about website speed being king before and it’s nice to see real results. I can’t begin to imagine what a 1% drop in revenue might look like for the Wal-Mart website? I’m guessing a redneck like me could probably buy a pretty fast truck with 1% of the profits from an hour or two. 🙂