Home

 

With so many different ecommerce options available, there tends to be a lot of competition.  “Global ecommerce sales passed $1 trillion in 2012 for the first time ever, fueled by growth in North America and the Asia-Pacific region, according to a new report from eMarketer. North American sales increased 13.9% year-over-year to about $365 billion and Asia-Pacific sales increased by 33% to about $332 billion”(Mashable).  Many ecommerce websites have to impress their users at every chance they get, and the best chance they have is through the website’s interface.  But what happens when there is a technology shift and they have to start designing for other platforms such as smartphones and tablets?  The attention isn’t being placed on the desktop site as much anymore, but the other mobile experiences.  This could be a potential problem because when your mobile website is outstanding, the desktop website shouldn’t just be sub-par.

Interface: The Basics and What Makes it Successful

Creating a website is much more than what they just think looks good, it is a process that takes research.  “Good web design goes well beyond evidence of a plan-good web design is an experience for the user.  The best web design creates an environment where users feel they have just enough control over the experience that they feel empowered, but not so much control that they feel overwhelmed” (Miller, 24).  There are many details that go into making a website, but there are three that are most important: navigation, purpose, and content.  These three factors are what make up a website’s usability, if one is isn’t quite right it can throw off the whole site.

Websites aren’t just accessible through the desktop computer anymore.  We have smartphones, tablets, laptops, and new technologies that are always being created.  This makes the topic of website design more interesting because there are many options for displaying them now.  The design needs to be consistent throughout all platforms so users aren’t confused by completely different designs.  No matter what direction the designs of any of these take, the most important part for the user is its usability.  “Usability is about the user.  Usability is directly related to the experience a user has with a site- the better the usability, the better the experience is likely to be” (Miller,173).

Getting Around

Navigation gets you from one place to the next, and a lot of thought should go into what kinds of navigation will make it easier for users, as well as make the website have a better flow.  Users need to be able to find content easily instead of searching all over the web page, sometimes getting lost in their topic of interest.  “Once inside an I-Market, the potential customer must be free to browse. The catalog of goods and services must be extremely easy to navigate, letting the shopper browse just the aisles of greatest interest without having to go through an entire catalog” (Fingar).

A study was done by Carlos Maldonado and Marc Jesnick at the University of Florida concerning two navigation styles: hierarchies and breadcrumbs.  Expanding hierarchies are used to show users both where they are within the site and other places they can go.  Breadcrumbs show all of the direct categories they have been within the site’s hierarchy of the user’s certain location. “The results of this study provide guidance for web site designers in two directions.  Specifically, the study provides guidance about the effects of two navigation design patterns on the performance of users who were previously unfamiliar with the ecommerce website, but who were experienced at using the Internet and shopping online in general.  The results show that expanding hierarchies degrades performance…..Breadcrumbs seemed to have a moderately positive effect” (Maldonado, 1316).

This study shows that users unfamiliar with a shopping site that breadcrumbs make it easier for them to get where they needed to be faster and with less errors.  This could be mainly because breadcrumbs work more like a “back” button.  People like to backtrack to where they have previously been. Breadcrumbs make this easier, simply relying on hierarchies results in more clicks, making backtracking one’s path harder to do.  The best piece of advice one can follow when considering navigation for a website is that “it’s critical that users be able to find the appropriate navigation area effortlessly, differentiate between the choices, and have a good sense of what lies beneath the links” (Nielsen, 19).

Screen Shot 2013-04-09 at 10.21.09 AM

Figure 1: Nasty Gal gives too many navigation options, while breadcrumbs are the smallest unit

When taking the earlier study into consideration, it could back a possible argument that mobile sites can be easier to use.  This is because many of them leave out the hierarchies all together, just leaving the breadcrumbs for the user.  The mobile site gives the user one option in navigation, which can be looked at as good or bad, but overall they don’t have to choose between two different navigation systems that could result in getting lost.  A company that makes successful use of breadcrumbs on their mobile site is Nastygal.com.  Nasty Gal is a clothing website who’s mobile site is easy to use simply because of their use of the breadcrumb style (Figure 7.)  On the other hand, their desktop website utilizes both, as you can see in Figure 1.  On their desktop site the breadcrumbs tend to get lost among all of the other navigation systems; they have a hierarchy on the left hand side and a navigation menu at the top.  It just adds unnecessary choices for the user.

Why Are You Here?

The objective of the website is an important consideration.  This is one of the most important aspects because you wouldn’t want users on your website wondering what it is you sell or do.  It needs to be clear on the main page.  “It must communicate in one short glance where users are, what your company does, and what users can do at your site” (Nielsen, 10).  This is truly important for ecommerce websites, because their main purpose is too sell their products.

If the user doesn’t know what they’re selling or why, then all translation is lost between the company and the user.  Returning to Nasty Gal, their website does a good job of showing its purpose from its home screen.  When scrolling down the homepage you can immediately tell that they are a clothing store for young adult women.

Figure 2

Figure 2

