Results tagged “UI” from XXC@Blog

我的工作主要在規劃網站。但作網站也需要Prototyping嗎？當然需要，但視狀況斟酌進行原型製作設計的完成度。

目前我的工作中，如果是大型的新網站開發，涉及較為複雜的功能與操作流程，我們會建議客戶在專案項目中，包含「原型製作」這一個工作項目。一剛開始，並不是所有客戶都理解(或接受)網站規劃需要有原型製作這一個階段。的確，許多的客戶都只要求看「首頁」，而且是做到視覺接近完成的首頁。稍微有一些網路操作經驗的客戶懂得看網站架構(website structure)，用來釐清整體網站建製專案的規劃架構。

網站架構圖是一種常常被使用的網站規劃文件，也絕對有存在的必要性。但是就目前的網站設計技術而言，我們有各種的內容管理系統、社會網路媒體平台、互動多媒體設計、有多重分類架構的電子商務網站、使用者參與社群、甚至可以自由連結的「Wiki-like」網站，這許許多多不同的網際網路環境規劃與設計，恐怕也絕非靠網站架構圖就可以規劃釐清的。

換言之，當代的網站，已經慢慢的由「超文本」，轉而成為「工具服務」了。所以我們需要的，不僅僅只是滿足於「草稿大綱」，而更需要完整的「設計藍圖」。

兩個月一次的UI Gathering聚會又將在4月份展開，本次主題為原型製作(Prototyping)。原型製作(Prototyping)是設計溝通與解決複雜問題不可或缺的方法。使用製作原型方式驗證設計，能即早發現問題，節省開發成本、加速開發效率。本次聚會我們邀請到三位專家，針對實體裝置、網站與軟體等三種不同領域的原型製作分享他們多年來的經驗。

活動時間: 2009/4/19(日) 13:00-17:00

地點: 伯朗咖啡南京店 台北市中山區南京東路二段218號3樓 (南京東路建國北路口)

報名時間: 2009/4/6 (一) 22:00 到 4/10 (五) 22:00 (額滿為止)

人數: 60人

報名方式及費用:
請上 http://registrano.com/events/uigathering041909 報名，並完成付款程序(線上刷卡或者ATM匯
款)，本次活動費用含場地費及蛋糕1塊、熱咖啡冰紅茶無限暢飲，共400元。(注意：不接受現場報名)

議程:
12:40 報到
13:00 開場
13:10 主題演講: 媒材、設計與適應性思考 唐聖凱
14:00 Coffee Break
14:10 主題演講:「偽」網站設計-Website Prototype Design的實務應用分享 蔡明哲
15:00 Coffee Break
15:10 主題演講: UI prototype實作經驗分享 林秉舒
16:00 Coffee Break
16:10 Lighting Talk: Prototyping經驗交流
17:00 閉幕

主講者:
華碩電腦 使用者經驗設計師 唐聖凱(Tony Tang)
從建築、運算到人機互動，近十年來研究與學習的累積，在華碩設計團隊作為落腳。目前從事創新性介面設計與研究，希望藉由帶入使用者經驗研究、互動原型術
以及適應性運算，來產生高使用度的人機介面設計。

悠識數位 行銷總監 蔡明哲(Richard Tsai)
悠識(UserXper) 首席架構師，Axure RP快速原型工具專家，熱愛網站原型設計，致力於推廣UCD觀念及Prototyping方法。更多介紹請參閱：http://userxper.com/services/training/consultants#richard

前華碩手機互動介面設計師 林秉舒(Maso Lin)
從事Flash、動態介面設計相關工作約8年時間，曾於Asus、BenQ等公司擔任互動介面開發工作。更多介紹請參閱：http://masolin.blogspot.com/2007/07/about-maso-lin.html

Lighting Talk:

聚會最後一小時的時間，我們保留給大家發聲。 如果你也願意分享你製作原型的方法，請確認報名成功後，寫信給本次活動策畫阿修(lis168@gmail.com)報名，每人發表時間7分鐘。

關於活動內容或者報名方式有任何的問題，歡迎來信給予UI Gathing活動小組(uigathering@gmail.com)
本次活動策劃人 - UI Gathering活動小組 - 阿修

