2009年4月25日 星期六

[課堂心得]4/21資訊結構與網站設計-實作戰略篇

gunsinlaschools
這可是真槍…我也不知道為啥會找到一張很瞎的圖,來自Joe Huffman
一個討論試爆、政策、軍事安全的部落格...很酷(在愛達荷州)
上一週是團體Card Sorting練習,所以沒有特別的心得
大家都玩得很開心~

-------------------------------------------------------------------------------------
因為下週要考試,所以寶煖老師用個Check List幫大家稍微總複習一下
我就大概記下一些重要之處,如下:
一、首頁部分
  1. 載入時間要快(10sec, 8sec, 6sec)
  2. URL要好記:別用底線、空格
  3. 標題簡潔有力:包括Logo與title,別用怪符號
  4. Tag或標語力求明顯易懂
  5. 四大系統:導覽、組織(勿太多類、層次)、標示與搜尋(各自內容請參照前幾週)
  6. 時常更新:以人力修改,自動會出錯(也比較沒意義,要大修改才算)
  7. 聯絡方式:聯絡方式應該明確,電郵、留言、討論區等
二、目標
  1. 使用者為最重要導向(網站為使用者而生,行銷麻)
  2. 目的明確:不要兼顧兩個以上的目標,會模糊焦點、彼此干擾
  3. 別讓使用者想:Don’t Make Me Think!!!
  4. 容易判斷:讓使用者可以直接決定或選擇內容
三、功能
  1. 瀏覽器支援:最好是每個瀏覽器都能跑(功能別太多,就很容易達到)
  2. 外觀:Look & Feel,字形、顏色等
  3. 圖片:善用ALT Tag(標註文字)、圖上不要增加字(看不清楚)
四、內容
  1. 使用者一目了然整個框架
  2. 溝通性:使用者會瞭解
  3. 瀏覽性:左而右、上至下
  4. 方便印出
  5. 協助使用者瞭解網站資源分佈
五、下載
  1. 結構:文章在上,圖片在下(多字少圖):顯示文章為主要目的
  2. 多用縮圖(目前幾乎所有編輯器都支援)
六、版面
  1. 無頁框
  2. 網頁與表格:以百分比值來設定,非固定值
  3. 長篇文章要拆開
  4. 文字齊左排列
七、連結
  1. 超連結的文字要有意義:別出現「點我、這裡」之類,最多提供連結提示(特殊情況才要)
  2. 不要提供死連結:要定期檢查
  3. 回首頁:點Logo、房子、首頁
  4. 導覽列項目別太多
  5. 可展開圖示不要太小(會很難點)如一些加號、倒三角
  6. 麵包屑:網站深淺度標示
----------------------------------------------------------------------------------
花了一週複習完後,本週的主題是「IA的過程與方法論
也就是策略篇(PPT)-今天會抓幾張圖都是從這兒來
首先就是一個IA大師需要哪些部分的知識
  1. 使用者研究
  2. 網站內容與功能
  3. 資訊組織與體系
  4. 介面設計(互動、美工)
  5. 實作能力
感覺似乎無所不能,沒錯!就應該無所不能(期末報告壓力真大...)
不過更上一層的建置目的必須先確認,這也就是Business Goal
要問老闆(stackholder)了!出錢的或出力的人希望這樣一個網站做什麼
是營利、非營利還是個人內部使用?老師有列出一些原因
  • 增加曝光率
  • 省實體行銷成本
  • 企業知識管理
  • 作業自動化(供應鍊,不需人力介入)
那麼網站即便建好了,又該如何知道它有達到上述的效果呢?(也就是評鑑部分)
比較明顯的跡象可以由以下看出來
  • 拜訪人數
  • 執行某動作的次數:如購買行為、下訂單、報名等
  • 滿意度調查
  • 委外執行測試(好用性)
  • 是否成功降低客服成本(人力成本)
那如果要有規模地或是找出其中原因的話,就需要問使用者了!
有以下三種方式去知道使用者是怎麼想的(由單純到複雜排序)
  • 訪談:必須要對問題,不能太抽象(具體改善之處)
  • 觀察:模擬情境,設定任務去執行
  • 好用性評估:最複雜的方法,必須根據量表或自行製作(如Card Sorting,下圖)
image
就是我們上禮拜作的事,把組員希望網站有的東西自己寫下來
然後再聚集在一起整理並排好,就知道哪些部分是大家普遍需要的!image
到規劃階段部分,重點就是發展策略TACT

  1. Think(思考)
  2. Artculate(記下來)
  3. Communicate(溝通)
  4. Test(測試)
然後如右圖,產出報告與討論
透過組員刺激,刻畫最後的設計藍圖

設計藍圖的部分,就有以下兩種方式呈現
  • 藍圖(Blueprint):展開每個網頁連結與內容的關係
  • 草圖(Wireframe):初步呈現網站的架構與內容格局(如下圖)
image
------------------------------------------------------------------------------
下課啦~下週要考試...又有事情忙啦

沒有留言: