Complexity for Simplicity's Sake

Judging a Book by its Cover

What is the benefit of having a well put together UI for a program or site? Front end development can give form and shape to code written on the back end of projects. As much of a cliche the notion of first impressions are, they still have a major impact on consumers and customers. By developing well created UI designs, content can be more enganging, more accessible, and just plainly more interesting. There is a limit however. More is not always better when it comes to elements of a website.

Above we see a comparison between two different UI designs. Ling’s website is used for the sale of used cars. There are many animated elements present on the website. Furthermore, the background is extremely eye catching and the numerous links present more than likely detract from the user’s ability to navigate the website correctly and efficiently. The wow factor of this design is more of a negative than a positive. When we take a look at Master Dynamic’s website for professional and luxury headphones, there are noticeable differences. Immediately missing are the flashing animated elements. The website overall is more sleek in design partly due to the single high quality background image and is complimented by the minimalist selection of elements. A proper use of UI elements can lead a website to not only look more professional but also have increased functionality for users.

Different Approaches to the Same Task

A combination of HTML and CSS together is more than equipped to handle any front end work a project requires, but is there a better option? UI Frameworks like Semantic UI offer an alternative way to structure front end work. To better understand the difference between the two we can examine how the two accomplish a menu bar at the top of a website.

HTML Code:

<div id="navbar">
<ul>
  <li><a href="https://docs.google.com/document/d/14qTjKdnAviPcuFimbtG37Fm42NmgrkSpW9dHoV5VK1o/edit?usp=sharing">Introduction</a></li>
  <li><a href="https://docs.google.com/document/d/1vRdcV1x-PemcMv3XRickuyeuRjXHkMxgRBBYqYBNcdA/edit?usp=sharing">Internet Explorer</a></li>
  <li><a href="https://docs.google.com/document/d/1K3j5HwVhhDmmz63QxDxUNsf3ZjM7eEPuOS-Fj2InnTA/edit?usp=sharing">Firefox</a></li>
  <li><a href="https://docs.google.com/document/d/1JFEs2_Wd8F2TsbBfhhzPALWIRTACoeOzCRtBIpRgbbs/edit?usp=sharing">Chrome</a></li>
</ul></div>

Semantic UI Code:

<div class="ui fixed top inverted four item menu" id="navbar">
     <a class="item" href="https://docs.google.com/document/d/14qTjKdnAviPcuFimbtG37Fm42NmgrkSpW9dHoV5VK1o/edit?usp=sharing">Introduction</a>
      <a class="item" href="https://docs.google.com/document/d/1vRdcV1x-PemcMv3XRickuyeuRjXHkMxgRBBYqYBNcdA/edit?usp=sharing">Internet Explorer</a>
      <a class="item" href="https://docs.google.com/document/d/1K3j5HwVhhDmmz63QxDxUNsf3ZjM7eEPuOS-Fj2InnTA/edit?usp=sharing">Firefox</a>
      <a class="item" href="https://docs.google.com/document/d/1JFEs2_Wd8F2TsbBfhhzPALWIRTACoeOzCRtBIpRgbbs/edit?usp=sharing">Chrome</a>
    </div>

In overall structure and size these two seem almost exactly the same. Why then would one prefer one to the other. In Semantic UI, as class attributes are used, they give a more descriptive picture of what the designation of code will be for or can do. In the HTML example, the id tag tells us that it will be a navbar, which is useful but not exhaustively descriptive. The ordered list and list item combination structure tells us what will be inside. In the Semantic UI example, we are told that it will be at the “top” and we are told that there are “four” items. Furthermore, a designation of “menu” is given. Each element in the menu is given a class of “item.” In summary, Semantic UI paints a much clearer and descriptive picture.

Is it Worth it?

Descriptive programming could be a benifit, but it could also be argued that Semantic UI adds more complexity to front end development. On top of rudimentary HTML and CSS, one has to learn new Semantic UI specific tags and descriptive words. Does the descriptive positive invite more trouble than its worth? In my opinion, the descriptive nature is benifit that trumps any added complexity. A huge difficulty in programming is understanding what code does a first glance. There are fundamental practices and rules put into place to avoid confusion (e.g. variable naming standards, commenting, method headers, etc.). However, HTML and CSS in conjuction with the style of Semantic UI usage makes it becomes even clearer. For someone like myself that is relatively inexperienced with HTML and CSS, the addition of learning Semantic UI has not proved terribly difficult and has been a great boon instead. I would understand, however how for an experienced front end developer, adding what amounts to an entirely new language could prove confusing and possibly redundant. In the end, I believe the benefits of Semantic UI outweigh the negatives associated with including it.