How to be a UI Engineer

I recently got an email from a student at the University of Michigan School of Information — my alma mater — wanting to know how to get a UI Engineer job. My gut reaction was to feel sorry for this person because nobody should be taking “work tips” from me, the self-proclaimed Chief Distraction Officer of my workplace.

the letter


I am a first year Graduate Student at the School of Information, University of Michigan and found you on SI’s alumni network. I found your name and job title in the Student-Alumni Network database at SI, and am interested to learn about your career path — how you got to where you are today. I would also appreciate any kind of advice from you on the types of skills and experiences I should acquire while in school to make me more marketable when I graduate.

Also, I am currently looking for HCI (Human Computer Interaction) related internships for this summer and was wondering if you may know about any such opportunities at your organization.

my response

Most UI engineers I know started with strong knowledge of HTML and CSS. I started as an HTML developer. As an HTML developer you get mockups from a designer and make static HTML files that look like the mockups. Then you pass those to engineers.

As a UI engineer now I receive mockups and turn them into dynamic functioning pages with business logic. I also do a little bit of interaction design and UI design because I work at a small company.

I principally do 5 things in my job:

HTML and CSS

Turn a UI mockup into real HTML without using tables. The page should look the same in IE6, IE7, Firefox, and optionally Safari. If you can do that you are in good shape.

Templating:

Learn to use one templating language and the others will be easy to learn. Common templating languages are Smarty for PHP, Ruby on Rails, JSP, or ASP. A great way to understand templating is to customize a WordPress blog or a Blogger blog. Or, you can make a homemade project on your SI web space using Smarty. Ruby on Rails is very popular.

javascript and AJAX:

learn to use the javascript frameworks out there to make your life easier. It also shows potential employers that you are smart enough not to re-invent the wheel. Common frameworks are Prototype, script.aculo.us, MochiKit, or Yahoo! javascript library.

javascript APIs

as part of (3) learn how to use other company’s APIs and services. For example I have to do a lot of stuff with Google Maps API. Knowing how to use an API is good.

Programming:

Typically you need to program some business logic for a page. Big companies use Java or .NET. Many internet companies use PHP (yahoo, facebook), or Python (Google). Many startups use Ruby on Rails. SQL knowledge is frequently useful.

SEO:

Have basic knowledge of Search Engine Optimization tactics.

Using MochiKit doXHR with POST

This is a followup to my old post Using MochiKit doXHR using POST instead of GET.

The data that you send back in your controller will be stored in the Deferred object that gets returned. Look in the responseText field of the object.

var d = doXHR(url, 
   { method:‘POST’, 
     sendContent:qry, 
headers:{"Content-Type":"application/x-www-form-urlencoded"}
   });

The headers piece was the critical for the POST to work on my configuration.

Setup Google Website optimizer A/B testing for pages behind a login

I’m trying to setup some A/B testing for work using Google’s website optimizer (a free part of AdWords).

Since the pages that I want to A/B test are behind a login I get stuck at the page “A/B Experiment Set-up: Install and Validate JavaScript Tags”. The Website optimizer application requires you to validate each of your testing pages through its interface. However, Website optimizer cannot validate private pages or anything behind a login. The Google instructions say that you can choose to “opt out of validation” but I could not find the instructions or the options to avoid the validation process.

A quick search shows that I can circumvent Website Optimizer’s validation process simply by putting out publicly accessible dummy pages that contain the javascript codes that the Website Optimizer wants me to have on my actual pages.

http://www.prusak.com/archives/2007-10-09/google-optimizer-ab-test-with-...

follow up 3/4/2007

This method doesn’t work for me because we have a web application deployment process that won’t let me fake out the URL. Looks like I may have to use the Website Optimizer multivariate testing method to tweak my pages.

Syndicate content