首頁(yè)

遵循這7個(gè)原則,能讓你的網(wǎng)頁(yè)用戶體驗(yàn)更優(yōu)秀

資深UI設(shè)計(jì)者

作為用戶,在很多時(shí)候會(huì)很容易判斷出一個(gè)網(wǎng)站的用戶體驗(yàn)是否優(yōu)秀,因?yàn)橹饔^感受是很難被欺騙的。但是作為網(wǎng)站的設(shè)計(jì)者和開(kāi)發(fā)者,角色轉(zhuǎn)換之后,所需要面對(duì)問(wèn)題就復(fù)雜得多。身為構(gòu)建者,要讓體驗(yàn)盡善盡美需要花費(fèi)大量的時(shí)間精力來(lái)完善整個(gè)體驗(yàn)的閉環(huán)。今天為你所整理的這7個(gè) UX設(shè)計(jì)的原則,能夠幫你更好地進(jìn)行網(wǎng)站的 UX設(shè)計(jì),并且盡可能地將整體的用戶體驗(yàn)提升到一定高度。

1. 圍繞用戶體驗(yàn)來(lái)進(jìn)行整體設(shè)計(jì)

想要?jiǎng)?chuàng)造難忘的用戶體驗(yàn),自然要圍繞著用戶體驗(yàn)本身來(lái)進(jìn)行設(shè)計(jì)。甚至在某種意義上來(lái)說(shuō),數(shù)據(jù)和內(nèi)容也應(yīng)該是服務(wù)于體驗(yàn)的, 它們應(yīng)該以什么樣的體驗(yàn)來(lái)呈現(xiàn)出來(lái),這是設(shè)計(jì)者需要反復(fù)思考和琢磨的問(wèn)題。

圖形、布局、文本和交互元素之間的協(xié)同工作才能創(chuàng)造體驗(yàn),任何一個(gè)維度缺一不可,單純的信息展示是不夠的。

想讓你的網(wǎng)頁(yè)能在互聯(lián)網(wǎng)上大量的信息中脫穎而出,體驗(yàn)是至關(guān)重要的?,F(xiàn)代網(wǎng)頁(yè)中大量的視覺(jué)和交互內(nèi)容存在,是為了能通過(guò)體驗(yàn)直擊人心,這樣才能在激烈的競(jìng)爭(zhēng)中存活。

2. 網(wǎng)站內(nèi)容應(yīng)當(dāng)一目了然

如果你認(rèn)為網(wǎng)站內(nèi)容是用來(lái)讀的,那就錯(cuò)了?,F(xiàn)代用戶的注意力集中的時(shí)間非常短,絕大多數(shù)用戶在瀏覽信息的時(shí)候,都是快速掃視,而非逐字逐句地仔細(xì)閱讀,信息的展現(xiàn)一定要直觀、清晰,確保能夠一瞥就能看明白。借助信息圖表和視覺(jué),更快地傳達(dá)信息和數(shù)據(jù)。

你需要讓你的內(nèi)容更加吸引用戶,絕大多數(shù)用戶會(huì)為觸動(dòng)它們的信息和內(nèi)容而駐足,當(dāng)他們想要了解更多的時(shí)候,才會(huì)點(diǎn)擊,了解更多。

3. 用戶想要簡(jiǎn)單而清晰的內(nèi)容

用戶只需要半秒就能判斷出網(wǎng)站設(shè)計(jì)和內(nèi)容,你需要盡量讓網(wǎng)站的交互和指引足夠清晰,顯而易見(jiàn)。不要讓按鈕難以被用戶發(fā)現(xiàn),在首頁(yè)上放上一大堆的按鈕和鏈接,不如通過(guò)視覺(jué)上的引導(dǎo),讓用戶注意到最關(guān)鍵的那個(gè) CTA按鈕。

通過(guò)迭代和測(cè)試,不斷地優(yōu)化和提升網(wǎng)站的易用性。有的設(shè)計(jì)對(duì)于絕大多數(shù)的用戶都非常有用,凸顯最重要的選項(xiàng),允許隱藏額外的功能,并且為用戶提供顯示全部的選項(xiàng)。

除了清晰的設(shè)計(jì),整體的一致性也很重要。統(tǒng)一的配色、交互和圖形能夠讓用戶對(duì)于后續(xù)的操作有更清晰的預(yù)期,減少用戶在后續(xù)操作過(guò)程中探索的力度,這是通過(guò)統(tǒng)一性設(shè)計(jì)提升產(chǎn)品易用性的一種方式。

4. 通用設(shè)計(jì)元素 vs 創(chuàng)造性

當(dāng)某個(gè)設(shè)計(jì)元素在其他地方很常見(jiàn)的時(shí)候,它就已經(jīng)形成了特定的 UI 模式,盡量不要去修改它,哪怕是很富有創(chuàng)意的方式。當(dāng)你將這種約定俗成的元素修改成其他樣子的時(shí)候,用戶需要花費(fèi)比平時(shí)更長(zhǎng)的時(shí)間來(lái)判斷它究竟是什么。這種認(rèn)知負(fù)荷將會(huì)影響整個(gè)網(wǎng)站的使用效率和轉(zhuǎn)化率。比如漢堡圖標(biāo),比如網(wǎng)站登錄入口的位置(右上角)。沒(méi)有必要在這種地方重新「標(biāo)準(zhǔn)化」。

對(duì)于鏈接、導(dǎo)航、布局這樣基本的元素,應(yīng)該始終優(yōu)先考慮其可用性,在此基礎(chǔ)上再發(fā)揮創(chuàng)意。

雖然非傳統(tǒng)的設(shè)計(jì)很酷,但是它的可用性問(wèn)題同樣很大。創(chuàng)造性的設(shè)計(jì)同樣是需要控制其程度和平衡,如果非要打破常規(guī),盡量控制好程度,并且一次最多打破一條規(guī)則,不能更多。

5. 了解你的用戶

在開(kāi)始創(chuàng)建網(wǎng)站和 APP 之前,你應(yīng)該對(duì)于你的目標(biāo)客戶群體有足夠清晰的了解,這樣才能更好地為他們來(lái)設(shè)計(jì)界面。

