The Subsets of Design

Nov 20, 2011 · 1347 Words

Design is how it works.

'It' as in everything. How you work, how the tap works, how the female brain works.

Design solves problems. And making something look more appealing is just very minute part of the problem. (Thus design is not just how it looks). It's like sexual attraction, seems like it's visual but there is a lot of logic and science behind it.

Let me explain different parts of design. Especially design for digital medium. With a hope that design might become a logical process and not a voodoo.

Now some definitions of prevalent design sub-sets:

Intention
Information Architecture (IA)
User Interface (UI) Design
Visual Design
User Experience (UX) Design

Intention

Intention is the beginning of every design.

"Would you tell me, please, which way I ought to go from here?"
"That depends a good deal on where you want to get to," said the Cat.
"I don't much care where--" said Alice.
"Then it doesn't matter which way you go," said the Cat.
- Alice in the Wonderland

What do you want to achieve? What problem do you want to solve?

One cannot design without aim or restrains. Like mathematics, it operates on logic, limits and a structure etc. but most important: towards some goal.

There is always "why" and a problem to solve. That's where art and design differ. Design is how it works, art is expression. They may overlap but they are certainly not the same.

Usually, intention is to get an action(s) performed. After judgement. Based on information / data presented.

Information Architecture (IA)

Like I said before: There is action performed. After judgement. Based on information / data presented. For example you might want a visitor to buy subscription to your new jizz-your-pants-for-this app (action). You will need to:

Tell them what it is.
Tell them what it does.
Tell them what to do (next).

Hello World:

Google Underpants
Makes you look hot.
Click Here to Buy

Now the order of this list is basic example of IA. Imagine I randomize it:

Tell them what it does.
Tell them what to do.
Tell them what it is.

Hello World:

Makes you look hot.
Click here to buy.
Google Underpants

Google Underpants - Example of Information Architecture

Information present here is very less to help you understand. Usually it's ten times or more. Imagine you're selling 10 products, or a service. And I can't find what it is or does in 10 seconds. I will leave. Design Fail.

Information cannot be thrown around randomly. It needs to be prioritized and presented in way that:

Makes sense to user.
Does not overwhelm them.
Does most of the thinking for them.
Answers their questions in logical order.
I can keep on adding...

Facebook timeline is an awesome example of good information architecture.

Google search result is mostly information architecture. Where information (search results) drives judgement and, hence, an action (click). (And their intention is to get you answer to your query).

Layout of a page, content of a page etc. are done in this part. Thus, content is design.

This is 80% of design.

User Interface Design

UI design starts with layouts. But goes on into loads of placement and interaction decisions. (So each phase fades into one another.)

How will user input information or manipulate information present before him? How will a user interact with the information presented? How does an interaction happen? How does information change on interaction? What does a user expected? This is where you answer these questions.

User interface design directly affects usability. User interface needs to be usable and intuitive and good information architecture makes it so.

Let's assume you are designing a beer bottle. How should it be shaped? What grip do you put there? How do you make it less slippery? Spill proof?

In digital mediums content and text is the best UI. (I built a design template based on same principle.) See? This is UI. I linked "a design template" to the template. It makes it obvious and intuitive that if you will click it, you should expect a template.

Flipboard is a good user interface.

iOS is good example of good User Interface design. After a little use, you know what to expect. It's intuitive because of patterns it follows throughout. It is delightful because it has good visual design. Which is next on our list.

Visual Design

I used to think visual design is just decoration and Photoshop magic. But now I know better.

This is "how it looks & feels" part.

What font / typeface? What colors? What size? What texture? jQuery effects?

Visual design also affects usability. And also willingness of a user. A website / machine with good visual design will keep users hooked on.

Also this is the most noticeable part. A normal users can tell a good visual design from bad instantly. Think "It's so beautiful". That might not be the case with Information Architecture, where comments might go like "It's confusing".

A good visual design is often an emergent effect of its previous design sub-set.

If you have a website but I can't tell normal text from a link. It's a visual design #fail.

If I missed the button because it merges with the background, it's a visual design #fail.

If I your website is not readable, it's a visual design #fail.

User Experience Design

This combines everything I already mentioned and a little more. For me it goes wage - anything that helps achievement of the main intention. Be it writing a better copy or improving a call-to-action.

But for sake of clarity let me put it this way: managing psychological factors of users, through design is user experience design.

It's about crafting how user will experience your app / machine / body (ahem!). It needs an understanding of human nature, user's intention and countless other things. Might also include turning off lights, if you know what I mean.

Apple does not sell laptops and gadgets; they sell experiences which were failing at the last mile. Thus they built their own stores.

So design for digital medium (for web, apps etc) has:

Intention: What is the goal?
Information Architecture: What do I need to know?
User Interface: How can I interact?
Visual Design: How does it look and feel?
User experience: One ring to rule them all.

More Examples:

Here are some more examples to get you more clarity:

Examples of Good Information Architecture:

VWO: This is not the best visual design in town, but certainly great IA. Result? Conversion!

Elance: Not the best visual design again, but leaves nothing to question. Makes you act.

Examples of good Visuals but bad UX Design:

FinalTouch App: It's visually nice but sucks at Usability and hence bad UX. Can you find where to look for Support? See that "Support Updates Twitter" near logo? That's a menu!

jsFoo: This website looks good. But it's not obvious that "Register" is a button (UI flaw) and Date of the event is well hidden (IA and UI flaw).

Clear intention with simple UI results in great UX:

Google: Do you ever question what all you can do on this page? It's so obvious.

Highrise: Good IA & UI and a different approach to visual design results in a great and effect UX. Typically 37 Signals

PS: I will be writing more about each subset and specific problems and case studies in each subset. Will keep adding links in there.

Spanish Translation of the Essay