Keywords

1 Introduction

The presence of new outlets and art magazines that are either online or digital is ever increasing. Unfortunately, a great part of such digital objects lack adequate design when it comes to the use of grid and typography. This is akin to the trend that occurred when the first “bricks & mortars” stores created their websites, and designers initially tried to transpose some design principles (such as the use of color, grid, typography, images etc.) from paper to the digital media. Most of the initial sites failed, just like the e-commerce websites did, simply because they did not take full advantage of the innovative new media available to them. When it comes to magazines, graphic design has long studied grid and typography. But there is a lack of studies for digital artifacts, which require different solutions [1]. A grid organizes the space in planes giving it structure, hierarchy and consistency [2]. On the web, they differ vastly from the paper [3]. Typography is “[…] the means by which a visual form is given for a written idea […] a visual language that enhances power and clarity” [4]. Both grid and typography greatly define the final usability of a digital artifact [5], and should be adapted to the new digital media. This article proposes a set of heuristics to evaluate online art magazines for grid and typography adequacy. Also, this paper presents the methodology used to implement the heuristics. It then presents the set of heuristics and the results of an qualitative evaluation conducted to validate them. They can be a tool to be used by designers and developers of online objects.

2 Methodology

The heuristics were derived from a study of grid and typography variables. For grid the variables are: structure, hierarchy, and constancy and variation; for typography the variables are: legibility, hierarchy, and identity. These variables were chosen in order to give this research more focus. They were also the basis for the state of the art literature review regarding the use of grid and typography for the development of good websites.

Five art magazines were analyzed according to the parameters established by the literature review. If the site of the magazine met these parameters, they were classified as best practices (e.g. good care regarding ergonomic principles as to the font used to enhance legibility). If the parameters weren’t met, they were classified as worst practices (e.g. the logo identity is not identifiable– the typography is generic to the extent that it does not support a logo: it is recommended that a more solid reference should be used in the construction of the identity). After best and worst practices were determined, their recurrence and severity were analyzed. Figure 1 shows the complete methodology used for generating the heuristicsFootnote 1.

Fig. 1.
figure 1

Screenshot showing the top of the home page

Full size image

3 Elaboration

3.1 Heuristics

Guidelines for grid and typography were originated from the analyzed data. The authors studied a total of 30 entries: five art magazines times six requirements (parameters). Crossing this information yielded 15 heuristics – eight for grid and seven for typography.

Heuristics for grid.

Subjected to the Content.

Every kind of content has its own limitations and needs, and all of them have to be met by the grid. If the content has more text, then it requires a different grid (than if it had more images, for instance).

Emphasis to What is Important.

Important elements are noteworthy and should be highlighted, but auxiliary information shouldn’t. Avoid having secondary information as a primary role. The hierarchy is an important factor in the content organization and grids are directly connected to it.

Coherent Alignments.

Display the items in an adequate way; random placements can damage your layout. Shuffled or lost elements on the page mean that either the grid is not being well used or it has to be changed. A good grid offers place for all elements of the composition and maintains the hierarchy at the same time.

Visible Navigation.

Easy navigation is a basic requirement. The grid needs to have a place where the user can have constant access to the menu, regardless of screen roll. A proper back navigation may also be considered. It is important for the reader to easily know where he is and how to get back to where he came from.

Visual Elements Arrangement.

Images, videos, tables and graphics, in most cases, need to be shown fully on the screen. However, they cannot be downsized in a way that it will compromise its visibility or legibility.

Variation According to Each Page.

Different products require different structures. It is natural that pages of any website have different styles of content. For this reason, the grid should be adequate to the specific content of each page.

Logical Constancy.

Constancy is as important as variety. Repeated elements throughout the pages (such as the menu, the footer and margins) should be static. It helps to create a consistency and helps the user to develop references inside the website. It is possible to maintain constancy in other ways, such as color patterns and typography for example, which are also associated with the construction of identity.

Responsive Web Design.

It means that it has to be designed to work across devices. The website needs to work well in any device and adapt itself to all screen sizes.

Heuristics of Typography.

Respect the Function of the Text.

