都 2016 年了,為什麼網站的使用者經驗還是這麼糟?

進入 2016 年已經一陣子了,不過網站的基本設計和實用性還是讓我不敢恭維,我們的網路經驗其實可以不用這麼痛苦的。沒有一個網站有達到「喔,這個網站能做到這樣啊,真不錯。」的標準。這些設計不過是把網頁推進了悲哀又不知所云的深淵。
評論
評論

原文為《It's 2016 already, how are websites still screwing up these user experiences?!》,作者為程式學習網站 Pluralsight 作者暨微軟資安及企業軟體交付流程顧問 Troy Hunt。Inside 獲授權編譯。

進入新年已經一陣子了,不過網站的基本設計和實用性還是讓我不敢恭維,我們的網路體驗其實可以不用這麼痛苦的。對我來說,沒有一個網站有達到「喔,這個網站能做到這樣啊,真不錯。」的標準。這些悲哀又不知所云的設計不過是把網站拋到了谷底。

這時候有人會說,「你可以安裝一些外掛來改造網頁,還能順便改變使用者行為,」這是搞錯重點了,外掛不會也不能解決問題。我們應該從頭開始檢討,別再把網頁弄得這麼不舒適。

容許我稍微失控一下,來談談現在的網頁有哪些毛病:

霸佔我畫面的東西:問卷還有一堆垃圾訊息

像這個就沒什麼好說的:

舉例來說,我想瀏覽這個 富比士頁面 ,然後他就告訴我,「先等一下,這裡有每日一句,你還可以順便看一下廣告。」莫名其妙,沒有人會看完這句話,然後就覺得自己重獲新生,此舉毫無意義。

讓上一頁按鈕做好自己的工作

各大銀行網站有這個毛病已經很久了,想要回到上一頁,網頁又會自動轉回原本的頁面,讓人動彈不得。你要知道,按了「上一頁」以後還出現這種畫面真的不行:

為什麼我的「交易已結束」?使用者不過是按了瀏覽器最基本的功能按鈕,而你們大概只想敷衍過去。我知道你們不想要出現重複交易,不過要避免重複交易並不難,別再用這種雙手一攤,毀掉整個頁面的方式了,好好修理一下你的網站。

請把文章放在同一頁

別再把文章分成多頁了:

你讀了一部份文章,但頁面放不下,所以往下捲動就能看到下一段,這就是捲軸的用處。也許這樣一來你就不能在每一頁用廣告轟炸大家了,不過反正我們本來就不喜歡那些鋪天蓋地的廣告。

讓我設定自己想要的密碼

如果密碼設定不支援某種字符,那容許我合理推測:你的輸入限制和查詢參數爛透了。你的系統一團亂,你怕如果不阻擋這些字符,就可能發生 SQL 隱碼攻擊。就像這樣:

更糟的是,我也能合理懷疑你並沒有雜湊加密(hash),而直接用純文字儲存密碼。或者也很有可能,這個網站程式沒有把密碼處理成穩定狀態就存進資料庫了。

全螢幕蓋版廣告

我前面是不是講過,我們有多討厭干擾使用者經驗的廣告?沒錯,這些廣告該住手了: 說真的,這到底想表達什麼?跳出蓋版廣告,而且還找不到關閉鈕,是會氣死人的。這在手機頁面上更慘,簡直就是血淋淋的反面教材。如上圖的全幅廣告佔掉半個頁面,然後還嫌不夠似地加了彈出式廣告,最後你的廣告還遮住了原本的廣告,這些人到底在想什麼?

沒有最慘只有更慘:延後彈出廣告

一進頁面就彈出來的全螢幕廣告已經很糟糕了,但讀到一半才跳出來的更煩: 我只是想看個新聞,搞清楚奧勒岡民兵事件,為什麼你要給我看這個「全副武裝」的女子?更糟的是,為什麼關閉按鈕比我的手指還小?還好在這只有在我的 iPad 上出現,電腦版並沒有,不過任何看到這個廣告的人一定跟我一樣討厭它。

封鎖不實的廣告

這些「推廣連結」(總之就是廣告)雖然已經貼心地針對我的所在地量身打造,不過我們先來算算買這台藍寶基尼要花多少錢:

在澳洲最便宜的 藍寶基尼 Aventador 也要 65 萬澳幣(約 1500 萬台幣),最貴的大概 1 百萬澳幣(2300 萬台幣),當你付清所有款項,加上維修、損耗、保險和使用成本,需要將近 6 位數澳幣的花費,此時每週 3500 澳幣的收入一年下來大約累積 12 萬澳幣淨收入,所以就算樂觀估計,扣除名車的各項費用,那你還剩下 3 萬澳幣。除非你想一輩子跟父母住,不然這個廣告實在沒什麼道理,而且也不應該再出現。

