互動式 HTML 是在 JMP® 版本 11 中引入的。每個後續版本都增加了對更多互動功能的支援。
在 JMP 15 中,互動式 HTML 也支援我們的新產品JMP Live 。
單獨使用時,互動式 HTML 允許使用者共用 JMP 報告。 JMP Live 透過協作、組織、安全、自動化和更多互動性支援分享。
本文介紹了 JMP 15 Interactive HTML 中單獨使用和作為 JMP Live 的一部分使用的新功能。
他們如何合作?
透過選擇“文件:另存為”或“文件:匯出”,您可以將任何 JMP 報告匯出為互動式 HTML。這將建立一個獨立的 Web 應用程式:一個副檔名為「.htm」或「.html」的單一檔案。
該文件可以加載到任何現代網絡瀏覽器中,以查看分析並探索數據。該文件可以透過電子郵件發送或儲存在共用磁碟機或網站上以與他人共用。如圖 1 所示,連線是單向的:JMP 建立文件,但文件無法與 JMP 通訊。使用 JMP Live,連接是雙向的,從而實現更多的互動性。
Figure 1. JMP Interactive HTML and JMP Live圖 1. JMP 互動式 HTML 和 JMP Live圖 1. JMP 互動式 HTML 和 JMP Live
現代網頁瀏覽器速度很快,因此我們只在需要時使用雙向連線。否則,我們的軟體僅在網頁瀏覽器中運作。這種架構可以最大限度地提高速度並最大限度地降低客戶的網路傳輸成本,因此我們計劃在未來的版本中維護和改進它。
JMP 15 有哪些新功能?
當我們為互動式 HTML 新增功能時,它們在 JMP Live 中也能正常運作。對於 JMP 15,我們對使用者介面進行了現代化改造,並添加了更多互動式報告。
現代使用者介面
在網路上,五年被認為是「世代」。一切確實變化得那麼快。因此,我們為 JMP 11 設計的使用者介面已經有六年歷史了——是時候進行改造了。
多年來,桌面和網路應用程式都使用第三個維度作為物件可互動的視覺提示。例如,按鈕看起來就像現實生活中的三維按鈕一樣,以便使用者知道它們可以被按下。我們的按鈕和其他控制都採用了這種「3D」風格。
從 2012 年左右開始,「扁平化」風格開始流行,最突出的例子是微軟為 Windows 8 設計的 Metro 設計(Ralph,2012 年)。這種風格看起來乾淨簡潔,但沒有 3D 視覺提示。可用性專家當時表示擔心,如果每個物件看起來都一樣可點擊,使用者就不知道哪一個可以使用(Nielsen,2012)。
近年來,「扁平化」風格已被「扁平化 2.0」所取代(Moran,2015;Cousins,2016)。這種風格保留了平面外觀,但添加了微妙的 3D 陰影和互動效果以提供視覺提示。外觀依然乾淨簡潔;但視覺提示可以幫助使用者知道該做什麼。
Figure 2. 3D, Flat, and Flat 2.0 Styles圖 2. 3D、平面和平面 2.0 樣式圖 2. 3D、平面和平面 2.0 樣式「平面 2.0」 樣式的一個典型例子是 Google 的Material Design(Cousins,2015),我們選擇它作為我們的使用者介面樣式指南。這是一個雙贏的局面。我們受益於 Google 的設計。此外,它們也用於 Google Chrome、Google Mail 和其他廣泛使用的產品。透過遵循這個熟悉的標準,我們降低了使用者的學習成本。
我們也開始支援兩種顏色主題:灰色和淺色。
Figure 3. Gray and Light Themes圖 3. 灰色和淺色主題圖 3. 灰色和淺色主題
最終,我們找到了一種可靠的觸控螢幕偵測演算法。這個問題比大多數人想像的要難得多(Cox,2013;Peterson,2018)。解決這個問題使我們能夠提供兩種使用者介面,分別針對桌上型電腦或平板電腦進行客製化。按鈕和其他控制項的大小可根據裝置正確調整。在桌面上,不再需要切換模式來刷新資料或選擇多個對象,從而節省了使用者的時間。
更多互動式報告
在JMP 15中,互動式HTML報告更具互動性。
我們這樣做的一個方法是改進對自訂圖形腳本的支援。這些是 JMP 的一個重要但相當隱藏的功能;除非您在 JSL 腳本中繪製圓形、矩形或其他圖形基元,否則您可能不知道它們。儘管隱藏,但許多 JMP 平台都使用自訂圖形腳本,現在這些平台都更加互動了。
Figure 4. Custom Graphics Script in Discriminant Platform圖 4. Discriminant Platform 中的自訂圖形腳本圖 4. Discriminant Platform 中的自訂圖形腳本
此外,Graph Builder 的報告也支援更多互動功能。以下為範例:
- 長條圖(並排間隔長條圖)
- 線圖(水平響應、堆疊線)
- 面積圖(水平響應、堆疊面積)
- 熱圖(按值標記、分類顏色角色、對數尺度、更多統計數據)
Figure 5. More Interactive Graphs from Graph Builder圖 5. Graph Builder 中的更多互動式圖表圖 5. Graph Builder 中的更多互動式圖表
還增加了對條件資料過濾器的支持,其中一個過濾器的值由另一個過濾器決定。
Figure 6. A Conditional Data Filter. The states in third filter are conditioned by the population in the second filter, which is conditioned by the region in the first filter.圖 6. 條件資料過濾器。第三個過濾器中的州受第二個過濾器中的人口影響,而第二個過濾器中的人口受第一個過濾器中的區域影響。圖 6. 條件資料過濾器。第三個過濾器中的州受第二個過濾器中的人口影響,而第二個過濾器中的人口受第一個過濾器中的區域影響。
我們已經開始新增對控制圖產生器的支援。 JMP 15.0 僅支援工具提示;但這正是我們前進的方向。
最後,JMP 15 中的刻畫器可在更多平台上進行交互,包括對數線性方差、分割、提升樹和引導森林。
Figure 7. LogLinear Variance Profiler圖 7. 對數線性方差刻畫器圖 7. 對數線性方差刻畫器
JMP Live Reports 中僅包含哪些內容?
JMP Interactive HTML 可以做很多事情,但作為獨立的 Web 應用程序,其互動性有限。 JMP Live 可以重新運行分析。重新運行分析的兩種方法是切換列和排除行。
JMP Live 支援列切換器。您可以切換列來重新執行分析,就像在 JMP 中一樣。
Figure 8. Column Switcher in JMP Live, Exploring Air Quality Data圖 8. JMP Live 中的列切換器,探索空氣品質數據圖 8. JMP Live 中的列切換器,探索空氣品質數據
此外,在 JMP Live 中,資料過濾器除了支援「選擇」和「隱藏」狀態外,還支援「排除行」狀態。使用資料過濾器排除或包含行,然後再次重新計算分析。
Figure 9. Data Filter Include/Exclude Menu圖 9. 資料過濾器包含/排除選單圖 9. 資料過濾器包含/排除選單最後,您也可以排除沒有資料過濾器的行。例如,若要排除異常值,請選擇它,然後選擇「排除並隱藏選取的行」功能表。再次,這將重新生成整個分析。
Figure 10. "Hamburger" Include/Exclude Menu圖 10。 「漢堡包」包含/排除選單圖 10。 “漢堡包”包含/排除菜單
這些功能的互動式範例可以在 JMP Public 上看到:
概括
JMP Interactive HTML 的每個新版本都增加了對更多互動功能的支援。對於 JMP 15,除了現代化使用者介面之外,我們還改進了自訂圖形、圖形產生器、條件資料過濾器、控制圖產生器和分析器的交互性。
當互動式 HTML 與 JMP Live 一起使用時,可以透過切換列或排除行來重新計算整個分析。
我們將在未來的版本中繼續改進互動式 HTML,增加對客戶最需要的 JMP 功能的支援。
參考
Cousins, C. (2015) “Material Design 的真正優點是什麼?”, https://thenextweb.com/dd/2015/11/10/what-are-the-real-merits-of-material-design/ 。
Cousins, C. (2016),《什麼是扁平化 2.0 以及為什麼要關注它? 》, https://designshack.net/articles/graphics/whats-flat-2-0-and-why-should-you-care/ 。
Cox, S. (2013) “你無法偵測觸控螢幕”, http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ 。
Moran, K. (2015) “扁平化設計:起源、問題以及扁平化 2.0 為什麼更適合用戶”, https://www.nngroup.com/articles/flat-design/ 。
Nielsen, J. (2012) “ Windows 8 — 對新手和高級用戶而言都令人失望的可用性”, https://www.nngroup.com/articles/windows-8-disappointing-usability/ 。
Petersen, J. (2018)“檢測觸控設備:2018 年更新”, https://peterscene.com/detecting-touch-devices-2018-update/ 。
Ralph, N. (2012)“Windows 8 Metro UI:Windows 的大膽新面貌”, https://www.pcworld.com/article/251340/windows_8_metro_ui_a_bold_new_face_for_windows.html 。