本文有大量圖檔遺失,我們正在努力恢復中了!
使用者介面設計是一件非常細心的工作,一點點小小的細節常常會有很大的影響。可能一點點的小失誤,會讓整個使用者介面非常難用而失去親和力。介面就是由許多小物件慢慢堆疊起來的操作平台,不同的小物件之間的關係非常重要,通常這些關係受到完形心理學的視覺法則影響,包括:距離、大小、顏色等等。
選單是使用者介面中一個非常常見的物件,但是在許多的網頁設計上,也是許多設計師容易忽略的地方,尤其是傳說中的消失的三角地帶,最容易讓使用者感到困擾。
上面這張圖紅色的部份就是最讓使用者討厭的地方了,讓我們來看看這個紅色的三角形到底發生了什麼錯誤?當使用者選擇畫面上的「Paste Special」選項打開一個子選單,這個子選單上面有兩個選項可以讓使用者點選,分別是「Paste Escaping Special Characters」和「Paste Slowly」,當使用者的目的是要選擇第一個選項(Paste Escaping Special Characters)時,滑鼠的移動方式是水平的往右移動,這時候還感覺不出什麼問題:
但如果使用者想要選擇第四個,也就是最下面那個選項(Paste Slowly),最直覺的方法就是斜斜的移過去:
問題來了,當滑鼠斜斜的移動時,會滑過母選單的「Select All」和「Open Paste History」兩個選項,然後子選單就被關閉了。這個滑鼠移動的範圍,就被包含在消失的三角地帶中,如果不解決這個問題,使用者就必須要直角的移動他的滑鼠,才能真正點選到他想要的選項。這個要控制滑鼠水平移動,又要直角轉彎的方法,就是傳說中的「滑鼠過山洞」:
當然,我們還是希望使用者可以用最直覺的方法,斜斜的移到他要的地方就好了。這種問題有許多種解決方式。例如:當子選單開啟時,在三角地帶放置一個遮罩,當使用者的滑鼠在遮罩上面停留超過 0.1 – 0.3 秒才將遮罩移除。或是利用滑鼠移動軌跡的角度,如果是傾斜超過 45 度就不要關閉子選單。這樣就可以讓使用者順利的移動滑鼠,而不會感到挫折囉!
Reference
- Photo by Liam Briese on Unsplash