表格按鈕的擺放和命名? - 網頁設計

http://webdesign.zoapcon.com

版權聲明:轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
http://uiclub.blogbus.com/logs/29997745.html

從油茶網看到這篇文章的轉載鏈接,Caroline Jarrett的疑問,估計也會是眾多從事ui行業人士的關注點,該如何適當的在界面表格上擺放按鈕位置及按鈕命名?仔細閱讀了下,慢慢嚼下英文。

Here’s a question that I get asked quite often: “Should we put ‘OK’ button to the left or the right of the ‘Cancel’ button?”
有一個問題我經常被問到:“我們應該把OK按鈕放左邊,Cancel按鈕放右邊嗎?”

A common variant is to ask the same question with ‘Back’ or ‘Previous’ instead of ‘Cancel’, and to maybe include ‘Next’ in the mixture.
另一個常見類似的問題是“后退”或“前進”代替“取消”,還有是“Next”的混淆情況。

A SIMPLE QUESTION, A COMPLEX ANSWER
問題簡單,答案是負責的。

I’d love to tell you: put OK on the left. Or on the right. Or something else that’s easy to say and easy to remember. Like so much in forms, the simple answer isn’t really appropriate. And yet, who needs another ‘it depends’? We’ve got far too many of them in usability. The truth, of course, is that ‘it depends’ is the right answer yet again. But we’ll avert our eyes from that and I’ll try to give a few rules here.
我不喜歡直接告訴你:OK放左邊,或放右邊,或容易閱讀容易記憶等等。多少類似的形式,簡單的回答是不妥當。可是,它視什么情況而定呢?在可用性方面我們有非常多的理由來考慮。事實上,它還是取決于正確的答案。轉變想法,我試著給出幾條規則的建議。

RULE 1: LOOK AT OTHER FORMS
第一條規則:查看、學期其它的表格

The first point is to find out what other forms your users are working with and see where those other programs put their buttons. For example, years ago Jakob Nielsen pointed out that most users spend most of their time on web sites other than yours. Or if you’re creating a program that will be used alongside Microsoft Office applications, then your users are likely to expect your program to follow their conventions. It does get a bit tricky if your users swap regularly between Mac and PC, because unfortunately the two operating systems have conflicting guidelines. Then you’ll have to think carefully about which one you’re going to follow – preferably, after doing some research on what your users do and which applications matter most to them.
第一點是找出您用戶正在使用和其他程序的按鈕是如何放置的形式。舉例來說,幾年前Jakob Nielsen指出,大多數用戶大部分時間都花在其他的網站上。或者,如果您要創建一個程序,將用于與Microsoft Office應用程序,那么您的用戶很可能會期待您的軟件適合他們的習慣。一個棘手的問題是,如果您的用戶常在Mac和PC之間交換使用 ,因為不幸的是,這兩個操作系統有沖突的準則。然后,你就必須仔細考慮清楚哪個系統是你要支持的,然后做一些研究關于你的用戶和應用程序之間哪個關系最密切。

RULE 2: PUT BUTTONS AT THE END OF THE CONVERSATION
第二條規則:把按鈕放置在會話的末端
The big deal with forms is that they ask users one or more questions, after which the user presses a button to say ‘I’m done with my turn in this conversation’. The conversational turn is handed over to the computer to do something. There needs to be a button. It’s usually called ‘OK’, ‘Send’, ‘Submit’ or ‘Next’. The crucial point is that it goes at the end. One common mistake I’ve seen: putting important instructions, or even whole questions, after that final button. A position that’s invisible to users. Don’t do it.

大規模的對話表格它們向用戶提出一個或多個問題,之后,使用者按下一個按鈕,說: '我提交我的會話。該會話是交給電腦來做些什么。需要有一個按鈕。通常稱為‘確定' , '發送' , '提交'或'下一步' 。至關重要的一點是,它不用結束時才點擊。我發現一個常見的錯誤:把重要提示以至整個問題放在最后按鈕之后。這讓用戶忽略了重要信息,這是錯誤的方式。

