User Interface Design Principles

0 Comments | This entry was posted on May 29 2014


Clarity is job #1

  • Clarity is the first and most important job of any interface.
  • Clarity inspires confidence and leads to further use. One hundred clear screens is preferable to a single cluttered one.


Interfaces exist to enable interaction

  • Interfaces exist to enable interaction between humans and our world.
  • The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.


Conserve attention at all costs

  • Don’t litter the side of your applications with destructible material…remember why the screen exists in the first place.
  • Honor attention and not only will your readers be happier, your results will be better.


Keep users in control

  • Humans are most comfortable when they feel in control of themselves and their environment.
  • Keep users in control by regularly surfacing system status, by describing causation (if you do this that will happen) and by giving insight into what to expect at every turn.


Direct manipulation is best

  • The best interface is none at all, when we are able to directly manipulate the physical objects in our world.
  • Strive for that original goal of direct manipulation…design an interface with as little a footprint as possible, recognizing as much as possible natural human gestures.


One primary action per screen

  • Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary.


Keep secondary actions secondary

  • Screens with a single primary action can have multiple secondary actions but they need to be kept secondary!
  • Keep secondary actions secondary by making them lighter weight visually or shown after the primary action has been achieved.


Provide a natural next step

  • Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface.
  • Just as we like in human conversation, provide an opening for further interaction.


Appearance follows behavior

  • Humans are most comfortable with things that behave the way we expect.
  • Designed elements should look like how they behave.
  • Someone should be able to predict how an interface element will behave merely by looking at it.
  • If it looks like a button it should act like a button.


Consistency matters

  • Elements that behave the same should look the same.


Strong visual hierarchies work best

  • A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen.
  • Most people don’t notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.


Smart organization reduces cognitive load

  • John Maeda says in his book Simplicity, smart organization of screen elements can make the many appear as the few.
  • Group together like elements, show natural relationships by placement and orientation.
  • Don’t force the user to figure things out…show them by designing those relationships into your screens.


Highlight, don’t determine, with color

  • Color should not determine much in an interface. It can help, be used for highlighting, be used to guide attention, but should not be the only differentiators of things.
  • It can help, be used for highlighting, be used to guide attention, but should not be the only differentiator of things.


Progressive disclosure

  • Show only what is necessary on each screen.
  • Avoid the tendency to over-explain or show everything all at once.
  • When possible, defer decisions to subsequent screens by progressively disclosing information as necessary.


Help people inline

  • In ideal interfaces, help is not necessary because the interface is learnable and usable.
  • The step below this, reality, is one in which help is inline and contextual, available only when and where it is needed, hidden from view at all other times.


A crucial moment: the zero state

  • The first time experience with an interface is crucial, yet often overlooked by designers.
  • …it should provide direction and guidance for getting up to speed.
  • Much of the friction of interaction is in that initial context…once people understand the rules they have a much higher likelihood of success.


Great design is invisible

  • A curious property of great design is that it usually goes unnoticed by the people who use it.
  • If the design is successful the user can focus on their own goals and not the interface…when they complete their goal they are satisfied and do not need to reflect on the situation.
  • Great designers are content with a well-used design…and know that happy users are often silent.


Build on other design disciplines

  • Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design.
  • Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on.


Interfaces exist to be used

  • As in most design disciplines, interface design is successful when people are using what you’ve designed.
  • Interface design can be as much about creating an environment for use as it is creating an artifact worth using.
  • It is not enough for an interface to satisfy the ego of its designer: it must be used!


I’ve grabbed these facts from this great article.

Principles of User Interface Design

Notes from: “How to become A Web Design Expert” article

0 Comments | This entry was posted on Aug 28 2011

Just read an article at The subject is:  ”How to become A Web Design Expert

