Usability

This semester, we've learned the nuts and bolts of web design: HTML, CSS, JavaScript, jQuery, AJAX, and more. You also recall that, early in the semester, we had a class discussion about about design-what makes good design, what makes bad design, and why. This falls generally under the umbrella of usability, or user-centered design, which means, according to usability.gov designing your website so that users can effectively, efficiently and satisfactorily achieve their goals. We return to that topic today, which is particularly important as we prepare for testing your websites.

Schneiderman's Eight Golden Rules of Usability

Usability isn't an easy thing to master. There's no magical formula that you can follow to make your site user-friendly. There are, however, some guidelines that will make your site much easier for your users. These rules are based off of user interface design (such as interactive applications), but can easily be adapted to

  1. Strive for Consistency - Keep your design consistant across pages. Users will be confused if your website follows one design pattern on one pages and another design pattern on another page. Keep your navigation bar, the way your links look, your text size, etc. consistant.
  2. Cater to Universal Usability - Your website should be easy for people of all ability levels to use.
  3. Offer Informative feedback - If your website has interactive elements, such as form submission or an AJAX back-end, make sure to inform the user what your interface is doing. Has the form been submitted? Has the information been saved successfully? If you were the user, what would you like to know?
  4. Design Dialogs to yield closure - This rule is more important for user interfaces than for more static sites, but still applies in situations like in Rule #3.
  5. Prevent Errors - This is one of the hardest to master. It involves stepping through the process that users take to achieve tasks on your website, and thinking about where on your site users might become confused. User testing can help illuminate some of these problems.
  6. Permit easy reversal of actions - Don't let a user get lost on your website. Make it easy for them to get back to whatever page they came from.
  7. Support internal locus of control - This rule is similar to Rule #6. Make sure your users always know where on your website they are located. A map of the sequence of clicks taken to reach their current page (i.e. "About/Our Story/The Beginning"), or "breadcrumbs", are helpful in achieving this.
  8. Reduce short term memory - Don't make your users remember information from page to page. If your site has a page that requires users to use information from another page, put all of the information together instead of making your user jump back and forth between pages.

More Usability Suggestions

Side note: One of the most important things about usability testing is to inform the test subject that you are testing the system not them, and that any confusion or issues they have is valuable information to you. Your usability test won't be effective if the test subject is nervous because they feel they are being judged on how well they use your site!

What is Responsive Web Design?

Responsive web design is certainly one of those things that falls under the umbrella of usability, but is so important that it deserves its own section. Making a website "responsive" means designing your website so that it is adaptable and accessible to users on any device.

Think of the multitude of devices out there today: computers with large-screen monitors, big laptops, small laptops, tablets, e-readers, phones, and many more. If users from any of these devices cannot get the information or achieve the tasks they need, your website loses a lot of effectiveness. The below chart shows the growth of mobile phone use in accessing the Web.

the rise of mobile web access

And that's just phones.

What does a responsive website look like?

Well, it's much easier to show what a non-responsive website looks like. For example, the CS110 Schedule page is not responsive:

the cs110 schedule page

You'll see that at smaller screen widths, the user cannot see the whole schedule at once, which is a problem in and of itself. But you'll also see that because the menu on the side is fixed, it overlaps the menu when you try to scroll sideways to see the rest of the schedule. The spigotdesign.com site, however, is designed to be responsive. Try visiting the site and re-sizing your browser. The following image shows what the site looks like on a computer, on a tablet, and on a mobile phone.

a responsive web site

Elements have been adjusted in size, moved, and even taken away entirely to adapt for different screen sizes. There are really no hard-and-fast rules for making a website responsive. Much of the process of responsive web design involves designing for big screens, testing for different screen widths, and then adjusting your site accordingly. There are, however, some helpful guidelines for designing for smaller screens.

Guidelines for Designing For Smaller Screens (Tablets, E-Readers, Phones, etc.)

How do you adapt for responsiveness?

In order to adapt your website to different screen widths, you first must determine your screen's width, then apply certain rules to your screen under those circumstances. This is done with a media query. A media query is like an if statement in JavaScript: if your screen is within a certain range, then apply the CSS rules.

Example

Resize your brower window (by clicking and dragging with your mouse) to see the block change color.

    .colorblock {
        width: 100%;
        max-width: 850px;
        height: 30px;
        background-color: red;
      }

      @media screen and (max-width: 700px) {

        .colorblock {
          background-color: blue;
        }

      }

      @media screen and (max-width: 500px) {

        .colorblock {
          background-color: green;
        }

      }
  

Notice that:

  1. The media queries comes after the original CSS definition. This is so that the later rules can overwrite the previous ones.
  2. Only the rule in question (in this case, the background color) is changed. All the other original rules still apply.

In the example above, 700px and 500px become special numbers. In the web design world, these are called breakpoints, since they are screen widths where things on the page change. In general, it is good to have as few breakpoints as possible - it can be confusing if things are constantly changing when you resize your screen, and difficult to maintain. Thereis a lot of debate in the web design world about the best breakpoints for your media queries, but, generally, safe bets are 768px and 480px, the screen widths of an iPad and an iPhone.

Other Responsive Fixes

On another note, you'll notice that the div itself is responsive and resizes along with the screen. This is because we gave it a 100% width and a max-width of the largest pixel size we want our element to be. This is a great trick for making images responsive; if you check, you'll see that all the images on this page are. Percentage widths are one of your biggest tools in making a site responsive; instead of fixed-pixel widths, use percentages of the screen size. Other tricks include:

Besides that, just try things! You'll never know what works until you spend some time finding out what doesn't first.

Example: Let's Fix the CS110 Schedule

Here's a responsive version of the CS110 schedule. Try resizing your browser, then read the explanation.

Here's a fancier responsive version, which automatically generates day labels in the narrow version.

Example: Let's Adapt a Page to be Responsive

Start with this non-responsive page, and use media queries to make it adaptive to smaller screens. Your solution may look something like this page.

XCode

While shrinking your browser down to 768px and 480px will give you a pretty good idea of what your website will look like on an iPhone and iPad, it's not always a completely accurate representation. The best way to see how your site looks is to get your hands on one of these devices, or to use a simulator. The best iOS simulator is actually made by Apple, and comes with Xcode, Apple's free software development tool for Mac users. It can be found in the Mac App Store.

In order to use the Xcode device simulator, first launch the program. Then under Xcode > Open developer tool launch the iOS Simulator. This will bring up a simulation iPhone, which you can use exactly like a normal iPhone.

launching xcode

If you would like to see your website on an iPad or another iOS device, you can change it under Hardware > Device and select the device you wish.

switching devices

More Resources

You're probably thinking by now, Wow, this sounds like a lot of code! But don't be afraid! There are tons of frameworks on the Web that make creating responsive websites easy. Most of these are built on something called a fluid grid, which, in most cases, takes care of the responsiveness for you. One of my favorites, and an industry standard, is Bootstrap, a framework built by two software developers at Twitter. If you plan on continuing in web design after this class, or if you're just interested, check it out.

Futher Reading