Category Archives: Usability

Is There A Hall Of Shame For Usability?

(Disclaimer: The following post will be the tallest post I have ever written)

If you’re wondering what that blue line a few paragraph down is, I’ll start by telling you that it’s not a blue line. It’s the Wi-Fi agreement for Kohl’s free in-store Wi-Fi access. No, really. If there isn’t a hall of shame for usability, there should be. I’m no user interface or user experience guru, but I’m pretty sure that I can recognize a bad interface experience when I see it. Which brings me to something as simple as Kohl’s free Wi-Fi login page (which you can see in all its glory after the break). So that blue line is actually a thumbnail of the scaled down version of the full user agreement image which you can see here. Just to get on Kohl’s Wi-Fi.

The image that I’ve posted is scaled down to 240 × 23508.  That’s scaled down from the original 640 x 62688 that I screen grabbed with my iPhone (which was not easy let me tell you). Not only did it take at least five minutes to screen cap, but to re-assemble it took more time than I’m going to admit.

So let’s take a minute and think about this. You go into Kohl’s and want to hop on their Wi-Fi. No biggie right? What most people do is probably the same thing they do when they see anything that looks like a EULA; scroll to the bottom, ignore it, and agree. Scroll past all sixty two thousand pixels of agreement.

kohls

Swipe, swipe, swipe (repeat 20 more time) and you could easily have agreed to anything if you scrolled down and did’t read the agreement. And I’d be willing to bet big money that virtually no one actually does read the damned thing. Who has the time? Does anyone in Kohls’ legal or IT departments think that people actually come into their store, see the agreement, spend the next 15 minutes reading it, and then start shopping? Am I supposed to grab a coffee, find a seat, and peruse this novella while educating myself on Kohls’ policy on cotton from Uzbekistan (it’s in there) or the clean diamonds trade act (it’s in there too)? How does this even apply to me using their Wi-Fi? Shit, all I wanted to do was get on Wi-Fi so I could check Twitter and email so I don’t hit the damned data cap on my overpriced Verizon account.

Sixty two thousand pixels.

Welcome to Kohl’s.

Whoever thought this up and green lighted it should be dipped in honey, rolled in sugar, and tied to an ant hill. Why would I need to swipe through the Magna Carta just to get on Wi-Fi? Kohl’s can’t seriously expect anyone to read this, at least not in its entirety, so why bother putting it up in the first place? At best, the only reason I could come up with is that Kohl’s lawyers must believe that by putting every possible “cover your ass” clause and warning under the sun in front of their Wi-Fi access, that they believe that they’re indemnified from any damages that might occur. When I go to Starbucks, Panera, or any of the increasing number of places that provide free Wi-Fi, I am typically greeted with a single page of text, maybe a checkbox to agree to their terms, and a button to sign on. Quick and easy. Exactly like Wi-Fi. Why can’t Kohl’s do that? Do they know something that all these other places don’t?

So if anyone can explain to me the logic behind this, I would love to hear it.

Continue reading Is There A Hall Of Shame For Usability?

Bootstrap 3.2.0 Quick Reference & Notes

An abridged list of the most commonly used Bootstrap code and features (by me)

Over the past couple of months, I’ve been exploring and getting familiar with Bootstrap. During this time I’ve been keeping notes on some of the sticking points I encountered, along with useful tips and commonly used features I’ve learned from testing Bootstrap and reading various online tutorials. Here I present a quick reference of sorts of what I’ve found to be the most useful, and frequently used, parts of Bootstrap. If you find an error, or would like me to add something that you find useful, post a comment or email me.

Text (example)

  • Text alignment classes: .text-left, .text-center.text-right, and .text-justify. These map to the CSS text-align property.  Example: <p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p>
  • Paragraphs (and presumably other text elements) can be make to stand out with the .lead class, which sets the font size and weight, line-height, and bottom margin.
  • In headings (<h1>-<h6>) you can create lighter, secondary text with a generic <small> tag or the .small class.
    Example: <h3>h3. Bootstrap heading <small>Secondary text</small></h3>

Lists (example)

  • To have Bootstrap remove the default styling on a list (ordered and unordered), add the .list-unstyled class. Note that this only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Example: <ul class="list-unstyled">
  • Display list items horizontally using the .list-inline class. This uses display:inline-block and some padding. Example: <ul class="list-inline">
  • Make description lists (a.k.a definiton lists) two columns by using the .dl-horizontal class. Example: <dl class="dl-horizontal">

