Pages

Sunday, May 29, 2011

Prototyping for iPhone apps

之前介紹過 Paper prototyping for iPhone apps,這篇來續談 Prototyping for iPhone apps。

我們在開發 iPhone app ,會有 Prototyping 的階段,這是從開發初期就要投資的活動,這活動會一直伴隨著我們開發過程,只要不知道開發如何下手,就是選擇做 Prototyping 好時機。

有很多種方式可以來做 Prototyping 選擇,從最低精準度的紙上 Prototypes 到真的用 iPhone SDK 來製作都有。除了了解這些方法之外,怎麼把它用在恰當的時機很重要,因為它們有各自的優缺點,根據時機來投入,才能獲得有效的效益。以下整理四種方式:
  1. 紙上繪圖 - 優點是便宜又快速。適合用來定義出概念、流程和文字辭彙的討論。缺點很難顯示出細節的互動,很難模擬資料豐富為主的 Apps。
  2. 靜態圖片裝在裝置上 - 優點是可以展現出視覺效果,包含字體的大小和排版風格。缺點是缺乏使用互動,僅能一個畫面和另外個畫面做切換。
  3. 互動式裝在裝置上 - 優點是模擬出像 iPhone 樣式行為,可以做出些互動操作。缺點是為了達到此目的必須花費出很多的設計時間。
  4. iPhone SDK 開發 - 優點是為了最終 APP 而做些設計與開發是非常有幫助。缺點是這是最昂貴而且對於很難作修改。
