I haven’t done a paper prototype since my 3rd year of University, and when I did, it was Black/White on lined paper.  Feeling the need to brush up on some basic UX  practices, I decided to let my work/nerdy side invade my Halloween (yes this post is a few months late).

Tools Used:
Omnigraffle, Photoshop, TextMate, CSS
Pencil+Foam Core, Scissors+Paper, Glue Stick, Sharpee Markers

All purchased at local art store for < $20 (much better than Adobes $1,000 CS suite)

Next came the planning and comparison shot:

Please note the "Keyboard Cat" video open in the other tab

Now I add those famous background colors using construction paper.  “Don’t you just like the feeling of cutting into construction paper with scissors?” -Stewie Griffon.  When I went to the art store, I was delighted to see a shelf of paper with the labels: Light Blue, Cerulean blue, baby blue and finally #3B5998.  Well not quite, but this was close enough.  On a side note, I actually used #3B5998 (Facebook blue) for a UI-prototype once and a co-worker said (there’s something weird about that blue, I don’t like it… I lol’ed, then changed it to green).

I think people recognize this just by the banner colours

Now we add in the main page navigation.  I’ve always liked Facebook’s tabbing system, now I get to recreate it with a marker!  I was hoping the FB logo would turn out better, but I drew it in with a white marker (who knew those existed).  Side rant, when Facebook changed their UI a year back and redesigned the left panel I remember complaining because the Title/Value pairs (ie: Name/Ian Chan) swapped the standard Bold/Non-Bold.  A year later I am still resistant, but for the sake of accuracy I reused their styles.  I wonder if Jakob Neilson has anything to say about that issue.

And empty wall, that's sadly what my Facebook wall is usually like

Now starting to fill in the blanks.  I cheated a bit and printed out some photos of my friends as I wasn’t about to redraw those with a Red, Green and Blue marker (although I am pretty good at pointillism).  When doing the share module (located at the top of the wall area) it made me think of a few things.  First, the text “What’s on your mind?” doesn’t really make much sense if I am about to post a video or picture… does it?  Next I thought – Who writes that copy?  Like seriously.  Given the endless list of Engineers, Managers, IA people at Facebook it really did make me curious.  Lastly I began to wonder if they have done A/B tests to see what increases a user’s desire to interact and keep Facebook busy with useless content.  My suggestions for an A/B/C test:

A: “What time is it?”    (has potential of millions of new updates depending on user’s Internet connection)
B: “Why aren’t you outside doing something productive?”
C: “What is your cat doing?”

sidenote1: I’ll never be a copywriter for Facebook :(
sidenote2: Twitter uses “What’s Happening?” I like that slightly better.

My back was begining to hurt at point, now I understand why architechs/designers use drafting tables

And then we fill in the wall posts.  Nothing too fancy here, however as I was coloring in the lines, it reminded of a a recent implementation of a similar feature.  On blogs and other systems that allow commenting, you will sometimes see replies, or cascaded comments.  When I first approached the problem I came up with something, wrote an SQL query on a napkin on my bus ride home and with a few tweaks, I got it to work.  For anyone who is actually reading this or just stumbling upon this post via Google, heres a free-bee (insert metas here: SQL, comment, replies, embedded, cascade, query)

SELECT *
FROM comments
LEFT JOIN users ON comments.author = users.uid
WHERE post = $post
ORDER BY CASE WHEN parentid = 0
THEN pid
ELSE parentid
END DESC, pid DESC
OFFSET $start
LIMIT $limit

(All honesty, I just wanted to see if Word-Press supported SQL language tag, it does.  This code will work, but might not scale that well, don’t know about that *, or JOIN … yuck :()

I cut myself with an exacto knife cutting out the profile area.

My girlfriend, who is also a computer geek joined in the fun and made YouTube.  We went out as a couples costume.. we were social media.

This was more pixel accurate than mine...

Well that’s how a UI geek makes a Halloween costume.  At a bar later on that night a guy came up to me and asked, “Dude, that’s an awesome costume, you obviously do something related to this for work.”  Is using a giant black marker easier than writing IE6 compliant CSS? …. I’ll get back to you on that.  On a finishing note, I have to quote this one scary looking drunk guy who walked by me later that night, on the street stumbling out of a bar.  As he approached me I thought he was going to mug me, but instead he said:

“Oh My God! It’s Facebook and Youtube… OMG I use those websites!!!!! I use that website!!”

Advertisements