BobChao the Blogger: userexperience

顯示具有 userexperience 標籤的文章。顯示所有文章

2013/7/13

Now you see me, now you don't

標籤： design, Firefox, MozTW, userexperience

UX Build 開始調整關閉鈕的空間，目前的設計是分頁超過一定數量後會隱藏關閉鈕... 還可以，視覺上是簡潔了點，但沒有非常喜歡就是（個人比較偏好要固定出現關閉鈕，畢竟 Firefox 的分頁有最小寬度、不必像 Chrome 一樣為了避免誤按而藏起來）。

2013/6/22

Firefox 的新界面 Australis，分頁部分

標籤：設計, Firefox, Mozilla, MozTW, userexperience

已經開始有些媒體針對這個新的界面撰寫報導，事實上現在你也可以透過 UX Build 玩玩看。大家一眼就會看見的是分頁，我想順道就針對分頁的更動列出幾個自己覺得重要的事情：

弧線

Australis 的線條大概是目前瀏覽器裡最「弧」的一個（剛巧 Firefox 也是最「狐」的瀏覽器 -- 冷！）

上：Australis (in UX Build) 下：Google Chrome

以我所知，有幾項設計理由：

Firefox 在各版本間開始追求的、一致的設計語言：柔軟、友善，很多稜稜角角的東西都改成圓弧狀了。這樣的風格早已在 Firefox for Android 上呈現，現在桌機版只是（終於要）跟上而已。
速度感：不要問我這是硬扯的還是真的，反正有張投影片是在描述，這樣的弧線有跑車似的流線型感覺... 好啦是有流線啦，有沒有反映到感覺上，我就不知道了。

好看嗎？難看嗎？我覺得看久倒是意外的順眼，當初 Thunderbird 剛換上這個主題時個人讚譽有加，Firefox 換上多少有點不習慣（TB 跟 Fx 開的分頁數目有巨大差異），但使用 UX build 一陣子之後，我是還蠻喜歡的。

強調當前分頁

目前的設計加強「目前分頁」的存在感。一方面拜弧線所賜，相較於舊的設計確實更有「從網址工具列長出來、是一體的」的感覺；二方面，此設計削弱了背景分頁的存在感，除去框線使其融入標題列中。

有人覺得這會造成背景分頁較難辨識與瞄準，我是還好；但無論如何，帶來的好處倒是顯而易見，整個瀏覽器的分頁列確實變得更乾淨、更不打擾 -- 不打擾是 UI 設計上大家都想追求的東西，很高興 Firefox UX Team 不僅僅用砍掉元素的方式來整理標題列，在色彩、線條的設計上也投下心力。（例如，除了背景分頁框線不見之外，你有注意到兩個相鄰背景分頁之間變成直線嗎？）

其他

一定爆炸多人覺得這根本抄 Chrome，且不論每個瀏覽器都有上一頁下一頁、每個電話都有掛斷的鍵，我就舉幾個在分頁列部分跟 Chrome 一樣或不一樣的地方：

標題列不見了，有人討厭有人喜歡，我是喜歡的那一派（我之前一直比較喜歡 Chrome 在這部分的設計，精簡）
每個分頁的關閉鈕還在：雖然實際上用到的機會不大，相較於 Chrome 的背景分頁沒有關閉鈕，我比較喜歡讓它一直存在。
Chrome 分頁太多時基本悲劇，還好 Australis 仍然保留這部分的堅持:

又，PTT 上莫名其妙有很多人覺得這樣的設計會浪費空間 -- 怎麼會？東西都要搭配各種環境一起看的，且讓這些截圖告訴你：

其實 Australis 的一大要點是凸顯「自訂」這件事情，此處的體現大抵藏在那個真的從 Chrome 來的 Menu 選單中。之後有機會再分享我的看法。

如果你有興趣要瞭解 Australis，可以參考 Wiki 上的設計文件及當時用來展示的草稿圖。

聲明

大概有人會覺得上面這些偏好單純因為我很少用 Chrome，事實上我不但每種瀏覽器都用（是啊，我想多瞭解），在過去半年也都用 Chrome 當主力瀏覽器。青菜蘿蔔各有所好，如果我剛巧就是喜歡某個多些，別覺得我太偏袒哪 :)

