Pages

Sunday, September 25, 2011

當 iPhone 轉移到 iPad 該注意的 5 個 User Experience 概念

當我們已經擁有了 iPhone app,應用程式的主要特色和功能與畫面等等都有了,而當我們要開始規劃 iPad app,在這個交替轉換的設計上我們有那些考量要注意呢?

1. 加強互動性,不要只是加入新的功能

一個好的 iPad 應用程式會給人們創新的方式來跟內文互動,不只清晰清楚定義,用有限的功能來完成。一定要抵制住誘惑限制加入新的功能跟應用程式主要任務沒有相關關係。反而要做的是,探索可以讓使用者看到更多和互動更多。通常來說,不應該是把所有在 iPhone 應用程式的所有功能都帶回來。

要讓 iPad 應用程式看起來突出,專注在將使用者體驗放大,而不是帶入太多功能而讓主要任務被稀釋掉了。舉例來說:

閱讀型的應用程式要讓使用者可以閱讀書籍和讓閱讀上可以享受在大螢幕樂趣。減少讓使用者從此螢幕帶到另外一個螢幕來看閱讀清單,而是使用 popover 來讓使用者可以管理閱讀清單和選擇複製喜愛的句子進去。應用程式可以讓使用者可以加入書籤和註解,讓他們可以去跟自己閱讀進度做比較。

螢幕書寫的應用程式可以同時提供主要畫面和輔助工具都在同一個畫面,不會需要切換主要內容,可以在這之間來選擇要做的操作。

2. 減少全螢幕的切換

讓視覺上的切換可以跟內文改變很靠近。取代用滑動整夜切換方式,讓區域只要局部的變更舊好。讓狀態轉換只要局部,讓整頁大幅度轉換是非常不推薦的。當越少全螢幕切換,可以讓使用者保持在他們的操作項目上,可以使用類似 Split view 或是 popover 來減少全螢幕的轉變。

3. 仰制資訊的階層性

在 iPad 會讓使用者有更大的螢幕來看更多資訊,所以希望讓可以使用者可以閱讀大量資料,也方便作切換。所以通常來說會專注在主要的畫面,然後提供 popover 來讓使用者可以操作。在大的 iPad 畫面可以使用 split view 和 popover 來取代本來 iPhone 應用程式的階層切換。所以使用 Navigation bar 在左手邊,讓使用者可以滑下來看想要找的類型分類,然後當點選是最後一層,就將主要的功能配製在右邊的主要畫面中。有階層的效果交給左手邊的 Split view,而內文放置在右手邊。而如果畫面直立因為內文為主要畫面,利用 popover 來提供階層切換。

利用 segmented control 在 toolbar 上來做不同內容的切換,這樣就可以在同一條上來呈現不同的內容,例如 iTunes  裡面作不同內容類別的切換。

利用 tab bar 來提供不同內容,或者進入不同主題的程式功能分類。

4. 考慮在些 Modal 浮出的操作上使用 Popover

Modal 是很像在畫面上浮出來,但是必須要按下關閉才能結束,而 Popover 的介面可以讓使用者同樣的操作但是用起來比較輕量化。使用 Popover 可以讓使用者按下畫面外部任何地方就讓它關閉,而這在 Modal 是不行的,也會讓它看起來是新飛入的畫面。除此之外,Popover 可以擁有一個箭頭指向控制項,相當靠近使用者按的地方。讓使用者可以一直專注在原來的內容,如果用 Modal 會有打斷使用者,有點像是什麼事情要改變了。

如果要操作一個列表超過一個操作,使用 Popover。
如果需要使用者來看階層性的視覺,使用 Popover。
如果使用者在完成主要任務前想要做些事情,可以考慮使用 modal popover。
如果這功能操作會深入多頁操作,而且呈現跟原來畫面功能有關,使用 modal popover。
如果功能只會用到一次或者不常用到,類似設定功能,使用 modal popover。