Tables (example)

  • For basic styling – light padding and only horizontal dividers – add the base class .table to any <table>
  • For zebra-striping rows, add the class .table-striped to the table.
  • For borders on all sides of the table and cells, add the class .table-bordered to the table.
  • To enable a hover state on table rows within a <tbody>, add the .table-hover class to the table.
  • To make tables more compact by cutting cell padding in half, add the .table-condensed class to the table.
  • Contextual classes for table rows or cells: .active,  .success, .info, .warning, .danger.
  • Create responsive tables by wrapping any table in .table-responsive to make them scroll horizontally on small devices (< 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Forms (example)

  • Bootstrap has three main form layouts. Normal (vertical with labels above inputs), horizontal (labels to the left of inputs), and inline (like horizontal but with form controls not using 100% width)
  • Wrap form controls (label, input, textarea, select) in divs and give the div the class .form-group (Note: checkboxes and radio buttons instead get the checkbox or radio class respectively). This sets extra bottom margin on grouped form elements and allows changing orientation more easily. Don’t forget to add labels to your controls.
  • Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
  • Give form controls (input, textarea, select) the class .form-control to pickup Bootstrap styling.
  • In form inputs you can use .input-lg and .input-sm for taller or shorter form controls.
  • Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.
  •  Style buttons with the .btn class.
    • You can also add .btn-default, .btn-primary.btn-success, .btn-info, .btn-warning.btn-danger, and .btn-link. Example: <button type="button" class="btn btn-danger">Danger</button>
    • Button size classes: .btn-lg, .btn-md.btn-sm, .btn-xs. For block level (full-width) buttons, use .btn-block. Example: <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
  • All textual <input>, <textarea>, and <select> elements with the .form-control class are set to width: 100%; by default.
  • Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
  • Give form controls the class .form-control. This applies various styles including 100% width.
  • Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Images (example)

  • Images can be made responsive by adding the .img-responsive class which add a max-width:100% and height:auto;. You can also give images shapes with the .img-rounded, .img-circle, and .img-thumbnail classes.

Grids/Columns (example)

  • Rows (typically divs with the class .rowmust be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. Use rows to create horizontal groups of columns. Columns should total no more than 12 per row per size. Example: <div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div>
  • Content should be placed within columns, and only columns may be children of rows.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-x class is not present. Columns stack on smaller screens. Don’t want stacking? Apply classes for smaller resolutions in addition to the larger resolutions like <div class="col-xs-6 col-md-4">.
  • Columns can be moved to the right using: .col-xs-offset-*.col-sm-offset-*, .col-md-offset-*, and .col-lg-offset-*. These classes increase the left margin of a column by X columns. For example, .col-md-offset-4 moves the column over by four columns. Another example, <div class="col-md-6 col-md-offset-3"> moves a six column wide column over by three columns.
  • The order of columns can be changed via the .col-md-push-* (pushes to the right) and .col-md-pull-* (pulls to the left) classes.

General

  • Easily center a page’s contents by wrapping it in an element (e.g. div) with the .container class. Containers set width at various media query breakpoints to match the Bootstrap grid system.
  • For multi-line blocks of code, you can use the .pre-scrollable class to create a scrollable, 350px (max) tall block.
  • General purpose text color classes: .text-muted, .text-primary.text-success, .text-info, .text-warning, and .text-danger.
  • General purpose background color classes: .bg-primary.bg-success, .bg-info, .bg-warning, and .bg-danger.
  • Floating left and right can be accomplished with the .pull-left and .pull-right classes respectively.
  • The class .sr-only will hide all elements with the class to all devices except screen readers.
  • Mobile specific classes:
    • Visible only on the specified screen size: .visible-*-block.visible-*-inline, and .visible-*-inline-block. So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.
    • (Deprecated as of 3.2.0, but still usable) Visible only on the specified screen size: .visible-xs, .visible-sm, .visible-md, and .visible-lg.
    • Hidden only on the specified screen size: .hidden-xs.hidden-sm, .hidden-md, and .hidden-lg.
  • Printer classes: .visible-print-block, .visible-print-inline.visible-print-inline-block and .visible-print (deprecated as of 3.2.0) and .hidden-print.
  • Current media query breakpoint widths (in pixels): xs < 768, sm >=768, md >=992, lg >=1200.
  • To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>. <meta name="viewport" content="width=device-width, initial-scale=1">. To disable zooming (not recommended), you can add the parameters user-scalable=no for a more app-like feel.
  • Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label.form-control, and .help-block within that element will receive the validation styles.
  • Style anchors to look like buttons by using button classes. Example: <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
  • Button classes can be used on <a>, <button>, and <input>.
  • Add the bootstrap theme for visual enhancements. See http://getbootstrap.com/dist/css/bootstrap-theme.min.css and http://getbootstrap.com/examples/theme/

A Final Note:

Bootstrap is a starting point. An excellent one, but a starting point nonetheless. You are by no means constrained by anything that it provides, and you can override anything it sets. Always refer to http://getbootstrap.com for the latest info, more examples, and advanced topics.

NBCNews.com Changes Again

It looks like I wasn’t the only one who thought that nbcnews.com’s last redesign was a disaster. Less than six months after radically redesigning their site, nbcnews.com has changed yet again, but this time for the better.

Gone is the layout designed only for mobile devices, with huge images everywhere and stories seemingly randomly scattered about. The latest design is closer to their old layout where stories are categorized, with a better use of space. They also left out a feature of the design prior to the last layout where a block of code above the header was hidden, forcing you to scroll up to see it after the page loaded. Anyone else using that pattern? I don’t think so.

So far, out of nbcnews.com’s last three layout changes, this is the best. We’ll see what they do next. Latest layout:

NBC_News_-_Breaking_News_&_Top_Stories_-_Latest_World,_US_&_Local_News_-_2014-09-11_09.38.17

Nbcnews.com Creates the World’s Least Usable (and possibly the ugliest) News Website

Nbcnews.com (formerly msnbc.com) has a history of terrible design choices. One of the worst, which I wrote about back in 2010, involved some ridiculous header that remained invisible when the site loaded unless you chose to scroll the page up. While I had no doubt that they would continue their tradition of making bad design choices, I was shocked to see their newest debacle.

Unfortunately I don’t have any images of the old layout to show you, but here’s a quick capture of their new layout as compared to the old:

Breaking_News_&_Top_Stories_-_World_News,_US_&_Local_NBC_News_-_2014-02-05_12.15 Breaking_News_&_Top_Stories_-_World_News,_US_&_Local_NBC_News_-_2014-02-06_13.24

Seems like whoever is in charge over there is really excited about mobile devices since it’s painfully obvious that the site has been designed to target smaller screens. In fact, it appears as if Nbcnews.com has totally forsaken desktops. Now, they have some Frankenstein hybrid of their old site mashed up with Pinterest. Hope you like images with your news because the site is loaded with them. Loads and loads of large images (which we all know mobile devices love to load quickly because they’re lightweight and don’t eat up data charges). And good luck trying to find anything easily. Categories seem to be randomly ordered, and the search page looks like a typical 404 page not found page, except that it’s not — it’s really their search, just optimized for mobile devices (hooray!).

I’d be curious to know if Nbcnews did any research or used focus groups to hone their new site, or whether this was all created without feedback. Don’t get me wrong though, I’m all for a decent mobile-friendly website, but don’t ignore desktop users in the process of building one.

The Flick Scroller

Sometime last year I came across an image carousel on an Italian website done in Flash that allowed you to scroll a set of images horizontally with the flick of your mouse. What I loved about it was how natural and intuitive it felt. The gallery of images was infinite, meaning that the same X number of images would repeat no matter how often you scrolled it. The obvious downsides were that it was done in Flash and not mobile friendly.

I’ve been working on and off since then to replicate the effect, as well as improve upon it. I finally have a non-Flash solution that uses jQuery to achieve the effect both on desktops and mobile devices that doesn’t require any other libraries and is super slim. I love the infinite scrolling effect in use here which relies on an optical illusion of sorts.

I’m posting the first examples here and would like your feedback to see if I should turn this into a jQuery plugin. I’m also open to some suggestions in terms of a name. I like the “flick” part, but struggle with calling this a carousel, gallery,scroller, or something else.

Demos

A caveat: The only downside I’ve discovered so far lies in mobile Safari. I have seen the scroller start off and work fine in this browser, yet cease to respond after a few flicks. Unfortunately I seem to have no way to debug mobile Safari, so if anyone can shed light onto the issue I’d be happy to update the code.