微交互的設(shè)計案例與思考(中篇)

14 評論 14409 瀏覽 112 收藏 21 分鐘

設(shè)計師和初級產(chǎn)品經(jīng)理在面試中不能很好回答APP設(shè)計好在哪里,并非是由于平時使用太少,而往往因為缺乏一種視角,即產(chǎn)品是為人而設(shè)計的。當(dāng)我們意識到使用產(chǎn)品的是人,人具有感性層面,就會發(fā)現(xiàn)使用”功能強大、信息準(zhǔn)確和流程最優(yōu)“等客觀化標(biāo)準(zhǔn)評價的不足。

微交互的核心在于產(chǎn)品細節(jié),在上一章(點擊查看)中,我們介紹了為懶而做的設(shè)計和為等待而做的設(shè)計。本章我們將聚焦人的感受層面,分享第三和第四部分,即懂禮貌的設(shè)計和為舒適而做的設(shè)計。

三、懂禮貌的設(shè)計:具有一名好服務(wù)員的禮儀

人在與數(shù)字設(shè)備相處的行為模式和人與人之間是類似的,交互設(shè)計者常常使用對話框和表單完成兩者之間的溝通。日常生活中,我們與他人相處常見四種模式:與老板,與親人,與同事,和與服務(wù)員。人們在使用產(chǎn)品時所期待的應(yīng)是最后一種。

當(dāng)我們在高檔的西餐廳就餐,會發(fā)現(xiàn)好的服務(wù)員不必卑躬屈膝,但一定是客戶至上的,在我們需要的時候提供幫助,不問過多煩人的問題。做一名好的服務(wù)員也許不難,但當(dāng)交互設(shè)計者深陷在產(chǎn)品的功能、信息、流程和商業(yè)邏輯中,經(jīng)常就把禮儀這件事拋之腦后了。

案例一 word和page的退出保存對話框:不問已經(jīng)就坐的顧客是否吃飯

對程序設(shè)計而言,流程判斷節(jié)點的是和非都是必須考慮的范圍,但對人而言,在特定條件下人具有的可推斷的行為。例如顧客走進一家餐廳就坐,服務(wù)員應(yīng)該問“您想吃點什么?”,而不是問“您要吃飯嗎?”。顧客到餐廳當(dāng)然是來吃飯的,如果他不想吃了,只要能夠離開就好了。在流程圖和邏輯上,顧客存在離開的可能,“是否吃飯”也的確在“吃什么”之前,但這并不意味著交互設(shè)計要以這種方式問話。

今天我們在MAC上使用word和page編輯同一篇文檔,點擊關(guān)閉會發(fā)現(xiàn)彈出的對話框是不同的。微軟word對話框會問是否保存,而蘋果page對話框則問存在哪里,同時提供不保存的按鈕。word的做法即在問就座的顧客是否吃飯,用戶花費數(shù)小時寫的文檔,為什么不保存?而page的設(shè)計者就聰明多了,將是否保存帶入到保存到哪的問題中。不問已經(jīng)就座的顧客是否吃飯,核心是交互設(shè)計應(yīng)從人的行為模式出發(fā),脫離程序思維,這樣用戶就不會覺得產(chǎn)品表現(xiàn)的刻板、愚蠢和失禮 。

案例二 京東和淘寶退出訂單支付:不過度問煩人的問題

不論我們在餐廳、商店還是理發(fā)店,當(dāng)我們說明要求后,都希望服務(wù)者能夠快速理解,而不是反復(fù)確認。經(jīng)常網(wǎng)購的朋友會發(fā)現(xiàn),京東商城和淘寶在退出確認訂單和支付的界面是不同的。

在退出確認訂單界面時,京東用模態(tài)對話框問“便宜不等人,請三思而行,我再想想or去意已決”,淘寶則不問。對多數(shù)用戶而言,地址是默認填充的,退出訂單等需要時再買并不付出什么代價,在這里京東讓用戶確認自己的行為是非常讓人厭煩的。

而在退出支付界面時,京東仍然用模態(tài)對話框問“確認要離開收銀臺?超出時間訂單會被取消,請盡快支付,繼續(xù)支付or確認離開”,淘寶則不問,直接顯示待支付的訂單,如果用戶不管,訂單會自動刪除。在這里,京東更加失禮,用戶明明已經(jīng)點擊退出支付,為什么還要問,甚至要求用戶盡快支付。

