DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 交互設計實例:電商B2C優惠券選擇需求
交互設計實例:電商B2C優惠券選擇需求
編輯:關於網頁技巧     

我們在互聯網上經常買東西,也會經常收到優惠券,最近有空做了一個小調研,在一個網站上,有30%的用戶擁有超過10張的生效優惠券,但是,當我們使用優惠券的時候,我們發現一個問題,很多網站在購物結算頁面只能顯示10張優惠券,那麼,如果多於10張優惠券後,我們怎麼選擇使用呢?

我模擬一個用戶,當我去一家超市,我購買了很多或者單件商品後,我發現我包包裡有N張優惠券,我開始糾結了,我該使用那張呢?於是,我開始翻包裡的優惠券,看看哪張快過期了,哪張是我這次想用的,我下次使用的,平時呢,不會理這些優惠券,只有當使用的時候才會看一眼。

我看過國內N多B2C站,在優惠券上,都沒有做過這樣的交互

但是我發現這樣用戶,隨著網購的逐漸增多,越來越多有人有更多的優惠券

所以,我在來做這個交互

到了B2C,我們怎樣滿足這些用戶的需求呢?

解決方案有幾種:

1.為了好看和前端頁面加載不是很多,就限制10張,結果就是30%的用戶不能使用顯示外的優惠券

2.為了使用,30%的用戶會看到好幾頁的優惠券,找起來也很麻煩

現在我們理一下邏輯關系

1. 做優惠券的交互設計解決那些問題?

答:

做優惠券的交互設計是為了滿足自己B2C站上30%有多於10張優惠券的用戶使用優惠方便,簡單

做優惠券的交互設計是為了讓70%沒有多於10張優惠券的用戶使用起來簡單,易懂

2. 做優惠券的交互設計有什麼好處?

答:

做優惠券的交互設計,可以滿足網上有擁有多於10張優惠券的用戶的復雜選擇,同時又不會給擁有少於10張優惠券減少操作復雜,同時增進用戶體驗,使用戶用起來舒服,不會生氣

首先,我們來解決排序問題,根據大部分網名的數據來看,按照結束時間倒序排列,是我比較傾向的一種排序方式

在支付環節中,列出優惠券的時候,可以根據訂單金額,商品,首先篩選出符合使用的優惠券,例如你買的東西是100元的 那些 200-50的就不用顯示出來了。

其次,如果有同一種優惠券,則一行顯示就好了。有個小+號 展開。不然都是 200-100 同一時期領的。全部顯示 看起來頭疼 怎麼排序都頭疼

我們先來解決如果優惠券少於10張的用戶的優惠券選擇需求

這些用戶很簡單,我們設置優惠券默認顯示5張,如果有5張以內,那麼我們就全部顯示出來就可以了,而且頁面也很美觀

當然,也有一些用戶是大於5張優惠券卻少於10張的,他點擊更多後會有下面這樣圖的顯示

從上面這張圖上可以看出,顯示10張優惠券,已經很多了,

這時候,我手中有張我想使用的優惠券,怎麼辦?作為用戶,我很自然的想到,添加優惠券呗

那麼用戶點擊增加新優惠券,就可以解決添加優惠券的需求了,因為,在支付環節中,真正增加新優惠券的用戶,只有35%,所以,我淡化了增加新優惠券按鈕,使用戶可以更清晰的使用

但是添加後再哪裡呢?

問題就來了

優惠券的排列順序大致有這幾種

1.按照有效時間的開始時間排序

2.按照有效時間的結束時間排序

3. 最後一張激活的排列的最上面

其實,這些都不是主要的,因為根本就沒有解決用戶的需求

用戶的需求就是,我想用哪張,就用哪張,我自己來挑

所以就有了我這個新的頁面,當用戶的優惠券多於10張,就會有更復雜的交互

當用戶點擊更多篩選條件後

在開始做的時候,我對兩個事情很糾結。

1.要不要翻頁功能,最後被我否定了,因為翻頁功能對於一次只使用一張優惠券的支付頁面來說,太厚重了,不需要。

2.要不要增加激活時間呢,也就是有的用戶想查看他剛剛激活的優惠券,怎麼辦呢?最後也被我否定了,我想,如果他剛剛激活,那麼,優惠券號他輸入後就可以查出來了,如果他想查看,他可以點擊您共有X張優惠券,可以新頁面打開用戶中心優惠券頁面,自己慢慢看就好了。

3.其實,用戶用的翻頁功能和查看都不是他目前最想做,他目前最想做的就是選定一張優惠券,使用就可以了,所以,查出來用,這樣就可以了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved