“Games are becoming more Web-like, and the Web is becoming more game-like.” This is the point presented in Anne Miles’ article called What Web Designers Can Learn From Video Games, and considering the developments in gaming technology that allow for online access and the improvements in the web’s interactive elements, this insight appears aptly descriptive of the design evolution that is taking place right in front of us.

Elements of gaming are increasingly present in web pages. Take Miles’ example of the format of Yahoo answers. When a user provides the inquisitor with the answer he thinks is best, the user earns credibility points in reward of her “win” that allow for her to access more features within the system. This kind of incentive-driven behavior is helping websites become more engaging and more likely to lead the user down the funnel to the ultimate point of conversion. Below are some more ways sites have integrated (video) gaming elements to improve user experience and create a more intuitive environment for the user.

“In considering game interfaces, a Web designer needs to be acutely conscious of their project’s context and their client’s goals,” says Miles. Unlike video games, efficiency should take precedence over elements of entertainment when creating a successfully functional website. But when it comes to mapping out the layout of a website, the hub-and-spoke approach of video games can be appropriately applicable. Selecting one application that leads to another allows users to focus on one task or chunk of information at a time, making it more comprehensible and organized in their minds. Integrating this kind of layout should also take into consideration the different types of needs from different types of users and build the site out accordingly.

Another engaging element of video games worthy of web integration is the use of customized graphics. In some video games, the loading screen is often designed to match the theme of the game, which continues to keep to the player engaged during the wait. This practice can be transposed to web design by creating functions, pop-up loading screens and 404 pages that visually support the look of the site and keep the user interested.

Video games and websites face a similar challenge in that they both strive to be intuitive and quickly comprehensible. One way video games have been successful in this endeavor is by using different cursors for different functions. For example, some RPG games use a hand when the object it is hovering over can be picked up. This same approach in web design can help guide users to where they can click to continue or hover for more information.

Icons are used heavily throughout video games to quickly communicate different functions. We have seen this same reliance on icons in the development of web applications, and as the line between websites and web applications continues to blur, icons are used increasingly in web design as well. There are often cases where icons and symbols communicate the function much more instantaneously than words. They also make a site more user-friendly and easier to navigate while giving it a cleaner appearance.

When giving a web user options from which to choose, many of the effective layouts in gaming can be applied to make the process more engaging and interactive. Options menus in the form of carousels, sliders menus and context menus can achieve a game-like feel that encourages the user to keep “playing.”

See? Web design really can be all fun and games. In fact, borrowing these ideas from gaming can help make sites more intuitive, more user-friendly and more successful in engaging the user to the point of conversion. Make your site’s goals your users goals, and encourage them to play. It’s a win-win situation.

Recently we came across a documentary being developed and showcased on www.kickstarter.com called “Design & Thinking” and it poses several questions to the Design Thinking approach and the incredible value that design plays in everything we do.

Shyam Patel, our LB Creatologist spoke last week at Ignite Dallas during the Big Design Conference on his approach to Saving the World from Bad Design and the value of design thinking and our current complacency with status quo. 

“Design is not about just making things look better, it’s about making people’s lives better.” 

We need to be conscience that every decision we make impacts the design of our own lives and the world around us.

In the movie trailer it spoke about the idea that “design is not a luxury, it’s a discipline”. We believe that to be true in all that we deliver. Maybe we could even elevate it to Design “doing” because we believe it is an absolute necessity in all our efforts at LB.

If we view the challenges of our society through the lenses of a design problem, the problems become infinitely more approachable and solvable. The industrial age taught us to be system thinkers, but the information age requires us to become design thinkers.  We must stop being passive consumers and creators.  We are not passive witnesses to these problems, we participate in them by the way we choose to design our lives and the work we do.

The industrial age encouraged us to gain a depth of knowledge in one area of expertise; the digital age requires that we supplement that depth of knowledge with a breadth of knowledge. Understanding all dimensions is critical and requires that we think through usability and aesthetics, form and function.

So what is design thinking? Well as I mentioned, design is about making people’s lives better – thinking and doing are about the process we use to ensure that we achieve that goal in whatever we are trying to create. 

Let’s use form design as a great example. It’s amazing how applying design thinking to a form can change the world. Think about default options of a form.  This country suffers from an abysmal savings rate due to over consumption.  By changing the default option on 401(k) plans to be opt out saving rates have been shown to increase to 11% compared to negative savings rates nationally.

That’s design thinking and design doing at its best. We must pledge to be design doers. Saving the World from Bad Design means no more status quo, it means challenging ourselves to ask questions, absorb information and ultimately deliver better end results.

Our LB mantra…

We believe that design is a craft at the intersection of art and science, form and function. It is about more than being creative; inspiration and innovation are its fundamental principles. Design is about having the courage and the audacity to pursue our vision through our work to make the world what it can and should be and not settle for what it is now.

To see Shyam’s presentation for Ignite Dallas, check it out here: http://slidesha.re/oMul4V  

Photo/illustration courtesy of: Emerson College blog post by Nitjyot Saroan

Magento has solved so many problems in the ecommerce world and it is great software out-of-the-box.  However, it presents some interesting challenges when trying to make it work in a team environment.  In fact, because of things like the “base url” stored in the database and the “var” directory that holds the cache and other meta data, using something like SVN requires some changes “under the hood”.  I faced this issue, did some research and found an excellent post by Jools Wills that helped a bit - found here.  His solution is straight-forward and effective, except that it’s two years old at the time of writing.  Magento has changed a bit, as well as the methods he overrides.  Here is my updated solution based on his initial outline.

The first problem to overcome is that the “base url” is stored in the database.  For most team development environments the database is shared and the files are pulled down using SVN or some other version control software and the developers each run their own instance locally.  Since changing the base url in the database would only enable one instance of Magento to work at a time, we need to dive under the hood and make some changes.  We are going to use a server variable provided to us by PHP to establish the base url instead of pulling it from the database.

Making the Base URL Dynamic

First we need our own custom module.  There are many good resources available that explain how to do this.  But for now, we won’t cover that in detail.  We use “LB” as our namespace and “Core” as our module.  You can replace those with whatever you choose, as long as you are consistent.  Any time you see “LB” put your namespace in.  You should use “Core” for your module since we are overriding one portion of the Magento “Core” module.  The first file registers our namespace and module with Magento.

Here is the first file: app/etc/modules/LB_All.xml

<?xml version="1.0"?>
<config>
  <modules>
    <LB_Core>
      <active>true</active>
        <codePool>local</codePool>
      </LB_Core>
  </modules>
</config>

Now that we’ve registered our module for use in Magento we need to override the important method, that being “Mage_Core_Model_Store->getBaseUrl()”.  The following XML file does just that.  Note that you’ll have to create some directories here.  Make sure that if you are using something besides “LB” you create a directory with that name instead of “LB”.

File: app/code/local/LB/Core/etc/config.xml

<?xml version="1.0"?>
<config>
  <global>
    <models>
      <core>
        <rewrite>
          <store>LB_Core_Model_Store</store>
        </rewrite>
      </core>
    </models>
  </global>
</config>

That takes care of configuration.  We are now ready to dive into some PHP code.  We have already told Magento to override the “Mage_Core_Model_Store” class in the configuration, now we just need to add our class.

File: app/code/local/LB/Core/Model/Store.php

<?php
/**
 * We are overriding functionality in Mage_Core_Model_Store
 *
 * @author Life Blue
 */    

class LB_Core_Model_Store extends Mage_Core_Model_Store {
  const USE_DEV_URL = true;
  protected function getDevelopmentUrl($secure) {
    $secure = is_null($secure) ? $this->isCurrentlySecure() : (bool) $secure;
    if ($secure) {
      $url = "http://" . $_SERVER['HTTP_HOST'] . "/";
    } else {
      $url = "http://" . $_SERVER['HTTP_HOST'] . "/";
    }
    return $url;
  }   