2012/9/5

我使用的 3 種網站框線圖、原型工具比較

標籤：心得, prototype, userexperience, Wireframe

工具有好有壞，不過到一個地步後，比的常只是適用時機跟熟悉程度。抱持這個信念，我經常試用不同的網站框線圖（Wireframe）及原型（Prototype）工具，以下整理此時此刻還算熟悉的三種 – MS PowerPoint、Adobe Fireworks、Balsamiq Mockups，並從個人角度予以比較。其實我自己還用過 FlairBuilder、Axure RP，當然還有手打 HTML，不過這其實是篇躺在草稿匣裡超過一年的文章，且讓我先中斷拖搞吧。

要繼續看下去之前，有些背景資訊還是先聲明一下，這應該有助於讀者判斷我的論點有多少參考價值：

我曾經服務於知世安索帕，處理使用體驗事宜。個人負責的部分，會需要製作原型的時機，大多是為了要說明或實驗某種互動情形，而專為那些小範圍設計的互動原型。
MozTW 的網頁，我大多都參與製作過程，也經常是類似於企劃的腳色，目前 Mozilla Taiwan 的網頁我也有參與。
本文寫作時，我還沒什麼機會為大網站製作原型，大致都是活動站或甚至單頁。偶而有時會製作小程式軟體的。後來有機會製作某大網站的框線圖與使用性測試用的原型，此時 Axure 那類有 Template 的工具會有點用，但為了其他人作業方便我還是用了 PowerPoint。
如果是自己要用的框線圖跟原型，我大多不在意顏色，偶爾會需要強調些什麼就是了。
我常切換於 Linux、Windows、Mac 之間，三邊都能用的軟體在我心目中會大加分。

那麼就開始吧：

Microsoft PowerPoint

PowerPoint 是我大學時期的好朋友，十分熟悉。組合動畫部分我小有心得，應該可以把「以具象動畫解釋抽象意涵」寫為專長，也以製作多媒體簡報為名做過幾個案子。PowerPoint 的優點是在微軟的努力荼毒之下，每個人多少都會用（精不精另當別論），也就是說這是個蠻適合多人輪流編修的工具。

本文撰寫時最新版：2010 （Windows）
價格：包含在 Microsoft Office 中，商用版定價約一萬元，不過你公司八成已經有買授權 :)

但也就是如此了。一般的狀況下蠻 ok，不過 PowerPoint （以及 Word）都為了「一頁看得完」的模式設計，對於經常一頁望不完的網頁來講是個阻礙思考的石頭。又，雖然有動畫功能，且結合多頁仍然可以做出還蠻不錯的互動效果幫助說明，不過它的本意畢竟不在此，除卻滑鼠點擊之外的行為都有點麻煩。由於兩邊不討好，還有其他選擇的情形下，無論是畫純框線圖，或者製作互動原型，PowerPoint 不是我的首選。

那為什麼之前會用呢？因為還要跟沒有其他選擇的人一起畫 XD 又，有時就是得把做出來的東西整理到投影片上，那麼這樣可以就地編修，也還算是個額外加分的優點。不過 2007 改介面之後畫圖變得有點麻煩，不知道能不能把繪圖物件單獨拉出來變成面板，這有點阻礙我的思考速度 :/

如果你也需要用 PowerPoint 來畫框線圖或簡單的原型，可以考慮下載這兩個元件範本來用：

PowerPoint Wireframe Template for UI design，手繪風喔！
PowerPoint Wireframe Stencils as Free Download，還提供了很多小圖示可以用

當然，作為自由軟體的支持者，不免要提一下 OpenOffice.org 這個免費、功能也不錯的辦公軟體。在繪製框線圖及簡單原型的部分，我覺得 OO.o 的 Impress 與 PowerPoint 大致是一樣可用，如果你是個體戶想省點錢，OO.o 夠了。不過 OO.o Impress 的動畫部分，雖然已經支援了 PowerPoint 2000 以後的所有特效，但編排介面說實在很差就是。

Adobe Fireworks