如果考慮使用 Modal view,確定閱讀關於不同畫面切換的形式,使用適合的成像方式來完成 modal task。

5. 將 Toolbar 上的操作帶到上方

如果說 iPhone 應用程式有一個 toolbar,考慮不要放在下方,而是將他們都移到上方。擁有的加寬型的 iPad 畫面,是可以將所有 toolbar 上的功能帶到上方的。這樣一來可以讓我們擁有更多空間來閱讀內容。像 iPhone 裡面的 Mail 在下方會有重新整理、整理、刪除、和寫新內容,而在 iPad 上會將這些動作放在上方,而重新整理會放在 mailbox list,而當畫面直看的時候,從左上方 Popover 出來使用。

以上整理自 iOS Human Interface Guidelines: User Experience Guidelines。近日朋友問我,為什麼台灣的 App 有些行為看起來很詭異怪怪、甚至煩人;但是又有些台灣做出來的 App 可以厲害到跟國外歐美做出來的 App 不分上下,很有質感。這中間差異有哪些?當我回來詳讀 iOS Human Interface Guidelines,發現到這裡面告訴了我們很多設計上的準則,Apple 在審核上雖然以此篇為標準,但是也不會說一定每一個都要設計百分之百到位,很多我們看到在 App Store 上看起來遜色的,你說他們不符合審核標準嗎?如果標準是 60 分就讓它過關,我想這也只是符合 HIG 的表層而已,當我們深入去閱讀 iOS Human Interface Guidelines,才會瞭解這每項道理背後的用心,Apple 對於我們開發人員的苦口婆心,當真正用心地去規劃與實踐,我們才能距離使用者給予五顆星的評價更靠近了。

Saturday, September 17, 2011

開發 Location based 的 iPhone app , MapKit 知多少

2011 粉樂町 iPhone App
我在之前介紹過多篇部落格跟開發 iPhone app 遇到地圖有關的應用,也曾在 Hackathon in one day 提過平常的技能累積有多重要,這樣上了戰線才能即時反應出個人戰力,如果說開發過跟 Location-based 為主的 iPhone app,對於地圖的應用或多或少都有心得了吧!以下為個人根據實務上會碰到的各種功能特色或是需求,所列出來會碰到的情境,如果一題 10 分,你懂幾分呢?

我曾經跟夥伴開玩笑說,我們應該來做各種技術的 badge,當經過一定程度的試煉,就可以得到該勳章。試著來 Unlock Map-Kit 的勳章吧!

實務題
  1. 在地圖上標示使用者的藍點位置,取得使用者的所在座標位置。
  2. 將眾多座標,從上降下的方式標示在地圖上。
  3. 說明 Design Pattern Flight weight 在 Map 開發上應用到的地方與使用的原因。
  4. 當座標點非常多,透過地圖飛入的方式將所有的坐標以適當的 zoom in 方式出現在畫面上。
  5. 當座標點選下去,會點選 MKAnnotationView,將特定的圖片顯示在左方,點選右邊 Disclosure 可以進入介紹頁面 ViewController。
  6. Designer 畫了一個座標圖示,將之替換原來內建的紅色針頭,將它標示在地圖上。
  7. 計算出使用者手機的位置與座標距離多少公里。
  8. 當地圖以中心為起點,滑動了 10 公里,重新跟 Service side 要新的資訊。
  9. 透過使用者的位置坐標,顯示靠近的道路路名稱。 
  10. 透過手機朝向位置的功能,將地圖可以支援自動旋轉,做出指北針的效果,北方不變,地圖選轉的特效。

進階題
  1. 支援街景
  2. 支援地圖導覽
  3. 透過使用者輸入地址查詢到該地址的座標。
  4. Google 的浮水印沒有出現在地圖顯示上,會造成怎麼樣的後果。

