HPX (Happy Planner) 網站企劃輕鬆聚

User Friendly 2009 國際研討會活動摘要

本文轉載自UPA CHINA官方報導:

User Friendly 2009大會已於從11月15日在上海華亭賓館成功舉辦。本次大會邀請到Bill Moggridge、Jared M. Spool、Marc Rettig三位蜚聲國際用戶體驗領域的資深專家作為大會主題演講人,不僅為大家傳授豐富經驗與獨到觀點,更就“為亞洲設計”這一大會主題,與參會人員進行深入的探討。

本次大會吸引到各國內外知名公司的參與,包括微軟、Ebay、諾基亞、泛亞汽車技術中心、SAP、百度、搜狐、新浪、網易、騰訊科技、華為、中興通訊、阿裏巴巴、中國平安、虹軟、龍旗科技、海爾、聯想、四川長虹、TCL 、步步高、Skema Connexions、悠識、愛可信、霍尼韋爾、第九城市、盛大、群碩軟體,、新蛋、唐碩用戶體驗諮詢、籬笆網、華碩電腦(臺灣)、Hyperlink、美國道富資訊科技、邁瑞、歐特克軟體(中國)、愛可信(南京)等50多個國內外知名公司,近500多名行業人員、行業貴賓及媒體記者分享他們的行業經驗。

據組委會初步統計,本次大會工作坊共吸引到工作坊與圓桌會議790人次,開設32場工作坊與圓桌會議,邀請46名來自美國、加拿大、英國、澳大利亞、日本、印度、中國香港,臺灣地區和中國大陸等國家和地區的主講人主講,其中來自中國本土用戶體驗專業人士主講的工作坊與圓桌會議佔據六成,內容涵蓋廣泛,從設計與研究的技術到用戶體驗的商業實踐,從用戶體驗團隊建設到用戶體驗的管理,從創造中國本土設計到中國設計的國際化,從互聯網領域擴展到領域移動設備、銀行產品、電子商務、企業應用系統,充分體現中國用戶體驗行業發展的現狀與趨勢。

本次大會上同時舉辦了2009中國用戶體驗設計大賽優秀設計作品展29組作品以及印度用戶體驗行業設計作品展,並邀請30多位設計大賽入圍與獲獎選手前來參與大會、展示作品。

大會合作媒體28家,來現場採訪報導的媒體近15家,另大會主題演講得到網易科技頻道網路直播,大會晚宴得到新浪微博的互動支持。 除此之外, 大會期間設立了UX書展與UX人才招聘欄為行業人員提供服務,唐碩用戶體驗諮詢、 Noldus、 Hyper Link、 loop11、HP、 HFI、上海心儀、Solutions Space和Tobii9個公司分別在大會期間設置了用戶體驗展臺,向與會人員展示他們在行業領域的最新收穫。

User Friendly 2010大會將在2010年11月12日-14日于中國南京舉行,敬請期待。

User Friendly 2009大會主講嘉賓
User Friendly 2009大會
User Friendly 2009大會-學生設計競賽作品海報


網站企劃的好用軟體工具,你知道哪些?

受開拓文教基金會之邀,到「98年身障團體資訊運用座談會」 ,分享網站企劃的方法跟技巧。其中部分內容介紹自己熟悉的軟體工具,得到還不錯的迴響,也許這些資訊對其他網站企劃工作者也是有用的。

【為什麼軟體工具對網站企劃工作是重要的?】

網站企劃工作過程,很少人討論應該使用什麼工具來提高產值跟效率。

看看我們身邊的網頁設計師,網站工程師,如果今天不准他們使用軟體工具來進行他們的工作,大家還有辦法做事嗎?視覺設計師能夠在紙張上手繪畫面嗎?網頁設計能夠一行行寫html tag嗎?工程師如果不懂得用一些好用的文字編輯軟體(比如 以notepad++寫程式,或者採用Visual Studio開發),要他們一行行寫code應該會很慘吧!?

工具就像是武器,就算你只有三腳貓的功夫,一旦拿到絕世好劍,就可以耀武揚威。如果拿到臥虎藏龍中周潤發的青冥劍,或者拿到周星馳功夫電影中的如來佛掌秘笈,恭喜你,功力瞬間提昇數倍。

工具就像是汽車,你就算跑不贏劉翔,但只要你有車或搭高鐵,肯定可以比劉翔用跑的更快抵達終點。

軟體工具對網站企劃工作是重要的!好的工具帶你上天堂,不好用的工具帶你住套房,記住!

【有哪些好用的軟體呢?】

》 Microsoft Office是首選,不是因為它特別好用,而是大家幾乎都會操作Word, PowerPoint, Excel。

但你只會Office 軟體是不夠的,因為老闆/客戶都會,這使得他們會看不起你的企劃文件 (誰不會用 PowerPoint畫網站sitemap啊!) 如果習慣使用Microsoft軟體,那麼建議至少使用Visio。

網站企劃工作在策略階段,進行分析/研究/訪談,還是應該使用Office軟體。但是在其他不同階段,還有一些軟體可以讓你的企劃速度跟品質更好。