Macromedia 惠我良多，最愛的軟體是 Dreamweaver 與 Fireworks，也曾獲邀參加 Close Beta 測試。由於在 Fireworks 8 以前一直是愛用者，熟練度算也蠻不錯。

雖然我確實比較不喜歡換成 Adobe 品牌後的各項老 Macromedia 軟體，不過從 CS2 之後開始不用 Fireworks，卻不是因為情感上的理由，純粹因為當時我就轉用 Linux 了，而 Fireworks 8 用 Wine 跑得很順。事實上 gfx.tw 的 mockups 就是用 Fireworks 8+Wine+Linux 畫的。

本文填寫時最新版：Fireworks CS6
價格：大概台幣 14000 元，愈來愈貴了！

Fireworks 在我心中還是繪圖工具更多一些，不過產品策略上近期確實越來越轉往原型製作了。既然原本是網頁用的繪圖工具，超連結什麼的它當然有顧好，甚至也可以打簡單的 HTML 區塊進去。很早就有多頁概念的它，簡易的互動原型不成問題，而一直以來也有雄厚的擴充套件作為後援、讓你更方便地加上網頁相關的物件。

缺點是你會很容易往視覺的方向想，畢竟它本來是繪圖軟體嘛，東加一點西加一點，定力不足一下子就迷失了 XD 又，因為後來發現 Balsamiq Mockups 實在爆炸快，如果不是必然得要測試視覺的狀況，就不會用 Fireworks -- 連光碟都忘了丟哪裡去了…

據說近期 Fireworks 新增了很多方便製作原型的東西，如果你本來就需要用這套軟體修圖，可以考慮採用，我自己是沒在用了。

Balsamiq Mockups

掀起手繪風框線圖熱潮的 Balsamiq Mockups，一開始用只是覺得實在太可愛，後來倒是發現它很努力地往「讓你更方便快速地說明」這個方向前進。

本文填寫時最新版：去更新就對了，一次付錢終身更新。
價格：美金 $79，我的授權是用 OpenSource 社群參與的身分換來的

它的功能很簡單：框線圖。由於架構在 Adobe AIR 上，所以 Linux、Mac OS X 以及 Windows 都可以用，且檔案格式開放所以也有一些程式支援匯出入，例如 iPad 上的 iMockup、FlairBuilder 等等。

相較於其他這邊介紹的工具，它很貼心地在你滑鼠移到某物件上時，就自動在旁邊顯示相關的屬性面板。雖然其他工具多少會用工具列來讓你方便調整，但「在旁邊」和「在上面」是差很多的。另外，豐富的預設物件集，涵蓋網頁上的基本物件及一些常見的組合效果（例如分頁、地圖等），輔以可愛的手繪風，這些都讓 Balsamiq Mockups 在編輯上順暢又愉快。就我個人來講，畫框線圖用 Balsamiq Mockups 是最愉快的。

互動能力部分，基本上近乎零。你可以為物件設定點選的連結，不過就只能是這樣而已。如果要做互動原型，可以考慮搭配 Napkee 做後天調整，但 Napkee（我也有授權顆顆）不是很好用… 所以我僅拿來畫框線圖而已。

由於它採一個檔案就是一頁的方式，或許不適合頁面數量太多的網站 -- 管他的我也用不到 XD

使用這套軟體的朋友可以多逛逛 mockupstogo.net，上面有很多別人已經畫好的東西可以直接載來用。

之後有機會再來補上 FlairBuilder、Axure RP Pro 及手寫 HTML 的狀況，其實我真正還想討論多人共編時的狀況 (這會需要考慮團隊成員全體的軟體使用能力，以及元件重複使用的可能性)，但，以後再說吧。

2010/10/5

互動素描標記法 v0.1

標籤：翻譯, userexperience

Interactive Sketching Notes 0.1，姑且譯為「互動素描標記法」。前端工程的工作裡，無論是跟別人解釋互動點子、跟設計師溝通出圖什麼的，有套一致的標記方式應該是比較有幫助。

字不多，又是 CC:BY-SA，我就翻完了，請用。有什麼翻譯建議，或者你實務上的經驗想分享的話，也當然歡迎留言。

