互聯(lián)網(wǎng)產(chǎn)品之交互設計

2 評論 14349 瀏覽 97 收藏 28 分鐘

每天,人們無時無刻不在使用電子設備打電話、發(fā)消息、玩游戲、發(fā)送Email、錄制視頻、聽音樂?;ヂ?lián)網(wǎng)將這一切變得是如此的輕而易舉。全世界優(yōu)秀的工程師們讓這些成為現(xiàn)實,而交互設計會讓這些事情變得易用、可用和有趣。

什么是交互設計

交互設計(英文Interaction Design, 縮寫IXD),是定義、設計人造系統(tǒng)的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。(來自百度百科)

對于當下的互聯(lián)網(wǎng)產(chǎn)品,交互設計使互聯(lián)網(wǎng)技術變得有用、可用并且樂于被大家使用。這也正是交互設計在軟件和互聯(lián)網(wǎng)領域得到迅速發(fā)展的原因。交互設計師將工程師產(chǎn)出的原材料塑造成人們喜歡的產(chǎn)品。隨著互聯(lián)網(wǎng)的成熟,創(chuàng)建和驅動它的技術也逐漸成熟,互聯(lián)網(wǎng)變得不僅可以提供內容,更可以用它來做事。

在移動設備上通過無線網(wǎng)絡訪問互聯(lián)網(wǎng),也改變了我們傳統(tǒng)的交互地點和方式。iPhone當年的出現(xiàn)開創(chuàng)了交互設計的新時代。

常用的交互設計方法

以用戶為中心的設計

簡單地說,以用戶為中心的設計過程就是讓用戶數(shù)據(jù)貫穿著整個項目,用戶數(shù)據(jù)是設計決策的決定性因素。在最佳的UCD方法中,項目的每個階段都要引入用戶,當不知道產(chǎn)品該如何做時,用戶的期望和需求就會幫助我們確定答案。例如,如果在為電商網(wǎng)站所做的用戶研究中,用戶說他們希望將購物車的圖標放在網(wǎng)頁的右上角,那么在最終設計防止購物車的位置時,最有可能就放在那個地方。

右上角的購物車入口

UCD中的目標非常重要,設計師需要關注用戶最終想要完成什么,然后去定義完成目標的任務和方式,并且在整個設計過程中始終牢記用戶的需求和期望。但是,用戶的長期目標是很難把握和定義的,或者說這些目標很模糊,幾乎不可能為它們展開設計。UCD最擅長的是讓設計師從自己的偏好轉向用戶的的需求和目標,所以,在UCD的設計流程中,要牢記“你不是用戶”這一真理。

以活動為中心的設計

以活動為中心的設計不關注用戶目標和偏好,主要針對特定任務的行為展開設計。這里的活動指的是:完成某一意圖的一系列決策和動作。活動可以單獨進行也可能與他人協(xié)作,例如,從ATM取款機取錢的任務結束標志 — 取到錢;上網(wǎng)購物的任務結束標志 — 買到物品等。而另一些活動,例如聽音樂,就沒有固定的結束標志。

今天我們的很多互聯(lián)網(wǎng)產(chǎn)品都來自于以活動為中心的設計,特別是一些功能性的應用或者軟件。以活動為中心的設計允許交互設計師密切關注手中的工作并創(chuàng)建對任務的支持,不用去針對一些遙遠的目標。此方法適用于具有復雜任務或者大量形態(tài)各異用戶群體的產(chǎn)品。

活動不同于任務,活動是由動作和決策組成。任務的意圖是為了從事活動。在活動的生命周期里,包括很多的任務,每個任務會對應不同的小時間段。在每一個時間段中,交互設計師都會為不同的任務進行設計。舉一個例子來說明下活動與任務的關系,例如撥打電話是一個要完成的活動,查找電話號碼就會使其中的一個任務,查找電話號碼的方式又有很多不同:翻電子電話簿、通過查號服務幫助、查看手寫電話簿等等,每一個方式本身就是不同的任務。請問現(xiàn)在的你,查找電話號碼是任務還是活動呢?

對于設計師來說,活動與任務細小的差異只是學術上的意義,無論叫法是什么,設計都需要動手。方法與UCD類似,設計師觀察并訪談用戶,羅列出用戶的活動與任務,也許還需要補充一些丟失的任務,然后設計出解決方案,以幫助用戶完成任務。

系統(tǒng)設計

