What does the customer first see in your application? Yes, its your application design. So it is very important to pay attention to how the design is made. There’s so many factors to include, like how usually people meaning a symbol, how their preference, what common sense in design, etc. More factor you look, more people will attract with it.

客戶首先在您的應用程序中看到什么？ 是的，它是您的應用程序設計。 因此，注意設計是非常重要的。 其中包含許多因素，例如人們通常如何象征符號，他們的喜好，設計中的常識等。您看的因素越多，就會吸引更多的人。

Today I’ll explain about one of common sense in design your apps User Interface. The principle called Nielsen’s 10 Usability Heuristics for UI Design. They are called “heuristics” because it’s only common sense principle and not specific guide of usability. To read more detail, you can read this on : Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI’94 Conf. (Boston, MA, April 24–28), 152–158.

今天，我將介紹有關設計應用程序用戶界面的常識之一。 該原理稱為Nielsen的UI設計的10個可用性啟發法。 之所以稱為“啟發式”，是因為它只是常識性原則，而不是可用性的特定指南。 要了解更多詳細信息，請閱讀以下文章： Nielsen，J.(1994a)。 增強可用性啟發式方法的解釋能力。 進程 ACM CHI'94會議。 (馬薩諸塞州波士頓，4月24-28日)，152-158 。

Nielsen的UI設計的10種可用性試探法 (Nielsen’s 10 Usability Heuristics for UI Design)

