SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

針對左、右撇子的介面設計

Magic Hunguser-interface-design
name

有的人是左撇子,有的人是右撇子,但在螢幕裡面的虛擬世界,同樣的介面之於他們,是否會造成操作的習慣以及效率的不同呢?其實先不管你是左撇子還是右撇子,相對的位置與距離就能夠影響你兩手的操作反應與舒適度,我們可以透過「賽門效應」(Simon Effect)來看看出其中的差異。

賽門效應的簡單實驗如下,假設有個螢幕,會在螢幕中的左右不定時的出現閃爍的光,如果出現紅色的話,我們就必須按下左邊的按鈕,反之如果出現綠色的閃爍光,則必須要按下右邊的按鈕如下圖所示:

左右手的控制範圍不同,右撇子喜歡把游標放右邊

奇妙的是,透過這個實驗,你會發現 1 與 4 情況下的反應時間將會來的比 2 與 3 來的快,也就是說,左手能夠對左方的刺激產生比較快的反應,右手則會對右方的刺激有比較快速的反應;而在方向不對應的情況下,則會對我們的認知產生干擾,繼而影響我們的判斷以及操作反應。

而賽門效應通常也影響了我們對於映射的結果,試試看在使用電腦時,當滑鼠處於閒置(Idle)的狀態下,哪個滑鼠停放的位置讓你感到最舒適直覺呢?或試著換隻手控制滑鼠,擺在另外一邊使用一陣子試試看(或是可以試試看型男必殺 50 技的交叉手用法......)。

對於大部分使用右手操控滑鼠的人來說,即使在虛擬的介面中,游標與使用的手是沒有實質的距離關係,但是我們還是可以主觀的感覺到,滑鼠移動到最左上方的角落,會比移動到右上方來的些微麻煩。

因為相對於螢幕中的游標,滑鼠實體的位置通常是相對的偏在右方,所以我們會很習慣的將滑鼠停放在偏右方的位置(如果是使用筆電中央的觸控板,相對來說就會比較偏向中間的位置)。

針對右撇子的介面設計,操作區域放右邊

而因為大部分的人都是透過右手使用滑鼠(滑鼠在右方),這也因此而會影響到了我們的介面設計,例如網站中位於右方的控制操作區,則會比置放於左方來的快速與輕鬆,因為中央的閱讀區是可以透過滑鼠的滾輪直接捲動,使得在閱讀時游標仍可以保持在右方較舒適的區域。

而對於出現在右下方的彈出視窗如「再讀一篇」或是 Facebook 的訊息對話視窗,除了不會遮蔽著重要的閱讀區外,對於右手的滑鼠操作也比較有效率且輕鬆;或是你希望使用者滑鼠很容易移動到上方(Hover)並點擊的東西,就可以放在右邊的位置。

同樣的方法,我們也可以利用在鍵盤的對應功能上,如 Mac Os X 的 Esc 離開鍵(或取消動作)剛好對應在視窗左上方的關閉按鈕,我們便可以很直覺的連結實體與虛擬介面中的兩個按鍵。

而這個部分的設計很有趣,相較於 Windows 的關閉按鈕在右上方,Windows 裡面要透過滑鼠關閉視窗其實是比較快速方便的,但卻跟使用 Esc 按鍵會有認知上的衝突。

考慮到左右位置對於介面操作反應的差異,並且在慣用手為右手(約90%)為大部分的情況下,我們便可以針對這個特性優化我們的操控方式(或是反向開發出適合左撇子使用者的方式),尤其是生活中實體商品的設計。


參考文獻:

  1. T., Stafford and M., Webb (2004) "Mind Hacks: Tips & Tools for Using Your Brain," O'Reilly Media Press.
  2. http://www.scq.ubc.ca/the-fighting-hypothesis-stability-of-polymorphism-in-human-handedness/ (圖片來源:seriousbri, CC Licensed)
Magic Hung
Magic Hung
Technical Director
Technical Director @ Fourdesire. Create fun and crafts via programming.
divider
Related Posts
name

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

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

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

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

讓設計跟著指尖走:觸控設備上的互動效果

對於網頁瀏覽者來說,按鈕元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時最容易感受到的有 Normal、Hover 以及 Active 這三種效果,分別為按鈕平時的狀態、滑鼠游標移到上方的效果、以及點擊按...Read more