本研究的目的為響應式網頁的視覺設計與使用介面,以及使用性在桌上型電腦與智慧型手機不同介面設計的使用上之評價與差異性之比較,以及網路重度使用者及輕度使用者在兩個介面上網頁設計評價及使用性測試有無差異。
研究整理了五種手機版導覽介面樣本,並參考優質網站的評鑑準則發展出之「網站設計評量表」,針對內容、視覺設計、使用介面三個部分,整理出九項網頁設計評估項目,包括:更新性、正確性、完整性、美感性、舒適性、一致性、順暢性、回饋性、使用性,及最終的整體性評估。搭配SUS使用性量表,分為兩階段測試:第一階段探討五款手機導覽介面的使用性評估,第二階段則比較網路重度使用者與輕度使用者對桌機與手機介面的評價。
第一階段以單因子變異數分析進行五款手機導覽介面的評估,其中使用性在導覽列各類型間有顯著的差異,在視覺設計、介面互動、整體評價也存在顯著差異,其中挑選感受最佳的手機導覽介面版本為漢堡式選單,作為第二階段的手機版本。第二階段研究結果顯示:桌機版本評價皆高於手機版本,且輕度使用者的評價差異高於重度使用者。在使用性評估方面,桌機版本評價明顯優於手機版本,但並無交互作用。在網頁評量項目中的內容面向、視覺面向、介面互動、整體評價等四個面向的評估,桌機版評價皆較高且顯著於手機版,使用頻率上,重度使用者在手機及桌機上評價都較高,不同的瀏覽裝置 (手機版與桌機版) ,對於網路使用頻率受測者 (重度使用者與輕度使用者) 的評價,皆存在交互作用。
根據受測者的評價,漢堡選單被認為是手機導覽介面中最適合的選擇,而桌機導覽介面,相較於手機導覽介面,在重度使用者和輕度使用者的評估中,均顯示出更高的整體滿意度,尤其對於輕度使用者而言,這一差異更為明顯。因此,本研究的結果可以為網頁介面設計提供有價值的參考,並為視覺設計師和網頁設計教學提供改進建議,以幫助解決常見的盲點和不足。
The purpose of this study is to compare the visual design, user interface, and usability evaluations of responsive web design across desktop and smartphone interfaces, as well as to assess differences between heavy and light internet users in these evaluations. The study developed a "Website Design Evaluation Form" based on five mobile navigation interface samples and criteria from high-quality websites. This form evaluates nine aspects of web design: update frequency, accuracy, completeness, aesthetics, comfort, consistency, smoothness, feedback, usability, and overall evaluation. The study used the SUS usability scale in a two-phase test: the first phase assessed the usability of five mobile navigation interfaces, and the second phase compared evaluations from heavy and light internet users on both desktop and mobile interfaces.
In the first phase, a one-way ANOVA was used to evaluate the five mobile navigation interfaces, revealing significant differences in usability, visual design, interface interaction, and overall evaluation. The hamburger menu was identified as the best mobile navigation interface for the second phase. The second phase results showed that desktop versions were rated higher than mobile versions, with light users showing a greater difference in ratings than heavy users. Desktop versions were significantly preferred over mobile versions in usability and in content, visual aspects, interface interaction, and overall evaluation. Heavy users rated both versions higher than light users, indicating an interaction effect between device type and user frequency.
Based on the evaluations, the hamburger menu was considered the best mobile navigation interface. Desktop navigation interfaces received higher overall satisfaction ratings from both heavy and light users, especially the latter. These findings offer valuable insights for web interface design, providing recommendations for visual designers and web design education to address common shortcomings.
Android Developers指南 (2024年1月9日) 。導覽原則。Google Developers。https://developer.android.com/guide/navigation/navigation-principles?hl=zh-tw
Google Scholar
Apple Design Resources (2020年6月19日) 。Human Interface Guidelines 開發者指南。Developer.https://developer.apple.com/cn/news/?id=yyz8lqtw
Google Scholar
Dong, S. (2018, Apr 22) 給UX學習者的入門指南(中) — 了解UX與UCD。Medium. https://medium.com/as-a-product-designer/所以-你想學ux-中-了解ux與ucd-cf60ae775e1d
Google Scholar
Subramanian, S. (2020年5月28日) 。評估網頁體驗以打造更美好的網路環境。Google 搜尋中心網誌。https://developers.google.com/search/blog/2020/05/evaluating-page-experience?hl=zh-tw
Google Scholar