認(rèn)知與設(shè)計(jì)-理解UI設(shè)計(jì)準(zhǔn)則

認(rèn)知與設(shè)計(jì)-理解UI設(shè)計(jì)準(zhǔn)則

交互計(jì)算機(jī)系統(tǒng)可以說是一門計(jì)算機(jī)和認(rèn)知學(xué)的交叉工程學(xué)科,基于科學(xué)的技術(shù)方法創(chuàng)造滿足指定需求的交互系統(tǒng)。工程學(xué)在設(shè)計(jì)中不是取代藝術(shù),而是讓藝術(shù)成為可能。工程學(xué)對建筑來說已經(jīng)夠難了,對互動制品來說更難,原因很簡單,那就是獲取關(guān)于人的科學(xué)比關(guān)于建筑的更難。普遍的方法是通過”可用性測試“,觀察用戶的操作,發(fā)現(xiàn)他們遇到的困難,并通過重新設(shè)計(jì)來修正。可用性測試是有用的、必需的,也是低效的。成果也不如工程學(xué)般能很好的積累起來,而且無法對失敗有深入的洞察。認(rèn)知上等到同于通過烘烤讓用戶去發(fā)現(xiàn)大窗戶的效果(測試窗戶是否可行?)。但可用性測試可以發(fā)現(xiàn)系統(tǒng)的很多缺陷。它是可行的方法,因?yàn)榻换ハ到y(tǒng)的修改通常要比建筑物的重建容易很多。
最好能在一開始就避免許多錯誤,一種方法就是使用設(shè)計(jì)準(zhǔn)則。與其在可用性測試中重復(fù)不斷地發(fā)現(xiàn)紅綠搭配的界面對色盲用戶很不適用,不如設(shè)立準(zhǔn)則,說明顏色使用的注意事項(xiàng)。然而,設(shè)計(jì)準(zhǔn)則也有自身的問題。在實(shí)踐中,設(shè)計(jì)準(zhǔn)則可能模棱兩可,或者需要對環(huán)境做出精細(xì)的解釋,也可能與其它設(shè)計(jì)準(zhǔn)則矛盾。
這本書的想法是將設(shè)計(jì)準(zhǔn)則與其核心的認(rèn)知學(xué)和感知科學(xué)高度統(tǒng)一起來。這樣的形式有幾個好處:與實(shí)際的設(shè)計(jì)聯(lián)系起來使得心理學(xué)變得具體而容易理解,而設(shè)計(jì)準(zhǔn)則因與其深層的基本原理相互關(guān)聯(lián)而更容易在具體環(huán)境中應(yīng)用。

本書作者: Jeff Johson, 施樂 Star系列產(chǎn)品的用戶界面團(tuán)隊(duì)成員,GUI的先驅(qū)。心理學(xué)方面他擁有耶魯大學(xué)和斯坦福大學(xué)的學(xué)位。

Jeff Johson

引言

設(shè)計(jì)準(zhǔn)則的發(fā)展歷史

  • 從開始設(shè)計(jì)交互計(jì)算機(jī)系統(tǒng)以來,就有人嘗試發(fā)表用戶界面設(shè)計(jì)準(zhǔn)則,以推廣良好的設(shè)計(jì)。
  • 早期準(zhǔn)則有:
  • Cheriton(1976)
  • Norman(1983)
  • Smith 和Mosier(1986)
  • Shneiderman(1987)
  • Brown(1988)
  • Nielsen和Molich(1990)
  • Marcus(1991)
  • 21世紀(jì)的:Stone、Koyani、Bailey和Nall,Johnson。像微軟、蘋果、甲骨文、Google等公司都在各自平臺發(fā)布了相應(yīng)的設(shè)計(jì)準(zhǔn)則。

用戶體驗(yàn)設(shè)計(jì)和評估需要理解和經(jīng)驗(yàn)

  • 遵循用戶界面設(shè)計(jì)準(zhǔn)則不像按食譜煮菜一樣按部就班。設(shè)計(jì)準(zhǔn)則經(jīng)常描述的是目標(biāo)而不是操作。它們特意做到極其概括從而具有更廣泛的適用性,但這也意味著,人們對它們準(zhǔn)確的意義和在具體設(shè)計(jì)情境上的適用性經(jīng)常會做出不同的詮釋。
  • 更復(fù)雜的是,對于一個設(shè)計(jì)情境,經(jīng)常會看到很多規(guī)則都適用,或相互沖突的。例如:
  • 屏幕要明亮,又要電池壽命長;
  • 輕便又要堅(jiān)固;
  • 功能多又要容易學(xué)習(xí)
  • 功能強(qiáng)大又要系統(tǒng)簡單;
  • WYSIWYG(所見即所得),又要盲人可用。
  • 要滿足這些設(shè)計(jì)目標(biāo),通常需要權(quán)衡----大量權(quán)衡。
  • 但遺憾的是,用戶界面的準(zhǔn)則通常是以設(shè)計(jì)布告的簡單列表形式提供的,幾乎沒有提供任何理論依據(jù)和背景。這給設(shè)計(jì)和評估時要進(jìn)行詮釋變得困難,用不起來。比如看下面兩個設(shè)計(jì)準(zhǔn)則的對比。