  public function getBaseUrl($type=self::URL_TYPE_LINK, $secure=null) {
    $store_code = $this->getCode();
    if (self::USE_DEV_URL != true) {
      $url = parent::getBaseUrl($type, $secure);
    }
    $cacheKey = $type . '/' . (is_null($secure) ? 'null' : ($secure ? 'true' : 'false'));
    if (!isset($this->_baseUrlCache[$cacheKey])) {
      switch ($type) {
        case self::URL_TYPE_WEB:
          $secure = is_null($secure) ? $this->isCurrentlySecure() : (bool) $secure;
          $url = $this->getDevelopmentUrl($secure);
          break;
        case self::URL_TYPE_LINK:
          $secure = (bool) $secure;
          $url = $this->getDevelopmentUrl($secure);
          $url = $this->_updatePathUseRewrites($url);
          $url = $this->_updatePathUseStoreView($url);
          break;   

        case self::URL_TYPE_DIRECT_LINK:
          $secure = (bool) $secure;
          $url = $this->getDevelopmentUrl($secure);
          $url = $this->_updatePathUseRewrites($url);
          break;   

        case self::URL_TYPE_SKIN:
        case self::URL_TYPE_JS:
          $secure = is_null($secure) ? $this->isCurrentlySecure() : (bool) $secure;
          $url = $this->getDevelopmentUrl($secure) . $type . "/";
          break;   

        case self::URL_TYPE_MEDIA:
          $secure = is_null($secure) ? $this->isCurrentlySecure() : (bool) $secure;
          $secureStringFlag = $secure ? 'secure' : 'unsecure';
          $url = $this->getDevelopmentUrl($secure) . $type . "/";
          if (!$this->getConfig(self::XML_PATH_USE_REWRITES)
              && Mage::helper('core/file_storage_database')->checkDbUsage()) {
            $url = $this->getDevelopmentUrl($secure);
            $url = str_replace($urlStart, $urlStart . self::MEDIA_REWRITE_SCRIPT, $url);
          }
          break;   

        default:
          throw Mage::exception('Mage_Core', Mage::helper('core')->__('Invalid base url type'));
      }
      $this->_baseUrlCache[$cacheKey] = rtrim($url, '/') . '/';
    }
    return $this->_baseUrlCache[$cacheKey];
  }
} 

If you look at the “getBaseUrl” method you may notice that it starts out with an “if” statement that indicates that we need to use dynamic base urls. For a production environment all you need to do is set “self::USE_DEV_URL” constant to “false” and the original “getBaseUrl” method is called.
That takes care of the “base url” portion of the problem.  Now we need to address the “var” directory.

Cache and the “var” DIrectory

We will do this by allowing it to be checked out initially, but then ignoring it after that.  We are only going to cover how to do this with Tortoise  SVN.  You’ll have to research other versioning systems and please post comments for other solutions you find!

First you need to push your whole Magento implementation into your repository.  Don’t exclude the “var” directory.  Other people will need to pull that down for Magento to work properly.  If you want, you can clear out the sub-directories within “var” to make things a bit more clean.  If you choose to do so, make sure you know what you are doing.  You can cause things to stop working.  You have been warned.

Once you have done your initial push to SVN it’s time to set the “svn:ignore” property on the “var” directory.  You can do this the hard way and set it using the “properties” utility Tortoise provides, or you can take one or two extra steps that simplifies things as well as making them a bit more but not completely “fool proof”.

1. Export the “var” directory to itself.  In Tortoise, right click the “var” folder and select  “TortoiseSVN > Export .”.
2. You will be presented a dialog asking you where you want to export to.
3. Navigate right back to where the “var” directory lives, such as “C:\xampp\htdocs\magento\var” and export.
4. When it asks you if you want to unversion these files select “Yes”.
5. Now right click the “var” again and select “TortoiseSVN > Export > Add to ignore list > var”.

Now the “var” directory will not commit for two reasons.  First, it is not versioned and will need to be added back in to run a commit.  Second, “var” is set to be ignored when a commit is run.  That means it shouldn’t ask you if you want to add them.

As I said earlier, this is relatively fool proof.  However, you still have to pay attention to make sure the “var” directory does not get included in a commit.  Software such as Netbeans may not respect the “svn:ignore” property like you expect.  However, if you are careful you can just run an update on the whole instance of Magento without fear of getting someone elses “var” contents and goofing up your working copy.

I hope that helps you with your Magento development.  If you have any questions or have some additional suggestions leave some comments