有點遺憾沒能用語義良好的 SVG 來呈現，搞不好哪天會發瘋把 Style 全部抽出來 XDD 有空再說吧。

2010/9/25

完美的 404

標籤：翻譯, userexperience, WWW

原文 The Perfect 404 by Ian Lloyd

Translated with the permission of A List Apart Magazine and the author[s]. 授權採 CC:BY-NC-SA 3.0（因為 ALA 不給商業利用。）

Bob: 我譯得很隨性，就原有的句子的意思、在描述上自由發揮了。也就是說，我不會變更作者的意思，但如果發現原意用中文不好體會，就會改用容易體會的方法換句話說。所以總之，相當程度上，我在改寫。但，翻譯原本就是改寫了，我並不真的是信達雅的信徒。

又，原文程式碼部份採「對讀者友善」的方式用了折行標記等東西，我這邊改採「對剪貼簿友善」的作法、把原文折行的部份又併回一行了。這樣比較好複製，至於如果你要印出來… well…

如果您發現哪些部份翻譯有誤，請留言指教。

糟，好像有什麼出了問題，但你也不確定是什麼 — 是你的問題、還是網站的問題？接下來又該怎麼辦？

歡迎來到 404 錯誤頁的世界。你直接輸入網址、也或許是點了某個已經年久失修的連結，向伺服器要求一份網頁，隨即發現自己身處虛擬世界中的飄渺之處。對訪客好一點的網站還會提供幫助，但大部分則就什麼事也不做、單純仰賴瀏覽器內建的功能向訪客描述目前狀況。我們當然能做得更好點，不是嗎？

對於在伺服器上設定自訂 404 頁的方法，我就不提了，建議你可以讀這些文章：

Creating a Custom 404 Error Page (4 Guys From Rolla)
Creating Custom Error Messages in Apache (4WebHelp)

然而，我在此將針對大部分造成這種錯誤的原因，提出打造自訂 404 網頁的策略建議。

要開始著手設計，我們得先看看大眾發現自己身處 404 網頁的常見理由：

打錯網址、書籤過期未更新等
搜尋引擎連往過期的網址
網站管理員沒發現的站內錯誤連結

這些理由都會前往同樣的地方，但處理的方法卻應該稍有不同 — 404 網頁必須針對不同狀況分別量身訂作。有些小技巧可以用來處理上述的情境，但我的第一個建議卻非常簡單…

不要指責

無論如何，都要告知訪客情況有誤，但不要指責訪客、就算你知道真的是他們的錯也一樣！這邊可用「可能」、「或許」等詞彙，別弄壞與網站訪客的關係，一旦搞砸、搞不好再也沒機會彌補了。

404 必備

除了「出錯了」的文字外，請確保錯誤訊息網頁上包含這些：

通往網站首頁及網站地圖（若有此頁）的連結：最容易解放訪客的方法，這個不花腦筋的作法用不到什麼奇技淫巧。
搜尋欄位：如果你的網站有搜尋功能，就放到 404 網頁上。若網站沒有搜尋功能、又常常出現 404 問題，那麼或許該弄一個來。
清楚簡約的外觀：避免把網站的標準導覽元素都放到 404 網頁上。一方面你應該避免讓使用者分心，二方面在 404 網頁上放導覽元素很可能造成更新不同步的問題。你的 404 網頁若非以程式動態更新，則更新狀況很容易就落後網站其他頁面。連 404 網頁上的導覽元素都失效絕對是你最不想發生的事，尷尬！

也請避免使用術語。我的意思是，因為我們算一掛的，所以在這裡可以討論 404；不過 60 歲的阿姨逛編織網站碰上錯誤連結，來到這頁後可能就完全不瞭「404」是什麼東西。如果你想使用「Error 404」這樣的詞，那便隱晦點 — 例如放在頁尾，留它向看得懂這些電腦黑話的網路咖打聲招呼。

接著，來看看怎麼打造 404 網頁可以讓它幫你一把、而非推你一下。

聰明點

到此，我得先說清楚，這邊的技巧需要用上不少 JavaScript（你不見得可以用伺服端的程式來解決這些問題，這端視伺服器設定）。所以，記得使用 <noscript> 標籤，讓關掉 JavaScript 的訪客也能獲得妥當的訊息。如果你能用伺服端程式，那便最好，可以無視瀏覽器跟網頁無障礙等等的問題，下面這些程式碼就斟酌參考。