RULE 3: DECIDE WHETHER THE BUTTON IS NECESSARY
第三條規則:按鈕是否真正必要
A while ago, I wrote a column: “The Piece of HTML created just for me: Reset”. My theme was that ‘Reset’ buttons are rather handy for the forms consultant who regularly hunts for forms on web sites, fills them in and then wants to discard her entries. Sadly, the majority of them are at best useless and at worst deeply annoying for other users. Do you really need other buttons? Do your users want to discard all their work? If you don’t really need a button, then get rid of it.
先前,我寫了一篇: “The Piece of HTML created just for me: Reset””的文章 。主題是, 在網站上'reset'按鈕對于表格還是較為方便去有規律的進行表格診斷,特別是在用戶填寫信息后想放棄他的記錄。遺憾的是,這對大多數用戶而言是無用和煩人的功能。你真的需要另一個按鈕?你的用戶想要放棄所有的工作?如果你并不是真正必須按鈕,果斷的去掉它。

RULE 4: DECIDE WHETHER THE BUTTON NEEDS TO LOOK LIKE A BUTTON
第四條規則:確定按鈕是否需要像一個按鈕形式?

Sometimes you definitely need two or more possible actions at the end of the form: perhaps, indeed, ‘Send’ and ‘Throw away my work’ or ‘OK and ‘Cancel’. Luke Wroblewski calls the most important action the ‘primary action’ and anything else ‘secondary’. He and Etre did some testing on where to put ‘Submit’ and ‘Cancel’ on web forms, and whether to make ‘Cancel’ into a link or a less prominent button.
有時候,你肯定需要兩個或兩個以上的可能需要采取的行動結束時的形式:也許 '發送'和'放棄我的工作'或'確定和'取消' 。Luke Wroblewski把最重要行動稱為“主要行為”,另外的稱為“次要行為”。他和Etre做了一些測試,where to put ‘Submit’ and ‘Cancel’ on web forms,,是否讓'取消'做成一個鏈接或做成不太突出的按鈕。

Surprisingly, they found that any option that put the two buttons close together worked equally well. The only one that failed was placing ‘Cancel’ right under all the forms fields and ‘Submit’ way off to the right. (An aside: I’d have expected ‘Submit’ right under the forms fields and ‘Cancel’ way off to the right to work just as well as the options where the buttons were all close together, but for some reason that option didn’t get tested).
令人驚訝的是,他們發現,任何選擇方式,把兩個按鈕緊密的放置在一起結果是一樣好。唯一個失敗案例是在所有表格把'取消'放右下邊,‘提交‘離右邊距離較遠的情況。(旁白:我所期望的'提交'在表格領域的右下,’取消‘則遠離右邊區域。在這種情況也一起排放是否能起到好的效果,但由于某些原因,這個選擇沒有進行測試)。

In terms of time to complete the form, an option with two visually similar buttons worked best. It took users a tiny bit longer to deal with the versions where Cancel was less visually prominent or made into a link. Crucially, though, users preferred those options: “People responded well [to options with a less prominent Cancel] even if these designs slowed them down a little. This suggests that they were more concerned about avoiding losing their data, than they were about submitting it quickly”. My take on this: accuracy and user comfort beats a tiny improvement in processing time in nearly all cases. So I’d reduce the visual impact of secondary actions – and probably make really disastrous actions, like ‘Throw away all my data’, into links on web forms.
就完成表格的時間而言,選擇有兩個類似的視覺效果按鈕是最好的方式。在取消不太顯眼或制作成一個鏈接時用戶需要花一些時間來做決定。最重要的是,盡管用戶優先這些選項: “人們反應良好[去選擇一個不太明顯的取消]即使這些設計使他們判斷慢了點。這表明,他們更關心避免失去他們的數據,相對比快速提交數據而言。 “我接受這個觀點:幾乎所有的案例中完成過程時間的那么一點點提高被準確性和用戶舒適打敗了。所以,對于次要行為我減少視覺沖擊力——可能產生真正災難性的行動,如'放棄我所有的數據,進入鏈接的網頁表格。

