實(shí)戰(zhàn)：網(wǎng)絡(luò)教育機(jī)構(gòu)的網(wǎng)站互動(dòng)設(shè)計(jì)初探

實(shí)戰(zhàn)：網(wǎng)絡(luò)教育機(jī)構(gòu)的網(wǎng)站互動(dòng)設(shè)計(jì)初探

這是一篇拋磚引玉的文章，網(wǎng)校網(wǎng)在實(shí)施產(chǎn)品設(shè)計(jì)的時(shí)候，研究了國(guó)內(nèi)網(wǎng)絡(luò)教育機(jī)構(gòu)的眾多模式，同時(shí)與終端用戶交流頗多，積累了一些設(shè)計(jì)心得。如今網(wǎng)絡(luò)教育產(chǎn)品設(shè)計(jì)的重要性已經(jīng)成為業(yè)內(nèi)的共識(shí)，作為第三方平臺(tái)的運(yùn)營(yíng)者，希望把一些感受與業(yè)內(nèi)人士探討分享，以期與眾位高人探討。特別指出的是，本文在這里只探討作為網(wǎng)絡(luò)教育機(jī)構(gòu)存在的在線教育網(wǎng)站，那些以單點(diǎn)突破的網(wǎng)絡(luò)學(xué)習(xí)網(wǎng)站（例如背單詞，課程表，習(xí)題）不在此列。網(wǎng)校網(wǎng)首頁(yè)設(shè)計(jì)一在無(wú)創(chuàng)新中求創(chuàng)新想必很多朋友閱讀此文的時(shí)候，都會(huì)看一下網(wǎng)校網(wǎng)做成了什么樣子，由于本文的心得皆從網(wǎng)校網(wǎng)設(shè)計(jì)中總結(jié)，所以還真得先解釋一下網(wǎng)校網(wǎng)的模式。前幾天有位撰稿人朋友采訪了我。他提到一個(gè)問(wèn)題：“網(wǎng)校網(wǎng)定位是解決網(wǎng)絡(luò)學(xué)習(xí)孤獨(dú)癥的學(xué)習(xí)社區(qū)，但為什么從首頁(yè)看不出來(lái)?！边@的確是一個(gè)信息量很大的問(wèn)題，后來(lái)那位朋友寫(xiě)了稿子，名字叫《從無(wú)創(chuàng)意處大創(chuàng)意》，其實(shí)這就是我想分享的最大的心得，即“有些產(chǎn)品設(shè)計(jì)可以完全顛覆性創(chuàng)新，有些行業(yè)因用戶習(xí)慣所致，還真得依從現(xiàn)有用戶群體的使用習(xí)慣入手，哪怕看起來(lái)土些”。中國(guó)的教育培訓(xùn)行業(yè)就是這樣的一個(gè)特殊領(lǐng)域，作為服務(wù)性產(chǎn)品，教育的標(biāo)準(zhǔn)化程度低，學(xué)科涉及面廣，銷售過(guò)程的售前依賴度高，入行門(mén)檻低，因此教育培訓(xùn)行業(yè)仍然很難規(guī)范。在行業(yè)發(fā)展的十?dāng)?shù)年中，由機(jī)構(gòu)和用戶的彼此博弈、行業(yè)內(nèi)部的不斷自調(diào)整，已經(jīng)形成了一種根深蒂固的用戶認(rèn)知，即“也許用戶認(rèn)為，只有這樣的模式才是教育機(jī)構(gòu)”。也正是因?yàn)檫@樣的原因，雖然當(dāng)前傳統(tǒng)的網(wǎng)絡(luò)教育機(jī)構(gòu)貌似“頁(yè)面很土”，但仍然生意興隆。同樣因?yàn)檫@樣的原因，網(wǎng)校網(wǎng)經(jīng)過(guò)多次改版適應(yīng)，仍然回歸了目前的首頁(yè)樣式。這種設(shè)計(jì)雖然“看起來(lái)沒(méi)啥特別”，但首頁(yè)的跳出率只有20%。作網(wǎng)絡(luò)教育行業(yè)的創(chuàng)業(yè)者，在此我最大的心得是：我們沒(méi)有能力去教育用戶，在顛覆性創(chuàng)新的風(fēng)險(xiǎn)較大的時(shí)候，不如從現(xiàn)有模式入手進(jìn)行微創(chuàng)新。而且專業(yè)人士能夠看出，現(xiàn)有的網(wǎng)絡(luò)教育機(jī)構(gòu)的頁(yè)面仍然具有很大的“微創(chuàng)新”的提升余地。我想，在分享互動(dòng)設(shè)計(jì)心得的時(shí)候，這是個(gè)重要的思路。否則做出的產(chǎn)品很可能被媒體叫好，但用戶不一定能夠認(rèn)可。二環(huán)球模式、正保模式與學(xué)而思模式在眾多的在線教育討論中，我們很少看到提及現(xiàn)有的網(wǎng)絡(luò)教育機(jī)構(gòu)，大家對(duì)創(chuàng)新模式都非常感興趣，這的確是個(gè)有意思的現(xiàn)象。其實(shí)，傳統(tǒng)的網(wǎng)絡(luò)教育機(jī)構(gòu)能夠在市場(chǎng)上立足多年，每年為上百萬(wàn)學(xué)員提供網(wǎng)絡(luò)課程，目前網(wǎng)絡(luò)教育領(lǐng)域的主要收入也在他們之中產(chǎn)生，這其中肯定存在合理性。而且即便傳統(tǒng)的教育機(jī)構(gòu)設(shè)計(jì)有待提升，但它們?cè)诙嗄甑氖袌?chǎng)推廣中培養(yǎng)了用戶的使用習(xí)慣，這種力量也是不得小覷的。因此縱觀各網(wǎng)校的UE規(guī)律很重要，宏觀歸納，現(xiàn)有教育機(jī)構(gòu)的網(wǎng)站架構(gòu)可以總結(jié)為三大類：環(huán)球網(wǎng)校首頁(yè)設(shè)計(jì)1.環(huán)球網(wǎng)校模式“環(huán)球職業(yè)教育在線”運(yùn)營(yíng)多年了，是面向職業(yè)教育的綜合性網(wǎng)絡(luò)培訓(xùn)機(jī)構(gòu)。其特點(diǎn)是教學(xué)的學(xué)科多，網(wǎng)站提供的資料內(nèi)容多。如果我們大量觀察網(wǎng)校頁(yè)面，我們可以看出，很多網(wǎng)絡(luò)教育機(jī)構(gòu)都在模仿環(huán)球的網(wǎng)站結(jié)構(gòu)，這種模式的特點(diǎn)是：1-1首頁(yè)有一個(gè)大的學(xué)科目錄，導(dǎo)航中也大量開(kāi)列學(xué)科目錄。1-2首頁(yè)并非用戶的閱讀重點(diǎn)，用戶的重點(diǎn)在于各個(gè)學(xué)科的二級(jí)頻道。1-3學(xué)科的二級(jí)頻道大量展示的學(xué)習(xí)資料、考試動(dòng)態(tài)、文字密布，促銷廣告和招生的課表嵌入其中。1-4環(huán)球網(wǎng)校模式形成了一種課表規(guī)范，即，把課程按照班型縱向排列，按照商品信息橫向排列，形成二維課表。用戶需要進(jìn)一步理解后再選課。1-5網(wǎng)校的促銷信息嵌入到課表之下，這個(gè)部分幾乎都是文字描述。1-6點(diǎn)擊課程后，直接進(jìn)入付費(fèi)頁(yè)面。遠(yuǎn)程教育的中華會(huì)計(jì)網(wǎng)校首頁(yè)"src="/2013/0411/1365661333459.jpg"width="560"height="558"/>正保遠(yuǎn)程教育的中華會(huì)計(jì)網(wǎng)校首頁(yè)2.正保模式正保遠(yuǎn)程教育，是紐約證券交易所的上市公司，是國(guó)內(nèi)唯一一家以遠(yuǎn)程教育在海外上市的機(jī)構(gòu)，這一點(diǎn)值得業(yè)內(nèi)人士驕傲。正保遠(yuǎn)程教育，是以中華會(huì)計(jì)網(wǎng)校為基礎(chǔ)，同時(shí)提供了十幾個(gè)不同方向的分校模式，如中小學(xué)教育網(wǎng)，建設(shè)工程教育網(wǎng)等等。因此，正保遠(yuǎn)程教育本身也是個(gè)多學(xué)科的綜合性網(wǎng)校，與環(huán)球網(wǎng)校不同的是，正保把不同學(xué)科按大類分割成分校，而每個(gè)分校的內(nèi)容相對(duì)聚焦。正保的中華會(huì)計(jì)網(wǎng)校結(jié)構(gòu)，是行業(yè)性方向較強(qiáng)的網(wǎng)校常見(jiàn)的模式。2-1每個(gè)分校網(wǎng)站涉及的學(xué)科數(shù)量大大減少，因此，學(xué)科目錄不再是分站頁(yè)面的主要內(nèi)容。2-2分校結(jié)構(gòu)的模式，把學(xué)科目錄和資訊分類信息統(tǒng)一在導(dǎo)航里，整個(gè)網(wǎng)站仍然以資訊類網(wǎng)站的模式呈現(xiàn)。2-3課程仍然以課表式展示，點(diǎn)擊課程后，直接進(jìn)入付費(fèi)頁(yè)面。百度權(quán)重查詢站長(zhǎng)交易友情鏈接交換網(wǎng)站監(jiān)控服務(wù)器監(jiān)控SEO監(jiān)控學(xué)而思網(wǎng)校首頁(yè)3.學(xué)而思模式學(xué)而思模式所面向的學(xué)科規(guī)模特點(diǎn)與正保網(wǎng)校的分站類似，即，涉及的學(xué)科方向相對(duì)集中。與正保模式不同的是，學(xué)而思網(wǎng)校采用了課程信息頁(yè)直播的方式，這種模式被K12或英語(yǔ)類網(wǎng)校采用較多。3-1學(xué)而思網(wǎng)校的課程展示是列表式，而不是環(huán)球正保的課表式，即，課程按行展示，每一行的信息量較大、3-2與環(huán)球模式、正保模式不同，學(xué)而思模式的網(wǎng)站具有產(chǎn)品信息詳情頁(yè)。3-3在產(chǎn)品信息詳情頁(yè)中自動(dòng)播放試聽(tīng)內(nèi)容。以上是從網(wǎng)站結(jié)構(gòu)視角觀察的三種常見(jiàn)模式，相信這些不同的模式都是各機(jī)構(gòu)多年摸索的結(jié)果，這對(duì)于創(chuàng)業(yè)者有較強(qiáng)的參考價(jià)值。不過(guò)值得一提的是，在UI角度，傳統(tǒng)的網(wǎng)校的確擁有極大的提升空間，這恰恰是新近的創(chuàng)業(yè)者的機(jī)會(huì)。三把課程切碎談到這里，我想深諳教學(xué)的業(yè)內(nèi)人士肯定會(huì)心一笑，這應(yīng)該不算是什么秘密了。筆者之所以在文章中提及，是因?yàn)槲覀儜?yīng)該不僅從教學(xué)的角度，而是從UE的角度看待這個(gè)問(wèn)題。所謂把課程切碎，就是把一堂完整的授課視頻，按照知識(shí)點(diǎn)和教學(xué)目標(biāo)分解成多個(gè)小段，并且加以排列組合。例如老師講了一堂英語(yǔ)課文，視頻錄制了2個(gè)小時(shí)，目前比較專業(yè)的做法是，把這2個(gè)小時(shí)的課程按照教學(xué)內(nèi)容分解成課文部分、習(xí)題部分、詞匯部分、復(fù)習(xí)部分等等。這樣做的結(jié)果是，我們得到了N多視頻，這些不同課程的視頻即出現(xiàn)了多個(gè)組合方法。即，把所有課文的習(xí)題部分整合起來(lái)，就形成了習(xí)題班；把所有課文的詞匯部分整合起來(lái)，就形成了詞匯班……這樣我們就擁有了多個(gè)班型，適合不同學(xué)員的學(xué)習(xí)口味。做到這一點(diǎn)是教研的功夫，更是互動(dòng)設(shè)計(jì)的思路。即，把課程切碎，為用戶提供了大量，標(biāo)準(zhǔn)化的，個(gè)性化的課程自助選擇空間。這個(gè)思路的確是初創(chuàng)的網(wǎng)絡(luò)教育企業(yè)不能忽視的。四向電商靠攏，又得有教育味不論任何學(xué)科的學(xué)習(xí)者，他們首先是普通的互聯(lián)網(wǎng)用戶，他們?cè)谏罾锝佑|最多的肯定是淘寶、京東、凡客這樣的電商平臺(tái)。因此，作為付費(fèi)者，用戶使用網(wǎng)站的思維模式首先是被電商平臺(tái)強(qiáng)化的。所以，在網(wǎng)絡(luò)教育機(jī)構(gòu)的產(chǎn)品設(shè)計(jì)上，千萬(wàn)不能和電商的UE相差太遠(yuǎn)，否則會(huì)導(dǎo)致用戶迷惑。例如，課表式的展示雖然比較直觀，但用戶會(huì)多花一些心思去理解課表含義，如果從課表點(diǎn)擊課程后卻發(fā)現(xiàn)沒(méi)有產(chǎn)品信息頁(yè)，如果把課表嵌在海量的文本鏈接之中，這種方式很容易讓用戶眼睛疼，想必這對(duì)用戶的耐心是一大考驗(yàn)了。其他諸如促銷信息的展示，文案設(shè)計(jì)，按鈕設(shè)計(jì)等等，也無(wú)不如此。但是如果單純地采用電商模版，這也有問(wèn)題，會(huì)讓用戶感覺(jué)失去了教育感，對(duì)頁(yè)面的專業(yè)性體驗(yàn)產(chǎn)生質(zhì)疑。如何在二者之間拿捏分寸這真的是個(gè)功夫，是需要UE高手參與的工作。其實(shí)這就是本文在前面所提到的“從無(wú)創(chuàng)新處創(chuàng)新”，所謂“無(wú)創(chuàng)新”，是指網(wǎng)站的教育味不能變，所謂的“創(chuàng)新”，其實(shí)也就是把用戶常見(jiàn)的成功的UE模式引入進(jìn)來(lái)。Pinterest的瀑布流式網(wǎng)站設(shè)計(jì)五瀑布流、圖片與文字瀑布流的網(wǎng)站真的很誘人，因?yàn)榇罅康膱D片展示會(huì)吸引用戶的注意力。但對(duì)于網(wǎng)絡(luò)教育機(jī)構(gòu)而言，瀑布流的設(shè)計(jì)會(huì)遇到難題，即，瀑布流的方式很難適應(yīng)所有學(xué)科的學(xué)習(xí)者的內(nèi)容需要。如果一個(gè)一級(jí)建造師的學(xué)習(xí)者，肯定希望看到一級(jí)建造師課程的瀑布流，但除非你是一建的專門(mén)網(wǎng)校，否則你就會(huì)損失大量的其他學(xué)科用戶。但如果我們把所有學(xué)科的課程均勻的瀑布一下，又會(huì)使用戶覺(jué)得專業(yè)性不足。而且作為教育類網(wǎng)站，能夠用于瀑布流的圖片內(nèi)容比較單一，因此，個(gè)人的心得是，除非專業(yè)性很強(qiáng)的教育機(jī)構(gòu)，否則應(yīng)該慎用瀑布流。順便吐個(gè)槽，我曾經(jīng)見(jiàn)過(guò)瀑布流式的課程信息頁(yè)面，當(dāng)時(shí)的感受是，即便作為專業(yè)人士，我也看不懂。網(wǎng)絡(luò)教育機(jī)構(gòu)能夠展示的圖片恐怕只有教師照片和促銷廣告了，那么在這個(gè)方面下功夫吧。把圖片做精一些，背景豐富一些，這至關(guān)重要，因?yàn)檫@是打破頁(yè)面枯燥性的利器。說(shuō)到頁(yè)面枯燥，教育類網(wǎng)站也遇到一個(gè)不能回避的問(wèn)題，即，如果我們不展示文字資料，那么用戶會(huì)覺(jué)得網(wǎng)絡(luò)頁(yè)面缺乏專業(yè)性。如果我們展示了文字資料，那么大量的文本會(huì)讓用戶眼花繚亂。這是個(gè)兩難，另外，大量的文本鏈接有助于SEO，這個(gè)也是網(wǎng)絡(luò)推廣的需要，所以很多網(wǎng)校寧可體現(xiàn)專業(yè)性排列大量文本，也要犧牲頁(yè)面的易讀性。因此，目前的狀況對(duì)UE的設(shè)計(jì)者是個(gè)挑戰(zhàn)，如果解決了這個(gè)問(wèn)題，那你的網(wǎng)站肯定所向無(wú)敵。六UI設(shè)計(jì)，你可以做的更好UI設(shè)計(jì)太敏感了，縱然在UE中我們有N多個(gè)“不得不如此”，但UI設(shè)計(jì)肯定能夠緩解“不得不如此”的缺陷。在這里，我實(shí)在不明白為什么教育機(jī)構(gòu)（包括線下機(jī)構(gòu)）的UI還采取漸變按鈕和金屬感導(dǎo)航，大紅大綠的主題色，復(fù)雜的線條分割，粗重的色彩點(diǎn)綴，小小的行距。這一點(diǎn)真的不得不吐槽，我目前能夠理解的是，也許用戶心理已經(jīng)適應(yīng)了這種美術(shù)設(shè)計(jì)，認(rèn)為這才是教育機(jī)構(gòu)的特點(diǎn)。但用戶最終是以眼睛舒服為導(dǎo)向，現(xiàn)在的用戶喜歡微軟雅黑字體，簡(jiǎn)潔的色塊，功能性區(qū)域分割，Web2.0的圖標(biāo)，手繪的banner。從網(wǎng)校網(wǎng)的用戶感覺(jué)來(lái)看，這個(gè)真的可以有，而且這恰恰是在線教育機(jī)構(gòu)的創(chuàng)意空間所在。因此，只要把握好用戶傳統(tǒng)心里和互聯(lián)網(wǎng)設(shè)計(jì)潮流的尺度，完全可以極大提升網(wǎng)絡(luò)教育機(jī)