UX Research Methods
Impact of font selection on website menu navigation
Embedded Files
The research undertaken aimed to understand the significance of font type in menu navigation and specially focus on the influence font selection has on speed of menu navigation
Type: MSc Individual research project | May - Aug 22
Input: Research Design | Analysis
Background
Website navigation menus are visual elements that as information consumers we interactive with daily to move through a website. An activity such as menu interactions is undertaken 100s of times a day by a user both consciously and without thinking. By understanding factors impacting menu performance UX Designers can create better experiences with potentially improved efficiency.
Font type / typography is one of the main visual aspects of navigation menus and has significant research history in readability studies to determine what fonts improve reading speed and satisfaction. The link between readability and website navigation currently receives minimal attention even though web navigation menus are comprised mainly of words and need to be legible for the user to act.
Research Literature
READABILITY
READABILITY
The impact of font type and associated characteristics on reading time and comprehension has been researched significantly.
Wallace et al. (2022) questioned if “gains in reading speed and comprehension are possible by manipulating font choice alone?”. The eye-tracking based experimentation for Interlude Reading (quick information gathering and opportunistic consumption) found each user’s fastest font were 14% faster overall and 35% faster than their worst performing font. Different fonts performed more effectively for different people with familiarity & preference not necessarily influencing reading speed.
Web readability has been found to be better with no italics (Bhatia et al., 2011) and several studies have confirmed font sizes significantly impacts reading speed. Rello et al. (2016) observed readability improvements in fonts sizes above the typical 10-14pt body text size and up to 18pts, with line spacing showing no effect and only extreme character spacing negatively affecting comprehension.
Cai et al. (2022) measured users reading speed for a set of fonts with adjustments for height, weight, and length of characters to customise the most effective font for individuals. The custom fonts produced significantly increased words per minute.
MENU PERFORMANCE
MENU PERFORMANCE
Since the internet boom of the late 90s research into website navigation and usage has received substantial attention. Significant effort has been placed into predicting website navigation click-through and path prediction. The MARKOV model has been used to successfully predict trails through sites (Mayil, 2012).
A mathematical model combining Fitt’s Law and Hick’s Law developed by Cockburn et al. (2007) successfully predicted both single and multi-level menu performance confirming Target Size as a factor in menu performance. In addition to target size, Bailly et al. (2014) identified 6 “Menu Performance Phenomena”: 1) Menu Length, 2), Menu organisation, 3) Target Position, 4) Absent Target, 5) Practise, 6) Mouse Control. The work by Bailly et al. (2014) also observed a “Last Item Effect”, with users selecting menu items more successfully if they were the final item in the menu irrespective of menu length and organisation type which had the opposite impact of Fitt’s Law (distance to target and width of target).
Menu optimisation was observed by Bailly et al. (2013) and provided evidence that effective menus for complex requirements can be produced quickly but did not consider visual characteristics such as font, colour and weight in the study.
RELATED STUDIES
RELATED STUDIES
Research into menu performance and the affecting factors has surprisingly received minimal combination with readability performance factors.
Licker el al. (2001) reviewed the influencing factors, relating website readability to three other components – technical, online and digital literacy. The perceived factors influencing readability are shown in fig 2.3a, highlighting that a combination of factors ultimately make up website readability. The findings also revealed that different navigation techniques did not affect readability performance of users, but perception of readability may be affected.
Following on from prior research into customisation of fonts, Kous & Polančič (2019) measured general website adjustments for people with dyslexia. They observed sites performed more efficiently when font size, type and contrast was customised, although minimal direct correlation between menu performance and font type could be ascertained from this study.
LIMITATIONS
LIMITATIONS
Previous research into font selection has focused on readability spread across Long-Form Reading (Chatrangsan and Petrie, 2019) or Interlude Reading (Wallace et al., 2022) with Glanceable Reading, an activity which is done constantly throughout day-to-day activities such as reading signs, book covers, website links & titles, content descriptions, etc., receiving minimal attention in the context of digital mediums.
The positive results from font customisation (Cai et al., 2022) could improve performance but has technical overheads that may not be sustainable by many modern websites, such as custom CSS, preloading page content and issues with blocking. There has been a call for standardised font sizing (Rello et al., 2016) but research where fonts are normalised in stroke weight and character width (Wallace et al., 2022) reduce visual factors that define a font and affect performance. These studies do not mimic real-world scenarios until font size is regulated.
Factor’s influencing website readability (Licker et al., 2001)
Is website menu navigation time effected by font type?
Prior research suggesting fonts could impact navigation speed included combinations of other font related characteristics and settings (size, weight, colour, styling, markup, combination with icons), these will be removed or controlled during the experiment. The hypothesis is as follows:
Null hypothesis (H0): there is no significant difference between navigation times of the fonts selected
Alternative hypothesis (H1): there is significant difference between navigation times of the fonts selected
Methodology
PARTICIPANTS
A broad selection criterion was used and attempted to align with adult demographics for the UK
APPARATUS
Windows 10 with optimised screen
Google Chrome
Javascript timer
APPLICATION
Simple web pages with a menu selection page hub to display links and results after the experiment was completed.
ELEMENTS
Navigation – linear or dropdown
Jumbotron – component including word to be searched
Cards – reminder of steps
IBM’s UK website (IBM, 2022)
Example test page with search term displayed in Jumbotron
PROCEDURE
Research Introduction
Admin
User Information
Orientation
Main Experiment
Discussion
DEPENDENT VARIABLES
Time taken - to find and select a given word in the navigation
Previous experience
INDEPENDENT VARIABLES
Font type – the typeface used in the navigation changed between each test
Navigation type – linear single line or dropdown multi-level
Navigation length – number of items in navigation
Order of items – random or semantic
Roboto
Arial
Georgia
Source Serif Pro
Selected fonts for experiment
Font types chosen for the experiment were derived from font web popularity and factors identified in previous studies. The fonts are Georgia, Roboto, Serif Source Pro and Georgia. An equal mix of Serif (Serif Source Pro, Georgia) and Sans Serif (Roboto, Arial) is used to alleviate bias due to imbalanced font family weighting seen elsewhere (Wallace et al., 2022). As per Cai et al (2022), the experiment’s fonts are all a similar weight and visual height, this helps also to control variables which could have been normalised and not representative of current browser conditions.
The influence of “Menu Performance Phenomena” theorised by Bailly et al. (2014) has been considered in the menu design. Organisation via linear and dropdown navigation are amongst best practise for websites (Babich, 2019) and most accessible (WAI, 2022). Menu length is set at 4 or 6 items for linear and 4+4 or 6+6 items for dropdown, with 4-item menu performed well previously (Cockburn et al., 2007) and 6-item provides a comparative figure.
Results
Initial analysis of the entire results dataset confirmed the mean values for navigation times on linear menu tests (2.1080 seconds) and dropdown menu tests (8.2602 seconds) are far enough apart that the data should be split into two as theorised during the experiment design.
Data was split into Linear and Dropdown Z-Score analysis confirming outliers in both datasets. The outliers were subsequently removed before analysis of the results continued. The 6 linear menu dataset outliers with Z-Scores greater than 3 deviations from the mean all belonged to the same participant (#4). The participant happened to be one of the two over 70 years old and the only participant who did not regularly use a desktop computer and struggled with ‘mouse control’ specifically which was previously identified in the literature review as the 6th Menu Performance Phenomena (Bailly et al., 2014).
More insightful is only one of the two outliers in the second set of tests for dropdowns belonged to this participant indicating their menu navigation performance got better as they completed more tests. This aligns with research regarding experience improving novice users’ performance as they transition to experts (Cockburn et al., 2007) and practise as a “Menu Performance Phenomenon” (Bailly et al., 2014).
There does not appear to be a direct correlation between font selection and menu performance based on the mean values. Roboto is slightly faster with a lower standard deviation on the linear navigation tests but performed slower than both Arial and Georgia on dropdowns. Source Serif Pro had the slowest mean time on both menu types.
The Shapiro-Wilk test > 0.05, confirms both menu type dataset for all fonts are not normally distributed. One-way repeated measure Analysis of Variance (ANOVA) tests were applied to the dataset due to previous data signifying it being non-normalised and non-parametric (Wagner III, 2019). The ANOVA tests showed no significant impact of font type on navigation menu performance times for either dataset. See Appendix E for ANOVA results.
The follow up Friedman Test used to compare non-parametric data (Cleophas and Zwinderman, 2016) counters the previous tests and shows a statistically significant difference for navigation time on linear and dropdown menus given each type of font displayed.
Linear: χ2(1) = 24.961, p = <0.001;
Dropdown: χ2(1) = 112.669, p = <0.001;
[χ2(df) = Chi-Square, p = p value]
As the ANOVA and Friedman data were showing opposing results, a Wilcoxon test was used to delve further. Wilcoxon was used to confirm the significant difference identified in the Friedman Test as it is another non-parametric test assuming data is inappropriate for use with t-test (requiring parametric variables) (Rey and Neuhäuser, 2011)).
Roboto was the only font in the Linear menu dataset to show significant statistical difference and favoured positively against all other fonts.
Wilcoxon Signed Ranks – Roboto versus 3 other fonts for dropdown menus
Wilcoxon Signed Ranks – Source Serif Pro vs. 3 other fonts for dropdown menus
Roboto’s supremacy in linear menus was not backed up with the dropdown menu dataset, where is preformed worse than Source Serif Pro, elsewhere marginally seen as the least performative font.
Discussion
The experiment results confirm the original hypothesis to an extent - H0 = font selection does not significantly impact menu navigation performance.
Further investigation and a larger dataset would be required to confirm with greater certainty due to polarising results of the Friedman Test compared to the ANOVA and Wilcoxon results. Results were not fully conclusive with the Friedman test indicating font selection creates a statistically significant difference in menu navigation time, but the ANOVA test showing minimal or no significance and Wilcoxon is only borderline for certain font comparisons. A major reason to test with a larger dataset would be to confirm these results.
Terminology has not been considered in any of the reviewed literature as a determining factor in performance, either for readability or menus, but was brought up in the post-experiment interviews by half of the participants as a significant factor effecting their performance, especially as the menus became more complex and choices increased.
The Serif font Georgia was also identified as a causing detrimental performance by two participants. Further analysis of these participants’ average navigation times shown Georgia to be their fastest font on linear navigation but less readable on dropdown menus where greater concentration is required. Three of the participants stated a preference for one or both Sans Serif fonts during the post-experiment interview but did not perform significantly faster on their preferred font, aligning with findings by Wallace et al. (2022).
Semantic and random ordering of the navigation was included to ensure users could not remember the sequence but prove to have minimal impact on navigation completion times. Meaningful sequences are defined by the WAI (W3, 2022) but may benefit usability more than navigation performance specifically. The “Menu Length” phenomena was not conclusive during the experiment with participants marginally quicker on 6 item navigation than 4 on linear.
Restricting the study to desktop significantly reduces the potential impact as mobile currently accounts for 60% of web browsing (up to end July 2022 – StatCounter). Previous multi-device research has shown users may prefer mobile but often perform tasks quicker on desktop (Adepu and Adler, 2016).
RECOMMENDATIONS
The combined impact of font characteristics including font type, weight, size, colour and spacing has been confirmed by previous studies (Cai et al., 2022; Bhatia et al., 2011; Rello et al., 2016). Removing selection of font types as a significant influencing factor on menu performance will allow other font characteristics to be focused upon for future studies with the opportunity to confirm which factors need greatest consideration by designers for performance benefits.
Test experiments were ordered from simplest linear menus to most complex multi-level dropdowns. Further research could be done into randomised or reordering the test sequence to remove the potential impact of expertise (Cockburn et al., 2007).
Even after outliers are removed, the 4 oldest participants all happened to have the slowest average/mean navigation times. Age related performance characteristics were seen by Cai et al. (2022) with over 35s readability decreasing on Sans Serif fonts but are countered by other studies such as Darroch et al. (2005) where age did not affect reading speed. With a greater sample size and improved cross section of ages (closer to UK population age distribution) it would be possible to determine how significant a factor age is.
Without the restrictions of font choice impacting menu performance, UX designers can explore more dramatic design decisions to increasing usability through the Aesthetic-Usability Effect (Kurosu and Kashimura, 1995; Moran, 2017), essentially making their navigation and site more visually appealing. Roboto and Open Sans have constituted over 50% of Google Font’s 64 trillion font views since 2010 (Google, 2022), this could be seen as website owners and designers defaulting to minimalist fonts, with further analysis into visual appeal it may be possible that other fonts could provide greater satisfaction through their aesthetic appeal.
References
References
Adepu, S. and Adler, R.F., (2016). A comparison of performance and preference on mobile devices vs. desktop computers. In 2016 IEEE 7th Annual Ubiquitous Computing, Electronics & Mobile Communication Conference (UEMCON) (pp. 1-7), October 2016. IEEE.
Babich, N. (2019). Website & App Navigation Design Best Practices. Adobe. Available at: https://xd.adobe.com/ideas/process/information-architecture/website-navigation-design-best-practices/ [Accessed 30th August 2022]
Bailly, G., Oulasvirta, A., Kötzing, T. and Hoppe, S., (2013). Menuoptimizer: Interactive optimization of menu systems. In Proceedings of the 26th annual ACM symposium on User interface software and technology (pp. 331-342), October 2013.
Bailly, G., Oulasvirta, A., Brumby, D.P. and Howes, A., (2014). Model of visual search and selection time in linear menus. In Proceedings of the sigchi conference on human factors in computing systems (pp. 3865-3874), April 2014.
Bhatia, S.K., Samal, A., Rajan, N., and Kiviniemi, M.T. (2011). Effect of font size, italics, and colour count on web usability. International Journal of Computational Vision and Robotics 2, 2 (2011), 1–26. https://doi.org/10.1504%2FIJCVR.2011.042271
British Dyslexia Association, (2022). Creating a dyslexia friendly workplace: Dyslexia friendly styling guide. Available at: Dyslexia friendly style guide - British Dyslexia Association (bdadyslexia.org.uk) [Accessed 10th August]
Cai, T., Wallace, S., Rezvanian, T., Dobres, J., Kerr, B., Berlow, S., Huang, J., Sawyer, B.D. and Bylinskii, Z., (2022). Personalized Font Recommendations: Combining ML and Typographic Guidelines to Optimize Readability. In Designing Interactive Systems Conference (pp. 1-25), June 2022. https://doi.org/10.1145/3532106.3533457
Chatrangsan, M. and Petrie, H., (2019). The effect of typeface and font size on reading text on a tablet computer for older and younger people. In Proceedings of the 16th International Web for All Conference (pp. 1-10), May 2019. https://doi.org/10.1145/3315002.3317568
Cleophas, T.J., Zwinderman, A.H. (2016). Non-parametric Tests for Three or More Samples (Friedman and Kruskal-Wallis). In: Clinical Data Analysis on a Pocket Calculator. Springer, Cham. https://doi.org/10.1007/978-3-319-27104-0_34
Cockburn, A., Gutwin, C. and Greenberg, S., (2007). A predictive model of menu performance. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 627-636), April 2007. https://doi.org/10.1145/1240624.1240723
Coppock, M. (2022). The best web browsers for 2022. Digital Trends. Available at: https://www.digitaltrends.com/computing/best-browser-chrome-vs-firefox-vs-safari-vs-edge/ [Accessed 24th August 2022]
De Leeuw, J.R. and Motz, B.A., (2016). Psychophysics in a Web browser? Comparing response times collected with JavaScript and Psychophysics Toolbox in a visual search task. Behavior Research Methods, 48(1), pp.1-12. https://doi.org/10.3758/s13428-015-0567-2
IBM (2022). IBM UK. Available at: https://www.ibm.com/uk-en [Accessed 5th July 2022]
Kous, K. and Polančič, G., (2019). Empirical insights of individual website adjustments for people with dyslexia. Sensors, 19(10), p.2235. https://doi.org/10.3390/s19102235
Kurosu, M. and Kashimura, K., (1995). Determinants of the apparent usability [user interfaces]. In 1995 IEEE International Conference on Systems, Man and Cybernetics. Intelligent Systems for the 21st Century (Vol. 2, pp. 1509-1514), October 1995. IEEE. https://doi.org/10.1109/ICSMC.1995.537986
Lazar, J., Feng, J.H. and Hochheiser, H., (2017). Research methods in human-computer interaction. Morgan Kaufmann.
Licker, P.S., Anderson, R., Macintosh, C. and Van Kets, A., (2001). Web site readability and navigation techniques: an empirical study. HARDWARE, SOFTWARE AND PEOPLEWARE. South African Institute of Computer Scientists and Information Technologists Annual Conference, 25 - 28 September 2001 Pretoria, South Africa
Moran, K. (2017). The Aesthetic-Usability Effect. Nielsen Norman Group. Available at: https://www.nngroup.com/articles/aesthetic-usability-effect/ [Accessed 31st August 2022]
Mayil, V.V., (2012). Web navigation path pattern prediction using first order markov model and depth first evaluation. International Journal of Computer Applications, 45(16), pp.0975-8887.
Rello, L. and Baeza-Yates, R., (2016). The effect of font type on screen readability by people with dyslexia. ACM Transactions on Accessible Computing (TACCESS), 8(4), pp.1-33. https://doi.org/10.1145/2897736
Rello, L., Pielot, M. and Marcos, M.C., (2016). Make it big! The effect of font size and line spacing on online readability. In Proceedings of the 2016 CHI conference on Human Factors in Computing Systems (pp. 3637-3648) May 2016. https://doi.org/10.1145/2858036.2858204
Rey, D., Neuhäuser, M. (2011). Wilcoxon-Signed-Rank Test. In: Lovric, M. (eds) International Encyclopedia of Statistical Science. Springer, Berlin, Heidelberg. https://doi.org/10.1007/978-3-642-04898-2_616
StatCounter (2022). Desktop vs Mobile vs Tablet Market Share Worldwide. StatCounter. Available at: https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet [Accessed 31st August 2022]
W3C (2022). WAI - Menu Structure. Web Accessibility Initiative. W3C. Available at: https://www.w3.org/WAI/tutorials/menus/structure/ [Accessed 30th August]
W3Counter (2022). Browser & Platform Market Share – July 2022. W3Counter. Available at: https://www.w3counter.com/globalstats.php?year=2022&month=7 [Accessed 24th August 2022]
Wagner III, W.E., (2019). Using IBM® SPSS® statistics for research methods and social science statistics. Sage Publications.
Wallace, S., Bylinskii, Z., Dobres, J., Kerr, B., Berlow, S., Treitman, R., Kumawat, N., Arpin, K., Miller, D.B., Huang, J. and Sawyer, B.D., (2022). Towards Individuated Reading Experiences: Different Fonts Increase Reading Speed for Different Individuals. ACM Transactions on Computer-Human Interaction (TOCHI), 29(4), pp.1-56. https://doi.org/10.1145/3502222
Page updated
Google Sites
Report abuse