今天要介紹的是影響使用者體驗的三大因素：
使用者行為、介面行為，還有系統行為。
主帶:翁婷瑜
首先，什麼是使用者行為呢？
使用者行為，顧名思義，就是觀察使用者在網站上做了甚麼事情，藉由觀察使用者的行為，我們可以了解
「使用者是誰？」
「使用者進入這個網站的目的是什麼？」
「使用者在什麼情況下會使用這個網站？」
透過了解使用者行為
我們可以設計出符合人性的網站畫面，讓使用者在使用網站時，能夠不產生疑惑，在最短的時間內，抓取網站上的資訊，看懂這個資訊，並完成使用者進入該網站的目的
而使用者在網路上操作的過程，就叫做「介面行為」
我們藉由觀察使用者行為，來推測介面行為，設計出一個方便易懂的網站，
雖然使用者至上，但如果不會太打擾使用者，通常我們還會設法誘導使用者在這個介面下做出我們想要的行為，以達商業利益。
第三個是系統行為
如果今天我們是一個平面設計師，我們的工作就是設計好令人賞心悅目的畫面，但今天做為一個UX設計師，我們要關注的是畫面帶給人的實際感受，比如說今天你點擊某網站的商品圖片，但過了5秒之後，商品細節畫面卻遲遲不出現，身為UX設計師，你必須在美美的畫面出不來的時候，安插一個「資料下載中，請稍後」的醜畫面，達到安撫民心的作用
也就是說你必須知道當網站速度不如預期的時候，系統到底都在背後執行了些什麼，從哪裡下載什麼資料，那麼你才能在醜畫面裡跟使用者交代得清清楚楚。
以下就透過多個網站的例子
讓大家更清楚這三者的差別還有意義
首先是使用者行為的案例
這裡我對比出使用者的想法，還有業者的想法，順便帶出介面行為的概念。
以小三美日為例
小三美日是一個以美妝為主的電子商務
對業者來說是消費者，對UX設計師來說是使用者的我，進入了這個網頁
在化妝品的分類中，我點進了韓國彩妝某知名品牌的頁面，看到了感覺不錯的口紅。
對業者來說，他們會發現這個消費者偏好韓國品牌的彩妝。
對UX設計師來說，為了讓使用者更方便尋找需要的商品，網頁就會出現推薦商品，都跟韓國品牌有關
我準備要結帳的時候，發現必須加入會員才能結帳，雖然有點麻煩，但反正也沒有幾格欄位要填，就加入會員吧！
對業者來說，有了會員的加入，他們可以寄email廣告給消費者，也有很多網站跟line、ig、fb合作，所以廣告還會出現在跟消費者息息相關的各種社群網站上
對UX設計師來說，加入會員的各種過程最好簡單快速，否則使用者可能會直接跳出網頁，去另一個網站購買商品
剛剛藉由使用者行為，其實已經帶出了一些介面行為的概念，
接下來一樣繼續透過各大網站的例子來說明
怎麼樣的介面是方便使用者使用的
首先來比較「加入購物車、購買」，這個按鈕出現的位子，在小三美日的網頁中，一開始是在網頁的底部位子，隨著使用者往下滑，這個按鈕會跟著往上，最後直接置頂
像這樣，讓使用者即使看完商品介紹，滑到最底下，還是可以直接看到購買的按鈕，非常方便。
接下來是加入購物車的按鈕，蝦皮拍賣網站的按鈕只會一直固定在原處，不會跟著跑。
蝦皮商品資訊跟圖片分開，不太方便瀏覽，點進圖片看完以後，會有點搞不清楚，我再來必須按哪裡才能跳出畫面，因為他連個叉叉都沒有顯示，大家覺得要怎麼樣才能退出這個圖片，回到剛剛看到的畫面呢？
接著幫蝦皮平反一下XD來看看大家都說比較好用的蝦皮APP
蝦皮app的購買按鈕從頭到尾都會在最底端，不管你滑到哪裡，然後雖然商品資訊跟圖片仍然沒有放在一起，但是圖片點進去以後，終於有一個叉叉，讓使用者有個逃生口可以跑，會讓使用者安心很多
剛剛說的都是比較容易理解的東西，再來要跟大家介紹一個專有名詞：
資訊架構
資訊架構指的是，進入一個網站時，我們可能會直接看到一橫列的連結，透過那些連結，我們可以連結到跟這個網站相關的其他網頁，在製作網站前，通常會先畫個類似這樣的樹狀圖，幫助設計者對網站結構更加清晰
資訊架構對介面設計來說非常重要，一個真正好的資訊結構，甚至可以讓使用者完全察覺不到他們的存在，那到底甚麼叫無感呢？我們先來看看以下的例子，感受一下什麼叫做讓使用者很有感覺的網站。
麥當勞的網站
上禮拜我朋友說早餐想吃麥當勞，可是我沒有在麥當勞買過早餐，所以想說進去網站，看看早餐到底都賣些什麼？
一進去網頁之後，我就想著要找到他們介紹產品的地方，這裡有甚麼讚活動、饗美味、優品質、得來速，恩應該是饗美味吧！好，點進響美味之後呢？
早餐在這裡，恩？那快樂一起拼？拼什麼？再往左邊看，銅板輕鬆點，這又是在說什麼？那快樂一起拼又是什麼呢？在麥當勞這個網站，使用者產生了非常多的疑惑感。
再來我們進入Queen shop
一個賣女裝的網站，夏天快到了我想要買上衣，但不管看左方還是上方的分類，我都沒有直接看到「上衣」分類的按鈕，所以我只好全部都按看看
使用者感受到疑惑及煩躁感
SALE跟什麼漫漫台南應該都沒有我要的東西吧！從NEW IN開始看好了，滑到NEW IN的時候發現，喔原來這是指新上市的衣服！
一開始放了一堆模特兒的文青照，讓我懷疑這個分類只放一堆美圖，結果發現滑到最後面才有衣服跟價錢的對照圖，差一點就要離開這個分頁了，不過在NEW IN裡仍然沒有找到我要的上衣分類，於是我只好繼續看下一個連結
使用者帶著疑惑和煩躁繼續尋找需要的商品
下一個連結COOLECTION，終於有我要的上衣分類了，但為什麼有兩個，那我到底要點哪一個，我只是想要看這家店全部的上衣，怎麼找這麼久還沒找到！
使用者開始感到挫折及憤怒
抱著僅存的希望，我滑到最後一個連結ITEM，謝天謝地，終於有我要的上衣分類了！！
雖然下一次使用者可能就會知道要直接從ITEM找到上衣分類，但是可能因為使用過程的經驗太過不美好，所以就不會再進來這個網站進行第二次瀏覽，更不用說是購物。
接下來，進入博客來買書
在網購東西時，消費者都會很注意有沒有免運費，沒有免運費的話，不同運送方式的運費又是多少，在這裡，博客來很貼心地把有關運費的細節都寫在按鈕上方的框框，如此一來消費者一定會看到這個框框，產生很安心的感覺後，再繼續點下一步。
在網購東西時，我們也會對於到底訂單甚麼時候才是正式送出，我的訂單道理送出去了沒有，我還可以修改嗎？會對這些事情感到焦慮，博客來在網頁的上方呈現了訂單步驟，讓使用者我們知道現在正處於第幾個階段，還要再幾個階段才會真的送出訂單，讓使用者更加安心。
最後，在送出訂單的按鈕上，很明確地寫出「送出訂單」，讓使用者知道按下這個紐之後，我的訂單就會正式成立了，有沒有什麼地方打錯的，趕快再檢查一下！以上的設計，都讓使用者感到很安心！
由以上的例子我們可以知道，一個好的資訊架構，必須要有簡單易懂的連結文字，才不會造成使用者的疑惑和挫折感，另外建立充滿安全感的環境，讓使用者在使用網站時沒有疑慮，不會害怕按下某個鈕之後，會發生自己意想不到的狀況，最後每個網站根據功能的不同，都有自己最適合的資訊架構類型，以下就幫大家介紹幾種不同的IA類型！
醫院網站
醫院、銀行的網站資訊架構通常會以使用者需要進行的作業來分類，比如說這裡，使用者根據他們想要掛號、健康檢查預約等等，按下不同的連結，另外一個網站也常使用一種以上的資訊架構
比如說這個醫院的網站，如果你想要找特定科別的醫生，於是按下了找醫生的連結，下一個頁面的資訊架構，就變成讓使用者自己輸入關鍵字搜尋，像google一樣！
像剛剛介紹過的這個衣服網站，左邊這裡顯示了每個月不同天新衣服上架的時間，透過日期來分類，很適合這種賣衣服的店，因為現在很多網購衣服的網站，會從韓國批發衣服，而韓國當地的衣服通常不會大量生產，所以如果是兩三個月以前上架的衣服，現在要買可能就已經斷貨停產了，因此日期變成一個很重要的指標。
Google由於是一個想要讓人找尋資訊的系統，所以想當然用「搜尋」的方式作為資訊架構的類型是最合適的，例如今天我想要找一首英文歌，我只記得一小段旋律，而且那段旋律甚至沒有歌詞，只有du rururu，我有辦法在google上找到我要的答案嗎？大家來猜猜是哪首歌吧！
哇!真的找到了呢!
再來我們以H&M為良好介面設計的例子，再讓大家複習一次資訊架構以及如何讓使用者不費力地在介面上產生行為
一進入H&M的首頁，我們可以很清楚地在上方看到一列以分類為主的資訊架構
今天我想要購買洋裝，所以我就滑到女裝的連結上，很快地找到了「連衣裙/洋裝」的分類
點進去以後，發現還有三個選項，分別是「分類」、「篩選」、「排序方式」，可以讓我更快找到想要的商品！
分類又把洋裝細分成短的到長的
藉由篩選我可以挑選顏色、尺碼，還有H&M幫我做的不同風格穿搭推薦
排序方式則可以讓我挑選從高價格開始看或是低價格，以及衣服上式日期的新到舊，非常的方便！
好，經過一番篩選後，我開始從第一個商品瀏覽，沒想到第一件洋裝就深得我心，當然要立刻點進去看商品詳細資訊！點進去以後，我看到更大的衣服圖片，恩色彩鮮明跳TONE，而且右邊還有很多尺碼可以選
網購衣服最擔心的就是尺寸不適合自己的身材，所以這裡提供了尺碼指南真的很貼心，而且在一個很容易就會看到的地方，不像有些網站沒有放，或是有放卻在一個不容易找到的地方
圖片下方還有詳情和送貨，讓使用者可以進一步看衣服的材質以及不同地區送貨的規定，還有付款方式也一併說明清楚
最下面也根據你選的衣服，推薦了你可能會喜歡的其他衣服（恩雖然這幾件看起來也不錯，但我也錢只夠買一件，所以就忍痛割捨他們了…）
經過一番思考後，這件衣服用色大膽，有紅有綠，有花有草，而且尺碼又夠大，我阿嬤一定會超級喜歡，當她的生日禮物真是再好不過了！於是我決定要立刻下單！按下加入購物車後，右上角會立刻顯示我成功將商品加入購物車，讓我有安心的感覺，不會懷疑自己其實沒有把商品放進車子裡。
滑到右上角得的購物車按鈕，可以看自己的購物車裡有什麼商品，按下按鈕後，可以進到開始結帳的頁面
在這裡，我還可以再一次選擇我是否要這個商品，不要可以丟進垃圾車，要的話可以思考我要買幾件
右邊也很清楚地寫出了商品多少錢、運費多少錢，合計是多少錢，讓使用者非常的安心！
接下來進入系統行為的案例
大家還記得系統行為嗎？不同系統產生的行為不一樣，就像apple和android系統的操作方式不同，內建的字體庫不同等等，UX設計師必須了解自己設計的網站或app的系統會產生什麼樣的行為，才能再系統出狀況或是下載資料或是運轉到下一個頁面的時候，設計適當的提示在頁面上，讓使用者不會在停滯不前的網頁前困惑、挫折，甚至直接跳出網頁，刪除app等
這邊讓大家看一則報導，這是2017年的新聞，一名使用者在使用高鐵app的時候，因為高鐵app更新導致該使用者的手機系統不在高鐵app支持的範圍內，所以不能再繼續使用app訂票，甚至連之前已經訂購成功的票都還要退掉，造成該名使用者非常大的麻煩
而高鐵則解釋規定一定規格上的系統才能使用，也是為了使用者使用時的安全性，是必要的升級，因此建議使用者盡速升級到指定系統規格，或是直接使用網站購票，不使用app，看到這裡大家有什麼想法呢？
我認為如果要以使用者經驗的角度來看，就算規定系統規格是為了以後讓使用者有更好的隱私等等，但只要造成使用者的不便，這就是一個不好的決定！一個網站或app進行適當的改善是好事，但是這個改善如果一次跳躍太快，會讓使用者感受到很大的不便，因為原本習慣的使用方法不再一樣了，甚至最糟糕的情況像這個新聞的案例一樣，使用者因為系統行為，不能再使用該app，結論是，要改善可以，但是要循序漸進，而且要有一定長度的通知時間，讓使用者有個心理準備，才不會在改善之後流失大量顧客。
這個是剛剛有提到的，在網頁或app運轉需要一段時間讓系統從別的地方下載資料時，必須有一個讓使用者能夠辨別的地方，讓使用者可以知道「喔！現在正在下載資料，等一下就好！」
很多app還會告訴你可以將app在背景執行即可，不需要一直待在app的畫面，讓使用者可以安心地先跳出畫面
這個也是大家常常看到的網頁畫面，這裡很明確地告訴你這個網站現在不能進入，右下角還有一個細節，如果你想進一步確認可能的原因，就可以再點進去看！
因此針對系統行為，想要提供一個好的使用者經驗，就需要了解各種跟系統有關的雜事，比如說我們設計了一個網站，而這個網站在桌上型電腦、平板、apple、HTC上產生的畫面分別會長什麼樣子，如果我今天用了a字體，但使用者的設備並沒有內建該字體，那麼網站上是不是會跑出一堆使用者看不懂的文字，或是格式跑掉，畫面變得很雜亂，讓使用者不知從何使用起，還有在進行每一個畫面的跳轉時，系統需要從哪裡下載資料，需不需要用到使用者的網路下載資料等等，我們最好都必須要清楚，然後在畫面上清楚告知使用者，讓使用者在使用時可以有更好的體驗。
最後我們再重新統整一次這三個影響用戶體驗的行為定義
使用者行為就是使用者進入各網站做的事情，藉由分析使用者在各網站上做出各種行為的目的，我們可以進一步設計出良好的介面，讓使用者可以自然地做出我們預期的介面行為，最後瞭解系統基本執行所需要的資料，包括尺寸、解析度、內建字體等等，讓我們可以在網站出現狀況時提醒使用者，「現在網站可能發生了什麼狀況，請使用者稍安勿躁」
最後希望以上被提出可以修改的網站的設計師不要生氣><你們整體還是很棒!
如果你喜歡這次的分享請給我5-10claps留個足跡吧!