Employ the typeface according to the text’s function. Texts used to call the attention of the reader can have more elaborated typefaces. Texts whose function is to inform should be designed for readability and legibility.

Typography has Identity.

The typography can communicate subjective meanings and it is important that type identity is coherent with its purpose’s identity. This should also be considered when choosing a typeface. When using ordinary or generic font, the site should rely on other elements to keep the identity (through color and graphics, for instance).

Balance.

Combination of typefaces needs to be balanced. The excess of different fonts in a project can break the identity’s reference. On the other hand, one single typeface with few variations can be monotonous. Once again, it’s the content that will determine these choices.

Hierarchy for Organization.

The hierarchy tells the reader which information needs to be read first and what is the sequence thereof. Important texts need to be highlighted while less significant texts can receive less emphasis. But making a big title that is lost in the middle of images and advertisements doesn’t work. It is essential that not only legible the text should also be noticeable.

Value Legibility and Readability.

The aim of a website is usually to communicate some kind of information. And if this information is in a text, it’s important to make it legible to the user. No matter how interesting, fun or exciting is your text, if it is difficult to read; the reader might give up reading halfway. A typeface choice has to be a careful decision.

Consider Type Size According to the Medium.

The font size will depend on two factors. The first is the typeface itself. For example, if it has a small x-height it may be necessary to increase its size. The second factor is the device. In her book “Type on Screen” Ellen Lupton explains that computers are usually further from the user’s face than handheld devices, such as books or mobile phones. Letterforms appear fuzzy because of low pixel densities and backlighting, do not mix these problems by adding a very small typography [7].

Adequate Spacing.

The text must maintain a balance between lines, words, and letter spacing because the excess is as harmful as the shortage. The line length might also prioritize the ideal number of characters. Lengthy lines makes reading tiresome because they allow for few pauses. Typefaces with short spacing between letters and words may appear truncated. The space between lines should also be carefully thought. If it’s scarce, it may cause problems to the user to find the next line, and if it’s in excess it isolates the lines so that they can’t seem related.

3.2 Evaluation

In order to validate the proposed set, the criteria were used following the heuristic evaluation proposed by Nielsen [8] where multiple evaluators are able to find problems on an interface based on recognized principles – the heuristics. Three specialists with Graphic Design and Computer Science background conducted the evaluation. The evaluators worked parallel in order to find the problems. Then, they met to consolidate the findings.

The succeeding topic is a summary of the evaluations. The results are divided by the heuristics followed by the problems – elements that are not according to the criteria. Sometimes, a problem is related to more than one heuristic and is reported only once (in order to avoid repeating information). Logos and names of the analyzed magazine were blurred in the images. Analyzed contents are marked and numbered.

  1. 1.

    Subjected to the content.

The left column mixed different kinds of content in the same area (number 1 in the highlighted area in Fig. 2). For example, links to social media are on the same level and in the same grid as external art bulletins. Thereafter, there is a navigation menu. One solution could be to organize these contents in modules and to bring the menu to the top.

  1. 2.

    Emphasis to what is important.

The left and the right grids are distracting from the main content (1 and 2 in the highlighted area in Fig. 2). The ads and posts occupy two main positions and, since they are colorful and animated they can distract the reader from the main content. These areas should not have this much emphasis, or should be placed in a less important position inside the grid.

Fig. 2.
figure 2

Screenshot showing the midpoint of the home page

Full size image
  1. 3.

    Coherent alignments.

The header has random placement of the menus and links (3 in the highlighted area in Fig. 2). The language links are not aligned to anything and the logo on the left of the menus looks arbitrarily placed on the upper-left part of the page. The grid should offer a proper position for all the elements and should make them look cohesive.

  1. 4.

    Visible Navigation.

The Categories menu in the left-hand side is not completely visible at the home page (Fig. 2). Subsequently, once the reader scrolls down, the top menu is hidden (Fig. 3). To have access to the menu again, it is necessary to scroll up the page. The solution in this case would be fixed menus.

  1. 5.

    Visual elements arrangement.