一旦你清楚地了解了你的用戶,就能了解他們的需求和愿望,并且設(shè)計(jì)出符合他們預(yù)期的界面和體驗(yàn)。這個(gè)時(shí)候,你的競(jìng)爭(zhēng)對(duì)手能夠?yàn)槟闾峁╈`感和想法。注意對(duì)方的色彩,布局,風(fēng)格和功能。

盡可能使用你的受眾已經(jīng)熟悉的 UI 模式和 UI 元素,能夠更快讓他們上手。在此基礎(chǔ)上,適當(dāng)?shù)剡M(jìn)行差異化的設(shè)計(jì),這樣效率更高。

當(dāng)你確定了受眾之后,記得盡量把他們的反饋納入到你的設(shè)計(jì)當(dāng)中。

6. 視覺(jué)層次很重要

當(dāng)界面中優(yōu)先放置最重要的元素,通過(guò)視覺(jué)層次來(lái)凸顯它們,確保用戶能夠更快注意到它們。在設(shè)計(jì)中,有很多方法能夠凸顯內(nèi)容,但是最有效的方法始終是讓它們更大更醒目。

視覺(jué)層次的構(gòu)建能夠讓網(wǎng)站內(nèi)容更加清晰,也更加富有功能性。

7. 控制用戶體驗(yàn)的質(zhì)量

Peter Moville 在 usability.gov 這個(gè)網(wǎng)站上列舉出了用戶體驗(yàn)設(shè)計(jì)的關(guān)鍵因素,它的核心價(jià)值在于通過(guò)不同的維度更好地掌控用戶體驗(yàn)的質(zhì)量:

  • 有用:內(nèi)容應(yīng)該是原創(chuàng)的且滿足需求。
  • 可用:網(wǎng)站的內(nèi)容應(yīng)該很容易被找到。
  • 可?。涸O(shè)計(jì)元素應(yīng)該貼合情感且具備可欣賞性。
  • 可發(fā)現(xiàn):內(nèi)容容易被定位,被找到,并且可導(dǎo)航。
  • 無(wú)障礙:設(shè)計(jì)要為有障礙的用戶進(jìn)行定制。
  • 可信:網(wǎng)站內(nèi)容應(yīng)該有權(quán)威性,且值得被相信。

除了上面的維度之外,還有一些值得參考的 UX設(shè)計(jì)的質(zhì)量衡量標(biāo)準(zhǔn):

  • 符合上下文:有明確的路徑,符合上下文邏輯。
  • 人性化:值得信賴(lài),平易近人,透明,并不機(jī)械。
  • 可發(fā)現(xiàn)性:用戶在第一次訪問(wèn)的時(shí)候就能夠順暢的完成任務(wù)。
  • 可學(xué)習(xí)性:確保交互足夠簡(jiǎn)單,并且能夠無(wú)縫地相應(yīng)移動(dòng)端界面,確保用戶在隨后的訪問(wèn)過(guò)程中達(dá)成目標(biāo)。
  • :確保用戶能夠快速輕松地完成各種任務(wù)。
  • 令人愉悅:確保產(chǎn)品能夠滿足用戶需求,還能夠和用戶產(chǎn)生情感聯(lián)系。
  • 表現(xiàn)良好:當(dāng)用戶與之交互的時(shí)候表現(xiàn)良好。

結(jié)語(yǔ)

用戶體驗(yàn)設(shè)計(jì)的目標(biāo)不僅僅是讓產(chǎn)品本身更優(yōu)秀,更重要的是從情感層面上和用戶產(chǎn)生關(guān)聯(lián)。有界面而沒(méi)有體驗(yàn),這樣的產(chǎn)品在今天的競(jìng)爭(zhēng)中是活不下去的。

篩選功能設(shè)計(jì)總結(jié)

資深UI設(shè)計(jì)者

從用戶的操作流程上來(lái)說(shuō),如果用戶想使用一個(gè)功能,必然首先要發(fā)現(xiàn)它。如果連功能入口都找不到,后續(xù)的用戶體驗(yàn)也無(wú)從談起。而篩選功能可以幫助用戶對(duì)功能信息進(jìn)行快速的定位,縮短用戶的查找時(shí)間,這篇文章我就來(lái)跟大家聊一下篩選功能。


 三種常見(jiàn)基本樣式


首先要明確一個(gè)概念,篩選功能并不是普通的單一功能項(xiàng),它和導(dǎo)航一樣是一個(gè)體系。既然是體系,必然有最基本的組成部分。篩選功能(體系)常見(jiàn)的樣式有以下三種:tab類(lèi),(下拉)列表類(lèi),標(biāo)簽類(lèi)。這三種樣式是篩選功能最基本的組成元素,不管你產(chǎn)品的篩選功能做的有多么復(fù)雜,都可以看成是這三種基本元素的不同組合形式。


Tab


Tab是最常見(jiàn)的篩選樣式,一個(gè)tab項(xiàng)代表一個(gè)篩選維度,直接平鋪的展示出來(lái),用戶很容易感知到。

Image title


根據(jù)方向我們可以將tab分為橫向欄tab側(cè)向欄tab。橫向欄tab可展示2-5個(gè)選項(xiàng),如果超過(guò)了5個(gè),那么就需要用戶滑動(dòng)才能看到。所以當(dāng)篩選維度過(guò)多的時(shí)候,我們可以考慮使用側(cè)向欄tab,京東商品分類(lèi)這里用的就是典型的側(cè)向欄tab,我數(shù)了一下總共40個(gè)選項(xiàng),這里如果使用橫向欄tab用戶可能要側(cè)向滑動(dòng)8屏,操作成本過(guò)高。

Image title


當(dāng)然當(dāng)選項(xiàng)過(guò)多的時(shí)候,我們還有一個(gè)法子,就是使用彈框,用戶點(diǎn)擊后可以看到全部的選項(xiàng)。

Image title



列表式


列表式也可稱(chēng)之為list,其特點(diǎn)就是占用空間小。因?yàn)樗梢詫⑦x項(xiàng)隱藏起來(lái),用戶需要點(diǎn)擊才能看到所有的選項(xiàng),因此在有限的空間里可以展示更多的篩選維度。礙于手機(jī)屏幕尺寸的限制,列表式篩選現(xiàn)在應(yīng)用的越來(lái)越普遍。

Image title

列表式篩選的樣式其實(shí)有很多??梢宰龀蓀opover類(lèi),actionsheet類(lèi),activityview類(lèi)。這些樣式很難去說(shuō)誰(shuí)好誰(shuí)壞,這里我就只是列舉出來(lái),具體用哪種樣式,大家自己來(lái)判斷。


標(biāo)簽式


對(duì)于標(biāo)簽式,很難進(jìn)行準(zhǔn)確的定義,我更傾向于將單選按鈕,多選按鈕,switch等統(tǒng)稱(chēng)為標(biāo)簽式,標(biāo)簽式只能針對(duì)單一條件進(jìn)行篩選,這點(diǎn)和tab很類(lèi)似。標(biāo)簽式很少單獨(dú)出現(xiàn),多數(shù)情況下都是與tab和列表式結(jié)伴而行。

Image title


在淘寶里用戶可以點(diǎn)擊視圖icon來(lái)切換視圖模式,這就是典型的標(biāo)簽式篩選。

 

當(dāng)然以上三種只是最常見(jiàn)的篩選元素,其余的還有輸入框,滑塊,地區(qū)/日期選擇器等主要用于信息錄入的組件。 


常見(jiàn)的篩選體系 


了解了最基本的元素,接下來(lái)看一些比較復(fù)雜的篩選樣式。上面我也提到了任何產(chǎn)品的篩選體系都可以看成是這三種基本元素的不同組合形式。為了讓大家更好的理解,我一一舉例來(lái)說(shuō)明:


tab+tab:


tab之所以受到青睞,是因?yàn)槠漭^低的學(xué)習(xí)成本。每一個(gè)tab代表一個(gè)類(lèi)別,而且是直接展示給用戶看的,所以很多產(chǎn)品的篩選功能都會(huì)優(yōu)先考慮使用tab。即使功能結(jié)構(gòu)復(fù)雜到無(wú)法用一層tab來(lái)完成篩選任務(wù),設(shè)計(jì)師也會(huì)考慮使用雙層tab樣式(tab+tab)的樣式。(PS.當(dāng)然下圖應(yīng)該算是segment control+tab)

Image title



tab+列表式:


當(dāng)產(chǎn)品不斷的發(fā)展,功能結(jié)構(gòu)愈發(fā)的復(fù)雜,過(guò)于扁平的tab已經(jīng)無(wú)法滿足篩選的需求。以看電影這個(gè)場(chǎng)景為例,用戶的需求是找到合適的影片和電影院。對(duì)于用戶來(lái)說(shuō),衡量一家電影院會(huì)從地址、票價(jià)、品牌和特色服務(wù)(支持改簽、IMAX廳等)這四個(gè)角度入手。這些篩選需求很難通過(guò)tab來(lái)完成,我們需要列表式的協(xié)助。

Image title



tab+列表式+標(biāo)簽:


當(dāng)產(chǎn)品的功能結(jié)構(gòu)進(jìn)一步復(fù)雜,這也給篩選功能增加了新的難題。以boss直聘來(lái)說(shuō),這里的篩選項(xiàng)主要分為四個(gè):排序方式(推薦/)、工作地點(diǎn)、公司規(guī)模、崗位要求。其中后三個(gè)篩選項(xiàng)包含大量的條件,特別工作地點(diǎn),需要進(jìn)一步定位到街道或地鐵站。對(duì)于這種多維度,深層級(jí)的篩選需求我們可以使用tab+列表式+標(biāo)簽的樣式。

Image title


這里我選擇boss直聘的另一個(gè)原因在于它的tab數(shù)用戶是可以自己增減的,每一個(gè)tab代表一條求職意向,最多可以添加3條求職意向。

Image title



篩選體系的容器


篩選體系是由眾多篩選項(xiàng)組成的,這些篩選項(xiàng)需要一個(gè)“容器”來(lái)承載。上面說(shuō)的boss直聘用的是下拉列表,這種樣式其實(shí)還比較簡(jiǎn)單的,我們可以看一些功能更加復(fù)雜一點(diǎn)的產(chǎn)品,比如各大電商平臺(tái)。這里使用的是抽屜式篩選框,說(shuō)它是抽屜式,因?yàn)樗閷弦粯?,用的時(shí)候可以拉出來(lái),不用的時(shí)候可以關(guān)起來(lái),節(jié)省了空間。從某個(gè)角度來(lái)說(shuō),我們可以把抽屜式看成列表式的一個(gè)放大版。抽屜式篩選框可以容納更多的篩選條件,像我在上面提到的輸入框,多選按鈕都可以在這里使用。

Image title


從底部彈出的動(dòng)作欄也比較常見(jiàn),這里使用了滑塊和單選按鈕。

Image title


Airbnb的篩選功能以浮層為載體,還使用比較少見(jiàn)的switch和stepper。

Image title


當(dāng)然Airbnb篩選功能最大的亮點(diǎn)在于可以向用戶即時(shí)反饋篩選結(jié)果的數(shù)目,用戶不太可能會(huì)進(jìn)入搜索結(jié)果為0的空頁(yè)面,避免無(wú)效操作。


以上說(shuō)的篩選體系都比較傳統(tǒng),大部分都是基于對(duì)現(xiàn)有結(jié)果進(jìn)行篩選,其實(shí)我們可以對(duì)篩選功能進(jìn)行前置。例如,我們可以在用戶進(jìn)行搜索之前就對(duì)結(jié)果進(jìn)行篩選。

Image title


甚至在新用戶第一次使用產(chǎn)品的時(shí)候,可以讓用戶填寫(xiě)一些個(gè)人信息以便進(jìn)行個(gè)性化推送。

Image title


篩選功能的存在意義在于幫助用戶對(duì)功能信息進(jìn)行快速的定位,對(duì)篩選功能進(jìn)行適度的前置可以簡(jiǎn)化用戶的操作流程,同樣可以達(dá)到節(jié)省用戶時(shí)間的目的。

【產(chǎn)品即場(chǎng)景】體驗(yàn)先行

資深UI設(shè)計(jì)者

產(chǎn)品即場(chǎng)景,體驗(yàn)又貫穿整個(gè)產(chǎn)品~孰重孰輕早已分不清

Image title

產(chǎn)品即場(chǎng)景,而場(chǎng)景化核心要素之一的“體驗(yàn)”,是其中最重要的一項(xiàng)。

本文從體驗(yàn)出發(fā),結(jié)合AARRR(用戶增長(zhǎng))模型進(jìn)行闡述,其中我認(rèn)為該模型的使用必須是在產(chǎn)品搭建的場(chǎng)景下才能運(yùn)作的。而其中涉及每一步的良好體驗(yàn)剛好又反哺場(chǎng)景的完善。

從獲取-激活-留存-轉(zhuǎn)化-傳播每一個(gè)步驟中都存在內(nèi)部因素和外部因素。本文只講內(nèi)部因素,產(chǎn)品從最開(kāi)始的外部獲客,轉(zhuǎn)向產(chǎn)品內(nèi)部的使用體驗(yàn),再轉(zhuǎn)向外部傳播的這么一個(gè)過(guò)程。

Image title

文章不是教案,更不是真理。希望大家?guī)е械难酃馊タ创恳黄恼?。畢竟思辨精神才是形成?dú)立思維的法寶。由于文章較長(zhǎng),我會(huì)分成上下兩部分發(fā)布,進(jìn)入正文:


獲?。ˋCQUISITION)分為三個(gè)部分:


一:自然流量的獲取


自然流量的獲取,我們能干涉其中的體驗(yàn)非常少,只能打磨產(chǎn)品本身。但是自然流入的用戶一定是基于以下幾個(gè)點(diǎn)中的其中一個(gè)或多個(gè)。我們或許可以干涉體驗(yàn)前~


1.某個(gè)社會(huì)現(xiàn)象、熱點(diǎn)所引發(fā)的相關(guān)功能性需求(例如前不久滴滴司機(jī)殺害空姐事件,引發(fā)多少芳齡少女的恐慌。提高了強(qiáng)烈的安全意識(shí),這時(shí)候你會(huì)發(fā)現(xiàn)App Store里面一款app殺了出來(lái)“怕怕”(有興趣的朋友自行下載體驗(yàn)),正是這個(gè)社會(huì)熱點(diǎn)現(xiàn)象引發(fā)的自然流量暴增。當(dāng)然也不排除產(chǎn)品借這個(gè)熱點(diǎn)營(yíng)銷(xiāo)自己的產(chǎn)品)


2.某個(gè)痛點(diǎn)確確實(shí)實(shí)需要解決(當(dāng)某類(lèi)用戶存在某個(gè)痛點(diǎn)時(shí),會(huì)自己通過(guò)搜索或者同類(lèi)產(chǎn)品對(duì)比選擇一款產(chǎn)品進(jìn)行使用,如果你的產(chǎn)品剛好能幫助使用者解決痛點(diǎn),那么你成功吸引了用戶。)


3.純粹進(jìn)行產(chǎn)品的體驗(yàn)(產(chǎn)品發(fā)燒友、同類(lèi)競(jìng)品的體驗(yàn)人員、無(wú)意中下載的等)。我們稱(chēng)為無(wú)效流量,因?yàn)檫@部分用戶一般是不太可能成為產(chǎn)品的忠實(shí)粉絲的。他沒(méi)有明確的目的、沒(méi)有明確要解決的痛點(diǎn)。


二:運(yùn)營(yíng)推廣的獲取


運(yùn)營(yíng)推廣這個(gè)名詞在互聯(lián)網(wǎng)誕生之前就已經(jīng)存在了。只是說(shuō)原來(lái)傳統(tǒng)的營(yíng)銷(xiāo)手段即產(chǎn)品-價(jià)格-渠道-促銷(xiāo)開(kāi)始逐漸失效。轉(zhuǎn)而變?yōu)閳?chǎng)景化的運(yùn)營(yíng)推廣。將推廣落實(shí)到具體的小場(chǎng)景中。


1.線上推廣

其中線上推廣包含線上營(yíng)銷(xiāo)活動(dòng)(營(yíng)銷(xiāo)活動(dòng)又分為已有話題進(jìn)行營(yíng)銷(xiāo)【可以選擇融入當(dāng)前的熱點(diǎn)話題類(lèi)似節(jié)日、娛樂(lè)圈大事件等】&【提供話題痛點(diǎn)解決方案進(jìn)行營(yíng)銷(xiāo)】和制造話題營(yíng)銷(xiāo)【創(chuàng)造業(yè)內(nèi)的話題】【通過(guò)深度用戶進(jìn)行制造話題】、優(yōu)惠活動(dòng)(包括邀請(qǐng)好友得好禮、會(huì)員優(yōu)惠、某個(gè)節(jié)日優(yōu)惠等)。線上推廣無(wú)非就是通過(guò)網(wǎng)絡(luò)搭建虛擬場(chǎng)景,通過(guò)場(chǎng)景邊界的不斷延伸,覆蓋吸引更多的用戶參與進(jìn)來(lái)。


2.線下推廣

線下推廣包含地推(地推不可避免的會(huì)帶來(lái)2部分的人群:被地推活動(dòng)中的獎(jiǎng)品吸引的人;確實(shí)被產(chǎn)品的介紹所吸引的人)、海報(bào)&代言(同樣會(huì)有2部分人群:被明星效應(yīng)所吸引的人;被產(chǎn)品介紹所吸引的人)、門(mén)店的互相導(dǎo)流合作。線下推廣效率遠(yuǎn)遠(yuǎn)沒(méi)有線上推廣來(lái)的快。但是對(duì)于需要線下場(chǎng)景的產(chǎn)品來(lái)說(shuō),這又是必不可少的。


三:社群自傳播


通過(guò)單點(diǎn)擊破,這就需要運(yùn)營(yíng)團(tuán)隊(duì)有很好的洞察能力,找到符合產(chǎn)品調(diào)性的社群,通過(guò)事件引爆該社群或者社區(qū),讓社群成為你產(chǎn)品的擁護(hù)者和傳播者。


1.通過(guò)老帶新的模式進(jìn)行獲取用戶

當(dāng)產(chǎn)品與老用戶之間建立很好的紐帶關(guān)系后,老用戶自然會(huì)以個(gè)人為中心,向外幫你宣傳產(chǎn)品。


2.引爆社群

通過(guò)各類(lèi)社區(qū),找到符合你產(chǎn)品的目標(biāo)人群。通過(guò)對(duì)該社群的研究,運(yùn)用社群內(nèi)部語(yǔ)言或者表達(dá),調(diào)動(dòng)整個(gè)社群幫你發(fā)力。有點(diǎn)及面的擴(kuò)散,稱(chēng)之為“氣球理論(很細(xì)的一根針就能戳爆氣球)”這同樣是能引爆傳播性特別重要的一點(diǎn)。


3.參與感(社會(huì)關(guān)系綁定)

當(dāng)你周?chē)娜硕荚谵D(zhuǎn)發(fā)或者都在使用的時(shí)候,如果你不了解或不使用的話,會(huì)引起個(gè)體的孤獨(dú)感。也就是說(shuō)“他們都在玩,我不玩就落伍了”,但是這種情況在產(chǎn)品推廣的前期一般不太會(huì)出現(xiàn)。當(dāng)傳播勢(shì)能達(dá)到一定程度的時(shí)候,才會(huì)出現(xiàn)刷爆朋友圈!


激活(ACTIVATION)分為二個(gè)部分:


當(dāng)用戶從外部導(dǎo)流進(jìn)產(chǎn)品后,這時(shí)用戶的去或留都跟產(chǎn)品&業(yè)務(wù)有關(guān)。如何讓用戶在進(jìn)入產(chǎn)品后自然而然的進(jìn)行使用也就是防呆原則。對(duì),通過(guò)引導(dǎo)或者吸引使用者進(jìn)行下一步操作。(打個(gè)比方,你去一家陌生的餐廳,進(jìn)去后沒(méi)任何人招呼你,沒(méi)人告訴你要去選位置或者點(diǎn)菜,是不是有不知所措的感覺(jué),我想你很快就會(huì)另尋他家吧)


一:進(jìn)入產(chǎn)品后的操作引導(dǎo)


1.視覺(jué)引導(dǎo)(包括頁(yè)面元素優(yōu)先級(jí)、頁(yè)面元素突出強(qiáng)弱進(jìn)行視覺(jué)上的引導(dǎo),很常見(jiàn)的就是:在你第一次使用某個(gè)產(chǎn)品時(shí),會(huì)引導(dǎo)使用者進(jìn)行第一步第二步的操作,降低用戶對(duì)產(chǎn)品的陌生感)


2.動(dòng)效引導(dǎo)(通過(guò)頁(yè)面浮層的形式教育用戶如何進(jìn)行操作,這也是在產(chǎn)品設(shè)計(jì)中,對(duì)新用戶的一種引導(dǎo)方式)說(shuō)到底就是為了消除用戶對(duì)新鮮事物的陌生感和手足無(wú)措感。


二:產(chǎn)品本身是否能激起用戶的探索欲


當(dāng)然這個(gè)問(wèn)題本身是建立在是否能真正的幫助用戶解決某些方面的痛點(diǎn)。否則再?gòu)?qiáng)的探索欲,也跟你產(chǎn)品本身沒(méi)有關(guān)系。如何激起用戶的探索欲?


1.產(chǎn)品整體視覺(jué)表現(xiàn)、使用流程的體驗(yàn)是不是夠吸引人,是不是有屬于產(chǎn)品本身吸引人的點(diǎn)。(當(dāng)年的path效果,直接將它送上全民熱潮之巔)


2.產(chǎn)品是否對(duì)使用者產(chǎn)生持續(xù)的吸引能力,產(chǎn)品前期只有不斷的通過(guò)各種方式刺激用戶。(產(chǎn)品體驗(yàn)優(yōu)化、活動(dòng)力度、宣傳方式、讓惠讓利等)但需要注意的是:過(guò)度營(yíng)銷(xiāo)不等于有效刺激。


3.產(chǎn)品的任務(wù)流程設(shè)置是否合理,正常情況都是由簡(jiǎn)單到復(fù)雜的程度設(shè)置任務(wù),由于用戶的沉默成本,當(dāng)完成一定任務(wù)后,就會(huì)沉淀下來(lái)慢慢成為產(chǎn)品的忠實(shí)用戶。(摩拜產(chǎn)品是先讓用戶填寫(xiě)個(gè)人信息,最后才提示充值押金,站在使用者的角度來(lái)看,已經(jīng)把個(gè)人信息都出賣(mài)給平臺(tái)了,還在乎那200多塊錢(qián)嗎?不然你讓他把流程倒過(guò)來(lái)試試,先充錢(qián),再填信息。保證沒(méi)多少人會(huì)用)。流程設(shè)置就像鉤子一樣,慢慢慢慢的把用戶勾住。


上半部分先到這里,下半部分會(huì)從“留存”“轉(zhuǎn)化”“傳播”角度進(jìn)行展開(kāi)~


多數(shù)人能夠成為很厲害的設(shè)計(jì)師,很厲害的產(chǎn)品經(jīng)理。凡事都會(huì)有所謂的套路,當(dāng)你熟知了解某個(gè)行業(yè),或者多個(gè)行業(yè)的套路時(shí)。你會(huì)站在更高的視角看待問(wèn)題,同樣你會(huì)走的比人家更遠(yuǎn)更快。所謂的套路,是基于個(gè)人而言,可能你有個(gè)很好的導(dǎo)師能夠告訴你以往的經(jīng)驗(yàn)。但是我更認(rèn)為,套路是通過(guò)一步步看似笨拙的努力不斷總結(jié)不斷歸納

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

博博


聽(tīng)云 2016-04-18 10:49:28

早在1995年,尼爾森的十大可用性原則就已問(wèn)世,雖然當(dāng)時(shí)針對(duì)的是web交互設(shè)計(jì),但易用性對(duì)任何擁有用戶界面的東西來(lái)說(shuō)都適用。不管是網(wǎng)站,程序,移動(dòng)頁(yè)面或其他,具體的規(guī)則可能不同,但總的原則都源自人類(lèi)上萬(wàn)年進(jìn)化所形成的思維方式。

1、可見(jiàn)性原則

用戶在網(wǎng)頁(yè)上的任何操作,不論是單擊、滾動(dòng)還是按下鍵盤(pán),頁(yè)面應(yīng)即時(shí)給出反饋。“即時(shí)”是指頁(yè)面響應(yīng)時(shí)間小于用戶能忍受的等待時(shí)間。保證頁(yè)面內(nèi)容的可見(jiàn)性、狀態(tài)的可見(jiàn)性、狀態(tài)變化的可見(jiàn)性。

在用戶與應(yīng)用的交互過(guò)程中,系統(tǒng)需要即時(shí)的給予用戶反饋。如果用戶在操作過(guò)程中,頁(yè)面出現(xiàn)一片空白,不清楚應(yīng)用是否給予了用戶反饋,這時(shí)候用戶就會(huì)感到焦慮、恐慌,這些都是不符合可見(jiàn)原則的??雌饋?lái)非常基礎(chǔ)的要求,其實(shí)很多產(chǎn)品都做不到或者沒(méi)做好。

有一部分App,在弱網(wǎng)情況下信息未加載完成時(shí),顯示空白頁(yè),無(wú)法給用戶任何信息。

現(xiàn)在來(lái)看一款可見(jiàn)性做的比較好的App

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

如上圖,關(guān)掉WIFI在2.5G的網(wǎng)絡(luò)情況下首次進(jìn)入這個(gè)App,主頁(yè)面內(nèi)容雖然遲遲加載不出內(nèi)容,但是有一個(gè)提示能夠告訴用戶,當(dāng)前正在做什么,是怎樣的進(jìn)度。并且“內(nèi)容煉成中”這句有二次元味道的提示,使App的整體感非常好,而且圖片一定程度上分散了注意力,使用戶對(duì)加載的時(shí)間不那么的敏感,為弱網(wǎng)環(huán)境下內(nèi)容的加載爭(zhēng)取了時(shí)間。

2、場(chǎng)景貼切原則

網(wǎng)頁(yè)的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶所在的環(huán)境(年齡、學(xué)歷、文化、時(shí)代背景)。此外,還應(yīng)該使用易懂和約定俗成的表達(dá)。

在做產(chǎn)品設(shè)計(jì)的時(shí)候,主要考慮到的是用戶使用場(chǎng)景。產(chǎn)品的功能要貼近目標(biāo)用戶的真實(shí)使用環(huán)境,這一點(diǎn)非常重要。用兩款導(dǎo)航類(lèi)產(chǎn)品舉例:

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

還原一下導(dǎo)航時(shí)部分使用場(chǎng)景,比如在一個(gè)陌生的城市開(kāi)車(chē),需要使用導(dǎo)航,輸入目的地,大部分的情況下手機(jī)不是手持狀態(tài),觀察的模式也是以眼睛掃描為主。

在這個(gè)頁(yè)面上的設(shè)計(jì),大部分的信息對(duì)我第一訴求導(dǎo)航并沒(méi)有直接的幫助,如果要輸入一個(gè)目的地,需要用尋找的方式去使用它。輸入框非常窄,不好找到,使用場(chǎng)景下導(dǎo)航并不貼切。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

相比之下看到錘子駕駛的界面,作為一款導(dǎo)航類(lèi)的應(yīng)用,它教科書(shū)式的講解了什么是場(chǎng)景貼切原則。在開(kāi)車(chē)的時(shí)候只要用眼睛掃一下手機(jī)屏幕就可以知道要導(dǎo)航的功能位置,并且可點(diǎn)擊區(qū)域巨大,非常容易選中。

選中導(dǎo)航后優(yōu)先用語(yǔ)音搜索目的地,這樣可以減少對(duì)駕駛的影響。下方巨大的List也讓用戶比較容易的去點(diǎn)擊最近去過(guò)的地方。這樣就非常符合用戶在駕駛中,或者說(shuō)非手持狀態(tài)的使用習(xí)慣。

3、可控原則

為了避免用戶的誤用和誤擊,網(wǎng)頁(yè)應(yīng)提供撤銷(xiāo)和重做功能。用戶對(duì)當(dāng)前的狀況很好地控制了解和掌控,并且有足夠的自由。

掌握、可控、自由是人類(lèi)安全感的重要來(lái)源,如果使用一款產(chǎn)品的時(shí)候提心吊膽的,生怕點(diǎn)擊了某個(gè)按鈕就發(fā)生了錯(cuò)誤,很難相信這樣的一款A(yù)pp有好的用戶體驗(yàn)。有一個(gè)用戶交互的金句:操作前可預(yù)知、操作中可有反饋、操作后可撤銷(xiāo)。

像iPhone 的出現(xiàn),為可控原則做了最好的注解,Home鍵也是教科書(shū)式的可控原則的體現(xiàn)。無(wú)論你在哪里,遇到了什么問(wèn)題,一鍵回到桌面,一切重新開(kāi)始。

4、一致性原則:

同一用語(yǔ)、功能、操作保持一致。用戶需要在同一個(gè)產(chǎn)品中,接受同一套規(guī)范、邏輯。

這樣做的一個(gè)好處是可以讓用戶對(duì)App有一個(gè)整體的感知,在相同的背景下做相同的操作會(huì)有可預(yù)期的結(jié)果,這樣大大的降低了用戶的學(xué)習(xí)成本。如下圖這個(gè)出行類(lèi)App,點(diǎn)擊了旅行休閑,結(jié)果跳轉(zhuǎn)了一個(gè)莫名其妙的頁(yè)面。內(nèi)容與旅行沒(méi)有關(guān)系,違背了一致性。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

5、放錯(cuò)原則

通過(guò)網(wǎng)頁(yè)的設(shè)計(jì)、重組或特別提醒或安排,防止用戶出錯(cuò)。

這方面很多成熟的實(shí)體產(chǎn)品都比較好。App中這種防錯(cuò)設(shè)計(jì)隨處可見(jiàn),比如訂票軟件,已經(jīng)過(guò)去的日期顯示為灰色,以防訂錯(cuò)機(jī)票的錯(cuò)誤。

6、協(xié)助用戶記憶原則

在需要記憶某些信息時(shí),產(chǎn)品功能上要幫助用戶記憶。盡可能減少用戶回憶負(fù)擔(dān),把需要記憶的內(nèi)容擺上臺(tái)面。

7、靈活的原則

中級(jí)用戶的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶數(shù)。為大多數(shù)用戶設(shè)計(jì),不要低估,也不可輕視,保持靈活。

移動(dòng)端的用戶大多數(shù)不是專(zhuān)家級(jí)用戶,也不是小白用戶。對(duì)頁(yè)面的設(shè)計(jì)要更側(cè)重于滿足對(duì)大多數(shù)用戶的需求,不宜復(fù)雜,也不宜過(guò)于簡(jiǎn)單無(wú)提示。

8、易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的動(dòng)作不是讀,不是看,而是掃。易掃,意味著突出重點(diǎn),弱化和剔除無(wú)關(guān)信息。

在時(shí)候用一款陌生產(chǎn)品的時(shí)候,用戶絕大多數(shù)是使用掃描的方式而不是閱讀的方式來(lái)理解內(nèi)容。如果想讓用戶快速發(fā)現(xiàn)想要的信息,就一定要保證頁(yè)面足夠清晰,簡(jiǎn)約。如果有較多的信息需要展示,那么一定要分清主次,要求界面足夠簡(jiǎn)單,突出重點(diǎn),內(nèi)容易讀。

9、容錯(cuò)性

幫助用戶從錯(cuò)誤中恢復(fù),將損失降到。如果無(wú)法自動(dòng)挽回,則提供詳盡的說(shuō)明文字和指導(dǎo)方向,而非代碼,比如404。

例如各類(lèi)應(yīng)用中要恢復(fù)出廠設(shè)置,是一個(gè)比較重大的操作

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

所以在恢復(fù)出場(chǎng)設(shè)置前需要輸入解鎖圖案。這就是容錯(cuò)性的一個(gè)體現(xiàn)。對(duì)于用戶正在進(jìn)行的操作有著明顯的提示,避免了誤按誤點(diǎn)操作造成的損失。

10、人性化幫助原則

幫助性提示最好的方式是:1、無(wú)需提示2、一次性提示3、常駐提示4、幫助文檔。

一個(gè)系統(tǒng)或者是產(chǎn)品,如果不需要文檔或是提示是最好的,一切都是自然而然發(fā)生的。但是在很多情況下,需要對(duì)內(nèi)容做一個(gè)提示或者幫助,來(lái)便于用戶更好的使用App。

幫助和提示在哪里用的比較多呢?設(shè)置。在設(shè)置頁(yè)面里,可以看到無(wú)線網(wǎng)絡(luò)、定位服務(wù)等是否打開(kāi),而中間遇到比較復(fù)雜的操作,用戶對(duì)此一知半解,這時(shí)候就需要有相關(guān)的幫助提示。

現(xiàn)在幾乎所有的移動(dòng)端交互設(shè)計(jì)全部基于用戶體驗(yàn),而在定位準(zhǔn)、細(xì)分市場(chǎng)準(zhǔn),遵守了尼爾森十大原則的情況下,還有一些問(wèn)題是每個(gè)產(chǎn)品研發(fā)團(tuán)隊(duì)不能避免且無(wú)法解決的。

在每個(gè)產(chǎn)品的不同生命周期中,側(cè)重點(diǎn)也會(huì)不同。初期注重種子用戶的培養(yǎng)與新功能的增加。到了成長(zhǎng)期會(huì)經(jīng)歷版本的頻繁發(fā)布,系統(tǒng)不夠穩(wěn)定。這時(shí)候就需要用到更加專(zhuān)業(yè)的第三方工具去幫助應(yīng)用發(fā)布后的性能問(wèn)題進(jìn)行管理。

深度解讀尼爾森十大可用性原則 | 如何做好移動(dòng)端用戶體驗(yàn)優(yōu)化

在產(chǎn)品真正上線后可以及時(shí)進(jìn)行崩潰分析、網(wǎng)絡(luò)請(qǐng)求與錯(cuò)誤分析,交互分析等等通過(guò)App的總體性能評(píng)分與在同行業(yè)競(jìng)爭(zhēng)中所處的位置來(lái)不斷迭代產(chǎn)品,改進(jìn)用戶體驗(yàn)。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

博博


企服盒 2018-04-08 10:52:48

本篇講述的是feedback反饋類(lèi);反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

設(shè)計(jì)規(guī)范中最重要的部分就是組件規(guī)范了,制定組件的規(guī)范有哪些好處呢?

  1. 簡(jiǎn)單:熟悉了解組件的用法之后,在做界面設(shè)計(jì)時(shí),只需要合理運(yùn)用組件就可以快速搭建web端界面,無(wú)差錯(cuò)。由于有成套的組件規(guī)范,所以在交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)過(guò)程中無(wú)需每次都重復(fù)勞動(dòng)。

  2. 統(tǒng)一用戶體驗(yàn):由于使用了統(tǒng)一的組件規(guī)范,所以保證了的視覺(jué)和交互設(shè)計(jì)統(tǒng)一性,保證整體的用戶體驗(yàn)性。

  3. 提升設(shè)計(jì)綜合能力:由于減少了做組件重復(fù)性勞動(dòng),交互設(shè)計(jì)師/PM 可以將更多時(shí)間和精力放在討論業(yè)務(wù)、設(shè)計(jì)方法、設(shè)計(jì)思維、定義產(chǎn)品等綜合能力方面。從而驅(qū)動(dòng)業(yè)務(wù)創(chuàng)新。

根據(jù)組件的用途,可以分為六大類(lèi):Feedback 反饋、from 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

本篇講述的是feedback反饋類(lèi);反饋就是用戶做了某項(xiàng)操作之后,系統(tǒng)給用戶的一個(gè)響應(yīng)。這個(gè)響應(yīng)根據(jù)場(chǎng)景的不同會(huì)有不同的響應(yīng)形式和不同作用。

toast

定義:用戶產(chǎn)生操作,出現(xiàn)toast提示,一般2-3s消失;通過(guò)toast中的提示語(yǔ)告知用戶需要了解的信息。讓用戶的行為在使用過(guò)程中得到反饋和幫助。

使用場(chǎng)景:

  1. 可提供成功、警告或錯(cuò)誤等反饋信息。

  2. 頂部居中顯示并自動(dòng)消失,是一種不打斷用戶操作的輕量級(jí)提示方式。

例如簡(jiǎn)書(shū)在沒(méi)有上傳專(zhuān)題封面時(shí)就點(diǎn)擊創(chuàng)建專(zhuān)題按鈕,出現(xiàn)toast提示,提示用戶要先上傳專(zhuān)題封面才能創(chuàng)建專(zhuān)題。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

toast的消息提示分類(lèi)一共有三種類(lèi)型:成功類(lèi)、失敗類(lèi)、常規(guī)類(lèi)。

組件樣式有兩種:可以點(diǎn)擊操作使其消失、不可點(diǎn)擊操作使其消失。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

alert 警示提示

定義:當(dāng)用戶進(jìn)行某種操作時(shí),網(wǎng)站會(huì)出現(xiàn)對(duì)應(yīng)的警告信息提示用戶,該提示信息的狀態(tài)不會(huì)主動(dòng)消失。

使用場(chǎng)景:

  1. 當(dāng)某個(gè)頁(yè)面需要向用戶顯示警告的信息時(shí)。

  2. 非浮層的靜態(tài)展現(xiàn)形式,始終展現(xiàn),不會(huì)自動(dòng)消失,有的組件用戶可以點(diǎn)擊關(guān)閉。

例如淘寶購(gòu)物車(chē),刪除之后,會(huì)出現(xiàn)alert警示提示,淘寶的例子屬于alert的變種,用戶可以點(diǎn)擊“撤銷(xiāo)本次刪除 ”進(jìn)行還原之前的毀滅性操作。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

alert警示提示的消息分類(lèi)一共有三種類(lèi)型:成功類(lèi)、失敗類(lèi)、常規(guī)類(lèi)。當(dāng)然也可以不含有icon操作,含有icon操作的話警示性會(huì)更強(qiáng)。

alert警示組件樣式有兩種:帶有刪除操作,不帶有刪除操作。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

dialog對(duì)話框

定義:用于提示用戶當(dāng)前操作,或是完成某個(gè)任務(wù)時(shí)需要的一些其他額外的信息。對(duì)話框可以用確定/取消的簡(jiǎn)單的應(yīng)答模式,也可以是自定義復(fù)雜的模式,例如表單的填寫(xiě)。

使用場(chǎng)景:

  1. 用戶在進(jìn)行重要操作的時(shí),需要進(jìn)行二次確認(rèn)。

  2. 用于重要的反饋提示,讓用戶知道信息提示。

  3. 承載少量的表單填寫(xiě)類(lèi),減少頁(yè)面的跳轉(zhuǎn)。

windows系統(tǒng)的確定按鈕一般在左邊,而Mac OS的確定一般在右邊。因?yàn)檫@個(gè)原因,導(dǎo)致我們平時(shí)看到的確定有時(shí)候在左邊,有時(shí)候在右邊。

微博和微信公眾號(hào)后臺(tái)的的對(duì)話框,確定在左邊,而淘寶的對(duì)話框在右邊。微信公眾號(hào)的對(duì)話框是小浮層彈窗,避免了遮罩出現(xiàn),同時(shí)對(duì)話框也出現(xiàn)在操作按鈕的附近,對(duì)用戶的干擾性也是最弱的。

dialog對(duì)話框,有三種常見(jiàn)的使用場(chǎng)景。其中表單對(duì)話框、提示類(lèi)、輕量級(jí)提示類(lèi)、表單類(lèi)樣式都是基于二次確認(rèn)類(lèi)對(duì)話框樣式的改變而得到不同的樣式。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

Notification通知提醒框

定義:懸浮出現(xiàn)在網(wǎng)頁(yè)右上角,用于全局的提醒式通知。常見(jiàn)于服務(wù)器異常、操作失敗等

使用場(chǎng)景:

  1. 較為復(fù)雜的通知內(nèi)容。

  2. 帶有交互的通知,給出用戶下一步的行動(dòng)點(diǎn)。

  3. 系統(tǒng)主動(dòng)推送。

Notification通知提醒框出現(xiàn)在網(wǎng)頁(yè)右上角,一般4-5s消失,也可以點(diǎn)擊叉號(hào)進(jìn)行關(guān)閉。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

tooltip 文字提示

定義:簡(jiǎn)單輕量的的文字提示。

使用場(chǎng)景:

  1. 鼠標(biāo)移入則立即顯示提示,移出則立即消失,不承載復(fù)雜文本和操作。

  2. 常用于解釋操作按鈕的文字說(shuō)明。

還有一種tooltip是瀏覽器自帶的,瀏覽器自帶的和本篇的tooltip的區(qū)別是:瀏覽器自帶的鼠標(biāo)移入一般2s才顯示,多用于折行打點(diǎn)的文字提示。例如簡(jiǎn)書(shū),而本篇的tooltip鼠標(biāo)移入就出現(xiàn),切組件風(fēng)格和瀏覽器自帶完全不一樣。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)

tooltip組件按照需要解釋說(shuō)明的對(duì)象位置不同,可以有以下不同的樣式。

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇-反饋類(lèi)


UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

博博


設(shè)計(jì)師檸檬 2018-04-26 15:22:57

寫(xiě)在前面的話:文章內(nèi)容源于網(wǎng)絡(luò),由檸檬整理發(fā)布,如有侵權(quán)請(qǐng)聯(lián)系設(shè)計(jì)師檸檬刪除

都說(shuō)UI設(shè)計(jì)是用戶看到產(chǎn)品的第一個(gè)門(mén),從進(jìn)入手機(jī)應(yīng)用商店到下載界面再到產(chǎn)品的首頁(yè),設(shè)計(jì)師不考慮一下真的用交互稿和產(chǎn)品直接做么,從圖標(biāo)在應(yīng)用商店的吸引展示力和用戶的軟件留存率,這些哪個(gè)不是和UI設(shè)計(jì)師有關(guān)系?

本文重點(diǎn):1.學(xué)著像產(chǎn)品經(jīng)理的角度思考

2.學(xué)著像交互設(shè)計(jì)師的角度思考

3.學(xué)著在用戶的角度思考

4.學(xué)著在自己的角度思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考

UI設(shè)計(jì)的4個(gè)角度與14點(diǎn)思考


如何利用 “峰終定律” 改善用戶體驗(yàn)?

資深UI設(shè)計(jì)者

一、什么是峰終定律

峰終定律是由諾貝爾獎(jiǎng)得主 DanielKahneman 提出的,百度百科上它是屬于心理學(xué)上的定義。

我把它結(jié)合了自己的理解應(yīng)用在設(shè)計(jì)學(xué)上可以解釋為:

用戶在使用某個(gè)硬件產(chǎn)品,軟件產(chǎn)品或者服務(wù)系統(tǒng)來(lái)完成自己目標(biāo)的過(guò)程中,用戶情感地圖曲線的波峰(體驗(yàn)最好)、波谷(體驗(yàn)最差)、結(jié)束點(diǎn)的體驗(yàn),決定用戶對(duì)整個(gè)過(guò)程的體驗(yàn)評(píng)價(jià)。

而在過(guò)程中體驗(yàn)好與不好體驗(yàn)的比重,好與不好體驗(yàn)的時(shí)間長(zhǎng)短,對(duì)記憶幾乎沒(méi)有影響。

這一定律主要是闡述人對(duì)過(guò)去體驗(yàn)的記憶由兩個(gè)因素決定,一個(gè)是「高峰」,一個(gè)是「結(jié)束」。

把用戶情感地圖曲線和峰終定律結(jié)合起來(lái),簡(jiǎn)單畫(huà)一張圖:

既然用戶整體體驗(yàn)與整個(gè)過(guò)程中好壞綜合無(wú)關(guān),只跟幾個(gè)關(guān)鍵點(diǎn)有關(guān),那么可以得到一個(gè)公式:

用戶整體體驗(yàn)評(píng)價(jià)(E)=(y1-y2)+y3

y1,y2,y3 可以稱(chēng)為關(guān)鍵時(shí)刻 MOT(Moment Of Truth)

二、日常生活中的峰終定律

這兩天和包子聊到宜家的峰終定律,突然明白了為什么我們有些課程調(diào)研,大家都喜歡去宜家調(diào)研了。

雖然它的店員很少,找貨物也要自己找椅子搬下來(lái),就算只買(mǎi)一件家具也需要逛完整個(gè)商場(chǎng),但是每次逛完結(jié)束的時(shí)候都可以吃那個(gè)特別好吃的「一元冰淇淋」呀,這就是它的「終」。

而在逛的過(guò)程中,就像包子講的,它的體驗(yàn)?zāi)J胶馨簦旬a(chǎn)品作為空間的一部分。曾經(jīng)有一位宜家的老顧客也說(shuō),宜家商品物有所值,展區(qū)實(shí)用,產(chǎn)品隨意試用,大概這就是它的「峰」吧。

扔一個(gè)我的學(xué)習(xí)小伙伴包大佬的分析:

三、互聯(lián)網(wǎng)產(chǎn)品中的峰終定律

如果說(shuō)峰終定律怎么影響互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)的話,可以先舉幾個(gè)體驗(yàn)差的例子。

很多時(shí)候,用戶在某個(gè)平臺(tái)完成某個(gè)任務(wù)后,會(huì)出現(xiàn)很多引誘用戶點(diǎn)擊的贊助商的內(nèi)容。比如問(wèn)卷星,每次填完,任務(wù)結(jié)束的時(shí)候,它還會(huì)打著抽獎(jiǎng)的名義接廣告……

再舉個(gè)例子,你有沒(méi)有過(guò)在某些 app 注冊(cè)賬號(hào),登錄 or 注冊(cè)很多次卻失敗的情況,或者花了很久時(shí)間才注冊(cè) or 登錄成功?原因可能是賬號(hào)密碼錯(cuò)誤,可能是注冊(cè)流程過(guò)多跳出率過(guò)高,可能是填寫(xiě)信息冗雜……

如果這款產(chǎn)品不是用戶剛需的話,最終會(huì)導(dǎo)致很多用戶卸載它,就算你之后流程的體驗(yàn)再好,用戶根本無(wú)法體驗(yàn)到最后。

四、利用峰終定律打造「爽點(diǎn)」

一款好的產(chǎn)品不僅能夠解決用戶的「痛點(diǎn)」,也能刺激用戶的「癢點(diǎn)」,更能打造用戶的「爽點(diǎn)」。

有一些產(chǎn)品能在用戶使用的過(guò)程中利用峰終定律打造 「爽點(diǎn)」,提升用戶體驗(yàn)。

如果用外賣(mài)這個(gè)來(lái)舉例子的話,應(yīng)該算是一個(gè)大的服務(wù)系統(tǒng),它會(huì)涉及到很多方,比如消費(fèi)者,商家,騎手等,而這一整個(gè)服務(wù)系統(tǒng)的設(shè)計(jì),只針對(duì)消費(fèi)者而言,流程也會(huì)十分復(fù)雜,其中利用峰終定律考慮的就更多了。

那就其中用戶(消費(fèi)者)與餓了么 app 的交互流程來(lái)舉例的話,用戶點(diǎn)外賣(mài)這個(gè)任務(wù):

從打開(kāi) app——選擇店——選擇美食——付款,用戶的任務(wù)已經(jīng)結(jié)束了,但是餓了么會(huì)在結(jié)束的時(shí)候,給用戶一個(gè)分享領(lǐng)取紅包的福利,用戶會(huì)覺(jué)得自己獲得了很大的優(yōu)惠,體驗(yàn)會(huì)十分好,這也就是利用了峰終定律的「終」。

我發(fā)現(xiàn)游戲里面對(duì)峰終定律是用得最多的,曾經(jīng)玩過(guò) lol,王者榮耀,吃雞手游……

如果問(wèn)曾經(jīng)玩 lol 或者王者最爽的時(shí)候是什么時(shí)候,那大概是:比賽過(guò)程中的 First blood,penta kill ,killing spree,legendary,you have slained an enermy 等這些配音和畫(huà)面的視覺(jué)刺激吧。

按照常規(guī)的模式是,殺人后系統(tǒng)直接提示「您已經(jīng)殺滅了一名敵人」,但是它會(huì)去強(qiáng)化這種殺人的體驗(yàn),將殺人的場(chǎng)景分為多種類(lèi)型,通過(guò)視覺(jué)上的彈框擊殺提示與配音上的激勵(lì)疊加,把殺人的體驗(yàn)不斷深化,做到,另外在推塔和偷掉水晶的時(shí)候是不是也是最爽的時(shí)候呢?我覺(jué)得這里就利用了峰終定律的「峰」。

我記得在游戲結(jié)束的時(shí)候,比如 lol 里面推掉水晶的時(shí)候,游戲畫(huà)面會(huì)停止幾秒,然后再出現(xiàn)水晶慢慢破滅,加上大大的「勝利」二字,有的時(shí)候回到大廳還需要等幾秒的時(shí)間。

王者榮耀,吃雞這類(lèi)在游戲結(jié)束的時(shí)候也會(huì)給用戶很多激勵(lì),明明可以在結(jié)束后直接回到大廳,但它們會(huì)延長(zhǎng)這些勝利或者失敗的體驗(yàn),如果勝利,當(dāng)然是爽,還想再擁有這樣的體驗(yàn),繼續(xù)打;如果是失敗,那再接再厲,想擁有贏的體驗(yàn),繼續(xù)打……

總之就是會(huì)讓用戶上癮。它們會(huì)把這些用戶體驗(yàn)做到,在游戲結(jié)束的時(shí)候這些的體驗(yàn)就利用到了峰終定律的「終」。

五、利用峰終定律改善體驗(yàn)步驟

「峰終定律」改善用戶體驗(yàn)的步驟:

  • 進(jìn)行可用性測(cè)試;
  • 繪制用戶旅程圖;
  • 找到「峰」,「終」時(shí)刻;
  • 通過(guò)用戶研究的方法找到用戶心中的關(guān)鍵時(shí)刻;
  • 將「峰」、「終」,「用戶心中關(guān)鍵時(shí)刻」的體驗(yàn)優(yōu)化至。

移動(dòng)端的導(dǎo)航設(shè)計(jì)模式

資深UI設(shè)計(jì)者

在《用戶體驗(yàn)的要素》一本書(shū)中,Jesse James Garrett 將用戶體驗(yàn)分為了五個(gè)層級(jí),戰(zhàn)略層,范圍層,結(jié)構(gòu)層,框架層,表現(xiàn)層。

其中在框架層里面有一個(gè)很重要的概念就是導(dǎo)航設(shè)計(jì),作者對(duì)導(dǎo)航設(shè)計(jì)的定義是:元素的組合,允許用戶在信息架構(gòu)中穿行。

我覺(jué)得可以把導(dǎo)航設(shè)計(jì)理解為:我們從用戶的心智模型出發(fā),結(jié)合業(yè)務(wù)目標(biāo),對(duì)信息架構(gòu)的一個(gè)梳理,來(lái)幫助用戶完成目標(biāo)。

通過(guò)自己手機(jī)里幾十款 app,總結(jié)了以下六種導(dǎo)航設(shè)計(jì)模式,包括:標(biāo)簽導(dǎo)航,宮格導(dǎo)航,側(cè)邊導(dǎo)航,列表導(dǎo)航,菜單導(dǎo)航,輪播導(dǎo)航……

簡(jiǎn)單介紹了它們的優(yōu)缺點(diǎn),適用場(chǎng)景,以及一些衍生導(dǎo)航與相關(guān)案例……(不過(guò)導(dǎo)航設(shè)計(jì)一定是視產(chǎn)品和情況而定的,并沒(méi)有確定的依據(jù)與理論)

一、標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航分很多種,有底部標(biāo)簽導(dǎo)航,頂部標(biāo)簽導(dǎo)航,底部標(biāo)簽導(dǎo)航又可以衍生出舵式導(dǎo)航,頂部標(biāo)簽導(dǎo)航又可以分為靜態(tài)或者是動(dòng)態(tài)導(dǎo)航……

底部標(biāo)簽導(dǎo)航是最基本的導(dǎo)航,幾乎絕大部分 app 中都在用,tabbar 位于頁(yè)面最底部,一般3-5個(gè) tabbar,有文字+icon,也有純 icon 形式,但大部分是文字+icon 的形式,我想是減少用戶記憶負(fù)擔(dān)吧,如下:

而關(guān)于底部標(biāo)簽導(dǎo)航的優(yōu)點(diǎn),缺點(diǎn)以及適用場(chǎng)景也簡(jiǎn)單整理了:

我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會(huì)將底部標(biāo)簽導(dǎo)航進(jìn)行變體,很多人把它稱(chēng)為舵式導(dǎo)航,就像這種:

中間的「+」一般是發(fā)布的意思,并且是 app 里面使用最頻繁的一個(gè)功能,一般都會(huì)重點(diǎn)突出。并且,該標(biāo)簽中很多時(shí)候會(huì)有二級(jí)導(dǎo)航,二級(jí)導(dǎo)航里可擴(kuò)展性就比較強(qiáng),如圖:

而頂部標(biāo)簽導(dǎo)航顧名思義就是 tabbar 位于頂部,最早知道它是在 Material Design 里面,因?yàn)?Google Pixel 手機(jī)底部存在物理導(dǎo)航,所以將標(biāo)簽導(dǎo)航置于頂部不會(huì)顯得突兀。它很少用作一級(jí)導(dǎo)航,一般是二級(jí)導(dǎo)航比較多,而且我發(fā)現(xiàn)頂部標(biāo)簽導(dǎo)航,幾乎都是純文字的形式,比如:

突然想到今天交互設(shè)計(jì)課上的時(shí)候,老師講的人機(jī)交互里,重要的操作放在大拇指可觸達(dá)的范圍內(nèi)。

而頂部標(biāo)簽導(dǎo)航,如果是點(diǎn)擊標(biāo)簽進(jìn)行操作的話,用戶單手操作就十分不方便,所以我發(fā)現(xiàn)體驗(yàn)好的 app 的頂部操作導(dǎo)航都是可以直接通過(guò)左右滑動(dòng)屏幕的交互來(lái)切換。

而當(dāng)標(biāo)簽類(lèi)目過(guò)多的時(shí)候,可以通過(guò)左滑展現(xiàn)更多標(biāo)簽,比如很多新聞閱讀類(lèi)的 app:

如果是可以滑動(dòng)查看更多的話,一定要通過(guò)一些方式告訴用戶可以滑動(dòng)查看更多,比如最后一個(gè)標(biāo)簽隱藏一半的方式等:

關(guān)于頂部標(biāo)簽導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:

二、宮格導(dǎo)航

宮格導(dǎo)航,也是十分常見(jiàn)的導(dǎo)航形式,除了一些工具類(lèi) app 外,大部分是作為二級(jí)頁(yè)面展示出來(lái),并且以 icon+文字的形式居多。

如果將宮格的 icon 換成 picture 的形式的話,可以衍生出一種新的類(lèi)似于卡片式導(dǎo)航的形式 ,可以通過(guò)垂直滑動(dòng)來(lái)切換,比如:

那,如果宮格信息太多,我發(fā)現(xiàn)很多 app 會(huì)采用分類(lèi)展示的形式,并且通過(guò)水平滑動(dòng)的方式來(lái)切換,比如:

但是上面兩種可以垂直或者水平滑動(dòng)的形式,一定要讓用戶知道是可以水平或者垂直滑動(dòng)的,采取的是邊界地方信息只展示一半的形式,告訴用戶可以繼續(xù)滑動(dòng)……

除此之外,宮格導(dǎo)航還可以在電商里面運(yùn)用,在首頁(yè)的運(yùn)營(yíng)內(nèi)容塊,它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小,比如:

關(guān)于宮格導(dǎo)航的優(yōu)缺點(diǎn)和適用場(chǎng)景,如下:

三、側(cè)邊導(dǎo)航

有些書(shū)里面會(huì)把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航,這類(lèi)導(dǎo)航其實(shí)比較少了,原本也是從 Google Material Design 里面提取出來(lái)的概念,一般會(huì)在首頁(yè)呈現(xiàn)一個(gè)主要功能,將其他不常用的功能收納放到側(cè)邊導(dǎo)航里,比如:

而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:

四、列表導(dǎo)航

列表導(dǎo)航也是十分常見(jiàn),幾乎在每一個(gè) app 里面都會(huì)存在,大部分時(shí)候是作為二級(jí)導(dǎo)航存在,但是也會(huì)存在于一級(jí)導(dǎo)航的時(shí)候,比如郵箱,iOS系統(tǒng)自帶的設(shè)置等。

一般在列表導(dǎo)航里都會(huì)有下一個(gè)層級(jí),可以通過(guò)箭頭來(lái)告訴用戶是否有下級(jí)菜單。

當(dāng)列表信息比較多的時(shí)候,可以對(duì)列表進(jìn)行分類(lèi),可以添加小標(biāo)題或者直接分隔開(kāi)。比如:

而在有些列表導(dǎo)航里,我們還需要展示給用戶一些預(yù)覽信息,比如 iOS系統(tǒng)里的健康,個(gè)人信息里的一些基本數(shù)據(jù)展示,如下:

關(guān)于列表導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:

五、菜單導(dǎo)航

其實(shí)菜單導(dǎo)航也可以稱(chēng)為下拉導(dǎo)航。這也是今天上交互設(shè)計(jì)課的時(shí)候,老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來(lái)源于 Material Design 里面的 Menu。

Menu 是臨時(shí)的一張紙(paper),由按鈕(button)、動(dòng)作(action)、點(diǎn)(pointer)或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

比如:

當(dāng)信息層級(jí)變多的時(shí)候,菜單導(dǎo)航里要展示一層或者兩層信息,比如大眾點(diǎn)評(píng)采取的形式:

關(guān)于菜單導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:

六、輪播導(dǎo)航

還有一些導(dǎo)航比如輪播導(dǎo)航,完全的沉浸式體驗(yàn),高度簡(jiǎn)潔的導(dǎo)航,比如天氣,但是這種導(dǎo)航因?yàn)檩啿c(diǎn)的大小不會(huì)很明顯,所以用戶很難快速感知自己所在位置,并且輪播導(dǎo)航輪播的數(shù)量也不宜過(guò)多 。

其實(shí)導(dǎo)航的類(lèi)型應(yīng)該還有很多,并且在一個(gè) app 里面幾乎不可能只使用一種導(dǎo)航,哪怕只是一個(gè)頁(yè)面,也會(huì)存在多種導(dǎo)航的組合形式,比如:

總結(jié)

  • 導(dǎo)航的形式一定是根據(jù)你的產(chǎn)品的諸多因素進(jìn)行選取,并不能完全按照我上文的適用場(chǎng)景為依據(jù);
  • 幾乎每一個(gè) app,每一個(gè) app 的每一個(gè)頁(yè)面,都會(huì)涉及到多種導(dǎo)航模式,需要結(jié)合具體場(chǎng)景進(jìn)行組合選取;
  • 導(dǎo)航的具體展現(xiàn)可以通過(guò):文字,icon,文字+icon 的形式;
  • 有些導(dǎo)航比如標(biāo)簽導(dǎo)航在設(shè)計(jì)的時(shí)候有多種狀態(tài),比如 unselected,selected 等狀態(tài);
  • 導(dǎo)航在 iOS 和 android 里面的應(yīng)用會(huì)不一樣,比如標(biāo)簽導(dǎo)航適配 iOS系統(tǒng),側(cè)邊導(dǎo)航適配 android 系統(tǒng);
  • 導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁(yè)面之間的關(guān)系;
  • 能夠引導(dǎo)用戶以很好的體驗(yàn)完成目標(biāo)的導(dǎo)航設(shè)計(jì)都是優(yōu)秀的。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

博博


人人都是產(chǎn)品經(jīng)理 2016-05-16 10:07:04

來(lái)人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】,BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營(yíng)。

一定有很多朋友在和我思考過(guò)一個(gè)同樣的問(wèn)題:優(yōu)秀的產(chǎn)品是怎樣定義的?周鴻祎給出答案:第一滿足剛需、痛點(diǎn)、高頻,第二要有良好的用戶體驗(yàn)。第一點(diǎn)很好理解,我們今天主要來(lái)聊聊第二點(diǎn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

參照產(chǎn)品設(shè)計(jì)原則,可避免產(chǎn)品設(shè)計(jì)師走彎路,設(shè)計(jì)出具有良好用戶體驗(yàn)的產(chǎn)品。產(chǎn)品設(shè)計(jì)原則會(huì)隨著社會(huì)的進(jìn)步而更新迭代,以下是我在學(xué)習(xí)和工作中對(duì)產(chǎn)品設(shè)計(jì)原則的思考總結(jié),希望可以給你帶來(lái)參考和啟發(fā)。

一、減少用戶出錯(cuò)

錯(cuò)誤對(duì)話框是最令人討厭的交互方式,也是很多產(chǎn)品中濫用最多的。錯(cuò)誤對(duì)話框一般不會(huì)給用戶指明正確的道路,僅僅在保護(hù)程序不陷入麻煩。而且錯(cuò)誤對(duì)話框打斷了用戶的注意流,愚蠢地停止了進(jìn)度。用戶犯錯(cuò)誤的時(shí)候,不應(yīng)該受到訓(xùn)斥,這個(gè)時(shí)候,他需要的是幫助和正確的引導(dǎo),那么我們要做的就是幫助用戶避免錯(cuò)誤,告訴用戶如何把事情做好。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

二、易學(xué)性

好的應(yīng)用像極了藍(lán)顏知已,能看透你的心,在你需要的時(shí)候或者合適的的時(shí)間,用合適的方式提供暖心的幫助,指引你披荊斬棘,打怪升級(jí)。

幫助界面大概分為兩種,導(dǎo)覽教程和覆蓋式教程。

1、導(dǎo)覽教程是通過(guò)一組有序的圖片介紹應(yīng)用功能,或者指引用戶完成一個(gè)目標(biāo)。

新應(yīng)用或者更新后用戶,為了解決用戶初始問(wèn)題,絕大部分應(yīng)用采用了幫助引導(dǎo)頁(yè)面,然而真的是必要的么?我覺(jué)得未必。可能有的產(chǎn)品經(jīng)理也覺(jué)得沒(méi)必要,但這是種主流,所以還是選擇加上。有的則僅僅為告訴用戶產(chǎn)品是做什么的。其實(shí)用戶可能根本沒(méi)有那么多耐心去閱讀好幾頁(yè)的產(chǎn)品說(shuō)明,就算有耐心看完,也大多記不準(zhǔn)。所以把引導(dǎo)放到使用情景中,在用戶使用到此功能時(shí)展示給用戶,也可把引導(dǎo)收起來(lái),用戶需要幫助時(shí)呼出。微習(xí)慣在引導(dǎo)方面,給用戶驚喜。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、覆蓋式教程是另一種介紹方式,很簡(jiǎn)單的透明薄皮,少許箭頭,少許注釋?zhuān)赋鲫P(guān)鍵重點(diǎn)之處。

此方法不錯(cuò),用戶看起來(lái)明了易學(xué)。免費(fèi)日程極簡(jiǎn)的箭頭和引導(dǎo)告訴用戶功能及使用。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

做好后可以自我檢測(cè)思考,用戶學(xué)習(xí)的成本是不是足夠低了?給用戶的學(xué)習(xí)方式是不是最科學(xué)合理的?還有沒(méi)有什么地方需要修改?還有沒(méi)有更好的方式?用戶學(xué)過(guò)一次后還需不需要重復(fù)學(xué)習(xí)?文案確定通俗易懂?

三、美學(xué)一致性、完整性

應(yīng)用的完整性一致性就是外觀和里面不同模塊之間都有相似的外觀、感覺(jué)和氣質(zhì)。產(chǎn)品的完整性一致性會(huì)讓產(chǎn)品更易學(xué)易用。

1、從應(yīng)用外部看,產(chǎn)品完整性一致性,容易培養(yǎng)用戶圍繞這點(diǎn)形成強(qiáng)烈的品牌意識(shí),傳播產(chǎn)品風(fēng)格就是在傳播品牌,可深入人心。一致不代表僵化,可圍繞產(chǎn)品主線進(jìn)行成長(zhǎng)和演化。

2、從應(yīng)用內(nèi)部看,一致的用詞、風(fēng)格、色調(diào)、圖標(biāo)會(huì)給用戶建立具有凝聚力的視覺(jué)系統(tǒng),帶來(lái)在產(chǎn)品上一致的體驗(yàn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

四、輸入方式更簡(jiǎn)單

移動(dòng)端產(chǎn)品的使用場(chǎng)景,公車(chē)上,行走中,單手操作等,導(dǎo)致用戶在使用手機(jī)時(shí)受到很多環(huán)境上的干擾,所以注定會(huì)在輸入方式上給用戶造成很多的不便和出錯(cuò),為使用戶減少使用手寫(xiě)或者鍵盤(pán)輸入,減少浪費(fèi)更多的時(shí)間和精力,改變移動(dòng)端的輸入方式就變得尤為關(guān)鍵。

1、減少移動(dòng)端的文字輸入,輸入時(shí)可采用建議或者事件記憶。聰明的應(yīng)用會(huì)根據(jù)用戶之前的行為和信息給用戶提出建議,根據(jù)記憶靈活地為用戶當(dāng)前的行為顯示信息,使得用戶在效率和滿意度方面得到大大的提升。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、為提供用戶完成目標(biāo)的效率,更為了減少用戶出錯(cuò),轉(zhuǎn)變輸入方式,改輸入為選擇或手勢(shì)方式。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

3、使用手機(jī)已有的傳感器輸入。輸入文字搜索關(guān)注二維碼,改變成長(zhǎng)按識(shí)別二維碼,減少輸入麻煩和出錯(cuò)的問(wèn)題。

五、為停止做準(zhǔn)備

當(dāng)人們?nèi)硇牡耐度氲交顒?dòng)場(chǎng)景中,會(huì)對(duì)周?chē)母蓴_視而不見(jiàn),這種狀態(tài)被稱(chēng)為“流”,用戶在這種狀態(tài)下會(huì)有輕松的、溫和的快感,處理任務(wù),完成目標(biāo)也是會(huì)非常的,但是很不幸的是,我們使用的手機(jī),使用移動(dòng)應(yīng)用的場(chǎng)景,就是會(huì)因?yàn)楦鞣N事情而打斷。想象一下,錄下精彩的視頻,發(fā)送時(shí)網(wǎng)絡(luò)卡住了,不響應(yīng)了;發(fā)微博發(fā)到一半手機(jī)停電了;網(wǎng)購(gòu)付款時(shí)老板的電話來(lái)了,這在我們?nèi)粘I钪刑R?jiàn),所以聰明的、體貼的產(chǎn)品,是隨時(shí)為停止做好準(zhǔn)備的。

1、編輯中斷、網(wǎng)絡(luò)中斷時(shí),盡可能地保持之前狀態(tài),并存儲(chǔ)好用戶數(shù)據(jù)。我們總的原則就是讓用戶付出的勞動(dòng)不至于付之東流,也減少用戶的重復(fù)操作。例如美拍上傳視頻時(shí)網(wǎng)絡(luò)中斷,可幫用戶存到草稿箱,用戶稍后可重新編輯上傳。

2、誤操作或其他原因跳到錯(cuò)誤頁(yè)時(shí),不要讓用戶無(wú)路可走,最好給用戶下一步的選擇。產(chǎn)品程序無(wú)法使用,那么告訴用戶發(fā)生錯(cuò)誤的原因是什么,給出用戶選擇,他們還能做點(diǎn)什么,并給出解決方法。百度之前有個(gè)很好的體驗(yàn),在找不到頁(yè)面的時(shí)候,展示幫找失聯(lián)兒童的頁(yè)面,頁(yè)面找不到,可以幫忙找找孩子,很人性化的體驗(yàn)。

六、做好反饋

反饋是用產(chǎn)品的語(yǔ)言告訴用戶應(yīng)用正在做什么,進(jìn)展怎么樣了,接下來(lái)的操作會(huì)有什么結(jié)果。我們使用應(yīng)用,就像用戶與應(yīng)用的交談,用戶肯定不希望應(yīng)用是冷冰冰,無(wú)回應(yīng)的。

反饋可以分為過(guò)程反饋和結(jié)果反饋。

1、過(guò)程反饋。用戶在操作過(guò)程中,界面對(duì)操作進(jìn)行反饋,告訴用戶操作的狀態(tài)變化,用戶可根據(jù)反饋對(duì)任務(wù)進(jìn)行下一步選擇操作,一定要做到輕量,不突兀,細(xì)膩地反饋。富視覺(jué)非模態(tài)反饋,是用的比較多的一種反饋方式,通常為動(dòng)態(tài),視覺(jué)上很輕松地顯示反饋,不需要用戶做其他操作。我們看IOS的下載更新,就是這樣。免費(fèi)日程的發(fā)送邀約等待也是一種富視覺(jué)非模態(tài)反饋。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、結(jié)果反饋。用戶在完成操作后,告訴用戶操作結(jié)果,使得產(chǎn)品看起來(lái)很貼心,很有生命力。結(jié)果反饋也避免了用戶因?yàn)椴淮_認(rèn)而造成重新操作。連貫的動(dòng)畫(huà)和聲音都可以為用戶提供反饋。舉個(gè)刪除的例子,例如mac在刪除成功后,會(huì)有收走到垃圾桶的動(dòng)畫(huà),伴隨著粉碎的聲音,這種標(biāo)志性反饋會(huì)給用戶留下獨(dú)特的印象。

七、內(nèi)容為先

《移動(dòng)優(yōu)先》作者Luke,說(shuō)設(shè)計(jì)原則為“內(nèi)容優(yōu)先,之后才是導(dǎo)航”。這句話是什么意思,這是在產(chǎn)品設(shè)計(jì)中一個(gè)經(jīng)常容易犯的錯(cuò)誤。如何讓用戶找到內(nèi)容,所以造成了導(dǎo)航優(yōu)先,而忽略了用戶真正關(guān)心的內(nèi)容。在移動(dòng)設(shè)計(jì)中,可能你的產(chǎn)品界面很美觀,圖標(biāo)很精致,動(dòng)畫(huà)很流暢,設(shè)計(jì)獨(dú)到到令人耳目一新,用戶可能會(huì)對(duì)此充滿新鮮感,但是新鮮感終究有期限,用戶不會(huì)為了這個(gè)而去一直使用你的產(chǎn)品,沒(méi)有內(nèi)容的產(chǎn)品就像一本只有華麗封面卻沒(méi)有內(nèi)容的書(shū),所以用戶內(nèi)容才是最核心的。

1、突出內(nèi)容,使界面內(nèi)容更開(kāi)闊,使用戶完成目標(biāo)更專(zhuān)注。IOS備忘錄中,采用點(diǎn)聚式導(dǎo)航,用戶需要時(shí)才呼出,沒(méi)有無(wú)關(guān)雜亂的內(nèi)容,給界面一種開(kāi)闊的感覺(jué)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、提升屏幕利用率,把焦點(diǎn)放在用戶更注重的內(nèi)容上。對(duì)于手機(jī)來(lái)說(shuō),屏幕資源利用率的提升要做到優(yōu)化提升。知乎是以UGC為主的產(chǎn)品,用戶在上劃瀏覽內(nèi)容時(shí)搜索消失,當(dāng)用戶需要時(shí)向下滑即可顯現(xiàn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

人人都是產(chǎn)品經(jīng)理也是以UGC為主的產(chǎn)品,正所謂內(nèi)容為王,吧啦吧啦,算了不說(shuō)了,投稿去了。

用智能化登錄頁(yè)面提升數(shù)字營(yíng)銷(xiāo)轉(zhuǎn)化率,Instapage獲1500萬(wàn)美元A輪融資

博博


36氪 

今日,登錄頁(yè)面制作初創(chuàng)公司Instapage宣布他們完成了Morgan Stanley Expansion Capital投資的1500萬(wàn)美元的A輪。

Instapage是一家由數(shù)據(jù)分析引擎驅(qū)動(dòng)的,提供個(gè)性化登錄頁(yè)面模板,幫助企業(yè)提高數(shù)字營(yíng)銷(xiāo)轉(zhuǎn)化率的公司。Instapage目前擁有超過(guò)15,000名客戶,平均轉(zhuǎn)化率約為22%。

設(shè)計(jì)登陸頁(yè)面似乎并不是創(chuàng)業(yè)者感興趣的風(fēng)口,但I(xiàn)nstapage創(chuàng)始人兼首席執(zhí)行官Tyson Quick表示,這對(duì)于營(yíng)銷(xiāo)人員來(lái)說(shuō)卻是一個(gè)真正的問(wèn)題。

登陸頁(yè)面(Landing Page)又被稱(chēng)為引導(dǎo)頁(yè),是指在數(shù)字營(yíng)銷(xiāo)中,當(dāng)潛在用戶點(diǎn)擊廣告或者利用搜索引擎搜索后顯示給用戶的網(wǎng)頁(yè)。而在網(wǎng)站運(yùn)營(yíng)的邏輯里,最重要的三個(gè)因素是拉新、轉(zhuǎn)化和留存,那么,作為第一個(gè)關(guān)卡的登錄頁(yè)面就顯得尤為重要。

Quick之前曾在一家名為Jounce的營(yíng)銷(xiāo)產(chǎn)品上工作,他發(fā)現(xiàn),即使有人點(diǎn)擊了Jounce廣告并最終進(jìn)入了公司網(wǎng)站,其中只有3%的轉(zhuǎn)化率。

“這有點(diǎn)荒謬,因?yàn)樗麄円呀?jīng)點(diǎn)擊了廣告,往往具有明確的消費(fèi)意向?!盦uick說(shuō)。而采用針對(duì)核心客戶群的個(gè)性化登錄頁(yè)面之后,Jounce轉(zhuǎn)化率提高到了20%左右。

2012年,Quick決定將公司業(yè)務(wù)的重點(diǎn)轉(zhuǎn)移到Instapage,現(xiàn)在Instapage成為了一個(gè)更廣泛的平臺(tái),用于創(chuàng)建和測(cè)試針對(duì)不同訪問(wèn)者個(gè)性化目標(biāo)網(wǎng)頁(yè)。

“我們可以成為廣告技術(shù)與傳統(tǒng)營(yíng)銷(xiāo)和銷(xiāo)售技術(shù)之間的橋梁,”Quick說(shuō),“這些技術(shù)能夠幫助廣告投放商鎖定核心用戶。一旦用戶點(diǎn)擊廣告,自動(dòng)化營(yíng)銷(xiāo)就會(huì)啟動(dòng),將這些用戶納入企業(yè)的CRM系統(tǒng)。這是以往的技術(shù)中缺失的轉(zhuǎn)換點(diǎn)?!?

用智能化登錄頁(yè)面提升數(shù)字營(yíng)銷(xiāo)轉(zhuǎn)化率,Instapage獲1500萬(wàn)美元A輪融資

圍繞Quick所謂的“點(diǎn)擊廣告后就引導(dǎo)轉(zhuǎn)化”,Instapage開(kāi)發(fā)了三個(gè)關(guān)鍵組件——可擴(kuò)展創(chuàng)建,頁(yè)面優(yōu)化和個(gè)性化。而像Optimizely可能只會(huì)解決其中的一些問(wèn)題,而Instapage將三者結(jié)合了起來(lái)。

而談及如何采集用戶數(shù)據(jù),為企業(yè)訂制個(gè)性化登錄頁(yè)面時(shí),Quick認(rèn)為公司不需要詳細(xì)的用戶數(shù)據(jù):“個(gè)性化的標(biāo)簽來(lái)自廣告本身。我們可以從他們點(diǎn)擊的廣告中收集到數(shù)據(jù)?!?

之前,Instapage已經(jīng)獲得了200萬(wàn)美元的種子資金。而且目前該公司盈利,Quick說(shuō)每年的經(jīng)常性收入為1200萬(wàn)美元,并沒(méi)有融資需求。但是,他發(fā)現(xiàn)Morgan Stanley Expansion Capital愿意挖掘并了解Instapage的業(yè)務(wù)。

Morgan Stanley Expansion Capital主管Pete Chung表示,“Instapage專(zhuān)注于提高數(shù)字營(yíng)銷(xiāo)效率這個(gè)細(xì)分領(lǐng)域,并且可以在不需要外部或技術(shù)資源的情況下進(jìn)行更精準(zhǔn)的廣告活動(dòng),創(chuàng)造了令人印象深刻的產(chǎn)品?!?


日歷

鏈接

個(gè)人資料

存檔