SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

UI 陷阱:消失的三角地帶

Wei-Fan Chenuser-interface-design
name

本文有大量圖檔遺失,我們正在努力恢復中了!

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

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

上面這張圖紅色的部份就是最讓使用者討厭的地方了,讓我們來看看這個紅色的三角形到底發生了什麼錯誤?當使用者選擇畫面上的「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

  1. Photo by Liam Briese on Unsplash
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
Entrepreneur in entertainment and play for wellness / Author of Playable Design / Active indie game developer 🎉
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...Read more