系統(tǒng)設計利用組件的既定安排來創(chuàng)建設計方案。系統(tǒng)是一系列相互作用的實體,它可以很簡單(例如家中的供水系統(tǒng))也可以很復雜(整個城市規(guī)劃系統(tǒng))。系統(tǒng)設計關注的是整個使用場景,而不是單個的對象和設備。

系統(tǒng)設計規(guī)劃出一個系統(tǒng)應該包括的所有組件,設計師的任務就是設計出這些組件。系統(tǒng)設計為設計師提供了一幅清晰的路線圖。如下圖:

圖中的系統(tǒng)組件過于抽象,舉個簡單的例子。比如我們熟悉的360安全衛(wèi)士,它的目標:保護電腦安全,這個目標就是它的系統(tǒng)目標;環(huán)境:所有的操作系統(tǒng);傳感器:系統(tǒng)安全檢測功能,可以檢測電腦是否有病毒入侵;擾動:指的是改變,這里指有病毒或者木馬入侵;比較器:進行當前狀態(tài)和理想狀態(tài)的比較,并且會糾正(修復)電腦的狀態(tài);執(zhí)行器:本例中就是修復漏洞;反饋:這個很簡單,電腦的評分或者隨時監(jiān)測到的系統(tǒng)問題,都是反饋;控制裝置:手機360中的流量監(jiān)控等。

360作為殺毒軟件,這些系統(tǒng)組件都是必備的,設計師要做的就是設計出這些組件(以及組件布局),以及操作這些組件的任務流程。系統(tǒng)設計適用于具有特定功能以及固定組件組成的產(chǎn)品。

系統(tǒng)設計的強大在于能夠以一個全景視圖整體研究項目,是一種很合邏輯的交互設計方法。系統(tǒng)設計能夠讓交互設計師考慮產(chǎn)品的所處環(huán)境,通過全局使用場景以及組件之間的影響,設計師能夠更好的理解產(chǎn)品大的使用環(huán)境。

設計策略

了解設計策略

設計策略的精髓在于,清楚你要做的產(chǎn)品在其同類產(chǎn)品中的定位,以及它與市場上其他類似的產(chǎn)品的差一點在哪。設計策略的制定,是發(fā)生在設計過程早起的產(chǎn)品和項目計劃。作為交互設計師,我們在開始設計之前,要充分了解這些策略。

目前大多數(shù)公司的交互設計師設計的項目都取決于商業(yè)策略(負責生產(chǎn)新產(chǎn)品并尋找新市場)。如果我們的設計和想法符合商業(yè)策略,就會得到支持。一個好的設計策略應該將設計的實踐和整體的商業(yè)策略聯(lián)系在一起,在達到商業(yè)策略的同時將我們的設計做到可用、易用和有趣。

產(chǎn)品愿景、客戶價值、產(chǎn)品范圍都是設計策略中的關鍵要素。對于我們來說,更重要的是溝通與實施策略的能力。

確定問題

我們在設計的過程中經(jīng)常會遇到一種困難,就是我們需要解決的問題經(jīng)常很雜亂并且被錯誤定義,事實告訴我們,除非問題很確定并且顯而易見,否則不要被碰到的問題表面而迷惑。那些乍一看很簡單的問題其實并不簡單 — 它們往往很復雜。

舉一個簡單的例子,比如用戶反饋說我們的在線表單頁面里找不到“提交”按鈕,簡單的解決方案似乎是將按鈕移動到一個更顯眼的位置或者改變按鈕的顏色、尺寸和形狀來突出按鈕。但這也可能預示著其他的問題,可能用戶覺得表單的內容過多,或者用戶不知道為什么自己要填寫表單,再或者用戶不知道點擊按鈕之后會發(fā)生什么。類似這樣,一個簡單的問題可能預示著嚴重的問題。

作為設計師,我們不僅要解決問題,更需要首先定義問題。問題的定義就是“確定我們將解決的事情并同時框定解決的環(huán)境”,問題是需要首先創(chuàng)建出來的。設計策略需要首先需要解決問題的環(huán)境,然后針對問題進行設計并對環(huán)境施加影響。確定問題需要做兩件事:拉遠視角建立問題的邊界,再拉近視角確定組成問題的細節(jié)。也就是先用發(fā)散性的思維去探究問題的可能性,然后再收斂到具體問題點上定義并且細化解決方案。

確定價值定位

價值定位指的是和其他類似產(chǎn)品(競品)相比用戶買或使用我們的產(chǎn)品所能獲得的回報是什么。如果沒有給用戶帶來價值,只是為了不同而設計一個不同的產(chǎn)品,這不是一個好的設計。

