The weblog of Amrinder Sandhu: a UX/UI designer living in Ancaster, Canada;
who heads design at Unmetric.

Typographic Design in the Digital Domain

“The way to design is the same, you give content form.”

Erik Spiekermann talks with Elliot Jay Stocks about how typography is used in the digital domain and what digital designers can learn from traditional print techniques. Must watch.

Jobs-to-be-Done framework

I am fan of following rules (and breaking them whenever required) and adopting time tested processes (following Lean UX lately). This is third time I’ve come across this invaluable talk on Understanding the Job. Checkout it out if you haven’t already.

Animation Basics

Lately I’m working on my CSS animations. This is really useful and beautifully explained.

Inspiration

Inspire yourself when in doubt.

Thinking is Painful

Great article about Thinking, Listening and Imagination:

We avoid the pain of thinking like a medical examination. We’d like to believe we’re too smart to think. Thinking is stressful. While stereotypes click together sweetly, thinking comes in bitter flavors. We recur to clichés rather than reflection, because they make us wise without listening, bright without reasoning, and smart without taking the risk of being imprecise, boring, annoying, wrong. And just like McFood they’re easily bought and quickly swallowed, zero intellectual calories. Just as instinctively as we avoid listening, reflecting, and using our imagination to achieve clarity in writing, we avoid thought when we design websites.

Read the article

Design with Empathy

It’s not about creating a portfolio piece. It’s about helping the people you now know solve their problems using your unique skills. Working this way, with real people in mind, is much better than staring at a blank canvas or whiteboard and giving it your best guess.

Design is about solving problems.

If you spend time observing and talking with people who use your product or service, fantastic creative ideas start to appear. Also, features you once thought were critical become irrelevant as your audience tells you what their true emotions are behind the decisions they make. None of this happens in front of a whiteboard in the comfort of your office.

Listen before you start.

When everyone can create very quickly, what is it that will distinguish your product or brand from the rest? Caring for your customers.

That’s what sets you apart.

Read the article

Car UI

Stunning car UI built on some basic but very important User Interface Design principles.

UX is the future

How to stay on top of the competitors? This is the discussion we had recently at Unmetric. Rick Wise has the answer.

Experience innovation will be a crucial components for companies seeking to remain relevant and retain customer loyalty.

I strongly believe the customers can help you stay on the top but to get loyal customers one has to provide them great UX.

Read the article

Designing UI/UX using Job Stories

I have had a tough time creating personas and user stories (as they depend upon personas). Here comes the job stories and they really seems to be better alternative. Alan Klement describes how to create effective job stories:

  • Start with the high level job.
  • Identify a smaller job or jobs which help resolve the higher level job.
  • Observe how people solve the problem now (which job do they currently use).
  • Come up with a Job Story, or Job Stories, that investigate the causality, anxieties, and motivations of what they do now.
  • Create a solution (usually in the form of a feature or UI change) which resolves that Job Story.

Read the article

Make things people want

Interesting read with proven examples how focusing on real problem makes a product successful.

The problems people encounter in their lives rarely change from generation to generation. The products they hire to solve these problems change all the time.

Read the article

On Weights & Styles

Great advice on setting type for headings.

When designing a full set of headlines like this, it’s a great idea to start with the smallest headline and work your way up like we did today. While you’re at it, make sure you design how bolds and italics look in a paragraph, as well as lists, blockquotes, and all the common styles that will show up in a page. We call this a “General Styles” page. You can include tables, images, captions, and even form elements. Planning ahead for the styles you might need in the future helps you build a more complete typographic system and avoid any surprises.

Read the article

The Forgotten Side of Quality

Jeff Patton explains how Kano model is applied while adding features to a product:

The Kano Method separates product features into general categories. The three big ones are “must haves,” like: brakes on a car (we need those); “one-dimensional” items like gas mileage on a car (higher mileage is better); and attractive quality or “delighters” (leather seats in my German car are a delighter). The idea is that your product should have all the must haves, maximize the one-dimensionals, and toss in some delighters.

A common problem with most softwares and products, in general:

In software development, more features is often considered better. Since we’re consumed with the quantity of features, we often forget the quality of the software as a whole unit.

How to fix this problem:

  1. In a small group, brainstorm the major features of your product.
  2. Independently for each feature write your “grade” for the quality of the feature. Answer the following questions: Do you like the feature?; Do you like using it?; and Is it a valuable part of the product? Let your answers help you grade the feature with an A, B, C, or D, or fail it with an F.
  3. When done, discuss your grades with those in your group. Agree on a grade that best represents the group’s opinion of the quality of that feature.

Read the article

On Writing Interfaces Well

User Interface designers should write, and write well.

Aesthetics are debatable, but writing is essential. Peel away the layers of styling and you’ll be left with words. Writing is the meat of a design, and it’s one of the hardest things to get right.