用戶設(shè)計(jì)準(zhǔn)則的比較

Shneiderman & Plasiant (2009)Nielsen & Molich (1990)
  • 像預(yù)防錯誤 與錯誤預(yù)防; 允許容易的操作反轉(zhuǎn) VS幫助用戶識別…;讓用戶覺得他們在掌控 VS 用戶的控制與自由
  • 對比會發(fā)現(xiàn)如果忽略在措辭、強(qiáng)調(diào)點(diǎn)以及撰寫時計(jì)算機(jī)技術(shù)狀態(tài)的不同之后,所有這些用戶界面設(shè)計(jì)準(zhǔn)則是很相似的,這是為什么?

設(shè)計(jì)準(zhǔn)則從何而來

  • 答案在于,所有設(shè)計(jì)準(zhǔn)則都是基于人類心理學(xué):人們?nèi)绾胃兄W(xué)習(xí)、推理、記憶,以及把意圖轉(zhuǎn)換為行動。
  • 例如,Don Norman在從事人機(jī)交互前就是心理學(xué)領(lǐng)域的一名教授。 Norman -
    早期的人機(jī)設(shè)計(jì)準(zhǔn)則就基于他本人和他人在人類認(rèn)知方面的研究。他特別關(guān)注的是人們經(jīng)常犯的認(rèn)知性錯誤,以及計(jì)算機(jī)系統(tǒng)如何減少或消除這些錯誤造成的影響。
  • 說到底,用戶界面設(shè)計(jì)準(zhǔn)則是以人類心理學(xué)為基礎(chǔ)的。 學(xué)習(xí)本書我們主要來看看這些準(zhǔn)則背后的心理學(xué)知識。

書結(jié)構(gòu):

第一章: 我們感知自己的期望
經(jīng)驗(yàn)影響感知
環(huán)境影響感知
目標(biāo)影響感知
對設(shè)計(jì)意味著什么

第二章:為觀察結(jié)構(gòu)優(yōu)化我們的視覺
格式塔原理:接近性
格式塔原理:相似性
格式塔原理:連續(xù)性
格式塔原理:封閉性
格式塔原理:對稱性
格式塔原理:主體/背景
格式塔原理:共同命運(yùn)
將格式塔原理綜合起來

第三章:我們尋找和使用視覺結(jié)構(gòu)
結(jié)構(gòu)提高 了用戶瀏覽長數(shù)字的能力
數(shù)據(jù)專用控件提供了更多的結(jié)構(gòu)
視覺層次讓人專注于相關(guān)的信息

第四章:閱讀不是自然的
我們的大腦是為語言而不是為閱讀設(shè)計(jì)的
閱讀是特征驅(qū)動還是語境驅(qū)動
熟練閱讀和不熟練閱讀使用大腦的不同部位
糟糕的信息設(shè)計(jì)會影響閱讀
軟件里要求的閱讀很多是不必要的
對真實(shí)用戶測試

第五章:色覺是有限的
色覺是如何工作的
視覺是為邊緣反差而不是為亮度優(yōu)化的
區(qū)別顏色的能力取決于顏色是如何呈現(xiàn)的
色盲
影響色彩區(qū)分能力的外部因素
使用色彩的準(zhǔn)則

第六章:我們的邊界視力很糟糕
中央凹的分辨率與邊界視野的分辨率比較
邊界視覺有什么用
電腦用戶界面中的例子
讓信息可見的常用方法
讓用戶注意到信息的重武器:請小心使用

第七章:我們的注意力有限,記憶力也不完美
短期與長期記憶
對記憶的一種現(xiàn)代觀點(diǎn)
短期記憶的特點(diǎn)
短期記憶的特點(diǎn)對用戶界面設(shè)計(jì)的影響
長期記憶的特點(diǎn)
長期記憶的特點(diǎn)對用戶界面設(shè)計(jì)的影響

第八章:注意力對思考以及行動的限制
模式一:我們專注于目標(biāo)而很少注意使用的工具
模式二:我們使用外部幫助來記錄正在做的事情
模式三:我們跟著信息“氣味”靠近目標(biāo)
模式四:我們偏好熟悉的路徑
模式五:我們的思考周期:目標(biāo)、執(zhí)行、評估
模式六:完成任務(wù)的主要目標(biāo)之后,我們經(jīng)常忘記做收尾工作

第九章:識別容易,回憶很難
認(rèn)識容易
回憶很難
識別與回憶對用戶界面設(shè)計(jì)的影響

第十章:從經(jīng)驗(yàn)中學(xué)習(xí)與學(xué)后付諸實(shí)踐容易,解決問題和計(jì)算很難
我們有三個大腦
從經(jīng)驗(yàn)中學(xué)習(xí)(通常)是容易的
操作已經(jīng)學(xué)會的動作是容易的
解決問題和計(jì)算是困難的
在用戶界面設(shè)計(jì)上的影響

