這些UI設計中常犯的錯誤,你還在犯嗎? ,觀點,蟲二無蟲,原創文章站酷網,中國設計師互動平台。



In my job as UX Consultant for a Mendix partner , I often come across self-organized teams creating awesome internal applications. My job involves improving the UX within their applications.

The best days are when I am completely blindsided by the ingenuity of the creative ways some problems are solved, forcing me to explain why some logical solutions are a bad idea. The solutions given by me are not a “single truth”, there are always exceptions, don't quote me on anything written here, but use it as inspiration to start the conversation.

簡介:我的工作是作為Mendix Partner的顧問,我經常會碰到組織良好的額團隊做出非常不錯的機構應用,我的工作就是是改善這些應用的用戶體驗。


01 Everything in a single screen


This is the most commonly implemented UX bad practice.You start your little app with a tight interface, add a couple of features and before you know it, you have a screen full of buttons. Don't feel bad, we've all been there.


  • Less clicks

  • I can see everything, creates overview

  • Users hate scrolling


  • 更少的點擊和頁面跳轉

  • 呈現給客戶更多得內容,創造全局概覽

  • 用戶厭惡滾動瀏覽

Whenever I see this interface solution it reminds me of a swiss army knife with all the tools unfolded, and the only one that is used is the bottle opener.



Having all the options spread out seems like it creates overview, but the problem is that your brain can only understand 9 options at best, and let`s be honest the user probably doesn't use 95% of the buttons that often.


Millers law /彌勒定律



Another problem is that buttons should be close to the data that they influence. Having more buttons means losing visual proximity.


Users dont hate scrolling用戶不討厭滾動瀏覽

The “users hate scrolling argument” is often a side effect of not having the right context at the right time and solving it by craming as much information in a single screen to help create context.

“but in our analytics we see that only 10% of the users scroll to the bottom of our landing page” seems like a safe bet to conclude that 90% of your audience hates scrolling.
The problem is not the scrolling, its the amount of information. Having more information higher on the page doesnt mean that users will absorb that information but will burn out quicker and make them leave.


在我們研究分析的結果中,只用百分之10% 的用戶滾動到登陸頁的按鈕。由此極有可能的結論是90%的用戶討厭滑動鼠標。其實問題不在於滾動鼠標而是信息量,把大量的信息呈現在同一個界面並不代表用戶=用戶都會注意到,反而會是用戶失去耐心憤然離去。

02 Dropdown buttons


So you've cleaned up your screen and put all the buttons in dropdowns.


  • More Focus

  • Less clutter, easier to find what I need



  • 更專注

  • 頁面簡潔,用戶更容易找到他所需要的

Balance is key平衡是關鍵

Think about your interface as a physical space, if you hide a page in a set of drawers, you need to open every drawer until you find what you are looking for. This is the same for digital UI.

If your drawers are logical and are in the right place this works well, but having garden supplies in a drawer in your garden shed sounds smart, so should your bbq supplies go in there too? Or in the kitchen? Or both?

A good balance goes a long way. How often you use your bbq determines if it should go in the shed or kitchen.

If you only have 5 buttons, they might not need to go in a dropdown, but 6 buttons, that's a different story.



03 where am I


You have a consistent design system and brand style, all pages feel the same. Soon you feel like you are walking through a forest of pages, not knowing if you have seen this page before, or if this is a different page with similar states.


  • Consistent visual style

  • Design Systems driven design

  • Efficient use of screen real-estate



  • 一致的視覺風格

  • 設計系統驅動設計

  • 有效的使用屏幕

It's friday afternoon, you have ADD and are bouncing between social media, colleagues, some private messages and trying to do your work. The last thing on your mind is what link you just clicked and where you are in the flow or process.

Create every screen for this user.

  • Give pages clear headers or page names

  • Implement breadcrumbs if you are more than 1 level deep

  • If the flow has multiple steps, show those steps.



  • 給界面設定清晰的標題,

  • 如果有不同層級就使用麵包屑

  • 如果任務流有多個步驟,那麼就顯示出來。

04 Popup in popup


To save space, you have a button with a notification.
In the notification there is a button that leads to another popup.

“More context awareness”


What happens when I…

The problem with this is that the user loses his mental model of where he is in the process. If he finishes the second popup, will he go to the original popup or back to the original screen?Either the first popup should be a screen, or the second popup should be an inline error message.


05 Card in card


Cards are trending at the moment, so what could be better than a single card? how about a card in another card… mind blown.

“Cards are nested to create visual hierearchy”

UXers often talk about visual hierarchy. The way in which elements are organized on a screen portraying their importance to the user. Along the way physical symbolism such as cards were introduced.





In a traditional card deck, cards are all equal of size .
Cards are placed on, under or next to other cards to communicate certain states or relationships. When you nest a card inside another card, the users mental model of what you can do with cards starts to breakdown. The user subconsciously starts to question relationships of other objects in the interface, and all logic is thrown out the window.



The solution is easy though!
Dont nest cards, but place them close to each other, next to each other, or placed within an outline (like laying cards down on a casino table).


06 Form fields


Should I have a long list of form inputs? Maybe break it up in to multiple steps? Or have 3 columns of form inputs so it all fits in a single screen?

“Users hate scrolling”

The main problem isn't the amount of pages or the amount of forms, it is how many forms are visible on the screen at a single time. Like buttons, this should be reduced to the minimal amount possible that still gives context and ease of use.



Always use a single column

Best practise is to always put intput fields in a single colomn.
The users eyes have an easy time to flow down and check off each section.


Are you telling a story你在講故事嗎?

Sometimes your input fields are about the journey the user is about to embark on (on boarding), or maybe they have important consequences (tax slips). This is the best time to break up your fields into multiple pages.
This gives you some visual space to create some breathing room and explain to the user what they are doing and why it's amazing or important.



If there are only 1–5 items to choose from please don't put them in a dropdown. I know it might look elegant and all, but it's just not worth the users effort. Placing radio buttons is a friendlier approach.


00 Recap, Quick rules


Recap, Quick rules

  • No more than 9 buttons

  • Only use drop downs as a last resort

  • Give every page a header

  • When a page is more than 1 deep, give it breadcrumb

  • When in multiple steps, show the steps

  • No more than 9 words per line.

  • Never use popup in a popup

  • Never nest a card in a card

  • Keep form fields in a single column


  • 按鈕不超過9個,最好是5個

  • 不到萬不得已不要用下拉

  • 給每個頁面清晰簡潔的標題

  • 當一個頁面有不同層級,使用麵包屑

  • 文本每行不超過9個詞(這里大家酌情參考就行,中文肯定不止。佔屏幕寬度一半到三分之二都是可接受的)

  • 不要有多重彈窗

  • 不能進行卡片嵌套

  • 保持輸入表單設計成一欄




GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。