京東所展示的正是過度問煩人問題的服務(wù)員形象,讓用戶反反復(fù)復(fù)確認自己的行為,感到厭煩和喪失信心,相比之下,淘寶好多了。

案例三 麥當(dāng)勞自助點餐與餓了么提交訂單:不問問題而是提供選擇

回答問題與選擇截然不同,前者讓人感覺是被動的,被壓制的行為,是日常生活中與上司和長輩間的對話模式;后者則會讓人感覺是自主的,可控的行為。聰明的服務(wù)者不會強迫用戶回答問題。

麥當(dāng)勞設(shè)計了超級棒的自助點餐系統(tǒng),但在對話框交互使用上不盡人意。當(dāng)人們選完需要的食品后,屏幕彈出對話框問是否外帶,選擇之后屏幕又彈出對話框問是否確認訂單,選擇后屏幕又彈出對話框問是否送到餐桌。這種連續(xù)的獨占態(tài)Y/N發(fā)問讓用戶感到霸道和壓制。同時由于一旦回答就無法返回上一層,用戶潛意識會擔(dān)心自己選錯,倍感壓力。

雖然信息是必須向用戶詢問的,但麥當(dāng)勞使用了錯誤的方式,餓了么則做得好多了。在餓了么的訂單確認里,商品明細,是否匿名,用餐人數(shù)等必要信息,是讓用戶選擇而不是逐個回答,一并確認提交。

案例四 輕芒和知乎的推薦信息:不強行推薦服務(wù)

出于業(yè)務(wù)或商業(yè)需要,有時候產(chǎn)品必須向用戶推薦信息和服務(wù),但這不一定就和用戶體驗相違背。當(dāng)我們走進麥當(dāng)勞的時候,門口的展板,餐廳內(nèi)的墻壁,服務(wù)臺上都是推薦產(chǎn)品的廣告,甚至在我們就餐中會發(fā)現(xiàn),連食品的的墊紙上都是新品廣告,但我們從未感覺這影響了我們就餐的體驗。麥當(dāng)勞擺放在那里,需要就買,不需要可以不看,不是強推給顧客的。

有一款A(yù)PP叫輕芒雜志,每隔幾天打開,文章上就會疊一摞卡片消息,分別來自該公司CEO、PM、設(shè)計、運營和客服的各種消息。更糟糕的是,這些卡片根本無法移除,蓋在文章上無法閱讀文章內(nèi)容,只有一個一個點開看完關(guān)閉才能消除。這絕不是一個好服務(wù)員的體貼,而是愚蠢服務(wù)員的喋喋不休。

相比之下,知乎首頁的付費Live呈現(xiàn)就好多了,這是用戶打開應(yīng)用第一眼就會看到的,但卻不會感覺因為其影響了正常使用。知乎在這里非常聰明的使用了泳道模式,每個Live項目在卡片里以縮略態(tài)方式呈現(xiàn),這些卡片可以橫向滑動,在小面積內(nèi)具有極高的信息呈現(xiàn)效率,不干擾用戶操作。不強推服務(wù)給顧客,是好服務(wù)員應(yīng)有的禮儀。

案例五 京東和阿里閑魚:記住顧客的喜好

我們每天都承受著移動產(chǎn)品各種推送的消息轟炸,從短信喚醒,到郵件活動,再到微信優(yōu)惠券,可是當(dāng)我們打開,很快就喪失信心了:我家里明明有空調(diào),你推什么空調(diào)大促?我明明是個男子,你怎么推女裝打折呢?幾次下來,再推送的消息躺在了短信、郵件和微信消息堆里不再被打開,成為了垃圾。

雖然APP可以不知道我是誰,但是我可一直在使用這款軟件啊,從行為中分析我的偏好,記住我的喜好,為我做個性化推薦讓我開心很難嗎?多數(shù)APP卻根本不關(guān)心這一點,但有一款產(chǎn)品好像不一樣,這款產(chǎn)品就是阿里旗下的二手平臺-閑魚。通過記錄搜索和瀏覽行為,閑魚的iOS通知、首頁置頂和前幾頁的商品都是用戶所關(guān)心喜好的,這是一位能記住顧客喜歡的服務(wù)員,絲毫不讓人感覺是打擾,而是感到十分貼心。