首先，要設定一些變數：

var strReferrer=document.referrer.toLowerCase();
var blnSearchReferral = false;
var blnInsiteReferral = false;
var str="";
var strSite = "";

接著，要拿這些變數做什麼呢？

打錯的網址

網址打錯，或從過期書籤來的訪客不會有 HTTP referrer，所以要處理這種狀況的程式如下：

if (strReferrer.length==0)
{
  str+='我們猜想下列連結對您可能有用：<\/p>';
  str+='<a href="\/home.php"><img src="/images/home.gif" alt="Home Page" width="100" height="30"\/> <\/a>';
  str+='<a href="\/site-map.php"><img src="/images/site-map.gif" alt="Site Map" width="100" height="30" \/><\/a>';
  str+='<hr \/>';
  str+='<p><strong>您找不到這個網頁，或許是因為：<\/strong><\/p>';
  str+='<ol type="a">';
  str+=' <li><strong>書籤\/我的最愛過期了<\/strong><\/li>';
  str+=' <li>搜尋引擎上<strong>關於我們網站的連結過期了</strong><\/li>';
  str+=' <li><strong>打錯網址</strong><\/li>';
  str+='<\/ol>';
  document.write(str);
}

搜尋引擎連結過期

如果訪客有 referrer 值，我們可以先辨識出幾個特定的搜尋引擎（你可以依據自己的喜好調整辨識清單）。辨識後，我們拆解搜尋參數，看是否有與此次搜尋相關的頁面：

if (strReferrer.length!=0)
  {
  if ((strReferrer.indexOf(".looksmart.co")>0)||
  (strReferrer.indexOf(".ifind.freeserve")>0)||
  (strReferrer.indexOf(".ask.co")>0)||
  (strReferrer.indexOf("google.co")>0)||
  (strReferrer.indexOf("altavista.co")>0)||
  (strReferrer.indexOf("msn.co")>0)||
  (strReferrer.indexOf("yahoo.co")>0))
  {
  blnSearchReferral=true;
  //取得網址 — 切到第一個斜線為止
  var arrSite=strReferrer.split("/");
  //找出搜尋字串
  var arrParams=strReferrer.split("?"); 
  var strSearchTerms = arrParams[1];
  arrParams=strSearchTerms.split("&");
 
  strSite=arrSite[2];
  var sQryStr="";
 
  //定義不同引擎查詢關鍵字的方式
  var arrQueryStrings = new Array();
  arrQueryStrings[0]="q=";  //google, altavista, msn
  arrQueryStrings[1]="p=";  //yahoo
  arrQueryStrings[2]="ask=";  //ask jeeves
  arrQueryStrings[3]="key=";  //looksmart
 
  for (i=0;i<arrParams.length;i++)
  //跑 URL 中所有的參數
    {
    for (q=0;q<arrQueryStrings.length;q++)
    {
    sQryStr = arrQueryStrings[q];
    if (arrParams[i].indexOf(sQryStr)==0)
      {//找到搜尋關鍵字了！
      strSearchTerms = arrParams[i];
      strSearchTerms = strSearchTerms.split(sQryStr);
      strSearchTerms = strSearchTerms[1];
      strSearchTerms = strSearchTerms.replace("+", " ");
      }
    }
    }
  //告知訪客網站有誤，以及原先搜尋的詞彙
  document.write ("<p>您先前在 <a href='" + strReferrer + "' target='_blank'>" + strSite + "<\/a> <\/strong> 搜尋 「<strong>" + strSearchTerms + "<\/strong>」。然而，這個搜尋引擎可能有段時間沒來了，你找到的連結已經過期。<\/p><h2>放心，一切都好<\/h2><p>我們猜想下列連結對您可能有用：<\/p>");

接著，針對不想流失訪客的特定來源關鍵字詞，可以加上幾行識別程式。舉例來說，假如搜尋「電器」跟「設備」時你的網站排得蠻前面、但相關的網頁卻搬家了，這時你當然不想流失那些 Google 來的訪客，對吧？

if (
  (strSearchTerms.indexOf("widgets")>=0)||
  (strSearchTerms.indexOf("electronics")>=0)
  )
    {
    document.write("<a href='\/cool-widgets.htm'>我的電器設備大展<\/a><br \/>");
    }
  }
  }

