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).
Omnigraffle, Photoshop, TextMate, CSS
Pencil+Foam Core, Scissors+Paper, Glue Stick, Sharpee Markers
Next came the planning and comparison shot:
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).
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.
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.
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 :()
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.
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!!”