理解使用產(chǎn)品的是人,人具有主觀感受,我們就將以全新的視角重新審視和設(shè)計產(chǎn)品的交互形式。我們?yōu)楫a(chǎn)品設(shè)計出好服務(wù)員一樣的禮儀,但我們很快發(fā)現(xiàn)這樣的感覺還不夠,因為有一個客觀事實存在:所有的交互形式都最終在設(shè)備上呈現(xiàn),而人通過眼睛瀏覽閱讀和手指點擊拖動使用設(shè)備。

四 為舒適而做的設(shè)計:舒適是好用的前提

三年前我購買了當(dāng)時攝像頭達4100W像素的NOKIA LUMIA1020。當(dāng)我在父親面前顯擺這個黑科技產(chǎn)品時,父親拿過手機大概看了20秒時間,說了一句令我至今難忘的話“這手機不好,握在手里不舒服?!毕胂胍矊?,一部整天在手里使用的手機,如果拿著不舒服,還提什么別的呢。

案例一 OFO和摩拜單車的鍵盤輸入:為舒適的輸入優(yōu)化

我們其實沒有發(fā)覺,生活中很多事物都是被優(yōu)化過的。當(dāng)我們每天乘坐電梯,用手指去按樓層的按鈕,那按鈕剛好是我們拇指的大小。而當(dāng)我們坐在電腦前工作,鍵盤的大小則剛好是我們食指的寬度,鼠標(biāo)是我們手掌的寬度。這些都不是巧合,而是為了更舒適的操作而設(shè)計的。

去年的一個冬夜,我走出地鐵找到一輛OFO,使用鍵盤輸入車牌號,輸錯了一位,結(jié)果不得不提交報錯重新解鎖另外一輛。后來我仔細想了想,原來我之所以輸錯的原因來自O(shè)FO不合理的軟鍵盤設(shè)計。

OFO的解鎖場景要比一般輸入苛刻,原因在于用戶此時目光需要聚焦三處:車牌、鍵盤、和輸入框。但是OFO卻設(shè)計了一個糟糕的鍵盤,不但浪費了7和9下面的空間,還用兩個數(shù)字鍵的面積重復(fù)了一個本來在輸入框旁邊就存在的確認鍵,這樣鍵盤被劃分成了四列,每個數(shù)字鍵都小于食指的寬度。摩拜單車,和支付寶輸入金額的軟鍵盤,都采用三列。讓用戶不輸錯最好的辦法不是提醒,而是舒適的輸入。

案例二 Path的抽屜交互模式:為舒適的瀏覽優(yōu)化

在移動設(shè)備上,抽屜交互最早出現(xiàn)在2012年的Path上,當(dāng)時被稱為“神交互”。原因在于那時智能手機剛剛出現(xiàn),屏幕大小是3.5英寸,Path的抽屜模型將菜單和消息列表收斂到頂部導(dǎo)航中,最大限度的解放了屏幕可用顯示區(qū)域,讓用戶舒適的瀏覽列表,不被底部導(dǎo)航遮蓋。但隨著智能手機屏幕尺寸變大,這種結(jié)構(gòu)的優(yōu)勢減弱,劣勢凸顯(菜單的層級過深,菜單喚出按鈕點擊頻繁),最終被微信這種底部淺寬導(dǎo)航取代。

當(dāng)我們今天使用以地圖為中心的產(chǎn)品,比如滴滴打車,摩拜單車,會發(fā)而Path所努力的方向和解決的問題仍具有巨大價值。為了更有效率的利用顯示區(qū)域,最小遮蓋地圖,舒適的瀏覽和操作地圖,這些產(chǎn)品仍然使用的是抽屜模型。

理解用戶的需要,調(diào)整信息展示的層級,解放屏幕可用區(qū)域,是Path所體現(xiàn)的為舒適瀏覽所做的設(shè)計。

案例三 微信、輕芒和好奇心人報:舒適的閱讀應(yīng)只有內(nèi)容

