Social Media, Web Design

Designing For The Social Web – Interested

September 14th, 2011 by Matt Haff

The Five Stages of the Usage Lifecycle

1. Unaware
2. Interested
3. First-time Use
4. Regular Use
5. Passionate Use

People-Powered Research

Once people find out about your product and they become interested, they will have questions and are ready for you to tell them what they want to hear. Pay close attention here, while people want you to answer their questions, they do not want to hear you tell them how great your product is.

People don’t care about what you have to say about your product. Customer reviews allow people to learn about a product from the experience of others without any potentially biased seller information. When people are uncertain, they rely on social connections to help them out and usually compare themselves to those in their social group, not to society at large.

What Interests The User?

There are three general steps to consider when creating your web app.

Focus on the primary Activity - The first question you must answer is: What is your audience doing? Only one activity is primary, think about apps that you use daily, the ones you rely on the most. The most successful ones are focused applications that support one specific activity. The applications people find most compelling allow them to excel at a single activity. Ask yourself “What do people have to do in order for us to be successful?”

Identify your social Objects - Once you’ve got the activity down, you have to identify the objects that people interact with while doing that activity. What are the objects that you share with other people: photos, videos, music, blogs, messages? Give the social objects a URL. URLs make them easy to share, find, and allow people to link directly to them.

Choose your core Feature set - From the activity and objects you can derive a core feature set. Focus on the features that make the primary activity easier and the social objects more apparent. Each feature means more complexity, so learn to say no. Innovation is not about saying yes to everything. It’s about saying NO to all but the most crucial features.

The Sign-up Hurdle

You’ve made the user aware, answered all of their questions and built a great app that is useful, now what? Now is the trickiest part of all, get the user to sign up.

• The first, and lasting impression. If you lose someone in this initial transaction, they’re very unlikely to return, having convinced themselves that your app isn’t worth using.
• All questions, few answers. At this stage people have the most questions, and in answering you can use the opportunity to tell your story.
• Potential to kinetic energy. At this stage people are getting ready to take their first actual steps in using your app.
• Critical Choice. The user is choosing to either start a relationship with you or have it with someone else.

 

 

 

Social Media, Web Design

Designing For The Social Web – Unaware

September 9th, 2011 by Matt Haff

This will be a five part series based on the five stages of the usage lifecycle.

I first picked up this book about a year ago and it’s been in my stack of meaning to get through books. I’m very odd when it comes to reading, I seldom read just one book at a time, it usually takes me months to make it all the way through just one book. Anyways, here is some food for thought and some neat bits I pulled from this book.

The Five Stages of the Usage Lifecycle

1. Unaware
2. Interested
3. First-time Use
4. Regular Use
5. Passionate Use

Raising Awareness

Supposedly the average person sees 500-3000 ads per day. Even if you have the best product/service in the world it won’t matter if people don’t know about it. How do we raise awareness on our product/service when people are constantly bombarded with advertising?

We need to be efficient at allocating our attention. In other words, we need to pay attention to what matters, and try to ignore what doesn’t. Addressing the user’s biggest pain points and telling an authentic story is crucial to getting their attention. Your biggest concern should be telling an authentic story.

Customer service is the new marketing

Because we are now in a era where social media is the leader of marketing, your customer service is more important than ever. It is crucial to react positively to negative feedback. If the user says your product stinks, don’t ignore them, hear them out and find out why it stinks.

The value of authentic conversation is you create happier people. Users recognize that you care when you have authentic conversations with them. You also gain awareness and interest in your software from satisfied customers spreading the word. When you have conversations with people you will be able to create a better product, by having a much better sense of what’s going on. You’re able to gather much more information to inform your design. When you meet a passionate user it will be hard keeping up with all their feedback! Users will become co-inventors, sharing ideas and helping you develop your product.

Some steps to authenticity:

• Don’t wait for conversation: initiate it.
• Publish the real story of your company/organization
• Listen, internalize, and respond thoughtfully
• Help people learn about you at their own pace.
• Make feedback a top priority
• Make authentic conversation a part of the culture
• Anticipate and act on change

reMIX South, Web Design

The HTML5 Canvas and Friends (with jokes)

August 6th, 2011 by Matt Haff

Speaker: Loren Norman

Introducing Canvas

• Width and height is required to put inside the <canvas> tag.
• <!– if not supported comment will display –>
• Coordinate’s 0,0 is x,y
• rectangles are the only shape built into the canvas

Paths

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.closePath();

Arcs

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

Curves

two different types of curves are available, quadratic and bezier

ctx.quadraticCurveTo(xp1x, xp1y, x, y);
ctx.bezierCurveTo(xp1x, cp1y, cp2x, cp2y, x, y);

Drawing Text

ctx.fillStyle = “blue”;
ctx.font = “24pt Helvetica”;
ctx.fillText(text, x, y);

Drawing Images

var image = new Image();
image.src=’myImage.png’;

image.onload = function() {
ctx.drawImage(image, x, y);
};

// scaling the image
ctx.drawImage(image,x,y,width,height);

// slicing images
drawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Animation

//nothing canvas-specific
setInterval(animateFunc, msBetweenFrames);

Transformations

//move around
ctx.translate(x, y);

//rotate around
ctx.rotate(radians);

//shrink or stretch
ctx.scale(xMultiplier, yMultiplier);

// store/recall a transform state
ctx.save();
ctx.restore();

Other Stuff

• SVG similarities?
• rendering to/from images
• design patterns
• awesome libraries

Book

JavaScript: The Good Parts

reMIX South, Web Design

jQuery Best Practices and Key Techniques

August 6th, 2011 by Matt Haff

Speaker: John Agan

Sorry for all the bullet points, but at least it’s straight forward

Negative Effects

• Sites end up with multiple scripts everywhere and no framework to keep it in sync
• Code becomes hard to follow and maintain
• jQuery becomes overused in place of well formed HTML and CSS

Best Practices

• Break up big functions
• Don’t nest multiple functions
• code is cleaner
• easier to follow and maintain
• allows for reuse of code / DRY (do not repeat yourself)
• debugging is made easier
• Stop writing HTML blocks in JavaScript strings
• It’s hard to work with
• multiple nested elements will make it worse
• unnecessary string concatenation
• Caching Your Selectors
• be aware of the performance hit when overusing selectors
• assign selectors to variables rather than reselecting – var selector = $(“element”)
• start with the known parent elements and use them as the context - $(selector, context)
• every time you write a selector, it will requery it
• Writing Better Performing Selectors $(selector, context)
• ID & Element Selectors are the fastest – $(“#ID, Element, form input”)
• Class Selectors are slower – $(“.ClassName”) doesn’t work in ie5- ie8
• Pseudo & Attribute Selectors are the slowest – $(“:visible, “checked, [attribute=value]“)
• Write Better HTML and CSS
• jQuery should provide the functionality, not the styling and layout.
• Use CSS classes for style, rather than jQuery helpers like .hide(), .css() and .hover()
• Think about your selectors when writing the mark-up
• Of course, there are always exceptions

Key Techniques

• Take Advantage of Data Attributes $(“element”).data()
• data-[anything] = “value”
• “class” is for style, not data
• jQuery 1.2.3+ supports .data()
• Compliant in HTML5 spec
• Valid on any element
• $.data(“#id”, “key”, “value”) is much faster
• Embrase Unobtrusive Javascript (UJS)
• don’t mix it in with your HTML elements ex. <input type=”button” onClick=”…” /> 
• Separation of functionality (the “behavior layer”) from a Web page’s structure/content and presentation
• Code maintenance and deployment is simplified
• Debugging can be easier
• Optimizing Event Delegation
• An efficient way to watch for an event of a large number of elements
• Works by binding to a point father up the DOM tree and watching for bubbling events
• Not all binding methods are equal in performance.
• .bind() – Listens for events on existing elements
• .live () – Listens for events on existing and future elements, but watches at the top of DOM tree
• .delegate() – Listens for events on existing and future elements, but won’t listen past context
• Utilize Custom Events
• Update multiple components asynchronously
• Enables your code to be event driven
• Allows for easy extensibility
• Stop Editing the DOM Directly
• Multiple .append() can become very slow
• Use .detach() to manipulate elements offline and then .append() when done
• Use createDocumentFragment() to build your HTML before pushing to the DOM
• Know Your Scope
• Avoid global variables
• Maintain scope with $.proxy()
• Use auto-executing anonymous functions when possible
• Use The Native API When Possible
• Sometimes it’s faster to just use JavaScript
• jQuery does it’s best, but it is still another layer and slightly more overhead
• Wrapping an element for just an attribute can be expensive.
• Think About The Big Picture
• Don’t code for just one element
• Use a framework to manage interactions and data
• Breakup JavaScript into multiple files
• Minify when deploying to production