其實準備投影片還蠻辛苦的...常常要在心中模擬聽眾的反應，確定內容大家都能理解，並且感興趣。並且要拿捏份量，不能講得太多。最近，Presentation Zen就介紹了Michael Alley的說法，主講者必許在演講的深度與廣度間，做出一個取捨。

由於第三次分享前一週，已經請Max來介紹Usability（使用性/優使性）的實務經驗。我也樂得輕鬆，只要講一些瑣碎而且管用的小東西就好了。因為我想大部分的學生都會作網頁，或是會開始裝扮自己的Blog等等，所以我覺得由一些網頁設計的實際案例與小訣竅與設計，會比較容易讓學生們理解。這些都是一些入門級的概念，看到這篇文章的行家們請多多包涵。

I heard some open source projects for faceted browsing OPAC UI before. Just like the Endeca or AquaBrowser, the new-era end-user-interface will function alongside, not integrate into ILS(Integrated Library System). I think it's a new trend for future Library system framework.

Now, here comes a Open-Source soluation: FacBackOPAC by Casey Durfee, based on the Apache lucene search project: Solr.

Solr is an open source enterprise search server based on the Lucene Java search library, with XML/HTTP and JSON APIs, hit highlighting, faceted search, caching, replication, and a web administration interface. It runs in a Java servlet container such as Tomcat.

Durfee's lovely coding is just 250 lines program in PYTHON/Django to present a Endeca-like feature. The code is in Google Code and licensing in Apache License, everybody can download it.



Here are more Solr in Libraries experiments in various program languages (Perl, Rudy on Rails, etc...).
But there are still problems. The codepage in old MARC. And also the integrate between different Library information systems; meta-Search in multiple database is still complex. Someday the NISO MetaSearch Initiative may help this situation.



Another interesting open-source project is eXtensible Catalog (XC):

The University of Rochester’s River Campus Libraries is studying how best to develop an open-source online system that can unify access to traditional and digital library resources.

This project has several phases, the the phase 1(2006-2007): survey users and system environments was done. see the XC Survey Report here. There are some interesting results. For example, researchers ask respondents for their "What is the Dream on-line catalog products they will buy if money were no object?":

Respondents clearly favored Endeca (17instances). Other popular choices were III Encore and Millennium (7 instances) andAquabrowser (6 instances). Fewer respondents chose Evergreen (4 instances) and Primo (3 instances). Several products were named less frequently, including Aleph (2 instances), Talis’snew product (2 instances), WorldCat (2 instances), and Sirsi (1 instance). When given theopportunity to think without being limited by financial concerns on this question, other librariessaid that they would purchase either Google (3 instances) or Amazon (1 instance) if money wereno object. Amazon’s programming was even more frequently named in the respondents’comments than in their product selections (3 comments).

This survey also ask respondents for OPAC features they most wanted, the top 3 :

1. Works alongside your existing library servers (catalog, metasearch, OpenURL link resolver, authentication server, repository, course management system) to provide new features to end users (578 response)
   
2. Faceted search interface (545 response)
3. Integrated user interface that searches across digital and non-digital resources (books, articles, digital repositories, DVDs and more) at the same time (497 response)

上週六下午，去參加台北的 UI Gathering 2007 Q2。我沒有想到會看到有這麼多人，跟這麼多公司。我太驚訝我的後知後覺跟資訊落後，所以一定要寫一下我所看到的：

• 東道主：這次的Gathering好像是由Yahoo! Taiwan 方面的同好負責的。
• 人數：總共約有60多人參與。
• 議程：Benq、Yahoo! 與 Trend 趨勢科技的UI部門分別跟大家介紹他們工作的狀況與內容。有趣的是，這剛好也分別代表了三種不同產業類型：工業設計、網路服務、軟體設計。這三種產業的UI研究與開發工作，都有各自不同關注重點，分工，以及跟整個組織合作的模式。
• 產業觀察：我也發現，來參與同好們的公司，幾乎都是業界內的佼佼者：ASUS、HTC、鴻海、啟碁、等等。行銷界的知世網路也來了好多人。故宮跟頑石這兩家數位內容provider也有人來。因為來的人蠻多的，沒法一一都記得清楚。雖然不知道邏輯上的因果關係：是因為重視UI所以成為佼佼者，或是因為成為佼佼者以後才重視UI；不過，這兩者看起來像是高度正相關的。
  
