Funky world of Juha

Bizarre and funky world of Juha

Lead UI/UX Developer – Helsinki May 6, 2011

Filed under: CSS,CSS3,Frontend,Jobs,jQuery — juhq @ 9:26 am

Company Description
DealDash – Social Game-Shopping is looking for their Lead UI/UX Developer. DealDash is an extremely fast growing high-tech startup based in Helsinki and Silicon Valley. Our mission is to make shopping fun through our innovative game-like auction model. With currently more than 150,000 registered users in the US and a dozen servers DealDash has a constant need for increasing scalability and performance. With several upcoming patents; innovation and creativity is a key driver in DealDash´s ongoing product development.
Job Description
Create and direct exceptionally great user experience design according to user-centered design principles.
DealDash, a social game-shopping company is looking for an exceptionally brilliant user experience expert. DealDash´s vision is to revolutionize the entertainment shopping market and to become a market leader. In order to do so, DealDash must provide the ultimate user experience for its users. DealDash combines social gaming with e-shopping.
– As UX lead you will be fully responsible for both the web design and user experience by DealDash users.
– You will be responsible for conceptualizing, planning and executing the entire user experience process at DealDash. This includes, user research and analysis, interaction planning, requirements definition, web design work, graphical and front-end HTML/CSS and jQuery.
– Creating project deliverables that clearly and persuasively communicate the UX strategy and the reasoning behind it. These deliverables include: project plans, discovery findings, research protocols, research findings, personas, task lists, workflows, wireframes, page maps, interaction and behavior specifications, and anything else required to describe UX plans and strategies. Creating these deliverables to Method specifications and within described project timeframes.
– Present concepts and facilitate brainstorm sessions.
– Work closely with the developers and other team members at DealDash – advocating for the best design for the end user.
– Staying abreast of industry best practices for UX design and processes, and for any project, gathering sufficient information to support appropriate UX design for the given platform and technology.
– Design graphics for web design, create clean HTML and CSS, jQuery

Qualifications
– Proven experience leading the UX practice on projects.
– An exceptional portfolio showcasing innovative design solutions.
– 7+ years experience designing workflow, interaction and UI for large-scale, web applications (B2C).
– Extreme obsession to detail. You must be able to work very well with both the big picture as well as the nitty-gritty details.
– BA or MA in Interaction Design, Cognitive Science, or HCI, or equivalent experience.
– Expertise in human interface guidelines, standards, and best practices as they apply to platforms.
– Effective communication skills (both in conversation and in writing).
– Ability to work with technology experts to uncover and understand technology requirements and capabilities as they relate to design deliverables.
– Use appropriate software (e.g., Adobe InDesign and Adobe Illustrator or OminGraffle) to create professional-quality, well-designed deliverables, to Method specifications.

Additional plus:
– Understand game mechanics and what brings fun and excitement into social gaming applications.

Why you should join?
DealDash is run by a small team of passionate, driven entrepreneurs with a vision to transform, grow and become the US market leader in social game-shopping. We are venture capital backed and based in Helsinki, Finland and Sunnyvale, California.
If you are driven, committed to excellence and obsessed about details then we are looking for you.
If you want to create the next-gen platform for game-shopping then we are looking for you.
Location
Development team is based in Helsinki, Finland. Work can be done remotely
Compensation
Salary and potential for early stage equity through stock options.

Apply here!
http://bit.ly/lHG2Et

Advertisements
 

Simple image preloading using jQuery September 9, 2010

Filed under: jQuery — juhq @ 12:43 pm

Preloading images (and why not other contents too) with jQuery is pretty simple and easy.

function preloadImage(url) {
 $("<img />").load().attr("src", url);
}

What this function does, is that it loads given image in the background, so when you want to show the image, user already has it in the browser cache.

Usage of this example function is simple as this:


preloadImage("http://jazzdad.files.wordpress.com/2009/11/koala.jpg");

 

How to track user behavior August 17, 2010

Filed under: jQuery — juhq @ 7:19 am

User behavior tracking is quite simple with little help from our friend jQuery.

$("a").live("click", function(event) {
      var $this = $(this);
      var url = $this.attr("href");
      var text = $this.text();
      var color = $this.css("color");
      $.ajax({
           url: "saveClick.php",
           data: {url: url, color: color, text: text},
           success: function() {
                window.location = url;
           }
      });
      event.preventDefault();
});

What does this do?
It will do an ajax call everytime when user clicks some link on your page, so you’ll be able to track which links are performing well and which are not.

Add this snippet to your javascript and then just make some backend script that will save all the clicks for you.
This should help you find what links with what color and text gets the most hits, so you’ll be able to optimize your links.

It’s really easy to track whatever from your links, I used text and color in this example. The url will be the unique separator in the backend.

If you are wondering what $this is and why am I using it in this example, you should read this article by Sean Koole

Edit: The codesnippet should be working properly now, thanks Sean for the fix!

Whenever you click a link on a website, which redirects out of that page, all ajax-queries will stop. So in order to save click with ajax, we need first to do the ajax-call and redirect after this is done.

This will make some of the links littlebit slower, as it needs to do the ajax call before redirecting to a new page.

 

Google AJAX Search with jQuery August 3, 2010

Filed under: Google,jQuery — juhq @ 8:12 am

This is just a simple and quick(!) jQuery implementation of http://davidwalsh.name/google-ajax-search

It’s not perfect, but seems to work.

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
<!-- HTML5 SEARCH BOX!  -->
<input type="search" id="search-box" name="q" results="5" autocomplete="on" />
<!-- SEARCH BUTTON -->
<input id="search-submit" type="submit" value="Search" />
<div id="search-area" style="position:relative;">
<div id="search-results">
<div id="search-results-pointer"></div>
<div id="search-results-content"></div>
</div>
</div>

</form>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY_GOES_HERE"></script>
<script type="text/javascript">
google.load("search","1");
google.load("jquery", 1.4.2);

function googlesearch() {
	if(typeof(searchLoaded) == "undefined") {
		var searchLoaded = true; // set searchLoaded to "true"; no more loading!

		var searchBox = $("input#search-box");

		// google interaction
		var search = new google.search.WebSearch(),
		control = new google.search.SearchControl(),
		options = new google.search.DrawOptions();

		// set google options
		options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
		options.setInput(searchBox);

		// set search options
		search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

		// set search controls
		control.addSearcher(search);
		control.draw(document.getElementById("search-results-content"),options);
		control.setNoResultsString("No results were found.");

		// add listeners to search box
		searchBox.bind("keydown", function() {
			var value = searchBox.val();
			if(value) {
				control.execute(value);
			}
		});
	}
}
google.setOnLoadCallback(googlesearch);
</script>