續談UI設計 – 不甚理想的例子

續談UI設計 – 不甚理想的例子
上篇談過一些使用者的心智模形(就是使用者在軟體操作過程中建立起來的想法與觀
念),這篇就寫一些不是很理想的UI設計吧。
首先看看MSN Messenger(新版正名為Windows Live Messenger)上一套很有名的外掛
程式,免費軟體 – Messenger Plus! Live
(以此軟體舉例其實有點心虛,畢竟人家可沒收我錢。我甚至連它們的贊助廣告都沒
安裝….不過就當作是幫它們打打廣告吧,能在大頭出現時瞬間將所有MSN視窗藏起
來,連小綠人圖示都可以偽裝成網路磁碟機的功能真的挺酷的)
Messenger Plus! Live官方網站
筆者先列出兩張圖片,都是此軟體的設定畫面。
圖1)
圖2)

筆者特別把設定畫面的標籤處圈選出來。假設看倌們沒有接觸過這軟體,請各位猜測
一下是左邊還是上面的標籤選單是主選單?

經驗告訴我們,面對繁複的選擇與輸入要求,user往往會顯的不耐煩或害怕。唯恐一
個設定沒有仔細決定會導致不可預期的後果。Messenger Plus! Live在這裡將繁複的
設定選項以標籤分為數個畫面處理,但這些好心的工程師們顯然做的太興奮且有些超
過了。每當user點選任一標籤,畫面中央顯示設定選項的區域都會改變顯示內容。於
是使用者困惑了:到底左邊還是上面,哪個才是主要選項?老闆已經快到了耶…

讓user一次面對少許,且功能關係類似的選項本意不錯,但缺少了完善的導覽設計,
結果是兩邊的標籤爭奇鬥艷的喊說點我點我,我們卻不知道該聽誰的話。

而軟體本身提供可隨時回頭修改選項的功能,卻沒有實做出類似[上一步/下一步]或
[上一頁/下一頁]的導覽鍵,也讓此美意黯然失色,難以發揮真正的功能。

凡此種種,都是在設計上的思維過於想當然爾,所產生的小缺陷。但是會讓軟體的功
能無法正常發揮,甚為可惜。而在MSN Messenger的設定上,操作流程便顯得清晰多
了,顯然微軟在軟體可用性測試上做的比較多。各位可以參考看看您安裝的MSN Messenger
的設定畫面。
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

有看過灌籃高手的鄉民們應該知道湘北高中籃球隊的名產:糖和鞭子
現在,糖果給完,揮舞鞭子搗蛋一下的時候到了:

Windows Live Toolbar

這是微軟推出的最新版Windows Live服務整合客戶端軟體工具,內嵌在IE瀏覽器。功
能且不贅述,我先用"文字"描寫一下它的安裝步驟:
Step 1 – 下載
Step 2 – 安裝(下一步下一步下一步…)
Step 3 – 重新開機
Step 4 – 啟動IE,點選Hotmail收信
Step 5 – 此時跳出[選擇Windows Live Toolbar安裝功能]畫面,要求使用者選取需要
         安裝的擴充功能。
Step 6 – 安裝完畢後,Windows Live Search bar出現在OS的工具列強佔了本來就不
         大的工具列空間。要進入三層選以上選單,在琳瑯滿目的選項當中找到瑟
         縮在角落的選項才能重新取回OS工具列寶貴的空間。
Step 7 – 再度啟動IE還要選取[網路釣魚篩選工具]相關設定……
Step 8 – 終於進入Hotmail可以看信了
光打出這些步驟就很累了,真的
軟體UI設計的原則,就是規劃出明確不繁瑣的操作流程。這是比介面設計的視覺風格
更為重要的焦點。你也不希望使用者還沒弄懂你的大作之前就被嚇跑了吧~
這篇廢話到此,還要發佈在Windows Live Space,希望不會被微軟給封殺了……^^"
廣告

3 thoughts on “續談UI設計 – 不甚理想的例子

  1. Hi,Do you need screen advertisings, digital sign, digital signages and LCDs? Please go Here:www.amberdigital.com.hk(Amberdigital).we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.
    amberdigital Contact Us
    E-mail:sstar@netvigator.com
    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[bcbcfbffebdica]

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s