August 5, 2009 - Comments Off on Liveblogging DelveUI: Marrying Web Analytics and User Experience

Liveblogging DelveUI: Marrying Web Analytics and User Experience

Lou Rosenfeld - @louisrosenfeld - Marrying Web Analytics and User Experience

  • WA and UX people should not work in silos. They need to be managed and integrated together.
  • UX is about the WHY: user motivations. WA is about the WHAT: user actions.
  • It's not useful to know what is happening if you don't know why. Conversely, it's not useful to know why users act if you don't know what it is that they're doing.
    • What are the most common search terms on your site? Why are people searching for these items?
    • Use these search queries (what) to drive your task analysis (why)
  • WA use a top-down approach with data: defining metrics and analyzing them. UX use a bottom-up approach: looking at data to find patterns and conclusions. Both of these approaches are necessary! Top-down makes sure you're achieving you goals, bottom-up catches outliers.
  • Stay away from them middle data--look at the short head instead of the long tail.
  • Canned reports such as Google Analytics are only a starting point. Use this data as an opportunity to do top-down and bottom-up.
  • UX need to get comfortable with measuring the unmeasurable.
    • Measure your site content's quality. Although this is subjective, use parameters and systems (currency, authority, popularity, feasibility) to objectify them a bit.
  • WA need to get comfortable with stories: intuition and mistakes.

Published by: christygurga in The Programming Mechanism

April 16, 2009 - Comments Off on Typography for the Web—NY Web Standards Meetup

Typography for the Web—NY Web Standards Meetup

This month, I presented "Typography for the Web" at the NY Web Standards Meetup. Right now, typography on the web has been receiving lots of attention from both designers and developers alike—designers wanting to know what their constraints are and developers wanting to know the best practices for implementing advanced typography. I covered a wide range of topics so that people can continue to research and learn about this rapidly-changing field.

Slides, photos, video and audio from "Typography for the Web"

Listen to the event: [audio:nywebstandardsTypographyForTheWeb-20.mp3]

Watch "Typography for the Web" on Ustream.tv and view photos from it on Flickr!

Here is a list of resources that follow along with the topics covered in the presentation:

Building a foundation

Formatting headings

Noticing the details

And more!

What are some of your favorite typography resources? How do you feel about one type of replacement technique over another? Please continue the conversation in the comments below

Join the New York Web Standards Meetup at Meetup.com, follow us on Twitter and join our LinkedIn group!

Published by: christygurga in The Programming Mechanism
Tags: ,

April 14, 2009 - Comments Off on NY Web Standards Meetup—Typography for the Web

NY Web Standards Meetup—Typography for the Web

The New York Web Standards Meetup Group will meet this Thursday (16 April 2009) at theMechanism at 7:00 pm.

Christy Gurga (theMechanism) will present different perspectives on formatting type online and demonstrate methods you can use right away. While only basic CSS knowledge is required, Christy will cover advanced techniques that are applicable for front-end developers of any level.

You'll learn how to establish the CSS foundation for your type using relative font sizes and ems, implement text replacement practices for specially formatted headers and polish your typography with extra detail.

16 April 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please note—This meetup is currently full and the waiting list is quite long. If you know you won't be able to make it, please update your RSVP.

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

March 29, 2009 - 2 comments

Confessions from the Twittersphere

I've been seeing another networking platform on the side...

Tossed to the gutter was my sexy old flame: Blogging — my occasional habitual activity of scribbling down thoughtful musings. My new sleazier and easier squeeze not surprisingly involves significantly less brain power. Twittering is fast food for the nerdling masses, but instead of increasing their waist lines, a purified and constant diet of tasty Tweets will likely shrink their brains faster than a Fail Whale caught in an updraft.

Back in the good old days of last year, people still communicated using a significant number of words and syllables to convey a complete thought — whether it was through actually jiggling their mouth parts and expelling noises with other human beings present, or through printed and later online media. Now, tapping 140 character quips is substituting once meticulously crafted ideas with “off-the-cuff” communication. Who has time with a busy schedule and diet of downloading free music, poking at a mobile device, and checking their friend count on Facebook to actually bother talking anymore?

For the people that Twitterers believe hang on their every word, they can share every thought that springs into their pointy skulls. Having a fresh cup of coffee? I must tell my followers. Sniffed a foul whiff of some particularly stinky cheese? Please, do tell the followers! Raining out; saw a squirrel; drew a fresh breath; tickled your pet toad; spotted a funny shirt or does your little tummy hurt? Please be sure to let those mysterious avatared creatures who are following your every random thought know immediately — as they must be kept in this timely loop of baboonery through your mighty Tweets.

I openly admit, I Twitter more than a geophagic licks earth. But when you share every thought, does everyone keep listening? Like the “lad who cried canis lupus”, knuckleheads who gleefully announce every single thought, lose my attention quickly. In real life, people that shout every thought that enters their skulls are not only shunned by society, but are usually referred to as “Apeshit.” However, in the world of Twitter, many of these serial chatterboxes are superstars.

For Twitter rock star Guy Kawasaki @guykawasaki, with over 21,000 updates and over 100,000 followers, Twitter is his minute by minute diary, and quite possibly, his current career until Twitter goes the way of MySpace. His endless announcements and links fuel his fans to pick up his books and line up to hear him talk (yep, talk...) about Twittering. People I'm certain, hang on his and many other Twitterers every written word, and as an indirect result, the days of expanded communication could very well be coming to an end. Who needs to have an actual conversation when you are having a conversation with hundreds and possibly thousands of eager followers?

In this age of speed and obvious lack of attention, how will magazines, books and newspapers deal with the lack of interest in expansive thoughts? They will be severely marginalized, to say the least. Newspapers are yesterday’s news. The press was a precursor to, and now a minor footnote to, full-on digital communication. Michael Wolf, columnist for Vanity Fair and the founder of news aggregator newser.com says that the newspaper is a dead medium, and I do agree. If you want a snapshot of the news, go to an online news aggregator like Alltop.com (oddly enough, created by Guy Kawasaki to support his endless desire to post aggregated news stories to his Twitter account). Follow trending topics on Twitter and you've got a tiny snapshot of anything that's important this second.

Not all is bad for the serial Twitterer. One of the things that makes Twitter an innovative solution is that the writer isn't expected to craft anything brilliant at all, making it an ideal solution for the largest possible user base. Depending on the Twitterer, 140 words can either be a link to an interesting story, a Re-Tweet of something someone else has already Twittered about, or if it sucks, possibly the sound of one hand clapping in a pixellized forest of sumac. Can you hear the virtual crickets as the masses embrace and virus forth with this technology on the planet? I can.

Twitter is now everywhere, which makes it very popular, and dare I say, interesting for business yet simultaneously less interesting to everyone else. John Stewart has ranted about it, CNN as well as all the major networks have reported on people, stars and politicians using it, and the CBS Morning Show did a story on it this morning. Once everyone is at the party however, it's time to find another party. Knowing that politicians are now using Twitter from the floor of Congress to send quippy notes to their reptilian minions spooks me. There’s something childish about John McCain @SenJohnMcCain Twittering "On my way to tape meet the press." It resonates with me like a high schooler talking about going to Dunkin’ Donuts. Really John, who cares?

The amazing social connections that can occur when blending Twitter with LinkedIn, Facebook, blogging, Flickr, Last.fm, technorati, feedburner and other social media systems in order to build out a personally web-rounded personality is what interests me. This is where social media truly has long lasting power. Use Twitter to announce some new photos to another audience that won't necessarily see your Flickr account, for example. The goal is to merge these various social networking audiences to build a much more powerful network for yourself and to introduce people who wouldn’t have normally met in other circumstances. The most important thing if you take this advice is to make sure that you stay on message.

I'm curious about what footprint the folks who have gone full Twit and successfully abandoned other social networks will leave behind when they eventually have thought chips built in their monkey skulls, making the act of clicking a keyboard or tapping into a mobile device irrelevant for telling the masses your baby just made a potty. Google has begun to crawl Twitter blogs, but in an online society that values the immediacy of communication, I wonder how interesting what your kid burped up on Saturday will be to you or anyone in the future.

So, for the old school bloggers (holla!), perhaps there's never been a better topic to actually blog about.

One thing's for sure, I'm 6313 characters over my Twitter yak limit and you read it to the end. See, there's hope for you yet. Maybe even someday, we can have a personal conversation again, like humans used to have last year.