Read the article

Vital Elements of the Product Design Process

Ryan Singer — product designer at Basecamp — explains a simple yet effective process of Product design.

Problems with product and feature design often trace back to the initial approach. Either the problem wasn’t well defined, the concept wasn’t well defined, or – in the case of beginners and newcomers to a platform – your bag of tricks wasn’t adequate to address the problem. Questioning each of these areas can open up new insight and unblock you.

Read the article

UX is not UI

UI has been widely mixed with UX recently. Erik Flowers has clearly explained the difference between two saying:

UX is an acronym for “user experience.” It is almost always followed by the word “design.” By the nature of the term, people who perform the work become “UX designers.” But these designers aren’t designing things in the same sense as a visual or interface designer. UX is the intangible design of a strategy that brings us to a solution.

He’s put together a list of UX roles. Glad I’m involved in more than half of these at Unmetric:

  • Field research
  • Face to face interviewing
  • Creation and administering of tests
  • Gathering, organizing, and presenting statistics
  • Documentation of personas and findings
  • Product design
  • Feature writing
  • Requirement writing
  • Graphic arts
  • Interaction design
  • Information Architecture
  • Usability
  • Prototyping
  • Interface layout
  • Interface design
  • Visual design
  • Taxonomy creation
  • Terminology creation
  • Copy writing
  • Presentation and speaking
  • Working tightly with programmers
  • Brainstorm coordination
  • Company culture evangelism
  • Communication to stakeholders

From above list there are few roles that I’m not involved in (struck-through) or we, at Unmetric, are not practicing yet. Hope these’ll get added down the road. Apart form that I’m also handling front-end development and pushing production-ready code. Wow! So much stuff to work on, but I’m lovin it.

Read the article

Setting Type for User Interfaces

Billy Whited explains the importance and characteristics of a great typeface in UI.

Good typesetting is an exercise in subtlety, and a demonstration of skill and sensitivity—to context, form, and user needs. As UI designers, it’s important to remember that our goal is not to distract users with superfluous details, but to ease the burden of their work and help them get stuff done.

My favorites 4 are:

  • Lucida Grande (used by Facebook)
  • Open Sans (Dropbox)
  • Source Sans Pro (Digg) and
  • FF Scala (Readmill and A Way Back)

Read the article

Diagrams to solve problems

I love diagrams since the day I know them.

Treat your diagrams as a design tool. They can help you break a bad case of writers’ block, clear up your thinking, and communicate your great idea. Best of all, when you lead with a diagram, you bring your audience along your line of thinking so that your final design is not just successful, it appears inevitable.

Read the article

Designing for Capability

Ryan Singer – product designer at 37 Signals – explains what is that needs more of UI designers attention, and it’s not pixel perfect design, it’s making a user capable to performing intended task.

It’s easy to get overwhelmed with details when you’re designing a UI. That’s why I try to keep hold of which things “really matter” and continually come back to them. In a software tool, the important things are the capabilities you give your users.

Designing with capability in mind helps us focus on the problem we are trying to sovle:

When it comes to design, thinking about the capability you are affording can help you refocus when you’re lost in details. Designing isn’t just pushing pixels around and playing with type. Ask yourself: does this change affect whether a user can discover the feature? Does it clarify how to operate it? What am I helping them do right now?

Read the article

Avoiding Common Prototyping Pitfalls

I value prototyping a lot. My tools of trade are Invisionapp, Keynote, Balsamiq and HTML/CSS (sometimes), but that’s are not the most important part of prototyping (though they matter). Jared Spool tells about where to focus while prototyping as to avoid the traps that reduce the effectiveness of prototyping efforts.

Prototyping is rendering ideas to understand them better. It’s a way for the team to dive deep into the process of design and their understanding of the problem to solve. It’s an effective way to show progress throughout the project cycle, not only by having something substantive to display, but by creating a vehicle to talk about the decisions the team is working through.

Read the article

Design Principle: Cognitive Dissonance

While re-reading Universal Principles of Design yesterday I came across Cognitive Dissonance and how it can be applied in web design to increase engagement and conversions. Though I was not familiar with the term Cognitive Dissonance but somehow we were already implementing this principles at Unmetric’s marketing site by saying: “Is your brand social enough?” and “Top brands stay on top using Unmetric. You can too.” Couple of in-depth articles explaining (with examples) more about this design principle.

  1. Steven Bradley explains what the term actually means along with some examples from history:

    Cognitive dissonance is a state of mental discomfort that occurs when a person’s attitudes, thoughts, ideas or beliefs conflict. For example you may believe it’s important to diet in order to lose weight yet have the desire to order cheesecake for dessert. Eating the cheesecake would conflict with your attitude about dieting, which causes discomfort that needs to be resolved.

  2. Tad Fry’s article on Smashing Magazine gives modern day examples in context of web design.