Archive for the ‘ user-interface design ’ Category

Using Google Analytics

Since the incarnation of Web 2.0, the Web has become not only a vast collection of resources for information on just about any topic you can imagine – it is now a wide-spread social phenomenon with great potential for designers, small business owners and content creators alike! A good idea on the web can *and does* –spread like wild fire!

How can you, as a designer, ensure that your site not only stands out among the myriad of websites on the Web, but also know how your site is being used? To understand how your site is fairing on the Web, you can track and measure your website’s performance with Google Analytics! The trick is to be smart about how you design your site from the get-go, and to market it effectively through social media networks. Once you have done those two things, you can monitor your site’s performance with Google Analytics. Here’s how:

According to ‘The Missing Google Analytics Manual‘, there are four components to effectively market your website:

  1. Attraction: How do you attract users to your web site?
  2. Retention: How do you hold your users’ attention and keep their interest within the site?
  3. Conversion: How do you convert a users’ actions into transactions?
  4. Measurement: How do you measure your website’s performance, including traffic, referrals, most popular content, and so on  … ?

First, create an account with Google Analytics. Once you have done this, it will generate a unique code identifier that looks like this bogus account: XY-1234567-8. Now you can add a tiny <snippit of js code> called Google Analytics Tracking Code (GATC) to your site to begin tracking, so you can record and monitor your site’s performance.

To include basic Google Analytics code within the pages of your website, paste the following javascript into your website. This code consists of two parts: ‘a script tag that references the ga.js tracking code, and another script that executes the tracking code.’ (For more advanced Google Analytics functionality, visit GATC’s code manual, to learn how to tweek the code for your site. But note that you should know how to code, in order to use this site.)

For the first part of code to reference the tracking code, copy and paste the code below into the web pages of your site that you wish to track:

<script src='http://www.google-analytics.com/ga.js' type='text/javascript'> OR

<script src='https://ssl.google-analytics.com/ga.js' type='text/javascript'> (for a secure page connection)

And now for the second part, to execute the tracking code, copy and paste the snippit of code below:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>

Once you have plugged the necessary code for Google Analytics to track your site’s performance, it should begin tracking.

To see how your site is doing, login to Google Analytics and click, ‘View report’ for your website’s profile. Once you have done this, Google Analytics will show you a dashboard with your site’s informatics.

Understanding the Google Analytics Interface:

Google Analytics screenshot of a bogus website

The Google Analytics Dashboard is made up of the following widgets:

  • a Calendar with a line graph representing the time line specified
  • Site Usage , including how many visitors and pages were viewed on the site
  • a Visitors Overview, including technical information about what browser and connection speed visitors used to view the website
  • a Map Overlay, representing where visitors accessed the website from. (You can drill down from country to city, for more specific information about your visitors’ location.)
  • Traffic Sources Overview, with a pie graph representing the per centage of visitors who found your website via a Search Engine, or a Referring Site or through Direct Traffic.
  • Content Overview (what content visitors access within the site)
  • Direct Traffic

more to come soon …

Advertisements

MIT: Museum + Media Lab

MIT Museum

I visited the MIT Museum in November, 2008 and was blown away by what I saw! Their creative use of technology was truly inspiring! It was not *just* technology, it was art!
Working at the intersection of art, science and technology –you can’t help but feel like you’re in a digital renaissance at a technophile mecca!

During my visit, I shot some photos including this hologram of Keith Haring.

MIT Media Lab

Founded by Nicolas Negroponte and Jerome Wiesner in 1985, MIT’s Media lab is a leader of innovation in technology.

For Negroponte, “Innovation comes from differences. Lateral thinking is key, because ‘incrementalism’ is the enemy of creativity. By juxtaposing people from very different backgrounds, new ideas are bound to emerge.”

Similarly, Wiesner believed, “we cannot hope to solve the problems facing us without a greater understanding of the modern world, based on the integration of knowledge.”

MIT Lab’s philosophy is to inspire the innovative use of technologies through passion and creativity that aims to help people. It fosters a “unique culture of learning by doing, developing technologies that empower people of all ages, from all walks of life, in all societies, to design and invent new possibilities for themselves and their communities.”

The One Laptop per Child is just one of so many amazing and inspiring projects, born of MIT’s Media Lab! –Now that’s technology with heart!

MIT Media Lab
Media Lab’s demos and downloads

References:

Negroponte on innovation and the MIT Media Lab. Momentum, MIT Media Lab

The MIT’s Encyclopedia of Cognitive Science, by Robert A. Wilson, Frank C. Keil is a great resource for anyone interested in HCI design!

The Etymology of Design: Pre-Socratic Perspective, by Kostas Terzidi, MIT Press, 2007

Designing for the screen

Resolution

iPod

Blackberry

Monitor

  • Gamma

Using Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is the formatting language that controls the ‘look and feel’ of web documents. The word, ‘Cascading’ refers to the way that CSS applies one style on top of another. It allows users to apply a style to multiple elements, documents or even to other styles. You can also apply multiple styles or a set of styles to a single document.

Basically, CSS allows users to separate style from content, allowing designers greater control over the display and output. Although it’s not technically a layout language, it gives a lot more control over the look and feel, including the layout, use of fonts and colours of a website.

CSS are a collection of formatting rules typically stored in a separate CSS document, that apply to “HTML, XHTML or PHP” files of a web site. However, styles can also be stored within the ‘head’ of a web document, or applied as an inline attribute of page elements. Depending on where styles are located, styles can over-write other styles when conflicts occur. So ‘Cascading’ refers to the order in which styles are applied and/ or over-written.

CSS also allows for modular design and can therefore, control how a document looks on-screen, in print and on hand-held devices. With increasing use of mobile devices, CSS is a powerful tool that allows for customization for different output devices.

Overall, CSS is a smart, efficient and accessible way of designing and developing websites.

Here are just a few of many great resources for learning CSS:

For inspiration, visit:

White space in design (Use of negative space)

User-interface design (On layout)

Wireframes

Grids

Mockups

Prototypes

Yale Style Guide 3

The Yale Style Guide was the first online guide for web designers. Now in it’s third incarnation, it’s still an excellent resource!