第十一章:許多因素影響學(xué)習(xí)
當(dāng)操作專注于任務(wù)、簡單和一致時,我們學(xué)得更快
當(dāng)詞匯專注于任務(wù)、熟悉和一致時,我們學(xué)得更快
風(fēng)險(xiǎn)低的時候我們學(xué)得快

第十二章:我們有時間要求
響應(yīng)度的定義
人類大腦的許多時間常量
時間常數(shù)的工程近似法:數(shù)量級
為滿足實(shí)時交互的設(shè)計(jì)
達(dá)到高響應(yīng)度交互系統(tǒng)的另外一些指導(dǎo)原則
實(shí)現(xiàn)高響應(yīng)度是重要的。

附錄 著名的用戶界面設(shè)計(jì)準(zhǔn)則。

我們感知自己的期望

我們對周圍世界的感知不是對真實(shí)的描述。我們感知到的很大程度上是我們期望感知到的。有以下三個因素影響我們的預(yù)期,也因此影響我們的感知。

  • 過去 我們的經(jīng)驗(yàn)。
  • 現(xiàn)在 當(dāng)前的環(huán)境。
  • 將來 我們的目標(biāo)。

1、經(jīng)驗(yàn)影響感知

你看到什么取決于告訴你什么?

想像一下你擁有一家大型公司,并將與一位房產(chǎn)經(jīng)理開會討論公司的新園區(qū)的建設(shè)方案。園區(qū)有五座建筑排成一排,后兩座有給自助餐廳和健身中心采光的T字型庭院。如果這位經(jīng)理向你展示下圖,你就會看到代表這些建筑物的五個圖塊。


你看到什么取決于告訴你什么

現(xiàn)在想像一下與你見面的不是房產(chǎn)經(jīng)理,而是廣告經(jīng)理,討論的是在全國某些市場發(fā)布的廣告牌。廣告經(jīng)理給你看的也是上圖,但這次是廣告牌的略圖,由一個單詞構(gòu)成。這次,你清晰無誤地看到了一個單詞“LIFE”。

當(dāng)感知系統(tǒng)預(yù)先準(zhǔn)備看的是建筑物的形狀時,你就看到了建筑物的形狀,幾乎察覺不到建筑物之間的白色區(qū)域。當(dāng)感知系統(tǒng)預(yù)先準(zhǔn)備看文字時,你就看到了文字,幾乎注意不到字母間的黑色區(qū)域。

先入為主能夠影響感知。

再看下面的一個素描,你看到了什么?很多人對它的第一印象是隨手潑出的黑點(diǎn)。


先入為主能夠影響感知

只有在告訴你這是一只在樹附近嗅著地面的斑點(diǎn)狗后,你的視覺系統(tǒng)才會把影像組成一幅完整的畫面。不僅如此,一旦你“看到了”這只狗,就很難再回頭把這張素描看成是隨機(jī)無序的點(diǎn)。

除了以上視覺的例子外。 經(jīng)驗(yàn)也影響其它類型的感知,如對語句的理解。 例如,在之前聽說過疫苗污染事故的人與最近聽說過利用疫苗成功對抗疾病的人,當(dāng)他們今天聽到“新疫苗含有狂犬病毒”這個標(biāo)題的信息或許就有同的理解。

計(jì)算機(jī)軟件和網(wǎng)站的用戶經(jīng)常不認(rèn)真看屏幕就點(diǎn)擊按鈕或鏈接。他們更多靠以往的經(jīng)驗(yàn)來引導(dǎo)他們對界面的感知,而不是看清屏幕上的實(shí)際內(nèi)容。有時這會讓軟件設(shè)計(jì)者感到挫敗,他們總以為用戶會去看屏幕上有什么。但感知并非如此運(yùn)作。

前幾頁上布置一致的按鈕麻痹了他們的視覺系統(tǒng)。甚至無心地返回了幾次之后,他們可能仍然覺察不到在哪里。這就是為什么“控件的擺放要一致”是一個常見的用戶界面設(shè)計(jì)準(zhǔn)則。

類似地,在尋找某件東西時,如果它不在老地方或看起來與往常不同,即使就在眼皮底下我們也可能視而不見。這就是因?yàn)榻?jīng)驗(yàn)調(diào)整我們到期望的地方依據(jù)期望的特征去尋找。

2、環(huán)境影響感知

當(dāng)我們試圖去理解視覺如何工作時,很容易認(rèn)為它是一個自下而上的過程,將邊、線條、角度、弧線和紋路等基本要素組成圖案并最后形成有意義的事物。 以閱讀為例,你可能假設(shè)我們的視覺系統(tǒng)首先識別字母,把它們組合成單詞,再將單詞組合成句子,如此繼續(xù)。
但視覺感知,尤其是閱讀,不完全是一下自下而上的過程,其中也有自上而下的作用。

同樣的字符受其附近的字母的影響而被感覺成H或A