Portrait images of news entries do not fit on the same page (4 in the highlighted area in Fig. 2). It isn’t possible to see the entire image at once even scrolling down the page. Long images should be resized in a way to fit in the screen.

Fig. 3.
figure 3

Screenshot of home page

Full size image
  1. 6.

    Variation according to each page.

The grid is exactly the same through the pages. It affects text content, making the line length extensive (Fig. 4). Different grids for different pages would allow for a better text fit.

Fig. 4.
figure 4

Screenshot of an article page

Full size image
  1. 7.

    Logical constancy.

No problems were found relating to this criterion.

  1. 8.

    Responsiveness.

The website isn’t responsive. Images, texts, menus, and so on are not replaced or resized in order to better adapt to mobile devices. It is complicated to read, navigate, and use the website on a phone. Responsive layout, with grids according to the screen size would improve the usability.

  1. 9.

    Respect text’s function.

On the menu, items that are links look pretty much the same as items that are not (3 in the highlighted area at Fig. 2). That can confuse the user because there is no marking telling if the items are clickable or not. Texts that are links should be marked as such.

The text at the end of the article has the same highlighting as the title (1 at Fig. 4 and 5 at Fig. 2). Since they have different functions they should look different, otherwise they can mislead the user.

The “see more” link (1 at Fig. 3) looks exactly the same as the body text. Once again, the typography does not clearly indicate the text role.

  1. 10.

    Typography has identity.

No problems were found relating to this criterion.

  1. 11.

    Balance.

No problems were found relating to this criterion.

  1. 12.

    Hierarchy for organization.

The titles aren’t quite noticeable (5 at Fig. 2). They have the same size as the body text and are next to an image that demands more attention. Perhaps they should receive more emphasis because they are the first things to be read and are helpful to the user to find information at a glance.

  1. 13.

    Value Legibility and Readability.

The magazine’s name, under the logo (3 at Fig. 2) is too small and difficult to read. It becomes an issue first because the logo is the core of the identity of the website and second because it could be used as a navigation item, redirecting the user to the home page.

  1. 14.

    Consider type size according to the medium.

The font size is too small on mobile devices due to the lack of responsiveness. After opening the website on a phone, it is necessary to zoom-in in order to be able to read the content.

  1. 15.

    Adequate spacing.

The body font is hard to read (1 at Fig. 4). The tracking and kerning are tight, the line height is short, and the line length is extensive. It makes the readability slower and can compromise the legibility as well. The solution on this case would be adjusting spacing and the column width.

4 Results

It was found that the analyzed website didn’t meet 12 of the 15 proposed requirements. The evaluators related 19 problems in total. Some of them appeared in more than one evaluation, for example: the type size under the logo, the lack of emphasis on titles and links, and the fact that the side columns were distracting.

The heuristic that presented more problems was “Respect text’s function”. It was evaluated as one of the major problems of the object of study, because it is directly related to other factors such as navigation, hierarchy and legibility.

The analyzed magazine also presented several problems related to usability. The magazine does not have a mobile version, fixed menus, and good readability: all serious problems, as they limit the accessibility of the website.

The evaluators considered that the use of the heuristics helped them to find serious problems in the studied magazine, thus validating its use as an evaluation tool.

In order to contribute with future studies and meet web designers and web developers needs, these heuristics are also freely available online, on the following address: http://annaretore.wix.com/guideline#!home/c1dmp.

5 Conclusion

Graphic design has a long history of providing best practices for visual content. Unfortunately, those guidelines are not always adequate for online devices. Little to no studies deal directly with such issues – most of them are concerned with usability in general. Thus, there is a need for studies to help designers to find and avoid errors caused by inadequate use of grid and typography in digital objects.

This research proposes a set of heuristics aimed to help anyone to evaluate a website when it comes to grid and typography. The proposed set was pivotal in finding severe problems in an evaluation of an art magazine – ranging from navigation and responsive layout to good legibility and readability issues. It was shown that the heuristics deal with parameters that are more impacting than just the visual aspects of the page.

Further research, with other digital objects, should be conducted, in order allow for generalization. The research methodology should be applied to other graphic design elements – color – or to other object of study – online newspapers for instance.