Design Principles and Applications

How the principles of typography, layout and interaction are expressed in the websites of independent bars to enhance user experience.

Word Count: 2740

Theme and Case Studies

Through the analysis of relevant literature, this essay discerns how effectively the

websites of two independent restaurant-bars employ the principles of digital and

interactive design. In the current climate, websites play an increasingly important

role in the marketing and branding strategies of businesses (Kasavana, 2001).

Therefore, we can presume that web design is critical to consumers interpretations

of businesses. In 2017, bars and restaurants accounted for 10.4 billion pounds of the

UK’s eating-out market (Statista, 2017), yet most restaurant websites only display a

medium level of interactivity (Daries et al., 2018). This, in conjunction with the

oversaturation of the restaurant-bar market, indicates the necessity for businesses

to produce effective website designs to differentiate themselves from the multitude

of competition. Water Lane Boathouse is a popular independent bar serving craft

ales and pizzas from an old shipment warehouse, exemplifying the principles of

interactive design in their website. Strawbs Bar however, fails to express the

principles of digital and interactive design in its website, resulting in a poorly

designed interface harming user perception of the business. Here, the website

designs of these two independent bars will be assessed to deduce how effectively

each design employs the principles of digital and interactive design.

Literature Review

Effective web design requires adherence to a combination of resolute principles.

Navigation of company website should allow users to easily access information

without needing to contact representatives (Connolly et al., 1998). A webpage

should be obvious and self-explanatory in that no effort should be required to

comprehend the context (Krug, 2000). This can be achieved by maintaining simple

hierarchies and coherence throughout the design considering that the typical user

scans the page rather than reads in detail. Furthermore, creating satisfaction in the

usability of the web design can distinguish a good website from an average one

(Smashing Magazine, 2011). Storytelling in digital design creates an emotional

connection which engages users with the website and assists in the communication

of a company message (Smashing Magazine, 2011). Consistency is a defining feature

of successful web design and is achieved through the unity of typefaces, space,

colour, shape and line to create a comforting gestalt across the interface (Smashing

Magazine, 2011; Allanwood and Beare, 2014; Cooper et al., 2014; DiMarco, 2010).

The elements of a website must aid navigation which should be as simple as possible

to elicit smooth and delightful usability (DiMarco, 2010) since ease of use is a vital

design parameter (Cebi, 2013). Likewise, visual hierarchy is critical to good web

design where main and sub categories signpost information to form short pathways

(Krug, 2000; Allanwood and Beare, 2014; DiMarco, 2010). The design of a website

reflects the business it serves. Therefore, it is essential for businesses to take care in

the production of their website which should embody the brand identity (Allanwood

and Beare, 2014) to satisfy a brand community (Muniz and O’Guinn, 2001) and

promote the company. The next section will introduce the resolute design principles

which define effective interface design.

Design Principles at a Glance

It is evident in the surrounding literature of interface design that for a website to

engage users and thus promote the business, it must adhere to the principles of

typography, layout and interaction.

Typography

The careful selection, combination and arrangement of typography strengthens

meaning and structure in a website (Allanwood and Beare, 2014). Below, the

fundamental principles of typographic design in relation to web design are listed and

described.

• Text should be highly contrasted against a complimentary back ground

colour (Kasavana, 2001; Cooper et al., 2014).

• Fonts for digital platforms should be sans serif since serif fonts can be

difficult to read (Allanwood and Beare, 2014).

• Text should be limited to only relevant and necessary information to reduce

the length and noise of a webpage (Kasavana, 2001; Krug, 2000; Cooper et

al., 2014).

• Websites should utilise both HTML and Graphical Text for variation

(DiMarco, 2010).

• Headings, subheadings and paragraphs should be clearly distinguished to

create visual hierarchy on the page (Krug, 2000; Allanwood and Beare,

2014).

• The format of the scale, colour and direction of the text should signify

relationships between elements (Allanwood and Beare, 2014).

• Fonts should be a carefully selected to ensure the appropriate font is

employed since typefaces can elicit emotional responses from the interface

user (Cooper et al., 2014; Allanwood and Beare, 2014).

Layout

The arrangement of visual elements on an interface influences the user’s location of

information. All elements present a consistent format to induce smooth and

enjoyable navigation.

• There must be unity and consistency amongst the visual elements of a

website to ensure gestalt across the interface (Smashing Magazine, 2011;

Allanwood and Beare, 2014; Cooper et al., 2014; DiMarco, 2010).

• Elements of a webpage must be balanced to issue stability and unification in

the design which comforts the user (DiMarco, 2010).

• Visual hierarchy should be preserved on each webpage with as few levels as

possible to give prominence to the most important items (DiMarco, 2010;

Krug, 2000).

• Relative elements should be grouped together to indicate connections

between elements (Krug, 2000; Allanwood and Beare, 2014).

• Each page must adhere to the same grid to maintain consistency and reduce

excessive noise on a webpage (Krug, 2000; Cooper et al., 2014). A flexible

grid can be employed to allow variation in layout whilst conserving the

fundamental structure (Allanwood and Beare, 2014).

• The layout should guide navigation to complete the tasks in the quickest,

most efficient route (Smashing Magazine, 2011).

• The layout should present a level of brand awareness by making decisions

with regard to the brand identity of the corporation during the design

process (Allanwood and Beare, 2014).

• The interface design should be responsive to alternative devices such as

mobiles, tablets and laptops to ensure compliance and usability within the

context in which it is viewed (Allanwood and Beare, 2014; Cooper et al.,

2014).

Interaction

Interactive design extends the limits of user engagement by inviting users to

contribute to digital media through their actions. Interactive design allows

businesses to connect with customers in more meaningful ways through the

inclusion of rich media, communication and interaction (Ambrose and Salmond,

2013). The principles listed below contribute to the user’s satisfaction and

enjoyment when faced with successful digital design.

• Multidimensional graphics such as videos, animations and info graphics

benefit websites by engaging and involving the user (Kasavana, 2001).

• Scrolling is a useful tool as it allows large amounts of information to be

presented, rather than located, whilst creating excitement in the uncertainty

of what is below (Kasavana, 2001; Krug, 2000; Cooper et al., 2014).

• The website must not be overloaded with information through irrelevant

links, excessive tabs and multiple options. This can distract the user from

important information which must be obvious (Salmond and Ambrose, 2013;

Kasavana, 2001; Krug, 2000).

• Navigation should be simplified to create an enjoyable and smooth

experience. This can be achieved through the minimisation of user pathways

from section to section (Salmond and Ambrose, 2013; DiMarco, 2010).

• User experience must be the primary concern in the design of an interface

with aesthetic value as an additional, secondary consideration (Allanwood

and Beare, 2014). Optimum user experience is only achieved through the

designers thorough understanding of the user and their context (Cooper et

al., 2014).

• The technology of the interface should serve the intellect and imagination of

the user by corresponding with their perceptive and cognitive abilities

(Cooper et al., 2014).

• The interactive elements of the website must respond to the screen

dimensions of various devices including; mobiles, tablets and laptops

(Cooper et al., 2014).

• A corporate website should issue a means through which users can

communicate with the provider (Daries et al., 2018).

• Consistency must be evident in the interactive features of a webpage where

a clickable icon results in the same outcome on different pages (Salmond

and Ambrose, 2013).

Background and Analysis: Case Studies 1 & 2

Case Study 1 Analysis:

Strawbs Bar is family owned business which has provided a popular drinking spot for

students for 37 years with their consistently low prices. Strawbs Bar also supplies

the fifteenth stop on a notorious pub crawl in Leeds, The Otley Run. Therefore,

Strawbs Bar possesses various qualities which would attract customers if marketed

correctly. However, at present Strawbs Bar fails to broadcast itself substantively

with an outdated website which does very little to present the bar in a positive light.

Figure 1: Home page of Strawbs Bar Website. (Strawbs Bar, 2018) Typography The levels of hue and saturation across the homepage are imbalanced which results

in low contrast between the orange title of the bar and the deep red background,

infringing legibility (Kasavana, 2001; Cooper et al., 2014). Despite the recommended

use of sans serif fonts (Allanwood and Beare, 2014) and a combination of HTML and

graphical text (DiMarco, 2010), the home page repeats the name ‘Strawbs Bar’ three

times. This not only patronizes the user, who has mostly likely already searched the

name of the bar to reach the website, it also creates noise in spaces which could

display relevant information instead (Kasavana, 2001; Krug, 2000; Cooper et al.,

2014). Furthermore, the headings in the upper banner of the home page are

inconsistent in the juxtaposition of completely upper and lower case words which is

a common defect throughout the website as shown in figures 1 and 2 (Strawbs Bar,

2018).

Figure 2: “Otley Run+info” page of Strawbs Bar Website. (Strawbs Bar, 2018)

It is also unclear as to where each heading leads. For example, “OTLEY RUN+info”

and “Whats On +Other page” are extremely vague and appear to describe the same

page (Krug, 2000). User cognition would be hugely improved if these two pages

were combined under the simple and unquestionable heading, “Events”. Although

typographic variation of the same font is exemplified through weight, size and

colour changes, the irregularity of this only increases the sense of disarray where

headings, paragraphs and subheadings become indistinguishable as seen in figures 2

and 3 (Krug, 2000; Allanwood and Beare, 2014; Strawbs Bar, 2018). Ultimately, it is

understood that Strawbs Bar is a playful and relaxed environment however this is

not communicated in the orderly, monospace font employed.

Layout

The elements of the Strawbs Bar website conform to the same format in terms of

the upper banner, red background and white text box. However, the inconsistency

in the arrangement of visual elements within the central white box dismantles any

sense of gestalt across the website which is imperative to successful web design

(Smashing Magazine, 2011; Allanwood and Beare, 2014; Cooper et al., 2014;

DiMarco, 2010). Likewise, the chances of an underlying grid (Krug, 2000; Cooper et

al.,2014) are unlikely considering the haphazard organisation of text and image in

the one-dimensional, “HIRE OF STRAWBS BAR” page displayed in figure 3.

Figure 3: “HIRE OF STRAWBS BAR” page of Strawbs Bar Website. (Strawbs Bar, 2018)

Navigation of the Strawbs Bar webpage is challenging as the user finds themselves

unknowingly clicking headings without an idea of what will be presented, prolonging

the process (Smashing Magazine, 2011). Important information such as opening

times is buried amongst irrelevant and untidy text, as seen in figure 4, which would

be highly frustrating if the user required information quickly (Strawbs Bar, 2018).

The opening times are also located on the third heading of the upper banner at the

lower end of the page, conveying the lack of hierarchy of important information

(DiMarco, 2010; Krug, 2000). Despite these significant faults, the Strawbs Bar

website is responsive to a mobile device which typically produces a more satisfying

user experience (Gardner, 2011). However, the responsiveness of the Strawbs Bar

website does not overcome the confusion and instability of the interface.

Figure 4: “OTLEY RUN+info” page of Strawbs Bar website. (Strawbs Bar, 2018).

Interaction

The Strawbs Bar website contains no moving images which would enhance user

engagement (Kasavana, 2001). A significant amount of scrolling is required in order

to navigate the website which can create a sense of mystery in the uncertainty of

what will be displayed. However, the user should not need to search for information

through protracted scrolling of extensive pages, as demonstrated by the hidden

opening times in figure 4 (Strawbs, 2018), rather such information should be made

explicit (Kasavana, 2001; Krug, 2000; Cooper et al., 2014). It is very clear that the

quality of the user’s experience has been of no concern to the designer who has

regularly added text without reviewing the existing content. This results in in

repetition of information such as the drinks prices which are listed on both the

“Whats on +Other page” and “DRINKS” (Allanwood and Beare, 2014; Cooper et al.,

2014; Strawbs Bar, 2018). There is also no platform through which the user can

make contact with the provider other than mobile phone details of the owners

which customers may be reluctant to call (Daries et al., 2018). The Strawbs Bar

website exemplifies exactly what is warned against in the literature surrounding web

design; an overload of information through irrelevant links, excessive tabs and an

abundance of elements distracting from crucial information (Salmond and Ambrose,

2013).

Case Study 2 Analysis:

Water Lane Boathouse is a modern bar and restaurant situated in the docks of Leeds

in an old shipment warehouse. It is home to a handmade pizza oven from Napoli, 70

different beers and a private function room, all of which are made known on the

carefully designed website.

Typography

The dark, highly saturated sans serif text against the pale, lightly saturated

background creates a stark contrast which eases readability (Kasavana, 2001;

Cooper et al., 2014); Allanwood and Beare, 2014). The application of varying font

sizes and weights further establishes a hierarchy and increases legibility (Allanwood

and Beare, 2014), heightening the visual appeal of the website through typography

(Varela et al., 2013). For example, the utilisation of bold text to emphasise certain

words effectively signifies relationships to other elements and links as exemplified in

figure 5 (Kasavana, 2001; Krug, 2000; Cooper et al., 2014).

Figure 5: Water Lane Boathouse Homepage. (Water Lane Boathouse, 2018).

Clearly defined headings, subheadings and paragraphs create a hierarchy in the

website which satisfies the user who can easily navigate between the pages.

Furthermore, the font choice is consistent throughout the entire website which is

comforting to the user and reflective of the calm and sophisticated nature of this

establishment (Cooper et al., 2014; Allanwood and Beare, 2014).

Layout

All visual elements of the Water Lane Boathouse website are unified across the

interface to create a satisfying gestalt (Smashing Magazine, 2011; Allanwood and

Beare, 2014; Cooper et al., 2014; DiMarco, 2010). Balance is ensured in the

adherence to a strict grid which imbues the webpage with stability and coherence

(DiMarco, 2010; Krug, 2000; Cooper et al., 2014). This stability supports the

hierarchy of information which is communicated through the order of distinct

sections and the uniformity of each of their headings, subheadings and paragraphs

displayed in figure 6 (DiMarco; 2010, Krug, 2000).

Figure 6: Water Lane Boathouse Drinks Page. (Water Lane Boathouse, 2018).

Although all the sections of this website are presented on one scrollable page and

are clearly defined through the grouping of elements and spatial arrangements

(Krug, 2000; Allanwood and Beare, 2014). Navigation is guided by the general layout

and downward pointing arrow which introduces the user to the scrolling format,

shown figure 7 (Smashing Magazine, 2011).

Figure 7: Water Lane Boathouse Startup Page. (Water Lane Boathouse, 2018).

Users can also jump straight to the section they seek from the drop-down menu

symbolised by the internationally recognised hamburger button. The layout

successfully reflects the brand identity of Water Lane Boathouse (Allanwood and

Beare, 2014) through the dichromic colour scheme, prominent logo and nautical

motion graphics which move across the screen as the user scrolls. These features

convey that core company maritime values are ingrained within the fresh exterior

(Merrilees and Miller, 2008). The layout aids navigation of the website whilst being

enjoyable to encounter, thus creating a positive perception of the business in the

mind of the user.

Interactivity

The Water Lane Boathouse website is highly interactive in its display of

multidimensional graphics, including animations which respond to the user’s hand

movement as they scroll down the page (Kasavana, 2001). The spatial arrangement

between sections allows for all the content to be presented on one page without

overloading the user with information (Salmond and Ambrose, 2013). This format

simplifies navigation by minimising pathways between sections since the user is not

required to click anything (Salmond and Ambrose, 2013; DiMarco, 2010).

Furthermore, clickable items are conveyed through the conventional use of rounded

boxes (Krug, 2000). Undoubtedly, user experience has played a significant role in the

design of this refined website which is embellished by the attractive aesthetic

qualities (Allanwood and Beare, 2014). The interface serves the intellect of the user

(Cooper et al., 2014) by focusing on the common digital interaction of scrolling.

Likewise, the site is responsive to alternative devices as the scrolling interaction

originally developed from the mobile device phenomenon (Cooper et al., 2014). The

Water Lane Boathouse website is consistent in all aspects resulting in an effortlessly

“cool” (Wipperfürth, 2005) domain which projects its positive qualities on to the

brand, thus promoting and strengthening the business.

Design Solution

Typography

The design solution adopts a white background and highly saturated, sans serif text

to create a strong contrast to aid legibility (Kasavana, 2001; Cooper et al., 2014,

Allanwood and Beare, 2014). The text is restricted to what is relevant and necessary,

including opening times and information about the business which eradicates noise

from the website (Kasavana, 2001; Krug, 2000; Cooper et al., 2014). Headings,

subheadings and paragraphs are clearly distinguished through appropriate variations

of the size and weight of a consistent font (Krug, 2000). The sans serif font, A

Pompadour (Parracho, 2018), communicates a sense of order whilst embodying the

playfulness of the Strawbs Bar brand identity (Cooper et al., 2014).

Layout

A gestalt is ensured across this interface through the consistency in line, colour,

shape, space and type (Smashing Magazine, 2011; Allanwood and Beare, 2014;

Cooper et al., 2014; DiMarco, 2010). Balance is also cemented through the even

proportions of the structural and visual elements and use of a consistent grid

(DiMarco, 2010; Krug, 2000; Cooper et al., 2014). Features such as the arrow and

boarder guide the user toward the scrolling format of the webpage, supporting

efficient navigation of the site (Smashing Magazine, 2011). The unified and stable

layout improves usability whilst also communicating the brand identity of Strawbs

Bar through the color scheme and logo implementation (Allanwood and Beare,

2014).

Interaction

The incorporation of graphic illustration, in conjunction with HTML text, creates a

multifaceted design solution which stimulates user engagement where the original

was incapable (Kasavana, 2001). Similarly to Water Lane Boathouse, this solution

utilises the common familiarity with scrolling to create an exciting and interactive

website in the uncertainty of what will be revealed beneath (Kasavana, 2001; Krug,

2000; Cooper et al., 2014). However, with usability at the forefront of this design,

buttons are presented immediately after the startup page to allow users to go

directly to their area of interest, aiding navigating and minimising user pathways

(Salmond and Ambrose, 2013; DiMarco, 2010). Furthermore, the website is

responsive to various devices including mobile phones, laptops and computers as

shown in figure 8 (Cooper at al., 2014).

Conclusion

The principles of successful digital and interactive design have been outlined here

and applied to the case studies of Strawbs Bar and Water Lane Boathouse. The

principles described address the issues of typography, layout and interaction in

digital design. Whilst Water Lane Boathouse exemplifies these principles to a high

degree, Strawbs Bar shows no regard for user experience. A design solution has

been proposed for Strawbs Bar which adheres to the principles of digital and

interactive design addressed here.

Reference List

Allanwood, G. and Beare, P. 2014. User Experience Design: Creating Designs

Users Really Love. London: Bloomsbury Publishing.

Cebi, S., 2013. Determining importance degrees of website design

parameters based on interactions and types of websites. Decision Support

Systems, 54(2), pp.1030-1043.

Cooper, A., Reimann, R., Cronin, D. and Noessel, C. 2014. About Face: The

Essentials of Interaction Design. Indianapolis: John Wiley & Sons.

Daries, N., Fransi, E., Rosell, B., Roig, E. 2018. Maturity and development of

high-quality restaurant websites: A comparison of Michelin-starred restaurants in

France, Italy and Spain. International Journal of Hospitality Management. 73(1).

pp.125-137.

DiMarco, J. 2010. Digital Design for Print and Web: An Introduction to

Theory, Principles and Techniques. New Jersey: John Wiley & Sons.

Gardner, B.S., 2011. Responsive web design: Enriching the user

experience. Sigma Journal: Inside the Digital Ecosystem, 11(1), pp.13-19.

Kasavana, M. 2001. eMarketing: Restaurant Websites That Click. Journal of

Hospitality & Leisure Marketing. (9)4. Pp.161-178.

Krug, S. 2000. Don't make me think!: a common sense approach to Web

usability. Birkley: New Riders.

Merrilees, B. and Miller, D. 2008. Principles of Corporate Rebranding.

Department of Marketing. 42(5), pp.537-552.

Muniz, A. and O’Guinn, T. 2001. Brand Community. Journal of Consumer

Research. 27(4), pp.412-432.

Parracho, A. 2018. A Pompadour. [Online]. [Accessed 17 December 2018]. Available from: https://www.dafont.com/a-pompadour.font

Pubs and Bars Market Value. 2017. Statista Website. [Online]. [Accessed 18

December 2018]. Available from: https://www.statista.com/statistics/827529/pubs-

and-bars-eating-out-market-value-united-kingdom-uk-by-type/

Salmond, M. and Ambrose, G. 2013. The Fundamentals of Interactive Design.

London: Bloomsbury Publishing.

Smashing Magazine, 2011. Professional Web Design: The Best of Smashing

Magazine. Chichester: John Wiley & Sons.

Strawbs Bar. 2018. Strawbs Bar Website. [Online]. [Accessed 17 December

2018]. Available from: http://www.strawbs.com

Varela, M., Mäki, T., Skorin-Kapov, L. and Hoßfeld, T. 2013. Towards an

understanding of visual appeal in website design. Quality of Multimedia Experience

13(1) pp.70-75.

Water Lane Boathouse. 2018. Water Lane Boathouse Website. [Online].

[Accessed 17 December 2018]. Available from: http://waterlaneboathouse.com

Wipperfürth, A. 2005. A Dangerous Attitude. In: Brand Hijack. New York:

Penguin Group.

Bibliography

Connolly, D. Olsen, M. and Moore, R. 1998. The Internet as a Distribution

Channel. Cornell Hotel and Restaurant Administration Quarterly. 39(4). pp.42-54.