累贅的 Cookie 警告

Cookie 相當常見,沒有 cookie 的話,很多東西都不能用,或者又要犧牲安全性來代替(例如透過網址持續開放授權),那為什麼要特地警告呢?當然, cookie 可以用來追蹤使用者,但這不需要 cookie 也能做到,就像這個 瀏覽器指紋 測試一樣,想知道使用者之前有沒有造訪過網站,並不需要透過 cookie 。這項警告沒什麼實際用處,只會被忽略而已。

綁架捲軸

這個毛病就像是設計師在炫耀,「媽,你看我會做這個!」,卻惹惱了在場許多人,如果這樣很難懂的話,看看 Mac Pro 的官網:

當你往下捲動,頁面不會隨之滾動,只是不同的內容會在上面浮現,經過上千網頁的訓練,我們已經習慣捲動就能看到接下來的內容,然後往回捲動就能看到先前的內容,蘋果在這個例子中,就好像取用了一項常見的使用者互動工具,卻胡亂使用,讓人不知所措。

用標題騙點擊

我在 Facebook 上常看到這樣的文章:

為什麼不在標題就告訴我法國人做了什麼,好讓我決定要不要花時間讀這篇文章?你大可在標題放上「他們通過了一項法案,禁止丟棄食物,」難道這樣會讓我像跳過其他垃圾訊息一樣放棄點擊,所以你就沒有收入?我認為廣告真的毀了網路,而我們一個都逃不掉。

千萬不要自動播放

當我進入網站想要讀一篇文章,最不想碰到的就是:

這是 CNN 上的自動播放廣告,好像花俏的彈跳廣告還不夠,現在還要加入聲音。所以當我想要安靜地讀一篇文章,比如說舒服地躺在床上看 iPad 的時候,這個網頁就推給我戒煙廣告影片,然後又自動播放關於這篇文章的新聞片段,雖然這稍微好一點,不過我得再次強調我是來閱讀的,這個網站又不是 YouTube,如果真的想聽,我會自己點播放。

向付費牆(Paywall)說不

有時你會碰到標題看來不錯的分享文章,點下去以後卻看到:

這個經驗之所以糟糕,是因為你已經短暫看到了文章,然後它又被奪走了。你可以在背景看到內容就在那裡,但是有一大張付費方案擋在前面,要是點了右上角的 X,希望它發揮功能把這個礙眼的付費牆關掉,但網頁卻跳轉回到首頁,然後你在首頁看到許多有趣的內容,點進去卻又是一片付費牆。

強迫下載行動版 App

在手機版網站閱讀文章已經足夠了,你卻看到這個:

為什麼下載這個 app 能帶給我更好的閱讀體驗?當下我只因為下載提示佔去一大塊空間拉低了閱讀體驗,這還是在 iPhone6 Plus 上,要是其他螢幕更小的手機,可能就會佔掉 1/4 的螢幕。手機螢幕寸土寸金,你卻拿來叫我下載一個三顆星的 app。

我不想分享行動版網站

另外當我想用 iPhone 分享上面的 NRMA 網站,

這個網站很貼心地幫我在網址前面加了「m」,分享出去就變成手機版頁面,就算是用電腦開也一樣。我現在用電腦點開網頁,就看到大約 80% 的空間是浪費的,一個按鈕寬度竟然有 1850 畫素。這就是為什麼我們需要 響應式設計 ,它可以偵測你的裝置,然後自動調整適合的顯示方式,而非把你丟到另一個頁面,然後換成大螢幕的時候就變得亂七八糟。

不讓我用自己的公司信箱

我一直都用 Hotmail 當作工作信箱,而且用得很順手,我也會在註冊網站的時候用到: 至少可以的話我就會用這個信箱註冊,不過有些網站就是不允許 Hotmail 或其他免費信箱。碰到這種情形,我只好去 Mailinator 申請臨時信箱,這下子我終於能拿到我要的資料,不過這個網站再也聯絡不到我了。

阻擋廣告攔截軟體

我在部落格裝了廣告,愈多人看到我就賺得愈多,不過我不會用以上那些粗魯的方法強迫你。儘管如此,我也能體諒你使用廣告攔截軟體,雖然主因可能是以上那些討人厭的廣告。先講好,如果因為更動我的網頁造成某些功能 無法執行 ,別找我抱怨,但我也不會為難你。 總之,並非所有人都能忍受這個畫面: 這件事諷刺的地方在於,正是因為富比士之類的網站濫用廣告,使用者才會攔截廣告,造成富比士和其他網站不提供服務,或是提供次等的服務來要脅使用者關掉廣告攔截軟體。這樣一來網站們不開心、使用者不開心、我也不開心,因為惡性循環讓我的廣告被擋掉,損失了一筆收入。 既然這篇文章一直提到富比士,希望他們可以參考一下這篇討論底下的留言:  

看一下大家對蓋版廣告的態度如何,我也貢獻過很多篇文章給富比士,也和其中許多頂尖人士合作過,不過負責這部分廣告的人,拜託讓你們主管看看上面的回應。

難道我們不能處理好這一切,讓網路回歸它該有的樣貌嗎?

有沒有漏掉什麼?

這些東西卡在我心裡很久了,一口氣說出來之後的確好多了,不過一定還有很多我沒注意到的。你最近有沒有看過哪些煩人的網站讓你不吐不快呢?

 

歡迎加入「Inside」Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

 

 


開發者享受 CI/CD 價值!運用 Amazon EKS 整合 GitLab 創建自動化部署

企業如何在 Amazon EKS(Elastic Kubernetes Services)上使用 GitLab 創建自動化部署,減輕人力負擔,提升專案服務運作效率?
評論
評論

所謂現代化智慧 IT,所有工程師最希望的境界,莫過於只要輕鬆點幾下設定,系統就會自動跑起來,管理者再也不用隨時待命在機台旁邊,從此工作悠哉又快樂!儘管這樣情境還沒到來,但隨著敏捷式開發的流行,除了 DevOps 人員,有越來越多開發者將 CI/CD 概念融入到工作流程當中,例如從 build code、執行 unit test、到部署應用程式。

打造第一個在 AWS 上的應用程式

上述種種反覆步驟自動化執行,也就能提昇服務品質、主動通知開發人員以減輕人力負擔,讓專案服務能持續運作。

其中,GitLab 是執行 CI/CD 常用的工具之一,也是開發者使用程式碼儲存庫的地方。為了讓 GitLab Runner 在雲端快速實踐 CI/CD,《AWS 開發者系列》透過影片分享,如何在 Amazon EKS(Elastic Kubernetes Services)上使用 GitLab 創建自動化部署。

以下節錄工作坊影音內容,幫助開發者快速理解如何運用 Amazon EKS 的高可用性且安全的叢集,將修補、部署節點、更新等關鍵任務,全部做到自動化設定。同時影片也會示範 Amazon EKS 搭配 GitLab 如何展開自動部署,幫助工程團隊實踐 CI/CD 價值。

Amazon EKS 對容器管理輕鬆簡單、維運省時省力

容器化服務越來越興盛,當容器(Container)越來越多,在複雜的微服務(Microservice)系統環境之下,運維團隊的管理成本可能相對會增加不少,為了有效調度容器部署, 導入Kubernetes 無疑是近年企業熱門的話題之一。

建構 Kubernetes Cluster 流主要可區分兩大塊,一是安排容器調度的Control Plane、另一則是容器運行時需要用到的 Worker Node。

Control Plane 裡面涵蓋有儲存狀態的 ETCD、CoController manager 、Scheduler 的調度管理、甚至是操作時進行互動的 APIServer,若是自己創建 的 Kubernetes Cluster ,需要自己安裝這些元件,後續仍需要對 Control Plane 進行相關管理、維護、升級工作。為了減少上述 Components 的繁複維護,在透過 AWS EKS 代管的 Kubernete Control Plane 部可以獲得以下三大好處。

透過 AWS 增加雲端技能 在組織發揮影響力

Amazon EKS 一鍵式部署,展現三大優勢

第一,Amazon EKS代管的 Control Plane實踐了跨AZ的高可用部署,使用者不需要擔心單一節點故障的風險。

第二,Amazon EKS 支持至少四個 Kubernetes版本,持續跟進每季 CNCF 的發佈,同時 EKS 也完全符合上游 CNCF 規範。

第三,部署 Amazon EKS 之後,可直接使用 AWS 平台上現成的服務工具,在安全性管理、網路設定方面,可以做到無縫整合。

最後 AWS 台灣解決方案架構師也提到,若想在容器環境進行 CI/CD 及應用程式的管理,可以進一步透過 IaC 整合部署 Amazon EKS 叢集,透過使用 Console、把 EKS 變成 Cloudformation 的模板、使用 AWS 所開發出來的 eksctl.io、或指令是採用 AWS CDK 可以讓開發者用自身熟悉的語言,在 AWS 平台整合 CI/CD 工具進行維運及部署 EKS。