今天的智能手機越來越大,但我們看看家里書架上的書籍和雜志就會發(fā)現(xiàn),即使常見最大的手機屏幕面積,也比不上一本書籍或雜志。今天我們已經(jīng)逐漸習(xí)慣了使用智能手機閱讀,比如使用微信瀏覽公眾號文章,或使用雜志APP閱讀精選內(nèi)容。

在微信瀏覽器內(nèi)閱讀內(nèi)容并不是經(jīng)過優(yōu)化的舒適閱讀,頂部的黑色調(diào)航條讓我們在滑動屏幕的時候,減小了閱讀面積,同時感受到強烈的視覺遮蓋感。既然我們不曾在雜志和書籍上并看到導(dǎo)航,那么為什么我們要在手機上必須看到?

不是每個APP都像微信一樣。輕芒使用白色的頂部導(dǎo)航和底部輸入評論,相比之下接近雜志的感覺,但關(guān)閉的位置欠考慮,隨著手機變大和單手操作習(xí)慣,對角頂部絕不是一個合適的返回位置。好奇心日報則讓我們看到了真正優(yōu)秀的交互設(shè)計,在用戶滑動瀏覽的時候,屏幕干凈的沒有任何多余的東西,這不正是我們所期待的閱讀嗎?舒適的閱讀就應(yīng)該像書籍和雜志一樣只有內(nèi)容。

案例四 iBooks和微信讀書的亮度調(diào)節(jié):舒適的操作是直接的