What I’ve learned from this article is:

  • All the experts are not very well known
  • Being an expert is more then about getting people to listen
  • Being perceived as an expert can be helpful when working with clients, and it does create the potential to attract better-quality work.
  • To become an expert, you need time and experience
  • Proficient at overcoming problems
  • Without passion, you have no desire to learn new things or push boundaries.
  • I believe that an almost obsessive passion for Web design is required to be a true expert.
  • Experimenting and making mistakes are crucial if experts are to establish their credibility.
  • I have to make mistakes, not hundreds or thousands. Billions of them.
  • Success is going from failure to failure with no loss of enthusiasm. - Winston Churchill
  • The definition of an expert is someone who knows what not to do. - Charles Willson
  • We need to learn to face our failures
  • stop insisting that you are an expert
  • Not that context is everything. It’s also about what you say and how you say it.
  • Have your own books, presentations, blogs and podcast about your experties
  • If you want to be perceived as an expert, know yourself, be relaxed and present with confidence.
  • present evidence/reference to support your positions
  • Your expertise should always be about serving others
  • You become an expert so that you can do a better job for your clients, provide more value to your organization and help others establish best practice in your industry
Category: daily read, Reading, Tips

How to specify JavaScript ONLY for Internet Explorer:

Comments Off | This entry was posted on Sep 20 2010

Here is how to specify JavaScript only for Internet Explorer:


if ($.browser.msie) {
   // Internet Explorer is a sadist.
Category: JavaScript, Tips

How to be a front-end engineer

9 Comments | This entry was posted on Apr 28 2010

“As far as the customer is concerned, the interface is the product.” – Jef Raskin

For the last few days I’ve been researching on “front-end engineering”. As Mark Meeker says, it has other names like “front end development” or “UI engineering” or “web development” or “web production”. Whatever we call it, it is out there and it has got great attention for the last few years. To get some interest, lets see a slide show “Introduction of front-end engineering” by Mark Meeker.

If you search at job sites, you will get many positions out there. But if you do Google for “Front-end engineer” you won’t get much resources compared to other rules in the web development industry. It’s so sad. So here, I will describe (mainly link to other resources out there) what I’ve got from research. I’ve divided the process into few steps. I know, many won’t agree with me. But it’s just what I understood and may help many people like me (web designer) who is searching for a way to make a great future.

1. Designer phase
2. Markup or CSS/XHTMLizetion phase
3. JavaScript phase
4. Professional Front-end Engineering phase

 1. Designer Phase

You are a graphics or web designer. You can design eye catching layouts. Know web 2.0 trend very well. You follow the latest web trends. Typography, layout structure, grid based design, simplicity, contrast, color you know each of them very well. You are pixel perfect ninja with your design skills. At the end of the day, you have to develop the layout from those design or the design team can provide you that. It may be a Photoshop or Illustrator composition or may be any other graphics software. You must know how to handle raw files of the graphics software very very well. I saw at some front-end engineer job description that “you must be able to fix single pixel destruction from a given design.”

Here you will deal with and better you make yourself master of them:

* Design concepts
* Grid System
* Typography
* Color Concept
* Contrast
* Screen Resolution
* Illustration
* Sketching
* Web 2.0 design trends
* Adobe Photoshop
* Adobe Illustrator
* Adobe Fireworks
and any other graphics software you prefer.

Updated link:

50 Totally Free Lessons in Graphic Design Theory

 2. Markup or CSS/XHTMLizetion phase

Before this phase, you are just a graphics designer. Because web designers must have markup skills. So, this phase is very much important to be a front-end engineer. You have to dedicate you life at this phase. It may be your composition/design which will be sliced and turned into markup. Or other designer or design team will provide you the layout for markup. It could be Photoshop, Illustrator, Fireworks and any other graphics file format. This must be a raw file format with capability of editing. And you will just make it alive with XHTML and CSS.

In this phase you will be a XHTML/CSS hand coding ninja. Your code will be valid, standard compliant.  You play with accessibility and usability every now and then. Search Engine Optimization (SEO) is on your fingertips. You are the clever divider of content and presentation. You make it’s shape fixed or liquid. Cross-browser compatibility is your only countable enemy. But at the end of the day YOU always win. You the man who can give soul to the web page – it’s you who will make it best or worst!

You will be a master of:

* CSS / CSS3
* Progressive Enhancement
* Search Engine Optimization (SEO)
* Accessibility
* Usability
* CSS Frameworks
* Cross-Browser compatibility
* Debugging and fixing codes (with Firebug, IE Developer Tools, YSlow etc…)

3. JavaScript phase

Before this phase, we are in almost static position. We can change images on hover by CSS, but they are up to very limited stage. In this phase, we will be functional and dynamic by the world’s most used programming language, JavaScript. You will be able to manipulate in any way by Document Object Model (DOM). You know too much in depth of a HTML/XHTML document structure. You could be able to bring determinism in a static HTML/XHTML document by using DHTML. If you search at the job site for front-end engineer, each any every job requirement mentions “You must know JavaScript more than you own hand.” So, you eat, sleep, play, joke, dream, talk with JavaScript in this phase. The better you know JavaScript the better it is for you to be a Professional front-end engineer. You also know various JavaScript frameworks. Most of the works are done by the framework now a days. So you must know more than 2 frameworks to work with.

You will be a master of:

* Document Object Model (DOM)
* JavaScript
* JavaScript libraries (incliding jQuery, YUI Library, MooTools, Dojo, Prototype, and many more)

4. Professional Front-end Engineering phase

Now we’ve come to the serious phase. At this phase, you will be responsible for managing the web site like Yahoo!, Google along with a team of talented people. You will be a master of your profession in all directions. You make decisions depending on experience with the help of cutting edge technologies. Actually you will introduce new way of solving problems.

Nicholas C. Zakas is currently the principal front end engineer for the Yahoo! homepage and is a contributor to the Yahoo! User Interface (YUI) library, having written the Cookie Utility, Profiler, and YUI Test. Author of many books on JavaScript. He described What makes a good front end engineer?   He also described the process “Interviewing the front-end engineer” and how to “Surviving an interview with me.”  Definitely you will get an idea of what is professional front-end engineering work by reading his blog.

Another Yahoo! guy, Nate Koechley have released a video about “Professional Frontend Engineering”. May be one of the best ways to understand what is professional front-end engineering and how it works. You will get the full transcript of that video here.

* HTTP Request
* Site Security
* Web Service
* Team Management

Other Qualities you must have:

Communication: You have to be a great communicator if you want to be a  professional front-end engineer. As Nicholas C. Zakas mentioned at his What makes a good front end engineer? article, you have to communicate effectively with product managers, User interface designer, Engineering management and end users.

Self Learner: Front-end engineering is the most self learning role in the computer science industry. Almost every guy in this profession are self learned. We haven’t been taught  our skills at college or seminars. And as is stated before, there is not much resource in the web too on the topic. It is very hard to find a professional front-end engineer to help you out.

Problem Solving: There are many ways to solve a problem. You must be a master of solving a problem in as much ways as possible.

Quick Learner: Nicholas C. Zakas says “A good front end engineer needs to be able to pick things up quickly. The technologies powering the Web aren’t standing still, people. I’d go so far as to say things are changing on almost a daily basis and it’s up to you to keep up with these changes. There are always new techniques and paradigms to consider and digest as part of your discipline; you cannot just rest on what you know today. The Web of tomorrow will be drastically different from the Web of today and it’s your job to understand what that difference means to your web application.”

Get real life requirements and responsibility for front-end engineering

The best way to get  a job requirement is in the job sites. Search for “front-end engineering”, you will get lots of jobs with requirements. Which could guide you a long way. There you will get what kind of responsibilities you have to maintain. So you could prepare yourself.

* Smashingmagazine
* Simply Hired
* Yahoo! Jobs
* Indeed
* 37signals Job Board
* Krop
… and thousands more job sites.

Slide Shows:

Introduction to Front End Engineering

Front end engineering, YUI Gallery, and your future

Note: Special  thanks to Shahriar Hyder for helping me on this article.

Day 15 of 365

0 Comments | This entry was posted on Mar 15 2010

Day 15 of 365

Date: 01.06.2010

Tools: Illustrator, Photoshop, Artise Golden Section

Large Version @ Flickr

Day 14 of 365

0 Comments | This entry was posted on Mar 15 2010

Day 14 of 365

Date: 01.05.2010

Tools: Illustrator, Photoshop, Artise Golden Section

Large Version @ Flickr

The laws of simplicity

3 Comments | This entry was posted on Feb 06 2009
  • REDUCE The simplest way to achieve simplicity is through thoughtful reduction.
  • ORGANIZE Organization makes a system of many appear fewer.
  • TIME Savings in time feel like simplicity.
  • LEARN Knowledge makes everything simpler.
  • DIFFERENCES Simplicity and complexity need each other.
  • CONTEXT What lies in the periphery of simplicity is definitely not peripheral.
  • EMOTION More emotions are better than less.
  • TRUST In simplicity we trust.
  • FAILURE Some things can never be made simple.
  • THE ONE Simplicity is about subtracting the obvious, and adding the meaningful.

I got them in the book “The laws of simplicity”. And feel to share with you guys. Enjoy.

Category: Tips

Open or Save As dialog box flickers then disappears (Photoshop CS3 on Windows)

11 Comments | This entry was posted on Jan 09 2009


When you choose File > Open or File > Save As in Adobe Photoshop CS3 on Windows, the dialog box flashes on screen and then disappears, or Photoshop appears to freeze.

This issue may occur when you use OS dialog boxes, you have or had a dual-monitor setup, and Photoshop was displayed on the secondary monitor.


Press the Esc key, and then choose File > Open or File > Save As.

If the Open or Save As dialog’s position is not reset, then continue with the following solutions.

Get the full solution at Adobe site please.


Reading: June 2008

Comments Off | This entry was posted on Jul 01 2008



  • Phiculator
    Phiculator is a simple tool which, given any number, will calculate the corresponding number according to the golden ratio. The free tool is available for both Win and Mac.

Notable Points #1

Comments Off | This entry was posted on Dec 03 2007

I read several articles every day. And so do others. We just read and forget big articles. But we remember the key points of the article or at least try to memorize them. But now a day, time is important for real work. So there is no room to read every article line by line. For them (myself also) I will note out the points of the article and jot them here, in this title. So it will be easier for future reference. At the bottom of the points, I have added the list of the articles from where the points are taken. Anyone interested to know more, just click and go to the read article. Cheer up…

  • Gather as much evidence as possible while work freelance. It’s wise to gather them project wise.
  • Be-friend, don’t use. You should actively seek to find a genuine, personal connection and, if you still can’t find one, then either be transparent about your motives or move on. Nobody likes to be used.
  • Push Yourself and Get Good. You need to be pretty good. I like to think that there is an 80/20 rule lot more effort (and/or talent).
  • Be Likeable, Excited and Enthusiastic.
  • Be Referable! A large number of jobs for most freelancers come from referred clients. Do a good job for one person and they tell others for you.
  • Reliability is one of the most prized characteristics for a freelancer. Focus on the characteristics that make people want to work with you, and be reliable, very reliable.
  • Design the portfolio you think your clients want to see
  • Focus on Clients and Be Flexible
  • If you want to make things to please yourself, go be an artist.
  • Get a High Profile
  • The “stick to what works” mentality can sometimes work, and other times make you a dinosaur.
  • The function of design is to make the product more usable and improve the usability of the product’s function.
  • The simpler and better the design can be, the more enjoyable and easier it makes our lives.
  • Even though the cookie-cutter designs work for a while, the truly good designs are the original and fresh concepts that change the way we look at things.

Where I’ve got them?
A lesson to all freelancers (part 1)
How to optimize your networking energy
The Secret to Getting a Lot of Web Design Work
Is good design just a formula?

Category: Links, Reading, Tips

How to move MS Words table row up & down

0 Comments | This entry was posted on Sep 23 2007

You have table full of data on Microsoft Word.

And you need to move 2nd row to 5th row.

Select to whole row, press shift + alt and prss on Up or Down key. The row will go down or up as you press.

You can select multiple rows of data and same shortcut to replace them together.

Category: Tips

Blog Home