當下的產(chǎn)品,價值定位已經(jīng)不僅僅局限于產(chǎn)品的成本和質量,使用產(chǎn)品時的整體體驗已經(jīng)成為一個主要的比較差異,而交互設計對產(chǎn)品的整體體驗起著重要作用。比較差異通常由功能點充當,例如我們的網(wǎng)站缺少了一個發(fā)郵件的功能等。功能確實很重要,但是設計師應該在整個設計過程中去努力尋找一種長期的比較差異,這就是一個更難的命題。

再尋找差異的同時,我們應該意識到任何差異都應該檢查其價值定位。否則,就形成了為了差異而差異,這不是一種好的設計實踐。一種不能促成用戶購買或者使用的差異只會導致混亂,或者只形成了一種無法被感知的差異。例如,每個人都喜歡聽音樂,但是不是每一個產(chǎn)品都要加入音樂播放器功能?沒有準確理解價值定位的盲目增加功能是不會帶來價值的。

設計研究

大多數(shù)的研究是定性的,而不是定量的。通常的情況下,都不會要求交互設計師做設計研究,設計師們一般都會更加信任自己的直覺以及創(chuàng)造產(chǎn)品的經(jīng)驗。在我們熟悉的領域或者是小型項目中,這或許是要正確的方法。但是如果到了大的、不熟悉的領域里,設計研究就可以幫助避免創(chuàng)造錯誤的設計。

研究方法

觀察

觀察也是最簡單的設計研究方法,不動聲色的去觀察用戶,例如去商場里去觀察用戶是如何購物的。觀察者應該精心的去選擇環(huán)境,要在不太會引起人們注意的地方進行觀察。結合用戶實際的使用場景去觀察用戶,記錄下用戶在特定場景中是如何做的。

訪談

訪談是用戶研究的最基本也是最常用的方法,與人們交談、傾聽他們的故事是發(fā)現(xiàn)人們態(tài)度和體驗的最好方法。我們可以引導被訪談用戶講故事,請用戶講述一些在特定時刻特定情境與產(chǎn)品或服務交互的故事,或者我們可以根據(jù)某些主題進行訪談。我們還可以讓用戶繪畫出對某個產(chǎn)品或服務的使用體驗,讓用戶表達出他們所認為的產(chǎn)品。

關于用戶研究這塊兒,網(wǎng)上有大量的文章,這里只列舉最基本的兩個。關于設計研究,可參考本人之前關于創(chuàng)建人物角色的文章

構思

知道了用戶的需求和期望,制定好了戰(zhàn)略,現(xiàn)在要做的就是去設計什么了,開始構思并且產(chǎn)生概念。產(chǎn)生設計概念目前各大設計團隊的方式會是頭腦風暴,頭腦風暴不是為項目尋找一個完美的設計,而是盡可能的產(chǎn)生許多的概念。在這個階段最重要的是產(chǎn)生數(shù)量而不是質量看,要從不同的角度去產(chǎn)生盡可能多的想法。對于一個新的產(chǎn)品,有必要花費幾天開展頭腦風暴來產(chǎn)生幾百個想法。

頭腦風暴最便捷的工具就是紙和筆。我們需要快速地草草記下一個想法,把它放在一邊,再去想另外一個。在進行頭腦風暴時,不必局限于團隊中的設計人員,可以邀請相關人員、開發(fā)人員、工程師甚至局外人都會提出一些讓你意想不到的想法。只要確保參與者都能理解頭腦風暴的原則:

  1. 沒有不好的想法
  2. 保持關注點,把不想關的想法放到一邊
  3. 不要在某一個想法上花費太多時間
  4. 不要在頭腦風暴的時候同時完成其他的任務。

當概念形成后,我們要對產(chǎn)生的概念進行組織,對已經(jīng)提出的所有想法聚類、命名和排序,以便后續(xù)的討論。可以把產(chǎn)生的概念放在一個2*2的矩陣中,來說明連續(xù)的區(qū)間中每個想法處于什么位置;或者把他們放在表格中,通過屬性來標記這些概念的特性。

交互設計法則

預設用途

事物的外表都能表現(xiàn)給我們一種提示,表明它是如何工作的以及我們應該如何與之交互。預設用途是一種屬性,這些屬性能提供某種與對象或者功能進行交互的提示。椅子因為它的形狀,就提供了椅子能坐的預設功能;按鈕應為它的形狀,就有按的預設功能;拉手由于它的形狀,提供了一種可以拉的預設功能。交互設計可以看做是提供一種預設用途,以便產(chǎn)品的特征和功能可以被發(fā)現(xiàn)并被正確的使用。

