Home » Axure RP 案例

Axure RP 案例

NTT DATA導入 Axure RP 成功縮短 30% 專案時間

NTT DATA公司(日本最大的系統整合公司之一) 導入Axure Software Solutions, Inc.所開發的Axure RP軟體。Axure RP是一種可免程式製作系統(原型)Prototype的便利工具,用於系統開發前期作業的需求定義階段,能夠確實掌握客戶對系統使用性之要求。

NTT DATA應用Axure RP於專案開發後,發現在企畫上的品質有所提升,且可以縮短30%的工作期間。因此NTT DATA在2008年將Axure RP與NTT Data公司所使用的其他工具軟體,整合成無縫銜接的開發環境,並且在2009預計擴大應用到50個專案。

譯註1:需求定義在原文為「要件定義」,包含User Requirement Definition以及Software Requirement Specification)。
譯註2:NTT DATA AgileNet於2008年11月成為Axure RP的日本市場代理商。

背景

NTT Data經營策略的概念之一是「開發過程的變革」,講求系統開發方法,並促成統一開發平台等工作流程標準化作業,致力於品質及生產效率的提升。

做為以上策略的一個環節,NTT DATA引用企業塑模MOYA,將需求定義以後的工作,應用TERASOLUNA框架等統合開發解決方案來處理,以求開發過程可以統一。 (註:MOYA , TERASOLUNA 是NTT DATA公司的軟體工具及註冊商標)

但過去在需求定義的作法主要是以紙本規劃書與客戶進行互相確認,無法確認系統實際運作的樣貌,容易造成廠商與客戶之間的想像落差,導致事後又要再追加功能,必須回頭重做,或是系統建立之後被詬病不好使用的情況頻繁發生。

這些問題使人了解到,在企劃階段便向客戶展示系統實際形態,降低日後工程發生追加條件的可能性,甚至是展示系統的好用性是非常重要的。Axure RP便具備了這樣的功能。

創新的開發工作流程

為了解決這些的問題、對客戶從必要需求定義功能到系統開發概念的提出,来降低在此後的工程的追加需求的發生,展現系統的』容易使用』的重要性。

具體而言,就是利用NTT DATA公司的軟體工程系統,於企劃階段對整體商業需求做定調後,之後利用Axure RP製作出系統原型。以原型展示客戶所要求的功能項目,便於買賣雙方確認系統的需求。彼此達成共識後,做好的原型就可以提供充分的畫面設計資訊,對於後續設計開發工程也都可以活用。

新開發流程的作法,是將需求定義的階段分解為商業需求,功能需求和畫面定義。

ntt-data-axure-rp-flow
圖:系統開發過程的Axure RP文件成果和新工作流程的對應關係

新工作流程的效益

過去的企劃雖然也採用原型設計的方式,但因製作上並不容易,往往造成專案開發負荷太大。NTT DATA導入Axure RP之後,可以很省力的方式產生原型。

因為 Axure RP 具有以下三大優點:
1. 擁有豐富的畫面製作特殊設計功能,可以不需要技術上的背景,便能製作系統雛型。
2. 不需要程式設計的導入,便能夠製作近似於系統成品的動態原型。
3. 可以Word樣版功能為基礎,自動生成系統功能書,節省撰寫功能規劃書的成本。

在2008年度的幾個專案導入結果發現,上游企畫文件進入審查作業時,可被發現的錯誤數量增加了,然而後續開發階段的追加功能的情況則減少。在系統需求定義品質有所提升的同時,更實現了30%的專案期程的縮減。

這些效益都是因為在企劃階段就可以展現可互動的系統原型,使整體開發在上游階段就能確認、評估系統的使用性,產出的系統也更加貼近使用者的需求。


信義房屋網站以 Axure RP 企劃出金手指獎最佳網站

在競爭激烈的台灣房地產仲介市場,如何運用網路吸引目標族群的注意,提升網路服務品質與互動性,已成為房仲業者不得不重視的一環。

台灣房仲業的領導品牌信義房屋,在2007年進行網站改版專案,以採用先進的網站企劃軟體-Axure RP進行網站企劃及網站原型設計,來加強網站的流暢性以及易用度。

以Axure RP進行網站企劃,於專案初期快速確認網站介面與動線設計

透過Axure RP設計出來的網站原型,協助專案團隊加速網站介面與功能規格的確認,在有限專案時間內開發完成網站,最後更以整體互動性、便利性榮獲2007年Click! Awards 金手指獎的年度大獎-「最佳網站」。

為了讓網站使用者經驗可以兼顧友善與創新,信義房屋以「iSearch」為核心概念,採用Web 2.0網站風格及AJAX技術,將房屋物件資訊結合電子地圖,推出混搭式地圖(Mash up)搜尋功能,讓網站訪客透過直覺式的電子地圖,更有效率地瀏覽各種房屋資訊,享受更輕鬆方便的找屋看屋網路經驗。

sinyi_prototype

Web 2.0風格網站挑戰傳統企劃方式

