【UI 陷阱】消失的三角地帶

【UI 陷阱】消失的三角地帶

使用者介面設計是一件非常細心的工作,一點點小小的細節常常會有很大的影響。可能一點點的小失誤,會讓整個使用者介面非常難用而失去親和力。介面就是由許多小物件慢慢堆疊起來的操作平台,不同的小物件之間的關係非常重要,通常這些關係受到完形心理學的視覺法則影響,包括:距離、大小、顏色等等。

選單是使用者介面中一個非常常見的物件,但是在許多的網頁設計上,也是許多設計師容易忽略的地方,尤其是傳說中的消失的三角地帶,最容易讓使用者感到困擾。

上面這張圖紅色的部份就是最讓使用者討厭的地方了,讓我們來看看這個紅色的三角形到底發生了什麼錯誤?當使用者選擇畫面上的「Paste Special」選項打開一個子選單,這個子選單上面有兩個選項可以讓使用者點選,分別是「Paste Escaping Special Characters」和「Paste Slowly」,當使用者的目的是要選擇第一個選項(Paste Escaping Special Characters)時,滑鼠的移動方式是水平的往右移動,這時候還感覺不出什麼問題:

但如果使用者想要選擇第四個,也就是最下面那個選項(Paste Slowly),最直覺的方法就是斜斜的移過去:

問題來了,當滑鼠斜斜的移動時,會滑過母選單的「Select All」和「Open Paste History」兩個選項,然後子選單就被關閉了。這個滑鼠移動的範圍,就被包含在消失的三角地帶中,如果不解決這個問題,使用者就必須要直角的移動他的滑鼠,才能真正點選到他想要的選項。這個要控制滑鼠水平移動,又要直角轉彎的方法,就是傳說中的「滑鼠過山洞」:

當然,我們還是希望使用者可以用最直覺的方法,斜斜的移到他要的地方就好了。這種問題有許多種解決方式。例如:當子選單開啟時,在三角地帶放置一個遮罩,當使用者的滑鼠在遮罩上面停留超過 0.1 – 0.3 秒才將遮罩移除。或是利用滑鼠移動軌跡的角度,如果是傾斜超過 45 度就不要關閉子選單。這樣就可以讓使用者順利的移動滑鼠,而不會感到挫折囉!

 

延伸閱讀:

【ui-陷阱】套牢的進度對話框

【ui-陷阱】按鈕總是看的到卻點不到

【ui-陷阱】消失的訊息

 

Image via nicubunu.photo, CC License.

「如果你不夠小心,在 Photoshop 中旋轉圖像時,可能會毀了你辛苦完成的作品!」 ~ Marc Edward 在 Photoshop 中旋轉圖像時(這邊指...
一個理想的使用性測試(Usability Test),除了事前做好全盤規劃、測試當天順利進行以及蒐集到豐富資料,還要能讓每一位使用性測試參與者(Particip...
想像你現在正在一間唱片行裡挑喜歡的 CD,當你正要帶著一張標價 399 元的搖滾專輯去櫃檯結帳的時候,旁邊有一個背著吉他的年輕人拉著你,說:「我只是好心想告訴你...
鄧巴(Robin Dunbar)是一名任教於利物浦大學的人類學家,他認為所有的靈長類都請向與其他同類的社交規模一致,而且社交規模的數量和大腦新皮質的大小有關。鄧...
在影像處理以及繪圖軟體中,我們常常會遇到這兩個名詞: sRGB 與 AdobeRGB,許多數位相機也提供這兩種選項讓使用者選擇,在繼續講這兩個名詞之前,我們得先...
進度對話框(Progress dialog)是行動裝置介面裡一個常見又惹人厭的介面元件,它的出現限制了使用者的自由,有時甚至讓他們落入了無止盡的等待深淵,按 B...
© 2013 Desiring Clicks. All Rights Reserved.
Top