如何設計空白資料頁面

在我還是很嫩的時候,總是認為沒有資料的頁面;應該不會使用者產生不知道下一步要幹嘛的影響吧。

我用這個案例來告訴你如何設計出空白的資料頁面;這次的案例是我幫一家公司設計用來協助內部專案管理的app,主要是希望在手機上追蹤與回報聯絡工作進度。

空白的頁面上,沒有說明任何資訊

當我把設計好的頁面,給使用者看的人時候,很多人第一個問題就是為什麼頁面上沒有任何資料那請問專案呢?

沒有告訴使用者為什麼這個頁面上沒有資料

這個問題會造成使用者困惑,而造成這個困惑的原因是,使用者往往內心的問題,那這個頁面會有什麼東西那為什麼沒有東西?

其實往往我們在設計的時候,真的會忽略這一點,空白的頁面上往往不會告訴使用者,這個頁面上有什麼東西,最常看的就是購物車裡面的沒有東西,但卻不會告訴使用者沒有任何東西在購物車上。

lativ注意紅色的部分,沒有告訴使用者任何資訊

其實解決的辦法並不難,就是在這個頁面上說明,你應該會出現什麼資料或者你沒有什麼資料的說明。

告訴使用者你沒有任何專案

你就算跟我說為什麼沒有資料,所以呢然後呢?

當我把說明的內容補上的去的時候,面對的第二個問題;很多使用者在看到資訊後,接這又開始困惑了;那所以我應該怎麼辦,讓它有資料,我該怎麼辦才能新增專案。

這個也跟我們說了,使用者在使用你的東西的時候;不要只是跟他說你沒有什麼東西,更應該要告訴使用者,應該要怎麼辦。

往往我們都知道要告訴使用者空白頁面上沒有資料,但我們卻很少說應該要怎麼做。

以上弄好後大概就是60分了,以下的方式是會讓你更好。

跟使用者說誰正在使用這個東西,你使用這個東西會得到什麼好處

就以這次的案例來說;我們可以跟使用者講說,你的同事誰誰正在使用這個功能;而這個功能對於你來說有什麼幫助。

擬人化或個性化

這個東西,在設計的時候要特別小心,麻煩一下,設計的時候口語語氣,還有圖像有可能是圖片或者人物,一定要符合你的形象。

以這次專案來說,你不應該使用以下口氣

  1. 嗨,你現在增加一個專案
  2. 你好,你現在增加一個專案

你不應該使用者太活潑的圖像

看以下按照上面幾點安排設計之後的樣子。

最後提醒一下,並不是每一個資料空白頁面都要這樣子設計,不見得一定要有:擬人,個性化,說明好處的設計這三點是不一定要有的;需不需要這樣子設計,取決於你的使用者。

如果你覺得時候到了,那是時候為自己做某些改變了,讓我來幫忙你,我希望你可以更好,你現在就應該行動讓我幫你製作一個網站或app。

http://mamatate.com/

我不只是會幫你做網站,我還會跟你說怎麼使用UX設計來幫助你?當然我也會幫助你,提供一些對你事業有幫助的訊息給你。

泓傑工作室
電話:03–3582638
LINE:@ koa4745k 
電子郵件:2094103110@gm.kuas.edu.tw

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.