當然，如果你的網站有站內搜尋功能，現在可以拿這個搜尋關鍵字來搜尋一次。站內搜尋或許能自動產生相同搜尋字詞的網頁連結，無須動用上述的工人智慧。但無論如何，建議採用工人智慧的方法，不然可能只是讓訪客多增加一次找不到網頁的機會而已。

站內失效連結

從搜尋引擎來的迷途羔羊們都關照過了，接下來就必須對付 referrer 不是從搜尋引擎來（或至少不是從你挑的那幾個引擎來）的情況。我們得再增加些條件：

if (!blnSearchReferral)
  {
  strSite = strReferrer;
  strSite = strSite.split("/");
  strSite = strSite[2];
  document.write("<p>從 <strong><a href='" + strReferrer + "'target='_blank'>" + strSite + "</a></strong> 來的這一頁已經不存在消失。<br/>建議您試試看下列連結：</p>");
  }

接著提供的連結就是首頁、網站地圖等等。

那如果你自己的網站有問題呢？

即使發現 referrer 是從自己的網站來，你也不好在 404 網頁上單單說「本網站有錯誤連結」。在這種情形下，你可能需要調整字詞，承認犯了小錯：

blnInsiteReferral =((strReferrer.indexOf("http://www.mysite.co.uk")>=0)||
    (strReferrer.indexOf("http://www.myothersite.com")>=0))
  if (blnInsiteReferral)
    {
    document.write("<p>這是我們的疏失！對您說聲抱歉，我們會揪出負責這條連結的人，在他修完錯誤後給他二十鞭。<\/p>");
    }

修正錯誤

這下我們已經提供逃離 404 黑洞的路，但真的修好了什麼東西嗎？沒有。既然已經知道訪客索求的文件網址及其來源（如果有來源），那確實還有一些事情可作。我們可以自動、或要求碰上 404 網頁的訪客按下「回報錯誤」鈕，接著把這些資訊存進資料庫裡。要求訪客手動回報可以減少雜音，確保你看到的都是最重要的錯誤連結。接著要怎麼處理這些錯誤連結，就看你了。

2010/9/22

24 個你可以提昇 Firefox 使用體驗的機會

標籤：筆記, 開放源碼, Mozilla, MozTW, userexperience

Firefox 使用體驗團隊的頭兒 Alexander Limi 貼了篇文，列了 24 + 9 個 UX 團隊希望能在 Firefox 4 解決的問題。這些問題，都（還）不會阻擋 Firefox 4 釋出，卻也不單是修圖、微調那類的東西。希望能人異士出手相助，幫助大家提昇使用體驗，或者最少，如果你覺得這問題很重要，到 Bugzilla 提出 block 的建議。以下依據優先序筆記一下前幾項的內容：

升級時，將未經使用者明確授權即安裝的第三方附加元件（Plug-ins or so）停用，主要影響啟動效能。有點類似 IE9 Beta 啟動時提醒你某個附加元件太拖累的東西，但另外也在意「不經使用者授權即自行安裝」的元件（如 Skype、Norton 軟體、Java 等）。
自動清理重複的附加元件，又是 Java，似乎 Microsoft DRM 也會重複灌版本號碼不同、但只是升級而已的套件。這應該是沒有好好指定套件 ID 的緣故。
Windows 下視窗最大化時，分頁與標題列同置一行，就像 Google Chrome 一樣，增加瀏覽空間。這好像有人在試了。
在 Windows 上啟動時，螢幕繪製的狀況比 Fx 3.6 慘。
更聰明的網址自動補完。有人動手了。
即便是 HTTPS 的網站，當掉後也要能自動復原。似乎是政策問題多過實做。
合併停止與重新讀取鈕後，不應使停止鈕出現「停用」狀態。
萬一頁面讀得很慢，使用者想按下「停止」鈕的時候會發生兩種狀況：
- 順利停止網頁讀取，或是
- 網頁在按下前的一瞬間已經讀取完畢、按鈕變成「重新讀取」，所以使用者按到的是「重新讀取」鈕、暴怒。
為了防止這種情形發生，目前的作法是在網頁讀取完畢後仍暫時顯示「停止」鈕、但採停用狀態以防止誤觸。雖然實際上對網頁讀取速度沒有影響，但多那半秒的「停止」模樣可能會讓使用者以為網頁讀取變慢了。
又，你覺得 Firefox「抄」其他瀏覽器嗎？這個 Bug 有 Google Chrome 的開發者上去分享 Chrome 設計的理由 XD 且不論「原創」所指為何，請搞清楚在這個世界裡的共創理念。（這個 bug 有人動手了）
網址列中，網域部份加重顯示，其實我記得以前 Firefox 曾經有過測試版是如此作用的，但沒加到最後版本的原因不明。有人動手了。
強化拖曳分頁時的視覺提示，MozTW 討論區之前有人提過，目前沒人動手，我也很想要這個功能 :/
減弱搜尋欄圖示的干擾，或者更準確點描述問題：「那個區域現在已經有星星、RSS icon、重讀、停止等各種顏色的圖示會出現，搜尋引擎的圖示則是另一種本身就五顏六色的干擾源」。不過個人覺得，現在 Fx 的搜尋欄已經是各家有此功能的瀏覽器中最好的一種了（我尤其不喜歡 Safari 的方式，原因同 Comment 5），接下來可以走的方向應該就只有與位址列合併了吧？
在選單中增加縮放控制的介面元素，類似 Google Chrome 現在的作法。討論中，我不是很喜歡 Google Chrome 7 dev 實做選單中多重控制項的方法，尤其 keyboard inaccessible、and no tooltips 這些小細節。
「應用程式分頁」中的外部連結，應該開在新分頁裡。可以來討論「什麼叫做外部連結」 XD
應用程式分頁隱藏瀏覽工具列等元素。好處：很多 Web 應用程式確實不需要瀏覽器內建的導覽列。壞處：但，有的需要啊！又，「外部連結」的 Bug 裡有人提到，這會讓辨識釣魚網站變得比較困難。應該是不用期待 Firefox 4 會有這個。
多重選取分頁，又一個邁向提姆所謂「Firefox OS」的東西？

因為我也沒有每個 bug 都點進去看，所以先紀錄到這裡吧。有興趣的可以去看一下原文。其實整份清單還很長，如果你對相關的問題有興趣，可常回 Mozilla Wiki 上參考完整清單。

2010/8/25

Default Settings of CamStudio For UX Test

標籤：心得, userexperience

CamStudio, for Windows, can record the entire screen and voice, plus a few features to make it a good software for UX Test, and it's free software (amazing!) Here's my default setting of CamStudio:

Video Options

Compressor: Microsoft Video 1
Quality: 65
Check the Auto Adjust in the frame rate section

It's not necessary to use the loseless codec, since 65% is good enough, at least in my case.

Cursor Options

Check Show Cursor, and Use Actual Cursor
I use light yellow Circle in Halfsize (the default value) for Highlight Cursor

Actual Cursor is context-rich and helpful for quickly figure the position of cursor (on a link, along with the window border… etc.)

Recording

Check Record audio from microphone in the main Option menu
Audio Options > Audio Options for Microphone
- Recording Format: 11.025 kHz, mono, 16-bit
- Keep the default value in other sections.

Program Options

The worst part of the setting UI in CamStudio, IMO.

Check these options:
- Minimize program on start recoding
- Hide flashing rectangle during recording
- Save setting on exit
- Capture translucent/layered Windows
In Play AVI file when recording stops, choose Do not playing AVI file. You may want to play the video clip right after your "test run" recording to check if everything goes well, but I'll suggest to switch back once you make sure the settings are suit your need.
In Temporary directory for recording, choose Use Windows temporary directory.
In Recording Thread Priority, choose Above Normal.
In Name of AVI file, choose Automatic file naming

CamStudio should have someone revisit this part of UI, really inconvenient.

訂閱：文章 (Atom)

BobChao the Blogger