Learn10 User Interface Design Fundamentals

Treehouse
writes on August 7, 2012

Share with your friends










Submit

Photo of a submarine control panel

It’s no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way.

Free trial on Treehouse: Do you want to learn more about web design? Click here to try a free trial on Treehouse.

‘Staying out of the way’ means not distracting your users. Rather, good UIs let your users complete goals. The result? A reduction in training and support costs, and happier, satisfied and highly engaged users.

Check out our other design courses at Treehouse.

When getting started on a new interface, make sure to remember these fundamentals:

1. Know your user

“Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – Jeff Bezos

Your user’s goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user’s skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals.

2. Pay attention to patterns

Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. By using familiar UI patterns, you will help your users feel at home.

Graphic comparing an email inbox with CoTweet's inbox
CoTweet uses a familiar UI pattern found in email applications.

3. Stay consistent

“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.

4. Use visual hierarchy

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” – Jeffery Veen, The Art and Science of Web Design

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

5. Provide feedback

Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.

Screenshot of BantamLive's interface showing that it provides feedback with a loading action
BantamLive provides inline loading indicators for most actions within their interface.

6. Be forgiving

No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs (no one likes to start over because he/she put in the wrong birth date format). Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that she/he knows how to prevent the error from occurring again.

A great example can be seen in How to increase signups with easier captchas.

7. Empower your user

Once a user has become experienced with your interface, reward him/her and take off the training wheels. The breakdown of complex tasks into simple steps will become cumbersome and distracting. Providing more abstract ways, like keyboard shortcuts, to accomplish tasks will allow your design to get out of the way.

8. Speak their language

“If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters. ” – Getting Real

All interfaces require some level of copywriting. Keep things conversational, not sensational. Provide clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won’t hear you – they will hear themselves and/or their peers.

9. Keep it simple

“A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” – Pär Almqvist

The best interface designs are invisible. They do not contain UI-bling or unnecessary elements. Instead, the necessary elements are succinct and make sense. Whenever you are thinking about adding a new feature or element to your interface, ask the question, “Does the user really need this?” or “Why does the user want this very clever animated gif?” Are you adding things because you like or want them? Never let your UI ego steal the show.

10. Keep moving forward

Grandpa Bud: If I gave up every time I failed, I would never have invented my fireproof pants!
[Pants burn up, revealing his underwear]
Grandpa Bud: Still working the kinks out a bit.

from Meet the Robinsons

Meet the Robinsons is one of my all time favorite movies. Throughout the movie Lewis, the protagonist, is challenged to “keep moving forward.” This is a key principle in UI design.

It is often said when developing interfaces that you need to fail fast, and iterate often. When creating a UI, you will make mistakes. Just keep moving forward, and remember to keep your UI out of the way.

Photo credit: flickr.com/photos/lostamerica

This article was written by Kyle Sollenberger.