以上這幾種方式,我根據自己參與專案和產品開發經驗,這四種都會用到,而且各個時機都會不同,如此才能善用。
  • APP 在概念與些文件準備好之後,在開發非常初期,可以採用紙上繪圖,這對於跟內部同仁做溝通與傳達設計理念最好的方式。 
  • 在講究 Visual Design 的時候,因為要考量到資訊架構、顏色配色、字體等等,UI designer 會善用工具畫出靜態圖片,此非常方便讓團隊知道未來 APP 的長相,也是做為之後開發人員要配合套用的參考方式。 
  • 在互動式裝在裝置上,適用時機當參與討論此 APP 的同仁,可能沒有該 Mobile develop,但是很清楚知道此 APP 整體的邏輯,而且如果是跨公司合作很難可以當面講,設計出互動式裝在裝置上給對方團隊,對方團隊即可參考文件,按照著此來做瞭解其中的邏輯與動線,進而瞭解方便實作。
  • iPhone SDK 直接開啓 Xcode 開始開發,此是當以上概念都非常清楚,而且掌握了些展示資訊 Mock data,即可開始開發整體樣式,套用展示資訊,讓它可以在開發深入前,做個整體 APP 有效的瞭解與開發前的再次確認機會。
    談起 Prototyping,一開始起頭不容易,但是我們發現到,當工具與概念都到位了,直接動手開始做這樣設計,Prototypes 就可以一一成型了,沒錯,一切是從動手開始做才算數。

    Thursday, May 26, 2011

    Developing User Personas

    當我們在設計軟體,最明顯常見問題是,我們的觀眾是誰?要設計一個符合使用者預期,期望可以做出一套貼近滿足使用者的產品,經驗顯示這對一般人而言是不容易的。但是可以從簡單使用者資料做起頭,找出觀眾使用者會是怎麼樣的行為,來設計符合他們的需求。這樣對於設計師而言不但好著手一點,結果出來也會比較符合使用者盼望的。

    User Personas 對於設計初期是一個有用的資源,可以讓設計師透過簡單的方式來瞭解使用者預期和需求,對於後面 Usability testing 也有很大幫助。除此之外,對於設計團隊在溝通上也是一個很有幫助的工具。

    製作 User Personas 使用者資料第一步是要學習瞭解我們的使用者。可以挑選個好地方從一對一訪談開始。盡量和不同類型的使用者談話,這樣才能蒐集比較多元的資料。而每一個訪談我們希望可以找出行為、經驗和能力這些資訊。經過幾場簡單的訪談,覺得資料蒐集差不多了,就可以開始製作 personas。

    例如今天我們想要開發社群交友的平台,我們可以訂定訪談的問題,作為 User personas 資料蒐集所需:
    一、通常用哪些管道如何認識新朋友。
    二、是否嘗試過哪些場合交友,印象深刻的是。
    三、如果網站平台或是智慧型手機軟體,有嘗試過這方面交友工具嗎。
    四、這些工具有怎樣的特色覺得不錯或不好的。
    五、對於熟悉的朋友會想要跟他們保持哪些聯繫方式。
    六、對於陌生的朋友希望有哪些管道可以進一步認識。
    七、在社群交友平台上願意公開自己哪些資料。
    八、在每天哪些時段裡,願意花時間在這方面呢。

    當有了各種資料,可以開始寫下每一位的詳細資訊,資訊可以分類為:
    • 個人檔案 - 名字、年齡、性別和個人特色 (害羞、外向、積極等),居住所在位置、興趣與嗜好
    • 背景 - 對於相關領域是否有經驗、對於這方面的教育瞭解程度。
    • 科技背景經驗 - 是否使用過智慧型手機、是否使用過哪些電子商務網站、計畫開發中的軟體相關所需的使用經驗
    • 使用此軟體或者平台動機

    當資訊收集足夠,進入到產品功能討論時,這些都是非常有利的資訊。我們從 User-centered design 導入到開發週期裡面,研究整理 User Personas 是重要的第一步程序,這也是作為後續用來在開發過程牽扯到 user-centered 活動所需的資訊參考。

    Thursday, May 19, 2011

    The Importance of Visual Design

    Visual Design 對於整體 iPhone user experience 來說是個加分效果,很多 App 會在 Coding 結束才開始做 Visual Design,但是如果在晚期才開始給與的力量有限,也只能幫忙到表層而已,幫忙少數些 icons 替換和配色而已。對於真正的 App design 效果影響,Visual Design 要從早期概念該涉入列為重要階段。有效果的 Visual Design 可以帶來更多的使用者下載、加強 App 的高使用性和吸引使用者目光。

    第一、吸引使用者。當使用者在瀏覽 App Store 考量要買什麼時候,App 的外觀會深深影響他們的選擇。當然 App Reviews 口碑影響和 App 概念敘述文字也是重要一環,如果使用者沒有被吸引或者被驚喜,他們就不會下載 App 了。

    第二、加強 App 使用性。當使用者下載了 App,Visual Design 會變成第一個吸引使用者目光。有效個設計會加強使用者介面的設計,也會加強 App 讓它變簡單使用,可以讓概念呈現清楚、任務操作變有效、可讀性。

    第三、取悅使用者。Visual design 可以加強使用者經驗。當然如果說我們不做這些元素設計,App 相對的就會看起來不吸引人。所以好的設計可以讓使用者更喜歡它。

    何時該開始 Visual Design 呢?Visual Design 該越早越好,當然還是要看是設計怎麼樣的 App。我們的經驗是開發團隊可以使用系統快速建置整個 App 的骨幹和元素,讓 Visual Designer 可以接手來做些技巧調整。在未談美術設計前,可以先做視覺的結構整理。如果沒有清楚的視覺結構,App 會看起來很糟糕,無法讓後面美術設計加入進來,有幾個方法可以加強視覺結構:

    一、Grouping 群組化。將資訊同樣性質的靠攏近一些在同一區塊,將大量的資訊可以分類讓使用者預期在該有的位置,如此可以減少資訊複雜度,也可以幫助使用者知道我們設計想法。群組化可以將畫面同樣呈現這些資訊,但是集中化後使用者在閱讀上視覺不用飛來飛去,減輕使用者的閱讀痛苦。

    二、Hierarchy 階層化。透過階層讓閱讀上增加層次。同樣一大張資訊呈現,位置的擺放可以有很多規劃,在螢幕的畫面上面是最重要最突出的。最下方也是使用最容易找到,所以畫面最上方和最下方都是擺放最重要的資訊或是重要的操作。另外適當使用『Scale』的技巧,將重要資訊可以凸顯出來。用大的圖示加強圖片或是資訊可以讓使用者更快可以找到重要的資訊,在同樣區塊分出重要資訊和次要資訊。

    三、Alignment 校準。文字對齊可以讓視覺更容易閱讀和理解,所以在整個畫面盡量統一標齊顯示。如果是以注重使用者閱讀,盡量都以左邊標齊。

    人們想到 Visual Design 會想到圖片和 Icons 及顏色選用而已,雖然這些也重要,但是 Visual Design 還有更多技巧可以來改善視覺設計,包含幫助加強畫面資訊的結構呈現改良、顏色的控制、字體字型的顯示。當視覺資訊和結構到位,我們再帶入視覺元素像是 Icons 和字體改善。在這過程我們要時常告訴自己:App 的 Visual design 要在早期就列入重要考量,如果當 App 開發完畢再來,能改的會有限。不要讓 App 的視覺元素自己獨立製作,整體畫面、排版和顏色要通通擺放在一起做考量,才能做出重要的取捨。

    設計高優質的 Icons 非常困難和耗費時間。所以考慮僱請一位圖畫設計師或者找尋這方面專家,是個非常棒的投資。

    Saturday, May 14, 2011

    Refine mobile app's user interface 幕後花絮

    簡報 Ideas 擔任起導演與編劇角色
    網站企劃輕鬆聚 從 HP12 開始我一直持續參加到現在,每次都是期待活動前公告,開始搶報名,當天下班趕到現場聽台上講者豐富的工作經驗,從來沒有想過會有站上台分享一天。在三月時候,當活動預告五月有 Mobile design,想到這是個不錯的機會,當時剛好有些東西內容可以分享,於是就跟主辦人 悠識數位首席架構師 Richard Tsai 先預定一個分享名額,於是展開之後緊張準備之旅,準備過程可以分為三個段落紀錄:

    第一、選定分享題目很重要。一開始題目想要講『 iPhone app 開發的 UX 經驗』,但是討論商量之後發現這題目實在太大了,20 分鐘講也講不完,準備上也不好準備,題目一看無法瞭解簡報內容會是哪些,那這樣題目訂定是不佳的。後來反覆的思考,終於敲定一個跟我分享有關,題目又可以鎖定範圍,聽眾也能稍微預測到我想要分享內容『Refine mobile app's user interface』。會選擇 Refine 這個詞是覺得我們都會開發都會寫軟體,但是能做到 Refine 重新再改,能讓它更好,這個勢必有個吸引力在。

    第二、自己開始擔任起導演與編劇角色。用了便利貼把所有要講的內容,先全部寫在便利貼上面,便利貼上方粗筆寫大概念,下方用細筆寫稍微細節項目。於是一張一張便利貼就開始往空白牆上貼上去。開始編排順序性、串起整個簡報會寫的順序,如此一來概念、順序都好了。每隔幾天想到什麼,就貼上去或者挪動位置。當覺得差不多後,開始製作投影片。運用了 大家來看賈伯斯:向蘋果的表演大師學簡報 些技巧,安排三個重要項目將故事切為三個段落、分享熱忱經驗、每張投影片以好表達為主 (圖多字少)、找出敵人製造出英雄形成對立、適當搭配 One more thing... 讓好工作找上你這本書 做 Ending

    第三、充分的反覆練習。投影片在半個月前準備好,之後就是一直練習一直練習一直練習,用了 iPhone app 錄音軟體記錄自己講的內容,用 keynote 簡報啓動 rehearse 模式,一啓動不重來,旁邊搭配時間計時器開始講。最後 20 分鐘結束,回來調整投影片內容順序同時,旁邊的 iPhone 邊撥放著剛剛 20 分鐘自己簡報的內容聆聽。當練習到四、五次之後,最後小祕訣,在投影片附錄處寫下幾分之幾,分子為進行了幾分鐘,分母為總共有幾分鐘,如此一來可以掌握自己簡報搭配時間跟上自己的節奏。
      最後,在 HP19 活動上盡情的發揮與享受簡報的樂趣。還沒講之前的我真的很緊張,現場有兩百多人參加聆聽比往常多出一倍之外,又是新的大型演講場地,大家都超級安靜專心聆聽。最後上台我也因為有緊張而講錯些小事情 (再次強調是分享不是上課、是 Think aloud 不是 Speak aloud),不過簡報過程還能在自己及格的範圍。原來一直以為緊張會將簡報講快所以投影片要準備剛剛好,沒想到我卻因為緊張講更多更慢,導致後面多超出 1~2 分鐘才結束。

      還是要感謝 Polydice Inc.HPX 網站企劃輕鬆聚 讓我有這殊榮站在台上跟熟悉的社群做分享。希望以後我們每位能說出屬於自己更多更棒更好的精彩故事!祝福大家。

      P.S. 那天很緊張,我有帶一杯水上台準備 20 分鐘之戰,結果當我電腦投影準備好,水杯吸管一插上去,轉身之後,我的水杯就被~~拿~~走~~了!邁上了 20 分鐘沒水喝之路,這不輸馬拉松跑兩小時沒喝水的感覺。

      Monday, May 2, 2011

      After action review 讓重複的任務越做越好

      是否發現同樣一件任務事情重複做,有的人會覺得很無趣沒有進步;有的人卻可以越來越上手,甚至得到團隊同袍的欣賞與上級長官的讚美,覺得將此任務給該位是對的選擇。關鍵在於有沒有做事後檢討。我們無法第一次做就到位做的很好,但是如果我們可以從第一次做得到尚可,第二次做開始抓到訣竅,第三次做已經駕輕就手,那麼我們就是有進步了。

      After action review (AAR) 是一個結構化的回顧方式來檢討每次活動程序怎麼發生的,為什麼會這樣發生,如何可以讓它做的更好。而透過參與這個計畫或者活動事件的人們來做紀錄與分析。After action review 最原始是從 U.S. Army 做來針對任務做事後分析用的方式。AAR 發生在需要有領導人來帶領一個週期性的計畫,事先準備和實際進行與事後的研究檢討。

      After action review 可以分為五個流程:
      1. 預設情況會怎麼樣發生?
        活動進行前我們就要訂好目標,沒有目標我們不會知道我們為了什麼而戰。有了明確目標不論是個人或是團體,可以有明確的方向,把力氣放在對的地方。
      2. 實際現場的情況是怎麼樣?
        往往真的有機會親臨現場的都是執行人員,這個需要有賴於執行人員做下好的紀錄,當中發生了哪些事情,造成了阻礙是否可以克服。檢核目標的清單完成了幾項,哪些過關哪些沒有達成。
      3. 為什麼會有這樣的差別?
        執行任務後,一定會發現很多在開始前所猜測推斷的,跟實際真的進行了,卻未必是如此。有些是掌握當中,有些是意料之外,為什麼會有這些發生,都是我們很好的學習方式。
      4. 從此次任務當中學到些什麼可以使下次行動更有效?
        每次任務完成一定會發現有好的地方,也會有要改進的地方,如何去裡面思考與檢討,可以讓改進的地方作為下次不要再犯。
      5. 我們現在要做些什麼?
        根據此次行動檢討,可以列出短期行動、中期行動、長期行動。有些事情是可以快速採行的,有些是要影響到整個政策或是組織行為,有些是更長遠目標有關,這有賴於這時候做個分類。
      我們不論工作上或是業餘活動裡頭,一定會碰到需要反覆進行的活動,也難免會碰到自己初期不上手,或者碰到複雜把握度不夠的時候,After action review 是一套非常好的分析方式,此圖是用 Mindmip 整理出來的流程圖,過去工作上我也用此方式來解決很多有挑戰性的工作。希望 AAR 可以讓我們越來越進入狀況,越來越精進!


      點圖放大瀏覽

      想要了解更多可以閱讀 Wikipedia After action review 或者參考下這份 A leaders guide to after-action reviews

      Sunday, May 1, 2011

      Play sound effect on iPhone app

      在 AudioToolbox 的 framework,我們可以使用 AudioServicesPlaySystemSound 來播放音效。這個 function 可以播放簡短的聲音 (30 秒以內)。因為這個聲音會播放超過幾秒鐘,所以他是非同步的方式。想要知道音樂是否播放完畢,也有另外一個 AudioServicesAddSystemSoundCompletion 透過註冊 callback 的來查看。在使用上要注意有些限制:
      • 播放音效檔案不能超過 30 秒鐘
      • 必須符合 PCM 或者 IMA4 (IMA/ADPCM) 格式
      • 必須包裝成 .caf, .aif, 或者 .wav 檔案
      使用 AudioServicesPlaySystemSound 因為簡單,所以他是使用系統播放音量,不能程式控制聲音大小、馬上播放性質、不能重複播放和跳到特定位置、一次只能播放一個聲音。