Mouse Enter與Click的使用淺析

前段時間被項目組的一個同學挑戰(zhàn)了~問題圍繞著系統(tǒng)右上角的快捷圖標,其下拉內(nèi)容是應該點擊(mouse click)觸發(fā)還是鼠標移到圖標上時(mouse enter)觸發(fā),我支持前者的原因薛窥,在于整個系統(tǒng)所有的下拉菜單都是通過點擊觸發(fā),沒有必要在特定的位置做不一樣的處理恩伺,反而增加用戶的記憶成本;而他支持后者,原因在于,他覺得這種方式可以減少用戶點擊的操作洛姑,更快捷一點。(似乎聽起來都有道理=旋恼。=

為了證明各自的觀點吏口,我們分別向?qū)Ψ綊仈S了自己看到的使用己方觀點的系統(tǒng)奄容,mouse enter觸發(fā)的冰更,比如:微博人人昂勒、百度蜀细;mouse click觸發(fā)的,比如Teambition戈盈,worktile奠衔、Google Developers Console等等,這個爭論讓我意識到有必要分析下這兩種操作塘娶。

場景

Mouse Enter的觸發(fā)归斤,比較常見的是系統(tǒng)頂部菜單的展開,
例如樣例

頂部菜單

這種設計的優(yōu)點在于刁岸,直接把內(nèi)容推送給用戶脏里,減少操作成本,尤其是像信息含量比較高的菜單虹曙,可以讓用戶迅速的了解各個菜單的內(nèi)容迫横,快速查找到的自己的目標,在這個方面來說酝碳,這類設計的確要比click觸發(fā)來的更加快捷直接矾踱。

Mouse Click的觸發(fā),比較常見的是系統(tǒng)左側(cè)菜單的展開疏哗,
例如樣例

左側(cè)菜單

這種設計的優(yōu)點在于呛讲,符合了用戶對于展開、收縮圖標的認知,并且在PC端的操作中贝搁,點擊操作是一個認知最為廣泛的操作刃宵,對于有目的性的點擊,并不會過多的增加用戶的使用成本徘公;并且還便于整個系統(tǒng)操作方式的統(tǒng)一牲证。

使用的權(quán)衡

  1. 我建議需要考慮的第一點:一致性,無論采取何種設計关面,盡量保持整個系統(tǒng)在同類操作上的一致性坦袍。我也見到過全部下拉選項采用Mouse Enter設計的系統(tǒng) Eteams,在展開的操作上等太,培養(yǎng)用戶對于整個系統(tǒng)的認知捂齐,一旦形成了這種認知,無論是哪種方式缩抡,都有其存在的意義奠宜。

  2. 考慮整個系統(tǒng)對于這兩種操作的適應性。如果我們將上面兩個例子中使用的設計相互置換瞻想,就會發(fā)現(xiàn)压真,click也可以用到enter的場景中,但是enter的設計用到click中會顯得有點顛覆常識(當然蘑险,這可能只是個例)滴肿,結(jié)合系統(tǒng)自身的結(jié)構(gòu),考慮兩個方案的優(yōu)先級佃迄。

  3. 考慮目標用戶操作的習慣性泼差。

我們項目正在改版一個老系統(tǒng),其菜單的展開方式就是上面例子中mouse enter的設計呵俏,我曾默默的觀察了不同用戶(甚至包括產(chǎn)品自己的PD堆缘、運營)對這個菜單的使用,發(fā)現(xiàn)大家還是會習慣性的先去點一下(雖然這不是打開菜單的正確方式)普碎,這是個很有意思的現(xiàn)象:即便是產(chǎn)品自身的設計者吼肥,對于這種展開的認識仍然需要靠自己的記憶調(diào)整,而我在使用的時候随常,也需要常常提醒自己這里是不需要點擊的潜沦。
對于PC端的展開操作中,我發(fā)現(xiàn)我們的目標用戶更多的還是習慣于點擊觸發(fā)绪氛,所以將系統(tǒng)所有的展開都規(guī)定成了點擊觸發(fā)唆鸡,從而引發(fā)了文章開頭的討論。

在前期的調(diào)研過程中枣察,同樣需要考慮到目標用戶的操作習慣争占,選擇用戶最容易接受的設計燃逻。

4.考慮誤操作等特殊場景”酆郏可以發(fā)現(xiàn)伯襟,mouse enter的場景,其操作目標都是比較大的~或者有明顯的區(qū)域性握童,因為鼠標的晃動可能導出菜單的時隱時現(xiàn)姆怪,如果目標的面積比較小,或者區(qū)域性不夠明顯澡绩,就會導致用戶在使用過程中容易丟失目標稽揭,在使用這種設計方式時,同樣需要考慮這個影響肥卡。

總結(jié)

我曾在面板在對象展示中的應用提到過一個觀點:如果操作路徑清晰溪掀,用戶對于操作路徑抵達的要求就不會那么苛刻(當然,路徑還是越短越好)步鉴,然而揪胃,如果在這個過程中,用戶因為誤操作氛琢、系統(tǒng)的不一致等問題喊递,導致多次操作無果,這才是惹怒用戶的地方艺沼。
所以上述兩者設計本身出發(fā)的設計理論無可厚非册舞,但是我們需要通過一系列的場景來識別使用。當然障般,我個人更加喜歡Click的操作啦hia

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市盛杰,隨后出現(xiàn)的幾起案子挽荡,更是在濱河造成了極大的恐慌,老刑警劉巖即供,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件定拟,死亡現(xiàn)場離奇詭異,居然都是意外死亡逗嫡,警方通過查閱死者的電腦和手機青自,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驱证,“玉大人延窜,你說我怎么就攤上這事∧ǔ” “怎么了逆瑞?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵荠藤,是天一觀的道長。 經(jīng)常有香客問我获高,道長哈肖,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任念秧,我火速辦了婚禮淤井,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘摊趾。我一直安慰自己庄吼,他們只是感情好,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布严就。 她就那樣靜靜地躺著总寻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪梢为。 梳的紋絲不亂的頭發(fā)上渐行,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機與錄音铸董,去河邊找鬼祟印。 笑死,一個胖子當著我的面吹牛粟害,可吹牛的內(nèi)容都是我干的蕴忆。 我是一名探鬼主播,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼悲幅,長吁一口氣:“原來是場噩夢啊……” “哼套鹅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起汰具,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤卓鹿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后留荔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吟孙,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年聚蝶,在試婚紗的時候發(fā)現(xiàn)自己被綠了杰妓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡碘勉,死狀恐怖巷挥,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情恰聘,我是刑警寧澤句各,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布吸占,位于F島的核電站,受9級特大地震影響凿宾,放射性物質(zhì)發(fā)生泄漏矾屯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一初厚、第九天 我趴在偏房一處隱蔽的房頂上張望件蚕。 院中可真熱鬧,春花似錦产禾、人聲如沸排作。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妄痪。三九已至,卻和暖如春楞件,著一層夾襖步出監(jiān)牢的瞬間衫生,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工土浸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留罪针,地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓黄伊,卻偏偏與公主長得像泪酱,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子还最,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容