當(dāng)我們用勺子吃飯,希望直接握住柄就能使用,而不是使用復(fù)雜的操作形式,這是為什么對幼兒來說勺子比筷子更容易使用的原因。同樣,我們?yōu)榱四軌蚋焖俚恼{(diào)節(jié)播放器的音量,在耳機線上增加波輪,也希望用手指滾動就能調(diào)整音量,而不是顯示對話框操作。對人來說,最舒適的操作都是直接操作,但糟糕的交互設(shè)計不是,它們讓人倍感蹩腳。

人們在移動設(shè)備上使用閱讀軟件,由于長時間觀看,對亮度的要求和調(diào)節(jié)都更加苛刻。當(dāng)我們使用iBooks閱讀的時候,調(diào)整亮度的操作:

  1. 點擊界面喚起菜單
  2. 點擊頂部亮度按鈕顯示亮度條
  3. 滑動亮度條
  4. 點擊屏幕關(guān)閉亮度條
  5. 點擊屏幕會到閱讀狀態(tài)

這是一個不直接操作的糟糕設(shè)計,沒有人會用這種方式調(diào)整亮度,人們寧愿使用今天iOS的系統(tǒng)亮度調(diào)節(jié):

  1. 上滑屏幕
  2. 拖動亮度條
  3. 下滑屏幕回到閱讀

但這仍然是一個不直接操作的設(shè)計。它們都來自以體驗著稱的蘋果公司。

難道想調(diào)節(jié)播放器的音量就不能直接滾動耳機線上的波輪,而非要用對話框么?微信閱讀不是這樣做的:設(shè)計者在這里使用了系統(tǒng)的多點觸控,用戶只要雙指在屏幕上下滑動屏幕即可,這個操作雖然可見性差,但讀書APP并非暫時使用,用戶在長時間閱讀中一但熟悉,就會愛不釋手。

案例五 麥當(dāng)勞衛(wèi)生間標(biāo)志和小米電視軟鍵盤:避免暫態(tài)下的新奇操作

新鮮有趣的設(shè)計和交互形式往往能夠吸引和打動人,但要分場合。2個月前我在一家麥當(dāng)勞寫文檔,期間當(dāng)我去衛(wèi)生間的時候,由于無法快速識別標(biāo)志,傻呆呆的停留了半分鐘。M的創(chuàng)意畫用錯了地方,快餐廳的衛(wèi)生間是暫時屬性,90%的顧客都是首次來到這扇門前,需要專注對比兩扇門上的圖形才能區(qū)分男女,當(dāng)然如果這個創(chuàng)意放在90%用戶都熟悉的環(huán)境則很棒。

同樣的例子,小米電視機在搜索輸入時使用了和大家平時習(xí)慣不一樣的軟鍵盤,由于無法和用戶心理的QWERTY鍵盤模型產(chǎn)生映射,用戶會蹩腳的輸入字母。小米的特殊鍵盤用錯了地方,電視不是一個輸入設(shè)備,搜索的軟鍵盤只是暫時態(tài)使用,人們無法通過經(jīng)常使用增加經(jīng)驗,所以就會一直覺得不舒適。

暫時態(tài)下應(yīng)避免新奇的操作形式,這會讓用戶迷惑不知所措,無法舒適操作。

設(shè)計界偉大的Dieter Rams曾經(jīng)說:

“設(shè)計和藝術(shù)是不同的,但很多人都沒有認識到這一點,設(shè)計是為了人而產(chǎn)生的,如果你不明白人,你就不能理解什么是好的設(shè)計。”

當(dāng)我們理解了最終使用產(chǎn)品的是人,人具有感性層面,我們就將從全新的視角看我們手機中的APP,從而開始感知和理解到偉大產(chǎn)品的動人細節(jié)。感謝大家閱讀。

【未完待續(xù)】

相關(guān)閱讀

微交互的設(shè)計案例與思考(上篇)

 

作者:彩虹貓sir,交互設(shè)計師一枚,堅持原創(chuàng),以文會友,希望和大家共同感悟,思考,成長。

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我覺得小米電視軟鍵盤設(shè)計的挺有道理的。QWER鍵盤是很常見,但是具體位置還是要大腦反應(yīng)的,只有當(dāng)雙手放到鍵盤上了才能熟練的敲打起來。小米的鍵盤應(yīng)該是用遙控器一個一個選的,這種字母順序排版比QWER排版用起來更快速。而且看電視的受眾群有很多年長的人。

    來自上海 回復(fù)
    1. 網(wǎng)絡(luò)電視受眾是年長的人?

      回復(fù)
  2. 請快快出下篇啊 ??

    來自俄羅斯 回復(fù)
    1. 出差中…

      回復(fù)
  3. 兩篇都看了,從來沒試過用這個角度看產(chǎn)品,期待下一篇

    回復(fù)
    1. 感謝閱讀

      回復(fù)
  4. 事實上,所舉不好的例子,淘寶手機充值,麥當(dāng)勞選擇支付方式,亞馬遜的篩選,IOS的模態(tài)傳輸?shù)却?,office的退出保存,京東的退出訂單確認,麥當(dāng)勞的連續(xù)獨占態(tài)問答,輕芒的強制操作卡片,OFO的輸入鍵盤,ibooks的亮度調(diào)節(jié),小米的非qwerty鍵盤,在設(shè)計的時候都一定有自己的道理,或出于理解,或出于商業(yè),不是說錯了,但如果放在用戶角度和與其他的產(chǎn)品對比,就會發(fā)現(xiàn)有改善之處,而這正是UX設(shè)計的目標(biāo)。
    我在打算寫這個系列文章的時候,希望用日常的例子,表達出諾曼第二層“好行為的設(shè)計”和COOPER的方法論。每個人都有自己的理解,這很正常。

    來自北京 回復(fù)
  5. 其實有很多能撕逼的地方,不知道下篇什么時候出來呢?

    來自內(nèi)蒙古 回復(fù)
    1. ?? 我也覺得好多都是能撕逼的,哈哈哈哈哈

      來自廣東 回復(fù)
    2. 同意~

      來自北京 回復(fù)
    3. 在搬磚中,估計得周末了

      來自北京 回復(fù)
  6. 第一個關(guān)于保存的,打抱不平一下,首先你得在某處有一個doc文件,當(dāng)你打開,寫入幾個字,直接關(guān)閉,然后按照page的做法,還問我存儲到哪里去?

    來自浙江 回復(fù)
    1. 感謝閱讀!PAGE的交互神奇之處在于如果你不保存和WORD的操作是一樣的,不保存相當(dāng)于選項,而不是是否;第二個神奇的是,如果你一個字也沒輸入,PAGE根本不問。

      回復(fù)
    2. 另外,文中指的是新建文檔的情況,不是吃飯中加菜的情況….

      回復(fù)