A Good User Interface
has
high conversion rates and is
easy to use. In other words, it's nice to both the business side as well as the people using it. Here is a running list of practical ideas to try out. All is read.
Sign up for updates.
優異的使用者介面（user interface，UI）讓使用者用得順心，從而提高轉換率（conversion rate），換言之，好的 UI 在使用與銷售層面上形成雙贏。UI 設計師 Jakub Linowski 列出 16 點改善 UI 的訣竅，而這份清單仍在繼續累積，有興趣的讀者可以
訂閱他的電子報，隨時獲得最新的 UI 祕訣。
Original rf:
http://goodui.org/
Translate:
http://www.inside.com.tw/2013/07/08/a-good-user-interface-has-high-conversion-rates
Re-edit:
http://knowlet3389.blogspot.tw/（為了避免翻譯可能造成的誤區，故將原文與翻譯同時呈現）
單欄型式優於多欄
Try A One Column Layout instead of multicolumns.
單欄型式讓你更能掌握自己的內容，從頂部到底部一氣呵成，用故事引導讀者，最終是要誘引他們「採取行動」（call to action，下稱 CTA，意指下載或消費等目的）；而多欄反而可能導致讀者分心。
A one column layout will give you more control over your narrative. It should be able to guide your readers in a more predictable way from top to bottom. Whereas a multi column approach runs some additional risk of being distracting to the core purpose of a page. Guide people with a story and a prominent call to action at the end.
不要劈頭銷售產品
Try Giving a Gift instead of closing a sale right away.
「略施小惠」給使用者，販賣的意圖不要設計得太明顯。小小的優惠或禮物，對未來的銷售會帶來大大的幫助。
A friendly gesture such as providing a customer with a gift can be just that. Deeper underneath however, gifting is also an effective persuasion tactic that is based on the rule of reciprocity. As obvious as it sounds, being nice to someone by offering a small token of appreciation can come back in your favour down the road.
統一相似的功能，避免支離破碎的 UI
Try Merging Similar Functions instead of fragmenting the UI.
瀏覽網站時，我們很常看到琳瑯滿目的元素或特色，但它們的功能毫無二致，而相似的選項太多，只會提高讓使用者無所適從。倘若發現自己的網站內有以不同型式重複相同功能的狀況，不妨考慮重新設計 UI，把類似功能整合起來。譬如圖中「Customer Service（客服）」、「Contact Us（聯繫我們）」其實是一樣的意思，應當保留一個選項就好。
Over the course of time, it's easy to unintentionally create multiple sections, elements and features which all perform the same function. It's basic entropy - things start falling apart over time. Keep an eye out for duplicate functionality labelled in various ways, as it puts a strain on your customers. Often, the more UI fragmentation there is, the higher the learning curve which your customers will have to deal with. Consider refactoring your UI once in a while by merging similar functions together.
使用者見證或提出銷售實據
Try Social Proof instead of talking about yourself.
「社會認同」（social proof）是刺激轉換率很好的策略，自己再怎麼天花亂墜終究只是自吹自擂，請使用者見證或數字實據才有效。
Social proof is another great persuasion tactic directly applicable to increasing conversion rates. Seeing that others are endorsing you and talking about your offering, can be a great way to reinforce a call to action. Try a testimonial or showing data which proves that others are present.
主要目的請反覆強調，別只提一次
Try Repeating Your Primary Action instead of showing it just once.
希望使用者點擊的連結或按鈕（比如購買或下載），別只出現一次，可以考慮放在單欄網頁的頂端與底部，或在多個頁面呈現。
Repeating your call to action is a strategy that is more applicable to longer pages, or repeating across numerous pages. Surely you don't want to have your offer displayed 10 times all on the same screen and frustrate people. However, long pages are becoming the norm and the idea of squeezing everything "above the fold" is fading. It doesn't hurt to have one soft actionable item at the top, and another prominent one at the bottom. When people reach the bottom, they pause and think what to do next - a potential solid place to make an offer or close a deal.
清楚區別三種功能性（可點擊、已點擊、純文字）元素
Try Distinct Styles Between Clickable And Selected Items instead of blurring them.
可點擊的元素（連結、按鈕）、已點擊的元素、純文字三者彼此應該以顏色、深度或對比等各種設計技巧清楚區隔，讓使用者瀏覽網站暢行無阻。例如左圖，藍色字體是連結，黑色字體是使用者點擊的選項，或者是使用者正在瀏覽的頁面。
Visual styling such as color, depth, and contrast may be used as a reliable cue to help people understand the fundamental language of navigating your interface: where am I, and where can I go. In order to communicate this clearly to your users, the styles of your clickable actions (links, buttons), selected elements (chosen items), and plain text should be clearly distinct from one another and then applied consistently across an interface. In the visual example, I've chosen a blue color to suggest anything that can be clicked on, and black as anything that has been selected or indicates where someone is. When applied properly, people will more easily learn and use these cues to navigate your interface. Don't make it harder for people by blurring these three functional styles.
突顯推薦方案
Try Recommending instead of showing equal choices.
如果服務有多種選擇，請把最推薦的方案強調出來，如左圖就將「product X」特別放大，Y、Z 縮小。
When showing multiple offers, then an emphasized product suggestion might be a good idea as some people need a little nudge. I believe there are some psychology studies out there which suggest that the more choice there is, then the lower the chances of a decision actually being made and acted upon. In order to combat such analysis paralysis, try emphasizing and highlighting certain options above others.
善意提醒 vs. 突兀確認
Try Undos instead of prompting for confirmation.
如果使用者更改了某個選項，用一行文字提醒他們可以「復原」就好，無需大費周章設計「再次確認」的跳出視窗。因為多數時候使用者的動作都具有意識，後者太突兀，可能讓使用者覺得被糾正而產生被冒犯的感覺。
Imagine that you just pressed an action button or link. Undos respect the initial human intent by allowing the action to happen smoothly first and foremost. Prompts on the other hand suggest to the user that he or she does not know what they are doing by questioning their intent at all times. I would assume that most of the time human actions are intended and only in small situations are they accidental. The inefficiency and ugliness of prompts is visible when users have to perform actions repeatedly and are prompted numerously over and over - a dehumanizing experience. Consider making your users feel more in control by enabling the ability to undo actions and not asking for confirmation where possible.
清楚闡述目標客群
Try Telling Who It's For instead of targeting everyone.
描繪適合使用你服務或產品的客群，可以連結到更多相似特質的人，同時也讓他們感受自己的獨特性。
Are you targeting everyone or are you precise with your audience? This is a conversion idea where you could be explicit about who exactly your product or service is intended for. By communicating the qualifying criteria of your customers, you might be able to actually connect more with them while at the same time hinting at a feeling of exclusivity. The risk with this strategy of course is that you might be cutting yourself short and restricting potential customers. Then again, transparency builds trust.
(Side note: Enjoying the little characters style? Please be sure to check out MicroPersonas.)
肯定，避免猶豫不決
Try Being Direct instead of indecisive.
語氣應該直接且肯定，優柔寡斷是大忌，訊息中如果出現「也許⋯⋯」、「有趣嗎？」、「想要嗎？」等疑問字眼，在顯示自信與強調權威上可能還有進步空間。
You can send your message with uncertainty trembling in your voice, or you can say it with confidence. If you're ending your messaging with question marks, using terms such as "perhaps", "maybe", "interested?" and "want to?", then most likely you have some opportunity to be a bit more authoritative. Who knows, maybe there is a bit more room for telling people what to do next in the world of conversion optimization.
採用強烈對比
Try More Contrast instead of similarity.
CTA 應該與眾不同。運用色調、深度、互補色等方式，將 CTA 跟其他網頁元素區隔開來。
Making your calls to action be a bit more prominent and distinguishable in relation to the elements surrounding them, will make your UI stronger. You can easily increase the contrast of your primary calls to action in a number of ways. Using tone, you can make certain elements appear darker vs. lighter. With depth, you can make an item appear closer while the rest of the content looks like it's further (talking drop shadows and gradients here). Finally, you can also pick complementary colors from the color wheel (ex: yellow and violet) to raise contrast even further. Taken together, a higher contrast between your call to action and the rest of the page should be considered.
產品的誕生地點
Try Showing Where It's Made instead of being generic.
說明你、你的產品或服務來自何處，就像在自我介紹一般，賦予人性化的親切感受，而且強調產地或許也會帶來品質保證的效果。
Indicating where you, your product or service is from says quite a bit subliminally while at the same time moves your communication to a more personal level. Mentioning the country, state or city of origin is surely a very human like way to introduce oneself. If you can do the same virtually then you just might be perceived as a bit more friendly. Often, stating where your product is being made at also has a pretty good chance of making it feel of slightly higher quality. It's a win win.
表單問題愈簡化愈好
Try Fewer Form Fields instead of asking for too many.
註冊表單太雜，使用者往往容易不耐煩而半途放棄，問題儘量少而精簡。
Human beings are inherently resistant to labor intensive tasks and this same idea also applies to filling out form fields. Each field you ask for runs the risk of making your visitors turn around and give up. Not everyone types at the same speed, while typing on mobile devices is still a chore in general. Question if each field is really necessary and remove as many fields as possible. If you really have numerous optional fields, then also consider moving them after form submission on a separate page or state. It's so easy to bloat up your forms, yet fewer fields will convert better.
別把選項藏起來
Try Exposing Options instead of hiding them.
下拉式選單雖然不佔空間，但卻讓選項更難被察覺。適合下拉式選單的問題是可預測性的或者人人皆很熟悉的時間（如出生日期）或地理位置，跟產品或服務有關的重要問題選項，最好並列在頁面明顯的位置上。
Each pull down menu that you use, hides a set of actions within which require effort to be discovered. If those hidden options are central along the path to getting things done by your visitors, then you might wish to consider surfacing them a bit more up front. Try to reserve pull down menus for options that are predictable and don't require new learning as in sets of date and time references (ex: calendars) or geographic sets. Occasionally pull down menu items can also work for those interfaces that are highly recurring in terms of use - actions that a person will use repeatedly over time (ex: action menus). Becareful of using drop downs for primary items that are on your path to conversion.
連貫順暢的頁面
Try Suggesting Continuity instead of false bottoms.
不要讓使用者產生「已經捲完頁面」而實際上根本還未看到底部的錯覺。製造一種視覺型式或節奏，令使用者得以順利瀏覽完整個頁面，才不會白費苦工。
A false bottom is a conversion killer. Yes, scrolling long pages are great, but be careful of giving your visitors a sense that the page has come to an end somewhere in between sections where it really hasn't. If your pages will scroll, try to establish a visual pattern or rhythm that the user can learn and rely on to read further down. Secondarily, be careful of big gaps in around the areas of where the fold can appear (of course I'm referring to a area range here with so many device sizes out there).
不要分散焦點
Try Keeping Focus instead of drowning with links.
如果你的網頁唯一目的是要觸發使用者捲到底部時「採取行動」，那中間安插的任何連結都可能導致他們分心，甚至將他們帶離你的網站，因此必須小心謹慎的安排連結數量與位置。
It's easy to create a page with lots of links going left and right in the hope of meeting as many customer needs as possible. If however you're creating a narrative page which is building on towards a specific call to action at the bottom, then think twice. Be aware that any link above the primary CTA runs the risk of taking your customers away from what you've been hoping them to do. Keep an eye out on the number of links on your pages and possibly balance discovery style pages (a bit heavier on the links) with tunnel style pages (with less links and higher conversions). Removing extraneous links can be a sure way to increase someone's chances of reaching that important button.
留言
張貼留言