1. 資料及概念整理

》 Excel – 製作網頁清單Excel檔(Content List)。拆解網站的網頁內容或項目,整理在Excel中,這是很基本的專案管理工作。

》 Google – 蒐集資訊最好用。試試輸入關鍵字 “網站企劃書 filetype:ppt”。別人寫好的網站企劃文件都可以拿來參考。 filetype:doc 找Word文件,filetype:pdf 找PDF文件。

》 Freemind – 畫Mindmap ,用來腦力激盪/蒐集點子最好用。很容易調整資訊項目的分類跟層級或歸屬。

2. 概念具體化

》 Faststone– “借”畫面最快。畫面擷取軟體很多,我喜歡FastStone的輕便跟捲動擷圖功能(幫你把長長的網頁,一次到底抓成一張圖)。

》 Axure PR– 快速畫出示意圖/架構圖,如果Visio是機關槍,Axure RP就是大砲了。

3. 團隊溝通

》 Freemind – 開會時直接當場修改Mindmap,會議結束立刻形成共識。嘗試過簡報時以Mindmap來呈現嗎?試試看,會有意想不到的效果。

》 Axure RP – 輸出成 HTML Prototype + Spec Word文件,還有誰敢說你不是專業的網站企劃,多數客戶跟老闆看到所有的畫面跟規格文字都整理在Word裡頭,都會佩服你的細心。網頁設計師或工程師看到 HTML Prototype,而且還可以在瀏覽器上點來點去,應該沒有理由說看不懂了。

》 Excel – 這不用多說了,沒有工作清單,誰能知道要做多少事情?

4. 網站經營 (流量分析)

》 Google Analytics

【還有哪些好用的軟體呢?】

以下這些我沒使用,但聽過有些用過的朋友覺得還不錯:

》Balsamiq Mockups – 手繪風格的wireframe,開會討論時會議氣氛特別好,因為實在太可愛了,看到這些畫面很難生氣的。

》 Firefox 的plug-in Pencil Project,畫質媲美Visio,竟然是免費下載。

》 Excel 。你沒看錯,Excel可以做出很棒的網站企劃,包括架構跟畫面。

你呢?
你使用什麼軟體來幫助你做網站企劃,別藏私,好東西拿出來分享一下吧!

[文章出處:悠識 UserXper.com
同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]


推薦:數典平台系統【使用性設計】工作坊-南部場次

數位典藏【使用性設計】工作坊-南部場次

數典平台系統【使用性設計】工作坊-南部場次剪影
數典平台系統【使用性設計】工作坊-南部場次剪影

活動正式網址:
http://aspa.teldap.tw/index.php?option=com_content&task=view&id=430&Itemid=1

數典平台系統【使用性設計】工作坊-南部場次

數位典藏與數位學習國家型科技計畫
數位典藏與學習之學術與社會應用推廣計畫(第四分項)
人文與社會發展計畫(子計畫三):使用性介面改善與社會影響

傳統網路系統設計常見追求上線速度的迷思,在傳統軟體開發流程上所倚賴的架構與規範,例如:需求分析、使用者研究、系統架構與分析以及使用性測試等,都在追求時間的精簡而被犧牲掉了,自然這樣缺乏完善規劃,而倉促完成的網站系統,也注定要付出友善設計(user friendly)不足的代價,在網路平台此類正宗的「自助式產品(self-service product)」上,「網路絕對是使用客戶主導的環境,手握滑鼠的人決定著一切。因為在這裡,另尋他處簡直太容易了,訪問世界上其他任何的競爭者都不過在於滑鼠的一擊而已。」(Nielsen, 2000),使用者經驗(User Experience)已經凌駕成為使用者決定選擇與否的最主要影響因素。在使用者中心設計(User-centered Design / UCD)概念下中,使用性(Usability)是其實踐的主要方法與標準,本工作坊目的,即在有系統的進行介紹互動設計概念、使用性評估與參與人員將可藉由參與此工作坊,瞭解開發數位典藏平台所需的互動設計概念以及未來系統改進時所需的使用性評估方法,對提升數典系統近用性與擴大對社會影響將有莫大的助益。

日期2009年11月7日(六)

10:00 – 10:30 報到
10:30 – 12:00 主題:使用者中心設計(User-Centered Design)在台灣產業中的應用
(講者:張天鳳─Corel UED使用者經驗設計師 User Experience Designer)

12:00 – 13:30 午餐時間

13:30 – 15:00 主題:使用者中心設計概念及使用性的介紹
(講者: 李峻德老師-國立交通大學 傳播研究所副教授)

15:00 – 15:30 下午茶時間

15:30 – 17:00 主題:範例與測試/實際瞭解操作困難/發表與討論
(分組實際操作進行使用性測試的演練)

招收人數:
55人(費用全免,名額有限報名請早),對象不限,凡有興趣者皆可參加

工作坊地點:
國立中正大學社會科學院一館227教室
(地圖請看附件 ,社科院一館位於校門進入後直走右轉即到)