Dave Fletcher is the Founder / Creative Director at theMechanism, a multi-disciplinary design agency with offices in New York, London and Durban, South Africa. Until they embed the chip into his monkey brain allowing him to communicate directly with you at any time and anywhere, you can follow his mindless quipping @davefletcher.

Published by: davefletcher in The Thinking Mechanism
Tags:

March 19, 2009 - 8 comments

SXSWi Resources Roundup

Whew! It's been quite a time at South By Southwest Interactive--lots of panels, parties, and good eating! Since there are a multitude of people who have taken amazing notes during the panels and core conversations, I'll spare you those details, but just as important as what's said during the panels is what you can take away from it! Here is a list of the "take-aways:" the twitter usernames, the Web sites and the books. Here are some ideas and resources you can use right away!

Overarching Themes:

  • Collaboration within companies, collaboration between client & web team, collaboration between web teams
  • Openness with coworkers and with clients
  • Don't do work for the sake of doing work; create deliverables that have applicable value
  • Some clients (and even workers) respond better to many lo-fidelity steps (sketching, collage, mood boards) to buy into the design process before seeing a polished design
  • Agile development! Working in quick phases to roll out a product. Everyone's talking about it, but it may not be good for every team or every client

Web Typography: Quit Bitchin' and Get Your Glyph On

See the slides at SXSW Typography

Links:


Being a UX Team of One

  • Leah Buley - Adaptive Path - @ugleah

Highlights:

  • Ditch the concept of the "singular genius designer." The designer is the person who takes everyone's ideas and creates a cohesive solution to the problem
  • Always sketch out at least six layout ideas!
  • Get as many people (developers, clients, shareholders) involved as early as possible

Links:

Books:


How to Create a Great Company Culture

Highlights:

  • A good fit is achieved by every team member having the same core values
  • Always remain passionate about what you're doing. Even if you find yourself in a situation you don't like, find a small thing to focus on and remain passionate

Books:


How MacGyver Would Do Design Research

  • M Jackson Wilkinson - Viget Labs - @whafro

Highlights:

  • Do as much dual-work as possible (creating wireframes in CSS/HTML, reusing documentation, etc)
  • Know what not to research; pay attention to what's already been done
  • Do user testing with fewer people, have them each do more tasks

Links:


Wireframes for the Wicked

Highlights:

  • Choose your wireframe type based on the audience; you may do different wireframes for the client vs the developer
  • Feel free to mix hi- and lo-fidelity methods to achieve the appropriate type of wireframe
  • Sketching-style wireframes may make clients feel more comfortable with sharing ideas and adding input
  • Michael Angeles has the coolest notebooks! Sketching the User Experience

Links:


Designers and Developers: Why Can't We All Just Get Along?

Highlights:

  • Speak in terms of problem/solution instead of specific features--the developer may have a better way to solve the problem
  • Include a developer in early meetings to avoid promises of unrealistic features and to help brainstorming
  • Designers should make the effort to learn as much as they can

Links:


Collaboration or Collision: Achieving Design Studio Bliss

Highlights:

  • Bring your clients into the brainstorming session
  • Show your clients a variety of mood board concepts; This is the stage for back-and-forth conversations and for feedback. Take this knowledge and deliver one cohesive design mock-up. Delivering several designs diminishes your expertise in finding the right solution.
  • Educate your clients on the value of your product; don't work to meet unreasonable deadlines
  • Don't let a single designer get too involved in the "ownership" of his/her design. Take it away and let someone else work on it.
  • Don't design behind closed doors, open up the conversation!

Books:

March 11, 2009 - 6 comments

Quest for the Right jQuery Lightbox

Lightbox, the technique of displaying large images in modal windows, has become a familiar UI element across the web. Since Lokesh Dhakar released it in 2006, many variations on Lightbox have popped up, each claiming their own strength: optimized code, easier implementation and/or slicker transitions. The current Lightbox 2 uses the Prototype and script.aculo.us JavaScript libraries, but I was looking for a jQuery version to fit my needs. Additionally, I was looking for something I could quickly implement out-of-the-box (so that I could better spend my time writing a blog post!). Here's how my decision was made:

thickbox
Thickbox
Thickbox, recommended to me by @kcdunstan is a very popular jQuery Lightbox and is even hosted on the jQuery website.