49 Responses to “10 User Interface Design Fundamentals”

  1. bc mc

  2. Th@t”s g8t post!!!!!! Definitely helping all the user interface designers out there 🙂

  3. Kuhan Doas on April 2, 2013 at 1:54 am said:

    Nice and Great Post 🙂

  4. Barbara Goodridge on April 18, 2013 at 10:03 am said:

    Bless you from users everywhere!

  5. would u answer this question? find an interface and present the design principles applied and explain in details?

  6. thanks

  7. SamuelGuebo on June 2, 2013 at 8:38 pm said:

    Thanks mate, these are really great tips

  8. Mudasir wali on June 27, 2013 at 8:26 am said:

    very helpful and informative….thanks a lot

  9. khalid on July 5, 2013 at 6:00 pm said:

    This article is great one.

    Thank for sharing this info.

  10. Ver well put, thanks for sharing.

    Rolland Maso

  11. Fantastic Post, Kyle. For a UXD beginner like me, its both encouraging and introspective! Thanks! 🙂

  12. quantum333 on September 29, 2013 at 2:19 pm said:

    that was a great post

  13. Grate post! Thanks,

  14. Brandon Gottfried on September 7, 2015 at 2:49 pm said:

    Great post!

    However, your images aren’t loading. I’ve tried refreshing the page multiple times, to no avail. I’m using Chrome. Just wanted to give a heads up! It’s a bit ironic that there are large (quite unattractive) blank spaces where images failed to load on a blog post about UI Design 🙂

    Best of luck!

  15. 100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガ スーパーコピー激安ロレックス スーパーコピー時計ブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー,激安ブランド,財布コピー,偽ブランド,偽 ブランド財布,偽物ブランド財布,ブランドコピー,ヴィトンコピー,ルイヴィトン財布偽物, シャネル財布コピー,グッチ財布コピー,エルメス財布偽物,D&G 財布コピー,ボッテガ 財布 .2013年新作スーパーコピーロレックス,スーパーコピーロレックス時計通販スーパー コピー品その他の世界一流ロレックススーパーコピー時計品を扱っています。 ホームページをクリックして商品をご覧下さい.ロレックスコピー,業界No.1人気スーパーコピーロレックス腕時計専門販売ロレックスコピー(ROLEXスーパーコピー)のロレックス レプリカ販売専門店です。すべての商品は品質2年無料保証です,ロレックス デイトジャスト 偽物,人気満点ロレックス コピーn級品新作大特集
    スーパーコピー腕時計,ロレックスコピー,ブライトリングコピー,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門!7年以上の販売実績を 持つ時計コピー老舗!時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店!時計コピー時計販売通販! コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー,ガガミラノコピー ,IWCコピー ,オメガコピー ,フェラーリコピー ,フランクミュラーコピー ,ベル&ロスコピー ,各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします ,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門!7年以上の販売実績を 持つ時計コピー老舗!時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店!時計コピー時計販売通販! コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー,ガガミラノコピー ,IWCコピー ,オメガコピー ,フェラーリコピー ,フランクミュラーコピー ,ベル&ロスコピー ,各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします http://www.brandiwc.com/brand-3-copy-0.html

  16. BVLGARI(バッグ?財布?小物)CHLOE(バッグ?財布、小物)偽物ブランド,激安,コピー?ルイヴィトンバッグ,偽物?ルイヴィトン財布,コピーバッグ,ブランドバッグ,偽物バッグ,偽物シャネルバッグ,偽物エルメスバッグ,偽物グッチバッグ,偽物財布,コピー財布,時計の專門店
    エルバーキンコピーエルメスバーキン30コピーエルメス ボリード47,エルメス バッグ 名前,エルメス ネクタイ ピンク エルメス クラッチバッグ,エルメス バッグ コピー,エルメス バーキン コピー エルメス 財布 ダミエ オークション,エルメス ヨーロッパ,エルメス エールライン エルメス クラッチ激安通販、高い品質、送料無料。バーキン25コピー、バーキン30コピー、バーキン35コピー、バーキン40コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは ブランドスーパーコピー超N品エルメスバッグ,エルメス バーキン25 , バーキン30.バーキン35.バーキン40. エルメス(HERMES) ケリー http://www.gowatchs.com/brand-183.html

  17. 【新品】バッグ、財布、靴、帽子、アパレル、ベルト、その他小物 シャネル グッチ エルメス ロレックス ROLEX VUITTON CHANEL GUCCI HERMES ROLEX S級 VUITTON S級 CHANEL S GUCCI S級 HERMES S級 ROLEX AAA級 VUITTON AAA級 CHANEL AAA級 GUCCI AAA級 HERMES AAA級品 N級品ルイ ヴィトンS級品 シャネルS級品 グッチS級品 エルメスS級品 ロレックスS級品 ルイ ヴィトンAAA級品 シャネルAAA級品 グッチAAA級品 エルメスAAA級品 ロレックスAAA級品 ブランド バッグ 激安!! ブランド 財布 激安!! ブランド品を激安価格にて販売しております。 S級品 ブランド激安!! ブランド S級品激安!! AAA級 ブランド 激安!! ブランド 腕時計 激安!! S級品ブランド バッグ 激安!! S級品ブランド 財布 激安!! ルイヴィトンを激安で購入する方法 VUITTON財布を激安販売。 VUITTONバッグ 激安販売。 ヴィトン財布激安 S級ルイヴィトン財布 S級品ルイヴィトンバッグ ルイヴィトンバッグ激安!! ルイヴィトン財布激安!! ROLEX 腕時計激安!! CHANEL財布激安!! CHANELバッグ激安!! S級品 腕時計(Rolex)激安!! S級品 ブランド 腕時計 S級品ブランド 激安!! S級品ブランド 激安!!■スタイルが多い、品質がよい、価格が低い!■ 送料無料(日本全国) ご注文を期待しています!■信用第一、良い品質、低価格は■当社の商品は絶対の自信が御座います。激安、安心、安全にお届けします.品数豊富な商商品数も大幅に増え、品質も大自信です100%品質保証!満足保障!リピーター率100%!
    スーパーコピー時計専売店当店は海外安心と信頼のスーパーコピーブライトリング、代引き店です.正規品と同等品質のシャネル コピー代引き,品質が秀逸,値段が激安!ブライトリングコピー,代引きなどの商品や情報が満載!全商品写真は100%実物撮影です! お客様の満足度は業界No.1です!スーパーコピー時計,時計コピー ,ブランド時計コピー販売(n級品)店舗 ブランド腕時計(ロレックス,ブライトリング,タグホイヤー,オメガ,ガガミラノなど)の最新 情報やイベントを紹介する正規販売店と腕時計コピーの専門サイトです。当店はロレックスやパテックフィリップなどの新品スーパーコピー時計の販売と。 http://www.bestevance.com/RogerDubuis/index_3.html

  18. 楽天ブランドコピーはボッテガヴェネタコピーのバッグのをご紹介します。ブランドコピー,商品の 代引き販売.2015春夏新作 BOTTEGA VENETA?ボッテガヴェネタコピー?財布 新品 ヴィンテージ ラムスキン 編み込み L字ファスナー 長財布こちらは業界一人気のボッテガ?ヴェネタスーパーコピー専門ショップです!5年間以上 のボッテガ?ヴェネタコピー品販売実績を持っている信用できるスーパーコピーボッテガ?ヴェネタ専門店!当店はボッテガヴェネタ 財布 コピー を激安で通販しているネット専門店です。ボッテガ ラウンドファスナー財布コピーやボッテガヴェネタ二つ折財布コピーなどを取り揃えてい ます。全商品はプロの目にも分からないボッテガ財布スーパーコピーN品です。 楽天ブランドコピーはボッテガヴェネタコピーのバッグのをご紹介します。ボッテガヴェネタ新作のスーパーコピーボッテガ?ヴェネタ商品満載。ブランドコピーボッテガヴェネタ商品は人気商品です。是非ご覧 ください。
    弊社は海外安心と信頼のプラダ 時計 コピーです。2015 新作が満載!皆様を歓迎して当店をご光臨賜ります。ロレックス時計コピー,パネライ時計コピー,ウブロ時計コピー ,ブライトリング時計コピー,IWC時計コピー,フランクミュラー時 計コピー,ショパール時計コピー,フェラーリ時計コピー,グラハム 時計コピー,ハリー ウィンストン時計コピー等。サイトは世界一流ブランド コピー 専門店です。ぜひ一度当店の商品をお試しください。驚きと満足を保証致します。ご利用をお待ちしております。 http://www.ooowatch.com/kabann/vuitton/index.html

  19. 各種のブランドの服、靴、、財布、腕時計の複製品をかばん|ROLEXスーパーコピー|ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー,フェラーリコピー時計,パネライコピー時計,パテックフィリップコピー時計,ヴァシュロン.コンスタンタンコピー時計,エルメスコピー時計,カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ&ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服,ブランドバッグコピー,ブランド時計,ブランド靴シリーズ欧米O級品コーナーラッピング用品
    エルメス ボリードスーパーコピー.ブランド直営店.ブランド,エルメス激安通販,業界で最高な品質に挑戦します!”ブランドN級品ブランドコピー 代引き,スーパーコピー時計,ブランドN級品,楽天コピーブランド,,偽物ブラン日本最大級の最高のスーパーコピーブランド財布激安代引き販売店,スーパーコピー時計の激安老舗.!国内No.1時計コピー工房,アフターサービスも自ら製造したスーパーコピー時計なので、技術力でお客様に安心のサポー トをご提供させて頂きます。スーパーコピー 代引きN品をご 購入の方は、こちらへ.弊社は正規品と同等品質のコピー品を低価で お客様に提供します!すべての商品は品質2年無料保証です。100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピー http://www.gginza.com/watch/chanel/index.html

  20. 100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガ スーパーコピー激安ロレックス スーパーコピー時計ブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー,激安ブランド,財布コピー,偽ブランド,偽 ブランド財布,偽物ブランド財布,ブランドコピー,ヴィトンコピー,ルイヴィトン財布偽物, シャネル財布コピー,グッチ財布コピー,エルメス財布偽物,D&G 財布コピー,ボッテガ 財布 .2013年新作スーパーコピーロレックス,スーパーコピーロレックス時計通販スーパー コピー品その他の世界一流ロレックススーパーコピー時計品を扱っています。 ホームページをクリックして商品をご覧下さい.ロレックスコピー,業界No.1人気スーパーコピーロレックス腕時計専門販売ロレックスコピー(ROLEXスーパーコピー)のロレックス レプリカ販売専門店です。すべての商品は品質2年無料保証です,ロレックス デイトジャスト 偽物,人気満点ロレックス コピーn級品新作大特集
    エルバーキンコピーエルメスバーキン30コピーエルメス ボリード47,エルメス バッグ 名前,エルメス ネクタイ ピンク エルメス クラッチバッグ,エルメス バッグ コピー,エルメス バーキン コピー エルメス 財布 ダミエ オークション,エルメス ヨーロッパ,エルメス エールライン エルメス クラッチ激安通販、高い品質、送料無料。バーキン25コピー、バーキン30コピー、バーキン35コピー、バーキン40コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは ブランドスーパーコピー超N品エルメスバッグ,エルメス バーキン25 , バーキン30.バーキン35.バーキン40. エルメス(HERMES) ケリー http://www.ooowatch.com/tokei/vuitton/index.html

  21. ┻┗┛┗┛%品質保証 満足保障。
    高品質2015シャネル スーパーコピー激安專門店弊社は海外大好評を博くシャネル コピー激安老舗です,2015高品質シャネル バッグ コピー,シャネル 靴 コピー,シャネル 財布 コピー品の品質はよくて、激安の大特価でご提供します。 http://www.newkakaku.net/boq1.htm

  22. 日本最高級スーパーコピーブランド時計激安通販専門店,高品質時計コピー,2015最新作、国際ブランド腕時計コピー、業界唯一無二.世界一流の高品質ブランドコピー時計,当店はスーパーコピー時計専門店,販売以下世界一流ブランドコピー時計:ロレックスコピー、ウブロコピー、オメガコピー、シャネルコピー…ンプルに見えて目を奪われてしまう独創的なブルガリのラインアップです。1884年ブルガリの創始者ソティリオ?ブルガリが銀細工師の一族としてイタリ アにオープン。ブルガリ?ブルガリシリーズ。古代ローマの円形競技場をモチーフにした時計「アンフィテアトロ」、若い世代向けの腕時計「ソロテンポ」を発 表。2000年には新会社ダニエル?ロード&ジェラルド?ジェンダ オート?オルロジュリー社を設立しました。本物ブランド時計に間違える程のスーパーコピー時計通販!スーパーコピーは業界n級品最高品質に挑戦!ロレックスコピー,パネライコピー,ウブロコピー,オメガコピー,ルイ?ヴィトンコピー,エルメスコピーを初め世界中有名なスーパーコピーブランドを激安で通販しております!HERMES(バッグ、時計) CHANEL(バッグ、時計)LOUIS VUITTON(バッグ、時計) BVLGARI時計Christian Dior(バッグ、小物) COACH(バッグ)GUCCI(バッグ、小物) ROLEX(時計)OMEGA(時計) IWC(時計)
    ブランド激安市場コピーブランドコピー,スーパーレプリカ,ブランド激安市場 女社長 激安 シャネル 財布(CHANEL),グッチ 財布 (GUCCI) 激安,ヴィトン(lv) 新作 財布 激安 ルイヴィトン財布コピー,新作 ブランブランドを特別価格で提供中!ルイヴィトン財布、ルイヴィトンバッグ、ルイヴィトンベルトブランド激安市場ブランドコピー,大人気のルイヴィトン,スーパーコピー,様々な高品質ーパーコピー時計,ブルイヴィトン コピー ブランドレプリカ 激安 ブランド激安市場 ロレックス コピー スーパーコピー ルイヴィトン、シャネル、グッチ、エルメス、クロエ、ブラダ、ブルガリ ドルチェ&ガッバ―ナ、バレンシアガ、ボッテガ.ヴェネタ偽物ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、 http://www.msnbrand.com/brand-copy-IP-1.html

  23. ブランドコピー時計大人気を海外激安通販専門店ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、グッチ、エルメス、パネライ、パテックフィリップ偽物(コピー商品)のブランドの腕時計の販売、通販。 http://www.brandiwc.com/brand-23-copy-0.html

  24. 業界最高峰のブランドコピー 激安、コピーブランド、スーパーコピーブランド(N級品)通販専門店!ブランドコピー,コピーブランド,スーパーコピーブランド,ブランドコピー 激安,偽物ブランド、偽物のバッグ、腕時計、財布など激安で買える!全部のスーパーコピー販売品物のなかで私達のブランド激安が一番有名です http://www.brandiwc.com/brand-28-copy-0.html

  25. 日本最高級スーパーコピーブランド時計激安通販専門店,高品質時計コピー,2015最新作、国際ブランド腕時計コピー、業界唯一無二.世界一流の高品質ブランドコピー時計,当店はスーパーコピー時計専門店,販売以下世界一流ブランドコピー時計:ロレックスコピー、ウブロコピー、オメガコピー、シャネルコピー…ンプルに見えて目を奪われてしまう独創的なブルガリのラインアップです。1884年ブルガリの創始者ソティリオ?ブルガリが銀細工師の一族としてイタリ アにオープン。ブルガリ?ブルガリシリーズ。古代ローマの円形競技場をモチーフにした時計「アンフィテアトロ」、若い世代向けの腕時計「ソロテンポ」を発 表。2000年には新会社ダニエル?ロード&ジェラルド?ジェンダ オート?オルロジュリー社を設立しました。本物ブランド時計に間違える程のスーパーコピー時計通販!スーパーコピーは業界n級品最高品質に挑戦!ロレックスコピー,パネライコピー,ウブロコピー,オメガコピー,ルイ?ヴィトンコピー,エルメスコピーを初め世界中有名なスーパーコピーブランドを激安で通販しております!HERMES(バッグ、時計) CHANEL(バッグ、時計)LOUIS VUITTON(バッグ、時計) BVLGARI時計Christian Dior(バッグ、小物) COACH(バッグ)GUCCI(バッグ、小物) ROLEX(時計)OMEGA(時計) IWC(時計) http://www.eevance.com/index.html

  26. You may wish to update your examples as most of your links to examples on other websites are now broken. 🙁
    Just fyi…

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more