Principles of UI design(bokardo.com)
bokardo.com
Principles of UI design
http://bokardo.com/principles-of-user-interface-design/
29 comments
I think you are being too critical. Yes, examples would be nice but all of these principles seem very reasonable. Also the design is beautiful.
Of course "One hundred clear screens is preferable to a single cluttered one." should not be taken literally. The point is that clear screen is much better than cluttered screen.
Of course "One hundred clear screens is preferable to a single cluttered one." should not be taken literally. The point is that clear screen is much better than cluttered screen.
I don't think it's terrible advice. He's saying that you shouldn't present more information at once than you need to for the task at hand, not that any single task should take 100 steps. It's fine to have 100 screens if they're well-organized; HN probably has hundreds of thousands of screens.
Agreed, it very much depends on what you're designing for.
1. Respect your users
2. Respect their time
3. Respect that they are different from you
If you find yourself thinking "now I have to change it so stupid people can use it" then you will never make a UI worth a damn.
2. Respect their time
3. Respect that they are different from you
If you find yourself thinking "now I have to change it so stupid people can use it" then you will never make a UI worth a damn.
Whenever I read an article like this, I immediately check out the designer's work afterwards.
http://www.hubspot.com/pricing/
This page, does not really follow "Conserve attention at all costs" when there's a 4x7 pricing grid with confusing information scattered about it. The rest of hubspot's design is equally banal, perhaps the author has some other role in the company than design?
http://www.hubspot.com/pricing/
This page, does not really follow "Conserve attention at all costs" when there's a 4x7 pricing grid with confusing information scattered about it. The rest of hubspot's design is equally banal, perhaps the author has some other role in the company than design?
I don't think the dig about the pricing grid is really fair.
I'm not a fan of complicated pricing schemes, but the existence of one has nothing to do with design in the vast majority of companies. That's a bizdev/sales/exec thing dumped on the designer. Assuming that what information has to be displayed there is immutable, I think the design you point to does it about as well as it could be done.
Having said that, I would agree with anyone who said that the site feels a bit too template-derived in the way that many startup sites post-twitter-bootstrap do, but OTOH it is a fairly well executed template design.
I'm not a fan of complicated pricing schemes, but the existence of one has nothing to do with design in the vast majority of companies. That's a bizdev/sales/exec thing dumped on the designer. Assuming that what information has to be displayed there is immutable, I think the design you point to does it about as well as it could be done.
Having said that, I would agree with anyone who said that the site feels a bit too template-derived in the way that many startup sites post-twitter-bootstrap do, but OTOH it is a fairly well executed template design.
Joshua Porter works at HubSpot because they bought his previous startup, Performable. That pricing page design may have preceded him.
A Google image search for 'Performable' turns up lots of screenshots.
A Google image search for 'Performable' turns up lots of screenshots.
Indeed, Josh works at HubSpot and the pricing page on our website preceded his joining. So, he shouldn't be blamed for it.
Having said that, HubSpot has spent a lot of time on designing our pricing model (vs. the pricing page).
For our first 2 years, HubSpot had a single price ($250/month). We've since run many, many pricing experiments and though the complexity bugs me sometimes, it's working.
But now that this thread is going, I think there are things we can do the improve the pricing page (even if we leave the pricing model the same).
Having said that, HubSpot has spent a lot of time on designing our pricing model (vs. the pricing page).
For our first 2 years, HubSpot had a single price ($250/month). We've since run many, many pricing experiments and though the complexity bugs me sometimes, it's working.
But now that this thread is going, I think there are things we can do the improve the pricing page (even if we leave the pricing model the same).
This is a great reminder that it is important to run experiments to test your hypothesis. It's easy to fall into the simple, simple, simple mindset when designing but sometimes that doesn't drive the most sales. If a more complex design makes more money then that is the "right" design. After all, at the end of the day HubSpot is a business.
The principles are not meant to be strict, unbreakable rules.
As for the website, I really like it. I don't find the grid confusing at all. The pricing should be simpler but the designer is not responsible for that.
As for the website, I really like it. I don't find the grid confusing at all. The pricing should be simpler but the designer is not responsible for that.
I found this article a tough read.
I like Jef Raskins 2 principles :
First Law: A computer shall not harm your work or, through inactivity, allow your work to come to harm.
Second Law: A computer shall not waste your time or require you to do more work than is strictly necessary.
IMO everything else follows from these
I like Jef Raskins 2 principles :
First Law: A computer shall not harm your work or, through inactivity, allow your work to come to harm.
Second Law: A computer shall not waste your time or require you to do more work than is strictly necessary.
IMO everything else follows from these
But it doesn't always follow obviously. All of math follows from set theory, but we still teach most of it explicitly. You don't always want to be deriving details from broad principles like "don't waste the users' time".
This is a decent list, but visual examples would help.
If anyone's interested, many of these ideas are derived from Nielsen's heuristics [1] as well as Tognazzini's [2].
[1] http://www.useit.com/papers/heuristic/heuristic_list.html
[2] http://www.asktog.com/basics/firstPrinciples.html
If anyone's interested, many of these ideas are derived from Nielsen's heuristics [1] as well as Tognazzini's [2].
[1] http://www.useit.com/papers/heuristic/heuristic_list.html
[2] http://www.asktog.com/basics/firstPrinciples.html
Yet another loose collection of vague "principles" for UI design who are, in fact, just rules of thumb.
While most items are sound in principle, this is very much focused on web interfaces, not user interface design as a whole, and even then on websites and not webapps.
There are different kinds of UIs, some focus on productivity, some on specific goals, some on fleeting interactions; some for a general audience, others for people with very specific domain knowledge. These principles are far from general, naming it a more casual "20 rules for web design" would be more appropriate.
For all we know, despite not pretty this could be a very efficient interface: http://www.apcconsultants.com/TCAR%20Control%20Screen25.JPG
There are different kinds of UIs, some focus on productivity, some on specific goals, some on fleeting interactions; some for a general audience, others for people with very specific domain knowledge. These principles are far from general, naming it a more casual "20 rules for web design" would be more appropriate.
For all we know, despite not pretty this could be a very efficient interface: http://www.apcconsultants.com/TCAR%20Control%20Screen25.JPG
I'm seeing a lot of criticism (mostly unfair IMO) of these principles, but I'll say that Josh Porter's book "Designing for the Social Web" is a must-read. Easily one of the most accessible, practical, and insightful design books I've read.
This could enjoy some concrete examples. I tend to stay away from articles and books that make me feel like I've learnt something, but unless examples follow closely, I've just fooled myself into thinking that I've acquired new knowledge.
The "axiomatic" approach to design (and art) is usually backward. Even if you arrive at some sort of basic principles after a while, someone else cannot read them and know what it means to apply them until they have tried to design many things. There is a rich context to what everyone says about design, and you cannot learn it without repeatedly trying to design and improve things.
principles of being a good ui designer: stop trying to make a name for yourself
these sorts of lists drive me nuts because they merely serve to direct attention to the author instead of allowing the audience to find much more reputable and proven information (e.g., the raskin rules mentioned below)
i am happy to see the comments here indicating others agree.
these sorts of lists drive me nuts because they merely serve to direct attention to the author instead of allowing the audience to find much more reputable and proven information (e.g., the raskin rules mentioned below)
i am happy to see the comments here indicating others agree.
I'm always a bit disappointed by these kinds of UIX posts. As droithomme pointed out it's vague, but still in a way too specific.
I've found that pretty much all of these guides are extremely specific to blogs and the web in general (with good reason I realize). It would be nice to see more information about generalized interface design. For example, I work in home automation and a GUI can make or break the system. I know there have been books written on the subject. I'd really like to see contributions from contemporary designers that are useful enough to be employed in a variety of settings.
I've found that pretty much all of these guides are extremely specific to blogs and the web in general (with good reason I realize). It would be nice to see more information about generalized interface design. For example, I work in home automation and a GUI can make or break the system. I know there have been books written on the subject. I'd really like to see contributions from contemporary designers that are useful enough to be employed in a variety of settings.
I think this should be the #1 principle: "Define success in terms of your UI." Before you set out to design an interface you must decide what actions that interface should expose and facilitate, and which of those actions constitute success.
First you decide what the user should do - then you design around that. I know it sounds obvious and practical, but 9/10 companies I've worked for started designing the interface before they decided on what the interface should accomplish.
First you decide what the user should do - then you design around that. I know it sounds obvious and practical, but 9/10 companies I've worked for started designing the interface before they decided on what the interface should accomplish.
Mightn't that be better phrased "define your UI in terms of user success"?
It seems like the same principles apply all over the place. Keeping things clear and simple whether you are designing a web page, an algorithm or some module is always the best way to go. In what situation would making something convoluted and overly complex be a good idea.
Here's a rule that was broken: Try to not present more than 7 to 10 choices or items at one time (and yes a list of 20 bullet points that scrolls under the fold breaks that rule)
why is FixThisPOSSite comment so downvoted?
I feel like he contributed to the discussions.
I feel like he contributed to the discussions.
TLDR: User interfaces should follow the principle of least surprise.
[deleted]
It's got some horrible advice from the get-go: "One hundred clear screens is preferable to a single cluttered one." is terrible advice. One hundred screens for a task is an absolute disaster.