從遊戲化思維出發的網站設計,從網頁載入開始就是驚喜!

今天要跟大家介紹一個有趣的網站。因為太有意思了,所以請視情況將音量調小或關閉以免遭人側目。
 
音量調好了嗎?現在請點擊以下網址並隨意瀏覽:
(瀏覽之後請記得回到本文)https://bruno-simon.com/

遙控車跑半天,你發現這是什麼網站了嗎?

不,它不是遊戲網站,它是一名法國前端工程師Bruno Simon的個人履歷與作品集網站。Bruno Simon的個人網站上線一週,就成功吸引了16萬人次造訪,造訪者在網站上的平均停留時間為54秒。就一份展示個人履歷的網站而言,這樣的數字應該算是相當成功。(你在Bruno Simon的網站上停留了幾秒呢?)

Bruno Simon既不是明星、也非名流,為什麼他的個人網站可以吸引這麼多人造訪?因為他的網站新奇、有趣,完全跳脫了一般大眾對於個人履歷與作品集的印象。然而這般的新奇有趣,卻是Bruno Simon縝密思考的結果。

Bruno Simon打從一開始就決定要將自己的履歷與作品集設計成一個具有獨創性、娛樂性、可玩性、又讓人易於理解的網站。換句話說,他要做的不是一個自嗨的展示看板,而是讓造訪者能與之互動、並樂於與之互動 的網站(或許還有展示前端技術能力的成份在)。為了達到這個目的,Bruno Simon化網站為一個3D立體空間,將模擬真實世界物理效果的設計融入其中,讓網頁上的所有物件都是可以「碰撞」的,甚至利用這樣的概念在網站上規畫出一個「遊樂場」單元。

至此,Bruno Simon的網站已經如他所說的具有獨創性、娛樂性、可玩性。但他是如何做到讓人易於理解呢?Bruno Simon在設計網站時,便考慮到如何引導網站使用者,以及如何帶給使用者沉浸式的體驗。以下是他的部份設計概念:

➊ 網站載入後,利用畫面上浮出地面的世界與從天而降、落地彈跳的小汽車讓使用者意識到在網站上進行的操縱會模擬真實世界的物理效果。(增加了使用者對操縱小汽車的期待,也讓操縱體驗更具趣味性。)

❷ 極簡單的文字說明方向鍵的使用方法,幫助使用者上手。

❸ 汽車的起始位置為刻意安排的結果。Bruno Simon希望使用者在遙控車初體驗的時候就能撞上「Bruno Simon」的字樣,進而體會到網站上的物件是可以移動的。(很棒的主意!)

❹ 利用地磚、牆面、看板、互動區塊等設計引導使用者依Bruno Simon的想法瀏覽該網站。

當然,Bruno Simon沒有忘記他所設計的是他個人的履歷與作品集網站。在網站使用者享受著學習駕馭遙控車、探索這片未知天地的樂趣時,自然而然就會行經(或撞上)Bruno Simon的作品展示與連結。當你看見「OPEN」的按鈕因為你所控制的車子碾過而浮起,你會無視這項「點擊」的邀請嗎?

Bruno Simon將以上的設計概念與應用技術寫成了一篇「幕後花絮」:https://t2m.io/15XvhHos 。文章通篇沒有提到「遊戲化」(gamification),但就網站的設計目的、設定、引導使用者沉浸其中的手法來看,Bruno Simon正是以「遊戲化思維」在執行他的個人網站專案。此外他也提到,因為他很清楚完全靠他自己獨力打造這個網站將會耗費一段相當長的時間(最後他花了三個月),所以他要確定自己進行的這項專案能讓他樂在其中,顯見Bruno Simon雖然沒說,但他還真可算是個不折不扣的遊戲化思維實踐者。

Successfully
Refresh Cart
Network error, please refresh error