周圍環(huán)境對感知的影響也同樣存在于不同的感官之間。五個感官任何之一的感知都可能同時影響其它感官的感知。例如:

  • 我們聽到的能影響我們看到的,反之亦然;
  • 我們聽到、看到或者聞到的能影響我們的觸覺。

3、目標(biāo)影響感知

工具箱:這里有剪刀嗎?

你發(fā)現(xiàn)剪刀了嗎?現(xiàn)在不去看工具箱,你能說出來那里面有沒有螺絲刀嗎?
我們的目標(biāo)會過濾我們的感知,與目標(biāo)無關(guān)的東西會被提前過濾掉,而不會進(jìn)入到意識層面。
一次只做一件事背后的原理,也是基于我們對目標(biāo)的感知,會過濾到其它東西,即使這些東西存在也會被大腦忽視掉,那與其會被忽視掉那還不如不出現(xiàn)。
當(dāng)前的目標(biāo)影響我們的感知的機(jī)理有兩個:

  • 影響我們注意什么, 感知是主動的,不是被動的。 我們始終移動的眼睛、耳朵、手等去尋找周圍與我們正在做或者正要做的事最相關(guān)的東西。如果我們在一個網(wǎng)站上找園區(qū)地圖,那些能夠引導(dǎo)我們?nèi)ネ瓿赡繕?biāo)的對象就會吸引我們的眼睛和控制鼠標(biāo)的手。我們會或多或少地忽略掉與目標(biāo)無關(guān)的東西。
  • 使我們的感知系統(tǒng)對某些特性敏感, 當(dāng)我們在尋找某件物品時,大腦能預(yù)先啟動我們的感官,使得它們對要尋找的東西變得非常敏感。例如,要在一個大型停車場找一輛紅色轎車時,紅顏色的車會在我們掃描場地時躍然而出,而其它顏色的車就幾乎不會被注意到,即使我們的確“看到”了它們。類似地,當(dāng)我們試圖在一個黑暗擁擠的房間里尋找自己的伴侶時,大腦會對我們的聽覺系統(tǒng)進(jìn)行“編程”,從而對她或他的聲音的頻率組合非常敏感。

4、對設(shè)計(jì)意味著什么

這些感知的影響因素對于用戶界面設(shè)計(jì)有以下三點(diǎn)啟發(fā)。

  • 避免歧義
    避免顯示有歧義的信息,并通過測試確認(rèn)所有用戶對信息的理解是一致的。當(dāng)無法消除歧義時,要么依靠標(biāo)準(zhǔn)或慣例,要么告知用戶用你期望的方式去理解歧義之處。
    例如,電腦上的顯示經(jīng)常將按鈕和文本輸入框渲染成看起來高于背景面(下圖)。這種顯示方式依賴一個大多數(shù)有經(jīng)驗(yàn)的用戶都熟悉的慣例——光源在屏幕的左上角。如果以其它位置的光源來渲染按鈕,用戶是無法看出它凸起的。
  • 保持一致
    在一致的位置擺放信息和控件。不同頁面上提供的相同功能的控件和數(shù)據(jù)顯示應(yīng)該擺放在每一頁上相同的位置,而且它們還應(yīng)該有相同的顏色、字體和陰影等。這樣的一致性能讓用戶很快找到和識別它們。
  • 理解目標(biāo)
    用戶去用一個系統(tǒng)是有目標(biāo)的。設(shè)計(jì)者應(yīng)該了解這些目標(biāo),要認(rèn)識到不同用戶的目標(biāo)可能不同,而且他們的目標(biāo)強(qiáng)烈左右他們能感知到什么。在一次交互的每個點(diǎn),確保提供了用戶需要的信息,并非常清晰地對應(yīng)到一個可能的用戶目標(biāo),使用戶能夠注意到并使用這些信息。

為觀察結(jié)構(gòu)優(yōu)化我們的視覺

Gestalttheorie

格式塔學(xué)派(德語:Gestalttheorie)是心理學(xué)的重要流派之一,是德文Gestalt的譯音,意即”模式、形狀、形式“等,意思是指”動態(tài)的整體(dynamic wholes)“。興起于20世紀(jì)初的德國,又稱為完形心理學(xué)。由馬科斯·韋特墨(1880-1943)、沃爾夫?qū)た晾眨ā?87-·967)和科特·考夫卡(·886-·94·)三位德國心理學(xué)家在研究似動現(xiàn)象的基礎(chǔ)上創(chuàng)立。似動現(xiàn)象(phi phenomenon)也就是燈光在快速的切換狀態(tài)下,當(dāng)速度快到介于30-60毫秒之間,會產(chǎn)生動態(tài)的移動的錯覺。參考影片(要翻墻)
格式塔主張人腦的運(yùn)作原理是整體的,”整體不同于其部件的總和“。例如,我們對一朵花的感知,并非純粹單單從對花的形狀、顏色、大小等感官資訊而來,還包括我們對花過去的經(jīng)驗(yàn)和印象,加起來才是我們對一朵花的感知。
格式塔體系的關(guān)鍵特征是整體性、具體化、組織性和恒常性。這四個是人類視覺的基礎(chǔ)特性,是我們視覺的一種慣性,是天生或進(jìn)化而來的。

