網路教育機構的網站互動設計初探

張迪歐(網校網CEO)這是一篇抛磚引玉的文章，網校網在實施產品設計的時候，研究了國內網路教育機構的眾多模式，同時與終端使用者交流頗多，積累了一些設計心得。 如今網路教育產品設計的重要性已經成為業內的共識，作為協力廠商平臺的運營者，希望把一些感受與業內人士探討分享，以期與眾位高人探討。 特別指出的是，本文在這裡只探討作為網路教育機構存在的線上教育網站，那些以單點突破的網路學習網站(例如背單詞，課程表，習題)不在此列。 網校網首頁設計一 在無創新中求創新想必很多朋友閱讀此文的時候，都會看一下網校網做成了什麼樣子，由於本文的心得皆從網校網設計中總結，所以還真得先解釋一下網校網的模式。 前幾天有位撰稿人朋友採訪了我。 他提到一個問題：「網校網定位是解決網路學習孤獨症的學習社區，但為什麼從首頁看不出來。 」這的確是一個資訊量很大的問題，後來那位朋友寫了稿子，名字叫《從無創意處大創意》，其實這就是我想分享的最大的心得，即「有些產品設計可以完全顛覆性創新，有些行業因使用者習慣所致，還真得依從現有使用者群體的使用習慣入手， 哪怕看起來土些」。 中國的教育培訓行業就是這樣的一個特殊領域，作為服務性產品，教育的標準化程度低，學科涉及面廣，銷售過程的售前依賴度高，入行門檻低，因此教育培訓行業仍然很難規範。 在行業發展的十數年中，由機構和使用者的彼此博弈、行業內部的不斷自調整，已經形成了一種根深蒂固的使用者認知，即「也許使用者認為，只有這樣的模式才是教育機構」。 也正是因為這樣的原因，雖然當前傳統的網路教育機構貌似「頁面很土」，但仍然生意興隆。 同樣因為這樣的原因，網校網經過多次改版適應，仍然回歸了目前的首頁樣式。 這種設計雖然「看起來沒啥特別」，但首頁的跳出率只有20%。 作網路教育行業的創業者，在此我最大的心得是：我們沒有能力去教育使用者，在顛覆性創新的風險較大的時候，不如從現有模式入手進行微創新。 而且專業人士能夠看出，現有的網路教育機構的頁面仍然具有很大的「微創新」的提升餘地。 我想，在分享互動設計心得的時候，這是個重要的思路。 否則做出的產品很可能被媒體叫好，但使用者不一定能夠認可。 二 環球模式、正保模式與學而思模式在眾多的線上教育討論中，我們很少看到提及現有的網路教育機構，大家對創新模式都非常感興趣，這的確是個有意思的現象。 其實，傳統的網路教育機構能夠在市場上立足多年，每年為上百萬學員提供網路課程，目前網路教育領域的主要收入也在他們之中產生，這其中肯定存在合理性。 而且即便傳統的教育機構設計有待提升，但它們在多年的市場推廣中培養了使用者的使用習慣，這種力量也是不得小覷的。 因此縱觀各網校的UE規律很重要，宏觀歸納，現有教育機構的網站架構可以總結為三大類：環球網校首頁設計1. 環球網校模式「環球職業教育線上」運營多年了，是面向職業教育的綜合性網路培訓機構。 其特點是教學的學科多，網站提供的資料內容多。 如果我們大量觀察網校頁面，我們可以看出，很多網路教育機構都在模仿環球的網站結構，這種模式的特點是：1-1 首頁有一個大的學科目錄，導航中也大量開列學科目錄。 1-2 首頁並非使用者的閱讀重點，使用者的重點在於各個學科的二級頻道。 1-3 學科的二級頻道大量展示的學習資料、考試動態、文字密佈，促銷廣告和招生的課表嵌入其中。 1-4 環球網校模式形成了一種課表規範，即，把課程按照班型縱向排列，按照商品資訊橫向排列，形成二維課表。 使用者需要進一步理解後再選課。 1-5 網校的促銷資訊嵌入到課表之下，這個部分幾乎都是文字描述。 1-6 點擊課程後，直接進入付費頁面。 正保遠端教育的中華會計網校首頁2. 正保模式正保遠端教育，是紐約證券交易所的上市公司，是國內唯一一家以遠端教育在海外上市的機構，這一點值得業內人士驕傲。 正保遠端教育，是以中華會計網校為基礎，同時提供了十幾個不同方向的分校模式，如中小學教育網，建設工程教育網等等。 因此，正保遠端教育本身也是個多學科的綜合性網校，與環球網校不同的是，正保把不同學科按大類分割成分校，而每個分校的內容相對聚焦。 正保的中華會計網校結構，是行業性方向較強的網校常見的模式。 2-1 每個分校網站涉及的學科數量大大減少，因此，學科目錄不再是分站頁面的主要內容。 2-2 分校結構的模式，把學科目錄和資訊分類資訊統一在導航裡，整個網站仍然以資訊類網站的模式呈現。 2-3 課程仍然以課表式展示，點擊課程後，直接進入付費頁面。 學而思網校首頁3. 學而思模式學而思模式所面向的學科規模特點與正保網校的分站類似，即，涉及的學科方向相對集中。 與正保模式不同的是，學而思網校採用了課程資訊頁直播的方式，這種模式被K12或英語類網校採用較多。 3-1 學而思網校的課程展示是清單式，而不是環球正保的課表式，即，課程按行展示，每一行的資訊量較大、3-2 與環球模式、正保模式不同，學而思模式的網站具有產品資訊詳情頁。 3-3 在產品資訊詳情頁中自動播放試聽內容。 以上是從網站結構視角觀察的三種常見模式，相信這些不同的模式都是各機構多年摸索的結果，這對於創業者有較強的參考價值。 不過值得一提的是，在UI角度，傳統的網校的確擁有極大的提升空間，這恰恰是新近的創業者的機會。 三 把課程切碎談到這裡，我想深諳教學的業內人士肯定會心一笑，這應該不算是什麼秘密了。 筆者之所以在文章中提及，是因為我們應該不僅從教學的角度，而是從UE的角度看待這個問題。 所謂把課程切碎，就是把一堂完整的授課視頻，按照知識點和教學目標分解成多個小段，並且加以排列組合。 例如老師講了一堂英語課文，視頻錄製了2個小時，目前比較專業的做法是，把這2個小時的課程按照教學內容分解成課文部分、習題部分、詞彙部分、複習部分等等。 這樣做的結果是，我們得到了N多視頻，這些不同課程的視頻即出現了多個組合方法。 即，把所有課文的習題部分整合起來，就形成了習題班；把所有課文的詞彙部分整合起來，就形成了詞彙班...... 這樣我們就擁有了多個班型，適合不同學員的學習口味。 做到這一點是教研的功夫，更是互動設計的思路。 即，把課程切碎，為使用者提供了大量，標準化的，個人化的課程自助選擇空間。 這個思路的確是初創的網路教育企業不能忽視的。 四 向電商靠攏，又得有教育味不論任何學科的學習者，他們首先是普通的互聯網使用者，他們在生活裡接觸最多的肯定是淘寶、京東、凡客這樣的電商平臺。 因此，作為付費者，使用者使用網站的思維模式首先是被電商平臺強化的。 所以，在網路教育機構的產品設計上，千萬不能和電商的UE相差太遠，否則會導致使用者迷惑。 例如，課表式的展示雖然比較直觀，但使用者會多花一些心思去理解課表含義，如果從課表點擊課程後卻發現沒有產品資訊頁，如果把課表嵌在海量的文本連結之中，這種方式很容易讓使用者眼睛疼，想必這對使用者的耐心是一大考驗了。 其他諸如促銷資訊的展示，文案設計，按鈕設計等等，也無不如此。 但是如果單純地採用電商模版，這也有問題，會讓使用者感覺失去了教育感，對頁面的專業性體驗產生質疑。 如何在二者之間拿捏分寸這真的是個功夫，是需要UE高手參與的工作。 其實這就是本文在前面所提到的「從無創新處創新」，所謂「無創新」，是指網站的教育味不能變，所謂的「創新」，其實也就是把使用者常見的成功的UE模式引入進來。 Pinterest的瀑布流式網站設計五 瀑布流、圖片與文字瀑布流的網站真的很誘人，因為大量的圖片展示會吸引使用者的注意力。 但對於網路教育機構而言，瀑布流的設計會遇到難題，即，瀑布流的方式很難適應所有學科的學習者的內容需要。 如果一個一級建造師的學習者，肯定希望看到一級建造師課程的瀑布流，但除非你是一建的專門網校，否則你就會損失大量的其他學科使用者。 但如果我們把所有學科的課程均勻的瀑布一下，又會使使用者覺得專業性不足。 而且作為教育類網站，能夠用於瀑布流的圖片內容比較單一，因此，個人的心得是，除非專業性很強的教育機構，否則應該慎用瀑布流。 順便吐個槽，我曾經見過瀑布流式的課程資訊頁面，當時的感受是，即便作為專業人士，我也看不懂。 網路教育機構能夠展示的圖片恐怕只有教師照片和促銷廣告了，那麼在這個方面下功夫吧。 把圖片做精一些，背景豐富一些，這至關重要，因為這是打破頁面枯燥性的利器。 說到頁面枯燥，教育類網站也遇到一個不能回避的問題，即，如果我們不展示文字資料，那麼使用者會覺得網路頁面缺乏專業性。 如果我們展示了文字資料，那麼大量的文本會讓使用者眼花繚亂。 這是個兩難，另外，大量的文本連結有助於SEO，這個也是網路推廣的需要，所以很多網校寧可體現專業性排列大量文本，也要犧牲頁面的易讀性。 因此，目前的狀況對UE的設計者是個挑戰，如果解決了這個問題，那你的網站肯定所向無敵。 六 UI設計，你可以做的更好UI設計太敏感了，縱然在UE中我們有N多個「不得不如此」，但UI設計肯定能夠緩解「不得不如此」的缺陷。 在這裡，我實在不明白為什麼教育機構(包括線下機構)的UI還採取漸變按鈕和金屬感導航，大紅大綠的主題色，複雜的線條分割，粗重的色彩點綴，小小的行距。 這一點真的不得不吐槽，我目前能夠理解的是，也許使用者心理已經適應了這種美術設計，認為這才是教育機構的特點。 但使用者最終是以眼睛舒服為導向，現在的使用者喜歡微軟雅黑字體，簡潔的色塊，功能性區域分割，Web2.0的圖示，手繪的banner。 從網校網的使用者感覺來看，這個真的可以有，而且這恰恰是線上教育機構的創意空間所在。 因此，只要把握好使用者傳統心裡和互聯網設計潮流的尺度，完全可以極大提升網路教育機構的產品體驗。 七 使用者還需要什麼除了這些，使用者還需要什麼呢？ 在網校網與使用者的接觸中感覺到，使用者除了授課之外，還需要教學組織和課後服務。 使用者不希望購課後在頁面提問題沒人搭理，不希望撥打客服電話態度冷淡。 使用者希望網校能有個管理感，例如給使用者留個作業；定期提醒使用者：「你該上課了，快點來」；甚至在使用者長期不上課的時候，給使用者打個2分，這都是使用者心理所需要的，而這些恰恰是教育之外的東西，也是初創的網路教育機構可以下功夫的地方。 以上是對線上教育產品互動設計的一些觀察和思考的心得，網校網是網路教育行業的協力廠商社區和選課平臺，從自身來講，最希望看到的是網路教育行業發展壯大。 因此作為網校網CEO，把自己在一線工作的粗淺心得分享給各位同好，以期能夠起到抛磚引玉的作用，如有觀點偏頗之處，還望不要貽笑大方吧。