以上這些情境都是在開發實務上會碰到的,有些可以在我先前文章找的到解答。換個身份,甚至身為 iPhone app 使用者的我們,這些功能對我們來說,是不是已經在各個 App 裡面很熟悉的遇見過了呢。

Wednesday, September 14, 2011

在表演型的舞台上說出動人故事

“我們一生總是不停的奮鬥,時而熱情擁抱人生,時而執著於目標,但也曾經因為岔路而佇足,擔心選擇,害怕失敗。但是,一次不同的際遇,往往是一段精采的故事;選擇人較少的路,或許會發現新的方向。”

我最近因緣際會關係,擔任了這次 9/10 TEDxTaipei Salon - The Road LessTraveled 活動的工作人員,這次負責工作是將整個活動的相關投影片、影片等等切換投影做好的控制。從活動前一天的彩排,當天活動前的預演,到當天下午正式開始,如何將所有流程講者要分享的故事協助控制得好,這個經驗是非常難能可貴的。

活動進行中的環境介紹:
  • 舞台上講者的前方地上有兩個小螢幕,一個可以播放講者投影片,另外一個是要播放倒數計時的提示,講者的背後是一大面投影出來正在講的剪報頁面。講者身上只會有麥克風和投影片切換的遙控器。
  • 工作人員的音效、聲光、電腦控制必須在遙遠的二樓控制中心進行協助,電腦必須可以支援影片播放、投影片切換和其他音樂播放等需求。

過去我們做過台前簡報,也有過或多或少的簡報授課的經驗。但是試想今天 TEDx 這樣的舞台,要如何進行呢?又會碰到那些問題?需要志工的我們來克服。
  1. 筆記型電腦 Mac 僅會有一個影像輸出。
  2. 電腦與舞台距離非常遠,而且是不同層樓。
  3. 講者會到當天還在修改自己的檔案。
  4. 講者會給很多個人命名的檔名,包含了影片、投影片、圖片集,甚至會分版本,檔案大小也非常大。
  5. 如果有六個講者,搭配主持人等等不同播放需求,順序而言是要緊密在一起,不會有讓觀眾等待的呆滯時間。

以上你是否覺得已經面臨不曾有過的挑戰與壓力了呢?

彩排與預演階段對於志工我們而言僅是摸索環境與熟悉環境而已,更別說出包不斷、卡住連連等狀況百出。發生了檔案太大 copy 很久等待的窘境、發生了電腦抱來抱去切換螢幕造成當機發生、發生了檔案找不到播放不對的狀況、發生了協助人殺過來電腦控制台詢問某講者檔案準備齊全否實際上檔案是落在另外遙遠工作人員的身上、發生了講者準備在台上練習了卻發生螢幕打出來上下不一致情況、發生了太多慘不忍睹的狀況。

請問如果是工作人員的你我,要如何進行下午觀眾滿席的盛大活動呢?

活動預演結束活動進行前的中間休息時段,我們技術工作人員團隊招開非常重要的檢討會,做出來幾項重大的改變:
  1. 將所有手頭上所有散亂眾多版本檔案點名,抓出要活動所需的檔案。
  2. 根據活動進行的順序將檔名分出順序,何時播放影片、何時緊接投影片都排序清楚。
  3. 兩台以上的電腦都準備一份檔案,但是將各個電腦進行任務分配,哪台串接主螢幕,哪台負責影片哪台負責投影片,如何交互配合切換的分配。

最後上陣了!過程緊張緊湊,分分秒秒計較的準確切換,目標讓整個節目組合到天衣無縫的感覺。也只有在參與的當下,才能親身感受的台上講者說的動人勉勵的故事同時,也能體會到我們自己身在台下堅守崗位的幕後推手責任心與榮譽感。這次協助機會得來不易,讓我們學到志工寶貴的一課,全場的觀眾也被台上的講者感動的全體起來鼓掌最為最後的 Ending,也順利讓活動劃下完美的句點。