＃1：系統狀態的可見性 (#1: Visibility of system status)

Everything user’s do to your app, there must be some feedback about it. With this, user will not be confused about what happening. The information / feedback also need appear within reasonable time (not to fast nor to long).

用戶對您的應用所做的一切，都必須對此有一些反饋。 這樣，用戶將不會對發生的事情感到困惑。 信息/反饋也需要在合理的時間內出現(不要太快也不要太長)。

＃2：系統與現實世界之間的匹配 (#2: Match between system and the real world)

Here, you must know who is your system talk to. The apps should speak with user language, so they will know what the meaning of it. You can’t let user communicate directly with system (I mean, don’t speak with system term language). More real-world and natural your app speak, more convenient when user use it.

在這里，您必須知道與您的系統交談的對象。 這些應用程序應該使用用戶語言進行交流，因此他們將知道它的含義。 您不能讓用戶直接與系統通信(我的意思是，不要用系統術語語言講話)。 讓您的應用程序更具真實性和自然性，使用戶使用起來更加方便。

＃3：用戶控制和自由 (#3: User control and freedom)

Your user also a human, they do some mistake. Here you must provide some “undo and redo” to your app. When user by an accident click a button or link, there should be a “emergency exit” to recover what user do. The “emergency exit” instruction must clear without having to do much effort.

您的用戶也是人，他們會犯一些錯誤。 在這里，您必須為您的應用提供一些“撤消和重做”功能。 當用戶無意中單擊按鈕或鏈接時，應該有一個“緊急出口”以恢復用戶的操作。 必須緊急清除“緊急出口”指令，而無需付出很多努力。

＃4：一致性和標準 (#4: Consistency and standards)

Application pages must be consistent and according to standard. Don’t make user confused by using ambiguous word, like when user fill some form instead using “submit” you should using “submit and next” when there’s be more form to be filled by user. A transition between page should not to difference, user will confused like “am I still in the same apps?”.

申請頁面必須一致且符合標準。 不要用模棱兩可的詞使用戶感到困惑，例如當用戶填寫某種表格而不是使用“提交”時，當用戶要填寫的表格更多時，應使用“提交并提交下一個”。 頁面之間的過渡不應該有所不同，用戶會感到困惑，例如“我仍在使用相同的應用程序嗎？”。

＃5：認可而不是回憶 (#5: Recognition rather than recall)

as much as possible, make a thing to be clear and easy to recognize. The user should not have to remember information about a thing to know your stuff meaning. Instructions for use of the system should be visible or easily to get whenever appropriate.

盡可能使事情清晰易辨。 用戶不必記住有關事物的信息即可知道您的東西含義。 該系統的使用說明應清晰可見，或在適當時容易獲得。

＃6：錯誤預防 (#6: Error prevention)

“An ounce of prevention is worth a pound of cure”, it’s also applies in our work. Good to prepare some error message, but it’s better to prevent that error to occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

“一分預防勝于一磅治療”，這也適用于我們的工作。 準備一些錯誤消息是很好的做法，但是最好首先防止該錯誤發生。 消除容易出錯的條件，或者檢查條件，并在用戶執行操作之前向其提供確認選項。

＃7：使用的靈活性和效率 (#7: Flexibility and efficiency of use)

When the user become wider, there will be some advance people in it. I mean there will be more people with more knowledge about your app and they wanna work faster and more efficient. In this case, your app should provide flexibility system both for inexperienced and experienced users.

當用戶變得更廣泛時，其中會有一些先行者。 我的意思是，將會有更多的人對您的應用有更多的了解，并且他們想要更快，更高效地工作。 在這種情況下，您的應用程序應為沒有經驗的用戶和有經驗的用戶提供靈活性系統。

＃8：美學和簡約設計 (#8: Aesthetic and minimalist design)

All of your pages must only consist a relevant and necessary contents. More irrelevant contents just make user more confused. So make sure to check it’s relevance if you wanna add more content.

您的所有頁面都只能包含相關且必要的內容。 更多無關的內容只會使用戶更加困惑。 因此，如果您想添加更多內容，請確保檢查其相關性。

＃9：幫助用戶識別，診斷錯誤并從錯誤中恢復 (#9: Help users recognize, diagnose, and recover from errors)

When you attempted as much as possible to prevent an error, there is no guarantee that user not produce some error. So, you should inform user with plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

當您嘗試盡可能防止錯誤時，不能保證用戶不會產生任何錯誤。 因此，您應該使用簡單的語言(無代碼)通知用戶，準確地指出問題所在，并建設性地提出解決方案。

＃10：幫助和文檔 (#10: Help and documentation)

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

即使可以在沒有文檔的情況下使用系統會更好，但可能仍需要提供幫助和文檔。 任何此類信息都應該易于搜索，著眼于用戶的任務，列出要執行的具體步驟，并且不要太大。

實施(在我的項目上) (Implementation (on my project))

Currently, I participating in PPL (Proyek Perangkat Lunak) or software project course. The project is about SmartCMR, here we make costumer membership application. So my apps can register and identification a costumer to be a member only with his or her face. Here is Nielsen’s 10 Usability Heuristics implemented in my project. *we built it using Bahasa Indonesia, cause almost all of our target and stakeholder is from Indonesia*

目前，我參加了PPL(Proyek Perangkat Lunak)或軟件項目課程。 該項目是關于SmartCMR的，在這里我們制作客戶會員申請。 因此，我的應用程序可以注冊和識別客戶以僅以其面部身份成為會員。 這是我的項目中實施的Nielsen的10種可用性啟發式方法。 *我們使用印尼語(Bahasa)建造了它，因為我們幾乎所有目標客戶和利益相關者都來自印尼*

#1: Visibility of system status There’s an indicator that the photo has taken, so user know the app has take her photo (Capture Indicator figure).

＃1：系統狀態的可見性有一個已拍攝照片的指示，因此用戶知道該應用已拍攝了她的照片(“捕捉指示符”圖)。

#2: Match between system and the real world It’s simple instruction in common Indonesian language (Ready Page Instruction figure).

＃2：系統與現實世界之間的匹配這是印度尼西亞通用語言的簡單指令(“就緒頁面指令”圖)。

#3: User control and freedomBack icon (Batal) in every state of registration and after select a passcode (Registration Stages, Passcode Confirmation figure).

＃3：在每種注冊狀態下，以及選擇密碼(“注冊階段”，“密碼確認”圖)后，用戶控制和LibertyBack圖標(Batal)。

#4: Consistency and standards Color, theme, icon are identically all app pages (Capture Indicator, Ready Page Instruction, Registration Stages, Passcode Confirmation figure, etc).

＃4：一致性和標準所有應用程序頁面的顏色，主題，圖標都是相同的(捕獲指示器，就緒頁面說明，注冊階段，密碼確認圖等)。

#5: Recognition rather than recall All instruction are simple an to the point, so user don’t need to remember step by step (Registration Stages, figure).

＃5：識別而不是回憶所有指令都非常簡單，因此用戶無需逐步記住(注冊階段，如圖)。

Besides example in my app, there are Google recommendation when you searching in Google search box. It’s prevent user to recall what information that he / she actually want to search. Google recommend what information that usually searched related to one or two words that user type. More example is Purchase History feature that usually implement in many e-commerce. User don’t have to remember what item that he / she bought last time.

除了我的應用程序中的示例外，在Google搜索框中進行搜索時還有Google推薦。 這樣可以防止用戶回憶起他/她實際要搜索的信息。 Google建議通常搜索的信息與用戶鍵入的一兩個單詞有關。 更多示例是通常在許多電子商務中實現的購買歷史記錄功能。 用戶不必記住他/她上次購買的商品。

#6: Error prevention When cashier fill the registration form and he / she just write a password that easy to remember and choose a very simple one, we prevent it by showing an error (Gunakan 8–20 karakter dengan campuran huruf dan angka) or in English (Use 8–20 character with word and number in it).

＃6：錯誤預防當收銀員填寫注冊表格并且他/她只寫了一個容易記住的密碼并選擇一個非常簡單的密碼時，我們會通過顯示錯誤來防止它出現(Gunakan 8–20 karakter dengan campuran huruf dan angka)或英文(使用8-20個字符，帶單詞和數字)。

#7: Flexibility and efficiency of use It’s actually not one of my app feature, It is my browser (Google Chrome) feature. When you already login to some website, there will be a username suggestion below the username form. Here, when cashier want to login but he / she have already login in same device.

＃7：靈活性和使用效率實際上，這不是我的應用程序功能之一，而是我的瀏覽器(Google Chrome)功能。 當您已經登錄某個網站時，在用戶名表格下方將出現一個用戶名建議。 在這里，當收銀員想登錄但他/她已經在同一設備上登錄了。

For other example is Mac OS gives users the freedom to create their custom keyboard and shortcut commands.

再例如，Mac OS使用戶可以自由創建自己的自定義鍵盤和快捷鍵命令。

#8: Aesthetic and minimalist design Here is my apps homepage, it’s only contain 2 icon (Registration and Identification) and a navbar.

＃8：美觀和簡約的設計這是我的應用程序主頁，它僅包含2個圖標(注冊和標識)和一個導航欄。

#9: Help users recognize, diagnose, and recover from errorsWhen something is not right in registration or identification it will show this red page. When user type wrong URL it will show this 404 error page

＃9：幫助用戶識別，診斷和從錯誤中恢復如果在注冊或標識中出現錯誤，它將顯示此紅色頁面。 當用戶鍵入錯誤的URL時，它將顯示此404錯誤頁面

#10: Help and documentationWe don’t implement this feature yet, but here an example from Slack app. Slack have a feature called Slack Bot. This feature can do much thing, but important one is it help user to answer any question about using Slack.

＃10：幫助和文檔我們尚未實現此功能，但這里是Slack應用程序中的示例。 Slack具有一個稱為Slack Bot的功能。 這個功能可以做很多事情，但是重要的是它可以幫助用戶回答有關使用Slack的任何問題。

See yaa…

再見…

Thus the writing that I made about basic heuristic of visual design (Nielsen’s 10 Usability Heuristics). Maybe it still in brief way, but hopefully what I have written can be implemented in your project. Then it can help your user to be get more interested with your application.

因此，我撰寫的有關視覺設計基本啟發式的文章(Nielsen的10可用性啟發式)。 也許它仍然很簡短，但是希望我寫的東西可以在您的項目中實現。 然后，它可以幫助您的用戶對您的應用程序更加感興趣。

Regards,

問候，

Gusti Ngurah Yama Adi PutraComputer Science of University of Indonesia 2017

Gusti Ngurah Yama Adi Putra印度尼西亞大學計算機科學2017