將AJAX技術應用於網站介面上,對網站使用者來說是便利的,但對網站企劃人員及技術開發人員則是一項挑戰。傳統的網站企劃方式與工具,不管採用Word / PowerPoint 或 Visio,都會遭遇介面精緻度呈現不足,無法驗證互動設計流暢度的問題,往往要等到網站開發完成之後,才能發掘問題,進行大幅的修改與調整。

在有限的專案時程裡,為了避免浪費人力與時間在網站的修改調整,並確保展現優質的使用者經驗設計,因此信義房屋網站專案團隊採用了Axure RP,進行本次網站改版專案的網站架構/動線/介面設計與規劃。

以Axure RP設計各種創新搜尋介面

房屋仲介網站提供給訪客最重要的資訊,除了房屋物件搜尋以及條列查詢結果外,訪客也很在意房屋相關地理資訊與週遭環境。因此,信義房屋網站同時混搭「地圖搜尋」,結合AJAX技術,使網站使用者輕鬆操作各種創新搜尋介面。

包括「Flash捷運搜尋」、「AJAX篩選搜尋」、「電子地圖整合搜尋」,網頁呈現上充分利用電子地圖介面,讓房屋方位、環境或屋況影像等多媒體資訊,都能在地圖上完整揭露,細部資訊通通一覽無疑。

Axure RP Prototype 易於模擬 AJAX 效果

以「AJAX篩選搜尋」為例,下圖左側是採用Axure RP繪製的網頁線框圖(wireframe),下圖右側則是實際開發出來的網頁介面。

Axure RP 能自動將設計完成的線框圖 (wireframe) 輸出為 HTML Prototype,操作滑鼠就可以在Prototype上點出各項房屋篩選條件的選單,不需要設計許多個頁面來呈現多種篩選條件。換句話說,想要表現網站的互動特性,只要靠著Axure RP Prototype一頁就可以抵上Powerpoint / Visio的 10 幾頁了。

sinyi-prototype-1s
sinyi-prototype-2s

藉著檢視網站原型,在專案初期找出設計問題

再以「電子地圖整合搜尋」為例,下圖左側是採用Axure RP繪製的網頁線框圖(wireframe),下圖右側則是實際開發出來的網頁畫面。

Axure RP 可以將物件查詢結果與電子地圖整合的設計方式,輸出成Prototype,放在瀏覽器上,來體驗未來完成後的操作經驗與動線,以及結合地圖之後的互動方式。

以此例,經過Prototype設計後,發現物件列表頁的長度可能會造成使用者在觀看地圖與物件文字資料時的不便,最後將列表物件數量調整到配合電腦螢幕及地圖的高度。 這個問題如果僅透過Powerpoint/Visio所設計的wireframe,恐怕要到開發完成放到瀏覽器上才會發現,到時候再修改就得耗費更多時間人力了。

Axure RP的Prototype畫面

sinyi-p1

實際網頁畫面

sinyi-r1

Axure RP的Prototype畫面

sinyi-p2

實際網頁畫面

sinyi-r2

Axure RP帶來專案實質效益,提升網站使用者經驗

信義「iSearch」所提供的五大創新功能,兼顧人性及Web2.0概念,不僅是買賣房屋者最便利的搜尋工具,也能夠大大降低線上看屋障礙,提升看屋親和力與娛樂性,讓線上看屋更普及,房仲業的服務更有效率。

創造出這麼棒的網站經驗設計,還獲得金手指獎的肯定,其背後是整個跨領域專業團隊的努力,而Axure RP則在團隊與工作流程中扮演網站介面設計,定義需求,確認規格,提早檢視使用者經驗的角色。

在網站應用與設計日益受重視的現在,相信Axure RP將持續協助網站企劃人員或專案經理,為了創造更美好的網站使用者經驗而做出貢獻。


淘寶網的設計流程

本文經淘寶網UED授權轉載,原文出處淘寶網UED Blog

淘寶面試的最後一個環節,是請應聘者向面試官提問,使面試官有機會解答應聘者對公司、團隊以及工作等等方面的疑問。在我面試過的設計師當中,大約有三分之一會問我:“淘寶的設計流程是怎麼樣的?”我不是很瞭解問這個問題的人為什麼會有如此高的比例。也許這是一個“安全”的問題,不會對面試有什麼危害;也許目前設計師在工作中普遍碰到“流程”問題或“沒有流程”的問題;也許這個話題涉及各家公司的“機密”,確實無從找到相關的資料。

總而言之,雖然來面試淘寶的設計師人數有限,但我斗膽假設:目前國內所有網頁設計師中的三分之一想瞭解更多關於“設計流程”方面的知識,而我們也不認為這是什麼“機密”的話題(我瞭解的各公司設計過程都八九不離十,名稱不同,本質上是一樣的)。所以,就在此簡單介紹一下淘寶UED的設計流程,期望對這三分之一的設計師有所幫助。

Step1:原型(Prototype)

設計的第一個階段,我們稱之為原型設計,主要是設計產品的功能、用戶流程、資訊架構、交互細節、頁面元素等等。如果你覺得聽上去這些概念都比較懸的話,我就用白話來說:原型設計,就是完全不管產品長得好不好看,只把它要做的事情和怎麼做這些事情想清楚,把它怎麼和用戶交互想清楚,而且把所有這些都畫出來,讓人可以直觀地看到。