When comparing the mobile site to the desktop site, the mobile site does a better job, mainly because at the top of the web browser it is titled “Nasty Gal- New & Vintage Clothing” (Figure 2) whereas on the desktop’s browser it just reads “Nasty Gal.”  The desktop site should have this information displayed for users if it is displayed on the mobile site.  The message should be kept consistent.

What’s Inside

You most definitely wouldn’t have a website without content.  Content is what gives the website substance and structure.  Content is very important to ecommerce, because it needs to ultimately sell.  It is not just what a company is selling, but anything that will help sell a product.  For example, on clothing sites, it is not just the clothing, shoes or accessories that make up the content.  It is anything that would potentially help that product sell.  That means descriptions need to be detailed and concise, pictures and videos need to be clear, and reviews should be accurate.  All of these factors contribute to a good user experience, even if they may not by the product, they might always come back if they consider the content reliable.

Providing content examples on the homepage is also important.  “Showing examples of your site’s content on the homepage helps users in many ways.  First, example content can help instantly communicate what the site is all about, so users know whether they are on the right site for their needs.  Second, examples can reveal the breadth of products or content offered at your site” (Nielsen, 16).  The issue with content examples is that they largely differ between desktop to mobile sites.  This is were mobile sites can be lacking compared to the desktop sites; they can’t fit a lot of content in a smaller space.

Figure 3

Figure 3: Slideshow on Nasty Gal’s homepage

Screen Shot 2013-04-09 at 3.22.22 PM

Figure 4: Bottom half of Nasty Gal’s homepage

Nasty Gal has a lot of elements on their desktop homepage (Figure 3 & 4), but is more condensed on their mobile site.  Both can work, but there should be a consistency between the two.  Nasty Gal keeps a consistency by providing a slideshow on each site (Notice Figure 2 & 3).  Overall, the mobile site has less content examples, but is more organized.

The content that is used could either make or break the success and usability of a website.  Good content helps the user and should ultimately lead to sales.  It also leads to users wanting to come back because they know they can get the most out of that site’s content compared to some other website.  Too many elements can lead the user into being unclear about the purpose of the website itself.  This is going to drive users away and lead to an unsuccessful site.

Alloy.com is a website that has made itself more than a shopping site for young girls, it includes entertainment, quizzes, contests, and much more.  “One look at Alloy.com and you know it is a content site.  With gossip, entertainment, movies and more sitting front and center, you actually might not guess that Alloy sells hundreds of millions of dollars in merchandise.” (Scott, 25).  Alloy is an example in which I would consider it to have almost too much content (Figure 5).

Figure 5: Alloy's desktop site

Figure 5: Alloy’s desktop site

Figure 6: What Alloy's website looks like on a mobile device

Figure 6: What Alloy’s website looks like on a mobile device

 

 

 

 

 

 

 

In their case, the mobile site (Figure 6) is just as bad as it is desktop site because they do not have a site made specially for mobile yet. This is a problem in itself because they aren’t just not keeping up with the desktop site, they are completely ignoring the need for a mobile one.  The desktop site does not work at all with the mobile platform, and it barely works for the desktop.

Mobile vs Desktop: Which Promotes Better User Involvement?

The mobile phone has become somewhat an extension of ourselves, because we always have them on us or close by.  This can lead companies to put more effort into the mobile phone’s website rather than the desktop site.  There are less components that have to be considered when designing a mobile phone site, because the space is smaller.

Another reason ecommerce desktop sites can lag behind is for the reason that companies don’t always keep the user in mind when creating the site.  Julian Sanchez and Marc L. Resnick performed a study looking at the differences between user- centered and company- centered perspectives in the design of ecommerce websites.  The study investigated the differences in web site design when the organization and labeling system are designed using either the user- centered or company- centered method.  For the first part of the procedure, participants were given 36 products and were asked to group them together based on similarity and then create a label for each category.  The results showed that “given a set of products, participants organized them according to the typical goals that would be expected of an individual shopping for products rather than according to the inventory or SKU classification systems typical of most companies” (Resnick, 1177-78).

This study also experimented with labeling. Two sets of labels were created, one for each site structure.  Each set contained up to eleven possible labels for six categories.  The labels given by the participants on the organizational card sort were included, in addition to others that were collected through gauging existing health store web sites.  “The results indicate that there are categorically different levels at which a label matches the set of products it represents.  The quality of this match can be maximized by using user- centered techniques to create the labels.  It is unfortunate that the labels obtained by benchmarking existing sites did poorly.  This suggests that many companies are not using user- centered techniques when designing their sites….The results also show that even when user- centered methods are not used to organize site contents, using user- centered methods to develop labels can still improve the site design” (Resnick, 1179).

What it Means

Overall, this study reveals that there can be major differences between the ways a user- centered web site is designed and a company- centered web site is designed.  Users tend to organize and label according to goals or similarities, while companies organize more by product codes.  Even though this study mostly focuses on the labeling and organization, those are big factors when talking about design.  This issue can make mobile sites more favorable.  Most mobile ecommerce websites are easily organized like Figure 7.

Figure 7: Nasty Gal's mobile website is nicely organized with use of breadcrumbs

Figure 7: Nasty Gal’s mobile website is well organized.  Also shows the previously discussed use of breadcrumbs as their only navigation.

All of the categories are easily locatable, and that makes getting to the product easier, whereas desktop ecommerce sites can have many paths to one product.  Creating too many paths can make the usability more difficult.

One thing that companies have at their advantage today is social media.  The brand doesn’t stop on the desktop or mobile website, it travels across several different platforms through social media.  This is a great way to get users involved and get them talking on what they think about the brand’s content.  “The potential for ecommerce information sharing makes these social networking sites of interest to marketers, advertisers and others in the commercial area, although certainly the information sharing potential of SNSs is of interest to many domains” (Jansen, 122).  This is also favorable for mobile ecommerce sites.  With the creation of Twitter, Instagram, and Pinterest (all highly mobile- based), individuals can be on these applications on their mobile phone and can be taken directly to a website through posted links.  “Together, social media channels and your website should work seamlessly to promote your online brand” (Woodrow).  This makes the need even larger for well designed mobile websites, especially when incorporating social media content.  This is another way mobile designs can overshadow desktop designs.

Responsive Web Design & Mobile First

One thing that could possibly create an equality between the desktop and mobile experience is responsive web design (RWD) and mobile first responsive design.  “RWD involves designing a website in a manner where the layout changes according to the user’s behaviour and context – based on screen size, orientation and platform.  RWD eliminates the need for separate phases of work to design across the plethora of devices available now and in the future”(Designing for Multiple Devices).  Responsive web design has become key for many websites as the internet has become available through all of these different devices.  A website recently utilizing RWD is Mashable.com (Figure 8).  In a December 2012 article they state, “Meanwhile, the shift to mobile is happening at an extraordinary speed. Today, 30% of Mashable’s traffic is mobile. By the end of next year, this may exceed 50%.  For those of us who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them” (Cashmore).

Figure 8: Mashable's new design which utilizes RWD

Figure 8: Mashable’s new design which utilizes RWD

The idea of mobile first responsive design is also becoming popular.  “This flips the standard practice of designing for the desktop experience first and focuses on the mobile site in the first instance, progressively enhancing the experience for larger screen displays. At its core, the mobile first concept boils down to tried and true best practice usability standards – in other words, it forces us to focus on core content, functionality and cater to our user goals” (Designing for Multiple Devices).  This type of design can support the argument that mobile site designs are surpassing that of desktop sites since it focuses mobile design first then carrying it over to the larger-screened desktop site.

Throughout this paper I have highlighted certain instances which support the argument that mobile websites are currently surpassing those of desktop websites.  The designs are becoming a more important focus because of the larger traffic flow through the mobile phone or other devices, such as tablets.  The fact the there are so many mobile phone users now takes company’s attention off of the well- known desktop, to try and design for something new and more innovative.  The answer to fixing this could possibly lie within the ideas of RWD or mobile first design in order to bring both to the same level of usability.  If companies do not pay enough attention to their desktop websites, they could loose a large percentage of traffic, and later, profits from the customers who are desktop- based shoppers.

Works Cited

“Designing for Multiple Devices.” Home. Issue 28. N.p., n.d. Web. 30 Mar. 2013.

Cashmore, Pete. “Why 2013 Is the Year of Responsive Web Design.” Mashable. N.p., 11 Dec. 2012. Web. 30 Mar. 2013.

Fiegerman, Seth. “Ecommerce Sales Topped $1 Trillion Worldwide in 2012.” Mashable. N.p., 05 Feb. 2013. Web. 20 Mar. 2013. http://mashable.com/2013/02/05/ecommerce-sales-top-1-trillion-worldwide/

Fingar, Peter, Kumar, Harsha, Sharma, Tarun.  “21st Century Markets: From places to spaces.”  First Monday, Dec 2011; vol. 4: no. 12.

Jansen, Bernard J., Sobel, Kate, Cook, Geoff.  “Classifying ecommerce information sharing behaviour by youths on social networking sites.” Journal of Information Science, Apr 2011; vol. 37: pp. 120-136.

Maldonado, Carlos A., Jesnick, Marc L. “Do Common User Interface Design Patterns Improve Navigation?” Reviews of Human Factors and Ergonomics, Sep 2002; vol. 46: pp. 1315-1319.

Miller, Brian G. Above the Fold: Understanding the Principles of Successful Web Site Design. Cincinnati, OH: How, 2011. Print.

Nielsen, Jakob, and Marie Tahir. Homepage Usability: 50 Websites Deconstructed. [Indianapolis, IN]: New Riders, 2002. Print.

Resnick, Marc L, Sanchez, Julian. “Differences between User-Centered and Company-Centered Perspectives in the Design of Ecommerce Web Sites.” Reviews of Human Factors and Ergonomics, Oct 2001; vol. 45: pp. 1176-1180.

Scott, David Meerman. Cashing in with Content: How Innovative Marketers Use Digital Information to Turn Browsers into Buyers. Medford, NJ: Information Today/CyberAge, 2005. Print.

Woodrow, Mallory. “9 Tips for Integrating Social Media on Your Website.” Social Media Examiner RSS. N.p., 25 Jan. 2012. Web. 27 Mar. 2013.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s