了解 Amazon EKS 整合 GitLab ,獲得三面向價值

對開發者而言,想把 Amazon EKS 整合到 CI/CD 工具之一的 GitLab 平台上,可以看到那些實際的優勢?

在 DevOps 開發者示範工作坊當中,GitLab 資深解決方案架構師指出,GitLab 使用到 Kubernetes 技術,主要有三種搭配方法,包含 GitLab Server、GitLab Runner、以及創建 Deployment Environment。

本次示範教學會主要聚焦在 GitLab Runner 如何採取 Auto-scaled 方式進行 Build、Test、Package Apps;以及在 Deployment Environment 運用 Kubernetes 技術,做到 Auto Deploy、Review App。

正因為 Amazon EKS 能夠在 DevOps 過程提供所需要的彈性計算資源,幫助開發者在 GitLab 平台上面獲得以下三個層次的優勢:

  • 在 GitLab 內建的部署工作流程當中,自動生成整套 CI/CD 最佳實踐腳本。
  • Review App 過程,從 Merge Request 中可直接訪問應用程式 /App 的 UI 介面,並且根據 Git branch 名稱、專案名稱,自動生成 Review App 的 URL,以及在 Merge 前的最後防線進行 Approval 檢查。
  • 加速 CI/CD 流水線,GitLab Runner 運行時候還可藉由 Amazon EKS Cluster 進行 Auto-scaled 的支援。

Amazon EKS 整合 GitLab ,需要兩大流程

影片最後,GitLab 資深解決方案架構師示範如何把 Amazon EKS 整合至 GitLab 執行 Auto Deploy,主要可分為兩大區塊流程,第一部分聚焦在 Amazon EKS cluster 的設置,第二部分則執行 Auto Deploy 設置。

第一塊可拆分為四個階段,首先教學怎麼創建 EC2 節點的 EKS cluster,第二階段示範把 EKS Cluster 連接到開發者的 GitLab Instance、Group 或 Project,下一步則使用 Cluster Management Project Template 創建一個 Cluster Management Project,以及最後一階段透過 Cluster Management Project 自帶的 Helm Chart,安裝在 Cluster 所需要的內建 App。

第二塊執行 Auto Deploy 設置,針對需要部署的 App 創建一個 GitLab Project,接著再把 gitlab-ci.yml 添加到 Project,並從 Web IDE 選擇及導入 Auto Deploy 的 CI 模版,讓 GitLab 自動生成最佳實踐的整套流水線。

幫助開發者更了解 Amazon EKS 整合 GitLab 的 QA 系列

Q:使用 Amazon EKS 之後,如何更有效率或優化資源去配置 Worker Node 的機器數量,以及如何有效空管開發維運的成本?

A:Kubernetes 除了本身有 HPA(Horizontal Pod Autoscaling)可根據使用程度自動調整資源流量,另外也能延伸使用 AWS Auto Scaling 方案,針對可擴展資源去設定自動擴展管理。另外在成本管控,雖然 Amazon EKS 會收取額外管理費用,但可透過 AWS 平台的 Calculato r計算每個 EKS 的價格,你會發現自動化部署及管理的費用,相對工程師人力的成本更加便宜。

Q:越來越多客戶考慮把現有 Application 變成容器部署,大多是爲了加快部署的效率,那麼變成容器模式之後,對 CI/CD 的工作流程有什麽影響嗎?

A:運用容器技術最直接的效果,可以讓應用程式的環境更一致化,例如 testing 環節、stage production,讓容器避開一些差異問題。至於 CD 部分要 delivery 一些 usage 不太一樣的時候,容器會幫忙做配置,所以 CI/CD 對容器的效益是相輔相成的。

Q: 客戶在開發流程漸漸會把 Infrastructure 變成代碼或文檔,是不是可以把程式碼跟現有的應用程式的 CI/CD 流水線整合在一起,達到一套完整的 CI/CD 部署流程?

A:觀察目前市場作法,主要分成兩個階段去做整體部署。如果規模比較小的團隊,會把 Infrastructure 代碼跟 App 代碼分開,在管理上會比較靈活;如果企業規模比較大,會有另外一個 Infrastructure 團隊來控制部署事情,這種情况之下,APP 的項目會生成一個 APP package,主要做到 delivery 這個階段爲止。而 Infrastructure 的項目會指定把需要版本的文檔,部署到他們的 Kubernetes Cluster。

填寫表單 找到適合的快速上雲服務與工具!