Banner blindness

前幾天的 Hacker News Daily 上看到「Why do people not notice our enormous, prominent, clear and contrasting purple banner?」這篇 2018 年的討論,裡面在講為什麼使用者會常態性忽略 banner 的內容。

在答覆區裡面有人提到了維基百科上面的 Banner blindness 這個條目,題到了網站的使用者會刻意或是非刻意的忽略掉像 banner 的資訊:

Banner blindness is a phenomenon in web usability where visitors to a website consciously or unconsciously ignore banner-like information. A broader term covering all forms of advertising is ad blindness, and the mass of banners that people ignore is called banner noise.

開頭也提到了 banner 廣告 CTR 的變化:

The first banner ad appeared in 1994. The average click-through rate (CTR) dropped from 2% in 1995 to 0.5% in 1998. After a relatively stable period with a 0.6% click-through rate in 2003, CTR rebounded to 1% by 2013.

所以這個現象有個專有名詞來形容...

如果把 OpenSSL 包裝成 GUI 版本

Hacker News Daily 上看到這則,蠻有趣的嘗試,如果幫 OpenSSL 包裝成 GUI 版本的話,可能會長的樣子:「If OpenSSL were a GUI」,而 Hacker News 上對應的討論在「If OpenSSL were a GUI (smallstep.com)」這邊可以看到。

要注意的是這是 mock 出來的圖,而不是真的有人這樣幹了一個版本出來。主要是在帶出 OpenSSL 這個工具極度複雜的問題,另外也因此帶出 GUI application 的取捨問題,在 Hacker News 上的討論都有人提出來。

不過讓我吸引的點反而是 mock UI 的選擇上,看起來作者選了 Platinum 風格 (Mac OS 8 & Mac OS 9),在維基百科的「Appearance Manager」這個頁面有提到:

The default look and feel of the Appearance Manager in Mac OS 8 and 9 is Platinum design language, which was intended to be the primary GUI for Copland.

是個讓人懷念的風格,而且意外的看起來反而讓 GUI 柔和不少,而且其實就功能性來說還蠻不錯的?

Firefox 的 UI/UX 歷史

Hacker News 首頁上看到「Firefox UI/UX History (github.com/black7375)」這篇,整理了 Firefox 的 UI/UX 歷史,裡面也試著分析各個不同版本的優缺點。

話說看到這個最早的版本的 screenshot 讓人懷念 (還叫做 Phoenix 的版本):

裡面也提到了一些 fork,像是「Early (v1 ~ v3)」這個 UI 版本的 fork 還可以在 SeaMonkey 看到。

到了「Classic (v4, 2011.3)」這個版本,目前還有在維護的 fork 則是 Pale Moon,不過核心的部份沒有跟上,很多網站的新功能是沒辦法用的。

接著是「Australis (v29, 2014.04)」這個版本,目前已經沒有在維護的 fork 了,2021 年年底 Basilisk 宣佈停止維護。

然後是「Photon (v57, 2017.11)」這個版本,目前還有在維護的 fork 是 Waterfox 的 G3 系列。

目前最新的一個是「Proton (v89, 2021.06)」這個版本。

密碼輸入上的 UX

Hacker News 上看到「Gmail password first character is case insensitive on mobile device (support.google.com)」這篇,在講密碼輸入上的 UX。

在 Hacker News 上的討論看到這則:

This is a well-understood feature. Facebook does the same thing[0].

Quote:

Facebook actually accepts three forms of your password:

* Your original password.

* Your original password with the first letter capitalized. This is only for mobile devices, which sometimes capitalize the first character of a word.

* Your original password with the case reversed, for those with a caps lock key on.

[0]: https://www.zdnet.com/article/facebook-passwords-are-not-case-sensitive-update/

接受三種密碼,第一種是完全正確的密碼,第二種是第一個字如果是大寫時的密碼 (在行動裝置上可能的行為),第三種是大小寫全部相反的密碼,這在沒注意到 caps lock 時會發生。

強度不會削弱太多,但對於 user experience 好很多的設計。

讓手機上瀏覽器自動帶出數字鍵盤的方式

在「HTML attributes to improve your users' two factor authentication experience」這邊看到關於讓使用者輸入 2FA (通常是數字) 比較流暢的設定。

原始是上面這張這樣,目標是希望下面這張這樣,當透過 SMS 2FA 時可以提供選項直接貼上,而且也自動帶出數字鍵盤:

