Tuesday, June 17, 2014

I don't know

Three words we all need to make sure stay in our vocabulary.  I have recently listened to a NPR TED Radio Hour podcast about saying "I don't know" (sorry, but I can't find the link right now, I'll put it in if I do find it) Freakonomics podcast, a .Net Rocks podcast and a Hanselminutes podcast on the same topic.  In this field you should always be learning, and in order to learn, you have to be able to admit there are things that you don't know.  There are always things that you don't know, whether you admit it to yourself and others or not.  And that's a good thing, it means there's always more to learn.

In that spirit, I've been hearing more and more about functional programming and it's benefits, and I admit it's a topic I don't know about.  But I want to, so I'm going to go learn.  So here are some link's I'm going to get started with, and I hope I've encouraged someone out there to go learn as well.


Wednesday, June 11, 2014

Review and notes from "Don't Make Me Think": Part 4

Don't Make Me Think: Part 4
all Web users are unique, and all Web use is basically idiosyncratic.
There is no "average" or "typical" user.  Everyone is on the web to accomplish their specific task at the time.  You need to facilitate your web sites function.  Don't try to figure out what people "like" or "dislike".  Everyone is different, use what works best for the functionality of your web site.
 The problem is there are no simple "right" answers for most Web design questions (at least not for the important ones).  What works is good, integrated design that fills a need - carefully thought out, well executed, and tested.  [...]  The right kind of question to ask is "Does this pulldown, with theses items and this wording in this context on this page create a good experience for most people who are likely to use this site?
Don't forget the tested part.  And not tested by you, or marketing, or QA, tested by a range of different users.  Take note of the specificity of the wording of the "right" kind of question.  What works on one page of your site very well may not work on another page, or even on the same page in a different context.  These are all things you need to think about and design around.  And Test.  And then Test some more.
[...] testing tends to defuse arguments and break impasses by moving the discussion away from the realm of what's right or wrong and into the realm of what works or doesn't work. [...] The point of testing is not to prove or disprove something.  It's to inform your judgement.  
Emphasis is mine.  Remember that everyone will have an opinion on what they think the "right" way to present something is.  Some people like dropdowns, some people hate them.  What matters is does the dropdown work where it's being used.
 Don't make me jump through hoops just because you don't want to write a little bit of code.
 I think the most prevalent place I see this is for searching, where the user is forced to select what type of search they want from a dropdown or radio list.  Don't make me pick, figure out what I'm searching for.  If you can't figure it out, search everything.
Just when you think you're done, a cat floats by with buttered toast strapped to its back.
I love this quote, the explanation for it is this:

When a cat is dropped, it always lands on its feet
and when toast is dropped, it always lands with the buttered side facing down.
I propose to strap buttered toast to the back of a cat; the two will hover, spinning, inches above the ground
With a giant buttered-cat array, a high speed monorail could easily link New York with Chicago
-John Frazee - The Journal of Irreproducible Results
The best way to learn how to make anything more usable is to watch people actually trying to use it.
Seems self evident.  How many of us actually do it?  That is why user testing is stressed so much in the book, and in my summary.  If you don't watch the people using your site, you don't know how they are using it.
One note I found very useful on accessibility:
with CSS you can put your content in sequential order in the source file - which is how a screen reader user will hear it -  and still position things where you want them on the page.
If you want your site to be accessible, don't forget to include users that are going to use screen readers, high contrast color schemes, etc. in your group of testers.

That's it, I hope you enjoyed the review, and I hope you go read the full book, it is definitely worth the time investment.  It is a reasonably short book, and translates pretty well onto the kindle, though you might have trouble reading text on some of the images.

Previous article in series

Monday, June 9, 2014

Review and notes from "Don't Make Me Think": Part 3

Don't Make Me Think: Part 3

Don goes into lots of detail on searching, but most of it basically boils down to this:  have a search box, have it on every page, and make it search everything.  Don't give me options on what to search by, or ways to scope the results.  Search the site, and give me all the results.  If I need to narrow the results allow me to do it after I have them.  Don't pretty it up, don't use fancy working.  Search, a box, and a button.
Every page needs a name. [...] The name needs to be in the right place.  The page name should appear to be framing the content that is unique to this page. [...] The name needs to be prominent. [...]  The name needs to match what I clicked. [...]  every site makes an implicit social contract with its visitors:  The name of the page will match the words I clicked to get there.
I'm not personally sold on this, but I defer to Don's judgement here.  Personally I don't really care what the name of each web page is, but I'm not a normal web user either (who is though?).  Don provides his research results for most of his reasoning, but not here.
Tabs are one of the very few cases where using a physical metaphor in a user interface actually works. [...] For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs.  [...] To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it.
Seems pretty self evident to me, just make sure your tab background color matches the page color, and that there are no lines between the active tab and the page.

This one seems marginal at best to me because of the banner there between the tab heading and the tab content.

This one is even worse because the tab color is not the same as the page, and it has a line between the tab and the page:
This is what you should be shooting for, active tab color different, directly connected to the page, and same as the background of the page.
Home pages:
As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time:
  1. What is this?
  2. What do they have here?
  3. What can I do here?
  4. Why should I be here, and not somewhere else?
I need to be able to answer these questions at a glance, correctly and unambiguously, with very little effort.
[...] The fifth question: Where do I start?
I paraphrased the following, but these are his categories he says the user should be able to answer for starting a process.  The last question may be unimportant if you're not running an e-commerce site.
  1. Where do I start if I want to search?
  2. Where do I start if I want to browse?
  3. Where do I look for their best stuff?
Seems self evident to me.  Just keep those four questions in mind.  Unfortunately the hard part is going to be making this clear and unambiguous.  Like adding more text than needed, everyone wants a piece of that home page.

previous article in the series | next article in the series

Friday, June 6, 2014

Review and notes from "Don't Make Me Think": Part 2

Don't Make Me Think: Part 2
If your audience is going to act like you're designing billboards, then design great billboards. [...] There are five important things you can do to to make sure they see, and understand, as much of your site as possible:
  • Create a clear visual heirarchy on each page
  • Take advantage of conventions
  • Break pages up into clearly defined areas
  • Make it obvious what's clickable
  • Minimize Noise
The first part of this is self explanatory, give your users what they want. Don goes into more details on each of the five points, I will summarize.  1. Make sure the appearance of the things clearly and accurately portray the relationships.  The more important something is, the more prominent it should be.  Things that are related logically should also be related visually.  Things are nested visually should show what is part of what.
A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a  way that we can grasp almost instantly.
 This reduces how much the user has to think in order to figure out what's going on, and doesn't drain their good will reserve.
The publisher knows better than anyone which pieces of the site's content are most important, valuable, or popular, so why not identify them for me and save me the trouble.
I don't necessarily agree with this statement.  I think that the publisher can make an initial assumption about which things would be more important, but without any data to support them, it's just that, an assumption.  You should track what the users use and make the things they actually use more prominent, not the things you assume they use.  This may take more than just click data, you may need to track where they're looking as well.  They may be using that jumbotron to figure out where to click next, and without it they may go down a completely different path.

Please don't try to come up with your own conventions.  Underline your links.  Make your buttons look like buttons.  If you're going to break with the conventions you better have a really good reason, and perform lots of testing to make sure your new method works.

Use your whitespace, breaking things into clearly separate areas means you're going to have to have whitespace.  Users know how to scroll now, they will look below "the fold".  Don't crowd your site with ads, flashy animations, scrolling text, etc.  That's noise the user has to process, and it's distracting.
Omit needless words.  Vigorous writing is concise.  A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
This, to me as a developer, is self-evident, but you will probably be fighting for this on all fronts.  Marketing will want more descriptive words.  Designers will want more descriptive words.  The CEO will want more Pizzaz.  These requests will come from everywhere, be prepared to constantly fight them.
Your objective should always be to eliminate instructions entirely by making everything self explanatory, or as close to it as possible.  When instructions are absolutely necessary, cut them back to the bare minimum.
People know how to fill out a form.  They know what textboxes and dropdowns are, they know how to use radio buttons.  Don't provide them with instructions they're not going to read, they're only going to create distractions.  If something is causing a problem, figure out what is causing the problem and provide help then (show a tooltip for empty textboxes the user has been hovering over or has selected for long periods of time, etc.).