• 人多的缺點：連帶的，因為參加的人太多了，我也只有跟少數幾個人聊到而已。
• 有趣現象：幾乎每一家公司的人在自我介紹的時候，都會以「我們也在徵人...」來作為開場或收尾。
• 有趣現象之黃雀在後：學學文創也有人來參加。他們想要在下半年度規劃這方面的課程。
• Intern: 有幾家公司都有與學校合作Intern。因為我也只跟少數同好聊過，目前我所知道的，都以傳播與設計科系為主。我有想過，LIS 這方面對於Information architect, User behavior 這方面的研究專業也是有發揮的空間的。理想上是如此，但是不論對業界，對學界，這都是還沒有磨合過的關係。我想，能介紹幾位老師在課堂上，請到業界UI研究人員來分享工作經驗，先建立彼此的瞭解會比較好。當然，我「非常相信」LIS 有很多的知識是可以在這個領域上發揮的。但是彼此還需要有更多的瞭解。
• Intern 後續亂想：我會想到哪些課程可以作這樣的安排：資訊行為研究、資訊系統評估、資訊架構、研究方法。

在四月24日 A List Apart (ALA)(註) ，這個網頁設計者的必讀網站，進行了網頁設計調查研究。這個問卷對象主要是製作網站的人。我離開職場回到學校唸書已經3年了，也許現在網站設計環境已經跟當年有些改變。但是如果就我以前的認識，從職稱，能力與教育背景的問項可以看到一些有意思的東西。

那些算是「製作網站的人」呢？在這份問卷中的第四個問項中，詢問填答者的職稱，項目包括了：

1. 設計師(Designer)
2. 開發師(Developer)
3. 介面設計師(Interface Designer, UI Designer)
4. 網頁設計師(Web Designer)
5. 專案經理(Project Manager)
6. 資訊架構師(Information Architect)
7. 使用性/優使性專家/顧問(Usability Expert/Consultant/Lead)
8. 可及性專家/顧問(Accessibility Expert/Consultant/Lead)
9. 文案/編輯(Writer/editor)
10. 創意總監/藝術總監(Creative Director, Art Director)
11. 網頁(站)總監(Web Director)
12. 網頁(站)製作人(Web Producer)
13. 站長(Webmaster, Web Master)

那麼，這些琳琅滿目的職稱背後，需要哪些專業能力呢？第五題列出了以下選項：

1. 圖像設計/視覺設計 (Graphic design)
2. 頁面編排，介面設計 (Page layout, Interface Design)
3. 資訊架構，頁面框架，網站組織 (Information Architecture, Wireframing, Sitemapping)
4. 編寫HTML, XHTML (Markup HTML, XHTML)
5. 編寫CSS (CSS coding)
6. 使用性/優使性測試 (Usability testing/knowledge)
7. 可及性測試 (Accessibility testing/knowledge)
8. 前端程式開發 (Front-end programming, e.g. JavaScript)
9. 後端程式開發 (Back-end development, e.g. PHP, Ruby on Rails, ASP)
10. 圖像編輯處理 (Image editing/production)
11. 文案/編輯 (Writing/Editing)

嘿嘿，對SOHO來說，常常你的客戶都要求你一個人一手包辦吧。我最近看104上面的網站設計類接案快報，開出來的工作項目還都是希望能找一個一人打天下的料呢。這就像棒球投手一樣，大聯盟球隊的投手要分為先發、中繼、救援、左打者專門投手等等，甲子園的投手通常就只能一人投到底。當一個老闆(業主)說，「hey，我們只要甲子園的程度就好，LP擔著好好幹吧」，這還算上道。至少他知道這中間的差距。如果老闆說「那找一個全才不是更好？」的時候，最好他有出得起松阪級薪水的準備，要不然只是徒增雙方痛苦而已。

這麼多專業能力，哪些科系有提供這樣的學科訓練啊？這份問卷的第十題提供了一些線索：