給出的幾個重點在於 inputmodepattern 以及 autocomplete

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

查了一下 caniuse.com 上面的支援度,pattern 基本上都支援了,autocomplete 在這邊用到的 one-time-code 基本上也沒問題,只有 inputmode 這邊支援度比較差,IE11 (基本上不會更新了)、FirefoxSafari 沒支援。

寫了一個可以用 '/' 在 AWS 上快速切換服務的小工具

AWS Management Console 上切換服務需要用到滑鼠,而這個 Userscript 工具提供了 / 快速鍵可以直接拉出服務選單,另外也可以用 Esc 鍵關閉服務選單:「AWS Web Console Service Shortkeys」。

這個套件應該是支援多個瀏覽器,但是需要先安裝 Tampermonkey 這類可以跑 Userscript 的套件。

主要是常常在切的時候發現需要拿滑鼠,寫了這個 script 後多了一個方式可以用,而不需要把手移開鍵盤,會順手一些...

不過還是希望這個功能直接變成內建的 :o

針對 JavaScript 時代調整網頁的效能評估指標

早期網頁的效能評估指標都沒有考慮 JavaScript 的情況,大多都是 TTFB (Time to First Byte) 或是網頁大小以及 DOMContentLoaded 或是 load 這類 DOM event 為主,但因為 Goodhart's law,現代的網頁設計會故意將許多 JavaScript 要做的事情搬到 load 以後開始做,以降低 load 被延遲的問題,讓前端的「KPI」比較好看:

When a measure becomes a target, it ceases to be a good measure.

但在 load 之後整個網站還是不能用,使用者的體驗其實很差,這個評估方式的價值變低不少。所以「Measuring Jank and UX」這篇就再找出一些新的指標,來評估 JavaScript 造成的問題。

可以看到文章裡面評估了很多關於 CPU loading 與操作時間的指標,也許這一兩年還會有用,不過我覺得還是會遇到 Goodhart's law 描述的問題... XD

對 UI Redesign 的砲火

看到「UI redesigns are mostly a waste of time」這篇,標題說明了他想講的重點... 把粗體字的部份標出來:

Just stop redesigning the UI all the time.

People use applications because of their purpose, not because it is pleasing to the eye.

The only time a UI should be updated is if it impacts the ability of a user to actually use your application.

Please stop changing everything, stop making it more work for us to relearn the applications we like to use.

Does it really add up, or are you just giving designers busywork that doesn't amount to anything in the end?

Sometimes, if we are able to do it does not mean we should.

這讓我想到 Gmail 了...

B612 字型

B 612 是小王子裡的星球,被拿來引用當作字型名稱了:「B612 – The font family」。

這是空中巴士設計給飛機上的系統用的,所以包括了「舒服」(長時間) 與「易讀」,算是某種以「安全」為考量的字體?

In 2010, Airbus initiated a research collaboration with ENAC and Université de Toulouse III on a prospective study to define and validate an “Aeronautical Font”: the challenge was to improve the display of information on the cockpit screens, in particular in terms of legibility and comfort of reading, and to optimize the overall homogeneity of the cockpit.

然後包括了 regular 與 monospace 兩種:

Git 的記錄已經 open source 一陣子了,拿來當 sans-serif 用一段時間看看好了...

Chrome 把所謂的「trivial subdomain」移除後有人爆氣了...

先前在「關閉新版 Google Chrome 網址列雞婆省略 www 的行為...」提到 Google Chromewww 這些常見的 subdomain 從顯示列上移除的事情。我是因為用 beta channel 所以比較快就開始抱怨,而一般使用者在這幾天 stable channel 更新後開始收到這樣的改變,於是就爆炸了:「Incorrect transforms when stripping subdomains」。

有人直接噴這是什麼鳥蛋決策 XDDD

I actually thought Chrome was malfunctioning. This decision seems totally arbitrary. Was there any research done to justify this decision, or was it the whimsy of a PM who thought it would be a cool UX thing?

另外有人問 Google 是不是應該去開個 CVE,直接認定是安全性威脅... XD

然後一如往常的,被打上 Restrict-AddIssueComment-EditIssue 不讓其他人加意見進去了... 大概不會有下文了 XD

話說回來,這幾天測 Firefox 發現頗吃 CPU 與 GPU 的效能 (相較於 Google Chrome),實在換不過去...