Pros: Can be used with images, inline content, iFrames (people still use iFrames?) and Ajax. Seems to have a good support community behind it; John Resig is known to respond to some support issues.
Why I didn't choose it: The out-of-the-box look doesn't have nice buttons and transitions.

jqmodal
jqModal
jqModal, recommended to me by @sstrudeau, is very much a bad-ass developer tool.

Pros: Very lightweight and customizable for the person who knows what he/she is doing. Can be used with images, inline content, iFrames and Ajax, and specializes in dialog alert boxes.
Why I didn't choose it: Way too complex for the specific project I'm working on. I'd want to use this on a highly-branded site where I've crafted a unique interface element instead of the familiar Lightbox we know and love. Also, I couldn't determine if there is an easy way to use this in "gallery" mode where I want Previous/Next buttons to go between a set of images.

prettyphoto2
prettyPhoto
I found prettyPhoto via a forum I found through a Google search. As the name states, it's a really nice looking Lightbox.

Pros: Really nice out-of-the-box styling options, and supports single or gallery photos. Good Web 2.0 rounded corners, and I like the buttons.
Why I didn't choose it: This was nearly my final choice, but I don't like the tab-like box above the photo for the title. The project I'm using will have a longer description for the title, and I want it below the picture. I would definitely use this for a gallery where the photos either have no title or short titles, though.

jquerylightboxplugin
jQuery lightBox plugin
The winner! jQuery lightBox plugin was the first one I researched, and then it was also recommended to me by @thetristan and @twenty3x. It's the closest match I've seen to the official Lightbox 2.

Why I chose it: Familiar Lightbox styling, nice transitions, gallery support; it's got what I want right out of the box.

In short, the requirements of your project will dictate which jQuery Lightbox you should use. jQuery lightBox plugin seems to behave the closest to Lightbox2, and jqModal is the most customizable and developer-centric. I would love to hear about any other jQuery Lightbox recommendations in the comments or respond to me on Twitter, @christyyyjoy.

EDIT: @pdenya sent along the Lightbox Clones Matrix which compares Lightboxes by library, size and features. Nice!

Published by: christygurga in The Programming Mechanism
Tags: ,

February 26, 2009 - Comments Off on Two for Web developers

Two for Web developers

I wrote a couple of posts recently that might be of interest to Web developers. The first was on canonical URLs and the second was on the Fileinfo extension for PHP.

Google, Yahoo and Microsoft now support a new value for the rel attribute of the link tag that allows one to publicly specify their preferred version of a URL. The value is "canonical" and it's simple to use: <link rel="canonical" href="http://your-site.com/preferred/url/" />. Read my post

The PHP Fileinfo extension is useful for determining the MIME types of files. The returned type is not based on a file's extension, but rather on certain byte sequences at specific positions within the file.

The first post I wrote describes how to compile and install Fileinfo on a Media Temple dedicated virtual server. The second talks about how to use Fileinfo and includes a wrapper class that might be helpful.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

February 17, 2009 - Comments Off on NY Web Standards Meetup—Advanced Google Maps API

NY Web Standards Meetup—Advanced Google Maps API

Please note—The NY Web Standards Meetup: Advanced Google Maps API has been rescheduled from 19 February 2009 to 26 February 2009.

The New York Web Standards Meetup Group will meet next Thursday (26 February 2009) at theMechanism at 7:00 pm.

After a brief intro to/review of the Google Maps API, Jeffrey Barke (theMechanism) will cover some advanced Google Maps API topics, including server- and client-side clustering, creating custom base maps and some GIS-like functions.

Attendees should have some experience with JavaScript and familiarity with the Google Maps API.

26 February 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

January 19, 2009 - Comments Off on NY Web Standards Meetup—Cloud computing: 10gen’s Mongo DB

NY Web Standards Meetup—Cloud computing: 10gen’s Mongo DB

The New York Web Standards Meetup Group will meet this Thursday (22 January 2009) at theMechanism at 7:00 pm.

Geir Magnusson (10gen) will talk about 10gen's MongoDB, an object-oriented DBMS. It is neither a relational database nor even "table oriented" like Amazon SimpleDB or Google's BigTable

22 January 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism