Common-sense rules-of-the-thumb for designing software that makes sense

Excerpts from a JIRA article I wrote at work.

Make system status and feedback clear and visible
Use status mechanisms to keep users aware and informed via appropriate feedback, and within a reasonable timeframe. Status information should be up-to-date and easy to spot.

Present information with meaningful aids to interpretation
Use words, phrases and concepts familiar to users - don't use 'programmer speak'. Use everyday terms, or familiar frameworks.    

Help users recognise, diagnose and recover from or resolve errors
Give users a "way out" when they make mistakes (e.g. cancel). Where Undo/Redo is not possible or viable, present users with solutions.
E.g. The supplier record could not be deleted because transactions have been made against it. <Deactivate Supplier Record> <Cancel>

Use clear, consistent language, and names/labels that are conceptually related to their functions
Standardise language across your platform. If 'Cancel' means 'Exit without implementing any changes' in one context, it should mean that in all contexts. Whenever possible, button labels should be specific, rather than generic. (e.g. 'Save & Exit' vs 'Okay').   

Help users not to make mistakes
Present users with a confirmation before they commit to an action with serious and/or irrevocable consequences. In such cases, it's a good idea to place the Commit and Cancel buttons far apart to prevent users clicking the wrong buttons by mistake. If keyboard controls are in play, require the users to either click the (far apart) buttons, or to commit by pressing a specific key or key combination, rather than tab-Entering.

Display only the information a user needs to complete a discrete task at a given time
Don't make users remember information from one part of the dialogue to another, and don't pepper them with information irrelevant to the task at hand.

Make the right things invisible
Automate and/or hide tasks/functions users have no control over, but that the platform requires to work.  

Group information consistently and meaningfully
Don't make users search and mix-n-match information from all over your page if what they're looking for falls into an identifiable group. (E.g. Address, Mobile, Fax..)   

Reduce user workload & set meaningful defaults
Pre-populate standard fields whenever possible and/or helpful. Base defaults on choices that the majority of users would make. Default settings should make things easier on the standard user, not harder.

Notes:
This list was based on Jakob Nielsen's heuristics as published in Usability Engineering, Jill Gerhardt-Powals' work in Human Computer Interaction (paid link), and Bruce Tognazzini's First Principles of Interaction Design.

Browse vs. Search: Which Deserves to Go?

While every engineer may find Search easy and efficient, that is not the experience of most people under many conditions, including those encountered by the users of the systems Craig has referenced—Contacts, iOS, and Lion. Learning to type into a box is easy. Memorizing the names of perhaps several hundred apps so you know what to type into the box, not so easy. Unless you are an engineer.
 Graphic designers, left unchecked and unschooled, are likely to aim for maximum visual simplicity at the expense of both learnability and usability. Such interfaces require users to discover new capabilities by clicking around and seeing what happens. Users don't do that. 

So much good stuff in here! The second quote about graphic designers, in particular, sounds like what I spent the first 3+ years when I started working in the digital space arguing against, usually on the losing side.

What We've Learned About Responsive Design - Newfangled

Responsive design is more work. And more expensive. Maybe you don't need it as much as you think you do.

I've run into the idea that since responsive design is a more efficient mobile solution than creating unique mobile sites or alternate page templates, it is therefore going to be cheaper and simpler than what everyone is expecting. Not true. The fact of the matter is that doing responsive design requires work that just wouldn't be done at all if mobile wasn't a consideration. Now, I'm not advocating that we ignore mobile. But in some cases, I'd argue that mobile is probably higher on the priority list than a serious cost/benefit analysis would merit.

Our audience is primarily comprised of people working in the advertising, marketing and design industry. They're people who influence or make decisions about design and development projects. With our audience in mind, if you were to ask me if mobile should be a higher priority I'd say absolutely. I'd think of all of our hip and stylish visitors and how many of them probably already have an iPhone 5. But you know what? In the last month, just under 10% of our website's visitors accessed it with a mobile device. That includes phones and tablets. If I extend my look to the last six months, the mobile population is exactly the same. The last year? It drops to 8%. So, mobile traffic is growing, but not as rapidly as I would have assumed based upon what I think I know about our audience. With those numbers, should mobile be prioritized as much as it has been (we're about to launch a site redesign that makes heavy use of responsive design techniques — more on that later)? With over 90% of our visitors still coming in through a "desktop" computer? Probably not. But for us, there's an additional consideration of needing to demonstrate our capabilities in this area, which pushes the benefits over the cost. For many other businesses, though, that additional benefit doesn't exist.

Very few of our clients have a "money is no object" attitude when it comes to budgeting for a web project. In fact, for many of them, our costs are a bit of a stretch. But they believe in the value of what we offer and trust us to lead them to the best outcomes. It would be wrong for me to push responsive design on all of them, indiscriminate of what they know about their audience, their actual visitor data, and their actual budget. If their money could be better spent in some other way, then it should be.

Superbly practical and down-to-earth article about responsive design.

Too many creative leads (and writers) jump onto the idea of responsive design like it's the next wonderfully shiny new toy that will display their leetness, without regard for whether or not it's actually suited to what they're producing. It's refreshing to see something so logical and well-thought out about the subject.

Great user experience isn't just in the trappings - Kindle vs iPad as dead tree book replacement.

how Kindles replicate physical books is very subtle. Kindles do not rely on material aesthetics in quite the same way many skeuomorphs do. The design is underpinned by typographic and layout conventions (e.g., position of page numbers, chapter name and so on) allowing the aesthetics of the UI page to recede for the reader to become immersed in the author’s word. This is a quality any good book designer will tell you the design of a book should facilitate: uninhabited reading.

Unfortunately, the iPad book app doesn’t achieve this level of sophistication. It’s much more theatrical (as someone probably felt the need to take advantage of that fantastic color screen). The app employs elements like an overly-rendered paper texture and a faux page turn animation, which make it difficult to become quite as immersed in the prose of an author as the Kindle’s eInk design allows.

In many ways, the iPad book app was designed to look like a book, whereas the Kindle was designed to feel like a book.

Very good points that relate to more than just Kindle vs iPad design. Too many 'brilliant' and 'cutting-edge' designs sacrifice users' goals and purposes at the altar of looking good over being good for those using them.

I'm not sure this writer understands the purpose and function of wireframes.

Wouldn't it be nice to create prettier, more detailed versions of wireframes that can include all sorts of fancy icons, buttons and placeholders? With the Layout Lab's Web + Mobile UI PSD Bundle, you can do exactly that. Even better, you can work right in Photoshop.

And in answer? No, no I would not like prettier, more detailed wireframes with fancy icons and whatever else prettified is in there.

Where I'm concerned, as long as information is conveyed clearly, the uglier and more unpolished-looking the better when it comes to wireframes. ._.

How not to use Helvetica Neue "Lighter"

Oh my eyes. Best (or is that worst) part is, the use of Helvetica Neue "Lighter" (not even the actual Helvetica Neue Light) was obviously intentional. Whoever designed this thought it was a good idea to make it look like this.

And they couldn't even get the implementation of their terrible idea right by using @font-face. Helvetica Neue doesn't come with the OS you know... If you really want it to look like that, so much so that you make it integral to your design and sit it on top of your font stack, then license the font.

Considering the client, one would think there's enough money for that.

P.S. If you don't have Helvetica Neue Light installed on your computer, thank your lucky stars, you'll actually be able to read the page.

Business Class: Freemium for News? | Information Architects

Business Class: Freemium for News?

I had a perspective-changing talk on the subject of pay walls with the chief executive of a big publishing company (no, I can’t tell you who). He asked me what I think about pay walls. I told him what I always say: The main currency of news sites is attention not dollars, and that I believe that it is the publisher’s job to turn that attention into money, to keep the attention machine running. He nodded and made the following, astonishing statement:

“I can’t see pay walls working out either. But we need to do something before we lose all of our current subscribers. Sure. It’s a tough business environment, but… But the flight industry is a tough environment too, and they found ways. So tell me: Why do people fly Business Class? In the end, an airplane brings me to the same place regardless of whether I fly Economy or Business Class, and the massive price-increase I pay doesn’t compare the difference in value.”

He asked whether I knew of a way to apply this logic to online news. What would a Business Class news site look like?

“People pay for Business Class because they don’t want to be tortured in Economy. They get faster lanes at the security check. They get an extra glass of champagne. The stewards are more attentive. They get off the plane more quickly. They get the feeling of a higher social status.”

And he added that he wished that there was a way to lead each reader through to Economy again, to again show what they avoided by being in Business Class.

Interesting take on paid subscriptions for news.

I must confess, I'm one of those people who will not get a subscription even for news content I tend to like. NYT is the one that comes to mind. I find I like most of their articles, but ever since they put in the article cap (but still allowed users who were *linked* to their content to see said content), I simply Google every article I'm interested in, and find the 'back door' to see the content.

If they had a real distinction between economy and 'premium' though, I might just stop using Google as a back door.

Oh, and of course, they would have to properly convince me of the premium experience. Right now, for NYT, it just isn't coming through.