There’s a supplement to this rule: make sure the button looks like a button. There’s an online banking application that I have to use regularly and it confuses me every time because the buttons are simple rectangles of orange with text on them – none of the little shading tweaks that make buttons stand out and look like buttons. If you’re feeling short of inspiration, try an image search for ‘web button’ and a vast selection of everything from cool to remarkably ugly will appear. Or, more realistically, just have a look at how your favourite web sites do them.
本規則補充:確認按鈕看起來像一個按鈕。有一個在線銀行申請,我經常混淆,因為每一次的按鈕是簡單的長方形的橙色,他們的文字-沒有陰影的調整,使按鈕凸出來看起來像按鈕。如果你缺少靈感,嘗試一個圖像搜索‘網頁按鈕’,會有種類繁多的一切從非常cool和丑陋的都將會出現。或者,更實際,找個你最喜歡的網站學習下。

RULE 5: LABEL THE BUTTON WITH WHAT IT DOES
第五條規則:給按鈕貼標識,該如何做?

The last step is to decide what label to put on the button. I’ve so often seen buttons labelled ‘OK’ and ‘Cancel’ when it’s not at all clear what those words mean. Think about those sadly too frequent Cancel boxes: you’ve asked a program to cancel something, and it then gives you a dialogue box with buttons labelled: ‘OK’ and ‘Cancel’. Does ‘Cancel’ here mean, yes, go ahead and cancel or does it mean, no, I don’t want to cancel after all? Note that there’s no rule saying ‘buttons have to have single-word labels’ and definitely no rule saying ‘there has to be an OK button and an Cancel button’. 最后一步是決定按鈕上貼什么標識。我常常看到按鈕稱為'Ok'和'取消',不清楚這些話的意思。想想那些不幸的過于頻繁的取消方塊:您問的程序,取消什么,然后給你一個對話方塊與按鈕標簽: 'ok'和'取消' 。請問'取消'在這里的意思是,繼續和取消它的意思是?不,我不想要取消?請注意,沒有規則說'按鈕,必須只有一個字的標簽' ,肯定沒有任何規則說, '必須有一個確定按鈕和一個取消按鈕。

在網頁表格中Luke 關于主要和次要行為的分析
Primary & Secondary Actions in Web Forms
by Luke Wroblewski & Etre
For:http://www.lukew.com/resources/articles/PSactions.asp

In recent months, I’ve been working on refining the design recommendations in my upcoming book, Web Form Design Best Practices, through actual usage data. To that end, I’ve had the pleasure of working with London-based usability firm Etre on several eye-tracking and usability studies focused on specific aspects of Web form design. One of these tests focused on the distinction between primary and secondary actions.

Primary & Secondary Actions
A typical Web form usually enables several “final” actions. Actions like “Submit”, “Save”, or “Continue” are intended to enable form completion –the primary goal of just about anyone who has started filling in a form. Because they enable the most important action on the form (completion), they are often referred to as primary actions.

 

 

Secondary actions, on the other hand, tend to be less utilized and most often allow people to retract the data they’ve entered. Options like “Cancel”, “Reset”, or “Go Back” represent secondary actions that are counter to most people’s primary goal of completing the form they started.

Because secondary actions can have negative consequences, especially when used unintentionally, I’ve often argued they should be absent from forms. Imagine filling in a long form online only to hit the “Reset” button and have all your data erased.

That said there are situations where secondary actions make sense (“Save for later”, “Export”, etc.). In these conditions, the best practice I’ve advocated has been to visually distinguish primary and secondary actions so people have an clear path illuminating their primary goal: completing a form.

 

 

Reducing the visual prominence of secondary actions minimizes the risk for potential errors and further directs people toward a successful outcome. But what’s the best way to accomplish this distinction? How different should primary and secondary actions be and where should they be placed? To answers these questions, Etre and I ran a few tests.

In order to assess which presentation of primary and secondary actions might work best, we tested six variations on 23 people using eye-tracking and usability metrics. Participants were presented each of six designs in random order (to minimize familiarity biases) and asked to “Please complete the form fully and accurately”.

 

 

Visual Distinctions
People accomplished their task perfectly when using five of the six designs. Option A, B, C, D and F achieved success rates of 100%, without causing users to make a single error. They also saw comparable task completion times and received similarly high satisfaction ratings.