按鈕的預設功能

反饋

反饋是某種提示,意味著某事發(fā)生過。對使用產(chǎn)品或者服務的人的任何動作都應該有確認,不管他們的行為多么的輕微:就像移動鼠標的時候光標跟隨者移動,撥打電話時按下手一個按鍵手機上應該顯示一個數(shù)字。

如果沒有立即明顯的反饋,用戶往往會重復剛做過的動作,例如按下按鈕兩次,這樣做是會引發(fā)問題的,例如購買物品的時候會兩次或者多次匯款。人們需要反饋。

互聯(lián)網(wǎng)產(chǎn)品的響應性由開始動作和產(chǎn)品做出反應之間的時間(延時)來確定,延時可以做如下描述:

  1. 及時,產(chǎn)品或服務的響應時間<=0.1秒,用戶認為反饋是及時的,并且可以在沒有察覺到中斷的情況下繼續(xù)完后任務。
  2. 延遲,產(chǎn)品或服務的響應時間在0.1秒~1秒之間,此時用戶會注意到延遲。如果這樣的延遲不頻繁的出現(xiàn)用戶會忽視它,反之,用戶會感覺到產(chǎn)品或者服務是很遲鈍的,例如撥號時按下數(shù)字鍵后,需要1秒才會顯示在屏幕上,所有的按鍵都是1秒后才會顯示,用戶會變得很沮喪甚至會放棄產(chǎn)品。
  3. 中斷,1秒之后還是沒有反應,用戶會覺得他們正在做的工作中斷了,他們的注意力會從手頭的工作上轉移到其他的產(chǎn)品或是服務上,例如用戶點擊“提交”來完成交易,幾秒過后還是沒有反應,用戶會擔心這筆交易并且懷疑是不是網(wǎng)站出了問題。
  4. 異常終止,如果出現(xiàn)超過10秒的延遲,用戶會覺得手頭上的工作徹底中斷了。

用戶的心智模型

心智模型指的是用戶對系統(tǒng)或對象是如何工作的理解。心智模型通常是由用戶根據(jù)設計師提供的提示信息來建立,這些提示信息以預設用途和反饋的形式給出。設計師能使用這些提示信息顯著的控制用戶的心智模型,隱藏或者揭露出產(chǎn)品的內部工作方式。

費茨定律

費茨定律建立了手指和鼠標一類設備的指向行為模型。目標越大,指向它的速度越快,目標越近,指向它的速度越快。費茨定律對于數(shù)字設備的三個指示:

  1. 按鈕等可點擊對象需要合理的大小,例如iOS規(guī)范中的44*44px規(guī)則。
  2. 屏幕的邊和角的位置適合放菜單欄和按鈕這樣的元素。
  3. 出現(xiàn)在用戶正在操作的對象旁邊的控制菜單或工具欄可以被打開的更快,例如點擊鼠標右鍵出現(xiàn)在旁邊的菜單。

??硕?/strong>

希克定律描述的是用戶做決定所需的時間由備選項的數(shù)量而定。用戶會對所選內容進行細分。但是如果極端遵循這一定律,會做出可怕的設計。試想下,亞馬遜或淘寶把所有的商品全呈現(xiàn)的主頁里……所以,把相同類別的備選項做適當?shù)姆纸M,可以降低用戶選擇時所需的時間。

7加減2法則

不得不說希克定律看起來違背了7加減2規(guī)則。7加減2法則闡述,人們在記憶了5~9項信息之后,人的頭腦就開始出錯。有些設計師在任何時候都確保屏幕上不多于7項內容,這樣做難免有些極端了,因為此法則強調的是人們最多可以在短期記憶中記住的信息的數(shù)量。當這些信息被顯示在屏幕上時,人們不必存在于短期記憶里,因為隨時都能看到這些信息。舉一個7加減2法則的應用例子,核對電話號碼或者是銀行卡號時,分組顯示數(shù)字會讓人們更易于記憶,(155)-(5588)-(7777)。

特斯勒復雜性守恒定律

定律描述了每一個過程都有其固有的復雜性,這個復雜性存在一個臨界點,超過了這個點過程就不能再簡化了,只有把固有的復雜性從一個地方轉移到另一個地方。例如,發(fā)送短息,兩個必要的條件就是你的手機號和對方的手機號,你的手機號是不用輸入的,手機會帶著你的信息,對方的手機號手機也會使用常用聯(lián)系人等功能做到簡化。交互設計師需要知道特斯勒復雜性守恒定律,首先,設計師需要承認,無論如何完善,所有過程都有一些不能再簡化的元素;其次,設計師需要找到合理的地方來轉移我們設計的產(chǎn)品的復雜性,用戶在發(fā)送每一個短信的時候是沒有必要輸入自己的手機號的。

防錯原則

設計師在為產(chǎn)品設置約束來防錯誤的時候使用防錯原則,迫使用戶調節(jié)他們的行為,正確的執(zhí)行操作。在交互設計中,當使用條件沒有滿足時,嘗嘗通過使功能失效來表示。盡可能的通過圖標提示或其他方式表明哪些條件可以讓功能生效是一個好的方式。

隱喻

隱喻是讓用戶理解抽象數(shù)字提供的一種方法,最著名的例子就是計算機桌面。桌面隱喻幫助用戶統(tǒng)一了圖形用戶界面。macOS系統(tǒng)里的圖標就是隱喻最好的例子。

輸出細化的文檔

草圖

設計師最好用的工具就是紙和筆了,在紙張上繪制草圖是具有靈活性和易用性的。

故事板

故事板技術借鑒了電影制作和廣告制作,通過把故事和附圖結合起來,設計師可以有效的講述關于產(chǎn)品和服務的故事,并在情境中展示它的特性。故事板上的圖片可以是插圖或者是照片,故事板由這些圖片和附文組成。通過故事板,設計師可以展示產(chǎn)品使用的關鍵時刻。

任務流程圖

任務流程圖展現(xiàn)的關系將被構造成線框圖。把任務排列成流程圖,可以幫助我們看到產(chǎn)品的初步雛形。任務流程圖可以表示出產(chǎn)品中的頁面順序以及相關操作的流程,顯示出用戶需要在哪里執(zhí)行哪些動作,并且顯示了哪里需要包含菜單以及信息。

本人在項目中繪制的“單點登錄”邏輯流程圖

線框圖(低保真原型)

線框圖用來展示產(chǎn)品結構、信息層次、控件和內容。線框圖(低保真原型)通常是交互設計師創(chuàng)造產(chǎn)品時最重要的文檔,線框圖是記錄產(chǎn)品特性的一種方式,這些特性包括相應的技術和商業(yè)邏輯。線框圖是產(chǎn)品的藍圖,團隊中人員可以通過它全面的理解產(chǎn)品。

線框圖應該粗略的勾勒出產(chǎn)品形式。包括:內容,能發(fā)現(xiàn)和接觸功能的必要控件,訪問、瀏覽和操作以上兩個要素(內容,控件)的方法。線框圖中還應包含所有細節(jié)的注釋、說明等內容。

本人在項目中繪制的線框圖

開發(fā)和測試

到這里,在輸出了DRD后,我們的工作又到了另一個方向,跟進視覺、開發(fā)以及測試,保證產(chǎn)品按照自己的設計方案上線。此時我們的角色變成了排除問題,調整設計以適應代碼,以及與團隊成員共同協(xié)作。實際上,為了保證產(chǎn)品達到預期的設計效果,我們應該加入到這些過程之中,因為一旦開發(fā)開始了,肯定會出現(xiàn)未曾想到的問題,我們應該隨時出現(xiàn)在工程師、測試人員身邊來共同解決這些問題。

寫在最后

互聯(lián)網(wǎng)已經(jīng)從電腦屏幕的后面來到了我們周圍的各種事物中,交互設計不僅要在創(chuàng)建未來新事物的準則方面發(fā)揮作用,而且還要保證未來的事物運轉良好、要為用戶的愉悅使用而負責。在未來的互聯(lián)網(wǎng)時代里,我們將會看到更多令人吃驚的進步。我們也會迎來一個令人激動人心的時代(或許是AI時代)!

相關閱讀

互聯(lián)網(wǎng)產(chǎn)品設計之易用性

互聯(lián)網(wǎng)產(chǎn)品設計之可用性

 

作者:流年,互聯(lián)網(wǎng)產(chǎn)品設計師,4年互聯(lián)網(wǎng)產(chǎn)品設計經(jīng)驗。

本文由 @流年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載。

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 作者是金融行業(yè)的產(chǎn)品經(jīng)理嗎 是做證券相關的產(chǎn)品嗎

    來自廣東 回復