Thursday, September 1, 2011

Inception Deck

Created by Sticky Notes for iPad
當我們工作面臨到各式各樣大小專案、也會參與產品的設計,我們有什麼方法可以讓我們的團隊大家是保持在同一個方向同一個陣線上前進呢?團隊合作在於彼此扮演好自己負責的角色。在 Agile Samurai 這本書介紹到 Agile Inception Deck,這是一套有效 Agile 方法讓團隊們可以在最一開始就保持對的方向。

如何運作

Inception Deck 是要告訴我們把對的人拉進來,彼此商量對的問題,把大家對於這個專案擁有的期待收集整理起來。將整個團隊透過幾個步驟與方式把整個概念與想法可以凸顯出來,透過這一連串的方法可以把好的想法激發出來,大家彼此對於這個計劃的樣貌,不該成為的樣子,最終要產生怎麼樣的結果 ship 出去一一成型化。

只要涉及到這專按計劃的成員都要參與,最理想是要包含客戶、負責人、團隊成員、開發人員、測試人員和分析師等等。負責人參與相當的重要,因為我們碰到最艱難做與不做抉擇之間,是需要負責人幫忙判斷做裁示的。

而 Inception Deck 是活躍的,它不是一個拿來做完文件後就不再碰,而是要把它放在團隊某個地方提醒大家該做什麼,為什麼要這麼做。

這是 Inception Deck 的概括,當然 Agile 原作者有提到,這是個起頭點,可以試著靈活運用,做出屬於自己的方法。

1. Ask why we are here.
這是提醒我們自己,為什麼我會在這邊,我們的客戶是誰,為什麼我們會選擇要起始這個專案計畫。

2. Create an elevator pitch.
如果我們僅有一個搭電梯的時間來介紹我們的專案計畫,我們會如何介紹,這個時間長僅有 30~60 秒時間而已。而 Elevator pitch 有個簡單常用的公式:給某某某,需要做怎麼樣的事情,這個計劃產品是個如何的工具,用來滿足怎麼樣的行為。不像於哪些系統工具,我們的工具是建立在什麼什麼理念之上來達到怎麼樣的服務。

3. Design a product box.
如果今天在雜誌上看到咱們的廣告,我們會希望它呈現什麼樣子,最重要的是,人們會什麼要購買它。

4. Create a NOT list.
要做什麼事情很容易,我們可以許願許不完,但是如何清楚定義出我們不要做的是很重要的。

5. Meet your neighbors
我們的計劃社群比我們想像中大很多。為什麼我們不把大家拉進來喝喝咖啡,聊聊與認識彼此呢?

6. Show the solution.
讓我們把計畫藍圖畫下來,打算用什麼技術來解決我們的問題,畫出來讓團隊們可以有共識。

7. Ask what keeps us up at night.
什麼事情發生會讓我們半夜睡不著覺的,這算是風險評估。怎麼情況下會影響我們很深,要把它寫出來,避免這個恐怖錯誤機會發生。

8. Size it up.
將整個計劃要進行多久,多大規劃明確定義出來。

9. Be clear on what's going to give.
專案涉及時間、範圍和金錢。怎麼調配情況下是我們可以接受並且交付出去的。

10. Show what it's going to take.
成本要花多少?時間要多久?我們需要把我們的團隊規模大小定義出來讓我們投資者知道。

在專案裡頭使用 Inception Deck 不是夢幻,他是要讓大家都可以在同一個房間,有如
讓對的人都坐上巴士,問尖銳有效的問題,共同討論,然後再把結果分享給負責人或者資助者。雖然這要花一點功夫和時間,但是這對於專案理想中的期待是可以帶來無價的幫助。也用此來提醒我們和我們的團隊夥伴們該扮演好我們的定位與角色。

以上是 Inception Deck 的概念與概略方法,想要瞭解更多可以參考原文 The Agile Inception Deck.