Reading/Web/Desktop Improvements/Features/Visual Refinements
Now that all of the major functional changes to the interface are complete, we would like to focus on the final look and feel of the new interface, ensuring that our final design is accessible, fitting to the personality and purpose of our wikis, and easy to use.
Background and Goals
[edit]Over the past two years we have made various structural changes to the interface. We have moved the search box, the language switcher, and the table of contents. We have organized certain links and tools into menus. And we have limited the content width, added a sticky header, and moved the page title above the page toolbar. Now, with all of these various elements situated in the updated interface, we are turning our attention to the overall look. Some initial questions our team has been considering are:
- How can we use visual design to improve the interface?
- Do we think there is value in the skin having some additional personality (like the blue lines and gradients in Legacy Vector)?
- At what point there's too much of it, such that it might become distracting or make the interface confusing?
- What if we do as little as possible, and take a super minimalist approach similar to the original Wikipedia interface?
Historically our approach has been simple and functional. There is little styling (if any) to the HTML elements, which simplifies the interface both for people using it and for people designing and building it. It also means that our visual design is rather timeless. We don't chase the trends and don't need to make changes every couple of years. Looking at the screenshots below we can see how Monobook and Legacy Vector use visual design sparingly (mainly borders and background colors).
Proposed Changes
[edit]Menus
[edit]We use several menus in our interface. Thus far our approach to how we style menus has not been consistent. We have an opportunity, with Vector 2022, to develop a more accessible and consistent approach to the styling of our menus. In their most simple form menus have two elements: a menu trigger, and menu items. We're considering blue vs. black (for both the menu trigger, and the menu options), and bold vs. non-bold (for the menu trigger).
Link to prototype with options: https://di-visual-design-menus.web.app/Brown_bear
| 1) blue trigger, blue items
|
2) blue trigger, black items
|
3) black trigger, blue items
|
| 4) black trigger, black items
|
.jpg)
.jpg)
.jpg)
.jpg)
Borders and backgrounds
[edit]Should we add borders and backgrounds to help divide up the regions of the interface, and if so how should they look? As we mentioned in the Background and context section above, both Monobook and Vector use backgrounds and borders to separate the interface from the content. Backgrounds and borders can also add personality to the interface. However, it is difficult to know how functional or necessary they are. We've created several options with progressively more/darker borders and backgrounds.
Link to prototype with options: https://di-visual-design-borders-bgs.web.app/Zebra
| 1) minimalist
|
2) article borders
|
3) article borders + header underline
|
| 4) table of contents line + header underline
|
5) table of contents line + page title underline
|
6) article borders + header background (solid)
|
| 7) article borders + header background (gradient)
|
8) outside article background (gradient)
|
9) outside article background (solid)
|
.jpg)
.jpg)
.jpg)
.jpg)
Active section in the table of contents
[edit]The table of contents is now on the (left) side of the article, and is fixed in place so it remains visible as you scroll down the page. A new feature is that the table of contents indicates which section of the article you are currently reading (we call this the "active section"). Currently, following from a pattern used on the Article/Talk tabs, the active section in the table of contents is black, and the non-active sections are blue. We like this pattern because it is simple, not distracting, and used elsewhere. We could also use additional styling to indicate the active section.
Link to prototype with options: https://di-visual-design-toc-active.web.app/Otter
| 1) minimalist
|
2) bold
|
3) background
|
4) line with border
|
| 5) line with border (2)
|
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Logo in the header
[edit]Monobook and Legacy Vector both feature a square Wikipedia logo with a large globe. Given the various changes to Vector 2022 a smaller, rectangular logo in the corner may fit the layout better. However, we wanted to make sure to try various options. Please remember to try these options at various screen sizes, as the balance of the layout shifts depending on your screen size.
Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda
| 1) Rectangle logo left
|
2) Square logo left
|
3) Square logo left (gradient)
|
| 4) Rectangle logo center
|
.jpg){kind=logo}
Link colors
[edit]The World Wide Web Consortium (W3C) have Web Content Accessibility Guidelines. These guidelines define a minimum contrast level for links: "For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus." Since we do not underline links by default, our link color choice must meet the 3:1 contrast requirement. In order to check the contrast of our links with our body text we can use the contrast checker provided by WebAIM.
| Color | Contrast with body text #202122
|
Test result | Link to test result |
|---|---|---|---|
blue links #0645ad
|
1.89:1 | ❌ Fail | link to results |
visited links #0b0080
|
1.01:1 | ❌ Fail | link to results |
| Color | Contrast with body text #202122
|
Test result | Link to test result |
|---|---|---|---|
blue links #3366cc
|
3:1 | ✅ Pass | link to results |
visited links #795cb2
|
3.06:1 | ✅ Pass | link to results |
Additionally, the proposed blue link color is already part of the Wikimedia Design Style Guide, and is used on our mobile websites as well as in various project logos, so we would be gaining consistency.
Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon
| Current link colors
|
Proposed colors
|
Font size
[edit]The mission of our movement is to provide all of the world's knowledge to as many people as possible. Currently the majority of the knowledge we offer is in the form of text. Research has shown that typographic settings (such as font size, line length, and line height) influence the experience of reading, both in terms of general comfort (i.e. eye strain and fatigue), and comprehension and retention. Therefore it is important for us to use optimal typographic settings in our interface. An important factor to keep in mind when determining what is optimal for our projects is that people engage both in in-depth reading, as well as scanning of text.
In a previous phase of the project we read research studies regarding the line length and concluded that between 90–140 characters per line is optimal for our projects (link to writeup). Recently we have spent time reading research studies about font size. The most convincing, and directly applicable, research we have found thus far is a 2016 study that used eye-tracking to evaluate the affects of font size and line spacing for people reading Wikipedia:
Using a hybrid-measures design, we compared objective and subjective readability and comprehension of the articles for font sizes ranging from 10 to 26 points, and line spacings ranging from 0.8 to 1.8 (font: Arial). Our findings provide evidence that readability, measured via mean fixation duration, increased significantly with font size. Further, comprehension questions had significantly more correct responses for font sizes 18 and 26. These findings provide evidence that text-heavy websites should use fonts of size 18 or larger and use default line spacing when the goal is to make a web page easy to read and comprehend. Our results significantly differ from previous recommendations, presumably, because this is the first work to cover font sizes beyond 14 points.
Firstly, we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). The conversion is: 1px = 72pt / 96. So the range studied in the research (10–26 points) is equivalent to 13.3–34px. Their conclusion, 18 points, is equal to 24px.
So should we increase the font size to 24px? The research studied in-depth reading, however people often scan the page in order to find a certain piece of information. This is a different reading behavior, that arguably benefits from a smaller font size than in-depth reading does. Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with. (We would be increasing the maximum width of the article as well, from 960px to 1050px.) As a next step, we will plan to conduct our own research to further study font size on Wikimedia wikis.
Annotated bibliography of typography and readability research
Link to prototype with proposed font size: https://di-visual-design-font-size.web.app/Hummingbird
Swapping the order of Page Title and Tabs
[edit]As we begin to think about our improving our navigational hierarchy, we recognize that the page title is the main framing for the content within a page – whether that's the history of a page, the ability to edit the page, etc. To create this expectation more easily, we will be moving the title above the tabs such as Discussion, Read, Edit, etc.
With this change, we are improving two things. First, we are making it clear that the items in the tabs are related to the the page that's being viewed. By putting the page title first, this makes this connection easier to make. In addition, this change makes switching languages easier by moving the language button into an even more prominent position at the top of the page.
Qualitative Testing
[edit]In June and July 2022, we performed prototype testing with each of the prototypes linked above. This testing was performed across multiple languages and projects. The goal of the testing was to identify which of the available prototypes users found best for their individual use cases as well as overall usability. Below is a summary of our results:
Menus
[edit]Respondents overwhelmingly preferred the blue color for both menu triggers and menu items. Overall, there was also a preference for the regular blue menu triggers over the bold version.
Link to prototype with options: https://di-visual-design-menus.web.app/Brown_bear
| Menu trigger color | blue | black |
| Percentage | 68 % | 32 % |
| Total Responses | 89 | 41 |
| Menu item color | blue | black |
| Percentage | 83.74 % | 16.26 % |
| Total Responses | 103 | 20 |
Borders and Backgrounds
[edit]The large majority of respondents preferred either the Minimalist option, or the Outside article background solid option
Link to prototype with options: https://di-visual-design-borders-bgs.web.app/Zebra
| Border and background style | Minimalist | ar borders | Title underline + toc line | Toc line + hd underline | Ar borders + h underline | Ar borders + h bg (solid) | Ar borders + h bg (gradient) | Outside ar bg (gradient) | Outside ar bg (solid) |
| Percentage | 20.30 % | 7.43 % | 2.97 % | 8.91 % | 3.47 % | 11.39 % | 7.92 % | 7.92 % | 28.71 % |
| Total responses | 41 | 15 | 6 | 18 | 7 | 23 | 16 | 16 | 58 |
Active section in the table of contents
[edit]Overall, respondents preferred the bold option for the table of contents active section
Link to prototype with options: https://di-visual-design-toc-active.web.app/Otter
| Active section style | 1) minimalist | 2) bold | 3) background | 4) line w/ border | 5) line w/ border (2) |
| Percentage | 10.47 % | 38.95 % | 8.14 % | 23.84 % | 18.60 % |
| Total responses | 18 | 67 | 14 | 41 | 32 |
Logo in the header
[edit]The majority of respondents preferred the rectangle, left version of the logo
Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda
| Logo Version | 1) rectangle, left | 2) square, left | 3) rectangle, center | 4) square, left (gradient) |
| Percentage | 51.59 % | 35.67 % | 5.73 % | 7.01 % |
| Total responses | 81 | 56 | 9 | 11 |
Link Colors
[edit]A large majority of respondents preferred the new proposed link colors.
Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon
| Link Color Option | current | proposed | yes change but need to darken | likes new purple but not blue | mixed |
| Percentage | 20.83 % | 62.50 % | 9.17 % | 3.33 % | 4.17 % |
| Total Responses | 25 | 75 | 11 | 4 | 5 |
Font Size
[edit]A large majority of the respondents preferred the larger proposed font size of 16px. Some respondents made the request to make font size a preference.
Link to prototype with proposed font size: https://di-visual-design-font-size.web.app/Hummingbird
| Font Size | current (14px) | proposed (16px) | should be a preference | mixed |
| Percentage | 10.85 % | 63.57 % | 19.38 % | 6.20 % |
| Total responses | 14 | 82 | 25 | 8 |