1.整體性(Emergence)
當(dāng)我們要去分辨一個物體時,我們的眼睛試圖去找輪廓,然后去比較對過去腦中的記憶,快速分辨出物體,這就是人類視覺的整體性。比如上圖的狗的圖片,對狗的認(rèn)知并不是首先確定它的各部分(腳、耳朵、鼻子、尾巴等等),然后從這些組成部分來推斷這是一條狗的。
2.具體化(Reification)
當(dāng)我們的視覺感受到刺激,同時也會對外部環(huán)境空間訊息產(chǎn)生解讀,我們的腦袋會試圖把這些缺口補(bǔ)全,這些是知覺的”建設(shè)性“或”生成性的“經(jīng)驗(yàn)。下圖中的A,許多人會看到白色的三角型,但其實(shí)這個三角型并不存在,而是我們腦袋自己將失去的訊息給填補(bǔ)起來的。圖C可以被視為三維球體,事實(shí)上也沒有畫三維球體。

3.組織性(Multistability)
趨勢模糊知覺經(jīng)驗(yàn),不穩(wěn)定地在兩個或兩個以上不兩只解釋之間往返。但我們卻無法同時看到兩種以上的解釋方式。如下圖的”魯賓圖“


4.恒常性(Invariance)
我們視覺的最大優(yōu)勢就是恒長性,不管物體如何變形、旋轉(zhuǎn)、放大、縮小,我們都能夠透過他的輪廓或特征來判斷這個物體。如下圖中像是搖桿的物體,任憑它如何的改變呈現(xiàn)的方式,我們的眼睛還是能夠從圖片中找出相同或是不同的物體。


摘自Creativemarket的文章很好的總結(jié)了這一章的內(nèi)容。

參考資料:
介面設(shè)計(jì)Prototyping 淺入淺出
場論與格式塔
美學(xué)導(dǎo)論
格式塔學(xué)派
The Designer's Guide to Gestalt Psychology

我們用眼睛來掃描

本章的重點(diǎn)講到為人的“掃描”而進(jìn)行結(jié)構(gòu)化和精煉,可以幫助人們更容易地掃描和理解。
1.長數(shù)字通過結(jié)構(gòu)化可以提高用戶瀏覽的能力
2.使用數(shù)據(jù)專用的控件
3.通過,信息分段、顯著標(biāo)記每個信息段和子段的關(guān)鍵詞等建立視覺層次
4.以同一個邏輯結(jié)構(gòu)來展示各段和子段,來使得閱讀理解容易

閱讀不是自然的

閱讀的特征

說話和理解口頭語言是一個自然的人類活動,但閱讀不是。寫作與閱讀直到公元前幾千年前才出現(xiàn),而且到了四五百年前才普及起來,遠(yuǎn)遠(yuǎn)遲于人腦達(dá)到現(xiàn)代進(jìn)化水平。閱讀是一種人造的、通過系統(tǒng)的指導(dǎo)和訓(xùn)練獲得的能力,就像拉小提琴、讀樂譜一樣。有很多的人有閱讀讀障礙(知覺或感覺障礙)。學(xué)習(xí)閱讀是訓(xùn)練我們的大腦(包括視覺系統(tǒng))去識別模式。大腦要學(xué)習(xí)識別的這些模式有一個從低到高的層次。
閱讀涉及識別特征和模式。模式識別可以是自下而上、特征驅(qū)動的過程,也可以是自上而下的、語境驅(qū)動過程。
特征驅(qū)動指從刺激本身的特征出發(fā),引導(dǎo)知覺客體。大腦天生具有識別線、邊和角等基本特征的能力。單個字母到單個字,到單詞到句子逐個識別。這個可以變成無意識,但只是認(rèn)識了字,而可能不懂其意思。 經(jīng)常看了半天,讀得很大聲,卻不知道是什么意思
語境驅(qū)動是根據(jù)頭中已有的知識、經(jīng)驗(yàn)或者期待引導(dǎo)我們對客體的知覺。我腦中已經(jīng)有一些概念或熟悉的知識或大概整體曾經(jīng)有看過類似的,從整體概念再和句子相結(jié)合的識別。這個無法變成無意識,需要和自己的主觀意識想結(jié)合。能用自己的話把意思轉(zhuǎn)義出來。但可能不是原文的所有詞句。
特征驅(qū)動的閱讀,費(fèi)時慢,專注力都在識別特征上,而沒有更多精力構(gòu)建語句和段落的含義。這種情況經(jīng)常在讀一些不熟悉的文章或?qū)I(yè)術(shù)語多的、或不熟悉的語言上。

影響閱讀的信息設(shè)計(jì)

1.使用不常見的和不熟悉的詞匯
2.難以辨認(rèn)的書寫和字型
3.微小的字體
4.復(fù)雜雜亂的背景上的文字
5.信息被重復(fù)的內(nèi)容淹沒
6.居中對齊的文字
7.軟件操作很多要求的閱讀是不必要的