至於怎麼畫出來,那就隨你了。用紙筆畫,用白板筆畫,用Photoshop畫,用Visio畫,或者像我們一樣用Axure畫,都可以。只要把上面提到的這些都鉅細靡遺地表達出來。

在原型的交付物(Delivery,也就是某個階段的產出物)中,最重要也最常見的就是線框圖(Wireframe),這玩意兒不用多解釋了,看下面這張圖就明白:

在畫線框圖的時候,要把握好細節的刻畫程度。有些東西只要畫個框就行了,而有些東西需要把文案都設計好。以免你的老闆或是需求方揪住角落裏的廣告banner該有多大這種問題與你糾纏不休,而忽視了最重要的頁面主體部分。

此外,還要牢記:原型就是用來讓人改的。它存在的價值就體現在被修改了幾次,被更新了幾次,以及它的下一步被少改了幾次。

taobao_axure_prototype

Step2:模型(Mock-up)

在原型被大家接受之後,就該關心產品長得好不好看了。我們以“模型”這個詞來統稱該步驟的交付物。和原型相比,它關注於產品的視覺設計,包括色彩、風格、圖示、插圖等等。

要清楚的是,這不是一步由“美工”來“美化”的工作。視覺設計師需要對原型設計有深刻的理解,對互動設計和尚未進行的 HTML/CSS/JS 的 Code 都要有充分的瞭解。如果不能從全局的角度來做視覺設計,則只能是做做把水晶效果改成金屬效果這樣的“自娛自樂”,而對產品本身沒有任何有價值的幫助。如果原型說:“在這個頁面上,A比B重要。”,那他的腦子裏就要有十七八種可以表現“A比B重要”的視覺語言可供選擇。這是對設計模型的視覺設計師的基本要求。

更高一些的要求,才是視覺設計的“原始功能”。“到底是選水晶效果還是金屬效果?”,“這個按鈕選什麼顏色好?”等等。這一類的思考和選擇,應著眼於產品的氣質、品牌等等,在各種產品間保持一定的統一,在用戶心裏打下視覺的烙印。其實要做到這一點是很難的,特別是還要滿足上一點的要求。一般來說,如果能90%的把互動設計的成果和品牌形象表達出來,已經是很好的結果了。從我自己來說,就常常很鬱悶不能用好的視覺語言來表達自己在原型設計中的想法,總是做完模型就打個七折 :(

更更高的要求,有些問題用互動設計是很難解決的,這時就需要一個有創造能力的視覺師,可以從視覺設計的角度來創造性地解決問題(一時還沒想出好的例子,想出來再補上)。

總的來說,模型設計是件非常困難的事情。它的工具是感性的,但設計過程又要求非常理性,必須在各種約束條件中解決問題。而目前能從較高的角度來來看“視覺設計”的人還不多,大多還停留在“效果”、“風格”等表面議題上。個人以為在“Web標準”和“用戶體驗”之後,視覺設計是Web設計專業化運動的第三波,市場的需求已經存在,只差有人推動一下。

模型的設計一般來說都是用Photoshop了,下是是個例子(與原型的例子對應):

taobao_mockup

Step3:展示版本(Demo)

這步我就不多說了,Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技術實現出來,以便後端的開發工程師可以接手編碼。這個過程讓小馬、正淳專門起個新帖來詳細介紹吧。只提一點,前端開發在有些公司是不放在設計團隊的,而我們認為前端開發從很大程度上來說是對用戶體驗的提升和保證,開發只是它的一個手段和形式。所以就把這塊工作一直留在我們團隊,現在看起來這樣很棒:)

把上述原型、模型轉為xHTML/CSS之後就是這個頁面了:
http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm

Step 0.5 / 1.5 / 2.5 / 3.5

居然還有半個半個的步驟?是的,這是我們的用戶研究過程。在各個階段的前後,我們會根據具體情況選擇是否投入精力到用戶研究上。用戶研究的形式也很自由:給會員打個電話,旺旺上隨便找人聊聊,到公司來做可用性測試,到會員家中訪談……怎麼方便怎麼實用就怎麼做。我們還沒有精力放在太多的“學術”性質的理論研究上,對研究方法也是不拘一格,“能抓老鼠”就行。關鍵的關鍵,研究的結果如何表現到產品上,如何吸收單個用戶的意見來服務所有用戶。

在這一點上,我們做得還很不夠,積累也很薄,需要向同行們多多學習,也請大家多多指點。

最後……

關於流程,要注意:

1. 設計流程的目標,在於保證“無論誰來做這個產品的設計,都能達到80分”
2. “100分”的完美作品,很有可能沒有遵循流程,而是天才地融合了創新、傳承和執行力的作品
3. “流程”這種東西,只有與環境相匹配才能帶來正面的作用。

以上是我們UED團隊目前的設計流程,也許你也發現了,它和大多數公司的設計流程是差不多的。我們也在不斷地修改和發展這個體系,有不足的地方也請大家多指教。如果你參考了我們的流程,在工作中發現有什麼問題,也請回來告訴我們,謝謝大家!