Usability and Design in Website Development

“Usability comes first” is a true rule of website development, but design plays a critical role in creating great user experience (Felton, 2013). According to Nielson (2006), “Website designers make a huge mistake when they focus around usability alone, just because it is thought to be more important for users. Usability and design should go together as CSS and PHP, as Header and Footer, as content and layout.” This week’s blog post will discuss the design and usability of Burger King’s website along with the websites of McDonalds and Wendy’s.

Screenshot (10)

As mentioned above, a site’s usability mainly depends on its design. A fast website with a friendly entry form, yet colored in an unsuitable color palette and with old-fashioned fonts would never succeed among the users. However, website usability is about user-centered design. Burger King’s website is primarily designed to engage the viewers and to promote exciting offers. The web designer chose a warm color palette in the design of this brand’s website. The images used on the website are very colorful and appealing. Also, the site lists menu items in traditional navigation style.

Screenshot (13)

The five tasks, assigned to the three users, to test the usability of this website and other two sites were:

  1. Browse the site from a mobile device and a tablet.
  2. Order some food online
  3. List some of their current promotional offers
  4. Sign up for the newsletter
  5. Find out store locations and hours of operations

Screenshot (12)

The tasks above were chosen as the different criteria to be used to compare the companies’ websites. The results after interpreting the data collected from the users are discussed below:

Mobile Friendliness:

All of the users were able to browse the websites from their mobile devices. However, two of them mentioned that they struggled with the site of Burger King. According to them, the navigation style of its mobile web is not user-friendly. Since the homepage of BK is very long, it takes substantial time to load the page. The users did not like the wait time. Compared to BK, McDonalds and Wendy’s have clearer and more concise homepage in their mobile webs.

Navigation style and links:

Two of the users said they could easily know where they were on the McDonalds website. Another user said the site of Burger King provided useful clues and links for the users to get the desired information. However, all of them noted that it was difficult to move around at the website of Burger King. The animation used on the surface to display the images are very distracting. According to them, it is much easier to move around at McDonald’s website by using the links or back button of the browser. They also think, the links at McDonald’s website are well maintained and updated. Placement of links or menu is standard throughout the website and easily recognizable.

Screenshot (14)

User Interface Design:

All of the users think that the BK’s website interface design is attractive. All of them were comfortable with the colors used on this website. However, as mentioned earlier, they think that the site contains some features that at times irritated them such as scrolling and looping animations. According to the users, McDonalds’ website has a consistent feel and look. The design of the site makes sense, and it is easy to learn how to use it. Nevertheless, two of the users mentioned that the website of Burger King is much more user-friendly than the site of Wendy’s.

Performance and effectiveness of the Website:

As mentioned above, the users needed to wait too long to open the homepage of Burger King. However, two of the users agreed that the homepage of BK loads faster than the homepage of McDonald’s. It is because of the flash video used by McDonalds on their homepage. Considering the wait time, Wendy’s website is the most effective among three of these sites. However, the users noted that all these websites responded to their actions as expected.

Screenshot (15)

According to Nielson (2006), “A usable website is user-friendly, easy to read, it is flying (in the literal and metaphoric senses), and it makes users come back.” When users arrive at a website, they should understand how the navigation works, how to act via CTA, where to find any particular section of the site or information they are interested in, and all this is called website usability. Burger King should improve their navigation style to make the site more user-friendly. Also, to improve the overall user-experience BK should refine the animations of their web page. It is recommended to the company to make the homepage crisper, which will eventually make the website more swimmable by the users.

Creating Synergy!

Advertisements can be much more effective in delivering the core message if both verbal and visual designs can be combined together in an effective way. The ads that will be analyzed in this week’s blog post will be the ones that include both a verbal message and a visual design to create synergy. The ads below are the ones that would not be nearly the same without both verbal and visual components. Creating a relationship between words and pictures is the key to creating synergy, which can lead to a total effect greater than the sum of their individual effects.

Wendy’s:

6a00d8341bf89d53ef00e54f1878b38834-500wiThe designer of this ad used contrast colors in the overall design of this ad. The contrast colors of the different dishes made it look more vibrant. Wendy’s is communicating to the viewers that they are offering foods that do not cause obesity. The target audience of this ad was the health-conscious adults. The message was to let them know if they eat healthy they will not need to spend money on personal trainers. However, the images and the typography created a beautiful synergy in this ad. The message is clear by the texts and it was complemented by the images. Also, the ad only put emphasis on one idea, which is their healthy meal options. It is recommended to put emphasis on one idea per ad, as it helps to bring maximum attention of the viewers to that one particular idea (Felton, 2013).

Burger King started offering healthy meals from 2012. The company also realized that the target customers are becoming health conscious day by day. Therefore, they decided to introduce new menus for the ones who prefer to eat healthy. However, Burger King could not promote their healthy meal option as effectively as Wendy’s did.

McDonald’s

mcdonalds-advertising1In this ad, McDonald’s tried to engage the viewers in the verbal message by using a visual design, which is a bit ambiguous. This is typically an effective strategy, as it leaves the viewer curious and wanting more. The pictures of the left out fries induces the curiously of a viewer. However, when the viewer reads the headline they understand what the ad is all about. Felton explains that one effective strategy is to “let the consumer do some of the work” and use their own intelligence to figure out what the ad is saying (Felton, 2013).

Carl’s Jr:

mcj12508-midvalley-porto

The visual design of this Carl’s Jr. ad is likely what sticks out most to viewers, but the message that goes along with it creates synergy and enhances the total effect of the ad. If a viewer looks at the attractive image of the burger he or she will be curious to know about the product. The headline explains the underneath message of this appealing image. The designer used opposition strategy to bring humor in this ad.

Arby’s

arbys-chicken-naturals-range-swimsuit-issue-small-87890arbys1Personally, I found these ads hilarious, yet effective. The images of the chickens and the typography creates a very effective synergy. The target market for this ad was the ones who look for authentic food. This ad clearly tells the viewer how authentic is the burgers of Arby’s. Adding humor in an ad effectively makes the ad more appealing. The ad from the left used an effective quotation as well to deliver the main message.

KFC:

4da591386b0d2bc55adfb37fa7f5e83f

KFC did a very good job in creating synergy for this ad. Combining overstatement and understatement is an effective strategy, and using a wild visual with a verbal message that doesn’t shout can create synergy (Felton, 2013). The image of the leg complements the texts of the ad very effectively.

Effective Design and Concepts

Graphic design is the combination of art and technology that uses design elements such as typography and images to convey information or create an effect (Bennett, 2006). It is a form of visual communication that mostly uses a visual element to communicate a message (AIGA, 1993). Graphic design enables a company to position its brand in consumers’ mind by giving it a face and visual presentation. Therefore, the role of graphic design is very significant in advertising.
The brand I have chosen to do my research on is ‘Burger King’. The similar brands to Burger King are McDonalds, Wendy’s, Jack in the Box, and In n Out.

McDonalds: Free WiFi Campaign

mcdonalds13McDonalds published this ad when it started offering free WiFi in all its restaurants. The design of the ad is very simple and creative. The image used in the ad is very compelling as well. If the objective of the brand is to communicate an important information, it is essential to use the image that is visually appealing and informative (Graham, 2002). The McDonalds box that has been placed like a laptop is self-explanatory and conveys the core message of the ad. It also evokes the viewer’s curiosity, which makes it an effective ad (Graham, 2002). The design of the ad is unified and gave appropriate emphasis on the content.
IMG_2063

The ad that was published by Burger King after they introduced WiFi was not a creative one. It has the usual WiFi image with no appeal in it. The typography could have been more eye-catching and aligned. They should have used an appealing image to communicate this important information to the customers.

Arby’s arbys_adRoost Burgers

Arby’s used sex appeal in this ad very effectively. They put emphasis on the image that shows the new burgers, Arby’s is introducing. The designer used active white space to give emphasis on this main content area. The ad looks balanced and unified. The designer also used contrast colors to make the ad visually appealing. Nevertheless, the design has a flow established in it, which controls the way the viewer’s eyes move across the ad.

0_61_bk_320_2

Burger King also used sex appeal in some of their ads. However, they could not implement the strategy effectively. In this ad, the “mind-blowing” sandwich near the open mouth of a wide-eyed woman, accompanied by the suggestive tagline: “It’ll blow your mind away.” According to some advertising experts, this ad leaves little to the imagination and should be discontinued due to “distasteful” and unappetizing references to oral sex (Miller, 2009). The image could have been more appropriate. Nevertheless, the overall design of the ad is not as effective as well. The shadow effect coming from the burger looks artificial.

McDonald’s Sundial Billboard

McDonald’s sundial billboard was a very effective and innovative ad. It has the images of all the foods offered by Mcdonald’s during breakfast and lunch. The sun casts a shadow on each item that matches to the time of the day a customer would usually eat it. The numbers that are mentioned under each image represent the time when a customer feels the urge to eat that particular food. The design also consists some thin lines that are connecting the foods to the sumcdonalds10n, which conveys the main message this ad wanted to deliver. The designer used proximity to make all these elements appear as one visual unit, which made the ad more balanced and unified.

A billboard should be very simple, yet informative. Sullivan (1996) advised not to put a lot of words in a billboard, since the audience pass the location very quickly. This billboard does not have heavy texts in it. The core message has been articulated very effectively by the images and the lines only.

As mentioned above, Burger King uses its typical mode of design in its ads. The billboards done by Burger King are no exceptions. It has a big picture of a burger and a lot of texts in it. The company should bring innovation in its billboard designs.

Wendy’s Logo

ScreenSnapz047-620x482Wendy’s changed its logo in 2012. That year the company tried to re-brand itself. The new strategy was to attract millennials. Thus, the new logo has a girl’s image on it. The font that has been used to write ‘Wendy’s’ has its unique tone and expression. The color used in the logo, red, expresses boldness. The designer also used contrast colors. Using the color blue differentiated the new strategy that was intended to deliver by this logo.

caribbeanIn my opinion, Burger King did a good job with their logo. The logo emphasizes on the burger by the buns that sandwich the name of the restaurant. This actually conveys the message about the types of the products offered by Burger King, which means the logo has a clear strategy. Also, the logo is easily recognizable and has its own expression. The designer used three different colors and active white space to make it more effective and appealing.

KFC Mac and Cheese

o-KFC-MAC-AND-CHEESE-BITES-facebookKFC did a great job with its mac and cheese print ad. The designer implemented the movement strategy very effectively in the ad. The mac and cheese coming out from the packet points to the main message directly. He or she repeated the white colors in the texts to connect the dots. Also, the texts are properly aligned. The designer used contrast colors to make the objects of the ad more attractive and eye-catching.

The creative team of Burger King should design an ad using the movement concept. The design of the print ads could be more unified and the typography that they use in the ad should be more aligned. As mentioned above, the company could not bring any innovation in their print ads. It also has some major areas of improvement in its advertising.