報名與相關聯絡查詢:
電子郵寄將附檔報名表回覆至 HCI.workshop2009@gmail.com

主辦單位:
國立交通大學傳播所

協辦單位:
國立中正大學傳播系暨電訊傳播研究所

報名方式:
為便於場地與座位安排,填妥後請於11/2(星期一)前回覆,
報名成功後我們會於11/3公布姓名於交大傳播所網頁上及統一發email通知,謝謝!
請將參加回條電子檔 回信至電子信箱: HCI.workshop2009@gmail.com

聯絡相關訊息:
助理:曾琳,董正王亭,黃郁晴
手機:0918977847,0936214113, 0933317470
聯絡信箱: HCI.workshop2009@gmail.com


搜尋框 (Search Box) 的設計

搜尋是網路上最常見的行為之一,沒有人會否認站內搜尋功能的必要性。透過良好的站內搜尋功能,網站使用者可以節省點選導覽選單的時間,更快速的找到需要的內容。

好的搜尋功能並不容易開發,有太多搜尋功能上的創意跟想法,必須透過程式技術來完成,也就是說介面的構成很容易,但是程式開發很辛苦!比如 AutoComplete (又稱為Live Search或Smart Search) ,又比如 Search Result Ranking (Google的搜尋結果排名就是了不起的學問)。

搜尋功能的眾多設計要素中,唯一一點跟技術沒有直接關係,跟介面設計有關的部份,就是搜尋框(Search Box)的設計

搜尋框的設計觀念,至少包含三種元素:
1. 一個標籤文字(Label),用來說明這裡是搜尋框
2. 一個Text Field(文字輸入框),讓使用者輸入關鍵字
3. 最後放上搜尋按鈕(Search Button),讓使用者執行搜尋的動作

因此我們會經常看到這樣子的搜尋框構成:
關鍵字:_________ [搜尋]
查詢:___________ [查詢]
Search:_________ [GO]

然而搜尋已經是非常普遍的網路使用行為,以致於在搜尋框前面那個標籤文字似乎沒有太多作用了。因此許多網站為了節省版面空間,幾乎都不標示搜尋框的前置標籤文字了。

你注意到了嗎?下面這些知名網站,分別是Google, Facebook, Yahoo, CNet的搜尋框都沒有放置標籤文字。
Google, Facebook, Yahoo, CNet的搜尋框都沒有放置標籤文字

取而代之的是,直接將提示搜尋的文字,放在Text Field裡頭,當滑鼠游標點擊Text Field則自動清除提示文字,這樣的設計可以達到提示效果,又可以節省版面空間,一舉數得。

大家發揮一下想像力,搜尋框的設計三元素可以被精簡到什麼程度呢?

[細節放大鏡:一次只看一個細節,從中找到問題/啟發/學習。
文章出處:悠識 UserXper.com
同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]


Facebook塗鴉牆留言文字框(Text Area)

網站介面設計的友善性來自於細心地處理了很多細節。
我們就從熱門的facebook來看FB塗鴉牆的留言文字框(Text Area)的設計。
Facebook塗鴉牆的留言文字框(Text Area)的設計

一般社群網站或BLOG的留言介面,都採用較大區域的文字輸入區域,在UI Pattern的術語稱為 Text Area。常見的Text Area都是固定3行,4行或更多行的高度。

為什麼FB塗鴉牆的Text Area卻只有短短的一行高度?
這個設計應該是從Twitter 的介面學習來的。
只有一行高度的輸入區域,在UI Pattern的術語,稱為 Text Field

使用者看到Text Field時會自然被制約,直覺認為只要寫入一行文字,不用寫太多。因此在Twitter或FB塗鴉牆上書寫文字,潛意識中比較不會被迫要寫很多文字,沒有了這個壓力,自然就容易書寫。

Text Area高度太高,會佔掉FB畫面的上方空間。因此FB塗鴉牆以精簡的一行高度來解省空間,讓下方的各種留言有更多的機會被閱讀(跟Twitter一樣)。

為了解決使用者留言會寫下較多文字的可能性。FB塗鴉牆的Text Area會因為文字輸入自動換到下一行,而且高度也自動放大,取代一般垂直捲軸(Text Area的Scroll Bar)的介面,這是另一個貼心的設計。這等於是一種Text Field跟Text Area兩種Pattern的整合版。

當然,本文分析FB 塗鴉牆介面的優點是事後諸葛,只是藉著觀察來推測FB設計的用意。令我感到好奇的不是FB採用什麼技術 (複雜的JavaScript+CSS)完成這樣介面,而是什麼樣的過程跟構想,使得設計者最後設計出這樣的介面

這個介面讓FB的畫面不只提供較佳的閱讀性,更強烈的鼓勵使用者留言。類似的細節很多 (比如,讚一下)。當FB在眾多的細節中,默默地鼓勵使用者進行互動,使用者也就更容易被FB友善的介面黏住。

歡迎你留下更多不同的看法或評論。

[細節放大鏡:一次只看一個細節,從中找到問題/啟發/學習。
文章出處:悠識 UserXper.com
同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]