啟示:盡量不要讓人們閱讀

色覺是有限的

** 人類的色彩感知是有限制的**
1.我們的視覺是為檢測反差(邊緣)優(yōu)化的,而不是絕對亮度
2.我們辨別顏色的能力依賴于顏色是如何呈現(xiàn)的
3.有些人是色盲
4.用戶的屏幕和觀看條件會影響對顏色的感知

** 使用色彩的準(zhǔn)則**
1.用飽和度、亮度以及色相來區(qū)分顏色。避免采用輕微的差別,但也不能直接上反色
2.使用獨(dú)特的顏色(只用一個主色)
3.避免使用色盲的人無法區(qū)分的顏色。深色背景下不可用深紅色、藍(lán)色和紫色。可以到vischeck.com查看
4.在顏色之外使用其它提示
5.將強(qiáng)烈的對抗色分開。

我們的邊界視圖很糟糕

為什么處于人們邊界視野中的暗色的靜止物體經(jīng)常不被注意到;邊界視線中物體的運(yùn)動通常會被察覺呢。

1.人類視野的空間分辨率從中央向邊緣銳減。

每只眼睛大約有600萬視網(wǎng)膜視椎細(xì)胞,它們在視野的中央(一個很小的叫做中央凹的區(qū)域)分而得比在邊緣緊密得多。中央凹僅點(diǎn)視網(wǎng)膜的1%,而大腦的視覺皮層卻有50%的區(qū)域用于接受中央凹的輸入。中央凹的視椎細(xì)胞與視覺信息處理和傳導(dǎo)的起點(diǎn)(神經(jīng)節(jié)細(xì)胞)的連接比是1:1,而在視網(wǎng)膜其余地方,多個光感受細(xì)胞才與一個神經(jīng)節(jié)細(xì)胞相連。因此邊界視覺的信息在被傳到大腦之前是經(jīng)壓縮的(數(shù)據(jù)有損)。

2.眼睛以大約每秒三次的速度不斷的快速移動

選擇性地將焦點(diǎn)投射在周圍的環(huán)境物體上。大腦則用粗曠的、印象派的方式,基于我們所知所期待的,填充視野的其他部分。大腦無需為我們四周的環(huán)境保持一個高分辨率的心理模型,因?yàn)樗苊钛劬υ谛枰臅r候采樣和重新采樣具體細(xì)節(jié)。

3.邊界視覺的作用

a.眼睛不是隨機(jī)掃描環(huán)境的,眼動是為了使中央?yún)^(qū)關(guān)注重要的東西,視野周邊的模糊線索提供了線索,幫助大腦計(jì)劃往哪里移動
b.邊界視覺可以很好地察覺運(yùn)動。這是因?yàn)橄茸婢哂邪l(fā)出食物和躲避掠食者的能力而生存下來的。

讓錯誤信息可見的常用方法

1.放在用戶所看的位置上
2.標(biāo)記出錯誤
3.使用錯誤符號
4.保留紅色以呈現(xiàn)錯誤(特定場合不一定適合)

讓用戶注意到

1.彈出式對話框
2.使用聲音
3.閃爍或者短暫的晃動

我們的注意力有限,記憶力也不完美

長期與短期記憶的特點(diǎn)

長期記憶:存儲量大,但容易出錯、印象派、異質(zhì)、可回溯修改和影響。

  • 感覺通過五感系統(tǒng)進(jìn)入大腦負(fù)責(zé)相關(guān)感官的區(qū)域并觸發(fā)其反應(yīng),然后散播到大腦其它不與任何具體感覺通道相關(guān)的部分。大腦與具體感覺將這些察覺的簡單特征信號整合起來,來檢測輸入的高層特征。
  • 感覺能影響到的神經(jīng)無很大程度上由其特征和環(huán)境決定。同樣是狗的聲音,走在路上和坐在小區(qū)里聽是不同的。
  • 感覺所產(chǎn)生的最初強(qiáng)度取決于大腦其他部分對它的放大或者抑制程度。所有感覺都會產(chǎn)生某種痕跡,但有些微弱到幾乎無法察覺
  • 記憶的形成由參與某個神經(jīng)活動模式的神經(jīng)元上長期甚至永久的變化組成,這使得該模式在將來容易被再次激活。
  • 激活記憶是再次激活與記憶產(chǎn)生時同樣的神經(jīng)活動模式。
  • 一個神經(jīng)記憶的模式越經(jīng)常被再次激活,就變得越”強(qiáng)烈“,也就是越容易激活它。
  • 某個記憶不是被鎖定在大腦的某個特定的地方。

短期記憶:容量低不穩(wěn)定

  • 短期記憶不是存儲(不是記憶和感覺被處理的地方)。短期記憶是感覺和注意現(xiàn)象的組合。
  • 我們的每一個感官都有非常短暫的短期”記憶“,那是感官刺激后殘留的神經(jīng)活動導(dǎo)致的,就像鈴鐺被敲擊后的余音。這些感官特異性的殘留感覺共同組成了短期記憶的一小部分。
  • 我們的注意機(jī)制還可以接收通過識別和回憶而再次激活的長期記憶。
  • 短期記憶里的信息數(shù)量極端有限和不穩(wěn)定。
  • 短期記憶等于注意的焦點(diǎn),即任何時刻我們意識中專注的任何事物。