I'm going to put these next two quotes out of order from the book, I think they flow better this way:
Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression. 
If the navigation is doing is job, it tells you implicitly where to begin and what your options are.  Done correctly, it should be all the instructions you need. 
Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you're still in the same site.
Don devotes a whole chapter to navigation, that's how important he feels it is, and I agree with him.  Making a site easily navigable is one of the most important things to get right.  One thing that Don overlooks in the book is that web sites and applications aren't books, and you can have more than one way to get to a particular screen.  If half your users look for a screen using one navigation path, and half use another, put it under both.

Previous article in the series | Next article in the series

Wednesday, June 4, 2014

Review and notes from "Don't Make Me Think": Part 1

Don't Make Me Think: Part 1

You don't need to know everything.  As with any field, there's a lot you could learn about usability.  But unless you're a usability professional, there's a limit to how much is useful to learn.
This is important, as a developer (as I assume most people reading this blog are) keep in mind the Pareto principle and how much additional effort you want to put into learning that extra little bit of usability, and if you could put that time to better use somewhere else.

... there is no one "right" way to design web sites.  It's a complicated process and the real answer to most of the questions that people ask me is "It depends."
I think we as developers are used to giving the "it depends" answer, but it's good to keep in mind that this goes for usability as well.  There are basic usability guidelines that you should be following, but sometimes there are reasons to break them, you just need to make sure that you have a good reason for breaking them, and that your design is still usable.
Using a site that doesn't make us think about unimportant things feels effortless...
This is a great line, and ties in well with a concept Steve goes into great detail on later on, that of a "good will" reserve that users have.  When you make it effortless to use a site, you aren't tapping into that reserve, and if you do it right you may even start refilling it.  Be aware that users may not always come to your site with their good will reserve full, and that different people have different levels of reserve.
...most people are going to spend far less time looking at the pages we design than we'd like to think.
As a result, if web pages are going to be effective, they have to work most of their magic at a glance.
Something I hope we're all familiar with, the KISS principle, seems to me to apply well here.  The easier you can make it for a user to figure out what is going on, the more they will like your site.  If you confuse them by putting ads or some content you really want the to see in a place they normally expect to see menus, or a login area, or the site logo you're going to rapidly deplete that good will reserve.
We don't read pages.  We scan them.
What this means is that if you make something unnecessarily complicated, or make it hard for the user to find locations of things, you're making them think when they shouldn't have to.  Make your buttons obvious, your links underlined, don't underline things that aren't links (highlight it some other way, there are enough of them that you don't have to overload the hyperlink indicator).  A user is not going to read your instructions before they try something the first time, so try to make it so they don't have to.
We don't make optimal choices.  We satisfice. [...] most of the time we don't chose the best option - we choose the first reasonable option, a strategy known as satisficing
This is further explained in the book, and I'll try to paraphrase and shorten the explanation to this:  People don't take into account all the options they have available based on the data they have.  They select the first option that seems reasonable to them.  So try to make the first option a user has the most reasonable one based on what they user is trying to do.
We don't figure out how things work.  We muddle through.
[...] Faced with any sort of technology, very few people take the time to read instructions.  Instead, we forge ahead and muddle through, making up our own vaguely plausible stories about what we're doing and why it works.
[...]If we find something that works, we stick to it.
This goes hand in hand with satisficing.  People are going to select the first reasonable option, and if they can muddle through and get that one to work then that's what they're going to do.  They're probably going to keep with that option and not even look for a better solution.  Only when someone shows them a better way to do something will they then start using it.  I think this would be a good reason to have some way of capturing how users are actually using your site, and to look at it, because how they use it will surprise you.  If you see a large fraction of them using a site in some manner where you know there is a more effective way to use it you should then try to notify those people of this better method when you see they are using the less optimal one, because they aren't going to go find it for themselves.  It's also probably not wise to make their old method unavailable, lots of people are resistant to changing.

I think that's enough for one post.  I've actually finished reading the book, and it is very good, I highly recommend it.  It is short, sweet, and to the point.

Next article in the series