圖書館科學(Library Science)？沒搞錯。我也是現在開始念圖書館資訊研究所以後，才瞭解到這兩種工作上的相關性。圖書館科系的資訊組織課程有助於資訊架構與網站組織的能力，資訊行為研究根本就是使用性與可及性測試的基礎。而這些都是在設計與電腦科系較不擅長的。

雖然這份問卷並不是為了台灣網頁工作者所設計的。特別在第21, 22, 23 關於年度休假與福利的問項上，在51勞動節的今天看起來特別刺眼。不過填過這份問卷，反而可以知道許多事情。(問卷抽獎：研討會入場卷、30G video ipod、T-shirt的部份了)

註：ALA 也是美國圖書館學會(American Library Association)的縮寫。完全是巧合。

網站經營者，或者是"web master" 這個已經很少人提了的角色，都會需要使用一些網站統計或是流量分析工具，來了解網站上來來往往的觀眾的行為或是興趣。除了商業上使用的付費服務之外，Web master通常會用自建流量分析系統(如AWStats)，或是使用免費的線上流量分析服務(如Site Meter、Google Analytics)。這些服務通常可以描述出基本的點選次數、訪客人數、來訪網址，進階一點的可以分析最常被搜尋的關鍵字等等。我的被搜尋關鍵字第一名一直是「foobar」，但是其實根本沒有寫些什麼，我只是單純愛用者而已。這些流量分析對於行銷的策略規劃比較管用，對於網站設計而言，頂多只是透過統計了解使用者使用的瀏覽器比例，螢幕解析度大小等等。

Google Analytics 有提供一個Site Overlay的功能，可以透過統計，模擬出一個頁面中被點選的hyperlink次數與比例。

但是如果這與實際測量使用者的點選行為，畢竟還是不同的。因為如果一個頁面上有兩個連到相同url的超連結，Google  Analytics 會將這兩個超連結算在一起，而沒有辦法區分那一個連結是比較有效的。而另一種專門紀錄網頁click行為的系統或服務，應該能更正確的測量出使用者的行為。最近TechCrunch介紹了三種網頁點選分析服務，也許對想要進行網頁使用者行為的研究有所幫助：

• clickdensity - website heat maps for usability and information architecture
  在網頁上加入一些javascript之後，Clickdensity 可以記錄使用者在頁面上的點選行為。30天/單一網頁/5000次點選，免費試用。正式版以月費方式計價，由2.5到200歐元不等。
  (tags: Usability user-behavior-research Statistics)
• Crazy Egg
  透過加在網頁上的javascript，分析網頁的使用者點選行為。Crazy Egg 提供三種統計結果：overlap、list、heatmap。
  (tags: Usability Visualization Statistics user-behavior-research)
• ClickTale
  與一般透過大量統計的網頁使用者分析方法不同，ClickTale 錄下每一個使用者的實際行為，重現使用者動作。目前需要申請通過之後才能試用，不知道如果被分析的網站有成千上萬個使用者行為�
  (tags: Usability Statistics Visualization user-behavior-reseach)

Click Density 的分析圖範例。用顏色顯示滑鼠點選次數的多寡；可以發現無意義的亂點也不少。

魏澤群(《使用者最大》一書的作者)的兩個網誌可以找到不少關於使用性測試(或，優使性測試)的說明。兩個網誌的原因好像是因為搬家的關係。Blog系統跳船的成本還是一直很高啊，搬舊的文章到另一個地方真的是一件苦差事。Usablility Net 是一個今天才看到的網站，資源豐富。

• UXBlog-使用者經驗部落^^--優使性(Usability)
  (tags: Blogs UX Usability)
• 優使性測試 (Usability Testing)
  (tags: Blogs UX Usability)
• UsabilityNet: usability resources for practitioners and managers
  介紹Usability相關資源與方法的主題資源網站
  (tags: Usability Reference Directory Portal)
• UsabilityNet: Methods table
  介紹多種Usability 研究、測試、開發的方法
  (tags: Usability WebDesignTool)

SIGIA-L Maillist的討論區中，一個題為"The art of reading" 的討論串(discussing thread)中，意外冒出來有關一本食譜的討論。(Sigia-l Digest, Vol 9, Issue 39-45. 2005 Jun)