Miller 神奇數(shù)字 七加減二

George Miller 于1956年提出的人類短期記憶能夠同時記住互相不相關(guān)的東西的數(shù)據(jù)限制 7±2。
1.短期記憶的東西是什么?
它們是當(dāng)前的感覺和獲取到的記憶。它們是目標(biāo)、數(shù)字、單詞、名字、聲音、圖像、味道等。任何人能夠意識到的東西。
2.為什么這些東西必須互不相關(guān)?
因?yàn)槿绻麅蓚€東西有關(guān)聯(lián),就對應(yīng)到一個大的神經(jīng)活動模式,即同一組特征,因此也就是一個東西。
3.為什么有這個不準(zhǔn)確的加二或減二?
因?yàn)榇嬖趥€體記憶的差異。

** Broadbent,1975 實(shí)驗(yàn)后更新了這個數(shù)字。 因?yàn)樗膫€加減一,也就是三到五個。**

由注意力的限制和短期記憶造成的六種模式

  • 我們專注于目標(biāo)而很少注意使用的工具
  • 我們使用外部幫助來記錄正在做的事情
  • 我們跟著信息”氣味“靠近目標(biāo)
  • 我們偏好熟悉的路徑
  • 我們的思考周期:目標(biāo),執(zhí)行,評估
  • 完成任務(wù)的主要目標(biāo)之后,我們經(jīng)常忘記做收尾工作

長期記憶:識別容易,回憶很難

識別與回憶對用戶界面設(shè)計(jì)的影響

看到和選擇比回憶和輸入更容易

盡可能使用圖像來表達(dá)功能

  • 使用縮略圖來緊湊地描繪全盡寸的圖像(PPT的小圖或?yàn)g覽器的最近打開的縮略圖)
  • 越多人使用的功能,應(yīng)該越可見
  • 使用視覺提示讓用戶知道他們所處的位置
  • 讓認(rèn)證信息容易回憶

從經(jīng)驗(yàn)中學(xué)習(xí)與學(xué)后付諸實(shí)踐容易,解決問題和計(jì)算很難

  • 從經(jīng)驗(yàn)中學(xué)習(xí)(通常)是容易的
  • 操作已經(jīng)學(xué)會的動作是容易的
  • 解決技術(shù)問題需要對技術(shù)感興趣并經(jīng)受訓(xùn)練

怎樣可以讓交互系統(tǒng)學(xué)習(xí)得快

我們大腦執(zhí)行熟練掌握的活動所采用的”自動“方式,與我們用來解決新問題和計(jì)算所使用的高度受控的方式。無意識的方式消費(fèi)很少的甚至不消耗短期記憶(注意力)資源,并且能夠與其它活動同時進(jìn)行。而受控的方式對短期記憶有著很高的要求并且無法并行處理。(Schneider & Shiffrin, 1977)。

操作是專注于任務(wù)、簡單和一致的

認(rèn)知心理學(xué)家把用戶想要的工具和工具所能提供的操作之間差距稱為”執(zhí)行的鴻溝“。一個工具提供的操作與用戶想要做的之間的鴻溝越小,用戶就越不需要去考慮工具本身,而能更專注于他們的任務(wù)。因此,這個工具也就能更快地”自動化“了。

要使設(shè)計(jì)的軟件、服務(wù)和設(shè)備提供與用戶目標(biāo)和任務(wù)匹配的操作,設(shè)計(jì)者必須很徹底地了解用戶目標(biāo),和工具所要支持的任務(wù)。必須做到以下三步:
1.做任務(wù)分析
2.設(shè)計(jì)一個專注于任務(wù)的概念模型,其中主要包含對象-操作分析
3.嚴(yán)格按照任務(wù)分析和概念模型設(shè)計(jì)用戶界面

好的任務(wù)分析Check問題:

  • 用戶在使用這個應(yīng)用時想要實(shí)現(xiàn)什么目的?
  • 應(yīng)用想支持哪些人群的任務(wù)?
  • 哪些任務(wù)是常見的,哪些是少見的?
  • 哪些任務(wù)是最重要的,哪些又是不重要的?
  • 每個任務(wù)的步驟是什么?
  • 每個任務(wù)的結(jié)果和輸出是什么?
  • 每個任務(wù)所需的信息從哪來?
  • 每個任務(wù)結(jié)果的信息該怎么利用?
  • 什么人做什么任務(wù)?
  • 每個任務(wù)該使用哪些工具?
  • 在執(zhí)行各個任務(wù)時,人們會遇到什么問題?什么樣的錯誤是常見的?是什么造成這些錯誤?錯誤造成的損害會有多嚴(yán)重?
  • 人們在執(zhí)行這些任務(wù)時都使用什么樣的詞匯?
  • 要執(zhí)行這些任務(wù),人們必須如何溝通?
  • 不同的任務(wù)之間是如何聯(lián)系的?