Option B performed best of all. Fixations were shorter and fewer in number when using this design. And people were also able to complete the task more quickly and efficiently than they did when using the others.

 

 

However, when commenting on Option A, several people said that displaying the “Cancel” option as a link was helpful. One person mentioned that, while such a recessive presentation made this option harder to find, it helped prevent accidental (and catastrophic) cancellations. Another felt that “Submit” was the most important option and thus thought it was logical that “Cancel” wasn’t given equal status in the user interface.

Several people also made positive comments about Option C’s grey “Cancel” button. One participant said that its coloring made it easier to spot “the right button” (i.e. “Submit”), while another said that the different colored buttons “slow you down [and] make you check that you are hitting on the right thing.”

Interestingly, people required around eight more fixations to process Option C than they did to process Option B – a design that presented both options as near-identical green left-aligned buttons. It seems that, while users liked they fact that the grey made Option C’s “Cancel” button easier to spot, it did make the design less efficient in terms of its ability to be processed quickly. That said, when using Option B, a number of users expressed concern that they “could quite easily click the wrong one.”

 

 

Overall, it seems that people responded well to designs that made “Cancel” stand out in some way – even if these designs slowed them down a little. This suggests that they were more concerned about avoiding losing their data, than they were about submitting it quickly.

 

 

Placement
Only Option E performed poorly during our testing. Six people mistakenly clicked on the “Cancel” button when attempting the task with this design, while many more lingered over it before realizing that they were about to make a mistake. People, as a whole, were around six seconds slower when using this design than they were when using Option B (a considerable gap when you consider that the placement of the buttons was the only thing that differed between the two). They also required a higher than average number of fixations to complete the task (with a higher than average total fixation length and average fixation length).

 

 

According to the data we collected, Option A, B, and C were the three most effective designs. These prototypes shared a common characteristic: all presented their “Submit” and “Cancel” options on the left-hand side of the page. This suggests that left-alignment of these two options is the best design choice – especially when the form controls above are also left aligned. Placing the “Submit” and “Cancel” buttons on the left meant that people’s eyes had less distance to travel.

In terms of their eye movements, people were least efficient when using Option F. While all people performed the task successfully using this design, our eye tracking data shows that they were more efficient when using the others. People’s fixations were longest when using Option F; they fixated more often on this design than on most others too. We believe that this was because they expected the two buttons to be left-aligned (i.e. to appear directly below the last form field on the page) and upon finding that this wasn’t the case, had to search around to find them.

 

 

This finding maps well to a long-standing form design principle: illuminate a clear path to completion. Aligning inputs and actions with a strong vertical axis clearly communicates how to go about completing a form. This can be seen by the strong vertical axis formed by people’s gaze paths in the heat map below.

 

 

(Note: An element of preconditioning may also have had a bearing here as in all of the other designs we tested the “Submit” button was displayed to the left of the “Cancel” button.)

Summary
While the primary goal of most Web form designs is to get people through a form as quickly and painlessly as possible, there are situations where slowing people down is advisable. When choosing between primary and secondary actions, visual distinctions are a useful method for helping people make good choices.

Should this distinction be more prominent like the button vs. link in Option A or a bit more subtle like the two different colored buttons in Option C? Option A fared a bit better in time to completion, average number of fixations, and average total length of fixations indicating people completed the form faster but not by much.

The need for these distinctions becomes moot, of course, when no secondary actions are present. Make sure you really need each secondary action on a form and don’t add them indiscriminately.

Conversely, the alignment of actions with a form’s input elements provides a clear path to completion that helps people complete forms faster. Be conscious of where you place form actions as primary actions directly aligned with input fields tend to increase completion rates and the less time people have to spend on your forms, the happier they will be.

For more on Form Design...
Check out Luke's book about Web form usability, visual design, and interaction design considerations: Web Form Design: Filling in the Blanks.

A special thanks to Etre who provided the eye-tracking and usability testing that informed this article.


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜

    apsc 發表在 痞客邦 留言(0) 人氣()