原本的討論是環繞再數位媒體與實體的閱讀行為，Ziya(Listera)提到他有一本印刷精美的 1280頁精裝食譜，但是當要作某到菜的時候，反而是先到Amazon.com上看看有沒有在他們的 "Search in this book" 裡面。發現沒有以後，Ziya只好摸摸鼻子，無奈且沮喪的回去翻那本大書。那時他發現原來他是多麼的依賴資訊技術。

Glenda(Webindexing)，認為其實(書後)索引是很管用的，只是大部分的人都認為食譜的(書後)索引一定是太過簡單了，所以都不想使用。

Ziya回應說，書裡面的索引是不錯啦，但是現在是2005年啦，誰還會花時間去書上查資料啊~~

Jan Jursa提到他用一個壞掉的15吋液晶螢幕放在廚房當食譜架(真是不錯的點子)，不過對1280頁的食譜而言，實在是太重了一點。

(這倒是讓我想到，除了數位內容方便檢索以外，數位內容也比較方便轉換其他形式呈現，如印出，下載到可攜式行動設備，未來的電子紙等等。而紙本的在這方便的使用性顯得較低。拿到廁所或浴室看書除外，反正資訊設備遲早有一天一定會進攻廁所浴室的)

這幾天的SIG-IA 的maillist 討論著這個話題，稍稍整理了一下。 功能性導覽(meta navigation)通常指「聯絡我們、線上協助、搜尋、購物車、網站地圖」之類的導覽項目。這些導覽項目通常安排在網頁的右上方。特別將功能性導覽 (meta navigation)從全區導覽(global navigation)處區分出來，是因為這些功能性瀏覽項目，往往並非網站的主要目的，而只是屬於功能性輔助的項目。有時這些功能性項目也會被稱為工具項目或是輔助性項目。 根據Young(2003)的看法，她將全區導覽(global navigation)進一步細分為三類：主要導覽(primary navigation), 工具性導覽(utility navigation)與頁尾導覽(footer navigation)。她並沒有提到 meta navigation 這個詞彙，不過在概念上相當於她分類中的工具性導覽與頁尾導覽。 儘管詞彙上的定義互相交雜，但是 Scheid (2005) 認為meta navigation這個詞彙，在語義上可以表達出「詮釋這個網站本身的連結項目」的意涵。(meta有詮釋，說明的意思。這時候中文很難把meta這種雙關性翻譯出來) 但是也有人認為，"meta"的字義來看，所謂meta navigation應該是所謂「導覽的導覽」，這麼來看，通常只有「網站地圖」(site map)可以稱得上是meta navigation。因此為了避免溝通上產生問題，運用上可能還是避免使用meta navigation這個詞彙。 Krug(2005)認為，將全區的頁面導覽連結(globe navigation)區分功能性(uitility)與內容分類(content categories)是有用的；而且功能性導覽也不一定要被安置在頁面的左上角區域，與內容分類導覽並列，或者使用較小的字體用來區別兩種不同的導覽等等。 中文翻譯上，我把meta navigation翻成「功能性導覽」是從它的功能性來翻譯的，雖然喪失了meta所擁有的「超越的、更高層的、詮釋性的」這樣一個隱喻象徵，但是也避免了產生「導覽的導覽」這樣的混淆。 References * Dean, Stew (2005, Jun 2). Maillist Sigia-l Digest, Vol 9, Issue 3 [ Msg 5]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Govella, Austin (2005, Jun 1). Maillist Sigia-l Digest, Vol 9, Issue 2 [ Msg 13]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Krug, Steve (2005, Jun 5). Maillist Sigia-l Digest, Vol 9, Issue 8 [ Msg 3]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Jursa, Jan (2005, Jun 2). Maillist Sigia-l Digest, Vol 9, Issue 3 [ Msg 2]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Maurer, Donna (2005, Jun 1). Maillist Sigia-l Digest, Vol 9, Issue 2 [ Msg 14]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Scheid, Eric (2005, Jun 3). Maillist Sigia-l Digest, Vol 9, Issue 4 [ Msg 5]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Young, I. (2003). Site Navigation: Keeping It Under Control. adaptive path. Retrieved June 3, 2005, from http://www.adaptivepath.com/publications/essays/archives/000103.php