對象-動作分析

概念模型中最重要的就是對象-動作分析。它指定了該應(yīng)用展現(xiàn)給用戶的所有概念對象、用戶對這些對象所能做的動作、各類對象的屬性(用戶可見的設(shè)置參數(shù))以及對象之間的關(guān)系。

盡可能簡單

如優(yōu)先級能用(高、低)就不要(1-10級);”用戶萬一需要的功能“除非有跡象表明會有很多潛在客戶或者用戶需要它,否則一定要堅(jiān)決抵制。因?yàn)槎嗫紤]一種可能性,軟件的復(fù)雜和學(xué)習(xí)都成倍增的關(guān)系。

一致性

交互系統(tǒng)可以在至少兩個層面上討論一致性:概念層面和按鍵層面。概念層面的一致性是由對象、操作和概念模型的屬笥之間的映射決定的。系統(tǒng)中的對象是否都有同類的操作和屬性? 按鍵層面的一致性是由概念上的操作與現(xiàn)實(shí)中執(zhí)行操作所需要的實(shí)際動作之間的映射決定的。

對象-操作矩陣

用一個由對象和操作組成的矩陣來展示概念模型。
小且緊湊的矩陣表明對應(yīng)的設(shè)計(jì)是容易學(xué)習(xí)的:對象較少,操作較少,而且對每種類型的對象的操作都是一樣的。


對象-操作矩陣
按鍵的一致性

詞匯是專注于任務(wù)、熟悉和一致的

  • 詞匯就是專注于任務(wù)的
  • 詞匯應(yīng)該是熟悉的
  • 專業(yè)詞匯應(yīng)保持一致
  • 低風(fēng)險(xiǎn)

我們有時間要求

無法與用戶的時間要求很好地同步的系統(tǒng)不能成為有效的工具,并會被用戶認(rèn)為是反應(yīng)不靈敏 。
一個交互系統(tǒng)的響應(yīng)度,即能否跟上用戶,及時告知他們當(dāng)前狀態(tài),而不讓他們故等,是決定用戶滿意度的最重要因素。這要比容易學(xué)習(xí)或容易使用更重要。

響應(yīng)度的定義

響應(yīng)度與性能相關(guān),但又不一樣。性能是以單位時間里的計(jì)算次數(shù)來衡量的,響應(yīng)度是以服從用戶在時間上的要求及用戶滿意度來衡量的。高響應(yīng)度不一定是高性能。

響應(yīng)的優(yōu)先順序

  • 立刻告知已經(jīng)接收到你的輸入
  • 對操作需要多長時間完成提供一定的指示
  • 在等待時允許你去做其他事情
  • 能夠智能地管理事件隊(duì)列
  • 將系統(tǒng)內(nèi)部管理和低優(yōu)先級的任務(wù)放在后臺運(yùn)行
  • 對最常見的用戶請求做出預(yù)期

糟糕的響應(yīng)度例子

  • 按下按鈕、滑動滾動條或者操作某個對象的反饋遲緩
  • 耗時的操作阻斷其他活支,還不能取消
  • 對長時間運(yùn)行的操作需要多長時間不提供任何線索
  • 斷斷續(xù)續(xù)難以理解的動畫效果
  • 執(zhí)行用戶沒有請求的系統(tǒng)后臺任務(wù)而忽略用戶輸入

人類大腦的許多時間常量

  • 聲音中我們所能察覺到的最短沉默間隔:1ms
  • 可見且能對我們產(chǎn)生影響(或許是無意識的)的視覺刺激的最短時長:5ms
  • 對危險(xiǎn)的非自主的運(yùn)動反應(yīng)的速度:80ms
  • 一個視覺事件與我們對它完整感知之間的時間差:100ms
  • 可使我們感覺一個事件產(chǎn)生另一個事件的連續(xù)事件之間最長的時間間隔:140ms
  • 從感覺上判斷視野中4~5個物體的時間:200ms
  • 事件進(jìn)入意識的編輯”窗口“:200ms
  • 視覺運(yùn)動反應(yīng)時間(對非預(yù)期事件的有目的的反應(yīng)):700ms
我們大腦需要多長時間來反應(yīng)

滿足實(shí)時交互的設(shè)計(jì)

人機(jī)交互的時間底線

達(dá)到高響應(yīng)速度的另一些指導(dǎo)原則

  • 使用忙碌標(biāo)識
  • 使用用戶進(jìn)度指示
  • 先顯示重要的信息,先顯示整體輪廓
  • 提前處理
  • 根據(jù)用戶輸入的優(yōu)先級而不是輸入的順序來處理
  • 監(jiān)控時間承諾
  • 提供即時反饋

感謝Jeff Johson的書,進(jìn)一步理解了設(shè)計(jì)背后的聯(lián)系。有了更新的視角來看待設(shè)計(jì)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,431評論 2 378

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